/* HeroesFarm — HUD HTML (v3). Fica por cima do canvas do Godot.
Base de layout: 1366x768; tudo escala junto (ver hud.js -> fit()). */
@font-face{font-family:"HF Sans";src:url(fonts/signika-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"HF Sans";src:url(fonts/signika-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"HF Sans";src:url(fonts/signika-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"HF Title";src:url(fonts/alegreya-sc-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"HF Title";src:url(fonts/alegreya-sc-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
.hf{
--a:"assets/";
--ink:#f3e9d2; /* texto principal (pergaminho claro) */
--muted:#a9b3c2; /* texto secundário */
--gold:#f2c14e; /* títulos */
--gold-deep:#b77b1c;
--bronze:#8a6a3a;
--navy:#101826;
--navy-2:#172235;
--red:#d83a3f;
--blue:#2f7fe0;
--green:#6fd36a;
--cyan:#6fc9ff;
--shadow:0 2px 0 #05070b,0 0 6px rgba(0,0,0,.55);
position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden;
font-family:"HF Sans","Signika","Trebuchet MS",system-ui,sans-serif;color:var(--ink);
-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;
}
.hf *{box-sizing:border-box}
.hf-stage{position:absolute;left:0;top:0;width:1366px;height:768px;transform-origin:0 0}
.hf-stage > *{pointer-events:auto}
.hf img{display:block;image-rendering:auto;-webkit-user-drag:none}
:where(.hf) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.hf button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* ---------- molduras nine-slice ---------- */
.fr-lg{border:16px solid transparent;border-image:url(assets/f_panel_lg.png) 33 fill / 16px stretch}
.fr-md{border:16px solid transparent;border-image:url(assets/f_panel_md.png) 33 fill / 16px stretch}
.fr-sm{border:14px solid transparent;border-image:url(assets/f_panel_sm.png) 33 fill / 14px stretch}
.fr-pill{border-style:solid;border-color:transparent;border-width:9px 14px;border-image:url(assets/f_pill.png) 18 28 fill / 9px 14px stretch}
.fr-slot{border:14px solid transparent;border-image:url(assets/f_slot.png) 28 fill / 14px stretch}
.fr-slot-on{border:14px solid transparent;border-image:url(assets/f_slot_on.png) 28 fill / 14px stretch}
.fr-gold{border:12px solid transparent;border-image:url(assets/f_btn_gold.png) 25 fill / 12px stretch}
.fr-blue{border:12px solid transparent;border-image:url(assets/f_btn_blue.png) 25 fill / 12px stretch}
/* ---------- textos ---------- */
.t-title{font-family:"HF Title","Alegreya SC",Georgia,serif;font-weight:800;color:var(--gold);letter-spacing:.04em;text-shadow:0 2px 0 #3a2208,0 0 8px rgba(0,0,0,.6)}
.t-out{text-shadow:var(--shadow)}
.num{font-variant-numeric:tabular-nums}
/* ---------- barras ---------- */
.bar{position:relative;height:16px;border-radius:3px;background:#0a0f18;box-shadow:inset 0 1px 3px #000,0 0 0 1px #3b2c16,0 0 0 2px #0a0707;overflow:hidden}
.bar > i{position:absolute;inset:0 auto 0 0;width:0;border-radius:2px;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.bar > i.ghost{background:#ffe7a8;opacity:.75;transition:width .6s ease .35s}
.bar > i.fill{background:linear-gradient(#ff8a80 0 14%,#d8373f 15% 62%,#9c1f27 63%)}
.bar.blue > i.fill{background:linear-gradient(#9fd2ff 0 14%,#2f7fe0 15% 62%,#1b4f9c 63%)}
.bar.green > i.fill{background:linear-gradient(#b8f5a8 0 14%,#4fb54a 15% 62%,#2d7a2a 63%)}
.bar > b{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:700;line-height:1;text-shadow:0 1px 0 #000,0 0 3px #000;letter-spacing:.02em}
.bar.slim{height:10px}
.bar.slim > b{font-size:10px}
/* ---------- herói (topo esquerdo) ---------- */
.hero-card{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:2px}
.portrait{width:84px;height:84px;padding:0;display:grid;place-items:center;position:relative}
.portrait img{width:64px;height:64px;border-radius:3px;object-fit:cover;image-rendering:auto}
.hero-info{width:316px;min-height:88px;padding:4px 4px 3px;display:flex;flex-direction:column;justify-content:center;gap:3px}
/* 25/09: ataque, defesa, duelos e Atributos no cartão do topo (o painel Seu Herói saiu) */
.hstats{display:flex;align-items:center;gap:7px;margin-top:2px;white-space:nowrap}
.hstats .stat{font-size:13px;gap:3px}
.hstats .stat img{width:15px;height:15px}
.hduel{display:flex;align-items:center;gap:4px;white-space:nowrap;flex:none;font-size:12px;font-weight:700;color:#e8d6ae;padding:0 6px 0 2px;height:20px;border-radius:3px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(214,170,90,.2)}
.hduel img{width:16px;height:16px}
.hduel .hl{color:var(--gold)}
.hduel:hover{filter:brightness(1.2)}
.hattr{position:relative;margin-left:auto;height:26px;padding:0 4px;display:flex;align-items:center;font-size:12.5px;font-weight:700;color:#fff;text-shadow:0 1px 0 #041634;border:8px solid transparent;border-image:url(assets/f_btn_blue.png) 25 fill / 8px stretch;transition:filter .12s,transform .12s}
.hattr:hover{filter:brightness(1.15)}
.hattr:active{transform:translateY(1px)}
.hattr .pts{right:-18px;top:-17px;min-width:20px;height:20px;font-size:11px;line-height:16px}
.hero-info .row{display:flex;align-items:center;gap:6px}
.hero-info .name{font-size:19px;font-weight:700;flex:1}
.hero-info .lvl{font-size:16px;font-weight:700;color:var(--gold)}
.hero-info .row img{width:20px;height:20px}
.hero-info .bar.hp{height:16px}
.hero-info .bar.xp{height:11px}
.hero-info .bar.xp b{font-size:10px}
/* ---------- moedas ---------- */
.currencies{display:flex;gap:12px;margin-top:-10px}
.pill{width:150px;height:46px;display:flex;align-items:center;gap:6px;padding:0 2px}
.pill img{width:28px;height:28px;flex:none}
.pill .v{flex:1;text-align:center;font-size:17px;font-weight:700}
.plus{width:26px;height:26px;flex:none;display:grid;place-items:center;font-weight:700;font-size:18px;line-height:1;color:#fff6de;text-shadow:0 1px 0 #4a2a06;
border:6px solid transparent;border-image:url(assets/f_btn_gold.png) 25 fill / 6px stretch;transition:transform .12s,filter .12s}
/* O "+" desenhado com duas barras (01/10, dono: "alinhe e centralize inclusive o + do botão"): a letra da fonte ficava
baixa e torta; as barras ficam no meio exato do botão em qualquer tamanho. */
.plus{position:relative;font-size:0;padding:0}
.plus::before,.plus::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff6de;border-radius:1px;box-shadow:0 1px 0 rgba(74,42,6,.9)}
.plus::before{width:72%;height:22%}.plus::after{width:22%;height:72%}
.plus:hover{filter:brightness(1.12);transform:translateY(-1px)}
.plus:active{transform:translateY(1px)}
.pill.bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
.pill.bump .v{color:#fff6c9;text-shadow:0 0 8px #ffcc4d}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.08)}100%{transform:scale(1)}}
/* ---------- atalhos topo direito ---------- */
.topnav{position:absolute;right:10px;top:10px;display:flex;gap:6px}
.navbtn{position:relative;width:74px;height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;transition:transform .12s,filter .12s}
.navbtn img{width:38px;height:38px;margin-top:-4px;transition:transform .15s}
.navbtn span{font-size:12px;font-weight:600;line-height:1;margin-top:1px;text-shadow:0 1px 0 #000}
.navbtn:hover{filter:brightness(1.15)}
.navbtn:hover img{transform:translateY(-2px) scale(1.06)}
.navbtn:active{transform:translateY(1px)}
.navbtn.on{border-image-source:url(assets/f_slot_on.png)}
.badge{position:absolute;right:-4px;top:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:radial-gradient(#ff6b5e,#c21d24);border:2px solid #fff1d6;box-shadow:0 1px 0 #000;font-size:12px;font-weight:700;line-height:16px;text-align:center;animation:pulse 1.6s ease-in-out infinite}
.badge:empty,.badge[data-n="0"]{display:none}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
/* ---------- painéis laterais ---------- */
.panel{position:absolute;display:flex;flex-direction:column;padding:0 2px;transition:box-shadow .15s}
.panel .head{display:flex;align-items:center;gap:6px;height:30px;flex:none;margin-top:-4px;border-bottom:1px solid rgba(214,170,90,.25);padding-bottom:4px;margin-bottom:6px;cursor:grab;touch-action:none}
.panel .body{flex:1;min-height:0}
.panel{isolation:isolate}
.panel.dragging{z-index:5;opacity:.93;box-shadow:0 12px 30px rgba(0,0,0,.55);filter:brightness(1.08)}
.panel.dragging .head{cursor:grabbing}
/* Canto de ajuste (largura e altura): na quina de fora da moldura (.fr-lg tem 16 px de borda), embaixo à direita nos painéis
da esquerda e embaixo à esquerda nos da direita. Fica na borda, não dentro do card. */
.grip{position:absolute;right:-19px;bottom:-19px;width:24px;height:24px;cursor:nwse-resize;touch-action:none;opacity:.6;transition:opacity .15s;z-index:3}
.grip::before{content:"";position:absolute;right:3px;bottom:3px;width:12px;height:12px;border-right:3px solid #e2bd6e;border-bottom:3px solid #e2bd6e;border-bottom-right-radius:2px;filter:drop-shadow(0 1px 1px #000)}
.grip::after{content:"";position:absolute;right:9px;bottom:9px;width:5px;height:5px;border-right:2px solid #e2bd6e;border-bottom:2px solid #e2bd6e;opacity:.8}
.panel[data-side="right"] .grip{right:auto;left:-19px;cursor:nesw-resize}
.panel[data-side="right"] .grip::before{right:auto;left:3px;border-right:0;border-left:3px solid #e2bd6e;border-bottom-right-radius:0;border-bottom-left-radius:2px}
.panel[data-side="right"] .grip::after{right:auto;left:9px;border-right:0;border-left:2px solid #e2bd6e}
.panel:hover .grip,.panel.resizing .grip{opacity:1}
.panel.fixed .grip{display:none}
.panel.collapsed .grip{display:none}
.panel .head img{width:26px;height:26px}
.panel .head .t-title{flex:1;font-size:17px}
.mini{width:24px;height:24px;flex:none;display:grid;place-items:center;font-weight:700;font-size:15px;line-height:1;color:var(--ink);
border:6px solid transparent;border-image:url(assets/f_slot.png) 28 fill / 6px stretch;transition:filter .12s}
.mini:hover{filter:brightness(1.25)}
.panel.collapsed .body{display:none}
.panel.collapsed{height:auto!important}
.p-missions{width:280px}
.p-chat{width:300px}
.p-map,.p-hero,.p-loot{width:272px}
.quests{overflow:auto;scrollbar-width:thin;scrollbar-color:#8a6a3a transparent}
.quest{display:grid;grid-template-columns:34px 1fr;column-gap:8px;row-gap:3px;padding:5px 2px 7px;border-bottom:1px solid rgba(255,255,255,.06)}
.quest:last-child{border-bottom:0}
.quest img{grid-row:span 3;width:32px;height:32px;align-self:start;margin-top:2px}
.quest .q-t{font-size:15px;font-weight:700;line-height:1.1}
.quest .q-d{font-size:12.5px;color:var(--muted);line-height:1.15}
.quest .bar{height:13px;margin-top:3px}
.quest .bar b{font-size:10.5px}
.quest.done .q-t{color:var(--green)}
.quest.flash{animation:qflash .9s ease}
@keyframes qflash{0%,100%{background:transparent}30%{background:rgba(111,211,106,.18)}}
.log{display:flex;flex-direction:column;gap:5px;overflow:hidden;font-size:13px;line-height:1.25;flex:1;mask-image:linear-gradient(#000 80%,transparent)}
.log p{margin:0;display:grid;grid-template-columns:44px 1fr;gap:4px;animation:logIn .35s ease}
.log time{color:#8f9aab}
.log .gold{color:var(--gold)}.log .blue{color:var(--cyan)}.log .bad{color:#ff7d74}.log .good{color:var(--green)}
@keyframes logIn{from{opacity:0;transform:translateX(-8px)}}
.mapbody{display:flex;flex-direction:column}
.minimap{position:relative;flex:1;min-height:60px;border-radius:3px;overflow:hidden;cursor:zoom-in;background:#20361c;box-shadow:0 0 0 2px #0b0806,0 0 0 3px #6d5230}
.minimap::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 18px rgba(0,0,0,.55);pointer-events:none}
.mm-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.mm-world > img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.mm-marks{position:absolute;inset:0}.mm-poi,.mm-mob{position:absolute;inset:0}
.poi{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;transform:rotate(45deg);background:#f2c14e;box-shadow:0 0 0 1.5px #3a2208,0 0 6px rgba(242,193,78,.8)}
.poi.seen{background:#9fd28c;box-shadow:0 0 0 1.5px #1b3316}
.mob{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#ff4d42;box-shadow:0 0 0 1.5px #3a0b0b}
.mob.ply{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:#58a8ff;box-shadow:0 0 0 1.5px #0b2345;z-index:2}
.mob.boss{width:10px;height:10px;margin:-5px 0 0 -5px;background:#b23cff}
.minimap .me{position:absolute;z-index:2;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#7fe3ff;box-shadow:0 0 0 2px #06324a,0 0 10px 3px rgba(127,227,255,.8)}
.minimap .me::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(127,227,255,.7);animation:ping 1.6s ease-out infinite}
@keyframes ping{from{transform:scale(.4);opacity:1}to{transform:scale(1.5);opacity:0}}
.explore{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-top:6px;flex:none}
.explore span:first-child{color:var(--cyan);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.explore b{color:var(--gold)}
.herobox{display:grid;grid-template-columns:70px 1fr auto;gap:6px;align-items:center;overflow:hidden}
.herobox .portrait{width:70px;height:70px}
.herobox .portrait img{width:52px;height:52px;image-rendering:auto}
.herobox .nm{font-size:17px;font-weight:700;line-height:1}
.herobox .lv{font-size:14px;color:var(--gold);font-weight:700;margin:2px 0 3px}
.stat{display:flex;align-items:center;gap:5px;font-size:13px;line-height:17px;white-space:nowrap}
.stat img{width:16px;height:16px}
.stat b{color:var(--ink);font-weight:700}
.stat span{color:var(--muted);width:24px}
.btn-blue{min-width:66px;height:50px;padding:0 2px;display:grid;place-items:center;text-align:center;font-size:12px;font-weight:700;line-height:1.1;text-shadow:0 1px 0 #041634;transition:filter .12s,transform .12s}
.btn-blue:hover{filter:brightness(1.15)}
.btn-blue:active{transform:translateY(1px)}
.loot{display:flex;flex-direction:column;gap:3px;overflow:hidden;mask-image:linear-gradient(#000 85%,transparent)}
.loot .row{display:grid;grid-template-columns:24px 1fr 32px 62px;align-items:center;gap:6px;font-size:13px;padding:1px 3px;border-radius:3px}
.loot .row img{width:22px;height:22px}
.loot .row .q{color:var(--ink);font-weight:700}
.loot .row .ago{color:#8f9aab;font-size:11.5px;text-align:right}
.loot .row.new{animation:lootIn .6s cubic-bezier(.2,1.4,.4,1)}
.loot .row.new{background:linear-gradient(90deg,rgba(242,193,78,.28),transparent)}
@keyframes lootIn{from{opacity:0;transform:translateX(24px) scale(.96)}}
/* ---------- skills / auto / velocidade ---------- */
.actions{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);display:flex;align-items:flex-end;gap:8px}
.skills{display:flex;gap:8px}
.skill{position:relative;width:74px;height:74px;border-radius:4px;transition:transform .12s,filter .12s}
.skill img{width:74px;height:74px}
.skill .k{position:absolute;right:-3px;bottom:-3px;width:22px;height:22px;border-radius:50%;background:#101826;border:2px solid #c9a15a;font-size:12px;font-weight:700;line-height:18px;text-align:center}
.skill:hover{filter:brightness(1.12);transform:translateY(-2px)}
.skill.locked img,.skill.lvlock img{filter:saturate(.35) brightness(.5)}
/* Skill presa pelo nível (25/09): "Nv. 15" no meio do ícone. */
.skill .lv{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:1px 6px;border-radius:3px;background:rgba(8,11,18,.85);box-shadow:0 0 0 1px #8a6a3a;font-size:11px;font-weight:700;font-style:normal;color:#f3cf76;white-space:nowrap;pointer-events:none}
.skill .k.wide{width:auto;min-width:22px;padding:0 6px;border-radius:10px;font-size:10px;right:50%;transform:translateX(50%);bottom:-8px}
.skill.locked::after{content:"em breve";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:1px 6px;border-radius:3px;background:rgba(8,11,18,.85);box-shadow:0 0 0 1px #8a6a3a;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:#e8d6ae;white-space:nowrap}
.skill .cd{position:absolute;inset:5px;border-radius:2px;background:conic-gradient(rgba(5,8,14,.72) var(--p,0%),transparent 0);pointer-events:none}
.skill.cast{animation:cast .35s ease}
@keyframes cast{50%{transform:scale(.92);filter:brightness(1.6)}}
.auto{position:relative;width:78px;height:90px;display:grid;place-items:center;transition:transform .12s,filter .12s}
/* AUTO um pouco mais alto que as skills (25/09): arte b_auto_*_alto.png (152x176, tools/icons/auto_alto.py). */
.auto img{position:absolute;inset:0;width:78px;height:90px}
.auto span{position:relative;margin-top:50px;font-size:15px;font-weight:700;letter-spacing:.06em;text-shadow:0 1px 0 #000,0 0 4px #000}
.auto.on{filter:drop-shadow(0 0 8px rgba(255,196,77,.55))}
.auto.on img{animation:glow 2.2s ease-in-out infinite}
@keyframes glow{50%{filter:brightness(1.18)}}
.auto:hover{transform:translateY(-2px)}
.speed{height:70px;display:flex;align-items:center;gap:6px;padding:0 2px}
.speed button{width:48px;height:48px;background:center/contain no-repeat;font-size:0;transition:filter .12s,transform .12s}
.speed button[data-speed="1"]{background-image:url(assets/b_x1.png)}
.speed button[data-speed="2"]{background-image:url(assets/b_x2.png)}
.speed button:not(.on){filter:saturate(.15) brightness(.62)}
.speed button:not(.on):hover{filter:saturate(.5) brightness(.85)}
.speed button.on{filter:drop-shadow(0 0 6px rgba(80,160,255,.55))}
/* ---------- VFX ---------- */
.fx{position:absolute;inset:0;pointer-events:none!important;overflow:hidden}
.coin{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;will-change:transform,opacity}
.coin.item{width:30px;height:30px;margin:-15px 0 0 -15px}
.pop.hurt{color:#ff6a60;font-size:16px}
.pop{position:absolute;font-weight:700;font-size:18px;color:var(--gold);text-shadow:0 2px 0 #3a2208,0 0 6px #000;animation:popUp 1s ease-out forwards;white-space:nowrap}
@keyframes popUp{0%{opacity:0;transform:translate(-50%,0) scale(.6)}15%{opacity:1;transform:translate(-50%,-10px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-44px) scale(1)}}
.spark{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;background:#ffe9a3;box-shadow:0 0 8px 2px #ffc94d}
.toast{position:absolute;left:50%;top:176px;transform:translateX(-50%);min-width:320px;padding:0 18px;height:62px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:17px;font-weight:700;animation:toast 2.8s ease forwards;pointer-events:none}
.toast img{width:32px;height:32px}
.toast.lvl .t-title{font-size:24px}
@keyframes toast{0%{opacity:0;transform:translateX(-50%) translateY(-14px) scale(.9)}10%{opacity:1;transform:translateX(-50%) scale(1.04)}16%{transform:translateX(-50%) scale(1)}85%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}
.burst{position:absolute;left:50%;top:207px;width:10px;height:10px;margin:-5px;border-radius:50%;box-shadow:0 0 0 0 rgba(255,214,102,.9);animation:burst .9s ease-out forwards}
@keyframes burst{to{box-shadow:0 0 0 160px rgba(255,214,102,0)}}
.hitflash{position:absolute;inset:0;box-shadow:inset 0 0 120px 30px rgba(216,58,63,.55);animation:hit .5s ease-out forwards}
@keyframes hit{from{opacity:1}to{opacity:0}}
/* ---------- janelas (menus) ---------- */
.veil{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(6,9,15,.55),rgba(3,5,9,.82));display:grid;place-items:center;animation:fade .2s ease}
.veil[hidden]{display:none!important}
@keyframes fade{from{opacity:0}}
.win{position:relative;width:900px;height:580px;max-width:calc(100% - 24px);max-height:calc(100% - 24px);display:flex;flex-direction:column;animation:winIn .28s cubic-bezier(.2,1.2,.4,1)}
@keyframes winIn{from{opacity:0;transform:translateY(16px) scale(.97)}}
.win.still{animation:none}
.win-head{display:flex;align-items:center;gap:10px;height:48px;border-bottom:1px solid rgba(214,170,90,.3);margin:-4px 0 10px;padding:0 4px 6px}
.win-head img{width:40px;height:40px}
.win-head .t-title{font-size:26px;flex:1}
.win-head .close{width:36px;height:36px;font-size:24px}
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tab{height:42px;padding:0 10px;font-size:14px;font-weight:700;display:grid;place-items:center;color:#d6dde8;border:10px solid transparent;border-image:url(assets/f_slot.png) 28 fill / 10px stretch;transition:filter .12s}
.tab.on{border-image:url(assets/f_btn_blue.png) 25 fill / 10px stretch;color:#fff}
.tab:hover{filter:brightness(1.15)}
.win-body{flex:1;overflow:auto;padding:2px 4px 4px;scrollbar-width:thin;scrollbar-color:#8a6a3a #0c121c}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:10px}
.card{display:flex;flex-direction:column;gap:6px;min-height:170px;padding:0 2px;transition:transform .12s,filter .12s}
.card:hover{transform:translateY(-2px);filter:brightness(1.08)}
.card .ic{width:64px;height:64px;margin:0 auto}
.card .nm{font-size:15px;font-weight:700;text-align:center;line-height:1.15}
.card .ds{font-size:12px;color:var(--muted);text-align:center;line-height:1.2;flex:1}
.card .rar{font-size:11px;text-align:center;letter-spacing:.06em;text-transform:uppercase}
.r0{color:#c9cfd8}.r1{color:#6fd36a}.r2{color:#58a8ff}.r3{color:#c77dff}.r4{color:#ffb640}.r5{color:#ff5a7a}
.buy{height:40px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:700;color:#fff6de;text-shadow:0 1px 0 #4a2a06;border:10px solid transparent;border-image:url(assets/f_btn_gold.png) 25 fill / 10px stretch;transition:filter .12s,transform .12s}
.buy img{width:20px;height:20px}
.buy:hover{filter:brightness(1.1)}
.buy:active{transform:translateY(1px)}
.buy[disabled]{filter:grayscale(1) brightness(.6);cursor:not-allowed}
.list{display:flex;flex-direction:column;gap:6px}
.lrow{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:4px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(214,170,90,.14)}
.lrow .t{font-weight:700}.lrow .s{font-size:12px;color:var(--muted)}
.lrow img{width:36px;height:36px}
.empty{padding:40px;text-align:center;color:var(--muted)}
.msg{position:absolute;left:50%;bottom:130px;transform:translateX(-50%);padding:10px 18px;border-radius:4px;background:rgba(10,14,22,.92);box-shadow:0 0 0 1px #8a6a3a;font-weight:600;animation:toast 2.4s ease forwards;pointer-events:none}
.range{width:100%;accent-color:#f2c14e}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-weight:600}
.input{height:38px;padding:0 10px;border-radius:3px;border:1px solid #8a6a3a;background:#0b111b;color:var(--ink);font:inherit}
@media (prefers-reduced-motion:reduce){.hf *,.hf *::before,.hf *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* ---------- mapa grande ---------- */
.win-mapa{width:1040px;height:640px}
.win-mapa .win-body{overflow:hidden}
.bigmap-wrap{display:grid;grid-template-columns:1fr 210px;gap:14px;height:100%}
.bigmap{position:relative;height:100%;aspect-ratio:4/3;max-width:100%;justify-self:center;cursor:crosshair;border-radius:3px;overflow:hidden;box-shadow:0 0 0 2px #0b0806,0 0 0 3px #6d5230}
.bigmap > img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.bm-poi{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
.bm-poi i{width:12px;height:12px;transform:rotate(45deg);background:#f2c14e;box-shadow:0 0 0 2px #3a2208,0 0 8px rgba(242,193,78,.9)}
.bm-poi.seen i{background:#9fd28c;box-shadow:0 0 0 2px #1b3316}
.bm-poi.up{flex-direction:column-reverse}
.bm-poi.up span{margin:0 0 3px}
.bm-poi span{margin-top:3px;padding:1px 6px;border-radius:3px;background:rgba(8,11,18,.78);font-size:12px;font-weight:600;white-space:nowrap}
.bm-mob{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#ff4d42;box-shadow:0 0 0 1.5px #3a0b0b;pointer-events:none}
.bm-mob.boss{width:14px;height:14px;margin:-7px 0 0 -7px;background:#b23cff}
.bm-me{position:absolute;z-index:2;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#7fe3ff;box-shadow:0 0 0 2px #06324a,0 0 12px 4px rgba(127,227,255,.8);pointer-events:none}
.bm-me::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(127,227,255,.7);animation:ping 1.6s ease-out infinite}
.bm-target{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid #fff3c4;animation:ping .9s ease-out forwards;pointer-events:none}
.bm-side{display:flex;flex-direction:column;font-size:13px}
.bm-leg{display:flex;align-items:center;gap:8px;margin:3px 0}
.bm-leg i{width:11px;height:11px;flex:none}
.lg-me{border-radius:50%;background:#7fe3ff;box-shadow:0 0 0 2px #06324a}
.lg-poi{transform:rotate(45deg);background:#f2c14e}
.lg-seen{transform:rotate(45deg);background:#9fd28c}
.lg-mob{border-radius:50%;background:#ff4d42}
/* ---------- extras das janelas ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.chest-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-height:100%}
.chest.shake{animation:shake .5s ease}
@keyframes shake{20%{transform:rotate(-6deg) scale(1.05)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
.reveal-in{text-align:center;animation:reveal .7s cubic-bezier(.2,1.4,.4,1)}
.reveal-in.r2 img{filter:drop-shadow(0 0 12px #58a8ff)}.reveal-in.r3 img{filter:drop-shadow(0 0 14px #c77dff)}.reveal-in.r4 img{filter:drop-shadow(0 0 18px #ffb640)}.reveal-in.r5 .ithumb img,.reveal-in.r5 img{filter:drop-shadow(0 0 22px #ff5a7a)}
@keyframes reveal{from{opacity:0;transform:scale(.4) rotate(-8deg)}}
.lrow.cur{box-shadow:inset 0 0 0 2px #f2c14e}
.lrow.rank{grid-template-columns:40px 1fr auto 110px 96px}
.lrow.rank .t-title{font-size:20px;text-align:center}
.lrow.news{grid-template-columns:40px 1fr}
.lrow.news p{margin:6px 0 0;line-height:1.35}
/* Nome de usuário (herói novo e janela obrigatória para contas antigas) */
.namebox{display:flex;flex-direction:column;gap:6px;padding:12px 14px;margin:0 0 12px}
.namebox label{font-size:17px}
.namebox .input{height:40px;font-size:17px;width:100%;max-width:360px;user-select:text;letter-spacing:.02em}
.name-msg{font-size:12.5px;color:var(--muted);min-height:18px}
.name-msg.good{color:#7fe08f}.name-msg.bad{color:#ff8a7a}
.win-nome{width:560px;height:auto}
.win-nome .close{display:none}
.name-win{display:flex;flex-direction:column;gap:10px}
.name-win p{margin:0;line-height:1.45}
.name-win .buy.big{align-self:center;min-width:220px}
/* Mochila · Materiais: quantidade ao lado do nome; zerado fica apagado */
.mats .lrow .t b{margin-left:6px;color:#f2c14e}
.mats .lrow.zero{opacity:.55}
.mats .lrow .buy{min-width:96px}
.searchbar{display:flex;gap:8px;margin-bottom:12px}
.searchbar .input{flex:1}
.searchbar .buy{width:140px}
.cfg{max-width:560px}
.field.row{flex-direction:row;align-items:center;gap:10px}
.cfg-btns{display:flex;gap:10px;margin:4px 0 12px}
.cfg-btns .buy{width:200px}
.buy.blue{border-image:url(assets/f_btn_blue.png) 25 fill / 10px stretch;text-shadow:0 1px 0 #041634}
/* =====================================================================
v3 — logo no topo, barra de menus central, chat, atributos, mercado,
duelos, ferreiro, VIP e ajustes para celular
===================================================================== */
/* ---------- topo: logo + moedas ---------- */
.topcenter{position:absolute;left:50%;top:2px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.topcenter > *{pointer-events:auto}
.toplogo{width:210px;height:auto;pointer-events:none;filter:drop-shadow(0 3px 0 rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(0,0,0,.35))}
.hero-info .vipc{width:22px;height:22px;flex:none;filter:drop-shadow(0 0 5px rgba(255,200,80,.7))}
.hero-info .vipc[hidden]{display:none}
.bar.mana{height:10px}
.bar.mana > i.fill{background:linear-gradient(#b9a6ff 0 14%,#6a54e8 15% 62%,#3b2a9c 63%)}
.bar.mana > b{font-size:9px}
/* ---------- barra de menus: centralizada, do tamanho dos botões ---------- */
.bottombar{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:0 6px;border:16px solid transparent;border-image:url(assets/f_panel_md.png) 33 fill / 16px stretch;max-width:calc(100% - 16px);overflow-x:auto;scrollbar-width:none}
.bottombar::-webkit-scrollbar{display:none}
.bottombar .navbtn{width:78px;height:76px;flex:none}
.bottombar .navbtn img{width:42px;height:42px}
.bottombar .navbtn span{font-size:13px}
.quick{position:relative;width:66px;height:66px;display:grid;place-items:center;transition:filter .12s,transform .12s}
.quick img{width:36px;height:36px}
.quick:hover{filter:brightness(1.15);transform:translateY(-2px)}
.quick .key{position:absolute;right:-4px;bottom:-4px;min-width:20px;height:20px;padding:0 4px;border-radius:3px;background:#101826;box-shadow:0 0 0 1px #c9a15a;font-size:11px;font-weight:700;line-height:20px;text-align:center}
.quick b{position:absolute;left:-4px;top:-5px;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:#101826;box-shadow:0 0 0 1px #c9a15a;font-size:12px;line-height:20px;color:var(--gold);text-align:center}
/* 25/09 (pedido do dono): o slot da poção fica sempre na barra; vazio mostra só a moldura com o ícone apagado. */
.quick.empty{padding:0;text-align:initial}
.quick.empty img{filter:grayscale(1) brightness(.45);opacity:.55}
.quick.empty b{display:none}
.quick.cast{animation:cast .35s ease}
/* ---------- placa do mapa: só ao entrar em um mapa ---------- */
.banner{position:absolute;left:50%;top:150px;transform:translateX(-50%);min-width:380px;padding:4px 26px;text-align:center;opacity:0;visibility:hidden;pointer-events:none!important}
.banner.show{visibility:visible;animation:banner 4.2s ease forwards}
.bn-title{font-size:30px;line-height:1.1}
.bn-sub{font-size:15px;margin-top:2px;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:10px}
.bn-sub::before,.bn-sub::after{content:"";width:22px;height:2px;background:#d8c9a3;opacity:.8}
@keyframes banner{0%{opacity:0;transform:translateX(-50%) translateY(-12px) scale(.94)}10%{opacity:1;transform:translateX(-50%) scale(1.03)}16%{transform:translateX(-50%) scale(1)}82%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-6px)}}
/* ---------- chat ---------- */
.chatbody{display:flex;flex-direction:column;gap:5px}
.ctabs{display:flex;gap:3px;flex:none}
.ctabs button{position:relative;flex:1;height:28px;font-size:12px;font-weight:700;color:#cfd6e2;border:7px solid transparent;border-image:url(assets/f_slot.png) 28 fill / 7px stretch;transition:filter .12s}
.ctabs button.on{border-image-source:url(assets/f_btn_blue.png);border-image-slice:25 fill;color:#fff}
.ctabs button:hover{filter:brightness(1.15)}
.ctabs button i{position:absolute;right:-3px;top:-4px;width:9px;height:9px;border-radius:50%;background:#ff5a4e;box-shadow:0 0 0 2px #1a0d0d;display:none}
.ctabs button.unread i{display:block}
.clog{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.28;padding-right:2px;scrollbar-width:thin;scrollbar-color:#8a6a3a transparent;user-select:text;-webkit-user-select:text}
.clog p{margin:0;display:grid;grid-template-columns:minmax(42px,auto) 1fr;gap:3px;word-break:break-word}
.clog p.in{animation:logIn .35s ease}
.clog time{color:#7f8a9b;font-size:11.5px;padding-top:1px}
.clog .who{color:#f3d9a0}
.clog p.mine .who{color:var(--cyan)}
.clog p.ann span{color:#ffd88a}
.clog p.ann .who{color:var(--gold)}
.clog .cic{display:inline-block;width:15px;height:15px;vertical-align:-3px;margin-right:3px}
.clog .gold{color:var(--gold)}.clog .blue{color:var(--cyan)}.clog .bad{color:#ff7d74}.clog .good{color:var(--green)}
.clog .vipt{font-size:10px;font-weight:700;color:#1b1204;background:linear-gradient(#ffe7a0,#d69a26);padding:0 4px;border-radius:3px}
.empty-line{color:var(--muted);font-size:12.5px;padding:6px 2px;display:block!important}
.csend{display:flex;gap:4px;flex:none}
.csend[hidden]{display:none}
.cinput{flex:1;min-width:0;height:30px;padding:0 8px;border-radius:3px;border:1px solid #6d5230;background:rgba(6,10,17,.85);color:var(--ink);font:inherit;font-size:13px;user-select:text}
/* 12/10: o campo do chat virou caixa de texto (a equipe manda texto com linhas); uma linha só até ter quebra. */
textarea.cinput{display:block;resize:none;padding-top:6px;padding-bottom:4px;line-height:18px;overflow-y:auto;white-space:pre-wrap;word-break:break-word}
.hf.app textarea.cinput{padding-top:9px}
.ct{white-space:pre-line}
.cinput:focus{outline:none;border-color:#d9b56a;box-shadow:0 0 0 2px rgba(217,181,106,.25)}
.csbtn{height:30px;padding:0 6px;font-size:12.5px;font-weight:700;color:#fff6de;text-shadow:0 1px 0 #4a2a06;border:8px solid transparent;border-image:url(assets/f_btn_gold.png) 25 fill / 8px stretch}
/* ---------- painel do herói ---------- */
.hb-info{min-width:0}
.hb-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px 8px}
.hb-duel{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:12.5px;font-weight:700;color:#e8d6ae;padding:1px 6px 1px 2px;border-radius:3px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(214,170,90,.2)}
.hb-duel img{width:18px;height:18px}
.hb-duel:hover{filter:brightness(1.2)}
.attr-btn{position:relative;width:64px;height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1.1;text-align:center;color:#fff;text-shadow:0 1px 0 #041634;border:12px solid transparent;border-image:url(assets/f_btn_blue.png) 25 fill / 12px stretch;transition:filter .12s,transform .12s}
.attr-btn span{writing-mode:horizontal-tb}
.attr-btn:hover{filter:brightness(1.15)}
.attr-btn:active{transform:translateY(1px)}
.pts{position:absolute;right:-12px;top:-14px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:radial-gradient(#ffd66b,#d88a14);border:2px solid #fff1d6;color:#2b1702;font-size:12px;font-style:normal;font-weight:800;line-height:18px;text-align:center;animation:pulse 1.4s ease-in-out infinite}
.pts[data-n="0"]{display:none}
/* ---------- skills ---------- */
.skill.nomana img{filter:saturate(.35) brightness(.7)}
.skill.nomana::before{content:"";position:absolute;inset:5px;border-radius:2px;background:linear-gradient(transparent 55%,rgba(60,50,180,.55));pointer-events:none;z-index:1}
.skill.charged{animation:charged .8s ease}
@keyframes charged{0%{filter:brightness(1)}30%{filter:brightness(1.9) drop-shadow(0 0 12px #9fb4ff)}100%{filter:brightness(1)}}
/* ---------- janelas: extras comuns ---------- */
.sec{margin:12px 0 6px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:11.5px!important}
.q-d{color:var(--muted);font-size:12.5px;line-height:1.35}
.buy.sm{height:32px;font-size:12.5px;padding:0 4px;border-width:8px;border-image-width:8px}
a.buy{text-decoration:none;display:inline-flex}
.buy.blue{border-image-source:url(assets/f_btn_blue.png)}
select.input{appearance:none;-webkit-appearance:none;padding-right:26px;background:#0b111b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d9b56a'/%3E%3C/svg%3E") right 9px center no-repeat;cursor:pointer}
.input.sm{height:30px;font-size:12.5px;margin-top:6px;width:100%}
textarea.input{height:74px;padding:8px;resize:none;font-size:12px;width:100%;user-select:text}
.input:focus{outline:none;border-color:#d9b56a}
.tabs-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tabs-row .buy{width:130px;margin-top:0}
.tabs-row .buy img{width:22px;height:22px}
.tag{display:inline-block;margin-top:3px;padding:1px 6px;border-radius:3px;font-size:10.5px;font-weight:700;letter-spacing:.03em;background:rgba(169,179,194,.14);color:#c9cfd8}
.tag.sale{background:rgba(242,193,78,.16);color:var(--gold)}
.tag.duel{background:rgba(255,106,96,.16);color:#ff8d84}
/* Herói bloqueado (27/09): a foto aparece (vitrine dos heróis que vêm aí), só um pouco apagada. */
.card.locked{filter:saturate(.55) brightness(.85)}
.card.locked .ic{opacity:.9}
.card.locked::after{content:"🔒";position:absolute;right:8px;top:6px;font-size:16px}
.card{position:relative}
details{margin-top:10px;font-size:13px}
summary{cursor:pointer;color:#e8d6ae;font-weight:600}
summary:hover{color:#fff}
.ok{color:var(--green);font-weight:700}
.bad{color:#ff7d74}.good{color:var(--green)}.mid{color:var(--gold)}
.brl{color:var(--muted);font-weight:600;font-size:.82em}
code{font-size:12px;padding:2px 5px;border-radius:3px;background:#0b111b;box-shadow:inset 0 0 0 1px #3b2c16;word-break:break-all;user-select:text}
.pill2{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;font-style:normal;white-space:nowrap;background:rgba(169,179,194,.15);color:#d6dde8}
.pill2.sale,.pill2.w,.pill2.st-sold,.pill2.st-paid{background:rgba(111,211,106,.18);color:#8fe38a}
.pill2.purchase{background:rgba(111,201,255,.16);color:var(--cyan)}
.pill2.l,.pill2.st-cancelled,.pill2.st-expired,.pill2.st-failed,.pill2.st-orphan{background:rgba(255,106,96,.15);color:#ff8d84}
.pill2.st-pending,.pill2.st-reserved,.pill2.d{background:rgba(242,193,78,.16);color:var(--gold)}
/* ---------- atributos ---------- */
.win-atributos .win-body{overflow:hidden}
.attr-wrap{display:grid;grid-template-columns:1fr 290px;gap:14px;height:100%}
.attr-list{overflow:auto;padding-right:4px}
.attr-top{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;margin-bottom:8px}
.attr-top .portrait{width:64px;height:64px}
.attr-top .portrait img{width:42px;height:42px}
.attr-top .nm{font-size:18px;font-weight:700}
.free{display:flex;flex-direction:column;align-items:center;padding:4px 12px;border-radius:4px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(214,170,90,.2)}
.free b{font-size:24px;color:#8f9aab}
.free.has b{color:var(--gold);text-shadow:0 0 10px rgba(242,193,78,.5)}
.free span{font-size:11px;color:var(--muted)}
.arow{display:grid;grid-template-columns:1fr 60px 30px 30px;gap:8px;align-items:center;padding:8px 10px;margin-bottom:5px;border-radius:4px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(214,170,90,.14)}
.arow .an{font-weight:700;font-size:15px}
.arow .ad{font-size:12px;color:var(--muted);line-height:1.25}
.arow .av{font-size:18px;text-align:right}
.arow .av em{font-style:normal;color:var(--green);font-size:14px;margin-left:3px}
.arow .mini{width:30px;height:30px;font-size:18px}
.arow .mini[disabled]{opacity:.35;cursor:not-allowed}
.attr-side{display:flex;flex-direction:column;gap:5px;padding:10px 12px;border-radius:4px;background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(214,170,90,.2)}
.attr-side .sr{display:flex;justify-content:space-between;font-size:13.5px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.attr-side .sr em{font-style:normal;color:var(--green)}
.attr-side .buy{margin-top:4px}
/* ---------- mercado ---------- */
.mk-bar{display:flex;align-items:stretch;gap:8px;margin-bottom:10px}
.wchip{flex:1;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(214,170,90,.25)}
.wchip img{width:34px;height:34px}
.wchip > div{flex:1;min-width:0;display:flex;flex-direction:column}
.wchip small{color:var(--muted);font-size:11.5px}
.wchip.on b{color:var(--green)}
.wchip .mk-wbal{color:var(--text);opacity:.85}
/* Preço da promoção dentro do botão (10/10 00:13, dono: "deixe o preço cortado no botão, em cima"): duas linhas. */
.buy:has(.pb-was){height:auto;min-height:46px;flex-direction:column;gap:3px;line-height:1}
.buy .pb-was{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12.5px;font-weight:800}
.buy .pb-was s{color:#5a3208;text-decoration-thickness:2px;text-decoration-color:#c81e14;text-shadow:0 1px 0 rgba(255,240,200,.55)}
.buy .pb-was b{padding:1px 6px;border-radius:999px;background:#1f9d58;color:#fff;font-size:11px;text-shadow:none;box-shadow:0 1px 0 rgba(0,0,0,.35)}
.buy .pb-now{display:flex;align-items:center;justify-content:center;gap:6px;font-size:15px}
.buy.blue .pb-was s{color:#e3ecff;text-decoration-color:#ff7a7a}
.buy.sm:has(.pb-was){min-height:34px}.buy.sm .pb-was{font-size:11px}.buy.sm .pb-now{font-size:13px}
/* Painel do dono (10/10 00:54): lucro por período, PIX, USDC, comissões, meta, 14 dias, números do dia e últimas compras. */
.dn-w{display:flex;flex-direction:column;gap:10px}
.dn-tot{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 10px;border-radius:14px;background:linear-gradient(180deg,rgba(47,191,113,.16),rgba(47,191,113,.04));box-shadow:inset 0 0 0 1px rgba(125,255,176,.35)}
.dn-tot small{font-size:12px;color:#bfe9c9}.dn-tot b{font-size:30px;line-height:1.1;color:#7dffb0;font-family:"HF Title","Cinzel",serif}.dn-tot span{font-size:11.5px;color:#9fb0c8}
.dn-list{display:flex;flex-direction:column;gap:6px}
.dn-r{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #2c3c58}
.dn-r img{width:26px;height:26px;image-rendering:pixelated}.dn-r b{display:block;font-size:14px}.dn-r small{font-size:11.5px;color:#9fb0c8}
.dn-r em,.dn-o em{font-style:normal;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}.dn-r em small,.dn-o em small{display:block;font-weight:600;color:#9fb0c8;font-size:11px}
.dn-card{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #2c3c58;display:flex;flex-direction:column;gap:6px}
.dn-card>b{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#ffd36a}.dn-card>small{font-size:12px;color:#cfd8e6}
.dn-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.dn-bar i{display:block;height:100%;background:linear-gradient(90deg,#2fbf71,#7dffb0)}
.dn-chart{display:flex;align-items:flex-end;gap:4px;height:80px}.dn-chart i{flex:1;min-width:0;border-radius:4px 4px 0 0;background:#58c8ff}
.dn-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px}.dn-kpi span{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #2c3c58}
.dn-kpi b{font-size:18px;color:#fff}.dn-kpi small{font-size:11px;color:#9fb0c8;text-align:center}
.dn-o{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid rgba(255,255,255,.06);font-size:12.5px}.dn-o span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Avisos do dono (10/10 00:25): histórico do que chegou no celular pelo app. */
.av-w{display:flex;flex-direction:column;gap:8px}.av-f{margin-bottom:4px}
.av-day{margin-top:6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9fb0c8}
.av-it{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #2c3c58}
.av-it>img{width:28px;height:28px;image-rendering:pixelated}.av-it b{display:block;font-size:14px;color:#ffe7b0}
.av-it p{margin:3px 0 0;font-size:12.5px;line-height:1.4;color:#d9e2ee;white-space:pre-wrap;overflow-wrap:anywhere}
.av-it time{font-size:12px;color:#9fb0c8}.av-it.k-chat{box-shadow:inset 0 0 0 1px rgba(255,107,107,.45)}.av-it.k-vendas b,.av-it.k-compras b{color:#7dffb0}.av-it.k-mercado b{color:#8fd3ff}
.mk-net{margin-left:6px;padding:2px 9px;border:0;border-radius:999px;background:#2f6fe0;color:#fff;font:inherit;font-size:11.5px;font-weight:800;cursor:pointer;vertical-align:1px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}.mk-net:hover{filter:brightness(1.12)}.mk-net:disabled{opacity:.6;cursor:default}
.mk-wwarn{margin:0 0 10px;padding:8px 11px;border-radius:6px;background:rgba(255,190,80,.08);box-shadow:inset 0 0 0 1px rgba(255,190,80,.38);font-size:12.5px;line-height:1.4}
.mk-wwarn p{margin:0}.mk-wwarn p+p{margin-top:6px}.mk-wwarn b{color:#ffcf6e}
.wchip .buy{width:112px}
.wchip .buy:only-of-type{width:160px}
.mk-meta{min-width:92px;display:flex;flex-direction:column;justify-content:center;padding:4px 10px;border-radius:4px;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(214,170,90,.18);font-size:13px}
.mk-meta small{color:var(--muted);font-size:11px}
.mk-meta a{color:var(--cyan)}
.mk-filters{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.mk-filters .t-title{flex:1;font-size:18px}
.mk-filters .t-title small{font-size:14px;color:var(--muted)}
.mk-filters .input{width:170px}
.mk-filters .mini{width:34px;height:34px;font-size:18px}
.lgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lcard{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;min-height:96px}
.lcard .ic{width:52px;height:52px}
.lcard .nm{font-weight:700;font-size:15px}
.lcard .rar{font-size:11.5px;letter-spacing:.04em}
.lcard .s{font-size:12px;color:var(--muted)}
.lcard .hint{color:var(--gold)}
.lp{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.lp b{font-size:15px;color:var(--gold)}
.lp small{font-size:11px;color:var(--muted)}
.lp .buy{width:130px}
.mk-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px;text-align:center}
.mk-empty img{width:72px;height:72px}
.mk-empty p{max-width:520px;margin:0;color:var(--muted);line-height:1.4}
.mk-empty .buy{width:220px}
.mk-empty.small{padding:12px}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.how > div{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:10px;border-radius:4px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(214,170,90,.14)}
.how img{width:34px;height:34px}
.how span{font-size:12.5px;color:var(--muted);line-height:1.3}
.mk-soon{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 20px;text-align:center}
.mk-soon img{width:80px;height:80px}
.mk-soon p{max-width:560px;margin:0;line-height:1.45}
.tag-soon{padding:3px 10px;border-radius:12px;background:rgba(242,193,78,.18);color:var(--gold);font-weight:800;font-size:11px;letter-spacing:.12em}
.sell-wrap{display:grid;grid-template-columns:1fr 300px;gap:12px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.pcard{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:112px;text-align:center;transition:filter .12s,transform .12s}
.pcard img{width:44px;height:44px}
.pcard b{font-size:12.5px;line-height:1.15}
.pcard small{font-size:11px}
.pcard:hover{filter:brightness(1.12);transform:translateY(-1px)}
.sell-side{display:flex;flex-direction:column;gap:6px}
.sell-side .field{margin:0}
.sell-prev{display:flex;gap:8px;align-items:center}
.sell-prev img{width:46px;height:46px}
.sell-prev div{display:flex;flex-direction:column}
.sell-math{display:flex;flex-direction:column;gap:2px;font-size:13px;padding:6px 8px;border-radius:4px;background:rgba(0,0,0,.22)}
.sell-math div{display:flex;justify-content:space-between;gap:8px}
.sell-math .net{border-top:1px solid rgba(214,170,90,.25);padding-top:3px;margin-top:2px}
.sell-math .net b{color:var(--green)}
.buyp{display:flex;flex-direction:column;gap:8px}
.buyp p{margin:0;line-height:1.4}
.bh{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center}
.bh .ic{width:64px;height:64px}
.bh .nm{font-size:18px;font-weight:700}
.bh .s{font-size:12.5px;color:var(--muted)}
.bt{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.bt b{font-size:20px;color:var(--gold)}
.bt small{font-size:11px;color:var(--muted)}
.bacts{display:flex;flex-wrap:wrap;gap:8px}
.bacts .buy{min-width:170px;padding:0 6px}
.buy-log{margin:0;padding:8px 10px;max-height:120px;overflow:auto;border-radius:4px;background:#070b12;box-shadow:inset 0 0 0 1px #3b2c16;font:12px/1.45 ui-monospace,Consolas,monospace;color:#cfe3ff;white-space:pre-wrap;user-select:text}
.wform{display:flex;gap:6px;margin-top:6px}
.wform .input{flex:1;min-width:0}
.wform .buy{width:110px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px}
.tile{display:flex;flex-direction:column;gap:2px;min-height:74px}
.tile small{color:var(--muted);font-size:11.5px}
.tile b{font-size:17px;color:var(--gold)}
.tile span{font-size:11px;color:var(--muted)}
.stmt{display:flex;flex-direction:column;gap:3px;font-size:12px}
.stmt .sh,.stmt .srow{display:grid;grid-template-columns:92px 70px 1.4fr 1fr 1fr 1fr .9fr 88px 150px;gap:6px;align-items:center;padding:6px 8px;border-radius:3px}
.stmt .sh{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.stmt .srow{background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(214,170,90,.12)}
.stmt .srow .net{color:var(--green);font-weight:700}
.stmt .acts{display:flex;gap:4px;justify-content:flex-end}
.stmt .acts .buy{width:auto;min-width:68px}
.evlog{display:flex;flex-direction:column;gap:3px;font-size:12.5px}
.evlog div{display:grid;grid-template-columns:120px 1fr;gap:8px;padding:4px 6px;border-radius:3px;background:rgba(255,255,255,.025)}
.evlog time{color:#8f9aab}
.evlog a{color:var(--cyan)}
.wover{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(3,5,9,.72);animation:fade .2s ease}
.wpanel{width:620px;max-width:calc(100% - 20px);max-height:calc(100% - 20px);overflow:auto;display:flex;flex-direction:column;gap:8px}
.wpanel p{margin:0;line-height:1.4}
.wp-head{display:flex;align-items:center;gap:8px}
.wp-head img{width:34px;height:34px}
.wp-head .t-title{flex:1;font-size:22px}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Carteiras (25/09): uma linha por carteira, com o ícone oficial, o nome e um botão só. */
.wcard{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:8px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(214,170,90,.2)}
.wcard.found{box-shadow:inset 0 0 0 2px var(--c)}
.wlogo{width:44px;height:44px;border-radius:12px;object-fit:cover;display:grid;place-items:center;background:var(--c);color:#fff;font:800 20px "HF Title",Georgia,serif;text-shadow:0 1px 0 rgba(0,0,0,.4);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.wcard > div{display:flex;flex-direction:column;min-width:0}
img.wlogo{background:none;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.wcard b{font-size:15px;line-height:1.2}
.wcard small{color:var(--muted);font-size:12px;line-height:1.3}
.wcard small a{color:#9cc8ff;text-decoration:underline}
.wp-sub{color:var(--muted);font-size:13px}
.wact{display:flex}
.wact .buy{min-width:96px;padding:0 10px}
/* ---------- duelos ---------- */
.du-wrap{display:grid;grid-template-columns:320px 1fr;gap:12px;min-height:100%}
.du-new{display:flex;flex-direction:column;gap:6px}
.du-new .t-title{font-size:19px}
.du-new .field{margin:0}
.du-new .searchbar{margin:0}
.du-new .searchbar .buy{width:90px}
.du-cands{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-height:188px;overflow:auto}
.du-c{display:flex;flex-direction:column;align-items:flex-start;padding:5px 8px;border-radius:4px;text-align:left;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(214,170,90,.16);transition:filter .12s}
.du-c b{font-size:13px}
.du-c small{font-size:11px;color:var(--muted)}
.du-c:hover{filter:brightness(1.2)}
.du-c.on{background:rgba(47,127,224,.25);box-shadow:inset 0 0 0 2px #58a8ff}
.du-rec{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.rec{display:flex;flex-direction:column;align-items:center;padding:6px;border-radius:4px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(214,170,90,.18);position:relative}
.rec img{position:absolute;left:6px;top:6px;width:26px;height:26px}
.rec b{font-size:22px}
.rec span{font-size:11px;color:var(--muted)}
.rec.w b{color:var(--green)}.rec.l b{color:#ff7d74}.rec.d b{color:#c9cfd8}.rec.p b{color:var(--gold)}
.du-row{grid-template-columns:40px 1fr auto}
.du-row .two{min-width:170px}
.du-replay{display:grid;grid-template-columns:1fr 170px 1fr;gap:14px;align-items:center;min-height:380px}
.du-f{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;border-radius:6px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(214,170,90,.2);transition:filter .3s,transform .3s}
.du-f .portrait{width:110px;height:110px}
.du-f .portrait img{width:78px;height:78px}
.du-f.f1 .portrait img{transform:scaleX(-1)}
.du-f .nm{font-size:19px;font-weight:700}
.du-f .s{font-size:12px;color:var(--muted)}
.du-f .bar{width:100%;height:18px}
.du-f.hit{animation:dhit .28s ease}
.du-f.f0.lunge .portrait{animation:lungeR .25s ease}
.du-f.f1.lunge .portrait{animation:lungeL .25s ease}
.du-f.down{filter:grayscale(1) brightness(.6);transform:rotate(-2deg) scale(.97)}
@keyframes dhit{0%,100%{transform:none}30%{transform:translateX(-6px);filter:brightness(1.6) sepia(1) hue-rotate(-40deg) saturate(4)}60%{transform:translateX(5px)}}
@keyframes lungeR{50%{transform:translateX(26px) scale(1.06)}}
@keyframes lungeL{50%{transform:translateX(-26px) scale(1.06)}}
.du-hits{position:absolute;inset:0;pointer-events:none;overflow:visible}
.dpop{position:absolute;top:32%;font-size:22px;font-weight:800;color:#fff;text-shadow:0 2px 0 #5b0d0d,0 0 6px #000;animation:dpop .9s ease-out forwards;white-space:nowrap}
.dpop.crit{color:#ffd24d;font-size:28px}
.dpop.sp{color:#b9a6ff}
@keyframes dpop{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}15%{opacity:1;transform:translate(-50%,-6px) scale(1.2)}100%{opacity:0;transform:translate(-50%,-60px) scale(1)}}
.du-vs{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.du-vs img{width:64px;height:64px}
.du-vs .t-title{font-size:40px}
.du-vs .num{font-size:15px;color:var(--muted)}
.du-res .t-title{font-size:30px;animation:reveal .6s cubic-bezier(.2,1.4,.4,1)}
.du-o.win{color:#8fe38a}.du-o.loss{color:#ff8d84}.du-o.draw{color:#d6dde8}
.du-res .s{font-size:12.5px;color:var(--ink);margin-top:4px;line-height:1.35}
.du-rbtns{display:flex;justify-content:center;gap:10px;margin-top:12px}
.du-rbtns .buy{width:200px}
/* ---------- ferreiro ---------- */
.fg-wrap{display:grid;grid-template-columns:320px 1fr;gap:12px;height:100%}
.fg-list{display:flex;flex-direction:column;gap:5px;overflow:auto;padding-right:4px}
.fg-bag{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 8px;margin-bottom:4px;border-radius:4px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(214,170,90,.2)}
.fg-bag span{display:flex;align-items:center;gap:3px;font-size:13px}
.fg-bag img{width:22px;height:22px}
.fg-bag .buy{margin-left:auto;width:120px}
.fg-it{display:grid;grid-template-columns:36px 1fr auto;gap:8px;align-items:center;text-align:left;min-height:62px;transition:filter .12s}
.fg-it img{width:36px;height:36px}
.fg-it span{display:flex;flex-direction:column;min-width:0}
.fg-it b{font-size:13.5px}
.fg-it small{font-size:11px;color:var(--muted)}
.fg-it .lv{font-style:normal;font-weight:800;font-size:18px;color:var(--gold)}
.fg-it .lv.risk{color:#ff9d5c}
.fg-it:hover{filter:brightness(1.12)}
.fg-right{display:flex;flex-direction:column;overflow:auto}
.fg-main{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.fg-anvil{position:relative;width:200px;height:150px}
.fg-anvil .fg-bg{position:absolute;left:50%;bottom:0;width:150px;height:150px;transform:translateX(-50%);opacity:.95}
.fg-anvil .fg-item{position:absolute;left:50%;top:6px;width:58px;height:58px;transform:translateX(-50%);filter:drop-shadow(0 0 10px rgba(255,190,90,.5));animation:float 2.4s ease-in-out infinite}
.fg-anvil .fg-lv{position:absolute;right:0;top:0;font-size:28px}
.fg-anvil.hammer .fg-bg{animation:hammer .65s ease}
.fg-anvil.hammer .fg-item{animation:heat .65s ease}
.fg-anvil.win .fg-item{filter:drop-shadow(0 0 22px #ffd24d) brightness(1.3)}
.fg-anvil.win::after{content:"";position:absolute;left:50%;top:34px;width:10px;height:10px;margin:-5px;border-radius:50%;animation:burst .9s ease-out forwards}
.fg-anvil.fail .fg-item{filter:grayscale(.8) brightness(.6);animation:shake .5s ease}
@keyframes hammer{20%{transform:translateX(-50%) rotate(-8deg)}45%{transform:translateX(-50%) rotate(6deg) translateY(4px)}70%{transform:translateX(-50%) rotate(-3deg)}}
@keyframes heat{50%{filter:drop-shadow(0 0 24px #ff7a2a) brightness(1.8)}}
@keyframes float{50%{transform:translateX(-50%) translateY(-5px)}}
.fg-name{font-size:18px;font-weight:700}
.fg-name .up{color:var(--green)}
.fg-pips{display:grid;grid-template-columns:repeat(15,1fr);gap:3px;width:360px}
.fg-pips i{height:10px;border-radius:2px;background:#1b2332;box-shadow:inset 0 0 0 1px #3b4a60}
.fg-pips i.r{box-shadow:inset 0 0 0 1px #8a4a2a}
/* +10 a +15 (Pedra Rubra, 25/09): contorno vermelho */
.fg-pips i.h{box-shadow:inset 0 0 0 1px #c0392b}
.fg-pips i.h.on{background:linear-gradient(#ffd0c0,#e0553a 50%,#8a1c14);box-shadow:0 0 6px rgba(255,90,60,.55)}
.fg-pips i.on{background:linear-gradient(#fff0a5,#e6b955 50%,#a86a1c);box-shadow:0 0 6px rgba(255,200,90,.5)}
.fg-stats{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:6px;width:100%}
.fg-stats div{display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:4px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(214,170,90,.16)}
.fg-stats span{font-size:11px;color:var(--muted)}
.fg-stats b{font-size:15px;display:flex;align-items:center;justify-content:center;gap:3px}
.fg-stats b img{width:18px;height:18px}
.fg-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
.fg-opts label{display:grid;grid-template-columns:18px 30px 1fr;gap:6px;align-items:center;padding:6px 8px;border-radius:4px;text-align:left;cursor:pointer;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(214,170,90,.16)}
.fg-opts label.off{opacity:.55;cursor:default}
.fg-opts img{width:30px;height:30px}
.fg-opts span{display:flex;flex-direction:column;font-size:13px;font-weight:700}
.fg-opts em{font-style:normal;font-weight:400;font-size:11px;color:var(--muted)}
.fg-go{width:240px;height:48px;font-size:17px}
.fg-res{margin:0;font-weight:700}
/* ---------- VIP ---------- */
.vip-on{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.vip-on img{width:44px;height:44px}
.vip-on div{display:flex;flex-direction:column}
.vip-on b{color:var(--gold);font-size:16px}
.vip-on small{color:var(--muted)}
.vip-wrap{display:grid;grid-template-columns:300px 1fr;gap:12px}
.vip-perks .t-title{font-size:19px}
.perks{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.perks li{display:flex;align-items:center;gap:8px;font-size:13.5px}
.perks img{width:26px;height:26px;flex:none}
.vip-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vip-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.vip-card .ic{width:80px;height:80px}
.vip-card .t-title{font-size:21px}
.vip-card.best{border-image-source:url(assets/f_slot_on.png)}
.vp{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--muted)}
.vp img{width:22px;height:22px}
.prices{display:flex;flex-direction:column}
.prices b{font-size:24px;color:var(--gold)}
.prices span{font-size:12px;color:var(--muted)}
.vip-card .two{width:100%}
.ribbon{position:absolute;top:-6px;right:-6px;padding:2px 8px;border-radius:3px;background:linear-gradient(#ffe7a0,#d69a26);color:#2b1702;font-size:11px;font-weight:800;box-shadow:0 2px 0 #5a3a08}
/* PIX: QR code em cima (com Mostrar/Ocultar), Copia e Cola no meio, "Já paguei" por último */
.pix{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:6px}
.pix p{margin:0 0 8px}
.pix .pix-qr{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.pix .qrbox{width:100%}
.pix .qrbox{text-align:center}.pix .qrbox p{margin:8px 0 0;font-size:13px;color:#b9c3cf}
.pix .qr{display:block;margin:0 auto;width:220px;height:220px;image-rendering:pixelated;background:#fff;padding:10px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.pix .pix-qr .buy{min-width:220px}
.pix .pix-cc{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center}
.pix .pix-cc p{text-align:center;color:#d8dde3}
.pix .pix-cc textarea{width:100%;min-height:74px;resize:none;font-size:13px;word-break:break-all}
.pix .pix-cc .buy{margin-top:8px;min-width:220px}
.pix .pix-end{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding-top:10px;border-top:1px solid rgba(230,185,85,.25);max-width:640px}
.pix .pix-end .buy.big{min-width:260px;height:46px;font-size:17px}
/* ---------- ranking / config ---------- */
.wl{display:flex;gap:6px;font-size:12.5px}
.wl .w{color:var(--green)}.wl .l{color:#ff7d74}.wl .d{color:#c9cfd8}
.lrow.rank .buy{width:92px}
.cfg-row{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;margin-bottom:8px}
.cfg-row img{width:40px;height:40px}
.cfg-row div{display:flex;flex-direction:column}
.cfg-row small{color:var(--muted)}
.cfg-row .buy{width:120px}
.two .buy.sm{height:32px}
/* =====================================================================
Modo APP (celular e tablet em pé) — pixels reais da tela, cara de aplicativo:
barra de abas embaixo, telas em tela cheia, chat/missões/loot/"Mais" em painéis
que sobem de baixo, ataque e habilidades na zona do polegar, áreas seguras (notch).
===================================================================== */
.app-fabs,.app-chat,.app-tabs,.app-more,.app-scrim,.app-pts{display:none}
.hf{--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--tab:60px}
.hf.app *{-webkit-tap-highlight-color:transparent}
.hf.app button,.hf.app a,.hf.app .panel{touch-action:manipulation}
.hf.app .topnav,.hf.app .bottombar,.hf.app .p-hero,.hf.app .toplogo,.hf.app .skill .k.wide,.hf.app .quick .key,.hf.app .grip{display:none!important}
/* topo: herói + barras em cima, moedas logo abaixo */
.hf.app .hero-card{left:calc(6px + var(--sl));right:calc(6px + var(--sr));top:calc(var(--st) + 6px);gap:4px}
.hf.app .hero-card .portrait{width:58px;height:58px;flex:none;border-width:9px;border-image-width:9px;position:relative}
.hf.app .hero-card .portrait img{width:40px;height:40px}
.hf.app .app-pts{display:block;right:-8px;top:-8px;min-width:20px;height:20px;font-size:11px;line-height:16px}
.hf.app .app-pts[data-n="0"]{display:none}
.hf.app .hero-info{flex:1;min-width:0;width:auto;height:58px;min-height:0;border-width:9px;border-image-width:9px;gap:1px;padding:0 2px}
/* 25/09: o cartão do PC ganhou min-height 88px e, no celular, a barra de XP ficava embaixo das moedas. Tudo cabe nos 40px de dentro. */
.hf.app .hero-info .row{height:16px;min-height:0}
.hf.app .hero-info .row img{width:16px;height:16px}
.hf.app .hero-info .name{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf.app .hero-info .lvl{font-size:13px}
.hf.app .hero-info .bar.hp{height:11px}
.hf.app .hero-info .bar.hp b{font-size:10px}
.hf.app .hero-info .bar.mana,.hf.app .hero-info .bar.xp{height:5px;min-height:0}
.hf.app .hero-info .bar.mana b,.hf.app .hero-info .bar.xp b{display:none}
.hf.app .hstats{display:none}
.hf.app .topcenter{left:calc(6px + var(--sl));right:calc(6px + var(--sr));top:calc(var(--st) + 68px);transform:none}
.hf.app .currencies{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0;width:100%}
.hf.app .pill{width:auto;height:34px;border-width:7px 10px;border-image-width:7px 10px;gap:4px;padding:0}
.hf.app .pill img{width:22px;height:22px}
.hf.app .pill .v{font-size:14px}
.hf.app .plus{width:22px;height:22px;font-size:0;border-width:5px;border-image-width:5px}
/* minimapa redondo no canto (toque abre o mapa grande) */
.hf.app .p-map{left:auto!important;right:calc(8px + var(--sr));top:calc(var(--st) + 110px);width:98px;height:98px!important;padding:0;border:0;border-image:none;border-radius:50%;box-shadow:0 0 0 3px #0b0806,0 0 0 5px #b8843e,0 4px 14px rgba(0,0,0,.6)}
.hf.app .p-map .head,.hf.app .p-map .explore{display:none}
.hf.app .p-map .mapbody{height:100%}
.hf.app .p-map .minimap{border-radius:50%;box-shadow:none}
/* botões redondos à esquerda */
.hf.app .app-fabs{position:absolute;left:calc(8px + var(--sl));top:calc(var(--st) + 112px);display:flex;flex-direction:column;gap:8px}
.fab{position:relative;width:46px;height:46px;display:grid;place-items:center;border:8px solid transparent;border-image:url(assets/f_slot.png) 28 fill / 8px stretch;border-radius:10px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.fab img{width:28px;height:28px}
.fab:active{transform:scale(.94)}
.fab .badge{right:-10px;top:-10px}
/* última mensagem do chat (toque abre o chat) */
.hf.app .app-chat{position:absolute;left:calc(8px + var(--sl));bottom:calc(var(--tab) + var(--sb) + 14px);right:230px;height:42px;display:flex;align-items:center;gap:6px;padding:0 12px 0 6px;border-radius:21px;background:rgba(8,12,20,.82);box-shadow:inset 0 0 0 1px rgba(214,170,90,.45),0 4px 12px rgba(0,0,0,.45);font-size:12.5px;text-align:left}
.app-chat img{width:28px;height:28px;flex:none}
.app-chat-last{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e3e8f0}
.app-chat-last b{color:#f3d9a0}
.app-chat .dot{position:absolute;left:28px;top:4px;width:10px;height:10px;border-radius:50%;background:#ff5a4e;box-shadow:0 0 0 2px #1a0d0d}
.app-chat .dot[hidden]{display:none}
/* ataque e habilidades na zona do polegar */
.hf.app .actions{left:auto;right:calc(10px + var(--sr));bottom:calc(var(--tab) + var(--sb) + 12px);transform:none;width:214px;height:152px;display:block}
.hf.app .actions .skills{display:contents}
.hf.app .actions .skill,.hf.app .actions .quick,.hf.app .actions .auto,.hf.app .actions .speed{position:absolute}
.hf.app .skill:nth-child(1){right:0;bottom:0;width:82px;height:82px;border-radius:50%;filter:drop-shadow(0 0 10px rgba(80,160,255,.45))}
.hf.app .skill:nth-child(1) img{width:82px;height:82px;border-radius:50%}
.hf.app .skill:nth-child(1) .cd{inset:6px;border-radius:50%}
/* Celular (25/09): ataque normal grande; especial, Redemoinho e Golpe Flamejante em arco em volta dele. */
.hf.app .skill:nth-child(2){right:4px;bottom:92px;width:54px;height:54px}
.hf.app .skill:nth-child(3){right:64px;bottom:76px;width:54px;height:54px}
.hf.app .skill:nth-child(4){right:92px;bottom:10px;width:54px;height:54px}
.hf.app .skill:nth-child(n+2) img{width:54px;height:54px}
.hf.app .skill.locked::after,.hf.app .skill .lv{font-size:9px;padding:0 4px}
/* 29/09 (jogador: "o botão de mana atrapalha andar para sair dos prédios"): poções numa coluna na borda direita,
acima das skills; o Poder especial fica no lugar da poção de vida (perto do polegar). */
.hf.app .quick{right:54px;bottom:152px;width:46px;height:46px;border-width:9px;border-image-width:9px}
.hf.app .quick img{width:26px;height:26px}
.hf.app .auto{right:152px;bottom:0;width:58px;height:67px}
.hf.app .auto img{width:58px;height:67px}
.hf.app .auto span{margin-top:36px;font-size:11px}
.hf.app .speed{right:4px;bottom:152px;height:auto;padding:0;border:0;border-image:none;background:none}
.hf.app .speed button{width:46px;height:46px}
.hf.app .speed button:not(.on){display:none}
/* barra de abas (como app) */
.hf.app .app-tabs{position:absolute;left:0;right:0;bottom:0;z-index:20;height:calc(var(--tab) + var(--sb));padding:0 calc(4px + var(--sr)) var(--sb) calc(4px + var(--sl));display:flex;align-items:stretch;background:linear-gradient(#1a2536,#0c121c);box-shadow:0 -1px 0 #b8843e,0 -2px 0 #0b0806,0 -8px 20px rgba(0,0,0,.5)}
.atab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#b9c3cf;font-size:11px;font-weight:700;transition:color .15s}
.atab img{width:32px;height:32px;transition:transform .15s}
.atab.on{color:var(--gold)}
.atab.on img{transform:translateY(-2px) scale(1.08);filter:drop-shadow(0 0 6px rgba(242,193,78,.6))}
.atab.on::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.atab:active img{transform:scale(.9)}
.atab .badge{right:calc(50% - 26px);top:2px}
.hf.app[data-msheet="more"] .atab[data-sheet="more"]{color:var(--gold)}
/* painéis que sobem de baixo: chat, missões, loot e "Mais" */
.hf.app .app-scrim{display:block;position:absolute;inset:0 0 calc(var(--tab) + var(--sb)) 0;z-index:25;background:rgba(3,5,9,.55);opacity:0;pointer-events:none;transition:opacity .25s}
.hf.app[data-msheet] .app-scrim{opacity:1;pointer-events:auto}
.hf.app .p-chat,.hf.app .p-missions,.hf.app .p-loot,.hf.app .app-more{position:absolute;left:var(--sl);right:var(--sr);top:auto!important;bottom:calc(var(--tab) + var(--sb));width:auto!important;height:min(64%,560px)!important;z-index:30;display:flex;flex-direction:column;padding:6px 12px 10px;border:0;border-image:none;border-radius:18px 18px 0 0;background:linear-gradient(#18243a,#0d1420 60%);box-shadow:0 -12px 30px rgba(0,0,0,.6),inset 0 1px 0 rgba(242,193,78,.5),inset 0 0 0 1px rgba(214,170,90,.18);transform:translateY(calc(100% + 80px));visibility:hidden;transition:transform .3s cubic-bezier(.2,.9,.3,1),visibility 0s linear .3s}
.hf.app .p-missions,.hf.app .p-loot{height:min(50%,440px)!important}
.hf.app .app-more{height:auto!important;max-height:calc(100% - var(--tab) - var(--sb) - var(--st) - 12px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
/* 01/10 (dono: "adicionar scroll para ver todos os ícones"): o Mais rola por dentro, acima da barra de abas */
.hf.app .app-more>*{flex:none}
.hf.app .app-more .more-logout{margin-bottom:4px}
@media (max-height:760px){.hf.app.is-portrait .more-logo{width:140px;margin-bottom:6px}.hf.app.is-portrait .more-btn{padding:8px 2px 6px}.hf.app.is-portrait .more-btn img{width:34px;height:34px}}
.hf.app[data-msheet="chat"] .p-chat,.hf.app[data-msheet="missions"] .p-missions,.hf.app[data-msheet="loot"] .p-loot,.hf.app[data-msheet="more"] .app-more{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.9,.3,1),visibility 0s}
/* 06/10: teclado aberto no chat do celular: a barra de abas sai e o chat usa toda a área que sobra acima do teclado */
.hf.app.kbd .app-tabs{display:none}
.hf.app.kbd .app-scrim{bottom:0}
.hf.app.kbd[data-msheet="chat"] .p-chat{bottom:0;height:calc(100% - var(--st) - 6px)!important;padding-bottom:6px}
.hf.app .panel .head{height:44px;margin:0 0 6px;cursor:default;position:relative;padding-top:8px}
.hf.app .panel .head::before,.sheet-handle{content:"";position:absolute;left:50%;top:0;width:44px;height:4px;margin-left:-22px;border-radius:2px;background:rgba(214,170,90,.55)}
.sheet-handle{position:relative;display:block;margin:0 auto 10px}
.hf.app .panel .head .t-title{font-size:19px}
.hf.app .panel [data-collapse]{width:36px;height:36px;font-size:0}
.hf.app .panel [data-collapse]::after{content:"×";font-size:22px}
.hf.app .p-loot .loot{overflow:auto;mask-image:none}
.hf.app .loot .row{grid-template-columns:28px 1fr 44px 70px;font-size:14px;padding:4px}
.hf.app .ctabs button{height:36px;font-size:13px}
.hf.app .clog{font-size:14px}
.hf.app .csend{padding-bottom:2px}
.hf.app .cinput{height:42px;font-size:16px}
.hf.app .csbtn{height:42px;padding:0 10px;font-size:14px}
.more-logo{display:block;width:200px;margin:0 auto 10px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.5))}
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.more-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 2px 8px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(214,170,90,.22);font-size:12px;font-weight:700;color:#e3e8f0}
.more-btn img{width:40px;height:40px}
.more-btn:active{transform:scale(.95);background:rgba(242,193,78,.12)}
.more-btn .badge{right:6px;top:4px}
.more-install{margin-top:12px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px}
.more-install img{width:24px;height:24px;border-radius:6px}
.more-install[hidden]{display:none}
/* avisos */
.hf.app .banner{top:calc(var(--st) + 150px);min-width:0;width:calc(100% - 40px);padding:2px 12px}
.hf.app .bn-title{font-size:22px}
.hf.app .bn-sub{font-size:13px}
.hf.app .toast{top:calc(var(--st) + 160px);min-width:0;width:calc(100% - 32px);height:auto;min-height:54px;padding:6px 12px;font-size:15px}
.hf.app .toast.lvl .t-title{font-size:20px}
.hf.app .msg{bottom:calc(var(--tab) + var(--sb) + 172px);max-width:calc(100% - 32px);text-align:center}
.hf.app .fx{z-index:50}
.hf.app .banner{z-index:45}
/* telas (menus) em tela cheia, acima da barra de abas */
.hf.app .veil{z-index:40;inset:0 0 calc(var(--tab) + var(--sb)) 0;display:block;background:#0b1119;animation:none}
.hf.app .win{width:100%;height:100%;max-width:none;max-height:none;border:0;border-image:none;padding:var(--st) var(--sr) 0 var(--sl);background:linear-gradient(#162133,#0b1119 220px);animation:screenIn .22s cubic-bezier(.2,.9,.3,1)}
@keyframes screenIn{from{opacity:0;transform:translateY(24px)}}
.hf.app .win-head{height:54px;margin:0;padding:0 8px 0 12px;border-bottom:1px solid rgba(214,170,90,.35);background:rgba(0,0,0,.18)}
.hf.app .win-head img{width:34px;height:34px}
.hf.app .win-head .t-title{font-size:22px}
.hf.app .win-head .close{width:40px;height:40px}
.hf.app .win-body{padding:12px 12px 20px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.hf.app .tabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.hf.app .tabs::-webkit-scrollbar{display:none}
.hf.app .tab{flex:none;height:44px;font-size:14px}
.hf.app .buy{min-height:44px;font-size:15px}
.hf.app .buy.sm{min-height:40px;height:auto;font-size:13.5px}
.hf.app input,.hf.app select,.hf.app textarea,.hf.app .input{font-size:16px}
.hf.app .input{height:44px}
.hf.app .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.hf.app .card{min-height:0}
.hf.app .lrow{grid-template-columns:38px 1fr auto;padding:9px 10px;gap:8px}
.hf.app .lrow .buy{min-width:88px}
.hf.app .searchbar .buy{width:auto;padding:0 12px}
.hf.app .cfg{max-width:none}
.hf.app .cfg-btns{flex-wrap:wrap}
.hf.app .cfg-btns .buy{flex:1 1 140px;width:auto}
.hf.app .arow{grid-template-columns:1fr 46px 42px 42px;padding:10px}
.hf.app .arow .mini{width:42px;height:42px;font-size:20px}
.hf.app .tabs-row{flex-wrap:wrap}
.hf.app .win-mapa .win-body,.hf.app .win-atributos .win-body{overflow:auto}
.hf.app .bigmap-wrap{display:block;height:auto}
.hf.app .bigmap{width:100%;height:auto;aspect-ratio:4/3}
.hf.app .bm-side{display:none}
.hf.app .wpanel{width:100%;max-width:none;max-height:100%}
.hf.app .stmt{overflow-x:auto}
.hf.app .stmt .sh,.hf.app .stmt .srow{min-width:900px}
.hf.app .fg-wrap,.hf.app .attr-wrap{height:auto}
/* em pé: uma coluna */
.hf.app.is-portrait .attr-wrap,.hf.app.is-portrait .sell-wrap,.hf.app.is-portrait .du-wrap,.hf.app.is-portrait .fg-wrap,.hf.app.is-portrait .vip-wrap,.hf.app.is-portrait .chest-grid{grid-template-columns:1fr}
.hf.app.is-portrait .lgrid,.hf.app.is-portrait .wgrid,.hf.app.is-portrait .how{grid-template-columns:1fr}
.hf.app.is-portrait .tiles{grid-template-columns:1fr 1fr}
.hf.app.is-portrait .mk-bar{flex-wrap:wrap}
.hf.app.is-portrait .wchip{flex-basis:100%;flex-wrap:wrap}
.hf.app.is-portrait .mk-meta{flex:1;min-width:0}
.hf.app.is-portrait .mk-filters{flex-wrap:wrap}
.hf.app.is-portrait .mk-filters .t-title{flex-basis:100%}
.hf.app.is-portrait .mk-filters .input{flex:1;width:auto;min-width:0}
.hf.app.is-portrait .lcard{grid-template-columns:48px 1fr}
.hf.app.is-portrait .lcard .lp{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;text-align:left}
.hf.app.is-portrait .bh{grid-template-columns:52px 1fr}
.hf.app.is-portrait .bh .ic{width:52px;height:52px}
.hf.app.is-portrait .bt{grid-column:1 / -1;align-items:flex-start;text-align:left}
.hf.app.is-portrait .bacts .buy{flex:1 1 100%}
.hf.app.is-portrait .pix .qr{width:200px;height:200px}
.hf.app.is-portrait .vip-cards{grid-template-columns:1fr 1fr;gap:8px}
.hf.app.is-portrait .vip-card .t-title{font-size:17px}
.hf.app.is-portrait .prices b{font-size:20px}
.hf.app.is-portrait .fg-stats{grid-template-columns:1fr 1fr}
.hf.app.is-portrait .fg-stats div:last-child{grid-column:1 / -1}
.hf.app.is-portrait .fg-opts{grid-template-columns:1fr}
.hf.app.is-portrait .fg-pips{width:100%}
.hf.app.is-portrait .fg-go{width:100%}
.hf.app.is-portrait .fg-list{max-height:none;overflow:visible}
.hf.app.is-portrait .du-cands{max-height:none}
.hf.app.is-portrait .du-row{grid-template-columns:36px 1fr}
.hf.app.is-portrait .du-row > .two,.hf.app.is-portrait .du-row > .buy,.hf.app.is-portrait .du-row > span:last-child{grid-column:1 / -1}
.hf.app.is-portrait .du-replay{grid-template-columns:1fr;gap:8px;min-height:0}
.hf.app.is-portrait .du-vs{flex-direction:row;justify-content:center;gap:12px}
.hf.app.is-portrait .du-vs img{width:40px;height:40px}
.hf.app.is-portrait .du-vs .t-title{font-size:28px}
.hf.app.is-portrait .du-f{padding:10px;display:grid;grid-template-columns:72px 1fr;column-gap:10px;align-items:center;text-align:left}
.hf.app.is-portrait .du-f .portrait{width:72px;height:72px;grid-row:span 4}
.hf.app.is-portrait .du-f .portrait img{width:50px;height:50px}
.hf.app.is-portrait .du-rbtns .buy{flex:1;width:auto}
.hf.app.is-portrait .lrow.rank{grid-template-columns:30px 1fr auto auto}
.hf.app.is-portrait .lrow.rank > b.num{display:none}
.hf.app.is-portrait .lrow.rank .buy{min-width:0;width:auto;padding:0 8px}
.hf.app.is-portrait .attr-top{grid-template-columns:52px 1fr auto}
.hf.app.is-portrait .attr-top .portrait{width:52px;height:52px}
/* deitado: topo em uma linha, painéis laterais, botões um pouco menores */
.hf.app.is-landscape{--tab:52px}
.hf.app.is-landscape .hero-card{right:auto;width:330px}
.hf.app.is-landscape .topcenter{left:auto;right:calc(8px + var(--sr));top:calc(var(--st) + 6px);width:330px}
.hf.app.is-landscape .p-map{top:calc(var(--st) + 50px);width:84px;height:84px!important}
.hf.app.is-landscape .app-fabs{top:calc(var(--st) + 72px);gap:6px}
.hf.app.is-landscape .fab{width:42px;height:42px}
.hf.app.is-landscape .fab img{width:24px;height:24px}
.hf.app.is-landscape .atab{flex-direction:row;gap:6px;font-size:12px}
.hf.app.is-landscape .atab img{width:28px;height:28px}
.hf.app.is-landscape .atab .badge{right:auto;left:calc(50% - 4px)}
.hf.app.is-landscape .p-chat,.hf.app.is-landscape .p-missions,.hf.app.is-landscape .p-loot,.hf.app.is-landscape .app-more{right:auto;width:min(440px,62vw)!important;height:calc(100% - var(--tab) - var(--sb) - var(--st) - 8px)!important;max-height:none;border-radius:0 18px 0 0}
.hf.app.is-landscape .app-more{overflow:auto}
.hf.app.is-landscape .more-grid{grid-template-columns:repeat(5,1fr)}
.hf.app.is-landscape .more-logo{display:none}
.hf.app.is-landscape .actions{transform:scale(.86);transform-origin:100% 100%}
.hf.app.is-landscape .app-chat{right:auto;width:min(300px,38vw)}
.hf.app.is-landscape .banner{top:calc(var(--st) + 56px);width:auto;min-width:320px}
.hf.app.is-landscape .toast{top:calc(var(--st) + 70px);width:auto;min-width:320px}
.hf.app.is-landscape .win-head{height:46px}
.hf.app.is-portrait .fg-right{order:-1}
.hf.app.is-portrait .fg-wrap{display:flex;flex-direction:column}
/* ---------- presença ao vivo (jogadores online e VIPs) ---------- */
.presence{display:flex;align-items:center;gap:4px;margin:-6px 0 8px;padding:1px 10px;border-radius:10px;background:rgba(8,11,16,.62);box-shadow:inset 0 0 0 1px rgba(214,170,90,.25);font-size:12px;font-weight:600;color:#dfe7ef;white-space:nowrap}
.presence .dot{width:8px;height:8px;border-radius:50%;background:#56d364;box-shadow:0 0 6px #56d364;animation:pdot 2.4s ease-in-out infinite}
.presence img{width:15px;height:15px}
.presence b{color:#fff3cf}
.presence .sep{opacity:.5;margin:0 2px}
@keyframes pdot{50%{opacity:.45}}
.hf.app .presence{position:absolute;right:0;top:40px;margin:0;font-size:11px;padding:1px 8px}
/* ---------- Domínio (rotina idle): chip compacto no celular ---------- */
.domchip{display:none}
.hf.app .domchip{position:absolute;display:flex;align-items:center;gap:6px;left:calc(6px + var(--sl));top:calc(var(--st) + 108px);height:32px;min-width:150px;max-width:62vw;border-width:7px 10px;border-image-width:7px 10px;padding:0 2px;z-index:3}
.hf.app.is-landscape .domchip{top:calc(var(--st) + 68px)}
.domchip img{width:18px;height:18px}
.domchip span{font-size:12px;font-weight:700;white-space:nowrap}
.domchip .dbar{position:relative;flex:1;min-width:44px;height:6px;border-radius:3px;background:#0a0f18;box-shadow:0 0 0 1px #3b2c16;overflow:hidden}
.domchip .dbar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(#ffe27a,#d99a2b);transition:width .4s}
.domchip.full .dbar i{background:linear-gradient(#ff8a80,#d8373f);animation:pdot 1.2s ease-in-out infinite}
.domchip.fight span{color:#ff8a80}.domchip.rest span{color:#9fd2ff}
/* ---------- missões: Domínio e missões do dia ---------- */
.bar.gold > i.fill{background:linear-gradient(#fff0a5 0 14%,#e6b955 15% 62%,#a86a1c 63%)}
.quest{position:relative}
.quest .q-act{grid-column:2;justify-self:start;margin-top:4px}
.quest .gold{color:var(--gold);font-weight:600}
.quest.dom.full .q-t{color:#ff9d8a}
.quest.done{opacity:.6}
/* ---------- Fases: mapas ---------- */
.fases-tip{margin:0 0 10px}
.list.maps .lrow.map{grid-template-columns:92px 1fr auto}
.lrow.map .mthumb{width:92px;height:62px;border-radius:4px;background:#1a2330 center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(214,170,90,.35);display:grid;place-items:start;padding:3px 6px;image-rendering:pixelated}
.lrow.map .mthumb b{font-size:18px;color:#fff3cf;text-shadow:0 1px 0 #000,0 0 6px #000}
.lrow.map.locked .mthumb{filter:grayscale(.85) brightness(.55)}
.lrow.map .t small{font-weight:600;color:var(--muted);font-size:12px}
.lrow.map .stars{color:#f2c14e;font-size:12px;font-weight:700;margin-left:4px}
.hf.app .list.maps .lrow.map{grid-template-columns:64px 1fr;row-gap:6px}
.hf.app .lrow.map .mthumb{width:64px;height:48px}
.hf.app .lrow.map .buy{grid-column:1 / -1}
/* ---------- relatório do tempo fora ---------- */
.offline p{margin:0 0 10px;line-height:1.4}
.ofl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 12px}
.ofl-grid > div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;text-align:center}
.ofl-grid img{width:30px;height:30px}
.ofl-grid b{font-size:18px;color:#fff3cf}
.ofl-grid small{font-size:11.5px;color:var(--muted)}
.cfg .ver{margin-top:10px;opacity:.75}
/* celular: 3ª linha do topo com Domínio (esquerda) e presença (direita); minimapa e botões descem uma linha */
.hf.app.is-portrait .domchip{top:calc(var(--st) + 106px);max-width:calc(100% - 190px - var(--sl) - var(--sr))}
.hf.app.is-portrait .presence{top:40px;height:28px}
.hf.app.is-portrait .p-map{top:calc(var(--st) + 146px)}
.hf.app.is-portrait .app-fabs{top:calc(var(--st) + 146px)}
.hf.app.is-portrait .app-fabs [data-sheet="missions"]{display:none}
.hf.app.is-portrait .banner{top:calc(var(--st) + 190px)}
.hf.app.is-portrait .toast{top:calc(var(--st) + 200px)}
.hf.app.is-landscape .app-fabs{top:calc(var(--st) + 108px)}
.hf.app.is-landscape .app-fabs [data-sheet="missions"]{display:none}
.hf.app.is-landscape .presence{right:112px}
/* ---------- chip Alpha e janela Alpha (redes sociais + 3 baús) ---------- */
.alpha-chip{margin-left:6px;padding:0 7px;height:17px;border-radius:9px;font:800 10px/17px "HF Title","Alegreya SC",serif;letter-spacing:.08em;text-transform:uppercase;color:#1b1206;background:linear-gradient(#ffe39a,#e0a63a);box-shadow:0 0 0 1px #6b4611,0 0 8px rgba(255,190,80,.35);cursor:pointer;position:relative}
.alpha-chip:hover{filter:brightness(1.12)}
.alpha-chip.gift::after{content:"";position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:#ff5a4f;box-shadow:0 0 6px #ff5a4f;animation:pdot 1.4s ease-in-out infinite}
.alpha{display:flex;flex-direction:column;gap:12px;max-width:640px;margin:0 auto}
.alpha-hero{display:flex;gap:14px;align-items:flex-start;padding:14px 16px}
.alpha-hero p{margin:6px 0 0;font-size:15px;line-height:1.45}
.alpha-hero .t-title{font-size:21px}
.alpha-badge{flex:none;padding:6px 10px;border-radius:6px;font:800 15px/1 "HF Title","Alegreya SC",serif;letter-spacing:.1em;color:#1b1206;background:linear-gradient(#ffe39a,#e0a63a);box-shadow:0 0 0 2px #6b4611,0 0 14px rgba(255,190,80,.4);transform:rotate(-4deg)}
.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.social{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(214,170,90,.2);transition:filter .12s,transform .12s}
.social:hover{filter:brightness(1.15);transform:translateY(-1px)}
.social .sn{flex:none;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font:800 14px/1 "HF Sans",sans-serif;color:#fff}
.social.ig .sn{background:#a23d86;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.social.x .sn{background:#15181d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.social .st{flex:1;min-width:0;display:flex;flex-direction:column}
.social .st b{font-size:14px}.social .st small{font-size:11px;color:var(--muted)}
.social .go{flex:none;font-size:12px;font-weight:700;padding:4px 9px;border-radius:12px;background:linear-gradient(#ffe39a,#d99a2b);color:#1b1206}
.social.done .go{background:rgba(111,211,106,.18);color:var(--green);box-shadow:inset 0 0 0 1px rgba(111,211,106,.4)}
.social-reward{display:flex;align-items:center;gap:12px;padding:12px 14px}
/* Janela Alpha: voto no TopIdle (recompensa por voto confirmado) */
.tvote{display:flex;align-items:center;gap:14px;padding:12px 14px}
.tvote .tv-l{flex:1;min-width:0}
.tvote .nm{font-size:16px}
.tv-rw{display:flex;flex-wrap:wrap;gap:6px 12px;margin:6px 0 4px}
.tv-rw span{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:#dcd4c2}
.tv-rw img{width:22px;height:22px;image-rendering:auto}
.tv-rw b{color:#f2c14e;font-size:14px}
.tv-st{font-size:13px}
.tvote .tv-r{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.tv-selo img{display:block;width:173px;height:auto}
.tvote a.buy{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-width:150px}
.hf.app.is-portrait .tvote{flex-direction:column;align-items:stretch;text-align:center}
/* Janelas "Vote no TopIdle" (convite na abertura) e "Voto recebido!": cartão compacto e discreto, fundo mais claro */
.veil[data-win="votar"],.veil[data-win="votou"]{background:rgba(3,5,9,.38)}
.win.win-votar,.win.win-votou{width:380px;height:auto}
/* Janela "Renascer" (24/09): mesmo cartão compacto do voto, um pouco mais largo para a lista */
.veil[data-win="renascer"]{background:rgba(3,5,9,.45)}
.win.win-renascer{width:460px;height:auto}
.rbn .rbn-list{margin:0 0 10px;padding-left:18px;text-align:left;font-size:13.5px;line-height:1.4}
.rbn .rbn-list li{margin:2px 0}
.hf.app .win.win-renascer{width:calc(100% - 28px);max-width:460px;height:auto;padding:12px 14px;border-radius:10px}
.win-votar .win-head,.win-votou .win-head{height:34px;margin:-4px 0 8px;padding-bottom:4px}
.win-votar .win-head img,.win-votou .win-head img{width:26px;height:26px}
.win-votar .win-head .t-title,.win-votou .win-head .t-title{font-size:18px}
.win-votar .win-head .close,.win-votou .win-head .close{width:28px;height:28px;font-size:17px}
.vinv{text-align:center}
.vinv p{margin:0 0 8px;font-size:14px;line-height:1.35}
.vinv-rw{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 10px}
.vinv-rw span{flex:0 1 120px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:6px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(214,170,90,.18)}
.vinv-rw img{width:24px;height:24px}
.vinv-rw b{font-size:15px;color:#f2c14e}
.vinv-rw small{font-size:11px;color:var(--muted);line-height:1.2}
.vinv .cfg-btns{display:flex;justify-content:center;gap:8px;margin:0}
.vinv a.buy{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.vinv .vinv-nota{margin:8px 0 0;font-size:12px}
/* Convite do Discord (26/09): mesmo tamanho e cabeçalho da janela do voto; logo oficial do Discord na cor da marca. */
.win.win-discord{width:380px;height:auto}
.win-discord .win-head{height:34px;margin:-4px 0 8px;padding-bottom:4px}
.win-discord .win-head img{width:26px;height:26px}
.win-discord .win-head .t-title{font-size:18px}
.win-discord .win-head .close{width:28px;height:28px;font-size:17px}
.hf.app .win.win-discord{width:calc(100% - 28px);max-width:380px;height:auto;padding:12px 14px;border-radius:10px;box-shadow:0 0 0 1px rgba(214,170,90,.35),0 12px 30px rgba(0,0,0,.55)}
.dsc .dsc-top{display:flex;flex-direction:column;align-items:center;gap:6px;margin:2px 0 10px}
.dsc .dsc-logo{width:52px;height:40px;color:#5865f2;filter:drop-shadow(0 2px 0 rgba(0,0,0,.45))}
.dsc .dsc-top .t-title{font-size:19px}
.dsc .rbn-list{display:inline-block;margin:0 0 12px;padding-left:18px;text-align:left;font-size:13.5px;line-height:1.45}
.dsc .rbn-list li{margin:2px 0}
.dsc .dsc-join{color:var(--muted);text-decoration:underline}
.hf.app .win.win-votar,.hf.app .win.win-votou{width:calc(100% - 28px);max-width:380px;height:auto;padding:12px 14px;border-radius:10px;box-shadow:0 0 0 1px rgba(214,170,90,.35),0 12px 30px rgba(0,0,0,.55)}
.hf.app.is-portrait .tv-rw{justify-content:center}
.social-reward .ic{width:64px;height:64px;flex:none}
.social-reward .sr-t{flex:1;min-width:0}
.social-reward .nm{font-size:17px;font-weight:700;color:var(--gold)}
.social-reward .sbar{margin-top:6px;height:8px;border-radius:4px;background:#0a0f18;box-shadow:0 0 0 1px #3b2c16;overflow:hidden}
.social-reward .sbar i{display:block;height:100%;background:linear-gradient(#ffe27a,#d99a2b);transition:width .4s}
.social-reward.ready{box-shadow:0 0 18px rgba(255,200,90,.35)}
.social-reward.ready .ic{animation:chestHop 1.1s ease-in-out infinite}
.social-reward.claimed{opacity:.75}
@keyframes chestHop{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-6px) rotate(-5deg)}60%{transform:translateY(0) rotate(4deg)}}
.hf.app.is-portrait .social-grid{grid-template-columns:1fr}
.hf.app .alpha-chip{height:16px;line-height:16px;font-size:9px;padding:0 6px}
/* ---------- convites de duelo na hora ---------- */
.invites{position:absolute;left:50%;top:150px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:6;pointer-events:none}
.invite{pointer-events:auto;display:flex;align-items:center;gap:10px;min-width:430px;max-width:560px;padding:8px 12px;animation:invIn .35s cubic-bezier(.2,1.4,.4,1)}
.invite img{width:40px;height:40px;flex:none;animation:pdot 1.2s ease-in-out infinite}
.invite .iv-t{flex:1;font-size:14px;line-height:1.35}.invite .iv-t b{color:var(--gold)}
.invite .iv-b{display:flex;flex-direction:column;gap:5px}
.invite.out{animation:invOut .3s ease forwards}
@keyframes invIn{from{opacity:0;transform:translateY(-16px) scale(.92)}to{opacity:1;transform:none}}
@keyframes invOut{to{opacity:0;transform:translateY(-10px) scale(.95)}}
.hf.app .invites{top:calc(var(--st) + 120px);width:calc(100% - 16px)}
.hf.app .invite{min-width:0;max-width:none;width:100%}
.du-c.live{box-shadow:inset 0 0 0 1px rgba(111,211,106,.55),0 0 10px rgba(111,211,106,.15)}
.du-c .ondot{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%;background:#56d364;box-shadow:0 0 6px #56d364;vertical-align:1px}
/* ---------- arena de duelos ---------- */
.hf-stage.arena-on > :not(.arena-ui):not(.fx):not(.veil){visibility:hidden!important}
.arena-ui{position:absolute;inset:0;pointer-events:none;z-index:5}
.arena-ui[hidden]{display:none}
.arena-ui button{pointer-events:auto}
.ar-top{position:absolute;left:18px;right:18px;top:14px;display:flex;align-items:flex-start;gap:14px}
.ar-f{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.ar-f.r{flex-direction:row-reverse;text-align:right}
.ar-por{flex:none;width:74px;height:74px;display:grid;place-items:center}
.ar-por img{width:52px;height:52px}
.ar-f.l .ar-por{box-shadow:0 0 0 2px #58a8ff,0 0 16px rgba(88,168,255,.45)}
.ar-f.r .ar-por{box-shadow:0 0 0 2px #ff5a4f,0 0 16px rgba(255,90,79,.45)}
.ar-info{flex:1;min-width:0}
.ar-name{font-size:19px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-name small{font-size:13px;color:var(--gold)}
.ar-bar{position:relative;height:20px;margin:5px 0;border-radius:3px;background:#0a0f18;box-shadow:0 0 0 2px #3b2c16,inset 0 2px 4px #000;overflow:hidden}
.ar-bar i{position:absolute;top:0;bottom:0;width:100%}
.ar-f.l .ar-bar i{left:0}.ar-f.r .ar-bar i{right:0}
.ar-bar .ghost{background:#fff1b8;transition:width .5s ease .35s}
.ar-f.l .ar-bar .fill{background:linear-gradient(#9fd2ff 0 18%,#3f8fe8 19% 65%,#1f5bb0 66%);transition:width .12s}
.ar-f.r .ar-bar .fill{background:linear-gradient(#ffb3a8 0 18%,#e5463d 19% 65%,#9f2320 66%);transition:width .12s}
.ar-bar b{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;text-shadow:0 1px 2px #000}
.ar-wpn{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.ar-f.r .ar-wpn{justify-content:flex-end;flex-direction:row-reverse}
.ar-wpn img{width:26px;height:26px;image-rendering:pixelated}
.ar-f.hurt .ar-por{animation:arHurt .35s ease}
.ar-f.sp .ar-por{animation:arSp .5s ease}
@keyframes arHurt{0%{filter:brightness(2) sepia(1) hue-rotate(-40deg) saturate(4);transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}100%{filter:none;transform:none}}
@keyframes arSp{0%{filter:drop-shadow(0 0 0 #6ff3ff)}40%{filter:drop-shadow(0 0 14px #6ff3ff) brightness(1.4)}100%{filter:none}}
.ar-mid{flex:none;width:118px;display:flex;flex-direction:column;align-items:center;gap:1px;padding-top:2px}
.ar-mid img{width:40px;height:40px}
.ar-mid b{font-size:26px;line-height:1}
.ar-mid span{font-size:12px;font-weight:700;color:#ffd76a;letter-spacing:.06em;text-shadow:var(--shadow)}
.ar-foot{position:absolute;right:18px;bottom:16px;display:flex;gap:8px}
.ar-stage{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.ar-pop{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none}
.ar-pop.out{animation:arOut .4s ease forwards}
@keyframes arOut{to{opacity:0;transform:scale(1.08)}}
/* VS: os dois cartões entram pelos lados e o "VS" bate no meio */
.ar-pop.vs{flex-direction:row;gap:34px;justify-content:center;align-items:flex-start;top:120px}
.vs-card{width:260px;padding:14px 14px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.vs-card.l{animation:vsL .45s cubic-bezier(.2,1.3,.4,1) both}.vs-card.r{animation:vsR .45s cubic-bezier(.2,1.3,.4,1) both}
.vs-card .vs-por{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(#233149,#0d1320)}
.vs-card.l .vs-por{box-shadow:0 0 0 3px #58a8ff,0 0 22px rgba(88,168,255,.6)}.vs-card.r .vs-por{box-shadow:0 0 0 3px #ff5a4f,0 0 22px rgba(255,90,79,.6)}
.vs-card .vs-por img{width:64px;height:64px}
.vs-card .nm{font-size:22px}
.vs-stats{display:flex;gap:10px;font-size:12px;color:var(--muted)}.vs-stats b{color:var(--ink)}
.vs-wpn{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700}.vs-wpn img{width:36px;height:36px;image-rendering:pixelated}
.vs-stake{font-size:12px;color:var(--muted)}
.vs-mark{font-size:64px;animation:vsSlam .5s .25s cubic-bezier(.2,1.6,.4,1) both;text-shadow:0 3px 0 #3a2208,0 0 24px rgba(255,190,80,.8)}
@keyframes vsL{from{opacity:0;transform:translateX(-240px)}to{opacity:1;transform:none}}
@keyframes vsR{from{opacity:0;transform:translateX(240px)}to{opacity:1;transform:none}}
@keyframes vsSlam{from{opacity:0;transform:scale(3.2) rotate(-12deg)}to{opacity:1;transform:none}}
.ar-pop.count b{font-size:150px;line-height:1;animation:cnt .85s ease-out both;text-shadow:0 5px 0 #3a2208,0 0 30px rgba(255,200,90,.9)}
@keyframes cnt{0%{opacity:0;transform:scale(2.4)}25%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(.8)}}
.ar-pop.fight b{font-size:110px;color:#fff3cf;animation:fightIn .9s ease-out both;text-shadow:0 5px 0 #7a1d12,0 0 34px rgba(255,120,60,.95)}
@keyframes fightIn{0%{opacity:0;transform:scale(3) rotate(-6deg)}22%{opacity:1;transform:scale(1)}30%{transform:scale(1.06) rotate(1deg)}40%{transform:none}100%{opacity:0;transform:scale(1.25)}}
.ar-pop.ko b{font-size:96px;color:#ffd0c8;animation:fightIn 1.3s ease-out both;text-shadow:0 5px 0 #5a0d0a,0 0 34px rgba(255,70,50,.95)}
.ar-pop.crit{top:118px;bottom:auto}.ar-pop.crit.l{right:50%}.ar-pop.crit.r{left:50%}
.ar-pop.crit b{font-size:30px;color:#ffd76a;animation:critPop .7s ease-out both}
@keyframes critPop{0%{opacity:0;transform:scale(2)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-20px)}}
/* Resultado e vitrine das armas */
.ar-pop.result{justify-content:space-between;padding:96px 0 58px;animation:fade .35s ease both}
.ar-pop.result .res-top,.ar-pop.result .res-bottom{display:flex;flex-direction:column;align-items:center;gap:6px}
.ar-pop.result .res-bottom{pointer-events:auto}
.res-title{font-size:78px;line-height:1;animation:resIn .7s cubic-bezier(.2,1.5,.4,1) both}
.res-title.o-win{color:#ffe08a;text-shadow:0 5px 0 #6b3d08,0 0 36px rgba(255,200,80,.95)}
.res-title.o-loss{color:#c9cfd8;text-shadow:0 5px 0 #20242c,0 0 18px rgba(0,0,0,.8)}
.res-title.o-draw{color:#bfe3ff;text-shadow:0 5px 0 #13304f,0 0 22px rgba(88,168,255,.7)}
@keyframes resIn{from{opacity:0;transform:scale(2.2) translateY(-20px)}to{opacity:1;transform:none}}
.res-sub{font-size:15px;font-weight:700;color:var(--ink);text-shadow:var(--shadow);margin-bottom:6px}
.showcase{position:relative;display:flex;gap:260px;align-items:center;justify-content:center;height:214px}
.showcase.solo{gap:0}
.it-card{position:relative;width:170px;height:210px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 8px 14px;border-radius:10px;background:radial-gradient(ellipse at 50% 40%,rgba(40,55,85,.95),rgba(10,14,22,.96));box-shadow:0 0 0 2px #6b4611,0 10px 30px rgba(0,0,0,.6);text-align:center;opacity:0;animation:cardIn .6s .35s cubic-bezier(.2,1.3,.4,1) forwards;overflow:hidden}
.it-card.b{animation-delay:.5s}
.it-card.flyer{z-index:2}
.showcase.stake .it-card.flyer::after{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 0 2px currentColor,0 0 30px currentColor;opacity:0;animation:fadeIn .4s 2.6s forwards}
.it-card img{position:absolute;top:26px;left:50%;width:112px;height:112px;margin-left:-56px;image-rendering:pixelated;filter:drop-shadow(0 0 10px rgba(255,255,255,.35))}
.it-card .nm{position:relative;font-size:15px;font-weight:800}
.it-card .rar{position:relative;font-size:12px;font-weight:700}
.it-card .rays{position:absolute;left:50%;top:82px;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;opacity:.55;background:repeating-conic-gradient(from 0deg,currentColor 0 7deg,transparent 7deg 22deg);-webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 35%,transparent 68%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 35%,transparent 68%);animation:spin 9s linear infinite}
.it-card.r0{color:#c9cfd8}.it-card.r1{color:#6fd36a}.it-card.r2{color:#58a8ff}.it-card.r3{color:#c77dff}.it-card.r4{color:#ffb640}.it-card.r5{color:#ff5a7a}
.it-card.r3,.it-card.r4,.it-card.r5,.it-card.r6{box-shadow:0 0 0 2px currentColor,0 0 26px currentColor,0 10px 30px rgba(0,0,0,.6)}
.it-card .nm,.it-card .rar{color:inherit;text-shadow:0 2px 2px #000}
@keyframes cardIn{from{opacity:0;transform:translateY(40px) rotateY(90deg)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
/* a aposta do perdedor treme, voa para o vencedor e some dentro do cartão dele */
.showcase.to-r .it-card.flyer{animation:cardIn .6s .35s cubic-bezier(.2,1.3,.4,1) forwards,flyR 1s 1.6s cubic-bezier(.5,0,.3,1) forwards}
.showcase.to-l .it-card.flyer{animation:cardIn .6s .5s cubic-bezier(.2,1.3,.4,1) forwards,flyL 1s 1.6s cubic-bezier(.5,0,.3,1) forwards}
@keyframes flyR{0%{transform:none}12%{transform:translateX(-6px) rotate(-3deg)}24%{transform:translateX(6px) rotate(3deg)}60%{transform:translate(215px,-120px) scale(.85) rotate(200deg)}100%{transform:translate(402px,-16px) scale(.94) rotate(368deg)}}
@keyframes flyL{0%{transform:none}12%{transform:translateX(6px) rotate(3deg)}24%{transform:translateX(-6px) rotate(-3deg)}60%{transform:translate(-215px,-120px) scale(.85) rotate(-200deg)}100%{transform:translate(-402px,-16px) scale(.94) rotate(-368deg)}}
.showcase.stake .it-card.kept{animation:cardIn .6s .35s cubic-bezier(.2,1.3,.4,1) forwards,keepPulse .5s 2.55s ease both}
@keyframes keepPulse{0%{transform:scale(1)}40%{transform:scale(1.14);filter:brightness(1.6)}100%{transform:scale(1.06)}}
.it-card.solo.spin img{animation:wSpin 1.1s .5s cubic-bezier(.2,1,.3,1) both}
@keyframes wSpin{from{transform:rotateY(0) scale(.2);opacity:0}to{transform:rotateY(1080deg) scale(1);opacity:1}}
.sc-cap{font-size:17px;font-weight:700;text-shadow:var(--shadow);opacity:0;animation:fadeIn .4s 2.2s forwards}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.res-btns{display:flex;gap:10px;margin-top:6px;opacity:0;animation:fadeIn .4s 1.2s forwards}
.arena-ui .confetti{position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;animation:confetti linear forwards;pointer-events:none}
@keyframes confetti{to{transform:translateY(820px) rotate(720deg)}}
/* celular: barras compactas, VS empilhado */
.hf.app .ar-top{left:calc(8px + var(--sl));right:calc(8px + var(--sr));top:calc(var(--st) + 8px);gap:6px}
.hf.app .ar-por{width:46px;height:46px}.hf.app .ar-por img{width:34px;height:34px}
.hf.app .ar-name{font-size:14px}.hf.app .ar-name small{font-size:11px}
.hf.app .ar-bar{height:14px;margin:3px 0}.hf.app .ar-bar b{font-size:10px}
.hf.app .ar-wpn{font-size:11px}.hf.app .ar-wpn img{width:20px;height:20px}
.hf.app .ar-mid{width:56px}.hf.app .ar-mid img{width:28px;height:28px}.hf.app .ar-mid b{font-size:18px}.hf.app .ar-mid span{font-size:10px}
.hf.app .ar-foot{right:calc(10px + var(--sr));bottom:calc(10px + var(--sb, 0px))}
.hf.app.is-portrait .ar-wpn span{display:none}
.hf.app.is-portrait .ar-pop.vs{flex-direction:column;gap:6px;top:auto;align-items:center;padding-top:calc(var(--st) + 64px)}
@media (max-height:620px){.hf.app.is-portrait .vs-card{gap:2px;padding:6px 8px}.hf.app.is-portrait .vs-card .vs-stats{display:none}.hf.app.is-portrait .vs-mark{font-size:34px}}
.hf.app.is-portrait .vs-card{width:min(300px,86vw);padding:8px}
.hf.app.is-portrait .vs-card .vs-por{width:56px;height:56px}.hf.app.is-portrait .vs-card .vs-por img{width:42px;height:42px}
.hf.app.is-portrait .vs-card .nm{font-size:18px}
.hf.app.is-portrait .vs-mark{font-size:40px}
.hf.app .ar-pop.count b{font-size:110px}.hf.app .ar-pop.fight b{font-size:72px}.hf.app .ar-pop.ko b{font-size:64px}
.hf.app .res-title{font-size:54px}
.hf.app .showcase{gap:min(160px,30vw);height:190px}
.hf.app.is-portrait .ar-pop.result{padding:calc(var(--st) + 84px) 0 70px}
.hf.app .it-card{width:min(150px,42vw);height:184px}
.hf.app .it-card img{width:88px;height:88px;margin-left:-44px}
.hf.app.is-landscape .ar-pop.vs{top:70px;gap:16px}.hf.app.is-landscape .vs-card{width:220px;padding:8px}
.hf.app.is-landscape .ar-pop.result{padding:62px 0 44px}.hf.app.is-landscape .showcase{height:160px}.hf.app.is-landscape .it-card{height:150px;width:120px}.hf.app.is-landscape .it-card img{width:72px;height:72px;margin-left:-36px;top:14px}
.hf.app .showcase.to-r .it-card.flyer{animation:cardIn .6s .35s cubic-bezier(.2,1.3,.4,1) forwards,flyRs 1s 1.6s cubic-bezier(.5,0,.3,1) forwards}
.hf.app .showcase.to-l .it-card.flyer{animation:cardIn .6s .5s cubic-bezier(.2,1.3,.4,1) forwards,flyLs 1s 1.6s cubic-bezier(.5,0,.3,1) forwards}
@keyframes flyRs{60%{transform:translate(calc(min(160px,30vw) / 2 + 75px),-80px) scale(.85) rotate(200deg)}100%{transform:translate(calc(min(160px,30vw) + min(150px,42vw) - 22px),-14px) scale(.94) rotate(368deg)}}
@keyframes flyLs{60%{transform:translate(calc(-1 * (min(160px,30vw) / 2 + 75px)),-80px) scale(.85) rotate(-200deg)}100%{transform:translate(calc(-1 * (min(160px,30vw) + min(150px,42vw) - 22px)),-14px) scale(.94) rotate(-368deg)}}
.hf-stage:has(> .veil:not([hidden])) > .banner{visibility:hidden}
/* Alpha: botão no topo direito (ao lado de Novidades); no celular fica o chip ao lado de online/VIP */
.nb-alpha .alpha-ico{width:38px;height:38px;margin-top:-4px;display:grid;place-items:center;border-radius:50%;font:800 28px/1 Georgia,"Times New Roman",serif;color:#2b1702;background:radial-gradient(circle at 35% 30%,#fff3b0,#f2c14e 45%,#b77b1c);box-shadow:0 0 0 2px #6b4611,0 0 10px rgba(255,190,80,.5);transition:transform .15s}
.nb-alpha:hover .alpha-ico{transform:translateY(-2px) scale(1.06)}
.hf:not(.app) .alpha-chip{display:none}
/* Seu Herói: Atributos numa faixa embaixo, na largura do painel */
.herobox{grid-template-columns:70px 1fr;grid-template-rows:auto auto;row-gap:8px}
.herobox .attr-btn{grid-column:1 / -1;width:100%;height:38px;flex-direction:row;gap:6px;font-size:14px;border-width:10px;border-image-width:10px}
.herobox .attr-btn .pts{right:-10px;top:-13px}
/* contador ao vivo */
.presence{transition:box-shadow .3s}
.presence.up{animation:presUp .9s ease}
.presence.down{animation:presDown .9s ease}
@keyframes presUp{0%{box-shadow:inset 0 0 0 1px rgba(214,170,90,.25)}20%{box-shadow:inset 0 0 0 1px #56d364,0 0 12px rgba(86,211,100,.7)}100%{box-shadow:inset 0 0 0 1px rgba(214,170,90,.25)}}
@keyframes presDown{0%{box-shadow:inset 0 0 0 1px rgba(214,170,90,.25)}20%{box-shadow:inset 0 0 0 1px #ff8a80,0 0 10px rgba(255,120,110,.5)}100%{box-shadow:inset 0 0 0 1px rgba(214,170,90,.25)}}
/* Sair da conta */
.buy.red{border-image-source:none;background:linear-gradient(#e4574f,#a3221f);box-shadow:inset 0 0 0 2px #5c1210,0 2px 0 #2a0706;color:#fff;border-radius:6px}
.buy.red:hover{filter:brightness(1.12)}
.buy.red[data-sure]{background:linear-gradient(#ff7a5c,#c23420);animation:pdot 1s ease-in-out infinite}
.more-logout{margin-top:8px;width:100%}
/* Aviso de conexão ao vivo (caçada sem WebSocket) */
.hf .netbar{position:absolute;left:50%;top:132px;transform:translateX(-50%);z-index:40;max-width:min(560px,92vw);padding:8px 16px;border-radius:999px;background:rgba(60,14,14,.92);border:1px solid #c0543f;color:#ffe3d6;font:600 14px "HF Sans","Signika",system-ui,sans-serif;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.5);pointer-events:auto;cursor:default}
.hf .netbar[hidden]{display:none}
.hf.app.is-portrait .netbar{top:auto;bottom:calc(150px + env(safe-area-inset-bottom));font-size:13px}
.hf .netbar.click{cursor:pointer;background:rgba(18,40,66,.94);border-color:#4f8fd1;color:#e4f1ff}
.hf .netbar.click:hover{background:rgba(26,56,92,.96)}
/* PC: botões da barra de baixo, habilidades e menu do topo ~12% menores (23/09: pareciam com zoom de 110%). */
.hf:not(.app) .navbtn{width:66px;height:66px}
.hf:not(.app) .navbtn img{width:34px;height:34px}
.hf:not(.app) .navbtn span{font-size:11px}
.hf:not(.app) .bottombar .navbtn{width:68px;height:66px}
.hf:not(.app) .bottombar .navbtn img{width:36px;height:36px}
.hf:not(.app) .bottombar .navbtn span{font-size:12px}
.hf:not(.app) .actions{bottom:108px;gap:7px}
/* Barra de menus mais justa (23/09): moldura de 12 px em vez de 16 e menos folga; as habilidades ficam 14 px acima dela. */
.hf:not(.app) .bottombar{border-width:12px;border-image-width:12px;padding:0 2px;gap:4px;bottom:6px}
.hf:not(.app) .skills{gap:7px}
.hf:not(.app) .skill,.hf:not(.app) .skill img{width:64px;height:64px}
.hf:not(.app) .skill .k{width:20px;height:20px;font-size:11px;line-height:16px}
/* "Espaço" (25/09): pílula da largura do texto, sem o círculo de 20 px por trás. */
.hf:not(.app) .skill .k.wide,.skill .k.wide{width:auto;min-width:0;height:18px;padding:0 7px;border-radius:9px;font-size:10px;line-height:14px;right:50%;left:auto;transform:translateX(50%);bottom:-8px}
.hf:not(.app) .skill.locked::after{font-size:9.5px}
.hf:not(.app) .quick{width:58px;height:58px}
.hf:not(.app) .quick img{width:32px;height:32px}
.hf:not(.app) .auto,.hf:not(.app) .auto img{width:68px;height:79px}
.hf:not(.app) .auto span{margin-top:44px;font-size:13px}
.hf:not(.app) .speed{height:62px}
.hf:not(.app) .speed button{width:42px;height:42px}
/* Versão do jogo no canto de baixo à direita (bem pequena, não pega clique) */
.hf .hf-ver{position:absolute;right:6px;bottom:3px;z-index:5;font:600 10px/1 "HF Sans","Signika",system-ui,sans-serif;color:rgba(230,236,245,.55);text-shadow:0 1px 2px rgba(0,0,0,.9);pointer-events:none;white-space:nowrap}
.hf.app .hf-ver{right:calc(6px + var(--sr,0px));bottom:calc(var(--tab,0px) + var(--sb,0px) + 2px);font-size:9px}
/* Fora de produção (24/09): a versão ganha "local · banco de teste" num tom âmbar, para não confundir com o jogo no ar */
.hf .hf-ver.env-local{color:rgba(255,196,110,.85)}
/* ---------- Mochila · Equipamentos (inventário com o herói) ---------- */
.win-itens .win-body{display:flex;flex-direction:column;overflow:hidden}
.win-itens .tabs-row{flex:none}
.inv{flex:1;min-height:0;display:grid;grid-template-columns:318px 1fr;gap:12px}
.inv-left{display:flex;flex-direction:column;gap:8px;min-height:0}
.inv-doll{display:grid;grid-template-columns:78px 1fr 78px;grid-template-rows:78px 78px;gap:16px 10px;align-items:center;justify-items:center;padding:4px 2px 14px}
.inv-pt{grid-column:2;grid-row:1/3;width:132px;height:172px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-width:12px;border-image-width:12px}
.inv-pt img{width:92px;height:92px;image-rendering:pixelated}
.inv-pt span{font-size:12px;text-align:center;line-height:1.2}
.inv-slot{position:relative;width:78px;height:78px;display:grid;place-items:center;cursor:pointer;color:var(--ink);font:inherit;padding:0;transition:transform .12s}
.inv-slot img{width:44px;height:44px;pointer-events:none}
.inv-slot.empty img{opacity:.22;filter:grayscale(1)}
.inv-slot .sl{position:absolute;left:50%;bottom:-27px;transform:translateX(-50%);font-size:11px;color:var(--muted);white-space:nowrap;pointer-events:none}
.inv-slot .up,.inv-it .up{position:absolute;top:-6px;right:-6px;font-size:11px;color:#f2c14e;text-shadow:0 1px 2px #000}
.inv-slot.has{filter:drop-shadow(0 0 5px var(--rc,transparent))}
.inv-slot.on,.inv-slot.sel{border-image-source:url(assets/f_slot_on.png)}
.inv-slot.can{animation:invCan 1s ease-in-out infinite}
.inv-slot.over{transform:scale(1.1)}
.inv-slot.nope{filter:drop-shadow(0 0 6px #ff6a5a)}
.inv-slot.pop{animation:invPop .45s ease-out}
@keyframes invCan{50%{filter:drop-shadow(0 0 9px #7fe08f)}}
@keyframes invPop{0%{transform:scale(1.25)}100%{transform:scale(1)}}
.r1.has{--rc:#6fd36a}.r2.has{--rc:#58a8ff}.r3.has{--rc:#c77dff}.r4.has{--rc:#ffb640}.r5.has{--rc:#ff5a7a}
.inv-detail{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;border-width:12px;border-image-width:12px;scrollbar-width:thin}
.inv-detail .t-title{font-size:16px}
.inv-dh{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center}
.inv-dh img{width:48px;height:48px}
.inv-dh .nm{font-weight:700;font-size:15px}
.inv-dh .q-d{font-size:12px}
.inv-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
.inv-stats .sr{display:flex;justify-content:space-between;font-size:13px;padding:2px 0;border-bottom:1px solid rgba(214,170,90,.12)}
.inv-stats .sr span{color:var(--muted)}
.inv-stats em{font-style:normal;font-size:12px;margin-left:4px}
.inv-stats em.good{color:#7fe08f}.inv-stats em.bad{color:#ff8a7a}
.inv-act{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.inv-act .buy{height:36px;font-size:13px}
.inv-act .buy:first-child{grid-column:1/3}
.inv-bag{display:flex;flex-direction:column;min-height:0;border-width:12px;border-image-width:12px}
.inv-bag.can{animation:invCan 1s ease-in-out infinite}
.inv-bag.over{filter:drop-shadow(0 0 8px #7fe08f)}
.inv-bh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 2px 8px}
.inv-bh .t-title{font-size:16px}
.inv-bh .chips{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.chip{height:26px;padding:0 10px;border-radius:13px;border:1px solid rgba(214,170,90,.35);background:rgba(8,12,20,.6);color:var(--muted);font:600 12px "HF Sans","Signika",system-ui,sans-serif;cursor:pointer}
.chip.on{background:#2c5d9c;border-color:#7fb2ff;color:#fff}
.inv-grid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));grid-auto-rows:104px;gap:8px;padding:6px 4px 4px;align-content:start;scrollbar-width:thin;scrollbar-color:#8a6a3a #0c121c}
.inv-grid .empty{grid-column:1/-1}
.inv-it{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 4px 6px;border-radius:5px;border:0;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(214,170,90,.2);color:var(--ink);font:inherit;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.inv-it:hover{background:rgba(255,255,255,.08)}
.inv-it img{width:46px;height:46px;pointer-events:none}
.inv-it .n{font-size:11px;line-height:1.15;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600}
.inv-it .up{top:4px;right:6px}
.inv-it .lk{position:absolute;top:5px;left:6px;width:10px;height:12px;background:#f2c14e;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 0 1 6 0V5h1v7H1V5zm1.5 0h3V3.5a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 0 1 6 0V5h1v7H1V5zm1.5 0h3V3.5a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center/contain no-repeat}
.inv-it .bz{position:absolute;bottom:3px;font-style:normal;font-size:9.5px;color:#ffcf7a}
.inv-it.busy{opacity:.6;cursor:not-allowed}
.inv-it.r1{box-shadow:inset 0 0 0 1px rgba(111,211,106,.55)}.inv-it.r2{box-shadow:inset 0 0 0 1px rgba(88,168,255,.6)}.inv-it.r3{box-shadow:inset 0 0 0 1px rgba(199,125,255,.65),0 0 8px rgba(199,125,255,.2)}.inv-it.r4{box-shadow:inset 0 0 0 1px rgba(255,182,64,.75),0 0 10px rgba(255,182,64,.3)}
.inv-it.sel{box-shadow:inset 0 0 0 2px #f2c14e,0 0 10px rgba(242,193,78,.35)}
.inv-it.lifted{opacity:.35}
.dragging,.dragging *{cursor:grabbing!important}
.inv-ghost{position:fixed;left:0;top:0;width:60px;height:60px;z-index:9999;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.7));image-rendering:pixelated}
/* Celular: herói e detalhe em cima, mochila embaixo; tocar equipa pelo detalhe */
.hf.app .win-itens .win-body{overflow:auto}
.hf.app .inv{display:flex;flex-direction:column;gap:10px}
.hf.app .inv-left{flex:none}
.hf.app .inv-doll{grid-template-columns:70px 1fr 70px;grid-template-rows:70px 70px;gap:14px 8px}
.hf.app .inv-slot{width:70px;height:70px}
.hf.app .inv-pt{width:118px;height:154px}
.hf.app .inv-pt img{width:80px;height:80px}
.hf.app .inv-detail{flex:none;overflow:visible}
.hf.app .inv-act .buy{height:42px;font-size:14px}
.hf.app .inv-bag{flex:none}
.hf.app .inv-grid{overflow:visible;grid-template-columns:repeat(auto-fill,minmax(86px,1fr))}
.hf.app .inv-bh .chips{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.hf.app .chip{height:30px;flex:none}
.hf.app .win-itens .tabs{width:100%;margin-bottom:6px}
.hf.app .win-itens .tabs .tab{flex:1 1 0;min-width:0;padding:0 4px;font-size:13px}
.hf.app .win-itens .tabs-row>.buy{display:none}
.plcard{position:relative;padding-right:34px}
.plcard [data-pc="x"]{position:absolute;top:6px;right:6px}
.plcard .iv-b{flex-direction:row;flex-wrap:wrap}
/* Cartão do jogador no celular (30/09, dono: "quando clica em algum jogador sai da tela"): nome em cima, botões 2 por linha. */
.hf.app .plcard{flex-wrap:wrap;row-gap:8px}
.hf.app .plcard .iv-t{flex:1 1 150px;min-width:0}
.hf.app .plcard .iv-b{flex:1 1 100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.hf.app .plcard .iv-b .buy{width:100%;min-width:0;white-space:normal}
.hf.app .plcard .iv-b.jail-on{display:block}
/* Nova versão (06/10, dono marcou o lugar: em cima, à direita da área do jogo, ao lado do zoom): aviso pequeno com o botão Atualizar
e o tempo para atualizar sozinho (hud.js, Update). */
.hf .upbar{position:absolute;left:50%;top:132px;transform:translateX(-50%);z-index:41;display:flex;align-items:center;gap:8px;max-width:min(420px,94vw);padding:4px 5px 4px 8px;border-radius:12px;background:rgba(14,38,24,.95);border:1px solid #58b86a;color:#e6ffe9;font:600 12px "HF Sans","Signika",system-ui,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.5);pointer-events:auto;animation:upin .4s ease-out}
.hf .upbar img{width:24px;height:24px;flex:none}
.hf .upbar .up-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.hf .upbar .up-txt b{color:#f1fff3;font-weight:700;white-space:nowrap}
.hf .upbar .up-txt i{font-style:normal;color:#bff5c6;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hf .upbar .buy{flex:none;height:30px;margin:0;padding:0 12px}
.hf.dock .upbar{left:auto;right:calc(var(--dr) + 76px);top:104px;transform:none}
/* Aviso na tela (09/10, painel › App e avisos): faixa grande no alto, acima de tudo, com a contagem. */
.hf .scrmsg{position:absolute;left:50%;top:96px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;align-items:center;gap:4px;width:min(560px,92vw);padding:14px 40px 14px;border-radius:14px;background:linear-gradient(rgba(60,14,10,.96),rgba(30,8,6,.96));border:2px solid #ffb640;box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 24px rgba(255,170,60,.35);text-align:center;color:#fff3dc;pointer-events:auto;animation:scr-in .35s cubic-bezier(.3,1.4,.5,1)}
.hf .scrmsg[hidden]{display:none}
.hf .scrmsg .scr-title{font-size:24px;line-height:1.15;color:#ffd66b;letter-spacing:.02em;text-shadow:0 2px 0 #3a1406}
.hf .scrmsg .scr-text{font-size:14px;line-height:1.35;color:#ffe9c8}
.hf .scrmsg .scr-clock{margin-top:2px;font-size:30px;line-height:1;color:#fff;text-shadow:0 2px 0 #3a1406}
.hf .scrmsg .scr-clock.now{color:#7dff9a}
.hf .scrmsg .scr-lines{list-style:none;margin:6px 0 2px;padding:0;display:flex;flex-direction:column;gap:6px;align-self:stretch;text-align:left}
.hf .scrmsg .scr-lines li{position:relative;padding-left:24px;font-size:14px;line-height:1.35;color:#fff4e0}
.hf .scrmsg .scr-lines li::before{content:'';position:absolute;left:4px;top:3px;width:12px;height:12px;border-radius:50%;background:#7dff9a;box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 8px rgba(125,255,154,.6)}
.hf .scrmsg .scr-go{margin-top:8px}
.hf .scrmsg.good{background:linear-gradient(rgba(14,52,26,.97),rgba(8,30,16,.97));border-color:#7dff9a;box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 26px rgba(125,255,154,.35)}
.hf .scrmsg.good .scr-title{color:#9dffb4;text-shadow:0 2px 0 #062a12,0 0 10px rgba(125,255,154,.5)}
.hf .scrmsg.good .scr-text{color:#d8ffe2}
.hf.app .scrmsg .scr-lines li{font-size:13px}
.hf .scrmsg .scr-x{position:absolute;right:8px;top:8px;width:26px;height:26px;font-size:16px}
.hf.app .scrmsg{top:calc(var(--st, 0px) + 70px);padding:10px 34px}
.hf.app .scrmsg .scr-title{font-size:19px}.hf.app .scrmsg .scr-clock{font-size:24px}
@keyframes scr-in{from{opacity:0;transform:translateX(-50%) scale(.9)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.hf.app.is-portrait .upbar{top:auto;bottom:calc(var(--sb) + 196px)}
@keyframes upin{from{opacity:0;margin-top:-8px}to{opacity:1;margin-top:0}}
/* ---------- Miniatura de equipamento: raridade e nível (+0 a +12) ---------- */
.ithumb{--rc:#c9cfd8;position:relative;display:inline-grid;place-items:center;width:46px;height:46px;flex:none}
.ithumb img{width:100%;height:100%;position:relative;z-index:1;image-rendering:auto}
.ithumb.r1{--rc:#6fd36a}.ithumb.r2{--rc:#58a8ff}.ithumb.r3{--rc:#c77dff}.ithumb.r4{--rc:#ffb640}.ithumb.r5{--rc:#ff5a7a}
.ithumb.sm{width:36px;height:36px}.ithumb.md{width:48px;height:48px}.ithumb.lg{width:104px;height:104px;margin:0 auto 10px}
/* reflexo que corre pela silhueta da arte (máscara com a própria imagem) */
.ithumb .shine{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.85) 48%,transparent 60%) 0 0/250% 100%}
.ithumb.ug1 img{filter:drop-shadow(0 0 2px rgba(255,255,255,.35))}
.ithumb.ug2 img{filter:drop-shadow(0 0 3px var(--rc))}
.ithumb.ug2 .shine,.ithumb.ug3 .shine,.ithumb.ug4 .shine,.ithumb.ug5 .shine{opacity:1;animation:itShine 3.2s ease-in-out infinite}
.ithumb.ug3 img{animation:itGlow 1.8s ease-in-out infinite}
.ithumb.ug4 img{animation:itGlow 1.4s ease-in-out infinite}
.ithumb.ug4::after,.ithumb.ug5::after{content:"";position:absolute;inset:-6px;z-index:3;pointer-events:none;background:radial-gradient(circle,#fff 0 1px,transparent 2px) 12% 22%/100% 100% no-repeat,radial-gradient(circle,var(--rc) 0 1.5px,transparent 2.5px) 82% 30%/100% 100% no-repeat,radial-gradient(circle,#fff 0 1px,transparent 2px) 70% 84%/100% 100% no-repeat,radial-gradient(circle,var(--rc) 0 1px,transparent 2px) 24% 76%/100% 100% no-repeat;animation:itSpark 1.6s ease-in-out infinite}
.ithumb.ug5::before{content:"";position:absolute;inset:-9px;z-index:0;border-radius:50%;background:conic-gradient(from 0deg,transparent,var(--rc),transparent 30%,#fff8,transparent 55%,var(--rc),transparent 80%);filter:blur(5px);opacity:.75;animation:itAura 2.6s linear infinite}
.ithumb.ug5 img{animation:itGlow 1.1s ease-in-out infinite}
@keyframes itShine{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}
@keyframes itGlow{0%,100%{filter:drop-shadow(0 0 3px var(--rc))}50%{filter:drop-shadow(0 0 9px var(--rc)) brightness(1.12)}}
@keyframes itSpark{0%,100%{opacity:.2;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@keyframes itAura{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ithumb *,.ithumb::before,.ithumb::after{animation:none!important}}
/* Mochila única: equipamento, consumível e material na mesma grade */
.inv-grid{grid-auto-rows:112px}
.inv-it .ithumb{width:46px;height:46px}
.inv-it .rr{font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;opacity:.9;margin-top:-3px}
.inv-it.mat{cursor:pointer;background:rgba(255,255,255,.025)}
.inv-it.mat img{width:40px;height:40px}
.inv-it .qty,.inv-slot .qty{position:absolute;top:4px;right:6px;font-size:11.5px;color:#f2c14e;text-shadow:0 1px 2px #000}
.inv-slot .ithumb{width:46px;height:46px;pointer-events:none}
.inv-doll{grid-template-rows:78px 78px 64px;row-gap:22px}
.inv-slot.pot{width:64px;height:64px;justify-self:center}
.inv-slot.pot img{width:32px;height:32px}
.inv-slot.pot.empty img{opacity:.3;filter:grayscale(1)}
.inv-slot.pot .qty{top:-6px;right:-6px}
.inv-mid{grid-column:2}
.inv-act.one{grid-template-columns:1fr 1fr}
.inv-act.one .buy:first-child:last-child{grid-column:1/3}
.pips{display:inline-flex;gap:2px;vertical-align:middle}
.pips i{width:6px;height:6px;border-radius:1px;background:rgba(255,255,255,.14)}
.pips i.on{background:#f2c14e;box-shadow:0 0 3px #f2c14e}
.gold{color:#f2c14e}
/* Dica do item (passar o mouse, só PC) */
.hf .itip{position:absolute;z-index:60;width:270px;padding:10px 12px;pointer-events:none!important;font-size:12.5px;line-height:1.35;border-width:12px;border-image-width:12px;background:transparent}
.hf .itip[hidden]{display:none}
.itip .tt-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.itip .tt-h img{width:36px;height:36px}
.itip .tt-h b{display:block;font-size:14px}
.itip .tt-h small{color:var(--muted)}
.itip .tt-r{display:flex;justify-content:space-between;gap:10px;margin-top:3px}
.itip .tt-r span{color:var(--muted)}
.itip .tt-r small{color:var(--muted);font-weight:400}
.itip .pips{margin:3px 0 2px}
.itip .tt-n{margin-top:6px;color:#d6dde8}
.itip .tt-d{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px;font-weight:700}
.itip .tt-k{margin-top:6px;font-size:11px;color:var(--muted)}
.itip .tag{margin-top:4px;display:inline-block}
.good{color:#7fe08f}.bad{color:#ff8a7a}
/* Baús: Aventureiro e Raro */
.chests{display:flex;flex-direction:column;gap:12px;min-height:0}
.chest-card{flex:1;display:grid!important;grid-template-columns:110px 1fr;gap:12px;align-items:center;text-align:left!important}
.chest-card .ic.chest{width:104px!important;height:104px!important}
.chest-card .cc-t{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.chest-card .ck{display:flex;align-items:center;gap:6px;font-size:13px}
.chest-card .ck img{width:26px;height:26px}
.chest-card .buy{width:190px;margin:0}
.chest-card.rare{box-shadow:0 0 16px rgba(120,110,255,.25)}
.chest-card.rare .ic.chest{filter:drop-shadow(0 0 8px rgba(160,120,255,.55))}
.hf.app .chest-card{grid-template-columns:84px 1fr}
.hf.app .chest-card .ic.chest{width:80px!important;height:80px!important}
.hf.app .chest-card .buy{width:100%}
/* Loja: saldo de cupons, Baú Raro, pacotes de cupom e pagamento só PIX */
.shop-bal{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:0 0 10px;border-width:12px;border-image-width:12px;font-size:13px}
.shop-bal img{width:30px;height:30px}
.shop-bal span{flex:1}
.shop-bal .buy{flex:none;width:auto;padding:0 12px}
.rare-offer{box-shadow:0 0 14px rgba(140,110,255,.3)}
.vip-card .one .buy{width:100%}
.coupon-card .ic{filter:drop-shadow(0 0 8px rgba(120,220,255,.4));image-rendering:pixelated}
/* AUTO sem VIP: selo "VIP" */
.auto.vip-lock{filter:saturate(.6)}
.auto.vip-lock::after{content:"VIP";position:absolute;top:-6px;right:-8px;padding:1px 5px;border-radius:8px;background:linear-gradient(#ffd66b,#c98b1c);color:#2a1604;font:800 10px/14px "HF Sans","Signika",system-ui,sans-serif;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.auto{position:relative}
/* Poções no celular (29/09): uma linha acima das habilidades, na borda direita (vida à esquerda, mana na ponta). Em coluna
subiam até o zoom nos celulares mais baixos (iPhone com a barra do Safari). */
.hf.app .quick.mana{right:4px;bottom:152px}
/* Deitado: tela baixa, as poções vão para a esquerda do AUTO, na mesma linha */
.hf.app.is-landscape .quick{right:216px;bottom:4px}
.hf.app.is-landscape .quick.mana{right:268px;bottom:4px}
/* Chat transparente (botão ◐): some a moldura e o fundo; o texto ganha sombra para ler sobre o mapa. Passar o mouse escurece um pouco. */
.p-chat .head .chat-clear{margin-right:4px}
/* Idioma do chat (28/09): 🌐 + sigla no topo do chat; abre a lista de línguas por cima da conversa. */
.p-chat .head .chat-lang{margin-left:auto;margin-right:4px;display:inline-flex;align-items:center;gap:3px;width:auto;padding:0 6px;font-size:11px}
.p-chat .head .chat-lang b{font-size:10px;letter-spacing:.5px;color:#f2c14e}
.clang{position:absolute;left:0;right:0;top:34px;z-index:7;display:grid;grid-template-columns:1fr 1fr;gap:3px;max-height:260px;overflow:auto;padding:6px;border-radius:8px;background:#0d1524;box-shadow:0 0 0 1px rgba(214,170,90,.55),0 8px 22px rgba(0,0,0,.6)}
.clang[hidden]{display:none}
.clang-h{grid-column:1/-1;font-size:11px;color:#c9b27a;padding:2px 4px}
.clang button{font:inherit;font-size:12px;text-align:left;padding:5px 7px;border-radius:5px;border:0;background:#17233a;color:#e8e2d0;cursor:pointer}
.clang button:first-of-type{grid-column:1/-1}
.clang button:hover{background:#22324f}
.clang button.on{background:#3a2e12;box-shadow:inset 0 0 0 1px #f2c14e;color:#ffe39a}
.hf.app .chat-lang{margin-left:auto}
.p-chat.clear{border-image:none;border-color:transparent;background:transparent;transition:background .2s}
.p-chat.clear:hover,.p-chat.clear:focus-within{background:rgba(8,12,20,.45);border-radius:6px}
.p-chat.clear .head{border-bottom-color:transparent;opacity:.75}
.p-chat.clear .head:hover{opacity:1}
.p-chat.clear .ctabs,.p-chat.clear .csend{opacity:.55;transition:opacity .2s}
.p-chat.clear:hover .ctabs,.p-chat.clear:hover .csend,.p-chat.clear:focus-within .ctabs,.p-chat.clear:focus-within .csend{opacity:1}
.p-chat.clear .clog{background:transparent!important;text-shadow:0 1px 2px #000,0 0 3px #000}
.p-chat.clear .chat-clear{box-shadow:0 0 0 2px #f2c14e}
.hf.app .chat-clear{display:none}
.chest-card .buy.sm{width:auto;white-space:nowrap;padding:0 12px}
/* Abrir baú e Comprar lado a lado na mesma linha (24/09). */
.chest-card .cc-acts{display:flex;flex-wrap:nowrap;gap:6px;width:100%;align-items:stretch}
.chest-card .cc-acts .buy{flex:0 0 auto;width:auto;min-width:0;white-space:nowrap;padding:0 12px}
.chest-card .cc-acts .buy.sm{flex:1 1 auto;padding:0 4px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:3px}
.chest-card .cc-acts .buy:only-child{flex:0 1 190px}
.hf.app .chest-card .cc-acts .buy:only-child{flex:1 1 auto}
.inv-doll{grid-template-rows:78px 78px 56px;row-gap:20px}
.inv-slot.pot{width:56px;height:56px;border-width:10px;border-image-width:10px}
.inv-slot.pot img{width:28px;height:28px}
/* Chat: aba Privado e nomes clicáveis (perfil; no Privado, responder) */
.ctabs button{font-size:11.5px;padding:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:clip}
.clog .who.pl{cursor:pointer}
.clog .who.pl:hover{text-decoration:underline}
.clog p.dm .who{color:#d9a8ff}
.clog p.mine.dm .who{color:#9fb4d6}
/* Perfil de jogador */
.fr-row{cursor:pointer}
.fr-row:hover{background:rgba(255,255,255,.07)}
.pf{display:flex;flex-direction:column;gap:12px}
.pf-top{display:flex;align-items:center;gap:14px;padding:10px 14px;border-width:12px;border-image-width:12px}
.pf-top .portrait{width:84px;height:84px;display:grid;place-items:center;border-width:10px;border-image-width:10px}
.pf-top .portrait img{width:64px;height:64px}
.pf-id .nm{font-size:20px;font-weight:800;color:#f2c14e}
.pf-id .vipc{width:20px;height:20px;vertical-align:-3px}
.pf .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6b7385;margin-right:6px;vertical-align:1px}
.pf .dot.on{background:#57d36a;box-shadow:0 0 6px #57d36a}
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pf-stats>div{display:flex;flex-direction:column;align-items:center;padding:6px;border-width:10px;border-image-width:10px}
.pf-ranks{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pf-rank{background:rgba(20,26,38,.7);border:1px solid rgba(201,162,92,.35);color:var(--text,#e8e1d0);border-radius:4px;padding:3px 8px;cursor:pointer;font:inherit;font-size:12.5px}
.pf-rank:hover{border-color:#e0b865}.pf-rank b{color:#f3cf76}
.my-prof{cursor:pointer}.my-prof:hover .name{text-decoration:underline}
.pf-stats b{font-size:20px}.pf-stats small{color:var(--muted);font-size:11.5px;text-align:center}
.pf-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pf-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;border-width:12px;border-image-width:12px;text-align:center;font-size:11.5px}
.pf-slot>img{width:44px;height:44px}
.pf-slot.empty>img{opacity:.22;filter:grayscale(1)}
.pf-slot .up{position:absolute;top:-4px;right:-2px;font-size:11px;color:#f2c14e}
.pf-slot span i{font-style:normal;font-weight:700}
.pf-act{display:flex;flex-wrap:wrap;gap:8px}
.pf-act .buy{flex:1;min-width:140px}
.hf.app .pf-stats,.hf.app .pf-slots{grid-template-columns:repeat(2,1fr)}
/* Status completo no perfil (26/09) */
.pf-st{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.pf-st>div{display:flex;flex-direction:column;align-items:center;padding:4px 2px;border-width:8px;border-image-width:8px;min-width:0}
.pf-st small{color:var(--muted);font-size:11px;text-align:center;line-height:1.15}.pf-st b{font-size:15px;color:#f3e3bd}
.pf-ats{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px}
.pf-at{background:rgba(20,26,38,.7);border:1px solid rgba(201,162,92,.3);border-radius:4px;padding:2px 7px;font-size:12px}.pf-at b{color:#f3cf76}.pf-at.zero{opacity:.5}
.pf-pw{float:right;color:#f3cf76;font-weight:700}.pf-pw b{font-size:14px}
.pf-pts{display:inline-block;min-width:18px;height:18px;line-height:18px;border-radius:9px;background:#d4382c;color:#fff;font-style:normal;font-size:11px;margin-left:4px;padding:0 4px}
.hf.app .pf-st{grid-template-columns:repeat(3,1fr)}
.win-perfil{height:auto;max-height:calc(100% - 24px)}
.inv-it.r5{box-shadow:inset 0 0 0 1px rgba(255,90,122,.8),0 0 12px rgba(255,90,122,.35)}
.r5 .ithumb img,.ithumb.r5 img{filter:drop-shadow(0 0 4px #ff5a7a)}
/* Loja · VIP: vantagens em cima (lista vertical) e planos lado a lado; o hover do plano abre as vantagens num balão acima dele (o botão de pagar continua à vista) */
/* Vantagens VIP na Loja: faixa baixa, vantagens lado a lado (24/09), para os planos subirem na tela */
.vip-perks.top{padding:4px 12px;margin-bottom:8px;border-width:12px;border-image-width:12px}
.vip-perks.top .t-title{font-size:15px}
.vip-perks.top .perks{display:flex;flex-wrap:wrap;margin:3px 0 1px;gap:3px 16px}
.vip-perks.top .perks li{font-size:12px;white-space:nowrap}
.vip-perks.top .perks img{width:16px;height:16px}
.vip-perks.top .q-d{margin:1px 0 0;font-size:11px}
.vip-cards.three .vip-card{gap:4px}
.vip-cards.three .vip-card .ic{width:60px;height:60px}
.vip-cards.three .vip-card .t-title{font-size:19px}
.perks li span{flex:1;min-width:0}
.vip-cards.three{grid-template-columns:repeat(3,1fr)}
.vip-cards.four{grid-template-columns:repeat(4,1fr)}
.vip-cards.four .vip-card .t-title{font-size:17px}
.vip-cards.four .vip-card .ic{width:64px;height:64px}
.vip-card .vh{position:absolute;left:4px;right:4px;bottom:calc(100% - 12px);z-index:3;display:flex;flex-direction:column;gap:6px;padding:9px 12px;text-align:left;border-radius:6px;background:rgba(10,16,28,.96);box-shadow:0 0 0 1px #c9a15a,0 8px 20px rgba(0,0,0,.6);opacity:0;transform:translateY(6px);transition:opacity .15s,transform .15s;pointer-events:none}
.vip-card .vh b{color:#f2c14e;font-size:13.5px}
.vip-card .vh ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.vip-card .vh li{display:flex;align-items:center;gap:7px;font-size:12px;line-height:1.2}
.vip-card .vh img{width:18px;height:18px;flex:none}
.hf:not(.app) .vip-card:hover .vh{opacity:1;transform:none}
.hf.app .vip-card .vh{display:none}
.hf.app.is-portrait .vip-cards.three,.hf.app.is-portrait .vip-cards.four{grid-template-columns:1fr 1fr}
/* Duelos: lista de oponentes com retrato, "VS" do escolhido, aposta em miniaturas e histórico com a cor do resultado */
.du-wrap{grid-template-columns:360px 1fr}
.du-new{gap:8px}
.du-cands{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow:auto;grid-template-columns:none;padding-right:2px}
.du-g{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:4px 2px 0}
.du-c{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;padding:5px 8px;width:100%}
.du-c img{width:32px;height:32px;flex:none;border-radius:4px;box-shadow:0 0 0 1px rgba(214,170,90,.35)}
.du-c span{display:flex;flex-direction:column;min-width:0}
.du-c b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.du-c .ondot{position:absolute;right:10px;top:50%;margin-top:-4px}
.du-c.live small{color:#7fe08f}
.du-vsbox{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;padding:8px;border-radius:6px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(214,170,90,.2)}
.du-vsbox.empty{display:block;text-align:center;color:var(--muted);font-size:13px;padding:14px}
.du-me{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;text-align:center}
.du-me img{width:48px;height:48px;border-radius:6px;box-shadow:0 0 0 2px #c9a15a}
.du-me:last-child img{transform:scaleX(-1);box-shadow:0 0 0 2px #d9534f}
.du-me b{font-size:13px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.du-me small{font-size:11px;color:var(--muted)}
.du-x{font-size:24px;color:#f2c14e;text-shadow:0 2px 0 #3a1c00}
.du-lbl{margin:2px 0 -2px}
.du-lbl small{font-size:11px}
.du-stake{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:thin}
.du-s{flex:none;width:78px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;border-radius:5px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(214,170,90,.2);color:var(--ink);font:inherit;cursor:pointer}
.du-s small{font-size:10px;line-height:1.1;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.du-s.on{background:rgba(47,127,224,.22);box-shadow:inset 0 0 0 2px #58a8ff}
.du-none{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);font-size:9.5px;line-height:1;text-align:center}
.du-help{font-size:11.5px;margin:0}
.du-new .buy.big{width:100%}
.du-h{box-shadow:inset 3px 0 0 #6b7385}
.du-h.w{box-shadow:inset 3px 0 0 #57d36a}.du-h.l{box-shadow:inset 3px 0 0 #e05a4f}.du-h.d{box-shadow:inset 3px 0 0 #c9cfd8}
.hf.app .du-wrap{grid-template-columns:1fr}
/* ---------- Loja: "Meus cupons" no topo e dicas (o que cada coisa faz, chances dos baús, quanto rende o pacote) ---------- */
.shop-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.shop-bar .tabs{margin-bottom:0}
.shop-mine{margin-left:auto;display:flex;align-items:center;gap:7px;height:44px;padding:0 4px;cursor:help}
.shop-mine img{width:26px;height:26px}
.shop-mine span{font-size:13px;color:var(--muted)}
.shop-mine b{font-size:17px;color:#f2c14e;min-width:40px}
.shop-mine .plus{position:relative;margin-left:2px}
.shop-items .card{cursor:help}
.shop-items .card .buy{cursor:pointer}
.shop-items .odds{font-size:11px;color:var(--muted);margin:-2px 0 6px;line-height:1.3}
.coupon-card{cursor:help}
.coupon-card .buy{cursor:pointer}
.itip .tt-price{display:flex;align-items:center;gap:3px;color:#f2c14e;font-weight:700}
.itip .tt-price img{width:16px;height:16px}
.itip .tt-odds{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.itip .tt-odds div{display:grid;grid-template-columns:62px 1fr 38px;align-items:center;gap:6px;font-size:11.5px;font-weight:700}
.itip .tt-odds span{color:currentColor}
.itip .tt-odds i{height:7px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.itip .tt-odds em{display:block;height:100%;background:currentColor;border-radius:4px;box-shadow:0 0 6px currentColor}
.itip .tt-odds b{text-align:right;color:#e8edf5}
.itip .tt-grid{display:grid;grid-template-columns:repeat(4,auto auto);gap:2px 8px;margin-top:4px;font-size:11px}
.itip .tt-grid span{color:var(--muted)}
.itip .tt-buy{display:flex;align-items:center;gap:7px;margin-top:4px}
.itip .tt-buy img{width:22px;height:22px}
.itip .tt-buy span{flex:1}
.itip .tt-buy b{display:flex;align-items:center;gap:3px;color:#f2c14e}
.itip .tt-buy b img{width:15px;height:15px}
.itip .tt-buy.no{opacity:.5}
.itip .tt-buy.no b{color:var(--muted);font-weight:400}
.itip .tt-own{margin-top:8px;padding-top:6px;border-top:1px solid rgba(214,170,90,.2)}
.pill[data-k="p_coupons"]{cursor:help}
/* ---------- Dica da Mochila: comparação lado a lado com o item equipado no mesmo espaço ---------- */
.hf .itip.wide{width:470px}
.itip .tt-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.itip .tt-card{min-width:0}
.itip .tt-card.eq{padding-left:10px;border-left:1px solid rgba(214,170,90,.25);opacity:.9}
.itip .tt-lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#f2c14e;margin-bottom:5px}
.itip .tt-card.eq .tt-lab{color:var(--muted)}
.itip .tt-card b em{font-style:normal;font-size:11px;margin-left:3px}
.itip .tt-sum{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:8px;padding:6px 8px;border-radius:5px;background:rgba(255,255,255,.05);font-weight:700}
.itip .tt-sum span{color:var(--muted);font-weight:400}
/* ---------- Mochila: 6 espaços (capacete, peitoral, arma, luvas, anel, botas), herói como no mapa e X para tirar ---------- */
.inv-top{margin-bottom:12px}
.inv-doll{grid-template-columns:70px 1fr 70px;grid-template-rows:70px 70px 70px 56px;row-gap:24px;column-gap:10px}
.inv-doll .inv-slot:not(.pot){width:70px;height:70px}
.inv-pt{grid-column:2;grid-row:1/4;width:132px;height:100%;min-height:250px;justify-content:flex-end;padding-bottom:4px;background:radial-gradient(ellipse at 50% 88%,rgba(242,193,78,.18),transparent 55%)}
.hero-spr{display:block;width:95px;height:135px;background-repeat:no-repeat;background-size:1140px 135px;image-rendering:pixelated;animation:heroIdle 1.25s steps(12) infinite;filter:drop-shadow(0 6px 4px rgba(0,0,0,.45))}
@keyframes heroIdle{from{background-position:0 0}to{background-position:-1140px 0}}
.inv-slot .x{position:absolute;top:-8px;left:-8px;z-index:4;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:800;line-height:1;color:#fff;background:#b8322a;box-shadow:0 0 0 2px #2a0d0b,0 2px 4px rgba(0,0,0,.5);cursor:pointer;opacity:.8;transition:opacity .12s,transform .12s}
.inv-slot:hover .x,.inv-slot.sel .x,.hf.app .inv-slot .x{opacity:1}
.inv-slot .x:hover{transform:scale(1.12)}
.inv-slot .x:hover{background:#e0443a}
.inv-act.two{grid-template-columns:1fr 1fr}
.hf.app .inv-doll{grid-template-columns:64px 1fr 64px;grid-template-rows:64px 64px 64px 52px;row-gap:22px}
.hf.app .inv-doll .inv-slot:not(.pot){width:64px;height:64px}
.hf.app .inv-pt{min-height:230px;width:118px}
.hf.app .hero-spr{width:76px;height:108px;background-size:912px 108px;animation-name:heroIdleS}
@keyframes heroIdleS{from{background-position:0 0}to{background-position:-912px 0}}
/* ---------- Amigos: online primeiro, bolinha verde e botão Mensagem ---------- */
.fr-head{display:flex;align-items:center;gap:6px;margin-top:12px}
.fr-row .fr-av{position:relative;flex:none}
.fr-row .fr-av img{width:38px;height:38px;border-radius:6px;object-fit:cover;image-rendering:auto;background:#0c1220}
.fr-row .fr-av .dot{position:absolute;right:-3px;bottom:-3px;box-shadow:0 0 0 2px #121a2b}
.fr-row:not(.on) .fr-av img{filter:grayscale(.7) brightness(.8)}
.fr-btns{display:flex;gap:6px;margin-left:auto;flex:none}
.fr-btns .buy{width:auto;padding:0 12px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#6b7385;flex:none}
.dot.on{background:#57d36a;box-shadow:0 0 6px #57d36a}
/* ---------- Chat: faixa de amigos nas abas Amigos e Privado ---------- */
/* Amigos no topo do chat (30/09, jogador: "a lista não rola; com mais de 5 amigos o 6º não aparece"): em várias linhas,
até 2 à vista e rolagem para baixo (roda do mouse, dedo ou barrinha). */
.cfr{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;align-content:flex-start;gap:5px;max-height:61px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:4px 2px 6px;margin-bottom:4px;background:linear-gradient(#0f1626 80%,rgba(15,22,38,.9));scrollbar-width:thin;scrollbar-color:rgba(214,170,90,.45) transparent}
.cfr::-webkit-scrollbar{width:5px}.cfr::-webkit-scrollbar-thumb{background:rgba(214,170,90,.45);border-radius:3px}.cfr::-webkit-scrollbar-track{background:transparent}
.cfr.empty{align-items:center;gap:8px;font-size:12px;color:var(--muted)}
/* Seletor do Privado (30/09): "Para: Nome ▾" e a lista embaixo (no fluxo, nunca cortada pela rolagem do chat). */
.cfr.dd{flex-wrap:wrap;align-items:center;gap:6px;max-height:none;overflow:visible}
.cdd-lb{font-size:12px;font-weight:700;color:var(--muted)}
.cdd-b{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;border:1px solid rgba(214,170,90,.5);background:rgba(20,28,44,.95);color:#eef2f7;font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.cdd-b:hover{border-color:#d6aa5a}.cdd-b b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdd-ph{color:#ffd978;font-weight:700}
.cdd-n{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.cdd-car{color:#d6aa5a;transition:transform .15s}.cdd-b.open .cdd-car{transform:rotate(180deg)}
.cdd-p{flex-basis:100%;padding:6px;border:1px solid rgba(214,170,90,.35);border-radius:8px;background:#0c1220;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.cdd-q{display:block;width:100%;box-sizing:border-box;height:28px;margin:0 0 6px;padding:0 8px;border-radius:6px;border:1px solid rgba(255,255,255,.16);background:#141c2c;color:#fff;font:inherit;font-size:12px}
.cdd-l{display:flex;flex-direction:column;gap:2px;max-height:190px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(214,170,90,.45) transparent}
.cdd-o{flex:none;display:flex;align-items:center;gap:7px;min-height:30px;padding:0 8px;border:0;border-radius:6px;background:none;color:#aeb6c2;font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.cdd-o:hover{background:rgba(255,255,255,.07)}.cdd-o.on{color:#e8f6ea}.cdd-o.sel{background:#2b4f93;color:#fff}
.cdd-sep{flex:none;padding:6px 8px 2px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8e9bb0}
.cdd-o b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdd-o small{margin-left:auto;font-size:11px;color:var(--muted)}.cdd-o.sel small{color:#cfe0ff}
.cdd-o[hidden]{display:none}
.cfr .lnk{background:none;border:0;color:#7fb2ff;text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.cfr-b{flex:none;display:flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:12px;border:1px solid rgba(214,170,90,.3);background:rgba(20,28,44,.9);color:#c9cfd8;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.cfr-b.on{color:#e8f6ea;border-color:rgba(87,211,106,.5)}
.cfr-b.sel{background:#2b4f93;border-color:#7fb2ff;color:#fff}
.cfr-b .dot{width:7px;height:7px}
.p-chat.clear .cfr{background:none}
/* ---------- Baús: palco da abertura (antecipação → abre → item sobe), mais forte quanto melhor a raridade ---------- */
.reveal{position:relative;overflow:hidden;padding:0!important;display:block!important;min-height:440px}
.cx-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:16px}
.cx-idle .ds{flex:none}
/* Chances do baú: uma linha por raridade, barra de 0 a 100% dividida em 10 quadradinhos */
.cc-odds{display:flex;flex-direction:column;gap:3px;width:100%;max-width:320px}
.cc-odds div{display:grid;grid-template-columns:66px 1fr 44px;align-items:center;gap:8px;font-size:11.5px;font-weight:700;line-height:1.2}
.cc-odds div.off{opacity:.35}
.cc-odds i{position:relative;display:block;height:9px;background:rgba(255,255,255,.07);border:1px solid rgba(214,170,90,.25);border-radius:2px;overflow:hidden}
.cc-odds i::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(8,12,20,.9) calc(10% - 1px) 10%)}
.cc-odds em{display:block;height:100%;min-width:2px;background:currentColor;box-shadow:0 0 6px currentColor}
.cc-odds b{text-align:right;color:#e8edf5;font-variant-numeric:tabular-nums}
.cx-idle img{width:110px;opacity:.35;filter:grayscale(.4);animation:cxBreath 3s ease-in-out infinite}
@keyframes cxBreath{50%{transform:translateY(-4px)}}
.cx{--rc:#f5e3a8;--amp:1.5;position:absolute;inset:0;overflow:hidden;cursor:pointer;user-select:none}
.cx.r0{--rc:#d9dee6}.cx.r1{--rc:#6fd36a}.cx.r2{--rc:#58a8ff}.cx.r3{--rc:#c77dff}.cx.r4{--rc:#ffb640}.cx.r5{--rc:#ff3d5f}
.cx-bg{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 58%,color-mix(in srgb,var(--rc) 55%,transparent) 0,transparent 55%);opacity:0;transition:opacity 1s ease}
.cx.known .cx-bg{opacity:.35}
.cx.opened .cx-bg{opacity:.8;transition-duration:.25s}
.cx.r5.opened .cx-bg{background:radial-gradient(circle at 50% 55%,rgba(255,61,95,.75) 0,rgba(90,0,20,.5) 38%,transparent 65%)}
.cx-rays{position:absolute;left:50%;top:50%;transition:top .6s ease;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rc) 70%,transparent) 0 7deg,transparent 7deg 22deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 68%);mask:radial-gradient(circle,#000 10%,transparent 68%);opacity:0;transform:scale(.3);pointer-events:none}
.cx.opened .cx-rays{animation:cxRaysIn .6s ease-out forwards,cxSpin 14s linear infinite}
.cx.show .cx-rays{top:29%}
.cx.r0 .cx-rays,.cx.r1 .cx-rays{--ro:.35}
@keyframes cxRaysIn{to{opacity:var(--ro,.75);transform:scale(1)}}
@keyframes cxSpin{to{rotate:360deg}}
.cx-ring{position:absolute;left:50%;top:50%;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;border:4px solid var(--rc);box-shadow:0 0 18px var(--rc),inset 0 0 18px var(--rc);opacity:0;pointer-events:none}
.cx.opened .cx-ring{animation:cxRing .75s ease-out forwards}
@keyframes cxRing{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(6)}}
.cx-box{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;animation:cxDrop .45s cubic-bezier(.3,1.6,.5,1) both}
.cx-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 10px 8px rgba(0,0,0,.5))}
.cx-box .cx-open{opacity:0}
.cx:not(.opened) .cx-closed{animation:cxShake .34s .45s linear infinite}
.cx.known:not(.opened) .cx-closed{filter:drop-shadow(0 0 calc(var(--amp) * 4px) var(--rc)) drop-shadow(0 10px 8px rgba(0,0,0,.5));animation-duration:.22s}
/* cxDrop continua na lista: ao abrir (quando o pulo sai), o baú não repete a queda */
.cx.hop:not(.opened) .cx-box{animation:cxDrop .45s cubic-bezier(.3,1.6,.5,1) both,cxHop .36s ease-in-out 2}
.cx.opened .cx-closed{opacity:0}
.cx.opened .cx-open{opacity:1;animation:cxPop .4s cubic-bezier(.3,1.7,.5,1)}
.cx.show .cx-box{animation:none;transition:top .6s ease,transform .6s ease,opacity .6s ease;top:71%;transform:scale(.72);opacity:.95}
@keyframes cxDrop{0%{transform:translateY(-140px) scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes cxShake{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(calc(var(--amp) * -1.5px),0) rotate(calc(var(--amp) * -1.2deg))}40%{transform:translate(calc(var(--amp) * 1.5px),-1px) rotate(calc(var(--amp) * 1.2deg))}60%{transform:translate(calc(var(--amp) * -1px),0) rotate(calc(var(--amp) * -.8deg))}80%{transform:translate(calc(var(--amp) * 1px),-1px) rotate(calc(var(--amp) * .8deg))}}
@keyframes cxHop{0%,100%{transform:none}45%{transform:translateY(-26px) scale(1.04,.96)}70%{transform:translateY(0) scale(1.08,.9)}}
@keyframes cxPop{0%{transform:scale(1.25)}100%{transform:none}}
.cx-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#fff 0,color-mix(in srgb,var(--rc) 60%,#fff) 30%,transparent 70%);opacity:0;pointer-events:none}
.cx.opened .cx-flash{animation:cxFlash .55s ease-out}
.cx.r5.opened .cx-flash,.cx.r6.opened .cx-flash{animation:cxFlash .55s ease-out,cxFlash .4s .7s ease-out}
@keyframes cxFlash{0%{opacity:.95}100%{opacity:0}}
.cx.storm:not(.opened) .cx-bg{animation:cxStorm .9s steps(1) infinite}
@keyframes cxStorm{0%{opacity:.35}10%{opacity:1;filter:brightness(2)}14%{opacity:.3}40%{opacity:.9}44%{opacity:.35}}
.cx-parts{position:absolute;left:50%;top:48%;width:0;height:0;pointer-events:none}
.cx-parts i{position:absolute;left:0;top:0;width:var(--s);height:var(--s);background:var(--c,var(--rc));box-shadow:0 0 6px var(--c,var(--rc));opacity:0;animation:cxPart var(--t) var(--d) cubic-bezier(.15,.7,.3,1) forwards}
@keyframes cxPart{0%{opacity:1;transform:translate(0,0) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 40px)) rotate(200deg) scale(.4)}}
.cx-item{position:absolute;left:50%;top:29%;width:130px;height:130px;margin:-65px 0 0 -65px;display:grid;place-items:center;opacity:0;transform:translateY(80px) scale(.2);pointer-events:none}
.cx-item .ithumb.lg{width:112px;height:112px;margin:0}
.cx-item .ithumb img{filter:drop-shadow(0 0 10px var(--rc)) drop-shadow(0 6px 6px rgba(0,0,0,.5))}
.cx.show .cx-item{pointer-events:auto;animation:cxRise .75s cubic-bezier(.2,1.5,.4,1) forwards,cxFloat 2.6s .75s ease-in-out infinite}
.cx.show.r3 .cx-item,.cx.show.r4 .cx-item,.cx.show.r5 .cx-item,.cx.show.r6 .cx-item{animation:cxRiseSpin .9s cubic-bezier(.2,1.4,.4,1) forwards,cxFloat 2.6s .9s ease-in-out infinite}
@keyframes cxRise{0%{opacity:0;transform:translateY(80px) scale(.2)}60%{opacity:1;transform:translateY(-14px) scale(1.15)}100%{opacity:1;transform:none}}
@keyframes cxRiseSpin{0%{opacity:0;transform:translateY(80px) scale(.2) rotate(-200deg)}60%{opacity:1;transform:translateY(-16px) scale(1.2) rotate(10deg)}100%{opacity:1;transform:none}}
@keyframes cxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.cx.show.r3 .cx-item::before,.cx.show.r4 .cx-item::before,.cx.show.r5 .cx-item::before,.cx.show.r6 .cx-item::before{content:"";position:absolute;inset:-18px;background:radial-gradient(circle,#fff 0 1.5px,transparent 2.5px) 10% 20%/100% 100% no-repeat,radial-gradient(circle,var(--rc) 0 2px,transparent 3px) 88% 26%/100% 100% no-repeat,radial-gradient(circle,#fff 0 1px,transparent 2px) 78% 88%/100% 100% no-repeat,radial-gradient(circle,var(--rc) 0 1.5px,transparent 2.5px) 16% 80%/100% 100% no-repeat,radial-gradient(circle,#fff 0 1px,transparent 2px) 50% 2%/100% 100% no-repeat;animation:itSpark 1.4s ease-in-out infinite}
.cx-txt{position:absolute;left:10px;right:10px;top:calc(29% + 68px);text-align:center;opacity:0;transform:translateY(10px)}
.cx.show .cx-txt{transition:opacity .35s .35s,transform .35s .35s;opacity:1;transform:none}
.cx-txt .nm{font-size:17px;font-weight:800;text-shadow:0 2px 0 #000,0 0 10px rgba(0,0,0,.8)}
.cx-txt .rar{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;text-shadow:0 1px 0 #000}
.cx-ban{position:absolute;left:0;right:0;top:4%;text-align:center;pointer-events:none}
.cx-banner{font-family:var(--title,inherit);font-size:34px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--rc);text-shadow:0 3px 0 #000,0 0 18px var(--rc);opacity:0}
.cx.show .cx-banner{animation:cxBanner .7s .15s cubic-bezier(.2,1.6,.4,1) forwards}
.cx.show.r4 .cx-banner{background:linear-gradient(100deg,#fff2c0 0%,#ffb640 30%,#fff 45%,#ffb640 60%,#b86c10 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 12px #ffb640);animation:cxBanner .7s .15s cubic-bezier(.2,1.6,.4,1) forwards,cxShine 2.4s 1s linear infinite}
.cx.show.r5 .cx-banner{animation:cxBanner .7s .15s cubic-bezier(.2,1.6,.4,1) forwards,cxPulse 1.1s 1s ease-in-out infinite}
@keyframes cxBanner{0%{opacity:0;transform:scale(2.4);letter-spacing:.5em}100%{opacity:1;transform:none}}
@keyframes cxShine{to{background-position:-250% 0}}
@keyframes cxPulse{50%{text-shadow:0 3px 0 #000,0 0 30px #ff3d5f,0 0 8px #fff}}
.cx-acts{position:absolute;left:10px;right:10px;bottom:12px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cx-acts .buy{width:auto;padding:0 14px}
.cx-acts .up-b{color:#6fe07a;margin-left:3px}
.cx-acts .q-d{align-self:center}
.cx-skip{position:absolute;right:10px;bottom:8px;font-size:11px;color:var(--muted);opacity:.7}
.cx.opened .cx-skip{display:none}
.cx.done{cursor:default}
.cx.done .cx-box{animation:none;top:71%;transform:scale(.72);opacity:.95}
.cx.done .cx-rays{top:29%}
.cx.done .cx-rays{animation:none;opacity:var(--ro,.75);transform:none;animation:cxSpin 14s linear infinite}
.cx.done .cx-item{animation:cxFloat 2.6s ease-in-out infinite;opacity:1;transform:none}
.cx.done .cx-txt{transition:none;opacity:1;transform:none}
.cx.done .cx-banner{animation:none;opacity:1}
.cx.done.r4 .cx-banner{animation:cxShine 2.4s linear infinite;opacity:1}
.cx.done.r5 .cx-banner{animation:cxPulse 1.1s ease-in-out infinite;opacity:1}
.cx.calm *{animation-duration:.01s!important;animation-iteration-count:1!important}
.cx.calm .cx-rays{display:none}
/* janela treme no Lendário e no Mítico */
.win.quake{animation:winQuake .45s ease-out}
.win.quake.big{animation:winQuake .6s ease-out}
@keyframes winQuake{0%,100%{transform:none}15%{transform:translate(-6px,3px)}30%{transform:translate(5px,-4px)}45%{transform:translate(-4px,2px)}60%{transform:translate(3px,-2px)}80%{transform:translate(-1px,1px)}}
@media (prefers-reduced-motion:reduce){.cx *{animation-duration:.01s!important;animation-iteration-count:1!important}.win.quake{animation:none}.hero-spr{animation:none}}
/* Seu Herói: agora com canto de ajuste como os outros painéis; o retrato cresce junto com o painel */
.p-hero .herobox{grid-template-columns:minmax(70px,32%) 1fr;align-content:start}
.p-hero .herobox .portrait{width:100%;height:auto;aspect-ratio:1;max-width:150px}
/* Retrato preenche a moldura (a área interna já desconta a borda de 14 px; 66% dela deixava o rosto minúsculo). Mesma proporção do avatar do topo. */
.p-hero .herobox .portrait img{width:calc(100% + 8px);height:calc(100% + 8px);max-width:none;object-fit:cover;border-radius:3px;image-rendering:auto}
/* ---------- Ferreiro (23/09): 2 colunas — mochila e pedras | bigorna com espaços e chances. Aba Fusão só para VIP ---------- */
.fg-tabs{display:flex;gap:6px;margin-bottom:10px}
.fg-tab{display:flex;align-items:center;gap:6px;height:42px;padding:0 14px;font:inherit;font-size:14px;font-weight:700;color:#d6dde8;cursor:pointer;border:10px solid transparent;border-image:url(assets/f_slot.png) 28 fill / 10px stretch;background:none}
.fg-tab img{width:24px;height:24px}
.fg-tab.on{border-image-source:url(assets/f_slot_on.png);color:#fff}
.fg-tab .vipb{font-style:normal;font-size:10px;font-weight:800;padding:1px 5px;border-radius:3px;background:linear-gradient(#ffe7a0,#d69a26);color:#2b1702}
.fg2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;min-height:0}
.fg-l,.fg-r{display:flex;flex-direction:column;gap:6px;min-height:0;overflow:auto;border-width:12px;border-image-width:12px;padding:6px 8px}
.fg-sec{display:flex;align-items:baseline;gap:6px;font-weight:700;font-size:14px;color:#f2c14e}
.fg-sec small{font-weight:400;font-size:11.5px;color:var(--muted)}
.fg-sec .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:linear-gradient(#ffd76a,#c7881d);color:#2b1702;font-size:12px;flex:none}
.fg-sec.c{justify-content:center}
.fg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px;padding:6px;border-radius:6px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(214,170,90,.18)}
.fg-cell{position:relative;aspect-ratio:1;display:grid;place-items:center;padding:0;border-radius:6px;cursor:pointer;background:rgba(20,28,44,.9);border:1px solid rgba(214,170,90,.22);font:inherit;color:inherit;transition:transform .1s,box-shadow .1s}
.fg-cell:hover{transform:translateY(-1px);box-shadow:0 0 0 1px #d6aa5a}
.fg-cell.on{box-shadow:0 0 0 2px #f2c14e,0 0 12px rgba(242,193,78,.45);background:rgba(60,48,20,.6)}
.fg-cell .ithumb.md{width:42px;height:42px}
.fg-cell .lv{position:absolute;right:3px;bottom:1px;font-size:11px;color:#f2c14e;text-shadow:0 1px 2px #000}
.fg-cell .lv.risk{color:#ff9d5c}
.fg-cell .eqd{position:absolute;left:3px;top:2px;font-style:normal;font-size:9px;font-weight:800;color:#6fe07a}
/* Ferreiro: subtítulos "Equipados" e "Na mochila" ocupam a linha inteira da grade */
.fg-sub{grid-column:1 / -1;display:flex;align-items:baseline;gap:6px;margin:2px 2px -2px;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#cdb98e}
.fg-sub:not(:first-child){margin-top:8px;padding-top:8px;border-top:1px solid rgba(214,170,90,.18)}
.fg-sub small{font-weight:400;color:var(--muted);text-transform:none}
.fg-cell.eq{border-color:rgba(111,224,122,.45)}
.fg-cell.st img{width:34px;height:34px}
.fg-cell.st .qty{position:absolute;right:4px;top:2px;font-size:11px;color:#f2c14e;text-shadow:0 1px 2px #000}
.fg-cell.st .nv{position:absolute;left:0;right:0;bottom:1px;font-style:normal;font-size:10px;font-weight:700;color:#c9cfd8;text-align:center}
.fg-cell.none{opacity:.45}
.fg-wallet{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:4px}
.fg-wallet span{display:flex;align-items:center;gap:4px;font-size:13px}
.fg-wallet img{width:20px;height:20px}
.fg-wallet .buy{margin-left:auto;width:auto;padding:0 12px}
.fg-r{align-items:center;text-align:center;gap:8px}
.fg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;flex:1;padding:10px}
.fg-empty p{margin:0}
.fg-big{position:relative;width:120px;height:120px;display:grid;place-items:center;border-width:12px;border-image-width:12px}
.fg-big.empty img{width:70px;height:70px;opacity:.4;filter:grayscale(.5)}
.fg-big .ithumb.lg{width:84px;height:84px;margin:0}
.fg-big .fg-lvb{position:absolute;right:-10px;top:-12px;font-size:20px;color:#f2c14e;text-shadow:0 2px 0 #3a2208,0 0 8px #000}
.fg-anvil2{display:flex;flex-direction:column;align-items:center;gap:5px}
.fg-anvil2.hammer .fg-big{animation:fgHit .65s ease}
.fg-anvil2.win .fg-big{animation:fgWin .9s ease-out}
.fg-anvil2.fail .fg-big{animation:shake .5s ease;filter:grayscale(.6) brightness(.7)}
@keyframes fgHit{0%,100%{transform:none}20%{transform:rotate(-6deg) scale(.96)}40%{transform:rotate(5deg) scale(1.04);filter:brightness(1.6)}60%{transform:rotate(-3deg)}80%{transform:rotate(2deg);filter:brightness(1.3)}}
@keyframes fgWin{0%{filter:brightness(2.2) drop-shadow(0 0 20px #ffd24d)}100%{filter:none}}
.fg-r .fg-name{font-size:16px}
.fg-r .fg-pips{width:100%;max-width:320px}
.fg-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:340px}
.fg-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:86px;padding:0;font:inherit;color:#d6dde8;cursor:pointer;border-width:10px;border-image-width:10px;background:none}
.fg-slot img{width:40px;height:40px}
.fg-slot span{font-size:11px;font-weight:700}
.fg-slot .qty{position:absolute;right:-4px;top:-8px;font-size:12px;color:#f2c14e;text-shadow:0 1px 2px #000}
.fg-slot.empty img{opacity:.28;filter:grayscale(1)}
.fg-slot.empty span{color:var(--muted)}
.fg-slot.on{border-image-source:url(assets/f_slot_on.png)}
.fg-slot.dis{opacity:.5;cursor:default}
.fg-odds{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;width:100%}
.fg-odds.three{grid-template-columns:repeat(3,1fr)}
.fg-odds div{display:flex;flex-direction:column;gap:2px;padding:6px 4px;border-radius:5px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(214,170,90,.18)}
.fg-odds span{font-size:10.5px;color:var(--muted);line-height:1.15}
.fg-odds b{font-size:15px;display:flex;align-items:center;justify-content:center;gap:3px}
.fg-odds b img{width:16px;height:16px}
.fg-odds .tot{background:linear-gradient(rgba(242,193,78,.18),rgba(0,0,0,.3));box-shadow:inset 0 0 0 1px rgba(242,193,78,.6)}
.fg-odds .tot b{font-size:19px}
.fg-risk{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:12.5px}
.fg-risk b{display:inline-flex;align-items:center;gap:3px}
.fg-risk img{width:16px;height:16px}
.fg-need{margin:0;font-size:12px}
.fg-r .fg-go{width:100%;max-width:300px;height:46px;font-size:17px}
.fu{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.fu-in{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:360px}
.fu-in .fg-slot{height:78px;cursor:default}
.fu-arrow{font-size:22px;color:#f2c14e;line-height:1;animation:fuArrow 1.2s ease-in-out infinite}
@keyframes fuArrow{50%{transform:translateY(4px)}}
.fu-out{width:110px;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-width:12px;border-image-width:12px}
.fu-out img{width:48px;height:48px;opacity:.55}
.fu-out span{font-size:11px;font-weight:700}
.fu.go .fu-in .fg-slot.on img{animation:fuIn .9s ease-in forwards}
@keyframes fuIn{to{transform:translateY(90px) scale(.2);opacity:0}}
.fu.go .fu-out{animation:fuCharge .9s ease-in}
@keyframes fuCharge{100%{filter:brightness(1.8) drop-shadow(0 0 16px #f2c14e)}}
.fu.win .fu-out img{opacity:1;animation:fuWin .9s ease-out}
@keyframes fuWin{0%{transform:scale(1.7);filter:brightness(2.5)}100%{transform:none}}
.fu.fail .fu-out{animation:shake .5s ease}
.hf.app .fg2{grid-template-columns:1fr}
.hf.app .fg-odds{grid-template-columns:1fr 1fr}
.hf.app .reveal{min-height:420px}
.win-ferreiro .win-body{display:flex;flex-direction:column}
.fg2{flex:1}
.fg-l{overflow:hidden}
.fg-l .fg-grid:not(.stones){flex:1 1 auto;min-height:90px;overflow:auto;align-content:start}
.fg-l .fg-grid.stones{grid-template-columns:repeat(7,1fr);flex:none}
.hf.app .fg-l{overflow:visible}
.hf.app .fg-l .fg-grid:not(.stones){max-height:260px}
.hf.app .fg-l .fg-grid.stones{grid-template-columns:repeat(4,1fr)}
.fu-help{display:flex;flex-direction:column;gap:4px}
.fu-help div{display:grid;grid-template-columns:30px 42px 1fr auto;align-items:center;gap:8px;padding:4px 8px;border-radius:5px;background:rgba(0,0,0,.22);font-size:12.5px}
.fu-help img{width:28px;height:28px}
.fu-help em{font-style:normal;color:var(--muted);font-size:11.5px}
/* ---------- Dúvidas: guia do jogo (tópicos à esquerda, conteúdo à direita) e o "?" no título das janelas ---------- */
.win-head .help-q{margin-left:auto;margin-right:6px;font-size:18px;font-weight:900;color:#f2c14e}
.win-head .help-q + .close{margin-left:0}
.hp{display:grid;grid-template-columns:230px 1fr;gap:12px;height:100%;min-height:0}
.hp-nav{display:flex;flex-direction:column;gap:5px;overflow:auto}
.hp-t{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;font:inherit;font-size:13.5px;font-weight:700;color:#d6dde8;text-align:left;cursor:pointer;border:10px solid transparent;border-image:url(assets/f_slot.png) 28 fill / 10px stretch;background:none}
.hp-t img{width:28px;height:28px;flex:none;object-fit:contain}
.hp-t.on{border-image-source:url(assets/f_slot_on.png);color:#fff}
.hp-c{overflow:auto;padding:6px 14px 12px;border-width:12px;border-image-width:12px;font-size:13.5px;line-height:1.45}
.hp-c h3{margin:10px 0 6px;font-family:"HF Title","Alegreya SC",Georgia,serif;color:#f2c14e;font-size:18px}
.hp-c p{margin:0 0 8px}
.hp-c ul{margin:0 0 8px;padding-left:18px}
.hp-c li{margin:3px 0}
.hp-back{float:right;width:auto;padding:0 12px;margin:6px 0 4px 10px}
.hp-f{padding:8px 10px;border-radius:6px;background:rgba(242,193,78,.1);box-shadow:inset 0 0 0 1px rgba(242,193,78,.4);font-weight:700;text-align:center}
.hp-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.hp-slot{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:8px;padding:4px 6px;border-width:10px;border-image-width:10px}
.hp-slot img{grid-row:1/3;width:44px;height:44px}
.hp-slot span{font-size:12px;color:#6fe07a;font-weight:700}
.hp-tb{width:100%;border-collapse:collapse;margin:4px 0 10px;font-size:12.5px}
.hp-tb th{text-align:left;font-size:11px;font-weight:700;color:var(--muted);padding:4px 6px;border-bottom:1px solid rgba(214,170,90,.3)}
.hp-tb td{padding:4px 6px;border-bottom:1px solid rgba(255,255,255,.06)}
.hp-tb tr:nth-child(even) td{background:rgba(255,255,255,.025)}
.hp-tb.rar td{vertical-align:middle}
.hp-ic{width:30px;height:30px;vertical-align:middle}
.hp-maps{display:flex;flex-direction:column;gap:6px}
.hp-map{border-width:10px;border-image-width:10px;padding:2px 6px}
.hp-map summary{display:flex;align-items:baseline;gap:10px;cursor:pointer;list-style:none;padding:4px 0}
.hp-map summary::-webkit-details-marker{display:none}
.hp-map summary::before{content:"▸";color:#f2c14e;transition:transform .15s}
.hp-map[open] summary::before{transform:rotate(90deg)}
.hp-map summary span{font-size:12px;color:var(--muted)}
.hp-items{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0 6px}
.hp-items div{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:6px;align-items:center;padding:4px;border-radius:5px;background:rgba(0,0,0,.25)}
.hp-items img{grid-row:1/3;width:38px;height:38px}
.hp-items b{font-size:12.5px}
.hp-items small{font-size:11px;color:var(--muted)}
.hf.app .hp{grid-template-columns:1fr;height:auto}
.hf.app .hp-nav{flex-direction:row;overflow-x:auto;flex-wrap:nowrap}
.hf.app .hp-t{flex:none}
.hf.app .hp-slots,.hf.app .hp-items{grid-template-columns:1fr 1fr}
/* ---------- Mochila v2 (23/09, noite): sem o quadro de detalhe. Tocar no item marca (quadradinho) para vender ou travar vários;
a barra de venda aparece no alto da mochila; cada item tem o poder comparado ao equipado e o botão Equipar embaixo. ---------- */
.inv-slot .up,.inv-it .up{top:-8px;right:-8px;z-index:3;min-width:24px;height:18px;padding:0 5px;display:grid;place-items:center;border-radius:9px;font-size:11.5px;line-height:1;color:#ffe08a;background:linear-gradient(#3b2609,#170d03);box-shadow:0 0 0 1px #d6a04a,0 2px 5px rgba(0,0,0,.7);text-shadow:0 1px 0 #000;pointer-events:none}
.inv-it .up{top:6px;right:6px}
.inv-hero{display:flex;flex-direction:column;gap:8px;padding:4px 6px 0}
.inv-hero .q-d{margin:0;font-size:11.5px;line-height:1.4}
.inv-grid{grid-template-columns:repeat(auto-fill,minmax(116px,1fr));grid-auto-rows:auto;gap:8px}
.inv-it{justify-content:flex-start;gap:2px;min-height:176px;padding:12px 6px 6px;cursor:pointer}
.inv-it .ithumb,.inv-it.mat>img{margin:4px 0 3px}
.inv-it .n{min-height:26px;display:-webkit-box;place-content:center}
.inv-it .rr{margin-top:0}
.inv-it .pw{font-size:11px;color:var(--muted);white-space:nowrap;margin-bottom:5px}
.inv-it .pw b{color:var(--ink)}
.inv-it .pw em{font-style:normal;font-weight:700;margin-left:2px}
.inv-it .pw em.good{color:#7fe08f}.inv-it .pw em.bad{color:#ff8a7a}.inv-it .pw em.eq0{color:var(--muted)}
.inv-it .ib-box{position:absolute;top:4px;left:4px;z-index:3;width:28px;height:28px;display:grid;place-items:center;cursor:pointer}
.inv-it .ib-box img{width:20px;height:20px;image-rendering:pixelated;pointer-events:none}
.inv-it.locked .ib-box img{width:17px;height:19px}
.inv-it .ib-box:hover img{filter:brightness(1.25)}
.inv-it.sel{background:rgba(242,193,78,.12)}
.inv-it.locked{background:rgba(255,255,255,.025)}
.inv-it .ib-eq{margin-top:auto;width:100%;height:30px;font-size:12.5px;padding:0 2px;white-space:nowrap}
.inv-it span.ib-eq{display:grid;place-items:center;height:30px;font-size:11px;color:var(--muted)}
.inv-it.busy .ib-eq{color:#ffcf7a}
.inv-it.mat .rr{font-size:9.5px;color:var(--muted)}
.inv-it.mat .qty{top:6px;right:8px}
.inv-sell{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 2px 8px;padding:6px 8px;border-radius:6px;background:#2a2412;box-shadow:inset 0 0 0 1px rgba(242,193,78,.5),0 4px 10px rgba(0,0,0,.35);animation:fadeIn .15s ease}
.inv-sell .txt{flex:1;min-width:120px;font-size:13px;line-height:1.3}
.inv-sell .amt{display:inline-flex;align-items:center;gap:3px;color:#f2c14e;white-space:nowrap;vertical-align:-3px}
.inv-sell .amt img{width:16px;height:16px}
.inv-sell .txt em{display:block;font-style:normal;font-size:12px}
.inv-sell .buy.sm{width:auto;padding:0 12px;white-space:nowrap}
.inv-sell .buy.sm img{width:16px;height:16px}
.inv-sell .lnk{background:none;border:0;padding:0 2px;color:#8fc1ff;text-decoration:underline;cursor:pointer;font:600 12.5px "HF Sans","Signika",system-ui,sans-serif}
.inv-sell .lnk[hidden]{display:none}
.inv-sell.ask{background:#2e1a18;box-shadow:inset 0 0 0 1px rgba(255,138,122,.55),0 4px 10px rgba(0,0,0,.35)}
.hf.app .inv-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.hf.app .inv-it{min-height:184px}
.hf.app .inv-it .ib-eq{height:36px;min-height:36px;font-size:13px}
.hf.app .inv-sell{position:sticky;top:0;z-index:6}
.hf.app .inv-hero{padding:0 2px;margin-top:22px}
.hf.app .inv-hero .inv-stats{grid-template-columns:repeat(4,1fr);gap:2px 10px}
.hf.app .inv-hero .inv-stats .sr{flex-direction:column;align-items:center;gap:1px;border:0;padding:4px 0;border-radius:5px;background:rgba(255,255,255,.04);font-size:12px}
.hf.app .inv-doll{grid-template-columns:58px 1fr 58px;grid-template-rows:58px 58px 58px 50px;row-gap:22px}
.hf.app .inv-doll .inv-slot:not(.pot){width:58px;height:58px}
.hf.app .inv-slot.pot{width:50px;height:50px}
.hf.app .inv-pt{min-height:200px;width:112px}
/* celular deitado: herói à esquerda (parado ao rolar) e a mochila à direita */
.hf.app.is-landscape .inv{display:grid;grid-template-columns:minmax(270px,36%) 1fr;align-items:start;gap:12px}
.hf.app.is-landscape .inv-left{position:sticky;top:0}
.hf.app.is-landscape .inv>*{min-width:0}
.hf.app.is-landscape .inv-hero .inv-stats{grid-template-columns:1fr 1fr}
/* ---------- Duelos v2 (23/09, noite): passos (1 oponente, 2 aposta) com o botão Desafiar sempre à vista no rodapé do painel.
PC: duas colunas. Celular: abas Desafiar · Desafios · Histórico e o rodapé grudado embaixo. ---------- */
.win-duelos .win-body{display:flex;flex-direction:column;overflow:hidden}
.du-wrap{flex:1;min-height:0;grid-template-columns:380px 1fr;gap:12px}
.du-new{min-height:0;display:flex;flex-direction:column;gap:7px}
.du-step{display:flex;align-items:baseline;gap:7px;min-width:0;font-weight:700;font-size:14px;color:#f2c14e;margin-top:2px}
.du-step .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:linear-gradient(#ffd76a,#c7881d);color:#2b1702;font-size:12px;flex:none}
.du-step small{font-weight:600;font-size:11.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.du-new .du-cands{flex:1;min-height:96px;max-height:none}
.du-new .du-stake{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;overflow:auto;overflow-x:hidden;max-height:140px;padding:2px;flex:none}
.du-s{position:relative;width:auto;min-height:68px;justify-content:center}
.du-s .up{position:absolute;top:3px;right:4px;font-size:10px;color:#ffe08a;text-shadow:0 1px 0 #000}
.du-s .du-none{width:30px;height:30px;font-size:16px;color:var(--muted)}
.du-go{display:flex;flex-direction:column;gap:7px;padding-top:8px;border-top:1px solid rgba(214,170,90,.22);flex:none}
.du-vsmini{display:flex;align-items:center;gap:8px;min-height:40px}
.du-vsmini img{width:36px;height:36px;flex:none;border-radius:5px;box-shadow:0 0 0 2px #c9a15a}
.du-vsmini img.foe{transform:scaleX(-1);box-shadow:0 0 0 2px #d9534f}
.du-vsmini .t-title{font-size:17px;color:#f2c14e}
.du-vsmini span{display:flex;flex-direction:column;min-width:0}
.du-vsmini span b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.du-vsmini small{font-size:11.5px;color:var(--muted)}
.du-vsmini em{font-style:normal}
.du-vsmini.none{justify-content:center;color:var(--muted);font-size:13px;border-radius:6px;background:rgba(0,0,0,.2)}
.du-go .buy.big{width:100%}
.hf:not(.app) .du-go{flex-direction:row;align-items:center}
.hf:not(.app) .du-go .du-vsmini{flex:1;min-width:0}
.hf:not(.app) .du-go .buy.big{width:150px;flex:none;height:44px}
.du-new .du-help{font-size:11px;margin:0;flex:none;line-height:1.35}
.du-nost{margin:0;font-size:12px}
.du-list{min-height:0;overflow:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:#8a6a3a #0c121c}
.du-card{display:flex;flex-direction:column;gap:8px;padding:10px 12px;margin-bottom:8px;border-radius:6px;background:rgba(242,193,78,.07);box-shadow:inset 0 0 0 1px rgba(242,193,78,.4)}
.du-ch{display:flex;align-items:center;gap:10px;font-size:14px}
.du-ch img{width:40px;height:40px;flex:none;border-radius:5px;transform:scaleX(-1);box-shadow:0 0 0 2px #d9534f}
.du-ch small{display:block;font-size:12px;color:var(--muted)}
.du-bet{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px}
.du-bet .ithumb{width:28px;height:28px}
.du-lb{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
.du-card .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Desafios recebidos (29/09, dono): uma linha, botões pequenos à direita; celular em pé: botões embaixo, lado a lado */
.du-card.du-in{flex-direction:row;align-items:center;gap:12px;padding:8px 12px}
.du-card.du-in .du-ch{flex:1;min-width:0}
.du-card.du-in .du-acts{display:flex;gap:8px;flex:none}
.du-card.du-in .du-acts .buy.sm{width:110px;height:34px;min-width:0;padding:0 10px}
.hf.app.is-portrait .du-card.du-in{flex-direction:column;align-items:stretch;gap:8px}
.hf.app.is-portrait .du-card.du-in .du-acts .buy.sm{flex:1;width:auto}
.du-row,.hf.app.is-portrait .du-row{grid-template-columns:auto 1fr auto}
.du-row > img{width:36px;height:36px;border-radius:5px;transform:scaleX(-1)}
.du-h .pill2{min-width:72px;text-align:center}
.du-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;position:sticky;top:-12px;z-index:6;margin:-12px -12px 8px;padding:10px 12px 8px;background:#152032;box-shadow:0 6px 10px rgba(0,0,0,.3)}
.du-tab{position:relative;height:42px;border-radius:8px;border:1px solid rgba(214,170,90,.35);background:rgba(8,12,20,.6);color:var(--muted);font:700 14px "HF Sans","Signika",system-ui,sans-serif;cursor:pointer}
.du-tab.on{background:#2c5d9c;border-color:#7fb2ff;color:#fff}
.du-n{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 5px;border-radius:10px;background:radial-gradient(#ff6b5e,#c21d24);color:#fff;font-size:12px;font-style:normal;vertical-align:1px}
.hf.app .win-duelos .win-body{display:block;overflow:auto}
.hf.app .du-wrap{display:block}
.hf.app .du-new .du-cands{flex:none;max-height:none;min-height:0}
.hf.app .du-new .du-stake{max-height:none;grid-template-columns:repeat(4,1fr)}
.hf.app .du-go{position:sticky;bottom:-20px;z-index:5;margin:2px -4px -4px;padding:10px 6px 14px;background:#172238;border-radius:6px;box-shadow:0 -6px 14px rgba(0,0,0,.45)}
.hf.app .du-list{overflow:visible;padding:0}
.hf.app .du-row > .buy,.hf.app.is-portrait .du-row > .buy{grid-column:auto;min-width:0;width:auto;padding:0 12px}
.hf.app .du-rec{margin-bottom:6px}
/* celular deitado: pouca altura, então abas mais baixas e o rodapé em uma linha (retratos + botão) */
.hf.app.is-landscape .du-tab{height:34px}
.hf.app.is-landscape .du-go{flex-direction:row;align-items:center;padding:6px 8px 8px}
.hf.app.is-landscape .du-go .du-vsmini{flex:1;min-width:0}
.hf.app.is-landscape .du-go .buy.big{width:220px;flex:none}
.hf.app.is-landscape .du-new .du-stake{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
/* ---------- Fases: itens e chances de cada mapa (dica do mouse no PC; toque em "Itens e chances" abre embaixo) ---------- */
.md-chip{display:inline-flex;align-items:center;gap:5px;margin-top:5px;height:24px;padding:0 10px 0 6px;border-radius:12px;border:1px solid rgba(214,170,90,.4);background:rgba(8,12,20,.55);color:#f2d38a;font:600 12px "HF Sans","Signika",system-ui,sans-serif;cursor:pointer}
.md-chip img{width:16px;height:16px}
.md-chip:hover,.md-chip.on{background:rgba(242,193,78,.14);border-color:#f2c14e}
.lrow.map .md-open{grid-column:1/-1;margin-top:4px;padding:10px 12px;border-radius:6px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(214,170,90,.22)}
.hf .itip:has(.tt-drops){width:360px}
.tt-drops .md-h b{display:block;font-size:14px;color:#f2c14e}
.tt-drops .md-h small{color:var(--muted);font-size:11.5px}
.tt-drops .md-items{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;margin:8px 0}
.tt-drops .md-items div{display:flex;align-items:center;gap:6px;min-width:0}
.tt-drops .md-items img{width:28px;height:28px;flex:none;image-rendering:pixelated}
.tt-drops .md-items span{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.tt-drops .md-items b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-drops .md-items small{font-size:10.5px;color:var(--muted)}
.tt-drops .md-ch{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:6px 8px;border-radius:5px;background:rgba(255,255,255,.05)}
.tt-drops .md-ch>span{font-size:12px;color:var(--muted)}
.tt-drops .md-ch div{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.tt-drops .md-ch b{font-size:15px;color:#7fe08f}
.tt-drops .md-ch small{font-size:10.5px;color:var(--muted)}
.tt-drops .md-ch+.md-ch{margin-top:4px}
.tt-drops .md-tb{width:100%;margin-top:6px;border-collapse:collapse;font-size:12px}
.tt-drops .md-tb th{font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:right;padding:2px 4px}
.tt-drops .md-tb th:first-child,.tt-drops .md-tb td:first-child{text-align:left}
.tt-drops .md-tb td{padding:2px 4px;text-align:right;font-weight:700;border-top:1px solid rgba(214,170,90,.1)}
.tt-drops .md-n{margin:6px 0 0;font-size:11.5px;color:#d6dde8}
.hf.app .md-chip{height:30px;font-size:13px}
.hf.app .tt-drops .md-items{grid-template-columns:1fr 1fr}
/* ---------- Avisos e janelas curtas (23/09, noite): no celular viram um cartão centralizado, com margem e o jogo aparecendo
atrás, na altura do conteúdo (sem sobra embaixo do botão). No PC, "Enquanto você esteve fora" e "Servidor Alpha" também
ficam na altura do conteúdo. Janelas grandes (Mochila, Loja, Duelos…) continuam em tela cheia no celular. ---------- */
.win.win-offline{width:640px;height:auto}
.hf.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]){display:flex;align-items:center;justify-content:center;padding:calc(var(--st) + 16px) calc(var(--sr) + 14px) 16px calc(var(--sl) + 14px);background:rgba(3,5,9,.52);animation:fade .18s ease}
.hf.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .win{width:100%;max-width:420px;height:auto;max-height:100%;padding:0;border:14px solid transparent;border-image:url(assets/f_panel_lg.png) 33 fill / 14px stretch;border-radius:0;background:none;box-shadow:0 14px 34px rgba(0,0,0,.6);animation:winIn .26s cubic-bezier(.2,1.2,.4,1)}
.hf.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .win-head{height:auto;min-height:40px;margin:-2px 0 10px;padding:0 0 8px;background:none}
.hf.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .win-head img{width:28px;height:28px}
.hf.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .win-head .t-title{font-size:18px;line-height:1.15}
.hf.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .win-head .close{width:34px;height:34px;flex:none}
.hf.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .win-body{flex:1 1 auto;min-height:0;padding:0 2px 2px}
.hf.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .ofl-grid{gap:6px;margin:4px 0 10px}
.hf.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .ofl-grid > div{padding:6px 2px}
.hf.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .offline>.q-d{font-size:12.5px;margin:0 0 10px}
.hf.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .offline .buy{height:46px}
.hf.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .win.still{animation:none}
/* Fases: chance de cada equipamento (lista do admin › Mapas ou automático) */
.tt-drops .md-items small.md-pc{color:#9fe0a8;font-size:10.5px}
/* ---------- Baús no celular (24/09): abrir vira um modal por cima da janela, com o fundo escurecido e o baú abrindo no meio
da tela (antes o palco ficava embaixo dos cartões e não dava para ver). O quadro "Escolha um baú" some; os cartões ficam na
altura do conteúdo (o botão azul "Comprar na Loja" não sai mais da moldura). No PC continua o palco ao lado. ---------- */
.cx-modal{display:contents}
.cx-x{display:none}
.hf.app.is-portrait .chest-grid{display:block;min-height:0}
.hf.app.is-portrait .chests{min-height:auto}
.hf.app.is-portrait .chest-card{flex:none}
.hf.app.is-portrait .cx-modal{display:none}
.hf.app.is-portrait .cx-modal.on{display:flex;position:fixed;inset:0;z-index:80;align-items:center;justify-content:center;padding:16px;background:rgba(3,5,10,.86)}
.hf.app.is-portrait .cx-modal.on .reveal{width:100%;max-width:420px;height:min(560px,calc(100% - 16px));min-height:0;margin:0}
/* só na hora de abrir (fresh): o fundo escurece e o palco cresce; ao mostrar o item a janela é redesenhada sem repetir */
.hf.app.is-portrait .cx-modal.on.fresh{animation:cxFade .22s ease-out}
.hf.app.is-portrait .cx-modal.on.fresh .reveal{animation:cxZoom .32s cubic-bezier(.2,1.4,.4,1)}
.hf.app.is-portrait .cx-modal .cx-x{display:grid;place-items:center;position:absolute;top:10px;right:10px;z-index:6;width:38px;height:38px;padding:0;border-radius:8px;border:1px solid rgba(214,170,90,.55);background:rgba(8,12,20,.75);color:#f2d38a;font:700 18px/1 system-ui,sans-serif;cursor:pointer}
/* Baú aberto no celular (25/09): cartão menor e centralizado, com margem nas laterais; item em cima, baú pequeno embaixo e
botões em grade do mesmo tamanho (Equipar na linha de cima; Abrir outro e Mochila lado a lado). */
.hf.app.is-portrait .cx-modal.on{padding:24px}
.hf.app.is-portrait .cx-modal.on .reveal{width:min(340px,100%);max-width:none;height:min(440px,calc(100% - 40px))}
.hf.app.is-portrait .cx-modal .cx-x{top:8px;right:8px;width:34px;height:34px;font-size:16px}
.hf.app.is-portrait .cx-modal .cx-rays{width:420px;height:420px;margin:-210px 0 0 -210px}
.hf.app.is-portrait .cx-modal .cx.show .cx-rays,.hf.app.is-portrait .cx-modal .cx.done .cx-rays{top:30%}
.hf.app.is-portrait .cx-modal .cx-item{top:30%}
.hf.app.is-portrait .cx-modal .cx-txt{top:calc(30% + 60px)}
.hf.app.is-portrait .cx-modal .cx-banner{font-size:28px}
.hf.app.is-portrait .cx-modal .cx.show .cx-box,.hf.app.is-portrait .cx-modal .cx.done .cx-box{top:64%;transform:scale(.55)}
.hf.app.is-portrait .cx-modal .cx-acts{left:14px;right:14px;bottom:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hf.app.is-portrait .cx-modal .cx-acts .buy{width:100%;height:44px;padding:0 6px;font-size:15px;white-space:nowrap}
.hf.app.is-portrait .cx-modal .cx-acts [data-cx-equip],.hf.app.is-portrait .cx-modal .cx-acts .q-d{grid-column:1/-1}
.hf.app.is-portrait .cx-modal .cx-acts .q-d{height:44px;display:grid;place-items:center}
@keyframes cxFade{from{opacity:0}to{opacity:1}}
@keyframes cxZoom{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
/* Loja no celular: "Meus cupons" cabe na mesma linha das abas (só o ícone do cupom, o número e o +). */
.hf.app .shop-bar{flex-wrap:wrap;gap:6px}
.hf.app .shop-bar .tabs{flex:0 1 auto;min-width:0}
.hf.app .shop-mine{flex:none;gap:5px;height:40px;padding:0 4px}
.hf.app .shop-mine span{display:none}
.hf.app .shop-mine img{width:22px;height:22px}
.hf.app .shop-mine b{min-width:0;font-size:15px}
/* ---------- Ficha do item (24/09): modal no meio da tela com tudo do item (tipo, raridade, nível, aprimoramento, poder, uso,
venda), a comparação com o equipado e as ações. Mochila no celular (tocar no item) e Mercado (tocar no anúncio). ---------- */
.inv-sheet{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(3,5,10,.82);animation:cxFade .18s ease-out}
.is-card{position:relative;width:100%;max-width:430px;max-height:calc(100% - 8px);overflow:auto;padding:16px 16px 14px!important;display:flex!important;flex-direction:column;gap:10px;text-align:left;animation:cxZoom .22s ease-out}
.is-x{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;display:grid;place-items:center;padding:0;border-radius:8px;border:1px solid rgba(214,170,90,.55);background:rgba(8,12,20,.75);color:#f2d38a;font:700 17px/1 system-ui,sans-serif;cursor:pointer}
.is-h{display:flex;align-items:center;gap:12px;padding-right:40px}
.is-h .ithumb.lg{width:72px;height:72px;margin:0;flex:none}
.is-h b{display:block;font-size:17px;line-height:1.2}
.is-h small{font-size:12.5px;color:var(--muted)}
.is-facts{display:flex;flex-direction:column;gap:5px;padding:8px 10px;border-radius:6px;background:rgba(255,255,255,.04)}
.is-r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px}
.is-r span{color:var(--muted);flex:none}
.is-r b{text-align:right;font-weight:700}
.is-r small{color:var(--muted);font-weight:400}
.is-pips{display:flex;justify-content:flex-end;margin:-2px 0 2px}
.is-price{color:#f2c14e}
.is-lab{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
.is-vs{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;background:rgba(255,255,255,.04)}
.is-vs .ithumb.sm{width:40px;height:40px;margin:0;flex:none}
.is-vs div{flex:1;min-width:0;display:flex;flex-direction:column}
.is-vs b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-vs small{font-size:12px;color:var(--muted)}
.is-vs em{font-style:normal;font-weight:800;font-size:15px;white-space:nowrap}
.is-vs em.good{color:#7fe08f}.is-vs em.bad{color:#ff8a7a}
/* Equipado com a ficha inteira (01/10): poder, força base, upado, Adicional e bônus. */
.is-eqf{margin-top:8px;padding-top:2px}
.is-card .tt-sum{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:7px 10px;border-radius:6px;background:rgba(255,255,255,.05);font-weight:700;font-size:13.5px}
.is-card .tt-sum span{color:var(--muted);font-weight:400}
.is-card .tt-sum .good{color:#7fe08f}.is-card .tt-sum .bad{color:#ff8a7a}
.is-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.is-acts .buy{flex:1 1 40%;width:auto;min-width:0;height:42px;margin:0;padding:0 10px;white-space:nowrap}
.is-acts .buy img{width:16px;height:16px}
.lcard[data-mdet]{cursor:pointer}
/* ---------- Mochila no celular em pé (24/09): os 6 equipados numa fileira no alto e a mochila em lista (quadradinho, item,
nome, raridade · tipo, poder comparado e Equipar). Tocar no item abre a ficha; a dica de segurar o dedo saiu. ---------- */
.inv-it .rs{display:none;font-style:normal}
.hf.app.is-portrait .inv-doll{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto;gap:14px 6px;padding:8px 2px 20px}
.hf.app.is-portrait .inv-pt,.hf.app.is-portrait .inv-slot.pot{display:none}
.hf.app.is-portrait .inv-mid{display:contents}
.hf.app.is-portrait .inv-doll .inv-slot:not(.pot){width:100%;max-width:54px;height:auto;aspect-ratio:1;justify-self:center;grid-row:auto;grid-column:auto}
.hf.app.is-portrait .inv-slot .ithumb,.hf.app.is-portrait .inv-slot>img{width:32px;height:32px}
/* O rótulo fica embaixo da moldura (30/09, dono: "os nomes ficam em cima, não dá para ler"): o bottom conta a partir de dentro da borda (14px). */
.hf.app.is-portrait .inv-slot .sl{bottom:-29px;font-size:10.5px;color:#c3cad6}
.hf.app.is-portrait .inv-doll{row-gap:26px;padding-bottom:26px}
.hf.app.is-portrait .inv-slot .x{width:18px;height:18px;font-size:12px;top:-7px;left:-7px}
.hf.app.is-portrait .inv-slot .up{top:-7px;right:-7px;min-width:20px;height:16px;font-size:10px}
.hf.app.is-portrait .inv-hero{margin-top:0}
.hf.app.is-portrait .inv-grid{grid-template-columns:1fr;gap:6px}
.hf.app.is-portrait .inv-it{display:grid;grid-template-columns:30px 48px minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:10px;row-gap:1px;align-items:center;justify-items:start;text-align:left;min-height:0;padding:8px 10px 8px 6px}
.hf.app.is-portrait .inv-it .ib-box{position:static;grid-column:1;grid-row:1/4;width:30px;height:44px}
.hf.app.is-portrait .inv-it .ithumb,.hf.app.is-portrait .inv-it.mat>img{grid-column:2;grid-row:1/4;margin:0;width:46px;height:46px}
.hf.app.is-portrait .inv-it .up,.hf.app.is-portrait .inv-it.mat .qty{top:3px;left:70px;right:auto}
.hf.app.is-portrait .inv-it .n{grid-column:3;grid-row:1;min-height:0;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;line-height:1.2;text-align:left}
.hf.app.is-portrait .inv-it .rr{grid-column:3;grid-row:2;font-size:10px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf.app.is-portrait .inv-it .rs{display:inline;text-transform:none;letter-spacing:0;color:var(--muted)}
.hf.app.is-portrait .inv-it .pw{grid-column:3;grid-row:3;margin:0;font-size:12px}
.hf.app.is-portrait .inv-it .ib-eq{grid-column:4;grid-row:1/4;width:auto;min-width:88px;margin:0;padding:0 10px;height:40px}
.hf.app.is-portrait .inv-it.mat .n{grid-row:1}
.hf.app.is-portrait .inv-it.mat .rr{grid-row:2}
/* ---------- Amigos no celular (24/09): os botões (Mensagem, Desafiar, Remover) descem para uma linha própria embaixo do nome,
dividindo a largura; com um botão só (convite) ele fica ao lado, como antes. ---------- */
.hf.app .fr-row .fr-btns{grid-column:1/-1;margin:2px 0 0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.hf.app .fr-row .fr-btns .buy{min-width:0;width:100%;padding:0 6px}
.hf.app .fr-row .fr-btns:has(>.buy:only-child){grid-column:auto;margin:0;display:flex}
.hf.app .fr-row .fr-btns:has(>.buy:only-child) .buy{width:auto;min-width:88px}
/* ---------- Ferreiro (24/09): palco da forja — fogo, bigorna com o item em cima e o martelo. Fortalecer = 3 marteladas com
faíscas; sucesso: o item salta brilhando com "+N!"; falha: treme, escurece e sai fumaça. Medidor grande da chance.
Celular em pé: o palco e o botão vêm primeiro; itens e pedras viram fileiras que rolam para o lado. ---------- */
.fs{position:relative;flex:none;width:100%;max-width:380px;height:210px;margin:0 auto;overflow:hidden;border-radius:10px;background:radial-gradient(ellipse at 50% 108%,rgba(255,130,40,.30),transparent 62%),linear-gradient(#161e2e,#0b1019);box-shadow:inset 0 0 0 1px rgba(214,170,90,.28),inset 0 -24px 34px rgba(0,0,0,.45)}
.fs-glow{position:absolute;left:50%;bottom:-70px;width:360px;height:200px;margin-left:-180px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,150,50,.34),transparent 66%);animation:fsFlick 1.8s ease-in-out infinite;pointer-events:none}
.fs-fire{position:absolute;left:8px;bottom:6px;width:80px;image-rendering:pixelated;animation:fsFire .9s steps(2) infinite;filter:drop-shadow(0 0 10px rgba(255,130,40,.55))}
.fs-anvil{position:absolute;left:50%;bottom:4px;width:140px;margin-left:-62px;image-rendering:pixelated;filter:drop-shadow(0 6px 5px rgba(0,0,0,.55))}
.fs-item{position:absolute;left:50%;bottom:96px;width:86px;height:86px;margin-left:-36px;display:grid;place-items:center;animation:fsBob 2.4s ease-in-out infinite;z-index:2}
.fs-item .ithumb.lg{width:78px;height:78px;margin:0}
.fs-item .ithumb img{filter:drop-shadow(0 4px 4px rgba(0,0,0,.6))}
.fs-lv{position:absolute;right:-14px;top:-2px;min-width:30px;height:22px;padding:0 6px;display:grid;place-items:center;border-radius:11px;font-size:14px;color:#ffe08a;background:linear-gradient(#3b2609,#170d03);box-shadow:0 0 0 1px #d6a04a,0 2px 5px rgba(0,0,0,.7)}
.fs-ham{position:absolute;right:18px;bottom:78px;width:92px;height:98px;transform-origin:88% 92%;transform:rotate(18deg);z-index:3;pointer-events:none}
.fs-ham img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;transform:scaleX(-1);filter:drop-shadow(0 5px 4px rgba(0,0,0,.55))}
.fs-sp{position:absolute;left:50%;bottom:112px;margin-left:4px;width:0;height:0;z-index:4;pointer-events:none}
.fs-sp i{position:absolute;width:4px;height:4px;background:var(--c,#ffc24a);box-shadow:0 0 6px #ff8a1a;opacity:0;animation:fsSpark .6s cubic-bezier(.15,.7,.3,1) both;animation-delay:var(--d)}
.fs-pop{position:absolute;left:0;right:0;top:12px;text-align:center;font:900 30px/1 var(--title,inherit);letter-spacing:.04em;z-index:5;pointer-events:none;animation:fsPop .9s cubic-bezier(.2,1.6,.4,1) both}
.fs-pop.good{color:#ffd76a;text-shadow:0 3px 0 #3a2208,0 0 16px rgba(255,200,80,.9)}
.fs-pop.bad{color:#ff7a6a;font-size:24px;text-shadow:0 3px 0 #3a0a08,0 0 12px rgba(255,80,60,.7)}
.fs-hint{position:absolute;left:0;right:0;top:18px;text-align:center;font-weight:700;font-size:14px;line-height:1.35;color:#f2d38a;text-shadow:0 2px 0 #000}
.fs-hint i{display:block;font-style:normal;font-size:18px;margin-top:4px;animation:fsArrow 1s ease-in-out infinite}
.fs.none .fs-ham{transform:rotate(30deg)}
/* marteladas: o martelo sobe e desce 3 vezes (acerta aos .26s, .66s e 1.06s), o item amassa a cada batida */
.fs-hammer .fs-ham{animation:fsStrike .4s .14s ease-in 3 both}
.fs-hammer .fs-item{animation:fsHit .4s .14s ease-out 3 both}
.fs-hammer .fs-glow{animation:fsFlick .4s .14s ease-in-out 3}
/* sucesso: salta girando, clarão e raios na cor da raridade */
.fs-win .fs-item{animation:fsWin 1s cubic-bezier(.2,1.5,.4,1) both,fsBob 2.4s 1s ease-in-out infinite}
.fs-win .fs-item::before{content:"";position:absolute;inset:-46px;border-radius:50%;z-index:-1;background:repeating-conic-gradient(from 0deg,var(--rc,#ffd76a) 0 8deg,transparent 8deg 24deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 68%);mask:radial-gradient(circle,#000 18%,transparent 68%);opacity:.75;animation:fsRays 1.2s ease-out both,cxSpin 10s linear infinite}
.fs-win .fs-glow{background:radial-gradient(ellipse,color-mix(in srgb,var(--rc,#ffd76a) 60%,transparent),transparent 66%);animation:fsFlash .8s ease-out both}
.fs.r0{--rc:#ffd76a}.fs.r1{--rc:#6fd36a}.fs.r2{--rc:#58a8ff}.fs.r3{--rc:#c77dff}.fs.r4{--rc:#ffb640}.fs.r5{--rc:#ff3d5f}
/* falha: treme, perde a cor e solta fumaça */
.fs-fail .fs-item{animation:fsFail .6s ease both;filter:grayscale(.75) brightness(.65)}
.fs-fail .fs-item::after{content:"";position:absolute;left:50%;top:40%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:radial-gradient(circle,rgba(170,170,180,.75),transparent 70%);animation:fsSmoke 1.1s ease-out both}
.fs-fail .fs-ham{transform:rotate(30deg)}
.fs.calm *,.fs.calm *::before,.fs.calm *::after{animation:none!important}
@keyframes fsFlick{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes fsFire{0%{transform:scale(1,1)}100%{transform:scale(1.03,.97)}}
@keyframes fsBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fsArrow{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes fsStrike{0%{transform:rotate(18deg)}35%{transform:rotate(40deg)}62%{transform:rotate(-34deg)}72%{transform:rotate(-26deg)}100%{transform:rotate(18deg)}}
@keyframes fsHit{0%,55%{transform:none}64%{transform:translateY(5px) scale(1.12,.84)}80%{transform:translateY(-2px) scale(.96,1.05)}100%{transform:none}}
@keyframes fsSpark{0%{opacity:1;transform:translate(0,0) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 30px)) scale(.4)}}
@keyframes fsWin{0%{transform:scale(.8)}35%{transform:translateY(-26px) scale(1.3) rotate(-8deg)}60%{transform:translateY(-10px) scale(1.15) rotate(4deg)}100%{transform:none}}
@keyframes fsRays{0%{opacity:0;transform:scale(.3)}40%{opacity:.9}100%{opacity:.6;transform:scale(1)}}
@keyframes fsFlash{0%{opacity:1;filter:brightness(2.2)}100%{opacity:.9;filter:none}}
@keyframes fsFail{0%,100%{transform:none}15%{transform:translateX(-7px) rotate(-5deg)}30%{transform:translateX(7px) rotate(5deg)}45%{transform:translateX(-5px)}60%{transform:translateX(5px)}75%{transform:translateX(-2px)}}
@keyframes fsSmoke{0%{opacity:0;transform:scale(.4)}25%{opacity:.9}100%{opacity:0;transform:translateY(-44px) scale(2.2)}}
@keyframes fsPop{0%{opacity:0;transform:scale(2.2)}55%{opacity:1;transform:scale(.92)}100%{opacity:1;transform:none}}
.fs-meter{position:relative;width:100%;max-width:380px;height:30px;border-radius:15px;overflow:hidden;background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px rgba(214,170,90,.35)}
.fs-meter i{position:absolute;left:0;top:0;bottom:0;border-radius:15px;transition:width .35s ease;background:linear-gradient(90deg,#b8322a,#ff7a4a)}
.fs-meter.mid i{background:linear-gradient(90deg,#b8801d,#ffd76a)}
.fs-meter.good i{background:linear-gradient(90deg,#2f8f3a,#7fe08f)}
.fs-meter span{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;height:100%;font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000}
.fs-meter b{font-size:17px}
.fg-how{margin:0;text-align:center}
.fg-r .fg-go{position:relative;overflow:hidden}
.fg-r .fg-go:not(:disabled)::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation:fsShine 2.6s ease-in-out infinite}
@keyframes fsShine{0%,60%{left:-60%}100%{left:130%}}
/* celular em pé */
.hf.app.is-portrait .fg2{display:flex;flex-direction:column;gap:10px;flex:none;min-height:0}
.hf.app.is-portrait .fg-r{order:-1;flex:none;overflow:visible;padding:8px}
.hf.app.is-portrait .fg-l{flex:none;overflow:visible}
.hf.app.is-portrait .fg-l .fg-grid{display:flex;flex-wrap:nowrap;align-items:center;overflow-x:auto;overflow-y:hidden;max-height:none;min-height:0;gap:8px;padding:8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hf.app.is-portrait .fg-l .fg-grid::-webkit-scrollbar{display:none}
.hf.app.is-portrait .fg-l .fg-grid .fg-cell{flex:0 0 64px;width:64px;height:64px;scroll-snap-align:start}
.hf.app.is-portrait .fg-l .fg-sub{flex:none;align-self:stretch;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 2px;border-left:1px solid rgba(214,170,90,.25)}
.hf.app.is-portrait .fg-l .fg-sub small{display:none}
.hf.app.is-portrait .fs{height:220px}
.hf.app.is-portrait .fg-r .fg-go{max-width:none;height:52px;font-size:19px}
/* medidor mostra a chance total: a grade embaixo fica só com base, pedra e sorte. No celular, medidor, risco e o botão
Fortalecer logo abaixo do palco; as pedras escolhidas e o detalhe da chance vêm depois. */
.fs-meter + .fg-odds{grid-template-columns:repeat(3,1fr)!important}
.fs-meter + .fg-odds .tot{display:none}
.fg-r>*{flex-shrink:0}
.fg-r>.fs-meter{order:1}
.fg-r>.fg-risk{order:2}
.fg-r>.fg-need{order:3}
.fg-r>.fg-go{order:4;flex:none}
.fg-r>.fg-res{order:5}
.fg-r>.fg-slots{order:6}
.fg-r>.fg-odds{order:7}
.fg-r>.fg-how{order:8}
.hf.app.is-portrait .fg-r>.fg-slots,.hf.app.is-portrait .fg-r>.fs-meter{max-width:none}
/* PC igual ao celular (24/09): o mesmo palco grande, o medidor e o botão largo logo abaixo. A janela do Ferreiro fica mais
alta para tudo isso caber sem rolar; as pedras escolhidas e o detalhe da chance vêm depois. */
.win.win-ferreiro{height:660px}
.fs{height:220px;max-width:420px}
.fg-r>.fs-meter,.fg-r>.fg-slots{max-width:420px}
.fg-r .fg-go{width:100%;max-width:420px;height:52px;font-size:19px}
/* ---------- Fases: mapa com 8 equipamentos por espaço (24/09) — grade 6 linhas × 8, com a chance por monstro embaixo ---------- */
.hf .itip:has(.md-grid){width:430px}
.tt-drops .md-grid{display:grid;grid-template-columns:62px repeat(8,1fr);gap:3px 3px;align-items:center;margin:8px 0 4px}
.tt-drops .md-sl{font-size:11px;font-weight:700;color:#d6dde8}
.tt-drops .md-it{display:flex;flex-direction:column;align-items:center;min-width:0;padding:2px 0 1px;border-radius:5px;background:rgba(255,255,255,.04);font-style:normal}
.tt-drops .md-it img{width:34px;height:34px;image-rendering:pixelated}
.tt-drops .md-it small{font-size:9.5px;color:#9fd6a8;line-height:1.1;white-space:nowrap}
.tt-drops .md-it.boss{background:rgba(160,40,40,.28);box-shadow:inset 0 0 0 1px rgba(255,90,80,.55)}
.tt-drops .md-it.boss small{color:#ff9b8a;font-weight:700}
.hf.app .tt-drops .md-grid{grid-template-columns:52px repeat(8,1fr)}
.hf.app .tt-drops .md-it img{width:28px;height:28px}
/* ---------- Balão de fala (24/09): campo no meio, embaixo; botão no chat (PC) e "Falar" ao lado do chat (celular).
No chat Global a fala aparece marcada como "perto". ---------- */
.saybox{position:absolute;left:50%;bottom:170px;transform:translateX(-50%);z-index:30;width:min(460px,calc(100% - 24px));display:grid;grid-template-columns:28px 1fr auto;grid-template-rows:auto auto;gap:4px 8px;align-items:center;padding:8px 10px;border-radius:10px;background:rgba(8,12,20,.92);box-shadow:inset 0 0 0 1px rgba(214,170,90,.55),0 6px 18px rgba(0,0,0,.5);pointer-events:auto;animation:fadeIn .15s ease}
.saybox[hidden]{display:none}
.saybox img{width:26px;height:26px}
.saybox .sayin{min-width:0;height:36px;padding:0 10px;border-radius:6px;border:1px solid rgba(214,170,90,.45);background:#0b1019;color:#fff;font:600 14px "HF Sans","Signika",system-ui,sans-serif;outline:none}
.saybox .sayin:focus{border-color:#f2c14e;box-shadow:0 0 0 2px rgba(242,193,78,.25)}
.saybox .buy.sm{width:auto;height:36px;padding:0 14px}
.saybox small{grid-column:1/-1;font-size:11px;color:var(--muted);text-align:center}
.csend .csay{flex:none;width:34px;height:30px;padding:0;display:grid;place-items:center;border-radius:6px;border:1px solid rgba(214,170,90,.45);background:rgba(8,12,20,.6);cursor:pointer}
.csend .csay img{width:20px;height:20px}
.csend .csay:hover{border-color:#f2c14e}
.csend .csay[hidden]{display:none}
.clog p.near{background:rgba(120,200,255,.06);border-radius:4px}
.clog i.near,.app-chat-last i.near{font-style:normal;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#7fd4ff;margin-right:4px;padding:0 4px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(127,212,255,.45)}
.app-say{display:none}
.hf.app .app-say{position:absolute;left:calc(8px + var(--sl));bottom:calc(var(--tab) + var(--sb) + 62px);width:50px;height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0;border-radius:12px;border:0;background:rgba(8,12,20,.82);box-shadow:inset 0 0 0 1px rgba(214,170,90,.45);color:#f2d38a;font:700 10px "HF Sans","Signika",system-ui,sans-serif;pointer-events:auto;cursor:pointer}
.hf.app .app-say img{width:22px;height:22px}
.hf.app .saybox{bottom:calc(var(--tab) + var(--sb) + 64px)}
/* ---------- Cidade (24/09): gestos, chefe mundial, baú diário e quadro de missões ---------- */
.csend .cemote img{width:18px;height:18px;image-rendering:pixelated}
.app-emote{display:none}
.hf.app .app-emote{position:absolute;left:calc(64px + var(--sl));bottom:calc(var(--tab) + var(--sb) + 62px);width:50px;height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;border-radius:12px;border:0;background:rgba(8,12,20,.82);box-shadow:inset 0 0 0 1px rgba(214,170,90,.55);color:#f3e2b8;font:700 10px "HF Sans","Signika",system-ui,sans-serif;pointer-events:auto}
.hf.app .app-emote img{width:22px;height:22px;image-rendering:pixelated}
.emotebar{position:absolute;left:50%;bottom:170px;transform:translateX(-50%);z-index:31;display:flex;gap:6px;padding:8px 10px;border-radius:10px;background:rgba(8,12,20,.92);box-shadow:inset 0 0 0 1px rgba(214,170,90,.55),0 6px 18px rgba(0,0,0,.5);pointer-events:auto}
.emotebar[hidden]{display:none}
.emotebar button{width:56px;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;border-radius:8px;border:1px solid rgba(214,170,90,.35);background:#0b1019;color:#e8dcc0;cursor:pointer}
.emotebar button:hover{border-color:#f2c14e;background:#141c2a}
.emotebar img{width:30px;height:30px;image-rendering:pixelated}
.emotebar small{font-size:10px}
.hf.app .emotebar{bottom:calc(var(--tab) + var(--sb) + 112px);max-width:calc(100% - 16px);flex-wrap:wrap;justify-content:center}
.bar.red > i.fill{background:linear-gradient(#ffb0a0 0 14%,#d8402e 15% 62%,#8c1c14 63%)}
.quest.boss{box-shadow:inset 0 0 0 1px rgba(255,120,90,.55);background:rgba(90,20,14,.35)}
.quest.boss .q-t{color:#ffb09a}
.win.win-diario,.win.win-chefe_fim{width:420px;height:auto}
.win.win-missoes{width:440px;height:auto}
.daily{text-align:center}
.daily .dl-chest{width:96px;height:96px;margin:4px auto 8px;display:block;image-rendering:pixelated}
.daily .dl-chest.ready{animation:dl-bob 1.2s ease-in-out infinite}
@keyframes dl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.mboard .quests{display:flex;flex-direction:column;gap:8px}
.mboard .quest{position:relative}
.boss-end .bk-rank{width:30px;text-align:center;font-size:16px;color:#ffd66b}
.hf.app.is-landscape .app-say,.hf.app.is-landscape .app-emote{bottom:calc(var(--tab) + var(--sb) + 14px)}
.hf.app.is-landscape .app-chat{left:calc(120px + var(--sl))}
.hf.app.is-landscape .emotebar{bottom:calc(var(--tab) + var(--sb) + 64px)}
.lrow.news{align-items:start}
.nw-part{margin-top:8px}
.nw-part b{display:inline-block;margin-bottom:3px;padding:1px 8px;border-radius:9px;font-size:11px;letter-spacing:.3px;text-transform:uppercase}
.nw-part.add b{background:rgba(88,186,105,.2);color:#8fe39c}
.nw-part.imp b{background:rgba(88,168,255,.18);color:#9cc9ff}
.nw-part.fix b{background:rgba(255,182,64,.18);color:#ffcf7a}
.nw-part ul{margin:0;padding-left:18px;line-height:1.4}
.nw-part li{margin:2px 0}
/* ---------- Mochila com espaços (24/09): contador N/12, grade de 4 por linha, espaços vazios com a moldura f_slot e o
quadrado de comprar mais espaços com a moldura f_slot_on. Materiais e consumíveis ficam abaixo, fora da contagem. ---------- */
.inv-count{font-size:13px;font-weight:700;color:#d6dde8;padding:1px 9px;border-radius:9px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(214,170,90,.35)}
.inv-count.full{color:#ff8a7a;box-shadow:inset 0 0 0 1px rgba(255,138,122,.55)}
.inv-full{margin:-2px 2px 6px;font-size:12px;color:#ffcf7a}
.inv-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:6px}
/* Computador: os 12 espaços cabem sem rolagem (quadrados compactos de 90 px, 24/09); a raridade fica na cor da borda e do nome */
.hf:not(.app) .inv-grid{grid-auto-rows:auto}
.hf:not(.app) .inv-it{height:104px}
.hf:not(.app) .inv-it:not(.mat){min-height:0;justify-content:center;gap:1px;padding:4px 3px}
.hf:not(.app) .inv-it:not(.mat) .ithumb,.hf:not(.app) .inv-it:not(.mat) .ithumb img{width:32px!important;height:32px!important;margin:0}
.hf:not(.app) .inv-it:not(.mat) .n{font-size:11px;-webkit-line-clamp:1;max-width:100%}
.hf:not(.app) .inv-it:not(.mat) .rr{display:none}
.hf:not(.app) .inv-it:not(.mat) .pw{font-size:10.5px}
.hf:not(.app) .inv-it:not(.mat) .buy{height:20px;min-height:20px;font-size:11px;padding:0 8px;margin-top:1px}
/* Comprar +4 espaços: botão no cabeçalho da Mochila, ao lado do contador */
.inv-bh .inv-more{display:inline-flex;flex-direction:row;align-items:center;gap:5px;min-height:0!important;height:26px;padding:0 10px!important;border-width:6px;border-image-width:6px;font-size:12px;width:auto}
.inv-bh .inv-more>img{display:none}
.inv-bh .inv-more .n,.inv-bh .inv-more .pw{font-size:12px}
.inv-bh .inv-more.ask{height:auto;padding:4px 10px!important;flex-wrap:wrap}
.inv-it.inv-free{border:8px solid transparent;border-image:url(assets/f_slot.png) 28 fill / 8px stretch;background:none;box-shadow:none;opacity:.45;cursor:default}
.inv-it.inv-free:hover{background:none}
.inv-it.inv-more{border:8px solid transparent;border-image:url(assets/f_slot_on.png) 28 fill / 8px stretch;background:none;box-shadow:none;cursor:pointer;justify-content:center;gap:6px;padding:8px 4px}
.inv-it.inv-more:hover{filter:brightness(1.15)}
.inv-it.inv-more>img{width:40px;height:40px}
.inv-it.inv-more .n{min-height:0;color:#ffe08a}
.inv-it.inv-more .pw img,.inv-it.inv-more .n img{width:16px;height:16px;vertical-align:-3px;margin-right:2px}
.inv-it.inv-more.ask{cursor:default;gap:4px}
.inv-sec{grid-column:1/-1;font-size:12px;font-weight:600;color:var(--muted);padding:8px 2px 0;border-top:1px solid rgba(214,170,90,.2)}
.bag-sold{color:#ffcf7a!important}
/* Celular em pé: a mesma grade de 4 por linha, com quadrados compactos (tocar abre a ficha com Equipar, Travar e Vender). */
.hf.app .inv-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.hf.app.is-portrait .inv-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.hf.app.is-portrait .inv-it:not(.mat){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:96px;padding:16px 3px 6px;text-align:center}
.hf.app.is-portrait .inv-it:not(.mat):not(.inv-more) .rr,.hf.app.is-portrait .inv-it:not(.mat):not(.inv-more) .pw,.hf.app.is-portrait .inv-it:not(.mat):not(.inv-more) .ib-eq{display:none}
.hf.app.is-portrait .inv-it:not(.mat) .ib-box{position:absolute;top:1px;left:1px;width:26px;height:26px}
.hf.app.is-portrait .inv-it:not(.mat) .ithumb{margin:0;width:42px;height:42px}
.hf.app.is-portrait .inv-it:not(.mat) .up{top:2px;right:2px;left:auto}
.hf.app.is-portrait .inv-it:not(.mat) .n{min-height:0;width:100%;-webkit-line-clamp:1;font-size:10.5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.hf.app.is-portrait .inv-it.inv-more{padding:6px 3px}
.hf.app.is-portrait .inv-it.inv-more .n{white-space:normal;font-size:11px}
.hf.app.is-portrait .inv-it.mat{grid-column:1/-1}
.inv-it.inv-more .pw{display:flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap;margin:0}
.inv-it.inv-more .pw img{margin:0}
.inv-it.inv-more.ask{grid-column:span 2;gap:6px;padding:10px 8px}
.inv-it.inv-more.ask .n{display:flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap;font-size:13px}
.inv-it.inv-more.ask .n img{width:18px;height:18px;margin:0}
.inv-it .im-have{font-size:11.5px;color:var(--muted);text-align:center}
.inv-it .im-acts{display:flex;gap:8px;width:100%;justify-content:center}
.inv-it .im-acts .buy{flex:1;max-width:120px;height:32px;font-size:12.5px;padding:0 6px}
.hf.app.is-portrait .inv-it.inv-more.ask{grid-column:1/-1;min-height:0;padding:12px 10px}
.hf.app.is-portrait .inv-it.inv-more.ask .n{display:flex;width:auto;font-size:14px;white-space:nowrap}
.hf.app.is-portrait .inv-it .im-acts .buy{height:38px;font-size:14px}
/* Mochila (24/09): conteúdo do quadrado centralizado, quadradinho de marcar menor e setas em pixel art no lugar de ▲/▼ */
.hf:not(.app) .inv-it:not(.mat){display:flex;flex-direction:column;align-items:center;justify-content:center}
.inv-it .ib-box{top:3px;left:3px;width:18px;height:18px}
.inv-it .ib-box img{width:13px;height:13px}
.inv-it.locked .ib-box img{width:12px;height:13px}
.cmpv{display:inline-flex;align-items:center;gap:2px;font-style:normal}
.cmpv img{width:9px!important;height:10px!important;image-rendering:pixelated;margin:0!important}
/* Loja VIP (24/09): vantagens em quadradinhos com a moldura de item e o texto embaixo, centralizados */
.vip-perks.top{text-align:center}
.vp-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:6px 0 2px}
.vp-t{display:flex;flex-direction:column;align-items:center;gap:3px;width:96px;font-size:11.5px;font-weight:700;line-height:1.15;color:#e8edf5;text-align:center}
.vp-ic{display:grid;place-items:center;width:44px;height:44px;border:8px solid transparent;border-image:url(assets/f_slot.png) 28 fill / 8px stretch;box-sizing:border-box}
.vp-ic img{width:26px;height:26px;image-rendering:pixelated}
.hf.app .vp-t{width:78px;font-size:10.5px}
/* Topo: usuário em destaque e o herói ao lado, menor (24/09) */
.row .name .hn{font-size:.72em;font-weight:600;color:#aeb8c8;margin-left:4px;letter-spacing:0}
.row .name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Mochila: o conteúdo do quadrado não vaza (ícone sempre dentro da moldura) */
.hf:not(.app) .inv-it:not(.mat){overflow:hidden;padding-top:8px}
/* Mochila (computador): consumíveis e materiais no mesmo quadrado compacto dos equipamentos (24/09) */
.hf:not(.app) .inv-it.mat{min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px 4px}
.hf:not(.app) .inv-it.mat>img{width:34px!important;height:34px!important;margin:0!important}
.hf:not(.app) .inv-it.mat .n{font-size:11px;-webkit-line-clamp:1;max-width:100%}
.hf:not(.app) .inv-it.mat .rr{display:none}
.hf:not(.app) .inv-it.mat .ib-eq.off{font-size:10.5px;color:var(--muted)}
.hf:not(.app) .inv-it.mat .buy{height:20px;min-height:20px;font-size:11px;padding:0 8px;margin-top:1px}
/* Aparência do Aventureiro (24/09): prévia em pixel art (PNG ampliado sem suavizar) + escolhas nos botões da HUD. */
.lookbox{display:flex;gap:14px;align-items:center;margin:0 0 12px}
.lookbox .look-pv img{width:160px;height:160px;image-rendering:pixelated;display:block}
.lookbox .look-op{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.lookbox .tabs{margin:0;flex-wrap:wrap}
.lookbox .tab.look-hair{width:52px;height:52px;padding:0}
.lookbox .tab.look-hair img{width:32px;height:32px;image-rendering:pixelated}
.lookbox .buy{align-self:flex-start;min-width:180px}
.hf.app .lookbox{flex-direction:column;align-items:stretch}
.hf.app .lookbox .look-pv{align-self:center}
.hf.app .lookbox .look-pv img{width:128px;height:128px}
/* Mochila (computador, 24/09): quadrado em 4 faixas fixas e centralizadas: ícone, nome em 1 linha (reticências),
"Poder N ▲Δ" (ou o tipo do material) e o botão. Nada se sobrepõe; os filtros cabem numa linha para 3 fileiras aparecerem sem rolar. */
.hf:not(.app) .inv-bh .chips{gap:3px}
.hf:not(.app) .inv-bh .chip{padding:0 6px;font-size:11px;height:24px}
.hf:not(.app) .inv-grid{gap:6px}
.hf:not(.app) .inv-it:not(.inv-free):not(.inv-more){display:grid!important;grid-template-rows:34px 15px 15px 22px;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;row-gap:3px;height:104px;min-height:0;padding:6px 6px;overflow:hidden;box-sizing:border-box}
.hf:not(.app) .inv-it:not(.inv-free):not(.inv-more) .ithumb,.hf:not(.app) .inv-it:not(.inv-free):not(.inv-more) .ithumb img,.hf:not(.app) .inv-it.mat>img{width:34px!important;height:34px!important;margin:0!important;align-self:center}
.hf:not(.app) .inv-it:not(.inv-free):not(.inv-more) .n{display:block!important;width:100%;max-width:100%;min-height:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset;font-size:11px;line-height:15px;text-align:center}
.hf:not(.app) .inv-it:not(.inv-free):not(.inv-more) .rr{display:none}
.hf:not(.app) .inv-it.mat:not(.inv-free):not(.inv-more) .rr{display:block;font-size:10px;line-height:15px;color:var(--muted);text-transform:none;letter-spacing:0;margin:0}
.hf:not(.app) .inv-it:not(.inv-free):not(.inv-more) .pw{display:flex;align-items:center;justify-content:center;gap:3px;margin:0;font-size:10.5px;line-height:15px;white-space:nowrap}
.hf:not(.app) .inv-it:not(.inv-free):not(.inv-more) .pw em{display:inline-flex;align-items:center;gap:1px;margin:0}
.hf:not(.app) .inv-it:not(.inv-free):not(.inv-more) .ib-eq{width:100%;max-width:104px;height:22px;min-height:22px;margin:0;padding:0 6px;font-size:11px;align-self:center}
.hf:not(.app) .inv-it:not(.inv-free):not(.inv-more) span.ib-eq{display:grid;place-items:center;font-size:10.5px;color:var(--muted)}
.hf:not(.app) .inv-it.mat span.ib-eq.off{visibility:hidden}
/* Cargo (24/09, estilo MU): selo [ADMIN] / [GM] ao lado do nome (texto dinâmico; cor do cargo) e a janela GM. */
.role-tag{display:inline-block;font-weight:800;font-size:.78em;letter-spacing:.04em;line-height:1.35;padding:0 5px;margin-right:3px;border-radius:4px;vertical-align:.08em;text-shadow:0 1px 0 #0d1522;color:#fff}
.role-tag.role-admin{background:linear-gradient(180deg,#e2463a,#a8231c);box-shadow:inset 0 0 0 1px #ff9b8c}
.role-tag.role-gm{background:linear-gradient(180deg,#2f9e55,#1b6b37);box-shadow:inset 0 0 0 1px #8ff0ad}
.st-tag{display:inline-block;font-weight:800;font-size:.7em;letter-spacing:.05em;line-height:1.4;padding:0 4px;margin-right:2px;border-radius:4px;vertical-align:.1em;color:#0b0f0c}
.st-tag.st-kick{background:#53fc18;box-shadow:inset 0 0 0 1px #b9ff9a}
.st-tag.st-twitch{background:#9146ff;color:#fff;box-shadow:inset 0 0 0 1px #c9a8ff}
.st-live{display:inline-block;font-weight:800;font-size:.7em;letter-spacing:.04em;line-height:1.4;padding:0 5px;margin-right:3px;border-radius:4px;vertical-align:.1em;background:#e0262b;color:#fff!important;text-decoration:none;animation:stlive 1.6s ease-in-out infinite}
.st-live:hover{filter:brightness(1.15)}
@keyframes stlive{50%{box-shadow:0 0 0 3px rgba(224,38,43,.35)}}
@media (prefers-reduced-motion:reduce){.st-live{animation:none}}
.st-live-on{color:#ff5a5f}.st-btns-h{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.buy.st-btn-kick{background:#53fc18;color:#0b0f0c}.buy.st-btn-twitch{background:#9146ff;color:#fff}
/* Fala da equipe no chat (25/09): linha destacada, fácil de ver entre as mensagens dos jogadores */
.clog p.staff{margin:2px 0;padding:3px 4px 3px 2px;border-radius:4px}
.clog p.staff-admin{background:linear-gradient(90deg,rgba(226,70,58,.28),rgba(226,70,58,.06));box-shadow:inset 3px 0 0 #ff6b5a}
.clog p.staff-gm{background:linear-gradient(90deg,rgba(47,158,85,.26),rgba(47,158,85,.05));box-shadow:inset 3px 0 0 #6fe08a}
.clog p.staff span{color:#fff;font-weight:600}
.clog p.staff-admin .who{color:#ffb3a8}
.clog p.staff-gm .who{color:#aef5c4}
.gm-win .gm-row{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.gm-win .gm-row .du-lb{flex:1 1 150px}
.gm-win .du-stake{margin-bottom:8px}
.gm-win .du-s{width:104px}
.gm-win .du-s img{width:34px;height:34px;object-fit:contain;image-rendering:pixelated}
/* Baú Diário e resultado do Chefe mundial (24/09): botão centralizado, como o resto da janela */
.daily .cfg-btns,.boss-end .cfg-btns{justify-content:center;margin:8px 0 10px}
.daily > p.q-d{margin-top:2px}
/* Baú Diário (01/10, dono: "centralizar isso e alinhar"): os prêmios ficam no meio, do mesmo tamanho, sem a coluna vazia
da grade de 3 quando vêm 2 (ou 4) prêmios. */
.daily .ofl-grid{display:flex;flex-wrap:wrap;justify-content:center}
.daily .ofl-grid > div{flex:1 1 0;min-width:70px;max-width:132px}
/* Partes da tarefa da fase (25/09): monstro, nome e contagem; a parte completa fica verde. */
.quest .q-goals{grid-column:2;display:flex;flex-wrap:wrap;gap:3px 5px;margin-top:2px}
.quest .q-goal{display:inline-flex;align-items:center;gap:3px;padding:1px 6px 1px 2px;border-radius:9px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(214,170,90,.28);font-size:11.5px;line-height:18px;color:var(--text,#f3e6c8);white-space:nowrap}
.quest .q-goal img{grid-row:auto;width:18px;height:18px;margin:0;image-rendering:pixelated;align-self:center}
.quest .q-goal b{color:var(--gold);font-weight:700}
.quest .q-goal.ok{box-shadow:inset 0 0 0 1px rgba(111,211,106,.55)}
.quest .q-goal.ok b{color:var(--green)}
.quest .q-goals+.bar{grid-column:2}
/* Aviso de erro (ex.: viagem recusada) acima da janela aberta no PC; antes ficava atrás do fundo escuro (25/09). */
.msg{z-index:60}
.lrow.map .lock-why{color:#ffcf7a}
/* Tradução automática do chat (25/09): 🌐 depois da mensagem traduzida; tocado, mostra o original. */
.clog .ctr{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:2px;padding:0;border:0;border-radius:50%;background:rgba(111,201,255,.14);font-size:11px;line-height:1;vertical-align:1px;cursor:pointer;opacity:.75}
.clog .ctr:hover,.clog .ctr.on{opacity:1;background:rgba(111,201,255,.3)}
/* Botão GM (25/09): o display:flex do .navbtn anulava o hidden e o botão aparecia para todo mundo. Só ADMIN e GM. */
.navbtn[hidden]{display:none!important}
/* Ferreiro (25/09, pedido do dono: nada escondido, com rolagem): as colunas rolam inteiras em vez de cortar a lista de
itens numa caixa pequena. Todos os equipamentos aparecem; a chance base, a Sorte e o custo ficam ao alcance da rolagem. */
.hf:not(.app) .fg-l,.hf:not(.app) .fg-r{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#8a6a33 rgba(0,0,0,.25);overscroll-behavior:contain}
.fg-l>*,.fg-r>*{flex-shrink:0}
.fg-l .fg-grid:not(.stones){flex:none;min-height:0;max-height:none;overflow:visible}
.hf.app:not(.is-portrait) .fg-l .fg-grid:not(.stones){max-height:none}
.fg-l::-webkit-scrollbar,.fg-r::-webkit-scrollbar{width:8px}
.fg-l::-webkit-scrollbar-thumb,.fg-r::-webkit-scrollbar-thumb{background:#8a6a33;border-radius:4px}
.fg-l::-webkit-scrollbar-track,.fg-r::-webkit-scrollbar-track{background:rgba(0,0,0,.25)}
.fg-l .fg-grid.stones .nv{white-space:nowrap;font-size:9.5px}
.fs-meter + .fg-odds.three{grid-template-columns:1fr 1fr!important}
@media (max-height:820px){.hf:not(.app) .fg-r .fs{height:170px}}
.itip .tt-grid.st{grid-template-columns:repeat(3,auto auto);justify-content:start}
/* ---------- Feedback (25/09): tipo com emoji, texto e até 3 prints ---------- */
.win-feedback{width:600px;height:auto}
.fb-win{display:flex;flex-direction:column;gap:10px}
.fb-win p{margin:0;line-height:1.45}
.fb-kinds{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.fb-kind{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 6px;border-radius:6px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(214,170,90,.25);color:#e8d6ae;font-weight:700;font-size:13px;transition:transform .1s,background .12s}
.fb-kind .fb-emo{font-style:normal;font-size:26px;line-height:1;filter:grayscale(.35)}
.fb-kind:hover{background:rgba(255,255,255,.08)}
.fb-kind.on{background:linear-gradient(180deg,rgba(242,193,78,.24),rgba(242,193,78,.06));box-shadow:inset 0 0 0 2px var(--gold);color:#fff}
.fb-kind.on .fb-emo{filter:none;transform:scale(1.1)}
textarea.input.fb-text{height:130px;font-size:14px;line-height:1.4}
.fb-row{display:flex;justify-content:flex-end;margin-top:-6px}
.fb-count{font-size:12px}
.fb-shots{display:flex;gap:8px;flex-wrap:wrap}
.fb-shot{position:relative;width:110px;height:76px;padding:0;display:grid;place-items:center;overflow:hidden}
.fb-shot img{max-width:100%;max-height:100%;object-fit:cover;border-radius:2px}
.fb-shot .mini{position:absolute;top:2px;right:2px;width:22px;height:22px}
.fb-add{width:110px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:#e8d6ae;font-weight:700;gap:0}
.fb-add b{font-size:26px;line-height:1}
.fb-add:hover{filter:brightness(1.2)}
.fb-tip{font-size:12px}
.fb-win .buy.big{align-self:center;min-width:240px}
/* Destaque de primeira vez (onboarding) do botão Feedback */
.fb-spot{position:absolute;z-index:80;pointer-events:none;border-radius:10px;box-shadow:0 0 0 3px var(--gold),0 0 0 9999px rgba(4,8,14,.62),0 0 24px 6px rgba(255,200,80,.6);animation:fbpulse 1.6s ease-in-out infinite}
@keyframes fbpulse{50%{box-shadow:0 0 0 4px #fff1c2,0 0 0 9999px rgba(4,8,14,.62),0 0 34px 10px rgba(255,200,80,.85)}}
.fb-coach{position:absolute;z-index:81;width:320px;padding:6px 8px 10px;display:flex;flex-direction:column;gap:8px;text-align:center}
.fb-coach h3{margin:2px 0 0;color:var(--gold);font-size:17px}
.fb-coach p{margin:0;line-height:1.45;font-size:13.5px}
.fb-coach .btns{display:flex;gap:8px;justify-content:center}
.fb-coach .emos{font-size:24px;letter-spacing:6px}
.hf.app .win-feedback{width:auto}
.hf.app .fb-kinds{grid-template-columns:repeat(5,1fr);gap:4px}
.hf.app .fb-kind{font-size:11px;padding:6px 0 4px}
.hf.app .fb-kind .fb-emo{font-size:22px}
.hf.app .fb-shot,.hf.app .fb-add{width:88px;height:62px}
.hf.app .fb-coach{width:min(320px,86vw)}
/* ---------- Itens no estilo MU (25/09): nome por categoria e linhas coloridas ---------- */
.q-normal{color:#f1ede4}
.q-excelente{color:#6fe08a}
.q-full{color:#8dffa6;text-shadow:0 0 6px rgba(111,224,138,.7),0 1px 0 #0d1522}
.mu-lines{margin-top:6px;padding-top:6px;border-top:1px dashed rgba(214,170,90,.25);display:flex;flex-direction:column;gap:1px;text-align:center}
.mu-l{font-size:12.5px;line-height:1.35;color:#8fb8ff}
.mu-l.mu-skill{color:#b9d2ff}
.mu-l.mu-exc{color:#8fb8ff}
.mu-full{margin-top:5px;text-align:center;font-weight:800;color:#ffd66b;letter-spacing:.04em;text-shadow:0 0 8px rgba(255,200,80,.6)}
.tt-why{margin:6px 0 2px;padding:5px 8px;border-radius:4px;background:rgba(111,170,255,.1);color:#cfe0ff;font-size:12.5px;line-height:1.4}
.tt-pot{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:6px 0 2px;padding:5px 8px;border-radius:4px;background:rgba(242,193,78,.08);font-size:12.5px}
.tt-pot-t{color:var(--gold);font-weight:700;width:100%}
.tt-pot b.good{color:#6fe08a}
.fg-pow{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 8px;margin:4px 0 6px;font-size:13px;color:#e8d6ae}
.fg-pow em{font-style:normal;font-weight:800}
/* Responder no chat (25/09): clicar na frase marca a mensagem; a resposta mostra o trecho citado */
.clog p.canrep{cursor:pointer;border-radius:3px}
.clog p.canrep:hover{background:rgba(255,255,255,.05)}
.clog .cq{display:block;margin:0 0 1px;padding:1px 6px;border-left:2px solid rgba(214,170,90,.6);font-style:normal;font-size:.88em;color:#a9b3c2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clog p.tome{background:linear-gradient(90deg,rgba(242,193,78,.18),rgba(242,193,78,.03));box-shadow:inset 3px 0 0 var(--gold);border-radius:4px}
.creply{display:flex;align-items:center;gap:6px;margin:4px 0 -2px;padding:3px 4px 3px 8px;border-radius:4px;background:rgba(242,193,78,.1);box-shadow:inset 3px 0 0 var(--gold);font-size:12.5px;color:#e8d6ae}
.creply[hidden]{display:none}
.creply .crt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.creply i{font-style:normal;color:#a9b3c2}
.creply .mini{flex:none;width:22px;height:22px}
.mk-verif{color:#6fe08a!important;text-decoration:none;white-space:nowrap}
.mk-verif:hover{text-decoration:underline}
.mk-safe a{color:#8fb8ff}
/* Rankings Ouro/Chefes/Monstros (25/09) */
.lrow.rank.xr{grid-template-columns:40px 1fr 150px 96px}
.lrow.rank.xr > b.num{white-space:nowrap;display:flex;align-items:center;justify-content:flex-end}
.lrow.rank .rk-ic{width:16px;height:16px;margin-right:5px;image-rendering:pixelated}
.hf .tabs:has(.tab:nth-child(5)){flex-wrap:wrap}
.hf.app.is-portrait .lrow.rank.xr{grid-template-columns:30px 1fr auto auto}
.hf.app.is-portrait .lrow.rank.xr > b.num{display:flex;font-size:13px}
/* Loja de diamantes (25/09): PIX, cartão e USDC; aceite dos termos; VIP por diamantes */
.vip-card .pays{display:grid;gap:6px;width:100%}
.vip-card .pays.n2{grid-template-columns:1fr 1fr}
.vip-card .pays.n3{grid-template-columns:1fr 1fr 1fr}
.vip-card .pays .buy{width:100%;min-width:0;padding:0 4px}
/* 26/09: um botão largo por linha (PIX, Cartão, USDC (BASE)). */
.shop-note{margin:10px 2px 0;font-size:12.5px;color:var(--muted,#9aa6b6);text-align:center}.shop-note a{color:var(--gold,#f2c14e)}
.vip-card .pays.stack{grid-template-columns:1fr!important}
.vip-card .pays.stack .buy{height:34px;font-size:14px}
.ribbon.off{background:linear-gradient(#9ff0a8,#2e9a4a);color:#062410;box-shadow:0 2px 0 #0d4a1e}
.shop-terms{display:flex;align-items:flex-start;gap:10px;padding:8px 12px;margin:0 0 10px;border-width:12px;border-image-width:12px;font-size:12.5px;line-height:1.4;cursor:pointer;color:#c9cfd8}
.shop-terms input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:#f2c14e;cursor:pointer}
.shop-terms a{color:#f2c14e}
.shop-terms.warn{animation:hf-shake .35s;box-shadow:0 0 0 2px #ff7d74 inset}
@keyframes hf-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.prices.dia b{display:inline-flex;align-items:center;gap:6px}
.prices.dia b img{width:24px;height:24px;image-rendering:pixelated}
.vip-card .vp .off{color:var(--green)}
.vip-ask{padding:10px 14px;margin:0 0 10px;border-width:12px;border-image-width:12px;text-align:center}
.vip-ask p{margin:0 0 8px}
.vip-ask .two{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:360px;margin:0 auto}
.buyp .bacts a.buy{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
/* Novidades: agradecimentos (25/09); o nome abre o perfil do jogador */
.nw-part.thx>b{background:rgba(200,120,255,.18);color:#e2b8ff}
.nw-part.thx .nw-who{color:var(--gold);font-weight:800;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.nw-part.thx b.nw-who{cursor:default;text-decoration:none;background:none;padding:0}
/* Loja: quantidade 1/10/100 (25/09) */
.qty-seg{display:inline-flex;align-items:stretch;gap:0;width:auto;max-width:100%;height:30px;margin:2px 0 6px;vertical-align:middle}
/* 02/10 (dono: "esses botões estão muito feios, vamos colocar com a cor do sistema"): − e + azuis colados no número, Máx. dourado. */
.hf .qty-seg>button,.hf .qty-seg .qty-in{all:unset;box-sizing:border-box;height:30px;display:grid;place-items:center;font:800 14px/1 inherit;cursor:pointer;transition:filter .12s,transform .08s}
.hf .qty-seg>button:first-child,.hf .qty-seg>button:nth-child(3){width:28px;flex:none;color:#fff;text-shadow:0 1px 0 #10264d;background:linear-gradient(180deg,#3f7bd6,#1f4687);box-shadow:inset 0 0 0 1px #7fb0ff,inset 0 -2px 0 rgba(0,0,0,.28)}
.hf .qty-seg>button:first-child{border-radius:9px 0 0 9px}
.hf .qty-seg>button:nth-child(3){border-radius:0 9px 9px 0}
.hf .qty-seg .qty-in{flex:none;width:46px;min-width:0;padding:0 4px;text-align:center;cursor:text;color:#ffe9b0;background:#0b1220;box-shadow:inset 0 1px 0 #7fb0ff,inset 0 -1px 0 #7fb0ff;-moz-appearance:textfield}
.hf .qty-seg .qty-in:focus{background:#101a2e}
.qty-seg .qty-in::-webkit-outer-spin-button,.qty-seg .qty-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hf .qty-seg>.qty-max{flex:none;margin-left:5px;padding:0 9px;border-radius:9px;font-size:11.5px;color:#3a2205;text-shadow:0 1px 0 rgba(255,236,170,.5);background:linear-gradient(180deg,#f6cd5c,#c08425);box-shadow:inset 0 0 0 1px #ffe08a,inset 0 -2px 0 rgba(0,0,0,.22)}
.hf .qty-seg>button:hover{filter:brightness(1.15)}
.hf .qty-seg>button:active{transform:translateY(1px)}
.hf .qty-seg>button.on{background:linear-gradient(180deg,#f6cd5c,#c08425);color:#3a2205}
/* Estatística da caçada no painel Loot (25/09) */
.hunt:empty{display:none}
.hunt{padding:6px 8px 4px;margin:0 0 6px;border-bottom:1px solid rgba(214,170,90,.18)}
.hu-top{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;color:var(--muted)}
.hu-top b{color:#e6e1d3}
.hu-reset{height:22px;padding:0 10px;border-radius:6px;border:1px solid rgba(214,170,90,.45);background:rgba(8,12,20,.6);color:var(--gold);font:700 11px/1 inherit;cursor:pointer}
.hu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:5px}
.hu-grid span{display:grid;grid-template-columns:18px 1fr;grid-template-rows:auto auto;column-gap:4px;align-items:center;min-width:0}
.hu-grid img{grid-row:1/3;width:18px;height:18px}
.hu-grid b{font-size:13px;color:#e6e1d3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hu-grid small{font-size:10.5px;color:var(--green);white-space:nowrap}
.field.pct b{color:var(--gold);margin-left:4px}
/* Poções do automático no botão AUTO (25/09) */
.auto-pop{position:absolute;right:-8px;bottom:calc(100% + 8px);width:290px;padding:10px 12px;z-index:30;border-width:12px;border-image-width:12px;font-size:12.5px;color:#d6dbe3;text-align:left}
.auto-pop[hidden]{display:none}
.auto-pop .ap-h{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:14px;color:var(--gold)}
.auto-pop .ap-h img{width:20px;height:20px}
.auto-pop .ap-row{display:flex;align-items:center;gap:8px;margin:2px 0 8px;cursor:pointer}
.auto-pop .ap-row input{width:16px;height:16px;accent-color:#f2c14e}
.auto-pop .ap-f{display:flex;flex-direction:column;gap:4px;margin:0 0 8px}
.auto-pop .ap-f span{display:flex;align-items:center;gap:6px;font-weight:600}
.auto-pop .ap-f span img{width:18px;height:18px}
.auto-pop .ap-f b{color:var(--gold)}
/* Habilidades no automático (28/09): caixas no balão do AUTO e cadeado na barra de skills */
.auto-pop .ap-sk{margin-top:4px;padding-top:8px;border-top:1px solid rgba(214,170,90,.25)}
.auto-pop .ap-skr{margin:0 0 5px}
.auto-pop .ap-skr img{width:24px;height:24px;border-radius:3px;image-rendering:pixelated}
.auto-pop .ap-skr .num{display:inline-block;min-width:14px;font-style:normal;color:var(--gold)}
.skill.autooff img{filter:grayscale(.75) brightness(.7)}
.skill.autooff::after{content:"🔒";position:absolute;left:3px;top:2px;z-index:3;font-size:13px;line-height:1;filter:drop-shadow(0 1px 1px #000);pointer-events:none}
.hf.app .skill.autooff::after{font-size:11px}
.auto-pop .ap-n{margin:0;font-size:11px;color:var(--muted)}
.hf.app .auto-pop{right:0;bottom:calc(100% + 6px);width:min(270px,calc(100vw - 24px))}
/* Herbalista escondida (25/09): espólios e Loja de Cristais */
.hb-head{display:flex;align-items:center;gap:12px;padding:8px 12px;margin:0 0 10px;border-width:12px;border-image-width:12px}
.hb-head .hb-face{width:64px;height:64px;image-rendering:pixelated;flex:none}
.hb-head p{flex:1;margin:0;font-style:italic;color:#d8e6c8;font-size:13px}
.hb-bal{display:flex;align-items:center;gap:6px;padding:4px 10px;flex:none}
.hb-bal img{width:22px;height:22px}
.hb-all{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;margin:0 0 8px;border-width:12px;border-image-width:12px}
.hb-all b,.hb-val{display:inline-flex;align-items:center;gap:4px}
.hb-all img,.hb-val img{width:18px;height:18px}
.hb-all .buy{width:auto;padding:0 16px}
.lrow.hb-row{grid-template-columns:44px 1fr auto 34px 64px 96px;align-items:center}
.lrow.hb-row .hb-q{width:64px;height:34px;padding:0 6px;text-align:center}
.lrow.hb-row .hb-lock{width:32px;height:32px;font-size:15px}
.lrow.hb-row.locked{opacity:.75}
@media (max-width:520px){.lrow.hb-row{grid-template-columns:36px 1fr 30px 54px 76px}.lrow.hb-row .hb-val{display:none}.lrow.hb-row .buy{width:74px}.lrow.hb-row .hb-q{width:54px}}
.lrow.hb-row>img{width:40px;height:40px}
.lrow.hb-row .buy{width:92px}
.shop-items .card .buy img{width:18px;height:18px;vertical-align:-3px;margin-right:4px}
/* ---------- Tela fixa no computador (26/09): colunas presas, o jogo no meio, janelas no lugar fixo, sem rolagem ----------
As medidas batem com DOCK em hud.js (pixels do palco, que tem no mínimo 1366×768). O canvas do Godot é posicionado pela HUD
(sizeCanvas) na área do meio; aqui ficam só a moldura dele e os painéis. */
.hf.dock{--dl:320px;--dr:320px;--dt:84px;--db:160px;--hc:146px;--cx:calc(var(--dl) + (100% - var(--dl) - var(--dr)) / 2)}
html.hf-dock body{background:#0b111d}
html.hf-dock #canvas{border-radius:8px;box-shadow:0 0 0 2px #6b5423,0 0 0 4px #0b0806,0 8px 24px rgba(0,0,0,.6)}
.hf.dock .hf-stage::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--dt);background:linear-gradient(180deg,#141f35,#0d1524);border-bottom:2px solid #6b5423;box-shadow:0 3px 12px rgba(0,0,0,.45);pointer-events:none;z-index:-1}
.hf.dock .panel{transition:none}
.hf.dock .panel .head{cursor:default}
.hf.dock .panel .grip,.hf.dock .panel [data-collapse]{display:none}
/* 26/09 (dono): chat na esquerda, embaixo do herói; na direita, mapa, missões e loot recente. */
.hf.dock .p-missions{left:auto;right:10px;top:calc(var(--dt) + 220px);width:calc(var(--dr) - 20px);height:calc((100% - var(--dt) - 238px) * .52)}
.hf.dock .p-loot{left:auto;right:10px;top:calc(var(--dt) + 228px + (100% - var(--dt) - 238px) * .52);bottom:10px;width:calc(var(--dr) - 20px);height:auto}
/* Topo em uma linha: logo, presença, moedas e os botões; o cartão do herói desce para o alto da coluna da esquerda. */
/* Topo: logo à esquerda, moedas no centro, botões à direita (o Ranking desce para o menu de baixo). Online e VIP ficam
pequenos dentro da tela do jogo, no canto de cima à esquerda. */
.hf.dock .topcenter{position:static;transform:none;display:block}
.hf.dock .toplogo{position:absolute;left:12px;top:10px;width:176px}
/* Cronômetro do Beta no topo do PC (01/10, dono: "vamos colocar um cronômetro no jogo e na LP para o Beta") */
.betacd{display:none}
.hf.dock .betacd:not([hidden]){position:absolute;left:198px;top:15px;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:5px 12px 6px;border:0;border-radius:10px;cursor:pointer;color:#fff;font:inherit;text-align:left;
background:linear-gradient(100deg,rgba(64,30,96,.96),rgba(18,24,40,.96));box-shadow:0 0 0 1px #0b0806,0 0 0 2px #c77dff,0 4px 12px rgba(0,0,0,.45),0 0 16px -2px rgba(199,125,255,.7)}
.hf.dock .betacd small{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#f2c14e}
.hf.dock .betacd b{font-size:19px;font-weight:800;line-height:1.05;letter-spacing:.02em;font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(255,200,120,.45)}
.hf.dock .betacd:hover{filter:brightness(1.12)}
@media (max-width:1180px){.hf.dock .betacd:not([hidden]){left:192px;padding:4px 9px 5px}.hf.dock .betacd small{font-size:9px}.hf.dock .betacd b{font-size:16px}}
.hf.dock .currencies{position:absolute;left:50%;top:18px;transform:translateX(-50%);margin:0;gap:8px}
.hf.dock .presence{position:absolute;left:calc(var(--dl) + 16px);top:calc(var(--dt) + 16px);margin:0;padding:1px 8px;font-size:11px;z-index:3;background:rgba(8,11,16,.7)}
.hf.dock .presence img{width:13px;height:13px}
.bottombar .dock-only{display:none}
.hf.dock .bottombar .dock-only{display:flex}
.hf.dock .pill{width:140px;height:42px;gap:8px}
/* Moeda do topo na tela limpa (01/10): sem a borda da moldura, o ícone, o número e o + ficam no meio da pílula. */
.hf.dock .pill.fr-pill{border-width:0;padding:0 7px 0 9px}
.hf.dock .pill .v{font-size:16px;line-height:1}
.hf.dock .topnav{top:16px;gap:5px}
.hf.dock .topnav .navbtn{width:56px;height:50px}
.hf.dock .topnav .navbtn img{width:24px;height:24px}
.hf.dock .topnav .navbtn span{font-size:10.5px}
.hf.dock .topnav .badge{min-width:16px;height:16px;padding:0 3px;font-size:10px;line-height:12px;border-width:1.5px;right:-3px;top:-4px}
.hf.dock .topnav .alpha-ico{width:28px;height:28px;margin-top:-2px;font-size:20px}
.hf.dock .hero-card{left:10px;top:calc(var(--dt) + 8px);width:calc(var(--dl) - 20px);height:var(--hc);padding:6px 6px 6px 4px;gap:4px;align-items:flex-start;border:16px solid transparent;border-image:url(assets/f_panel_lg.png) 33 fill / 16px stretch;box-sizing:border-box}
.hf.dock .hero-card .portrait{width:62px;height:62px;flex:none}
.hf.dock .hero-card .portrait img{width:48px;height:48px}
.hf.dock .hero-info{width:auto;flex:1;min-width:0;min-height:0;padding:0;border:0;border-image:none;background:none;box-shadow:none}
.hf.dock .hero-info .name{font-size:16px}
.hf.dock .hero-info .lvl{font-size:14px}
.hf.dock .hstats{flex-wrap:wrap;row-gap:4px;gap:6px}
.hf.dock .hduel .hl{display:none}
.hf.dock .hattr{margin-left:0;height:24px}
.hf.dock .p-map{left:auto;right:10px;top:calc(var(--dt) + 8px);width:calc(var(--dr) - 20px);height:204px}
.hf.dock .p-chat{left:10px;right:auto;top:calc(var(--dt) + var(--hc) + 16px);bottom:10px;width:calc(var(--dl) - 20px);height:auto}
.hf.dock .p-chat.clear{border-image:url(assets/f_panel_lg.png) 33 fill / 16px stretch;background:none}
.hf.dock .p-chat.clear .head,.hf.dock .p-chat.clear .ctabs,.hf.dock .p-chat.clear .csend{opacity:1}
.hf.dock .actions{left:var(--cx);bottom:86px}
.hf.dock .bottombar{left:var(--cx);bottom:4px;max-width:calc(100% - var(--dl) - var(--dr) - 16px);border-width:10px;padding:0 4px;gap:4px}
.hf.dock .bottombar .navbtn{width:70px;height:56px}
.hf.dock .bottombar .navbtn img{width:30px;height:30px}
.hf.dock .bottombar .navbtn span{font-size:12px}
.hf.dock .banner,.hf.dock .invites{left:var(--cx);top:calc(var(--dt) + 36px)}
.hf.dock .arena-ui{inset:auto;left:calc(var(--dl) + 8px);right:calc(var(--dr) + 8px);top:calc(var(--dt) + 8px);bottom:var(--db)}
/* Janelas (Loja, Mochila, Baús…): ocupam a área principal (jogo + coluna da direita), sem abrir por cima do herói e do chat.
As pequenas (nome, voto, renascer…) continuam centralizadas nessa área. */
.hf.dock .veil{inset:auto;left:var(--dl);top:calc(var(--dt) + 8px);right:10px;bottom:10px;background:none;animation:none}
.hf.dock .veil:has(.win-nome,.win-votou,.win-renascer,.win-discord,.win-offline,.win-diario,.win-chefe_fim,.win-missoes,.win-feedback,.win-instalar){background:rgba(6,9,15,.6);border-radius:10px}
/* Janelas pequenas (26/09, "centralizar"): a área vai de ponta a ponta da tela, então a janela fica no meio do jogo (as colunas
da esquerda e da direita têm a mesma largura) e não mais puxada para a direita. */
.hf.dock .veil:has(.win-nome,.win-votou,.win-renascer,.win-discord,.win-offline,.win-diario,.win-chefe_fim,.win-missoes,.win-feedback,.win-instalar){left:10px;right:10px}
.hf.dock .win:not(.win-nome):not(.win-votou):not(.win-votar):not(.win-perfil):not(.win-grupo):not(.win-votacao):not(.win-renascer):not(.win-discord):not(.win-offline):not(.win-diario):not(.win-chefe_fim):not(.win-missoes):not(.win-doar):not(.win-feedback,.win-instalar){width:100%;height:100%;max-width:none;max-height:none;animation:none}
/* Marcar alguém com @ no chat (26/09): lista acima do campo e o destaque do nome na conversa. */
.chatbody{position:relative}
.cment{position:absolute;left:0;right:0;bottom:40px;z-index:5;display:flex;flex-direction:column;padding:4px;border-radius:6px;background:#0d1524;box-shadow:0 0 0 1px rgba(214,170,90,.55),0 8px 22px rgba(0,0,0,.6)}
.cment[hidden]{display:none}
.cment button{display:block;width:100%;text-align:left;padding:6px 8px;border:0;border-radius:4px;background:none;color:#e9edf4;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.cment button.on,.cment button:hover{background:rgba(242,193,78,.18);color:#ffe3a0}
.clog .cmention{color:#7fd4ff;font-weight:700}
.clog .cmention.me{color:#1b1204;background:linear-gradient(#ffe7a0,#e0a93a);padding:0 3px;border-radius:3px}
.hf.app .cment{bottom:48px}
/* Tela fixa "limpa" (26/09, o dono preferiu a proposta): cartões lisos com borda fina e cantos redondos no lugar das molduras
desenhadas. A borda transparente continua (mesmo espaçamento de antes); a linha é um outline por dentro. */
.hf.dock .fr-lg,.hf.dock .fr-md,.hf.dock .fr-sm{border-image:none;border-color:transparent;background-color:#121b2e;border-radius:10px;outline:1px solid #2b3650;outline-offset:-1px}
.hf.dock .fr-slot{border-image:none;border-color:transparent;background-color:#16203a;border-radius:8px;outline:1px solid #2b3650;outline-offset:-1px}
.hf.dock .fr-slot-on{border-image:none;border-color:transparent;background-color:#2a2410;border-radius:8px;outline:2px solid #e0a93a;outline-offset:-2px}
.hf.dock .fr-pill{border-image:none;border-color:transparent;background-color:#16203a;border-radius:999px;outline:1px solid #6b5423;outline-offset:-1px}
.hf.dock .hero-card{border-image:none;border-color:transparent;background-color:#121b2e;border-radius:10px;outline:1px solid #6b5423;outline-offset:-1px}
.hf.dock .p-map,.hf.dock .p-chat.clear{outline-color:#2b3650}
.hf.dock .bottombar{border:0;border-image:none;background:none;padding:0;gap:6px}
.hf.dock .navbtn:hover,.hf.dock .fr-slot:hover{outline-color:#6b5423}
.hf.dock .navbtn.on{outline:2px solid #e0a93a;outline-offset:-2px;background-color:#2a2410}
.hf.dock .win{outline-color:#6b5423}
/* Botões lisos na tela fixa: dourado (ação principal), azul (secundário), abas e botões pequenos com borda fina. */
.hf.dock .hero-info{outline:none;background:none}
.hf.dock .buy,.hf.dock .csbtn{border-image:none;border-color:transparent;border-radius:8px;background:linear-gradient(#f0bb4c,#d4952a);color:#2a1a05;text-shadow:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.hf.dock .buy.blue,.hf.dock .hattr{border-image:none;border-color:transparent;border-radius:8px;background:linear-gradient(#3a6fd0,#24509f);color:#fff;text-shadow:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.hf.dock .buy:disabled{filter:grayscale(.7) brightness(.8)}
.hf.dock .ctabs button{border-image:none;border-color:transparent;border-radius:6px;background:#16203a;outline:1px solid #2b3650;outline-offset:-1px}
.hf.dock .ctabs button.on{background:#24509f;outline-color:#3f6bc0}
html.hf-dock:has(.hf .veil:not([hidden])) #canvas{box-shadow:none}
.hf.dock .buy.red{background:linear-gradient(#e4574f,#a3221f);color:#fff}
.hf.dock .mini{border-image:none;border-color:transparent;border-radius:6px;background:#16203a;outline:1px solid #2b3650;outline-offset:-1px}
.hf.dock:has(.veil:not([hidden])) .presence{display:none}
/* Chat sem rolagem para o lado (26/09): a resposta citada e as linhas longas quebram/cortam dentro da coluna. */
.clog{overflow-x:hidden}
.clog p > span{min-width:0;overflow-wrap:anywhere}
.clog .cq{max-width:100%}
/* Emojis no chat (26/09): botão dentro do campo e a janelinha com abas acima dele. */
.cin-w{position:relative;flex:1;min-width:0;display:flex}
.cin-w .cinput{width:100%;padding-right:30px}
.cemo-b{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:26px;height:26px;display:grid;place-items:center;font-size:17px;line-height:1;border-radius:5px;opacity:.85}
.cemo-b:hover{opacity:1;background:rgba(255,255,255,.08)}
.cemoji{position:absolute;left:0;right:0;bottom:40px;z-index:6;display:flex;flex-direction:column;border-radius:8px;background:#0d1524;box-shadow:0 0 0 1px rgba(214,170,90,.55),0 8px 22px rgba(0,0,0,.6);overflow:hidden}
.cemoji[hidden]{display:none}
.ce-tabs{display:flex;gap:2px;padding:4px;border-bottom:1px solid rgba(214,170,90,.25)}
.ce-tabs button{flex:1;height:30px;border-radius:5px;font-size:17px;opacity:.6}
.ce-tabs button.on{opacity:1;background:rgba(242,193,78,.18)}
.ce-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;padding:6px;max-height:190px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#8a6a3a transparent}
.ce-grid button{height:34px;border-radius:5px;font-size:21px;line-height:1}
.ce-grid button:hover{background:rgba(255,255,255,.1)}
.hf.app .cemoji{bottom:48px}
.hf.app .ce-grid button{height:40px;font-size:24px}
/* Mochila (26/09): a grade rola por dentro (a linha do grid da janela não cresce além da altura) e filtros de raridade e nível. */
.inv{grid-template-rows:minmax(0,1fr)}
.inv-left{min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#8a6a3a transparent}
.inv-sel{display:flex;align-items:center;gap:8px;width:100%;justify-content:flex-end;flex-wrap:wrap}
.inv-sel label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.inv-sel select{height:26px;padding:0 8px;border-radius:13px;border:1px solid rgba(214,170,90,.35);background:#0d1524;color:var(--ink);font:600 12px "HF Sans","Signika",system-ui,sans-serif;cursor:pointer}
.inv-sel select:focus{outline:none;border-color:#d9b56a}
/* Botão de gestos do chat com emoji no lugar do ícone desenhado. */
.csend .cemo-i{font-size:17px;line-height:1}
/* A área das janelas tem uma linha só do tamanho dela: a janela não cresce com o conteúdo (a lista rola por dentro). */
.hf.dock .veil{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
/* Rostos em pixel (26/09: Gareth em camadas e Merlin): a arte tem a cabeça na parte de baixo do quadro 160x160 (corte nos
ombros). Sobe um pouco para a cabeça ficar no meio da moldura. */
img[src*="aventureiro_face_"],img[src*="/hero_merlin."]{transform:translateY(-12%);image-rendering:pixelated}
/* Boneco da Mochila do Gareth em camadas (26/09): figura da aparência escolhida. */
.hero-look{display:block;width:128px;height:128px;image-rendering:pixelated;filter:drop-shadow(0 6px 4px rgba(0,0,0,.45))}
.hf.app .hero-look{width:100px;height:100px}
/* Instalar app (26/09): passo a passo por aparelho (iPhone/iPad, Android, computador), mesmo tamanho do convite do Discord. */
.win.win-instalar{width:420px;height:auto}
.win-instalar .win-head{height:34px;margin:-4px 0 8px;padding-bottom:4px}
.win-instalar .win-head img{width:26px;height:26px;border-radius:6px}
.win-instalar .win-head .t-title{font-size:18px}
.win-instalar .win-head .close{width:28px;height:28px;font-size:17px}
.inst-top{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.inst-top .inst-ic{width:56px;height:56px;flex:none;border-radius:13px;box-shadow:0 2px 0 rgba(0,0,0,.45),0 0 0 1px rgba(214,170,90,.35)}
.inst-top b{display:block;font-size:18px;margin-bottom:3px}
.inst-top small{display:block;font-size:12.5px;line-height:1.35;color:var(--muted)}
.inst .cfg-btns{display:flex;justify-content:center;gap:8px;margin:0}
.inst .inst-or{text-align:center;margin:8px 0 6px;font-size:12px}
.inst-steps{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.inst-steps li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(214,170,90,.18);text-align:left}
.inst-steps .inst-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:#f2c14e;color:#1a1208}
.inst-steps .inst-svg{flex:none;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:rgba(10,132,255,.16);color:#4da3ff}
.inst-steps .inst-svg svg{width:22px;height:22px}
.inst-steps li:last-child .inst-svg{background:rgba(80,200,120,.16);color:#6fdc8c}
.inst-steps b{display:block;font-size:14px;line-height:1.3}
.inst-steps small{display:block;font-size:12px;line-height:1.35;color:var(--muted);margin-top:1px}
.inst-link{display:flex;gap:6px;margin:0 0 10px}
.inst-link .inst-url{flex:1;min-width:0;padding:6px 8px;border-radius:6px;border:1px solid rgba(214,170,90,.3);background:rgba(0,0,0,.35);color:inherit;font-size:12px}
.inst .inst-now{margin:4px 0 12px}
.inst .inst-now .buy{min-width:200px;font-size:16px}
/* Mochila no computador (26/09): marcar com clique, Ctrl e Shift (sem quadradinho); o ✓ aparece só no marcado e o Shift não
seleciona texto da tela. */
.hf:not(.app) .inv-grid{user-select:none;-webkit-user-select:none}
.inv-it .ib-box.on{pointer-events:none}
.inv-keys{margin-top:6px;font-size:12px}
/* Mochila (26/09): atalhos "Marcar: Comuns, Raros…" (uma cor por raridade), venda automática e o selo da outra classe. */
.inv-quick{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 2px 8px}
.inv-quick .iq-l{font-size:12px;color:var(--muted)}
.inv-quick .chip.iq{display:inline-flex;align-items:center;gap:5px}
.inv-quick .chip.iq b{font-size:11px;opacity:.8}
.inv-quick .chip.iq.r0{color:#c9cfd8}.inv-quick .chip.iq.r1{color:#6fd36a}.inv-quick .chip.iq.r2{color:#58a8ff}
.inv-quick .chip.iq.r3{color:#c77dff}.inv-quick .chip.iq.r4{color:#ffb640}.inv-quick .chip.iq.r5{color:#ff5a7a}
.inv-quick .chip.iq.on{background:#3a2f12;border-color:#f2c14e;color:#fff}
.inv-quick .iq-auto{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-left:auto}
.inv-quick .iq-oc{margin-left:0}
.inv-quick .iq-auto select{height:26px;padding:0 8px;border-radius:13px;border:1px solid rgba(214,170,90,.35);background:#0d1524;color:var(--ink);font:600 12px "HF Sans","Signika",system-ui,sans-serif;cursor:pointer}
.inv-quick .iq-oc input{width:15px;height:15px;accent-color:#f2c14e}
.hf.app .inv-quick .iq-auto{margin-left:0}
.inv-it span.ib-eq.cls{color:#b7c6ff;font-weight:700;letter-spacing:.3px;border-radius:6px;background:rgba(88,120,200,.18);box-shadow:inset 0 0 0 1px rgba(127,160,255,.35)}
/* Poder em primeiro lugar (26/09): número grande, ▲/▼ contra o equipado e o selo MELHOR (padrão dos jogos idle). */
.inv-it .pw2{display:flex;flex-direction:column;align-items:center;line-height:1;margin-top:2px}
.inv-it .pw2 small{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.inv-it .pw2 b{font-size:22px;color:#fff;text-shadow:0 2px 0 #000,0 0 8px rgba(0,0,0,.6);margin-top:1px}
.inv-it .dl{font-style:normal;font-weight:800;font-size:12.5px;margin:1px 0 5px;white-space:nowrap}
.inv-it .dl.good{color:#7fe08f}.inv-it .dl.bad{color:#ff8a7a}.inv-it .dl.eq0,.inv-it .dl.na{color:var(--muted);font-weight:600;font-size:11px}
.inv-it .ib-best{position:absolute;top:-7px;left:50%;transform:translateX(-50%);z-index:4;padding:2px 8px;border-radius:9px;font:800 10px/1.2 "HF Sans","Signika",system-ui,sans-serif;letter-spacing:.08em;font-style:normal;color:#1a1208;background:linear-gradient(#ffe08a,#f2b33a);box-shadow:0 0 0 1px #8a5a12,0 2px 6px rgba(0,0,0,.6),0 0 12px rgba(242,193,78,.45);pointer-events:none}
.inv-it:has(.ib-best){box-shadow:inset 0 0 0 2px #f2c14e,0 0 14px rgba(242,193,78,.35)}
.inv-bh .inv-best{height:28px;padding:0 12px;font-size:12.5px;white-space:nowrap}
.hf.app.is-portrait .inv-it:not(.mat) .pw2 b{font-size:15px}
.hf.app.is-portrait .inv-it:not(.mat) .pw2 small{display:none}
.hf.app.is-portrait .inv-it:not(.mat) .dl{margin:0;font-size:10.5px}
.hf.app.is-portrait .inv-it .ib-best{font-size:8.5px;padding:1px 5px;top:-6px}
.hf:not(.app) .inv-it:not(.inv-free):not(.inv-more):not(.mat){grid-template-rows:34px 15px 30px 14px 22px;height:142px}
.hf:not(.app) .inv-it:not(.mat) .pw2 small{font-size:8.5px}
.hf:not(.app) .inv-it:not(.mat) .pw2 b{font-size:20px}
.hf:not(.app) .inv-it:not(.mat) .dl{margin:0 0 2px;font-size:11.5px}
.inv-it .ib-best{top:4px;left:5px;transform:none;padding:1px 6px;font-size:9px}
.hf.app.is-portrait .inv-it .ib-best{top:2px;left:auto;right:2px}
.hf.app.is-portrait .inv-it:not(.mat):has(.ib-best) .up{top:34px;bottom:auto;right:4px}
/* Mercado › Vendas (26/09): últimas vendas de todos e preço médio por raridade */
.mk-avgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-bottom:6px}
.mk-avg{display:flex;flex-direction:column;gap:1px;padding:4px 6px;border-width:8px;border-image-width:8px;font-size:12.5px}
.mk-avg small{color:var(--muted);font-size:11px}.mk-avg span b{color:#f3e3bd}
.mk-sales{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mk-sale{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center;padding:4px 6px;border-width:9px;border-image-width:9px}
.mk-sale .ic{width:44px;height:44px}.mk-sale .nm{font-weight:700;font-size:14px}.mk-sale .rar{font-size:11px}.mk-sale .s{font-size:11.5px;color:var(--muted)}
.mk-sale .lp{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.mk-sale .lp b{color:#f3e3bd}.mk-sale .lp a{font-size:11px}
.mk-ref{margin:6px 0;padding:4px 8px;border-width:8px;border-image-width:8px;font-size:12px}
.mk-ref small{color:var(--muted)}.mk-ref div{display:flex;flex-wrap:wrap;gap:10px}.mk-ref b{color:#f3e3bd}
.hf.app .mk-sales{grid-template-columns:1fr}
.hf.app .win-mercado .tabs .tab{flex:1 1 0;min-width:0;padding:0 4px;font-size:12.5px;white-space:normal;line-height:1.1}
/* Ficha do item simples (27/09): Poder em destaque e os bônus em frases curtas */
.itip .tt-pw b{font-size:16px;color:#f3e3bd}
.mu-h{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.mu-lines{text-align:left}
.mu-l.mu-exc{color:#9fd2ff}
.is-bonus{display:flex;flex-direction:column;gap:2px;padding:6px 0;border-top:1px dashed rgba(214,170,90,.25);border-bottom:1px dashed rgba(214,170,90,.25);margin:4px 0}
.is-bonus span{color:var(--muted);font-size:12px}
.is-bonus b{color:#9fd2ff;font-weight:600;font-size:13px}
.is-pw{font-size:17px;color:#f3e3bd}
/* Arena (27/09): janela de Duelos em abas, faixa da temporada, ranking por pontos e Loja PvP */
.du-wrap.du-tabbed{display:block}
.du-tabbed .du-tabs{grid-template-columns:repeat(5,1fr);position:static;margin:0 0 10px;padding:0;background:none;box-shadow:none}
.du-tabbed .du-new{max-width:760px;margin:0 auto}
.hf.app .du-tabbed .du-tabs{position:sticky;top:-12px;margin:-12px -12px 8px;padding:10px 12px 8px;background:#152032;box-shadow:0 6px 10px rgba(0,0,0,.3)}
.hf.app .du-tabbed .du-tab{font-size:12px;padding:0 2px;line-height:1.1}
.ar-head{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px;padding:8px 10px;margin-bottom:10px;border-width:10px;border-image-width:10px}
.ar-s{display:flex;flex-direction:column;justify-content:center;padding:2px 12px;border-right:1px solid rgba(214,170,90,.2)}
.ar-s:last-child{border-right:0;margin-left:auto}
.ar-s small{color:var(--muted);font-size:11.5px}.ar-s b{font-size:16px;color:#f3e3bd}
.ar-h{flex-direction:row;align-items:center;gap:8px}.ar-h img{width:34px;height:34px;image-rendering:pixelated}.ar-h div{display:flex;flex-direction:column}.ar-h em{font-style:normal;font-size:11px;color:var(--muted)}
.hf.app .ar-s{padding:2px 6px;flex:1 1 40%;border-right:0}.hf.app .ar-s b{font-size:14px}
.ar-rank{display:grid;grid-template-columns:1fr 260px;gap:12px;align-items:start}
.hf.app .ar-rank{grid-template-columns:1fr}
.ar-row{grid-template-columns:34px 38px 1fr auto auto!important;align-items:center}
.ar-row.me{background:rgba(44,93,156,.25);border-radius:6px}
.ar-pos{color:#f3cf76;text-align:center}.ar-pts{color:#f3e3bd;font-size:15px;padding:0 8px}
.ar-av img{width:34px;height:34px;border-radius:5px;display:block;transform:scaleX(-1)}
.ar-av.fr-arena,.fr-arena{box-shadow:0 0 0 2px #ffcf5a,0 0 0 4px #b3261e,0 0 10px rgba(255,120,60,.6);border-radius:6px}
.ar-title{font-style:normal;font-size:11px;font-weight:700;color:#ffb640;background:rgba(255,182,64,.12);border:1px solid rgba(255,182,64,.4);border-radius:4px;padding:0 5px;margin-left:4px;vertical-align:1px}
.ar-rws{padding:8px 10px;border-width:10px;border-image-width:10px}
.ar-rw{display:flex;justify-content:space-between;align-items:center;padding:3px 0;border-bottom:1px dashed rgba(214,170,90,.18);font-size:13px}
.ar-rw b{display:flex;align-items:center;gap:4px;color:#f3cf76}.ar-rw img{width:18px;height:18px;image-rendering:pixelated}
.ar-last{padding:8px 12px;margin-bottom:10px;border-width:10px;border-image-width:10px;font-size:13.5px}
.pv-bal{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:10px;border-width:10px;border-image-width:10px}
.pv-bal img{width:44px;height:44px;image-rendering:pixelated}.pv-bal b{font-size:18px;color:#f3cf76}.pv-bal small{display:block;color:var(--muted);font-size:12px}
.pv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.pv-o{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center;padding:6px 8px;border-width:10px;border-image-width:10px}
.pv-o>img{width:40px;height:40px;image-rendering:pixelated}
.pv-t{display:flex;flex-direction:column;min-width:0}.pv-t b{font-size:14px}.pv-t small{color:var(--muted);font-size:11.5px;line-height:1.25}.pv-t em{font-style:normal;font-size:11px;color:#f3cf76}
.pv-o .buy{display:flex;align-items:center;gap:4px;white-space:nowrap}.pv-o .buy img{width:18px;height:18px;image-rendering:pixelated}
.pv-o.own{opacity:.8}
.pv-wear{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px}.pv-wear span{color:var(--muted);font-size:12.5px;margin-right:4px}.pv-wear .du-tab{height:32px;padding:0 10px;font-size:12.5px}
.du-rec.small{display:block;font-size:12.5px;color:var(--muted);margin:0 0 4px}
.res-pts{margin-top:6px;font-size:16px;display:flex;justify-content:center;gap:8px;align-items:center}.res-pts img{width:20px;height:20px;vertical-align:-4px;image-rendering:pixelated}
.hf.app .ar-head{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 4px;padding:4px 6px;border-width:8px;border-image-width:8px;margin-bottom:6px}
.hf.app .ar-s{padding:0 2px;margin:0}
.hf.app .ar-s:first-child{grid-column:1 / -1;flex-direction:row;gap:6px;align-items:baseline}
.hf.app .ar-s small{font-size:10.5px}.hf.app .ar-s b{font-size:13px}
.hf.app .ar-h{gap:4px}.hf.app .ar-h img{width:22px;height:22px}.hf.app .ar-h em{display:none}
/* Loja › Skins (27/09) */
.sk-help{margin:0 0 6px}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-bottom:8px}
.sk-card{display:grid;grid-template-columns:120px 1fr;grid-template-rows:1fr auto;gap:6px 10px;padding:10px;border-width:12px;border-image-width:12px}
.sk-card.on{box-shadow:0 0 0 2px #6fd36a inset}
.sk-art{grid-row:1 / 3;display:grid;place-items:center;background:radial-gradient(circle at 50% 60%,rgba(255,210,120,.18),rgba(0,0,0,0) 70%);border-radius:8px;min-height:130px}
.sk-spr{--s:108px;display:block;width:var(--s);height:var(--s);background-repeat:no-repeat;background-size:auto var(--s);image-rendering:pixelated;animation:sk-idle 1.05s steps(12) infinite}
/* Tira de 12 quadros (skin__idle.png, tools/skins/skins.py). */
@keyframes sk-idle{from{background-position:0 0}to{background-position:calc(var(--s) * -12) 0}}
.sk-t b{font-size:16px;color:#f3e3bd}.sk-t small{display:block;color:var(--muted);font-size:12px}.sk-t p{margin:4px 0 0;font-size:12.5px;line-height:1.3}
.sk-b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sk-on{font-weight:700}
.hf.app .sk-card{grid-template-columns:96px 1fr}.hf.app .sk-art{min-height:100px}.hf.app .sk-spr{--s:88px}
.sk-mine{max-width:720px;margin:0 auto}
.sk-row{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;padding:6px 10px;margin-bottom:6px;border-width:10px;border-image-width:10px}
.sk-row.on{box-shadow:0 0 0 2px #6fd36a inset}
.sk-mini{width:60px;height:60px;display:grid;place-items:center;overflow:hidden}.sk-mini img{width:52px;height:52px;image-rendering:pixelated}
.sk-spr.sm,.hf.app .sk-spr.sm{--s:60px}
/* Zoom do jogo (27/09): + / 100% / − no canto de cima à direita da área do jogo (Zoom.place no hud.js acompanha o painel do Mapa). */
.zoomctl{position:absolute;right:296px;top:112px;display:flex;flex-direction:column;align-items:stretch;width:44px;padding:4px;gap:3px;border-radius:12px;background:linear-gradient(#1c2942,#0e1522);box-shadow:0 0 0 2px #0b0806,0 0 0 3px #b8843e,0 4px 12px rgba(0,0,0,.55)}
.zoomctl button{all:unset;box-sizing:border-box;display:grid;place-items:center;height:34px;border-radius:8px;cursor:pointer;color:#f7e3b0;font:700 24px/1 inherit;text-shadow:0 2px 0 #000;background:linear-gradient(#2e3f63,#1a2540);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.35)}
.zoomctl button:hover:not(:disabled){filter:brightness(1.25)}
.zoomctl button:active:not(:disabled){transform:translateY(1px)}
.zoomctl button:disabled{opacity:.35;cursor:default}
.zoomctl button:focus-visible{outline:2px solid #f2c14e}
.zoomctl .zpct{height:22px;font-size:11px;font-weight:700;letter-spacing:.2px;background:none;box-shadow:none;color:#e9d8b0}
.hf.dock .zoomctl{right:calc(var(--dr) + 18px);top:102px}
.hf.app .zoomctl{right:calc(12px + var(--sr));top:calc(var(--st) + 256px);width:40px}
.hf.app .zoomctl button{height:32px;font-size:22px}
.hf.app .zoomctl .zpct{height:20px;font-size:10px}
.hf.app.is-landscape .zoomctl{top:calc(var(--st) + 146px)}
.hero-sk{--s:132px;filter:drop-shadow(0 6px 4px rgba(0,0,0,.45))}
.hf.app .hero-sk{--s:104px}
/* Portais de chefe 2 a 5 (28/09): cartão com a cor do portal (--pc) e o desenho dele */
.quest.portal{border-left:3px solid var(--pc,#b477ff);background:linear-gradient(90deg,color-mix(in srgb,var(--pc,#b477ff) 16%,transparent),transparent 70%)}
.quest.portal>img{image-rendering:pixelated;object-fit:contain}
.quest.portal .q-t{color:var(--pc,#f2c14e)}
.quest.portal .lnk{display:block;margin-top:4px;font-size:12px}
/* Grupo (party): cartão nas Missões e janela */
.quest.party .pt-list{display:flex;flex-direction:column;gap:3px;margin:4px 0 2px}
.pt-m{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 6px;font-size:12px}
.pt-m b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-m small{color:var(--muted);font-size:11px;text-align:right}
.pt-m.off{opacity:.55}
.pt-hp{grid-column:1/-1;height:4px;border-radius:2px;background:rgba(0,0,0,.45);overflow:hidden}
.pt-hp i{display:block;height:100%;background:linear-gradient(90deg,#c0392b,#e74c3c)}
.pt-inv{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px;font-size:12px}
.pt-inv span{flex:1 1 100%}
.quest.party .lnk{display:block;margin-top:4px;font-size:12px}
.grupo .pt-fr{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.grupo .pt-rules{margin:4px 0 0;padding-left:18px;font-size:13px;line-height:1.45;color:var(--muted)}
.grupo .searchbar{margin-top:10px}
.quest .lnk{background:none;border:0;color:#8fc1ff;text-decoration:underline;cursor:pointer;font:600 12px "HF Sans","Signika",system-ui,sans-serif;padding:0}
.quest.boss.portal{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pc,#b477ff) 60%,transparent)}
/* Duelos (28/09, feedback do PUNISHER: "sem o botão Desafiar com zoom 80%"): a lista de oponentes crescia e empurrava o
botão para fora da janela (que não rolava). Agora a lista tem altura máxima e rola; a janela também rola se faltar espaço. */
.win-duelos .win-body{overflow:auto}
.du-tabbed .du-new .du-cands{flex:none;max-height:min(40vh,380px);overflow:auto}
.hf.app .du-tabbed .du-new .du-cands{max-height:none}
/* Janelas em modal (28/09, dono: "essas telas estão muito grandes, deixar como um modal"): Perfil, Amigos, Grupo,
Configurações e Novidades ficam centralizadas e menores no computador; no celular continuam em tela cheia. */
.win.win-perfil,.win.win-grupo{width:min(760px,calc(100% - 40px));height:auto;max-height:calc(100% - 40px)}
.win.win-grupo{width:min(640px,calc(100% - 40px))}
.win-perfil .win-body,.win-amigos .win-body,.win-grupo .win-body,.win-config .win-body,.win-novidades .win-body,.win-guilda .win-body{overflow:auto;min-height:0}
.hf.app .win.win-perfil,.hf.app .win.win-grupo{width:100%;height:100%;max-height:none}
/* Arena na tela fixa (28/09): o duelo ocupa a janela inteira, como fora da tela fixa. */
.hf.dock .hf-stage.arena-on > .arena-ui{left:0;right:0;top:0;bottom:0}
/* Skins de heróis ainda bloqueados (28/09): aparecem na Loja como Em breve. */
.sk-card.soon .sk-art{opacity:.85}
.sk-soon{font-style:normal;color:#f2c14e;text-transform:none;letter-spacing:0}
/* Guildas (28/09) */
.gtag{font-style:normal;font-weight:700;color:#8fc1ff}
.gd .gd-head{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:10px}
.gd .gd-head img{width:56px;height:56px;image-rendering:pixelated}
.gd .gd-head .nm{font-size:20px;font-weight:800;color:#f2c14e}
.gd .gd-tabs{grid-template-columns:repeat(3,1fr);position:static;margin:0 0 10px;padding:0;background:none;box-shadow:none}
.gd .gd-new{display:flex;gap:12px;align-items:flex-start;padding:12px;margin:6px 0 10px}
.gd .gd-new img,.gd .gd-cas img{width:56px;height:56px;image-rendering:pixelated;flex:none}
.gd .gd-form{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.gd .gd-form .input{flex:1;min-width:160px}
.gd .gd-form .gd-tag{flex:0 0 90px;min-width:0;text-transform:uppercase}
.gd .gd-notice{padding:8px 12px;margin-bottom:8px;font-size:13px}
.gd .gd-cas{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;margin-bottom:8px}
.gd .gd-ent{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.gd .gd-ent span{padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(214,170,90,.25);font-size:12.5px}
.gd .gd-m{padding:8px 10px;margin:6px 0}
.gd .gd-m small{color:var(--muted);font-size:12px}
.gd .gd-fs{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.gd .gd-f{font-size:12.5px;text-align:left}
.gd .lnk{background:none;border:0;color:#8fc1ff;text-decoration:underline;cursor:pointer;font:600 12.5px "HF Sans","Signika",system-ui,sans-serif;padding:0}
.gd .gd-rk.me{box-shadow:inset 0 0 0 1px #f2c14e}
.gd .gd-note{display:flex;gap:8px;align-items:flex-start;width:100%}
.gd .gd-note textarea{flex:1;min-height:60px}
/* Atributos na barra de baixo (28/09): no computador o botão sai do cartão do herói. */
.hf:not(.app) .hattr{display:none}
/* Loja › Skins compacta (28/09): filtro por herói e cartões em pé, vários por linha (menos rolagem). */
.sk-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.sk-chips .du-tab{width:auto;padding:0 12px;height:32px}
.sk-grid.sk-shop{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.sk-shop .sk-card{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:4px;padding:8px;text-align:center}
.sk-shop .sk-art{grid-row:auto;min-height:92px}
.sk-shop .sk-spr{--s:84px}
.sk-shop .sk-t b{font-size:14px}
.sk-shop .sk-t p{display:none}
.sk-shop .sk-b{justify-content:center}
.hf.app .sk-grid.sk-shop{grid-template-columns:repeat(2,1fr)}
.hf.app .sk-shop .sk-card{grid-template-columns:1fr}
/* Barra de baixo com 10 botões (Atributos entrou, 28/09): um pouco mais estreitos na tela fixa. */
.hf.dock .bottombar .navbtn{width:58px}
.hf.dock .bottombar .navbtn span{font-size:11px}
/* Aba Guilda do chat só para quem está em uma guilda. */
.ctabs button[hidden]{display:none}
/* Chat (28/09): votação fixada no topo e botão de apagar da equipe */
.cpoll{flex:none;padding:6px 8px;border-radius:6px;background:rgba(12,20,34,.92);box-shadow:inset 0 0 0 1px rgba(242,193,78,.45);font-size:12.5px}
.cpoll[hidden]{display:none}
.cp-h{display:flex;align-items:flex-start;gap:6px}.cp-h b{flex:1;color:#ffe39a;line-height:1.3}.cp-h .mini{width:22px;height:22px;flex:none}
.cp-os{display:flex;flex-direction:column;gap:3px;margin-top:5px}
.cp-o{position:relative;display:flex;align-items:center;gap:6px;min-height:24px;padding:2px 8px;border:0;border-radius:4px;background:#1b2840;color:#e8e2d0;font:600 12px "HF Sans","Signika",system-ui,sans-serif;text-align:left;cursor:pointer;overflow:hidden}
.cp-o:hover{filter:brightness(1.15)}.cp-o[disabled]{cursor:default;filter:none}
.cp-o i{position:absolute;left:0;top:0;bottom:0;background:rgba(79,143,209,.35)}
.cp-o span{position:relative;flex:1}.cp-o b{position:relative;color:#cfd6e2}
.cp-o.me{box-shadow:inset 0 0 0 1px #f2c14e}.cp-o.best i{background:rgba(88,186,105,.45)}
.cp-f{display:flex;align-items:center;gap:8px;margin-top:4px;color:var(--muted)}.cp-f small{flex:1}
.cp-f .lnk{background:none;border:0;color:#ff9f8f;text-decoration:underline;cursor:pointer;font:600 11.5px "HF Sans","Signika",system-ui,sans-serif;padding:0}
.clog p{position:relative}
.clog .cdel{position:absolute;right:2px;top:1px;display:none;padding:0 5px;height:18px;border:0;border-radius:3px;background:#5a1d1d;color:#ffd0c8;font-size:11px;cursor:pointer}
.clog p:hover .cdel,.clog .cdel.sure{display:block}.hf.app .clog .cdel{display:block;opacity:.7}
/* Reações no chat (12/10): emojis embaixo da mensagem (o seu aceso), 😀+ para reagir e a janelinha de quem reagiu. */
.clog .crx{grid-column:2;display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:2px}
.clog .crc{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(255,255,255,.05);color:inherit;font-size:13px;line-height:18px;cursor:pointer}
.clog .crc b{font-size:11px;font-weight:800;color:#ffd36b}.clog .crc.on{background:rgba(255,201,60,.18);border-color:rgba(255,201,60,.55)}
.clog .crx-add{display:inline-flex;align-items:center;padding:1px 6px;border:1px dashed rgba(255,255,255,.18);border-radius:11px;background:none;color:inherit;font-size:12px;line-height:18px;cursor:pointer;opacity:.35;filter:grayscale(.7)}
.clog .crx-add i{font-style:normal;font-weight:800;font-size:11px;margin-left:1px}.clog p:hover .crx-add{opacity:.9;filter:none}.hf.app .clog .crx-add{opacity:.55}
.clog .crx:not(:has(.crc)){margin-top:0}
.crpop{position:fixed;z-index:9999;max-height:320px;overflow:auto;padding:8px;border:1px solid rgba(255,214,107,.35);border-radius:12px;background:#151b2b;box-shadow:0 10px 30px rgba(0,0,0,.55);color:#f3e6c8;font-size:13px}
.crpop .ce-tabs{display:flex;gap:2px;margin-bottom:6px}.crpop .ce-tabs button{flex:1;padding:4px 0;border:0;border-radius:6px;background:none;font-size:16px;cursor:pointer;opacity:.6}.crpop .ce-tabs button.on{opacity:1;background:rgba(255,255,255,.08)}
.crpop .ce-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.crpop .ce-grid button{padding:4px 0;border:0;border-radius:6px;background:none;font-size:20px;cursor:pointer}.crpop .ce-grid button:hover{background:rgba(255,255,255,.08)}
.crpop .crw+.crw{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}.crpop .crw-h{display:flex;align-items:center;gap:6px}.crpop .crw-e{font-size:20px}.crpop .crw-h b{color:#ffd36b}
.crpop .crw-b{margin-left:auto;padding:2px 8px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.06);color:inherit;font-size:12px;cursor:pointer}.crpop .crw-b.on{border-color:rgba(255,201,60,.55);background:rgba(255,201,60,.15)}
.crpop .crw-n{margin-top:3px;opacity:.85;line-height:1.4;word-break:break-word}
.p-chat .head .chat-poll{margin-right:4px;width:auto;padding:0 6px}
.p-chat .head .chat-poll[hidden]{display:none}
.pollf{display:flex;flex-direction:column;gap:6px}.pollf textarea{min-height:100px}
.pollf-d{display:flex;flex-wrap:wrap;gap:6px}.pollf-d .du-tab{width:auto;padding:0 12px;height:32px}
.win.win-votacao{width:min(560px,calc(100% - 40px));height:auto;max-height:calc(100% - 40px)}
.hf.app .win.win-votacao{width:100%;height:100%;max-height:none}
/* ---------- Botões novos (28/09, dono: "todos os botões estão feios") ----------
Botão liso e arredondado, com degradê suave, sem a faixa escura da moldura em pixel art no meio.
Dourado = ação principal; azul = ação secundária; vermelho = perigo. Abas: cinza escuro, a ligada em azul. */
.hf .buy,.hf .csbtn{border:1px solid #a86f14;border-image:none;border-radius:8px;padding:0 14px;color:#2a1604;text-shadow:0 1px 0 rgba(255,236,190,.55);
background:linear-gradient(180deg,#ffd86e 0%,#f2b53a 55%,#dc9722 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 0 #7a4d0c,0 3px 8px rgba(0,0,0,.35);transition:filter .12s,transform .08s,box-shadow .08s}
.hf .buy.blue{border-color:#1d4fa8;color:#fff;text-shadow:0 1px 0 rgba(6,24,66,.7);
background:linear-gradient(180deg,#5ea1ff 0%,#3b7ce8 55%,#2a63cc 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #143a80,0 3px 8px rgba(0,0,0,.35)}
.hf .buy.red{border-color:#8e1d18;border-radius:8px;color:#fff;text-shadow:0 1px 0 rgba(60,6,4,.7);
background:linear-gradient(180deg,#f26a5f 0%,#d9403a 55%,#b42a24 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 0 #5c1210,0 3px 8px rgba(0,0,0,.35)}
.hf .buy:hover,.hf .csbtn:hover{filter:brightness(1.08)}
.hf .buy:active,.hf .csbtn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 #000,0 1px 3px rgba(0,0,0,.35)}
.hf .buy[disabled],.hf .buy:disabled{filter:grayscale(.85) brightness(.75);box-shadow:none;cursor:not-allowed;transform:none}
.hf .buy.sm{height:32px;padding:0 10px;border-width:1px;border-radius:7px;font-size:12.5px}
.hf .buy.big{height:46px;border-radius:10px;font-size:16px}
.hf .csbtn{height:30px;padding:0 8px;border-radius:7px}
.hf .tab{border:1px solid #2c3a52;border-image:none;border-radius:8px;background:#141d2c;color:#b9c4d6;height:38px;padding:0 14px}
.hf .tab:hover{filter:none;background:#1b2740;color:#fff}
.hf .tab.on{border-color:#3d7ee6;background:linear-gradient(180deg,#3f82ec,#2a63cc);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.hf .ctabs button{border:1px solid #2c3a52;border-image:none;border-radius:6px;background:#141d2c}
.hf .ctabs button.on{border-color:#3d7ee6;background:linear-gradient(180deg,#3f82ec,#2a63cc);color:#fff}
/* Papéis no grupo (28/09) */
.role{font-weight:800;font-size:11px;padding:0 5px;border-radius:4px;background:#243049;color:#cfd8e8}
.role.r-tank{background:#23406e;color:#bcd6ff}.role.r-healer{background:#1f5a38;color:#b8f5c8}.role.r-assassin{background:#4a2468;color:#e4c4ff}.role.r-dps{background:#6a3a1c;color:#ffd6b0}
.pt-miss{margin:6px 0 2px}.pt-miss b{color:#ffcf6b}
/* Janelas em modal centralizadas na TELA inteira no PC (28/09, dono: "todos os modais parecem não estar centralizados").
As grandes (Loja, Mochila…) continuam ocupando a área do jogo. */
.hf.dock .veil:has(.win-nome,.win-votou,.win-votar,.win-perfil,.win-grupo,.win-votacao,.win-renascer,.win-discord,.win-offline,.win-diario,.win-chefe_fim,.win-missoes,.win-feedback,.win-instalar){inset:0;left:0;right:0;top:0;bottom:0;border-radius:0;background:rgba(6,9,15,.55);place-items:center;z-index:30}
/* Doação (28/09) */
.win.win-doar{width:min(520px,calc(100% - 40px));height:auto;max-height:calc(100% - 40px)}
.win-doar .win-body{overflow:auto;min-height:0}
.hf.app .win.win-doar{width:100%;height:100%;max-height:none}
.doar{text-align:center}.doar p{margin:0 0 10px;line-height:1.45}
.doar-ic{width:64px;height:64px;image-rendering:pixelated;margin:2px auto 8px;display:block}
.doar-box{padding:12px;margin:6px 0 10px}
.doar-addr{display:block;margin:8px 0 10px;padding:8px;border-radius:6px;background:#0a1019;color:#ffe08a;font-size:13px;word-break:break-all;user-select:all}
.hf.dock .veil:has(.win-doar){inset:0;left:0;right:0;top:0;bottom:0;border-radius:0;background:rgba(6,9,15,.55);place-items:center;z-index:30}
.doar-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:8px 0 10px}
.doar-chips .chip{padding:6px 12px;border-radius:999px;border:1px solid #2c3a52;background:#141d2c;color:#dfe6f2;font-weight:700}
.doar-chips .chip.on{background:linear-gradient(180deg,#ffd86e,#dc9722);color:#2a1604;border-color:#a86f14}
.doar-in{width:90px;text-align:center}
.doar .buy.big{margin:4px auto 6px;min-width:260px}
.doar-wallets{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.doar-more{margin-top:10px;text-align:center}.doar-more summary{cursor:pointer;color:var(--muted);font-size:12.5px}
.doar-ok b{color:#7fe39a;font-size:16px}
/* Fusão de itens (28/09): Itens | Pedras, 10 espaços, Sorte com − e + */
.fu-mode{display:flex;gap:6px;margin:0 0 8px}
.fu-mode .tab{flex:1}
.fu-in.many{grid-template-columns:repeat(5,1fr);max-width:420px;gap:6px}
.fu-in.many .fg-slot{height:46px;display:flex;align-items:center;justify-content:center}
.fu-in.many .fg-slot .ic,.fu-in.many .fg-slot img{max-width:40px;max-height:40px}
.fu-out{width:150px;height:auto;min-height:0;padding:6px 4px}
.fu.merge{gap:6px}
.fu-out .ic,.fu-out>img{opacity:1}
.fu-luck{display:flex;align-items:center;gap:8px;margin:8px 0 4px;font-size:12.5px;flex-wrap:wrap}
.fu-luck .tab{width:30px;height:28px;padding:0;font-weight:800}
.fu-luck b{min-width:18px;text-align:center;font-size:15px}
.fu-luck em{color:#9fd67a;font-style:normal}
.fg-cell.st{position:relative}
/* 28/09 (dono: "ajustar botão"): botões das linhas de Configurações numa linha só, texto centralizado */
.cfg-row .buy{width:auto;min-width:130px;padding:0 16px;white-space:nowrap;justify-content:center;text-align:center;line-height:1}
.hf.app .cfg-row .buy{min-width:0;padding:0 10px;font-size:12.5px}
/* Skins do herói em campo na janela Heróis (28/09) */
.hs-skins{padding:12px 16px;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.hs-row{display:flex;flex-wrap:wrap;gap:8px}
.hs-sk{display:flex;flex-direction:column;align-items:center;gap:4px;width:110px;padding:8px 4px;border-radius:10px;border:2px solid #2c3656;background:#141b30;color:#e8e2d0;font-size:12px;font-weight:700;cursor:pointer}
.hs-sk.on{border-color:#f2c14e;background:#2a2412}
.hs-sk img{width:44px;height:44px;image-rendering:pixelated}
.hs-sk .sk-spr.sm{--s:48px}
.hs-sk span{text-align:center;line-height:1.15}
/* Barra de cima com o botão GM (ADMIN/GM, 28/09): 8 botões; um pouco mais estreitos para não encostar nas moedas */
.hf.dock .topnav:has(.nb-gm:not([hidden])){gap:4px}
.hf.dock .topnav:has(.nb-gm:not([hidden])) .navbtn{width:50px}
.hf.dock .topnav:has(.nb-gm:not([hidden])) .navbtn span{font-size:9.5px}
/* Recompensa do Alpha (28/09) */
.alpha-sk{display:flex;gap:12px;align-items:center;padding:12px 14px;margin:0 0 10px}
.alpha-sk.open{border-color:#b98cff}
.alpha-sk small{display:block;color:var(--muted);margin-top:3px;line-height:1.35}
.alpha-sk small.alpha-vip{color:#ffd66b;font-weight:700}
.alpha-ico.big{font-size:30px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,#f2c14e,#8a4dff);color:#fff;flex:none}
.alpha-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:0 0 12px}
[data-alpha-claim].sure{filter:hue-rotate(250deg) saturate(1.4)}
/* Divino (28/09, dono): 7ª raridade, acima do Mítico. Branco celeste com brilho ciano e texto que cintila. */
.r6{color:#7ff6ff}.it-card.r6{color:#7ff6ff}.r6.has{--rc:#7ff6ff}.ithumb.r6{--rc:#7ff6ff}.cx.r6{--rc:#7ff6ff}.fs.r6{--rc:#7ff6ff}
.inv-quick .chip.iq.r6{color:#7ff6ff}
.reveal-in.r6 .ithumb img,.reveal-in.r6 img{filter:drop-shadow(0 0 26px #7ff6ff) drop-shadow(0 0 8px #fff)}
.r6 .ithumb img,.ithumb.r6 img{filter:drop-shadow(0 0 4px #7ff6ff) drop-shadow(0 0 2px #fff)}
.inv-it.r6{box-shadow:inset 0 0 0 1px rgba(127,246,255,.9),0 0 14px rgba(127,246,255,.45);animation:divGlow 2.4s ease-in-out infinite}
@keyframes divGlow{50%{box-shadow:inset 0 0 0 1px #fff,0 0 20px rgba(127,246,255,.7)}}
span.r6,b.r6,.it-name.r6,.ifs-n.r6{background:linear-gradient(100deg,#7ff6ff 0%,#fff 40%,#ffe9a8 55%,#7ff6ff 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cxShine 3s linear infinite}
.cx.r6.opened .cx-bg{background:radial-gradient(circle at 50% 55%,rgba(127,246,255,.8) 0,rgba(255,233,168,.35) 30%,rgba(0,40,60,.5) 45%,transparent 68%)}
.cx.show.r6 .cx-banner{background:linear-gradient(100deg,#e8ffff 0%,#7ff6ff 30%,#fff 45%,#ffe9a8 60%,#3fb8c8 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 16px #7ff6ff);animation:cxBanner .7s .15s cubic-bezier(.2,1.6,.4,1) forwards,cxShine 2s 1s linear infinite}
.cx.done.r6 .cx-banner{animation:cxShine 2s linear infinite;opacity:1}
/* Criação no Ferreiro (28/09): receitas de acessórios exclusivos com os espólios */
.cr-grid .cr-cell img{width:44px;height:44px;image-rendering:pixelated;object-fit:contain}
.cr-grid .cr-cell.ready{box-shadow:inset 0 0 0 1px rgba(111,211,106,.8),0 0 10px rgba(111,211,106,.25)}
.cr-grid .cr-cell.ready .lv{color:#6fd36a}
.fu.cr .cr-out{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:12px;padding:8px 12px;width:100%;max-width:none;text-align:left}
.fu.cr .cr-out img{grid-row:1/3;width:60px;height:60px;image-rendering:pixelated;filter:drop-shadow(0 0 8px rgba(255,182,64,.45))}
.fu.cr .cr-out span{font-weight:800;color:#ffd66b;font-size:16px}.fu.cr .cr-out small{color:var(--muted)}
.fu.cr .q-d{font-size:12px;margin:4px 0}
.cr-needs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px;margin:8px 0;width:100%}
.cr-need{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:8px;background:rgba(255,80,80,.08);border:1px solid rgba(255,90,90,.25)}
.cr-need.ok{background:rgba(111,211,106,.08);border-color:rgba(111,211,106,.35)}
.cr-need img{width:22px;height:22px;image-rendering:pixelated}.cr-need span{flex:1}.cr-need b{color:#ff8080}.cr-need.ok b{color:#8fe28a}
.cr-odds{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}.cr-odds span{padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.05);font-size:12px}
.cr-res{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px}.cr-res .fg-res{margin:0}
/* Indicação (28/09): janela Indicar e a moldura do Recrutador */
.ar-av.fr-recrutador,.fr-recrutador{box-shadow:0 0 0 2px #ffd66b,0 0 0 4px #2f9e57,0 0 12px rgba(80,220,140,.55);border-radius:6px}
.ref p{margin:0 0 10px}
.ref-link{display:flex;align-items:center;gap:8px;padding:8px 10px;margin:0 0 10px;flex-wrap:wrap}
.ref-link code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#ffd66b}
.ref-tier{display:flex;align-items:center;gap:12px;padding:8px 12px;margin:0 0 6px}
.ref-tier>div:first-child{flex:1}.ref-tier b{display:block}.ref-tier small{color:var(--muted)}
.ref-tier.ok{border-color:#6fd36a}.ref-tier.done{opacity:.75}
.ref-bar{position:relative;width:140px;height:16px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden}
.ref-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#2f9e57,#6fd36a)}
.ref-bar b{position:relative;display:block;text-align:center;font-size:11px;line-height:16px}
.ref-got{color:#6fd36a;font-weight:800}
.ref .buy.big{width:100%;margin:6px 0 10px}
.ref-list{display:grid;gap:4px;max-height:260px;overflow:auto}
.ref-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.04)}
.ref-row b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.ref-row small{color:var(--muted);font-size:11px}
.ref-row.ok small{color:#6fd36a}.ref-vip{font-size:10px;font-weight:800;color:#1b1206;background:#ffd66b;border-radius:4px;padding:0 4px}
/* Banner do voto no TopIdle (28/09): no alto do jogo, no centro; some ao votar ou no × (6 h) */
.votebar{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 10px;border-radius:12px;background:rgba(12,16,24,.9);box-shadow:0 0 0 1px rgba(255,214,107,.55),0 6px 20px rgba(0,0,0,.45);white-space:nowrap;animation:vbIn .4s ease}
.votebar[hidden]{display:none}
.votebar img{width:26px;height:26px;image-rendering:pixelated}
.votebar span{display:flex;flex-direction:column;line-height:1.15}.votebar b{color:#ffd66b;font-size:13px}.votebar small{color:#dfe7ef;font-size:11px}
.votebar .vb-x{background:none;border:0;color:#9aa6b2;font-size:18px;line-height:1;cursor:pointer;padding:0 4px}.votebar .vb-x:hover{color:#fff}
.hf.dock .votebar{left:calc(var(--dl) + (100vw - var(--dl) - var(--dr)) / 2);top:calc(var(--dt) + 12px)}
.hf.app .votebar{top:78px;max-width:calc(100vw - 24px)}
.renewbar{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:10px;padding:7px 8px 7px 10px;border-radius:12px;background:linear-gradient(135deg,rgba(70,48,8,.95),rgba(12,16,24,.94) 70%);box-shadow:0 0 0 1px rgba(255,214,107,.75),0 0 18px rgba(255,200,80,.25),0 6px 20px rgba(0,0,0,.45);cursor:pointer;max-width:min(560px,calc(100vw - 24px));animation:vbIn .4s ease;pointer-events:auto}
.renewbar[hidden]{display:none}
.renewbar img{width:30px;height:30px;flex:none;image-rendering:pixelated}
.renewbar span{display:flex;flex-direction:column;min-width:0;line-height:1.2}.renewbar b{color:#ffd66b;font-size:14px}.renewbar small{color:#dfe7ef;font-size:11.5px}
.renewbar .vb-x{flex:none;background:none;border:0;color:#9aa6b2;font-size:20px;line-height:1;cursor:pointer;padding:0 4px}.renewbar .vb-x:hover{color:#fff}
.renewbar:hover{box-shadow:0 0 0 1px #ffd66b,0 0 22px rgba(255,200,80,.4),0 6px 20px rgba(0,0,0,.45)}
.hf.dock .renewbar{left:calc(var(--dl) + (100vw - var(--dl) - var(--dr)) / 2);top:calc(var(--dt) + 12px)}
.hf.app .renewbar{top:78px;width:max-content;max-width:calc(100vw - 24px)}
.hf.app .renewbar b{font-size:13px}
.hf:has(.renewbar:not([hidden])) .votebar{display:none!important}
.hf:has(.veil:not([hidden])) .renewbar,.hf:has(.jailbar:not([hidden])) .renewbar{display:none!important}
@keyframes vbIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
/* Quadro Party no jogo (28/09, estilo MU): canto de cima à esquerda, embaixo do "online" */
.partybox{position:absolute;left:8px;top:70px;z-index:5;width:176px;padding:6px 8px;border-radius:10px;background:rgba(8,11,16,.78);box-shadow:inset 0 0 0 1px rgba(125,255,154,.35);font-size:11px;color:#dfe7ef}
.partybox[hidden]{display:none}
/* 05/10 (dono: "passar o ícone do grupo para a mesma linha do mapa, na frente dele"): placeParty (hud.js) põe o quadro logo à
direita da pílula do mapa; este é o lugar quando a pílula some (Arena, evento). */
.hf.dock .partybox{left:calc(var(--dl) + 16px);top:calc(var(--dt) + 44px)}
.pb-h{display:flex;align-items:center;gap:6px;margin:0 0 4px}.pb-h b{color:#7dff9a;flex:1}.pb-h .num{color:#9aa6b2}
.pb-x{background:rgba(255,90,90,.15);border:1px solid rgba(255,90,90,.45);color:#ffb3b3;border-radius:6px;font-size:10px;padding:1px 6px;cursor:pointer}
.pb-m{margin:3px 0}.pb-m.off{opacity:.5}.pb-m.me .pb-n b{color:#ffd66b}
.pb-n{display:flex;justify-content:space-between;gap:6px}.pb-n b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pb-n .num{color:#9aa6b2}
.pb-hp{height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:2px}.pb-hp i{display:block;height:100%;background:linear-gradient(90deg,#3cbf5a,#7dff9a)}
.pb-m small{color:#9aa6b2;font-size:10px}.pb-f{margin-top:5px;color:#b7f28a;font-size:10px}
/* 28/09: com o botão Indicar a fileira do topo ficou com 8 botões e, em telas até ~1760 px, encostava nos contadores de moeda
(o "+" do diamante ficava embaixo do Doar), em qualquer largura. Botões mais estreitos; em telas pequenas só o ícone (o nome fica no title). */
.hf.dock .topnav{gap:4px}.hf.dock .topnav .navbtn{width:50px}.hf.dock .topnav .navbtn span{font-size:9.5px}
@media (max-width:1480px){.hf.dock .topnav .navbtn{width:42px;height:44px}.hf.dock .topnav .navbtn span{display:none}.hf.dock .topnav .navbtn img{width:26px;height:26px}}
.hf.dock .topnav:has(.nb-gm:not([hidden])) .navbtn{width:45px}.hf.dock .topnav:has(.nb-gm:not([hidden])) .navbtn span{font-size:9px}
/* 28/09: com uma janela aberta (Indicar, Loja…), o quadro do grupo e a faixa de voto não ficam por cima dela. */
.hf:has(.veil:not([hidden])) .partybox,.hf:has(.veil:not([hidden])) .votebar{display:none!important}
/* Atributos (28/09): campo para digitar quantos pontos e botão Máx (todos os livres). */
.arow{grid-template-columns:1fr 60px 30px 58px 30px 44px}
.arow .attr-n{width:58px;height:30px;padding:0 6px;text-align:center;font-size:15px;font-weight:700;-moz-appearance:textfield}
.arow .attr-n::-webkit-outer-spin-button,.arow .attr-n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.arow .attr-n[disabled]{opacity:.35}
.arow .mini.max{width:44px;font-size:12px;font-weight:800}
.hf.app .arow{grid-template-columns:1fr 40px 38px 52px 38px 46px;gap:5px;padding:8px}
.hf.app .arow .mini{width:38px;height:40px}.hf.app .arow .mini.max{width:46px;font-size:12px}.hf.app .arow .attr-n{width:52px;height:40px}
/* Prisão (28/09): faixa do preso e formulário da equipe no cartão do jogador. */
.jailbar{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border-radius:12px;background:rgba(40,10,10,.92);box-shadow:0 0 0 1px rgba(255,110,90,.7),0 6px 20px rgba(0,0,0,.5);white-space:nowrap}
.jailbar img{width:26px;height:26px;image-rendering:pixelated}.jailbar b{display:block;color:#ffd0c4;font-size:14px}.jailbar small{display:block;color:#f3b0a0;font-size:11.5px;max-width:420px;overflow:hidden;text-overflow:ellipsis}
.hf.dock .jailbar{left:calc(var(--dl) + (100vw - var(--dl) - var(--dr)) / 2);top:calc(var(--dt) + 12px)}
.jailbar[hidden]{display:none} /* 29/09: sem isto a faixa da prisão aparecia vazia (pílula vermelha no topo) para todo mundo */
.hf.app .jailbar{top:78px;max-width:calc(100vw - 24px)}
.hf:has(.jailbar:not([hidden])) .votebar{display:none!important}
.plcard .iv-b.jail-on{display:block;min-width:270px}.plcard .jail-f{display:flex;flex-direction:column;gap:6px}.plcard .jail-f>b{color:#ffb4a4}
.plcard .jail-f .jf-r{display:flex;gap:6px}.plcard .jail-f select,.plcard .jail-f input{flex:1;min-width:0}
/* Guild (29/09): emblema 8x8 (editor do líder e onde aparece) e cargo em lista. */
/* 07/10: ".hf img" (image-rendering:auto) ganhava e o emblema saía borrado em todo lugar. */
.hf img.gmark{image-rendering:pixelated}
.gmark{image-rendering:pixelated;flex:none;border-radius:3px;box-shadow:0 0 0 1px rgba(214,170,90,.45);background:rgba(0,0,0,.25)}
.gmark.gd-mk{width:56px;height:56px}.gmark.big{width:160px;height:160px}
.gm-view{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 0}
.gm-edit{display:flex;flex-direction:column;gap:10px}
.gm-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
/* 07/10: quadro 16x16 (o 8x8 tinha quadrados grandes demais), com o contorno do pincel por cima. */
.gm-grid{--n:16;position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);width:max(240px,min(368px,86vw,calc(100vh - 446px)));flex:none;aspect-ratio:1;touch-action:none;user-select:none;border:2px solid rgba(214,170,90,.55);border-radius:4px;background:repeating-conic-gradient(#2a3140 0 25%,#1f2530 0 50%) 0 0/calc(200%/var(--n)) calc(200%/var(--n));cursor:crosshair}
.gm-grid i{border:1px solid rgba(255,255,255,.07)}
.gm-grid i:nth-child(16n+9){border-left-color:rgba(255,255,255,.2)}.gm-grid i:nth-child(n+129):nth-child(-n+144){border-top-color:rgba(255,255,255,.2)}
.gm-cur{position:absolute;pointer-events:none;border:2px solid #ffd66b;box-shadow:0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.5);border-radius:2px}
.gm-side{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 260px;max-width:300px}
.gm-top{display:flex;gap:10px;align-items:flex-start}
.gm-tools{display:flex;flex-direction:column;gap:6px;min-width:0}
.gm-lb{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#c9b48a}
.gm-prev{width:120px;height:120px;flex:none;display:grid;place-items:center;border-radius:6px;box-shadow:0 0 0 1px rgba(214,170,90,.45);background:repeating-conic-gradient(#2a3140 0 25%,#1f2530 0 50%) 0 0/18px 18px}
/* 07/10 20:28 (print do jogador: o desenho aparecia no canto de cima da tela enquanto desenhava): a página do jogo tinha
"canvas{position:fixed;inset:0}" para o canvas do Godot, e isso pegava as prévias do emblema. */
.gm-prev canvas,.gm-nm canvas{position:static;inset:auto;display:block}
.gm-prev canvas{width:120px;height:120px;image-rendering:pixelated}
.gm-nm{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.35);max-width:100%;min-width:0}
.gm-nm canvas{width:28px;height:28px;flex:none;image-rendering:pixelated}
.gm-nm b{font-size:13px;color:#fff;text-shadow:0 1px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-br{display:flex;gap:6px}
.gm-b{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;width:44px;height:44px;padding:4px;border-radius:6px;border:2px solid rgba(255,255,255,.18);background:rgba(0,0,0,.3);color:#e8dcc0;cursor:pointer}
.gm-b i{display:block;background:#e8dcc0;border-radius:1px}
.gm-b span{font-size:10px}
.gm-b.on{border-color:#ffd66b;box-shadow:0 0 0 2px rgba(255,214,107,.5)}
.gm-pal{display:grid;grid-template-columns:repeat(8,30px);gap:5px}
.gm-pal .sw{width:30px;height:30px;border-radius:5px;border:2px solid rgba(255,255,255,.18);cursor:pointer;padding:0}
.gm-pal .sw.on{border-color:#ffd66b;box-shadow:0 0 0 2px rgba(255,214,107,.5)}
.gm-pal .sw.er{background:repeating-conic-gradient(#39414f 0 25%,#262c38 0 50%) 0 0/10px 10px}
/* Ranking das guilds (08/10 17:32, dono: "ajustar esse nome da ranking"): o emblema caía na coluna larga e empurrava o nome para a
direita. Agora: posição, emblema (ou o espaço dele) e o nome logo depois, todos alinhados. */
.lrow.gd-rk,.hf.app .lrow.gd-rk{grid-template-columns:40px 32px minmax(0,1fr)}
.gd-rk .gmark{width:32px;height:32px}
.gd-rk .gd-nomark{display:block;border-radius:4px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(214,170,90,.12)}
.gd-rkt{min-width:0}.gd-rkt .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-role{width:auto;min-width:0;max-width:150px}
/* Poder especial (29/09): botão R entre as skills e o AUTO; enche de baixo para cima e brilha quando está cheio. */
.powr{position:relative;width:66px;height:66px;display:grid;place-items:center;overflow:hidden;cursor:pointer;--p:0%}
.powr .pw-fill{position:absolute;left:6px;right:6px;bottom:6px;height:calc((100% - 12px) * var(--p) / 100%);max-height:calc(100% - 12px);border-radius:4px;background:linear-gradient(0deg,rgba(255,140,30,.75),rgba(255,214,107,.35));transition:height .3s}
.powr img{position:relative;width:40px;height:40px;image-rendering:pixelated;filter:grayscale(.55) brightness(.8)}
.powr b{position:absolute;left:0;right:0;bottom:3px;text-align:center;font-size:10px;color:#ffe7a6;text-shadow:0 1px 0 #000}
/* Tecla R (06/10, dono: "colocar o R igual os outros para ficar padrão"): o mesmo círculo dourado das teclas 1, 2 e 3, no canto de
baixo à direita (o botão deixa a bolinha sair da borda, como nas habilidades; a barra de carga continua dentro). */
.powr{overflow:visible;--bw:14px}
.mk2 .powr{--bw:12px}
/* o botão tem a moldura (fr-slot, 14 px): a bolinha sai da borda de fora, como nas habilidades (que não têm moldura). */
.powr .key{position:absolute;right:calc(-3px - var(--bw));bottom:calc(-3px - var(--bw));width:22px;height:22px;border-radius:50%;background:#101826;border:2px solid #c9a15a;font-size:12px;font-weight:700;line-height:18px;text-align:center;color:inherit;z-index:2;pointer-events:none}
.hf:not(.app) .powr .key{width:20px;height:20px;font-size:11px;line-height:16px}
.powr.full img{filter:none}
.powr.full{animation:pwGlow 1s ease-in-out infinite}
.powr.full b{color:#fff;font-weight:900}
.powr.fired{animation:pwFire .5s ease-out}
@keyframes pwGlow{50%{box-shadow:0 0 14px 4px rgba(255,200,80,.9);filter:brightness(1.2)}}
@keyframes pwFire{0%{transform:scale(1.25);filter:brightness(2)}100%{transform:none}}
.hf.app .powr{position:absolute;right:157px;bottom:74px;width:52px;height:52px}
.hf.app .powr img{width:30px;height:30px}
@media (prefers-reduced-motion:reduce){.powr.full,.powr.fired{animation:none}}
/* Efeitos das habilidades (29/09): Todos / Só os meus / Nenhum */
.fxpick{display:flex;flex-direction:column;gap:6px}
.fxpick-o{display:flex;flex-wrap:wrap;gap:6px}
.fxpick-o label{cursor:pointer}
.fxpick-o input{position:absolute;opacity:0;pointer-events:none}
.fxpick small{line-height:1.4}
.fxpick-o label.du-tab{display:inline-flex;align-items:center;padding:0 14px;height:36px}
.presence .netst b{font-weight:800}
/* Relíquia (29/09): espaço dos acessórios da Criação, embaixo no meio, entre as poções. */
.inv-mid{display:flex;justify-content:center;align-items:center}
.inv-doll .inv-mid .inv-slot:not(.pot){width:64px;height:64px}
.hf.app .inv-doll .inv-mid .inv-slot:not(.pot){width:56px;height:56px}
.hf.app.is-portrait .inv-doll .inv-mid .inv-slot:not(.pot){width:100%;max-width:54px;height:auto}
/* Celular (29/09, dono): número 1, 2 e 3 nas habilidades para diferenciar do ataque básico (o botão redondo grande, sem número). */
.hf.app .skill .k:not(.wide){display:block;width:20px;height:20px;right:-3px;bottom:-3px;font-size:12px;line-height:16px;z-index:2;pointer-events:none}
.hf.app .powr .key{width:20px;height:20px;font-size:12px;line-height:16px}
/* ---------- Eventos (29/09): cards de evento (ao vivo grande; hoje/semana em cartões com a cor do portal) ---------- */
.ev{display:flex;flex-direction:column;gap:12px;padding:2px 0 8px}
.ev-sec{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:12px;font-weight:700;letter-spacing:1.2px;color:#f2c14e}
.ev-sec.live{color:#ff7a6e}
.ev-sec.live i{width:9px;height:9px;border-radius:50%;background:#ff5a4e;animation:evdot 1.2s ease-in-out infinite}
@keyframes evdot{50%{opacity:.35}}
.ev-none{padding:12px 14px;border-radius:12px;background:rgba(8,12,20,.55);border:1px dashed rgba(214,170,90,.3);color:var(--muted,#9aa6b8);font-size:13px}
.ev-big{border-radius:16px;overflow:hidden;border:1px solid color-mix(in srgb,var(--ec) 60%,transparent);background:#111c31;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ev-hero{height:150px;display:flex;align-items:flex-end;justify-content:space-between;padding:12px 14px;box-sizing:border-box;background:radial-gradient(circle at 72% 60%,color-mix(in srgb,var(--ec) 45%,#0d1a2e) 0%,color-mix(in srgb,var(--ec) 18%,#0d1a2e) 45%,#0d1a2e 80%)}
.ev-hero img{width:132px;height:132px;image-rendering:pixelated;margin-right:-8px}
.ev-ht{display:flex;flex-direction:column;gap:6px;min-width:0}
.ev-live{white-space:nowrap;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:#c2362c;color:#fff;font-size:11px;font-weight:700;letter-spacing:.6px}
.ev-live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:evdot 1.2s ease-in-out infinite}
.ev-title{font-family:"HF Title","Alegreya SC",Georgia,serif;font-weight:800;font-size:22px;color:#fff;text-shadow:0 2px 0 #000;line-height:1.1}
.ev-sub{font-size:13px;color:#cfe8ff}
.ev-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}
.ev-hp{display:flex;justify-content:space-between;font-size:12px;color:#9aa6b8}.ev-hp b{color:#e8edf5}
.ev-bar{height:10px;border-radius:6px;background:#0a1120;border:1px solid #243352;overflow:hidden}.ev-bar i{display:block;height:100%;background:linear-gradient(90deg,#c2362c,#ff6b5e)}
.ev-info{margin:0;font-size:13px;color:#b7c1d3;line-height:1.45}
.ev-chips{display:flex;flex-wrap:wrap;gap:6px}
.ev-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:#0d1628;border:1px solid #25355a;font-size:12px}
.ev-chip img{width:18px;height:18px;image-rendering:pixelated}.ev-chip.dim{color:#9aa6b8}
.ev-go{width:100%;height:46px;font-size:15px}
.ev-low{margin:0;font-size:13px;color:#ff9a8e}
.ev-card{display:flex;gap:12px;padding:12px;border-radius:14px;background:#111c31;border:1px solid color-mix(in srgb,var(--ec) 45%,transparent)}
.ev-art{width:76px;height:76px;flex-shrink:0;border-radius:12px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,color-mix(in srgb,var(--ec) 35%,#10152a) 0%,#0f1426 75%)}
.ev-art img{max-width:70px;max-height:70px;image-rendering:pixelated}
.ev-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ev-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ev-kind{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:color-mix(in srgb,var(--ec) 75%,#fff)}
.ev-when{flex-shrink:0;padding:2px 8px;border-radius:999px;background:#0a1120;border:1px solid #2b3b5e;font-size:11px;font-weight:700;color:#e8edf5}
.ev-name{font-family:"HF Title","Alegreya SC",Georgia,serif;font-weight:700;font-size:16px;color:#fff}
.ev-d{font-size:12px;color:#9aa6b8}
.ev-prize{display:flex;align-items:center;gap:5px;font-size:12px;color:#ffe7a6}.ev-prize img{width:18px;height:18px;image-rendering:pixelated}
.ev-remind{margin-top:4px;height:36px;border-radius:10px;border:1px solid rgba(214,170,90,.5);background:#16223a;color:#f2c14e;font:700 13px "HF Sans","Signika",system-ui,sans-serif;cursor:pointer}
.ev-remind.on{background:#1f3a24;border-color:#4fe07a;color:#9ff0b0}
.ev-week{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.ev-foot{margin:4px 0 0}
.navbtn.nb-ev .badge[data-n="0"]{display:none}
/* Eventos no formato do desenho (29/09, dono: "quero exatamente assim"): abas no alto, card grande à esquerda (ao vivo ou o
próximo) e grade de cards à direita, cada um com a faixa de cima colorida pela cor do portal. */
.ev-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ev-tab{height:36px;padding:0 16px;border-radius:10px;border:1px solid rgba(214,170,90,.3);background:#0f1829;color:#b7c1d3;font:600 14px "HF Sans","Signika",system-ui,sans-serif;cursor:pointer}
.ev-tab.on{border-color:#f2c14e;background:#2a2412;color:#f2c14e;font-weight:700}
.ev-tz{margin-left:auto;font-size:12px;color:#9aa6b8}
.ev-cols{display:flex;flex-direction:column;gap:14px}
.ev-left,.ev-right{display:flex;flex-direction:column;gap:12px;min-width:0}
.ev-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ev-foot2{display:flex;flex-direction:column}
.ev-live.soon{background:#2a2412;color:#f2c14e;border:1px solid rgba(242,193,78,.6);text-transform:uppercase;white-space:nowrap}
.ev-go.on{background:#1f3a24;border-color:#4fe07a;color:#9ff0b0}
.ev-desk .ev-cols{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.5fr);gap:18px;align-items:stretch}
.ev-desk .ev-big{height:100%;display:flex;flex-direction:column}
.ev-desk .ev-hero{height:auto;min-height:250px;padding:18px 20px}
.ev-desk .ev-hero img{width:190px;height:190px}
.ev-desk .ev-title{font-size:30px}
.ev-desk .ev-body{flex:1;padding:16px 20px 20px;gap:14px}
.ev-desk .ev-foot2{margin-top:auto}
.ev-desk .ev-go{height:52px;font-size:17px}
.ev-desk .ev-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:start}
.evc{border-radius:16px;overflow:hidden;background:#111c31;border:1px solid color-mix(in srgb,var(--ec) 50%,transparent);display:flex;flex-direction:column}
.evc-h{min-height:104px;display:flex;align-items:center;gap:12px;padding:10px 14px;box-sizing:border-box;background:radial-gradient(circle at 18% 50%,color-mix(in srgb,var(--ec) 38%,#10152a) 0%,color-mix(in srgb,var(--ec) 12%,#0f1426) 70%)}
.evc-h>img{width:80px;height:80px;flex-shrink:0;object-fit:contain;image-rendering:pixelated}
.evc-ht{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.evc-n{font-family:"HF Title","Alegreya SC",Georgia,serif;font-weight:800;font-size:19px;line-height:1.1;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.6)}
.evc-h .ev-when{align-self:flex-start;margin-top:4px;background:rgba(5,10,20,.75)}
.evc-b{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px}
.evc-b .ev-remind{margin-top:2px;height:38px;font-size:14px}
/* ---------- Meu visual e Loja › Visual (29/09): títulos com brilho, molduras novas, asas e auras, Pacote de Iniciante ---------- */
.ar-title.g-gold{color:#fff1a8;border-color:rgba(255,200,60,.8);background:rgba(255,190,40,.16);animation:ttGlow 1.8s ease-in-out infinite;--tg:rgba(255,190,40,.9)}
.ar-title.g-silver{color:#f4f7ff;border-color:rgba(200,215,255,.8);background:rgba(190,210,255,.14);animation:ttGlow 1.8s ease-in-out infinite;--tg:rgba(170,200,255,.9)}
.ar-title.g-bronze{color:#ffd2a6;border-color:rgba(220,130,60,.8);background:rgba(220,120,50,.16);animation:ttGlow 1.8s ease-in-out infinite;--tg:rgba(230,130,60,.9)}
.ar-title.g-red{color:#ffc2b8;border-color:rgba(255,70,60,.8);background:rgba(255,50,40,.14);animation:ttGlow 1.8s ease-in-out infinite;--tg:rgba(255,50,40,.9)}
.ar-title.g-purple{color:#ecd2ff;border-color:rgba(180,100,255,.8);background:rgba(160,80,255,.16);animation:ttGlow 1.8s ease-in-out infinite;--tg:rgba(170,80,255,.9)}
.ar-title.g-cyan{color:#dcfdff;border-color:rgba(70,220,255,.8);background:rgba(60,210,255,.14);animation:ttGlow 1.8s ease-in-out infinite;--tg:rgba(60,215,255,.9)}
.ar-title.g-fire{color:#ffe0a0;border-color:rgba(255,110,30,.85);background:linear-gradient(90deg,rgba(255,80,20,.2),rgba(255,190,40,.2));animation:ttGlow 1.4s ease-in-out infinite;--tg:rgba(255,100,30,.95)}
.ar-title.g-green{color:#d2ffe0;border-color:rgba(60,220,120,.8);background:rgba(50,210,110,.14);animation:ttGlow 1.8s ease-in-out infinite;--tg:rgba(50,220,110,.9)}
@keyframes ttGlow{0%,100%{box-shadow:0 0 3px var(--tg);text-shadow:0 0 3px var(--tg)}50%{box-shadow:0 0 10px var(--tg);text-shadow:0 0 8px var(--tg)}}
@media (prefers-reduced-motion:reduce){.ar-title[class*=" g-"]{animation:none}}
.ar-av.fr-ouro,.fr-ouro{box-shadow:0 0 0 2px #fff0a0,0 0 0 4px #d99a14,0 0 14px rgba(255,200,60,.75);border-radius:6px}
.ar-av.fr-gelo,.fr-gelo{box-shadow:0 0 0 2px #e8fbff,0 0 0 4px #3aa6e0,0 0 14px rgba(120,220,255,.7);border-radius:6px}
.ar-av.fr-sombra,.fr-sombra{box-shadow:0 0 0 2px #c79bff,0 0 0 4px #3a1466,0 0 14px rgba(150,70,255,.7);border-radius:6px}
.ar-av.fr-divina,.fr-divina{box-shadow:0 0 0 2px #fffbe6,0 0 0 4px #7ff6ff,0 0 16px rgba(127,246,255,.8);border-radius:6px;animation:frDiv 2.2s ease-in-out infinite}
@keyframes frDiv{50%{box-shadow:0 0 0 2px #fff,0 0 0 4px #ffd66b,0 0 22px rgba(255,214,107,.9)}}
.vz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-bottom:10px}
.vz-card{display:grid;grid-template-columns:72px 1fr;grid-template-rows:1fr auto;gap:6px 10px;padding:8px;border-width:10px;border-image-width:10px}
.vz-card.own{box-shadow:0 0 0 2px rgba(111,211,106,.55) inset}
.vz-card .vz-b{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center}
.vz-art{width:68px;height:68px;display:grid;place-items:center}.vz-art>img{width:64px;height:64px;image-rendering:pixelated;object-fit:contain}
.vz-art .ar-title{margin:0;font-size:11px;white-space:nowrap}
.vz-fr{display:inline-block;width:48px;height:48px;overflow:hidden;background:#0d1628}.vz-fr img{width:48px;height:48px;image-rendering:pixelated}
.vz-t b{display:block;font-size:14px;color:#f3e3bd}.vz-t small{display:block;color:var(--muted);font-size:12px;line-height:1.3}
.vz-row{display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:center;padding:4px 10px;margin-bottom:6px;border-width:10px;border-image-width:10px}
.vz-row.on{box-shadow:0 0 0 2px #6fd36a inset}
.vz-none{color:var(--muted);font-size:22px}
.hf.app .vz-grid{grid-template-columns:1fr}
.starter{position:relative;display:grid;grid-template-columns:1fr;gap:8px;padding:12px 14px;margin:0 0 12px;border-width:12px;border-image-width:12px;box-shadow:0 0 0 2px rgba(255,200,60,.55) inset,0 0 18px rgba(255,190,40,.25)}
.starter .ribbon{position:absolute;top:-6px;right:12px}
.starter .st-l{display:flex;gap:12px;align-items:center}.starter .st-ic{width:56px;height:56px;image-rendering:pixelated}
.starter .st-l p{margin:2px 0 0}.starter s{opacity:.8}
.st-items{display:flex;flex-wrap:wrap;gap:6px}
.st-it{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:rgba(13,22,40,.8);border:1px solid #2b3b5e;font-size:12.5px}
.st-it img{width:20px;height:20px;image-rendering:pixelated}
.st-buy{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.st-buy .prices b{font-size:22px;color:#ffe27a}.st-buy .prices span{display:block;color:var(--muted);font-size:12px}
.starter .pays{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px;min-width:min(100%,330px)}.starter .pays .buy{height:38px}
.hf.app .st-buy{flex-direction:column;align-items:stretch}.hf.app .starter .pays{min-width:0}
/* Quadro do grupo recolhido (29/09) e idioma das Novidades */
.pb-x.pb-hide{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#dfe7ef;font-size:12px;line-height:1;padding:1px 7px}
.partybox.min{width:auto;padding:0;background:none;box-shadow:none}
.pb-open{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(8,11,16,.78);border:1px solid rgba(125,255,154,.45);color:#dfe7ef;font:inherit;font-size:11px;cursor:pointer}
.pb-open b{color:#7dff9a}.pb-open .num{color:#9aa6b2}.pb-open i{font-style:normal;color:#7dff9a}
.nw-lang{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}.nw-lang span{color:var(--muted);font-size:12.5px;margin-right:2px}.nw-lang .du-tab{height:32px;padding:0 12px;font-size:12.5px}
/* Poções de bônus (29/09) */
.bst{display:inline-flex;align-items:center}.bst[hidden]{display:none}
.bst-b{display:inline-flex;align-items:center;gap:3px;background:none;border:0;padding:0 2px;color:#dfe7ef;font:inherit;cursor:pointer}
.bst-b img{width:16px;height:16px;image-rendering:pixelated;animation:bstPulse 2s ease-in-out infinite}.bst-b b{font-size:11px;color:#b8ffcb}
@keyframes bstPulse{50%{filter:drop-shadow(0 0 4px rgba(125,255,154,.9))}}
.bst-use{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 6px;font-size:12px;color:var(--muted)}
.inv-bst{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;margin:6px 0}
.bst-row{display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;padding:4px 8px;border-width:8px;border-image-width:8px}
.bst-row img{width:30px;height:30px;image-rendering:pixelated}.bst-row b{display:block;font-size:13px;color:#f3e3bd}.bst-row small{display:block;color:var(--muted);font-size:11px}
/* Janela Heróis (29/09, dono): papel em destaque e barras de atributo */
.hc-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding-top:30px!important;text-align:center;--rc:#ff6b5a}
.hc-card.role-tank{--rc:#5aa6ff}.hc-card.role-healer{--rc:#4fe07a}.hc-card.role-assassin{--rc:#c07bff}.hc-card.role-dps{--rc:#ff6b5a}
.hc-role{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;padding:2px 10px 2px 6px;border-radius:999px;background:color-mix(in srgb,var(--rc) 22%,#0b1220);border:1px solid var(--rc);color:#fff;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;box-shadow:0 0 10px color-mix(in srgb,var(--rc) 45%,transparent)}
.hc-role img{width:18px;height:18px;image-rendering:pixelated}
.hc-pic{align-self:center;width:72px;height:72px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rc) 30%,transparent) 0%,transparent 70%)}
.hc-card .hc-pic .ic{width:60px;height:60px;margin:0}
.hc-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:2px 0}
.hc-tag{font-size:10.5px;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#dfe7ef}
.hc-tag.dim{color:var(--muted);border-color:transparent;background:none;padding:0 2px;width:100%}
.hc-stats{display:grid;gap:3px;margin:4px 0 8px;text-align:left}
.hc-st{display:grid;grid-template-columns:16px 34px 1fr 34px;align-items:center;gap:5px;font-size:11px;color:#b7c1d3}
.hc-st img,.hc-st>i{width:16px;height:16px;image-rendering:pixelated}
.hc-st span{font-weight:700;letter-spacing:.4px}.hc-st b{text-align:right;color:#f3f6fb;font-size:11.5px}
.hc-bar{height:7px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.hc-bar i{display:block;height:100%;border-radius:4px;background:var(--bc);box-shadow:0 0 6px var(--bc);transition:width .4s}
.st-attack{--bc:#ff6b5a}.st-defense{--bc:#5aa6ff}.st-health{--bc:#4fe07a}.st-range{--bc:#ffc94f}.st-speed{--bc:#5fe3f0}
.hc-st.st-range>i{background:radial-gradient(circle,#ffc94f 0 3px,transparent 4px)}.hc-st.st-speed>i{background:radial-gradient(circle,#5fe3f0 0 3px,transparent 4px)}
.hc-card .buy{margin-top:auto}
.hc-kit{display:flex;justify-content:center;gap:3px;margin:4px 0 2px}
.hc-sk{position:relative;width:28px;height:28px;padding:0;border-radius:6px;border:1px solid rgba(255,255,255,.14);background:#0d1628;cursor:pointer}
.hc-sk img{width:100%;height:100%;border-radius:5px;image-rendering:pixelated;display:block}
.hc-sk span{position:absolute;right:-3px;bottom:-4px;min-width:12px;padding:0 2px;border-radius:4px;background:#0b1220;border:1px solid rgba(255,255,255,.25);font-size:8.5px;line-height:11px;color:#fff;font-weight:800}
.hc-sk.on{border-color:var(--rc);box-shadow:0 0 0 1px var(--rc),0 0 8px color-mix(in srgb,var(--rc) 60%,transparent)}
.hc-sk.grp{border-color:#7dff9a88}.hc-sk.grp.on{border-color:#7dff9a;box-shadow:0 0 0 1px #7dff9a,0 0 8px rgba(125,255,154,.6)}
.hc-skd{min-height:74px;text-align:left;background:rgba(255,255,255,.04);border:1px solid color-mix(in srgb,var(--rc) 30%,transparent);border-radius:8px;padding:5px 8px;margin-bottom:4px}
.hc-skd b{display:block;font-size:12px;color:#f3e3bd}.hc-skd p{margin:2px 0 0;font-size:11.5px;line-height:1.3;color:#cfd8e6}
/* Indique amigos (29/09): prêmio em destaque e trilha de prêmios */
.rf2{display:flex;flex-direction:column;gap:10px}
.rf-hero{display:flex;align-items:center;gap:14px;padding:14px 16px;border-width:12px;border-image-width:12px;background:radial-gradient(circle at 10% 50%,rgba(255,200,60,.18),transparent 60%)}
.rf-hic{width:64px;height:64px;image-rendering:pixelated;filter:drop-shadow(0 0 10px rgba(255,200,60,.5))}
.rf-big{font-family:"HF Title","Alegreya SC",Georgia,serif;font-size:24px;font-weight:800;text-shadow:0 2px 0 #3a2208;color:#f3e3bd;line-height:1.2}.rf-big b{color:#ffd66b}.rf-big b.g{color:#7dff9a;text-shadow:0 0 8px rgba(80,220,140,.6)}
.rf-sub{color:#b7c1d3;font-size:13.5px;margin-top:4px}
.rf-link{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.rf-link code{flex:1;min-width:220px;padding:10px 12px;border-radius:8px;background:#0a1120;border:1px solid #2b3b5e;color:#ffd66b;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rf-btns{display:flex;gap:6px;flex-wrap:wrap}.rf-btns .buy{height:40px;padding:0 16px}
.rf-steps{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;color:#dfe7ef;font-size:13px}
.rf-steps span{display:inline-flex;align-items:center;gap:6px}.rf-steps b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#d9951e;color:#2a1604;font-size:12px}.rf-steps i{color:#6f7d95;font-style:normal;font-size:18px}
.rf-road{display:flex;align-items:stretch;gap:6px}.rf-arrow{align-self:center;color:#6f7d95;font-style:normal;font-size:26px}
.rf-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border-width:12px;border-image-width:12px;text-align:center}
.rf-card.ok{box-shadow:0 0 0 2px #ffd66b inset,0 0 18px rgba(255,200,60,.35)}.rf-card.done{opacity:.7}
.rf-art{height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:relative}
.rf-por{display:inline-block;width:52px;height:52px;overflow:hidden;background:#0d1628}.rf-por img{width:52px;height:52px;image-rendering:pixelated}
.rf-vip{width:58px;height:58px;image-rendering:pixelated;filter:drop-shadow(0 0 8px rgba(255,200,60,.55))}.rf-vip.big{width:66px;height:66px;filter:drop-shadow(0 0 14px rgba(255,200,60,.9))}
.rf-days{position:absolute;bottom:0;padding:1px 8px;border-radius:999px;background:linear-gradient(#ffd66b,#d9951e);color:#2a1604;font-weight:900;font-size:12px}
.rf-max{position:absolute;top:-4px;right:-10px;padding:1px 6px;border-radius:4px;background:#c2362c;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.5px}
.rf-t b{display:block;font-size:15px;color:#f3e3bd}.rf-t small{color:var(--muted);font-size:12px}
.rf-p{width:100%;display:flex;flex-direction:column;gap:4px;margin-top:auto}.rf-st{font-size:12px;color:#b7c1d3}.rf-st.ok{color:#ffd66b;font-weight:800}.rf-st.got{color:#7dff9a;font-weight:800}
.rf-claim{align-self:center;min-width:260px}.rf-note{margin:0;text-align:center}
.hf.app .rf-road{flex-direction:column}.hf.app .rf-arrow{transform:rotate(90deg)}.hf.app .rf-big{font-size:18px}.hf.app .rf-hic{width:48px;height:48px}
.rf-p .ref-bar{width:100%}
/* Para qual herói é o item (29/09): baú e fichas */
.cx-for{display:inline-flex;align-items:center;gap:8px;margin:6px auto 0;padding:4px 12px 4px 4px;border-radius:999px;background:rgba(8,12,20,.75);border:1px solid rgba(255,255,255,.2);font-size:13px;color:#e8edf5}
.cx-for img{width:30px;height:30px;border-radius:50%;background:#0d1628;image-rendering:pixelated;object-fit:cover}
.cx-for b{color:#fff}.cx-for em{font-style:normal;font-size:11px;padding:1px 7px;border-radius:999px}
.cx-for.ok{border-color:#4fe07a}.cx-for.ok em{background:rgba(79,224,122,.18);color:#7dff9a}
.cx-for.no{border-color:#ffb640}.cx-for.no em{background:rgba(255,182,64,.18);color:#ffcf7a}
.cx-for.all{border-color:#7fb2ff}
.cx-txt .cx-for{display:flex;width:max-content;max-width:100%}
/* Baús no celular (29/09): o botão Comprar chave ficava cortado na borda direita; agora desce para a linha de baixo. */
.hf.app .chest-card .cc-acts{flex-wrap:wrap}.hf.app .chest-card .cc-acts .buy{flex:1 1 100%;min-height:40px}
/* Novidades: 🌐 com busca de idioma (29/09) */
.nw-globe{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(214,170,90,.55);background:#101a2c;color:#e8edf5;font:inherit;font-size:13px;cursor:pointer}
.nw-globe span{font-size:16px}.nw-globe b{color:#ffd66b}.nw-globe i{font-style:normal;color:#9aa6b8}
.nw-pick{padding:10px;margin:0 0 10px;border-width:10px;border-image-width:10px}.nw-pick .input{width:100%;margin-bottom:8px}
.nw-langs{display:flex;flex-wrap:wrap;gap:6px}.nw-langs .du-tab{height:32px;padding:0 12px;font-size:12.5px}.nw-langs [hidden]{display:none}
.nw-wait{margin:0 0 8px}
.pb-aura{margin:4px 0 2px;padding:4px 6px;border-radius:6px;background:rgba(125,255,154,.07);border:1px solid rgba(125,255,154,.25);display:flex;flex-direction:column;gap:1px;font-size:10.5px;color:#cfe8d6}
.pb-aura b{color:#7dff9a;font-size:10.5px}.pb-aura.off{color:#9aa6b2;background:none;border-style:dashed}
.pb-aura span{display:flex;gap:4px;flex-wrap:wrap}.pb-aura i{font-style:normal;color:#fff}.pb-aura em{font-style:normal}
/* Janela Heróis 2 (29/09): 1) cartões clicáveis 2) painel do herói em campo (skin, aparência, habilidades) */
.hs-wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:start}
.hs-step{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-weight:800;color:#f3e3bd;font-size:15px}
.hs-step b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#d9951e;color:#2a1604;font-size:13px}
.hs-step small{font-weight:600;color:var(--muted);font-size:12px}
.hc-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))!important}
.hc-card[role=button]{cursor:pointer;transition:transform .12s,box-shadow .12s}
.hc-card[role=button]:hover{transform:translateY(-3px);box-shadow:0 0 0 2px var(--rc),0 10px 24px rgba(0,0,0,.45)}
.hc-card[role=button]:focus-visible{outline:2px solid #ffd66b;outline-offset:2px}
.hc-card.picking{opacity:.6;pointer-events:none}
.hc-card.sel{box-shadow:0 0 0 2px #ffd66b,0 0 18px rgba(255,200,60,.3)}
.hc-on{position:absolute;top:8px;right:8px;padding:1px 7px;border-radius:999px;background:#ffd66b;color:#2a1604;font-size:10.5px;font-weight:800}
.hc-card .hc-role{left:10px;transform:none}
.hc-foot{margin-top:auto;padding-top:4px;font-size:12px;font-weight:700}
.hc-hint{color:#ffd66b}.hc-here{color:#7dff9a}.hc-soon{color:var(--muted)}
.hc-card.locked{opacity:.75}
.hs-right{position:sticky;top:0}
.hpn{padding:12px;border-width:12px;border-image-width:12px;--rc:#ff6b5a}
.hpn.role-tank{--rc:#5aa6ff}.hpn.role-healer{--rc:#4fe07a}.hpn.role-assassin{--rc:#c07bff}
.hpn-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}.hpn-head .nm{font-size:20px}
.hpn-pic{width:84px;height:84px;display:grid;place-items:center;border-radius:12px;background:radial-gradient(circle,color-mix(in srgb,var(--rc) 30%,transparent),transparent 70%)}
.hpn-pic img{width:72px;height:72px;image-rendering:pixelated}.hpn-pic .sk-spr{width:72px;height:72px}
.hpn-sec{margin-top:10px}.hpn-sec .sec{margin:0 0 6px}
.hpn-skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.hpn-sk{display:grid;grid-template-rows:48px 2.6em 30px;justify-items:center;align-items:center;gap:4px;padding:8px 6px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);text-align:center;font-size:11.5px}
.hpn-sk.on{border-color:#7dff9a;box-shadow:0 0 0 1px #7dff9a inset}.hpn-sk.shop{border-style:dashed}
.hpn-sk>img,.hpn-sk>.sk-spr{width:48px;height:48px;image-rendering:pixelated;flex:none}.hpn-sk em{font-style:normal;color:#7dff9a;font-weight:700}.hpn-sk .buy{width:100%}
.hpn-ab{display:grid;grid-template-columns:32px 1fr;gap:8px;align-items:start;padding:5px 0;border-top:1px solid rgba(255,255,255,.06)}
.hpn-ab img{width:32px;height:32px;border-radius:6px;image-rendering:pixelated}.hpn-ab b{font-size:13px;color:#f3e3bd}.hpn-ab p{margin:1px 0 0;font-size:12px;line-height:1.3;color:#cfd8e6}
.hpn-ab.grp b{color:#7dff9a}
.hpn-key{display:inline-block;margin-left:4px;padding:0 5px;border-radius:4px;background:#0b1220;border:1px solid rgba(255,255,255,.25);font-size:10px;color:#fff;vertical-align:1px}
.hf.app .hs-wrap{grid-template-columns:1fr}.hf.app .hs-right{position:static}.hf.app .hc-grid{grid-template-columns:repeat(2,1fr)!important}
@media (max-width:1100px){.hs-wrap{grid-template-columns:1fr}.hs-right{position:static}}
.hpn .lookbox{margin:0;padding:8px;gap:10px;border-width:10px;border-image-width:10px;align-items:flex-start}
.hpn .lookbox .look-pv img{width:88px;height:88px}
.hpn .lookbox .t-title{display:none}
.hpn .lookbox .look-op{gap:6px}.hpn .lookbox .tabs{gap:4px}
.hpn .lookbox .tab{height:30px;padding:0 10px;font-size:12px}
.hpn .lookbox .tab.look-hair{width:38px;height:38px}.hpn .lookbox .tab.look-hair img{width:26px;height:26px}
.hpn .lookbox .buy{min-width:0;width:100%}
.hf.app .hpn .lookbox{flex-direction:row}
.hpn-sk>span{line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hpn-sk .buy{height:30px;min-height:0;padding:0 6px;font-size:12.5px;display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.hpn-sk .buy img{width:16px;height:16px;image-rendering:pixelated}
.hpn-sk em{align-self:center}
/* Janela do Grupo (29/09, ideia do jogador PUNISHER): cartão com o rosto do herói, borda da cor do papel e as etiquetas do
bônus que cada um dá ao grupo. Acesa = valendo agora; apagada = offline, em outro mapa ou herói repetido. */
.grupo .pt-card{--rc:#ff9a3c;grid-template-columns:44px 1fr auto;align-items:start;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 45%,transparent);border-left:3px solid var(--rc);background:linear-gradient(90deg,color-mix(in srgb,var(--rc) 10%,transparent),rgba(255,255,255,.02) 60%)}
.grupo .pt-card.r-tank{--rc:#5b9bff}.grupo .pt-card.r-healer{--rc:#3fd27a}.grupo .pt-card.r-assassin{--rc:#b77bff}.grupo .pt-card.r-dps{--rc:#ff9a3c}
.grupo .pt-card.on{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 80%,transparent),0 0 10px color-mix(in srgb,var(--rc) 25%,transparent)}
.grupo .pt-card.off{opacity:.72}
.grupo .pt-card .fr-av{position:relative;flex:none;align-self:center}
.grupo .pt-card .fr-av img{width:42px;height:42px;border-radius:6px;object-fit:cover;background:#0c1220;box-shadow:0 0 0 2px color-mix(in srgb,var(--rc) 60%,transparent)}
.grupo .pt-card.off .fr-av img{filter:grayscale(.8) brightness(.75)}
.grupo .pt-card .fr-av .dot{position:absolute;right:-3px;bottom:-3px;width:10px;height:10px;border-radius:50%;background:#6b7385;box-shadow:0 0 0 2px #121a2b}
.grupo .pt-card .fr-av .dot.on{background:#57d36a}
.grupo .pt-card .fr-btns{align-self:center;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pt-mid{min-width:0}
.pt-chips{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:5px}
.pt-chip{--cc:#ffb36b;display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 4px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.35;color:var(--cc);background:color-mix(in srgb,var(--cc) 12%,rgba(8,12,20,.6));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cc) 40%,transparent);white-space:nowrap}
.lrow .pt-chip img,.pt-chip img{width:14px;height:14px;image-rendering:pixelated}
.pt-chip.c-atk,.pt-chip.c-mark{--cc:#ffb36b}.pt-chip.c-boss{--cc:#ff7a6b}.pt-chip.c-crit{--cc:#d9a6ff}.pt-chip.c-mana{--cc:#7ec8ff}
.pt-chip.c-spd{--cc:#ffe06b}.pt-chip.c-dodge{--cc:#8fe3ff}.pt-chip.c-regen,.pt-chip.c-heal{--cc:#7dff9a}.pt-chip.c-def{--cc:#9fc4ff}
.pt-chip.dim{filter:grayscale(.85);opacity:.55}
.pt-note{margin-top:4px;font-size:11.5px;color:#9aa6b2}
.pt-sum{margin:8px 0 2px;padding:8px 10px;border-radius:6px;background:rgba(125,255,154,.06);box-shadow:inset 0 0 0 1px rgba(125,255,154,.28)}
.pt-sum b{color:#7dff9a;margin-right:8px}.pt-sum .q-d{font-size:12px}
.pt-sum.off{background:none;box-shadow:inset 0 0 0 1px rgba(154,166,178,.35);border:0}.pt-sum.off b{color:#cfd8e3}
.hf.app .grupo .pt-card{grid-template-columns:40px 1fr auto;gap:8px}
.hf.app .grupo .pt-card .fr-btns{flex-direction:row;gap:6px}.hf.app .grupo .pt-card .fr-btns .buy{min-width:0;padding:0 12px}
.hf.app.is-portrait .grupo .pt-card{grid-template-columns:40px 1fr}.hf.app.is-portrait .grupo .pt-card .fr-btns{grid-column:1/-1}
.hf.app .pt-chip{font-size:11px;padding:1px 6px 1px 3px}
/* Pagamento simples (29/09, dono): um botão grande (PIX no Brasil, USDC fora) e, no Brasil, o USDC num link embaixo. */
.pays.simple{display:flex!important;flex-direction:column;align-items:stretch;gap:4px;width:100%}
.pays.simple .pay-main{width:100%;height:40px;font-size:16px}
.vip-card .pays.simple .pay-main{height:38px;font-size:15px}
.pays.simple .pay-alt{align-self:center;background:none;border:0;padding:2px 4px;color:#8fc1ff;text-decoration:underline;cursor:pointer;font:600 12.5px "HF Sans","Signika",system-ui,sans-serif}
.pays.simple .pay-alt:hover{color:#bcdcff}.pays.simple .pay-alt:disabled{opacity:.5;cursor:default}
.starter .pays.simple{min-width:min(100%,260px);max-width:320px}
.hf.app .starter .pays.simple{max-width:none}
.prices .per{display:block;font-size:12.5px;color:var(--muted,#9aa6b6)}.prices .per em{font-style:normal;font-weight:700;color:#ffe27a}
/* Voto no TopIdle pelo e-mail (29/09): como votar e ligar outro e-mail do TopIdle */
.tvote .tv-how{margin:6px 0 0;font-size:12.5px}
.tv-mail{margin-top:6px;font-size:12.5px}.tv-mail summary{cursor:pointer;color:#8fc1ff;text-decoration:underline;width:max-content;max-width:100%}
.tv-mail p{margin:6px 0}.tv-mail .searchbar{display:flex;gap:6px;margin-top:4px}.tv-mail .searchbar .input{flex:1;min-width:0}
.tv-mail-on b{color:#7dff9a}.tv-mail .lnk{background:none;border:0;padding:0 2px;color:#8fc1ff;text-decoration:underline;cursor:pointer;font:inherit}
/* Duelos › Desafiar (29/09, dono): o botão Desafiar fica na linha de cada jogador (antes ficava lá embaixo, longe de quem foi clicado) */
.du-c{cursor:default}
.du-c span{flex:1}
.du-c .ondot{position:static;display:inline-block;margin:0 6px 0 0;vertical-align:0}
.du-c .du-send{flex:none;width:auto;min-width:96px;height:32px;padding:0 14px;margin-left:auto}
.du-c.on{background:rgba(47,127,224,.22);box-shadow:inset 0 0 0 2px #58a8ff}
.du-c:hover{filter:none;background:rgba(255,255,255,.07)}
.hf.app.is-portrait .du-c .du-send{min-width:84px;height:34px;padding:0 10px}
.du-tabbed .du-new .du-cands{max-height:min(60vh,560px)}
/* Loja › Visual e Meu visual (29/09, dono: "não consigo tirar a asa; está bagunçado"): cartão com uma borda só, "Em uso" + Tirar */
.vz-grid{grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:10px}
.vz-card{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid rgba(214,170,90,.2);border-image:none;border-radius:10px;background:rgba(255,255,255,.03);box-shadow:none}
.vz-card.own{box-shadow:none;border-color:rgba(214,170,90,.38)}
.vz-card.on,.vz-row.on{border-color:#5fcf6a;background:rgba(95,207,106,.08);box-shadow:0 0 12px rgba(95,207,106,.12)}
.vz-top{display:flex;gap:12px;align-items:flex-start;min-width:0}
.vz-card .vz-art,.vz-row .vz-art{flex:none;width:64px;height:64px;border-radius:8px;background:rgba(0,0,0,.28)}
.vz-card .vz-b{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;grid-column:auto}
.vz-card .vz-b .buy,.vz-rb .buy{min-width:92px;height:32px}
.vz-on{color:#7fe08f;font-weight:700;font-size:13px;white-space:nowrap}
.vz-row{display:flex;align-items:center;gap:12px;padding:8px 12px;margin-bottom:6px;border:1px solid rgba(214,170,90,.2);border-image:none;border-radius:10px;background:rgba(255,255,255,.03);box-shadow:none}
.vz-row .vz-t{flex:1;min-width:0}
.vz-rb{display:flex;align-items:center;gap:10px;flex:none}
.hf.app .vz-grid{grid-template-columns:1fr}
/* celular: enfeite numa linha (arte | nome e texto | botão), sem o vão embaixo */
.hf.app .vz-card{flex-direction:row;align-items:center;gap:10px;padding:10px}
.hf.app .vz-card .vz-top{flex:1}
.hf.app .vz-card .vz-b{flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;margin-top:0}
.hf.app .vz-card .vz-b>span:empty{display:none}
.hf.app .vz-card .vz-b .buy{min-width:84px}
/* GM no Mais do celular (29/09): só aparece para a equipe; destaque vermelho como o botão GM do PC */
.more-btn[hidden]{display:none}
.more-btn.more-gm{box-shadow:inset 0 0 0 1px rgba(255,107,94,.6);background:rgba(255,107,94,.1);color:#ffb3aa}
/* Dúvidas: link para o Manual do jogo (/manual, nova aba) */
.hp-nav a.hp-t{text-decoration:none;color:inherit}
.hp-nav a.hp-man{box-shadow:inset 0 0 0 1px rgba(242,193,78,.45);color:#ffdf8a}
.hp-nav a.hp-man i{font-style:normal;margin-left:auto;opacity:.8}
/* Radar de loot (30/09, ideia do PUNISHER): botão pequeno e quase transparente embaixo do zoom; abre uma lista discreta
do loot bom ao vivo (filtro de raridade e tipos) e recolhe no mesmo botão. */
.hf-stage > .radar{pointer-events:none}
.radar{position:absolute;right:298px;top:228px;width:40px;height:40px;--rc:#f2c14e}
.radar > *{pointer-events:auto}
.hf.dock .radar{right:calc(var(--dr) + 20px);top:218px}
.hf.app .radar{right:calc(12px + var(--sr));top:calc(var(--st) + 364px)}
.hf.app.is-landscape .radar{top:calc(var(--st) + 254px)}
.radar[data-best="1"]{--rc:#6fd36a}.radar[data-best="2"]{--rc:#58a8ff}.radar[data-best="3"]{--rc:#c77dff}.radar[data-best="4"]{--rc:#ffb640}.radar[data-best="5"]{--rc:#ff5a7a}.radar[data-best="6"]{--rc:#7ff6ff}
.rd-tab{all:unset;pointer-events:auto;box-sizing:border-box;position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;cursor:pointer;overflow:visible;
background:radial-gradient(circle,rgba(26,38,60,.92),rgba(12,18,30,.85));box-shadow:0 0 0 2px rgba(214,170,90,.8),0 2px 8px rgba(0,0,0,.55);opacity:.85;transition:opacity .2s,box-shadow .2s,transform .12s}
.rd-tab:hover,.rd-tab:focus-visible,.radar.open .rd-tab,.radar.hot .rd-tab{opacity:1}
.rd-tab:active{transform:scale(.94)}
.rd-tab:focus-visible{outline:2px solid #f2c14e;outline-offset:2px}
.rd-tab img{position:relative;z-index:1;width:22px;height:22px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 1px 1px #000)}
.rd-sw{position:absolute;inset:3px;border-radius:50%;opacity:0;background:conic-gradient(from 0deg,transparent 0 280deg,color-mix(in srgb,var(--rc) 70%,transparent) 360deg);-webkit-mask:radial-gradient(circle,transparent 42%,#000 44%);mask:radial-gradient(circle,transparent 42%,#000 44%)}
.radar.open .rd-sw{opacity:.55;animation:rdSweep 2.6s linear infinite}
.radar.hot .rd-sw{opacity:1;animation:rdSweep 1.2s linear infinite}
.radar.hot .rd-tab{box-shadow:0 0 0 2px var(--rc),0 0 14px 2px var(--rc);animation:rdHot 1.6s ease-in-out infinite}
@keyframes rdSweep{to{transform:rotate(360deg)}}
@keyframes rdHot{50%{box-shadow:0 0 0 2px var(--rc),0 0 22px 5px var(--rc)}}
.rd-n{position:absolute;z-index:2;right:-5px;top:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--rc);color:#1a1004;font-size:10.5px;line-height:17px;text-align:center;font-weight:800;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.rd-n[hidden]{display:none}
.rd-ping{position:absolute;right:46px;top:4px;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:rgba(10,15,26,.8);box-shadow:0 0 0 1px currentColor,0 0 12px currentColor;pointer-events:none;animation:rdPing 2.4s ease-out forwards}
.rd-ping img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated}
@keyframes rdPing{0%{opacity:0;transform:translateX(12px) scale(.4)}12%{opacity:1;transform:translateX(0) scale(1.15)}22%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-10px)}}
.rd-box{position:absolute;right:48px;top:0;width:236px;max-height:min(330px,52vh);display:flex;flex-direction:column;gap:5px;padding:7px 8px 8px;border-radius:10px;
background:rgba(9,14,24,.82);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:0 0 0 1px rgba(184,132,62,.6),0 6px 18px rgba(0,0,0,.5);color:#e8edf5;font-size:12.5px;animation:rdIn .18s ease-out}
@keyframes rdIn{from{opacity:0;transform:translateX(10px)}}
.rd-h{display:flex;align-items:center;gap:5px}.rd-h b{flex:1;font-size:13px;color:#f2c14e;white-space:nowrap}
.rd-b{all:unset;box-sizing:border-box;height:22px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:700;color:#d9e3f2;background:rgba(40,56,84,.9);box-shadow:inset 0 0 0 1px #3d5270;cursor:pointer}
.rd-b:hover{filter:brightness(1.2)}.rd-b.on{background:#f2c14e;color:#2a1604;box-shadow:none}.rd-b:disabled{opacity:.4;cursor:default}
.rd-now{font-size:10.5px;color:#8e9bb0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-f{display:flex;flex-direction:column;gap:4px}.rd-f small{font-size:10.5px;color:#8e9bb0}
.rd-seg{display:flex;flex-wrap:wrap;gap:3px}
.rd-seg button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 6px;border-radius:6px;font-size:11px;font-weight:700;color:#b9c6d8;background:rgba(28,40,60,.95);box-shadow:inset 0 0 0 1px #34465f;cursor:pointer}
.rd-seg button.on{color:#1d1204;background:linear-gradient(#ffd66b,#d49a2a);box-shadow:none}
.rd-seg button img{width:14px;height:14px;object-fit:contain;image-rendering:pixelated}
.rd-list{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain;scrollbar-width:thin}
.rd-row{display:grid;grid-template-columns:22px 1fr auto auto;align-items:center;gap:5px;min-height:26px;padding:1px 4px;border-radius:6px;background:rgba(255,255,255,.035)}
.rd-row img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated}
.rd-row{cursor:pointer}.rd-row:hover{background:rgba(255,255,255,.08)}
.rd-row.r3 img,.rd-row.r4 img,.rd-row.r5 img,.rd-row.r6 img{filter:drop-shadow(0 0 3px currentColor)}
.rd-nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.rd-row em{font-style:normal;font-weight:800;color:#f3e6c4}
.rd-2{display:flex;flex-direction:column;line-height:1.15;padding:2px 0}.rd-2 b,.rd-2 small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rd-2 small{font-size:10px;font-weight:600;opacity:.85}
.rd-t{font-size:10px;color:#7f8ca0;white-space:nowrap}
.rd-row.new{animation:rdRow .6s ease-out}
@keyframes rdRow{from{background:color-mix(in srgb,currentColor 30%,transparent)}}
.rd-empty{padding:6px 2px;font-size:11.5px;color:#8e9bb0}
.hf.app .rd-box{width:min(236px,calc(100vw - 80px));max-height:max(150px,calc(100dvh - var(--st) - var(--sb) - 640px))}
/* celular: a lista para antes das poções; deitado, abre para cima (ao lado do zoom) para não cobrir as skills */
.hf.app.is-landscape .rd-box{top:auto;bottom:0;max-height:min(230px,calc(100dvh - 110px))}
.hf.app[data-msheet] .radar{visibility:hidden}
@media (prefers-reduced-motion:reduce){.radar .rd-sw,.radar.hot .rd-tab,.rd-ping,.rd-row.new{animation:none}}
/* Bônus do grupo valendo agora (30/09): no quadro do grupo e em Atributos › Resultado, com os números do servidor. */
/* 07/10: pedido para entrar no grupo, no quadro da party */
.pb-rq{display:block;width:100%;margin:4px 0 2px;padding:4px 6px;border-radius:6px;border:1px solid rgba(255,214,107,.55);background:rgba(255,214,107,.12);color:#ffe7a8;font-size:10.5px;text-align:left;cursor:pointer;animation:pbrq 1.6s ease-in-out infinite}
.pb-rq:hover{background:rgba(255,214,107,.22)}
@keyframes pbrq{50%{border-color:rgba(255,214,107,.95)}}
.pb-aura.on span{display:flex;flex-wrap:wrap;gap:2px 5px}.pb-aura.on span i{color:#5e8a6a}.pb-aura.on em{color:#e9fff0}
.grp-bon{margin:6px 0 4px;padding:6px 8px;border-radius:8px;background:rgba(125,255,154,.07);box-shadow:inset 0 0 0 1px rgba(125,255,154,.3)}
.grp-bon .gb-t{font-weight:800;color:#7dff9a;font-size:13px;margin-bottom:2px}
.grp-bon .sr em{color:#7dff9a}.grp-bon .q-d{margin:3px 0 0;font-size:11px}
.radar[hidden]{display:none}
/* Links no chat (30/09): abrem em outra aba; endereço longo quebra em vez de alargar o chat. */
.clog a.clink{color:#7cc4ff;text-decoration:underline;text-underline-offset:2px;word-break:normal;overflow-wrap:anywhere;cursor:pointer}
.clog a.clink:hover{color:#b3dcff}.clog a.clink:visited{color:#b39cff}
/* Quando o Alpha acabar (30/09, dono): o que muda no lançamento e o presente de quem jogou o Alpha. */
.alpha{max-width:900px}
.al-svg{position:absolute;width:0;height:0;overflow:hidden}
.al-end{display:flex;flex-direction:column;gap:10px}
.al-top{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:linear-gradient(115deg,rgba(138,77,255,.28),rgba(242,193,78,.14) 70%,rgba(20,16,34,.4));box-shadow:inset 0 0 0 1px rgba(185,140,255,.5),0 4px 14px rgba(0,0,0,.35)}
.al-top .t-title{font-size:21px;line-height:1.1}.al-top small{display:block;margin-top:3px;color:#cfc3e6;font-size:12.5px;line-height:1.35}
.al-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:10px;align-items:stretch}
.al-card{padding:10px 12px 12px;border-radius:12px;background:rgba(12,16,28,.78);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.al-ct{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-weight:800;font-size:14.5px;color:#f2c14e}
.al-ct small{margin-left:auto;font-weight:600;font-size:11.5px;color:#a79cc0}
.al-ct .alpha-ico{width:24px;height:24px;display:inline-grid;place-items:center;border-radius:7px;font:800 17px/1 Georgia,"Times New Roman",serif;color:#fff;background:linear-gradient(135deg,#f2c14e,#8a4dff)}
.al-reset .al-ct{color:#ffae8a}
.al-row{display:grid;grid-template-columns:38px 1fr;gap:9px;align-items:center;padding:7px 0;border-top:1px solid rgba(255,255,255,.07)}
.al-reset .al-ct + .al-row{border-top:0}
.al-row img{width:34px;height:34px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.al-row b{display:block;font-size:13.5px;color:#f3e9d2}.al-row.keep b{color:#8ee6a0}.al-row small{display:block;margin-top:1px;color:#a9b3c2;font-size:12px;line-height:1.3}
.al-me{margin:0 0 8px;padding:6px 9px;border-radius:8px;font-size:12.5px;line-height:1.3;background:rgba(125,255,154,.1);color:#a6ffbe;box-shadow:inset 0 0 0 1px rgba(125,255,154,.25)}
.al-me.no{background:rgba(255,120,100,.1);color:#ffb9ad;box-shadow:inset 0 0 0 1px rgba(255,120,100,.25)}
.al-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.al-it{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:88px;padding:8px 4px 7px;border-radius:10px;cursor:pointer;text-align:center;
background:linear-gradient(180deg,rgba(52,36,92,.85),rgba(20,16,36,.92));box-shadow:inset 0 0 0 1px rgba(185,140,255,.38);transition:transform .12s,box-shadow .12s}
.al-it:hover,.al-it:focus-visible,.al-it.on{transform:translateY(-2px);box-shadow:inset 0 0 0 1px #f2c14e,0 0 14px rgba(242,193,78,.35)}
.al-it:focus-visible{outline:2px solid #f2c14e;outline-offset:2px}
.al-art{height:46px;display:grid;place-items:center}
.al-art > img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}
.al-q{position:absolute;top:5px;right:7px;font-size:13px;color:#ffe9a6;text-shadow:0 1px 0 #000,0 0 4px #000}
.al-nm{font-size:11.5px;font-weight:700;line-height:1.2;color:#f3e9d2}
.al-it.got::after{content:"✓";position:absolute;top:4px;left:7px;font-weight:900;color:#7dff9a;text-shadow:0 1px 0 #000}
.al-it .al-a{top:4px;right:18px;font-size:13px}
.al-fr{display:block;width:38px;height:38px;overflow:hidden;background:#1a1426}
.al-fr img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.al-tt{margin:0;font-size:11px;padding:1px 7px}
.al-det{display:flex;gap:10px;align-items:center;min-height:48px;margin-top:8px;padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);font-size:12.5px;line-height:1.35;color:#a9b3c2}
.al-det.on{background:rgba(138,77,255,.12);box-shadow:inset 0 0 0 1px rgba(185,140,255,.4);color:#e2dcef}
.al-det-a{flex:none;display:grid;place-items:center;width:52px;height:52px}.al-det-a > img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated}
.al-det-t b{display:block;color:#ffd66b;font-size:13.5px;margin-bottom:1px}.al-det-t > span{display:block}
/* skins do Alpha: animação do herói; sem a arte final, com o filtro dourado e roxo (prévia) */
.al-skg{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px}
.al-skc{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 7px;border-radius:12px;outline:none;
background:radial-gradient(circle at 50% 42%,rgba(160,90,255,.34),rgba(18,14,32,.94) 72%);box-shadow:inset 0 0 0 1px rgba(185,140,255,.38);transition:box-shadow .15s,transform .15s}
.al-skc:hover,.al-skc:focus-visible{transform:translateY(-2px);box-shadow:inset 0 0 0 1px #f2c14e,0 0 16px rgba(185,140,255,.5)}
.al-skc .al-art{height:88px;overflow:hidden}
.al-skc .al-spr.walk{--fw:140px;--fh:140px}
.al-skn{font-size:12.5px;font-weight:800;color:#f3e9d2}
.al-a{position:absolute;top:6px;right:8px;font:800 16px/1 Georgia,"Times New Roman",serif;color:#ffd66b;text-shadow:0 0 6px rgba(160,90,255,.95),0 1px 0 #000}
.al-duo{display:grid;place-items:center;filter:url(#hf-alpha-duo) drop-shadow(0 0 5px rgba(242,193,78,.6))}
.al-duo.real{filter:drop-shadow(0 0 6px rgba(185,140,255,.65))}
.al-spr{--fw:57px;--fh:81px;--n:12;display:block;width:var(--fw);height:var(--fh);background-repeat:no-repeat;background-size:calc(var(--fw) * var(--n)) var(--fh);image-rendering:pixelated;animation:alSpr 1.25s steps(var(--n)) infinite}
.al-spr.walk{--fw:80px;--fh:80px;--n:6;animation-duration:.75s}
@keyframes alSpr{from{background-position:0 0}to{background-position:calc(var(--fw) * var(--n) * -1) 0}}
.al-it .al-art{overflow:hidden}.al-it .al-spr{--fw:28px;--fh:40px}.al-it .al-spr.walk{--fw:72px;--fh:72px}.al-it .sk-spr.sm{--s:44px}
.al-note{margin:8px 0 0}
/* moldura Jogador Alpha (presente do Alpha): dourada e roxa, pulsando */
.ar-av.fr-alpha,.fr-alpha{box-shadow:0 0 0 2px #fff0b8,0 0 0 4px #8a4dff,0 0 0 5px #f2c14e,0 0 14px rgba(160,90,255,.7);border-radius:6px;animation:frAlpha 2.4s ease-in-out infinite}
@keyframes frAlpha{50%{box-shadow:0 0 0 2px #fff0b8,0 0 0 4px #b58cff,0 0 0 5px #ffd66b,0 0 22px rgba(242,193,78,.8)}}
/* balão das dicas (fora do palco: não escala e não é cortado pela janela) */
.hf-altip{position:fixed;z-index:2147482000;max-width:250px;padding:8px 11px;border-radius:10px;background:rgba(16,12,30,.97);box-shadow:0 0 0 1px #b98cff,0 8px 22px rgba(0,0,0,.6);color:#e6def5;font:500 12.5px/1.38 "HF Sans","Signika",system-ui,sans-serif;pointer-events:none}
.hf-altip b{display:block;margin-bottom:3px;color:#ffd66b;font-size:13.5px}.hf-altip > span{display:block}
.hf-altip[hidden]{display:none}
.hf.app .al-cols{grid-template-columns:1fr}
.hf.app .al-top .t-title{font-size:18px}
.hf.app .al-skg{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (prefers-reduced-motion:reduce){.al-spr,.fr-alpha{animation:none}}
/* Guild nova (30/09, dono): nível, missões, Loja da Guild (Brasões) e cofre. */
.gd .gd-tabs{grid-template-columns:repeat(8,minmax(0,1fr))}
.gd .gd-tabs .du-tab{height:38px;font-size:13px}
.hf.app .gd .gd-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.gd-lv{display:flex;align-items:center;gap:10px;margin:-2px 0 6px}
.gd-lvn{flex:none;padding:3px 10px;border-radius:8px;font-size:15px;color:#2a1604;background:linear-gradient(#ffe07a,#d49a2a);box-shadow:0 0 0 1px #7a5210}
.gd-xp{flex:1;min-width:0}.gd-xp .bar{height:10px;border-radius:6px;background:#1c2738;overflow:hidden}.gd-xp .bar i{display:block;height:100%;background:linear-gradient(90deg,#9b5cff,#f2c14e)}
.gd-xp small{display:block;margin-top:2px;font-size:11.5px;color:#a9b3c2}
.gd-perks{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0 0 10px;font-size:12px;color:#9dffb5}
.gd-bf{padding:1px 8px;border-radius:9px;background:rgba(255,214,107,.14);color:#ffe7a0;box-shadow:inset 0 0 0 1px rgba(255,214,107,.4)}
.gd-sec{display:flex;align-items:baseline;gap:8px;margin:10px 0 6px}.gd-sec b{font-size:14.5px;color:#f2c14e}.gd-sec small{margin-left:auto;font-size:11.5px;color:#a9b3c2}
.gd-ms{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:8px 10px;margin:0 0 6px;border-radius:10px;background:rgba(12,18,30,.75);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.gd-ms > img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated}
.gd-mt{min-width:0}.gd-mt b{display:block;font-size:13.5px;color:#f3e9d2}.gd-mt small{display:block;margin-top:2px;font-size:11.5px;color:#a9b3c2}
.gd-mt .bar{position:relative;height:14px;margin-top:4px;border-radius:7px;background:#1c2738;overflow:hidden}
.gd-mt .bar i{position:absolute;inset:0 auto 0 0;border-radius:7px;background:linear-gradient(#6fd36a,#2f7a2b)}
.gd-mt .bar span{position:relative;display:block;text-align:center;font-size:10.5px;line-height:14px;font-weight:700;color:#fff;text-shadow:0 1px 1px #000}
.gd-ms.done{box-shadow:inset 0 0 0 1px rgba(125,255,154,.5);background:rgba(40,80,50,.35)}.gd-ms.done .gd-mt small{color:#9dffb5}
.gd-rw{display:flex;flex-direction:column;gap:3px;align-items:flex-end;font-size:12px;font-weight:800}
.gd-rw span{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:8px;background:rgba(155,92,255,.18);color:#e2d2ff;white-space:nowrap}
.gd-rw span + span{background:rgba(242,193,78,.16);color:#ffe7a0}.gd-rw img{width:16px;height:16px;image-rendering:pixelated}
.gd-lvs{margin-top:8px}.gd-lvs summary{cursor:pointer;color:#f2c14e;font-weight:700;font-size:13px}
.gd-lvt{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.gd-lvr{display:grid;grid-template-columns:52px 84px 1fr;gap:6px;padding:4px 8px;border-radius:6px;font-size:12px;color:#a9b3c2}
.gd-lvr b{color:#f3e9d2}.gd-lvr.got{color:#9dffb5}.gd-lvr.on{background:rgba(242,193,78,.14);box-shadow:inset 0 0 0 1px rgba(242,193,78,.45);color:#ffe7a0}
.gd-wallet,.gd-vault{display:grid;grid-template-columns:48px auto 1fr;gap:10px;align-items:center;padding:8px 12px;margin:0 0 10px;border-radius:10px;background:linear-gradient(115deg,rgba(138,77,255,.22),rgba(12,18,30,.8));box-shadow:inset 0 0 0 1px rgba(185,140,255,.4)}
.gd-vault{grid-template-columns:48px 1fr;background:linear-gradient(115deg,rgba(80,170,255,.2),rgba(12,18,30,.8));box-shadow:inset 0 0 0 1px rgba(120,190,255,.4)}
.gd-wallet > img,.gd-vault > img{width:44px;height:44px;image-rendering:pixelated}
.gd-wallet b,.gd-vault b{display:block;font-size:22px;color:#ffe7a0;line-height:1.1}.gd-wallet small,.gd-vault small{color:#a9b3c2;font-size:11.5px}.gd-wallet .q-d{margin:0;font-size:12px}
.gd-its{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
.gd-it{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px 8px;border-radius:10px;text-align:center;background:linear-gradient(180deg,rgba(40,32,70,.8),rgba(16,18,32,.9));box-shadow:inset 0 0 0 1px rgba(185,140,255,.3)}
.gd-it > img{width:42px;height:42px;object-fit:contain;image-rendering:pixelated}
.gd-it b{font-size:12.5px;line-height:1.2;color:#f3e9d2}.gd-it small{font-size:11px;color:#a9b3c2;min-height:14px}
.gd-it .buy{display:inline-flex;align-items:center;gap:4px;justify-content:center;min-width:84px}.gd-it .buy img{width:16px;height:16px;image-rendering:pixelated}
.gd-it.lock{opacity:.62}.gd-it.lock small{color:#ffb9ad}.gd-it.own small{color:#9dffb5}
.gd-don{margin:0 0 6px}.gd-don .searchbar{margin:6px 0 2px}
.gd-bfc{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:8px 10px;margin:0 0 6px;border-radius:10px;background:rgba(12,18,30,.75);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.gd-bfc > img{width:36px;height:36px;image-rendering:pixelated}.gd-bfc b{display:block;font-size:13.5px;color:#f3e9d2}.gd-bfc small{display:block;font-size:11.5px;color:#a9b3c2}
.gd-bfc.on{box-shadow:inset 0 0 0 1px rgba(255,214,107,.6),0 0 12px rgba(255,214,107,.2)}.gd-bfc.on small{color:#ffe7a0}
.gd-bfc .buy{display:inline-flex;align-items:center;gap:4px}.gd-bfc .buy img{width:16px;height:16px}.gd-only{font-size:11.5px;white-space:nowrap}
.gd-bank .lrow .ic{width:16px;height:16px;vertical-align:-3px;margin-right:3px}
.hf.app .gd-ms{grid-template-columns:34px 1fr}.hf.app .gd-ms .gd-rw{grid-column:2;flex-direction:row;justify-content:flex-start}
.hf.app .gd-wallet{grid-template-columns:44px 1fr}.hf.app .gd-wallet .q-d{grid-column:1 / -1}
.hf.app .gd-its{grid-template-columns:repeat(2,minmax(0,1fr))}
/* guild no perfil */
.pf-guild{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:8px 0}
.pf-guild > img,.pf-guild .pf-gm{width:40px;height:40px;image-rendering:pixelated;flex:none}
.pf-gt{flex:1;min-width:0}.pf-gt b{display:block;font-size:15px;color:#f2c14e}.pf-gt small{display:block;font-size:12px;color:#a9b3c2}
.pf-guild.none{opacity:.8;padding:4px 12px}.pf-guild.none > img{width:28px;height:28px;opacity:.6}.pf-guild.none small{flex:1}
/* molduras da guild */
.ar-av.fr-fundador,.fr-fundador{box-shadow:0 0 0 2px #fff4c4,0 0 0 4px #d99a14,0 0 0 5px #7a3fd0,0 0 16px rgba(255,200,60,.75);border-radius:6px;animation:frFund 2.6s ease-in-out infinite}
@keyframes frFund{50%{box-shadow:0 0 0 2px #fff4c4,0 0 0 4px #ffc93c,0 0 0 5px #9b5cff,0 0 22px rgba(255,210,90,.9)}}
.ar-av.fr-guilda,.fr-guilda{box-shadow:0 0 0 2px #e6dcff,0 0 0 4px #5a3fb0,0 0 12px rgba(140,100,255,.6);border-radius:6px}
/* Moldura do Campeão (09/10, Torneio de Alvorada): ouro com fogo e brilho mais forte. */
.ar-av.fr-campeao,.fr-campeao{--f1:#fff7d0;--f2:#ff9a1f;--f3:#ff3d2e;--f4:#ffe066;--fg:#fff2b0;--fl:rgba(255,140,40,.9);box-shadow:0 0 14px var(--fl),0 0 4px #fff2b0;border-radius:6px;animation:frGlow 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.fr-fundador{animation:none}}
/* Chefe da Guild (30/09) */
.gd-bcard{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0 0 8px;border-radius:12px;background:radial-gradient(circle at 12% 50%,color-mix(in srgb,var(--bc) 35%,transparent),rgba(12,16,28,.85) 60%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bc) 60%,transparent)}
.gd-bcard > img{width:72px;height:72px;image-rendering:pixelated;filter:drop-shadow(0 0 8px var(--bc))}
.gd-bcard b{display:block;font-size:18px;color:#ffd0f0}.gd-bcard small{color:#a9b3c2;font-size:12px}
.gd-bst{padding:8px 10px;margin:0 0 8px;border-radius:9px;font-size:13px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#e2dcef}
.gd-bst.lock{color:#ffb9ad}.gd-bst.good{color:#9dffb5;background:rgba(40,80,50,.35)}.gd-bst.bad{color:#ffb9ad}.gd-bst.live{color:#ffe7a0;background:rgba(155,92,255,.2);box-shadow:inset 0 0 0 1px rgba(185,140,255,.5)}
.gd-bhp .bar{position:relative;height:16px;border-radius:8px;background:#1c2738;overflow:hidden}.gd-bhp .bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#e0574c,#a52a22)}
.gd-bhp .bar span{position:relative;display:block;text-align:center;font-size:11px;line-height:16px;font-weight:700;color:#fff;text-shadow:0 1px 1px #000}
.gd-bhp small{display:block;margin-top:3px;color:#a9b3c2;font-size:12px}
.gd-btop{display:flex;flex-wrap:wrap;gap:4px 10px;margin:6px 0;font-size:12px}.gd-btop small{color:#ffb9ad}
/* Mini janela aberta (30/09): a área do jogo fica preta com o aviso (o Godot para de desenhar). */
.hf-saver{position:fixed;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at center,#0d1522,#05070b 75%);color:#e8edf5;font-family:"HF Sans","Signika",system-ui,sans-serif;text-align:center}
.hf-saver[hidden]{display:none}
.hf-saver .sv-in{max-width:420px;display:flex;flex-direction:column;align-items:center;gap:8px}
.hf-saver img{width:56px;height:56px;image-rendering:pixelated;opacity:.9}
.hf-saver b{font-size:19px;color:#f2c14e}.hf-saver p{margin:0;font-size:14px;line-height:1.4;color:#a9b3c2}
.hf-saver .buy{margin-top:6px;padding:0 18px;cursor:pointer}
/* Mapa atual no canto do jogo (30/09, dono): "Mapa N · nome", abre a janela Fases. */
.mapchip{position:absolute;left:50%;top:132px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;height:30px;max-width:360px;padding:0 10px 0 6px;border-radius:15px;border:0;cursor:pointer;
background:rgba(8,11,16,.78);box-shadow:inset 0 0 0 1px rgba(214,170,90,.6),0 2px 8px rgba(0,0,0,.45);color:#f3e9d2;font:700 12.5px "HF Sans","Signika",system-ui,sans-serif;white-space:nowrap;z-index:3}
.mapchip[hidden]{display:none}
.mapchip:hover{box-shadow:inset 0 0 0 1px #f2c14e,0 0 10px rgba(242,193,78,.35)}
.mapchip img{width:20px;height:20px;image-rendering:pixelated}
.mapchip b{color:#ffe07a}.mapchip span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#dfe7ef;font-weight:600}.mapchip i{font-style:normal;color:#d6aa5a;font-size:10px}
.hf.dock .mapchip{left:calc(var(--dl) + 16px);top:calc(var(--dt) + 42px);transform:none}
.hf:has(.veil:not([hidden])) .mapchip{display:none}
.hf.app .mapchip{left:calc(64px + var(--sl));top:calc(var(--st) + 148px);transform:none;height:28px;max-width:calc(100vw - 190px);font-size:11.5px}
.hf.app.is-landscape .mapchip{top:calc(var(--st) + 108px)}
.hf.app[data-msheet] .mapchip{visibility:hidden}
/* Baú do GM (30/09, dono): faixa com os presentes da equipe no chão, agrupados (×5), e o tempo até sumir. */
.gmbar{position:absolute;left:50%;top:176px;transform:translateX(-50%);z-index:30;display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none;width:max-content;max-width:min(520px,calc(100vw - 24px))}
.gmbar[hidden]{display:none}
.gmb{--rc:#f2c14e;pointer-events:auto;display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;align-items:center;gap:9px;padding:5px 8px 5px 7px;border-radius:12px;
background:linear-gradient(100deg,rgba(58,40,10,.94),rgba(20,26,42,.94) 58%);box-shadow:0 0 0 1px #0b0806,0 0 0 2px var(--rc),0 4px 14px rgba(0,0,0,.5),0 0 16px -2px var(--rc);animation:gmbIn .45s ease-out,gmbGlow 2.4s ease-in-out infinite}
.gmb.r2{--rc:#58a8ff}.gmb.r3{--rc:#c77dff}.gmb.r4{--rc:#ffb640}.gmb.r5{--rc:#ff5a7a}.gmb.r6{--rc:#7ff6ff}
.gmb img{width:34px;height:34px;image-rendering:pixelated;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));animation:gmbBob 1.6s ease-in-out infinite}
.gmb-t{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.gmb-t small{font-size:10px;color:#d9c79b;letter-spacing:.3px;text-transform:uppercase}
.gmb-t .gmb-m{text-transform:none;letter-spacing:0;color:#bcd2ee;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmb.here .gmb-m{color:#8fe38a;font-weight:700}
.gmb-t b{display:flex;align-items:baseline;gap:6px;font-size:14px;color:#fff3cf;min-width:0}
.gmb-t b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmb-n{font-style:normal;flex:none;padding:0 6px;border-radius:8px;background:var(--rc);color:#1a1204;font-size:13px;font-weight:900;box-shadow:0 0 8px var(--rc)}
.gmb-c{display:flex;flex-direction:column;align-items:center;line-height:1.1;padding-left:8px;border-left:1px solid rgba(255,255,255,.12)}
.gmb-c small{font-size:9.5px;color:#9fb0c8}
.gmb-c b{font-size:15px;color:#ffe07a;min-width:44px;text-align:center}
.gmb .buy.sm{height:26px;padding:0 12px}
.gmb-more{pointer-events:auto;padding:1px 9px;border-radius:9px;background:rgba(14,21,34,.9);color:#ffe07a;font-size:11px;font-weight:700;box-shadow:0 0 0 1px #b8843e}
@keyframes gmbIn{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes gmbGlow{50%{box-shadow:0 0 0 1px #0b0806,0 0 0 2px var(--rc),0 4px 14px rgba(0,0,0,.5),0 0 26px 2px var(--rc)}}
@keyframes gmbBob{50%{transform:translateY(-2px)}}
.hf.dock .gmbar{left:var(--cx);top:calc(var(--dt) + 84px)}
.hf.app .gmbar{top:calc(var(--st) + 256px);max-width:calc(100vw - 124px)}
.hf.app.is-landscape .gmbar{top:calc(var(--st) + 60px)}
.hf.app .gmb{grid-template-columns:28px minmax(0,1fr) auto auto;gap:6px;padding:4px 6px}
.hf.app .gmb img{width:28px;height:28px}
.hf.app .gmb-t b{font-size:12.5px}.hf.app .gmb-c b{font-size:13px;min-width:38px}
.hf.app .gmb .buy.sm{height:24px;padding:0 9px}
/* Ferreiro com a janela baixa (30/09, print do dono): no modo app deitado (PC com janela baixa, celular deitado) as duas
partes dividiam a altura da janela e a grade de itens vazava por cima da bigorna. Agora cada parte tem a altura dela, lado
a lado, e a janela rola. */
.hf.app .fg2{flex:none}
.hf.app.is-landscape .fg2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
/* Desempenho e bateria (30/09): modo imersivo (só o jogo) e as opções nas Configurações. */
.hf-stage.immersive > :not(.fx):not(.veil):not(.imm-exit):not(.hf-saver){visibility:hidden!important}
.hf-stage.immersive::before,.hf-stage.immersive::after{display:none!important}
.imm-exit{position:absolute;right:12px;top:12px;z-index:90;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:0;border-radius:15px;cursor:pointer;
background:rgba(12,18,30,.55);color:#e9d8b0;font:inherit;font-size:12.5px;font-weight:700;box-shadow:0 0 0 1px rgba(184,132,62,.6);opacity:.55;transition:opacity .2s}
.imm-exit:hover,.imm-exit:focus-visible{opacity:1}
.imm-exit[hidden]{display:none}
.hf.app .imm-exit{top:calc(var(--st) + 10px);right:calc(10px + var(--sr))}
.cfg .field.row span b{color:#f2c14e}
/* Mochila (30/09, print do dono: "remover scroll horizontal"): a coluna do herói só rola para baixo; o status encolhe o
nome ("Ataques por segundo") em vez de empurrar a coluna para o lado. */
.inv-left{overflow-x:hidden}
.inv-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.inv-stats .sr{min-width:0;gap:6px}
.inv-stats .sr span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-stats .sr b{flex:none;white-space:nowrap}
/* Ajuda › mapas (30/09): tabelas largas rolam dentro da caixa, sem empurrar a janela. */
.hp-scroll{overflow-x:auto;max-width:100%;margin:0 0 6px}
.hp-tb.rtab{font-size:11.5px;white-space:nowrap}
.hp-tb.rtab th,.hp-tb.rtab td{padding:3px 5px;text-align:right}
.hp-tb.rtab th:first-child,.hp-tb.rtab td:first-child{text-align:left}
.hp-tb.rtab td small{color:var(--muted)}
.hp-z{color:rgba(255,255,255,.25)}
.mu-l .rng,.is-bonus .rng{color:var(--muted);font-weight:400;font-size:.85em}
/* Ficha do item (30/09): de onde vem o atributo — força base da cor + o que o +N soma + Adicional. */
.pw-parts{font-size:11.5px;color:var(--muted);text-align:right;margin:-1px 0 3px;line-height:1.3}
/* Comparação no estilo do MU (30/09): um cartão só; o equipado numa linha e o que ganha/perde embaixo. */
.itip .tt-eq{display:flex;align-items:center;gap:8px;margin-top:8px;padding:5px 8px;border-radius:5px;background:rgba(255,255,255,.05);min-width:0}
.itip .tt-eq>div{min-width:0;flex:1;line-height:1.25}
.itip .tt-eq span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.itip .tt-eq>div b{display:block;font-size:12px}
.itip .tt-eq em{font-style:normal;color:var(--muted);flex:none;font-size:11.5px;text-align:right}.itip .tt-eq em b{color:#f2d38a}
.itip .tt-eq .ithumb{width:22px;height:22px;flex:none}
.itip .tt-swap{margin-top:6px;padding:5px 8px;border-radius:5px;background:rgba(255,255,255,.05)}
.itip .tt-swh{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.itip .tt-sw{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 8px;font-weight:700}
.itip .tt-sw span{color:var(--muted);font-weight:400}
.itip .tt-sw.good b{color:#7fe08f}.itip .tt-sw.bad b{color:#ff8a7a}
.mu-l em{font-style:normal;font-size:11px;margin-left:3px}.mu-l em.good{color:#7fe08f}.mu-l em.bad{color:#ff8a7a}
.mu-l.mu-none{color:var(--muted)}
.hf .itip{width:300px}
/* Força do item em partes (30/09): Força atual em destaque; Força base, Upado e Adicional recuados embaixo. */
.tt-r.pw-now b,.is-r.pw-now b{color:#f2d38a;font-size:1.05em}
.tt-r.pw-now small,.is-r.pw-now small,.tt-r.pw-sub small,.is-r.pw-sub small{color:var(--muted);font-weight:400;font-size:.85em}
.tt-r.pw-sub,.is-r.pw-sub{padding-left:12px;font-size:.93em;margin-top:1px}
.tt-r.pw-sub span::before,.is-r.pw-sub span::before{content:"└ ";color:rgba(214,170,90,.45)}
.tt-r.pw-bon b,.is-r.pw-bon b{color:#9fd2ff}
.itip .tt-eq.better{background:rgba(91,214,127,.16);box-shadow:inset 0 0 0 1px rgba(91,214,127,.45)}
.itip .tt-eq.worse{background:rgba(255,107,107,.16);box-shadow:inset 0 0 0 1px rgba(255,107,107,.45)}
.itip .tt-eq.same{background:rgba(242,193,78,.16);box-shadow:inset 0 0 0 1px rgba(242,193,78,.45)}
/* Ferreiro › Desmontar (30/09). */
.sal-mark{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px}.sal-mark .tab{font-size:11.5px;padding:3px 8px}
.fu.sal .fu-out img{width:40px;height:40px;image-rendering:pixelated}
.fu.sal .sal-more{display:flex;align-items:center;justify-content:center;font-weight:700;color:#f2d38a}
.sal-tab{font-size:11.5px}.sal-tab span{white-space:nowrap}
.sal-swap{display:flex;align-items:center;gap:6px;justify-content:center;padding:8px;margin:4px 0}
.sal-swap img{width:30px;height:30px;image-rendering:pixelated}.sal-swap b{font-size:16px;color:#f2d38a}.sal-swap span{color:var(--muted)}
.sal-swap small{margin-left:10px;color:var(--muted)}
/* Heróis no celular (30/09, print do dono: a janela rolava para o lado): as colunas podem encolher abaixo do tamanho das
habilidades; a fileira de habilidades quebra linha e as barras ficam mais estreitas. */
.hs-wrap>*,.hc-card{min-width:0}
.hf.app .hs-wrap{grid-template-columns:minmax(0,1fr)}
.hf.app .hc-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.hc-kit{flex-wrap:wrap}
.hf.app .hc-st{grid-template-columns:14px 30px minmax(0,1fr) 30px;gap:4px}
.hf.app .hc-card .hc-kit{gap:2px}.hf.app .hc-card .hc-sk{width:23px;height:23px}
/* Eventos do painel (30/09): chips na faixa do topo, faixa da promoção na Loja, preço cheio riscado e a seção da janela Eventos. */
.evb{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;pointer-events:none}
/* 18/10: X que esconde os eventos e a pílula que mostra de novo */
.evb-x{pointer-events:auto;align-self:center;width:24px;height:24px;border:0;border-radius:999px;cursor:pointer;background:rgba(10,14,22,.85);color:#e6e1d3;font:700 12px/1 system-ui,sans-serif;box-shadow:0 0 0 1px rgba(255,255,255,.25)}.evb-x:hover{background:#7a2a2a}
.evb-min i{border-left:0;padding-left:2px;color:#ffe07a}
.evb-c{pointer-events:auto;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px 0 4px;border:0;border-radius:999px;cursor:pointer;
background:linear-gradient(100deg,rgba(24,54,34,.95),rgba(16,26,44,.95));box-shadow:0 0 0 1px #0b0806,0 0 0 2px #5bd67f,0 3px 10px rgba(0,0,0,.45);color:#eaffef;font:700 12.5px "HF Sans","Signika",system-ui,sans-serif;animation:gmbIn .45s ease-out}
.evb-c img{width:22px;height:22px;image-rendering:pixelated}
.evb-c b{display:flex;gap:4px;white-space:nowrap}.evb-c em{font-style:normal;color:#ffe07a}
.evb-c i{font-style:normal;font-size:11.5px;color:#bfe9c9;padding-left:6px;border-left:1px solid rgba(255,255,255,.15)}
.evb-c.t-shop{box-shadow:0 0 0 1px #0b0806,0 0 0 2px #58c8ff,0 3px 10px rgba(0,0,0,.45),0 0 12px -2px #58c8ff}
.evb-c.t-rank{box-shadow:0 0 0 1px #0b0806,0 0 0 2px #f2c14e,0 3px 10px rgba(0,0,0,.45)}
/* Promoção na Loja (09/10 23:20, dono: "no topo, maior, com mais destaque"; clique abre a Loja): faixa própria, numa linha só dela. */
.evb-shop{pointer-events:auto;flex:0 0 auto;display:flex;align-items:center;gap:10px;margin:0 auto;padding:6px 8px 6px 8px;border:0;border-radius:14px;cursor:pointer;color:#fff;font:inherit;text-align:left;
background:linear-gradient(100deg,rgba(10,52,86,.96),rgba(22,30,62,.96) 55%,rgba(52,22,78,.96));box-shadow:0 0 0 1px #0b0806,0 0 0 2px #58c8ff,0 4px 14px rgba(0,0,0,.5),0 0 22px -4px #58c8ff;animation:evs-glow 2.4s ease-in-out infinite}
.evb-shop>img{flex:none;width:34px;height:34px;image-rendering:pixelated;filter:drop-shadow(0 0 6px rgba(88,200,255,.7))}
.evs-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.evs-t b{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:16px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;text-shadow:0 1px 0 #000}
.evs-t b em{font-style:normal;font-size:21px;line-height:1;color:#7dffb0;text-shadow:0 0 10px rgba(80,255,160,.45),0 1px 0 #000}
.evs-t small{font-size:12.5px;color:#cfe6ff}
.evs-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;padding-left:10px;border-left:1px solid rgba(255,255,255,.16)}
.evs-r i{font-style:normal;font-size:12.5px;font-weight:700;color:#bfe9c9}
.evs-r u{text-decoration:none;font-size:12px;font-weight:800;padding:2px 9px;border-radius:999px;background:#ffcf4a;color:#2a1a08;white-space:nowrap}
.evs-r u::after{content:" ›"}
.evb-shop:hover{filter:brightness(1.12)}
@keyframes evs-glow{0%,100%{box-shadow:0 0 0 1px #0b0806,0 0 0 2px #58c8ff,0 4px 14px rgba(0,0,0,.5),0 0 18px -6px #58c8ff}50%{box-shadow:0 0 0 1px #0b0806,0 0 0 2px #8fe0ff,0 4px 14px rgba(0,0,0,.5),0 0 28px -2px #58c8ff}}
.hf.dock .gmbar:has(.evb-shop){top:calc(var(--dt) + 6px)}
.hf.dock .evb-shop{max-width:calc(100vw - var(--dl) - var(--dr) - 440px);min-width:300px;padding:4px 8px;gap:8px}.hf.dock .evb-shop>img{width:30px;height:30px}.hf.dock .evs-t small{font-size:11.5px}.hf.dock .evs-r{gap:2px}.hf.dock .evs-r u{padding:1px 8px}.hf.dock .evs-t b{font-size:clamp(13px,1.05vw,16px)}.hf.dock .evs-t b em{font-size:clamp(17px,1.35vw,21px)}
.hf.dock:has(.gmbar:not([hidden]) .evb-shop) :is(.banner,.invites){top:calc(var(--dt) + 70px)}
.evs-short{display:none}
/* Celular (10/10 00:41, dono, print: "isso na frente de tudo não funciona; no celular tem que ser mais minimalista, porém aparecer"):
pílula pequena "💎 Loja -20% · 28:28" (toque abre a Loja), na coluna do aviso do Passe, embaixo dele, fora do meio do mapa. */
.hf.app .evb-shop{gap:6px;padding:0 9px 0 4px;height:28px;border-radius:999px;animation:none;background:linear-gradient(100deg,rgba(10,52,86,.95),rgba(22,30,62,.95));box-shadow:0 0 0 1px #0b0806,0 0 0 2px #58c8ff,0 3px 10px rgba(0,0,0,.45)}
.hf.app .evb-shop>img{width:20px;height:20px;filter:none}
.hf.app .evs-t,.hf.app .evs-r u{display:none}
.hf.app .evs-short{display:inline-flex;align-items:baseline;gap:5px;font-size:12px;white-space:nowrap}.hf.app .evs-short b{text-transform:uppercase;letter-spacing:.04em}.hf.app .evs-short em{font-style:normal;font-weight:900;color:#7dffb0}
.hf.app .evs-r{padding-left:6px;border-left:1px solid rgba(255,255,255,.15)}.hf.app .evs-r i{font-size:11px}
.hf.app.is-portrait .gmbar:has(.evb-shop){left:calc(56px + var(--sl));top:calc(var(--st) + 136px);transform:none;align-items:flex-start;max-width:calc(100% - 180px - var(--sl) - var(--sr))}
.hf.app.is-portrait .gmbar:has(.evb-shop) .evb{justify-content:flex-start}
@media (prefers-reduced-motion:reduce){.evb-shop{animation:none}}
.hf.app .evb-c{height:25px;font-size:11.5px;padding:0 7px 0 3px}.hf.app .evb-c img{width:19px;height:19px}.hf.app .evb-c i{font-size:10.5px;padding-left:4px}
.promo-bar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:8px 12px;border-radius:12px;background:linear-gradient(100deg,rgba(20,60,96,.9),rgba(40,24,70,.9));border:1px solid #58c8ff;color:#e8f6ff;font-size:14px;box-shadow:0 0 14px -4px #58c8ff}
.promo-bar img{width:24px;height:24px}.promo-bar em{font-style:normal;font-weight:900;color:#7ff6ff;font-size:16px}.promo-bar i{font-style:normal;margin-left:auto;font-size:12.5px;color:#b9d6f2}.promo-bar i b{color:#ffe07a}
.shop-items .card.promo{position:relative;box-shadow:0 0 0 2px #58c8ff inset}
.promo-tag{position:absolute;top:6px;right:6px;z-index:2;padding:1px 7px;border-radius:8px;background:#58c8ff;color:#06131f;font-weight:900;font-size:12px;box-shadow:0 0 8px #58c8ff}
s.was{display:inline-block;color:#9fb0c8;font-size:12px;margin:0 6px 2px 0;text-decoration-thickness:2px;text-decoration-color:#ff6b6b}
.shop-items .card s.was{display:block;text-align:center;margin:0 0 2px}
.prices.dia s.was{margin-right:8px}
.fg-ev{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:4px 0 6px;font-size:13px}.fg-ev img{width:22px;height:22px;image-rendering:pixelated}.fg-ev b{color:#7ff08f}
.evs{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.evs-b,.evs-rh{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px}
.evs-b{padding:8px 10px;border-radius:14px;background:linear-gradient(100deg,rgba(24,54,34,.85),rgba(17,28,49,.9));border:1px solid rgba(91,214,127,.5)}
.evs-b.t-shop{border-color:rgba(88,200,255,.6);background:linear-gradient(100deg,rgba(20,50,80,.85),rgba(17,28,49,.9))}
.evs-b img,.evs-rh img{width:40px;height:40px;image-rendering:pixelated}
.evs-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}.evs-t b{font-size:15px;color:#fff3cf}.evs-t b em{font-style:normal;color:#ffe07a}.evs-t small{font-size:12px;color:#aebdd3}
.evs-l{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}.evs-l small{font-size:10.5px;color:#9fb0c8}.evs-l b{font-size:15px;color:#ffe07a}
.evs-rank{padding:10px;border-radius:14px;background:#111c31;border:1px solid rgba(242,193,78,.55)}
.evs-pz{display:flex;flex-direction:column;gap:4px;margin:8px 0;font-size:12.5px}.evs-pz>div{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}.evs-pz>div>b{min-width:22px;color:#f2c14e}
.evs-p{display:inline-flex;align-items:center;gap:3px}.evs-p img{width:20px;height:20px;image-rendering:pixelated}.evs-p span{color:#aebdd3}
.evs-top{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.evs-top li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;padding:4px 8px;border-radius:8px;background:rgba(255,255,255,.04);font-size:13px}
.evs-top li:first-child{background:rgba(242,193,78,.14)}.evs-top li.me{box-shadow:inset 0 0 0 1px #5bd67f}.evs-top li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evs-me{margin:8px 0 0;font-size:13px;color:#bfe9c9}
.evb-one{gap:2px;padding:0 9px 0 5px}.evb-one img{width:19px;height:19px}.evb-one b{margin-left:4px}.evb-one em{padding:0 5px;border-radius:7px;background:#5bd67f;color:#08210f;font-weight:900}
.evb-c.t-beta{box-shadow:0 0 0 1px #0b0806,0 0 0 2px #c77dff,0 3px 10px rgba(0,0,0,.45),0 0 12px -2px #c77dff;background:linear-gradient(100deg,rgba(56,28,84,.95),rgba(16,26,44,.95))}
.evs-beta{padding:12px;border-radius:14px;background:linear-gradient(135deg,rgba(66,30,104,.9),rgba(17,28,49,.95));border:1px solid rgba(199,125,255,.65);box-shadow:0 0 18px -6px #c77dff}
.evs-bh{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center}.evs-bh img{width:40px;height:40px;image-rendering:pixelated}
.evs-cd{margin:10px 0 6px;text-align:center;font-size:30px;font-weight:900;color:#ffe07a;letter-spacing:1px;text-shadow:0 2px 0 #3a1a00,0 0 14px rgba(255,200,80,.4)}
.evs-bl{margin:0;padding-left:18px;font-size:12.5px;color:#d9d0f0;display:flex;flex-direction:column;gap:4px}.evs-bl b{font-size:12px}.evs-bl .lnk{font-size:12px}
/* Loja (30/09, dono: "layout parecido com esse"): Clube VIP em dinheiro, faixa dos Pacotes de Diamantes, moeda e cartões. */
.vipc{display:grid;grid-template-columns:110px minmax(210px,1.25fr) minmax(0,2fr) 210px;align-items:stretch;gap:0;margin:0 0 12px;padding:0;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#3a2410,#20150c 55%,#1a1210);box-shadow:inset 0 0 0 2px #b8843e,0 6px 18px rgba(0,0,0,.4)}
.vipc>*{padding:14px}
.vipc-badge{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,rgba(255,200,80,.35),transparent 65%)}
.vipc-badge img{width:84px;height:84px;image-rendering:pixelated;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));animation:gmbBob 2.4s ease-in-out infinite}
.vipc-main{display:flex;flex-direction:column;gap:3px;border-left:1px solid rgba(184,132,62,.35)}
.vipc-k{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#f2c14e;font-weight:700}
.vipc-t{font-size:24px;color:#fff3cf;line-height:1.1}.vipc-s{font-size:13px;color:#d9c79b}
.vipc-f{margin-top:8px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:8px 10px;border-radius:10px;background:linear-gradient(135deg,#7a3a14,#5a2a10);box-shadow:inset 0 0 0 1px #d98a3a}
.vipc-f span{font-size:12.5px;color:#ffe3b0;line-height:1.3}.vipc-f b{grid-row:1/3;grid-column:2;font-size:22px;color:#9dff7a;padding:3px 9px;border-radius:8px;background:#1e140c;box-shadow:inset 0 0 0 1px #b8843e}
.vipc-f b small{font-size:12px;color:#d9c79b}.vipc-f>small{font-size:10.5px;color:#f2c9a0}
.vipc-f.mine{display:block;background:linear-gradient(135deg,#1f5a2a,#15401e);box-shadow:inset 0 0 0 1px #5bd67f}.vipc-f.mine span{color:#d6ffe0}
.vipc-ps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;align-content:center;border-left:1px solid rgba(184,132,62,.35)}
.vipc-p{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:center}.vipc-p img{width:34px;height:34px;image-rendering:pixelated}
.vipc-p b{display:block;font-size:13.5px;color:#fff3cf;line-height:1.2}.vipc-p small{font-size:11.5px;color:#cbb892;line-height:1.25}
.vipc-buy{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;border-left:1px solid rgba(184,132,62,.35);background:rgba(0,0,0,.18)}
.vipc-price{font-size:26px;color:#b8f27a;text-shadow:0 2px 0 #1a2a08}.vipc-alt{font-size:11.5px;color:#d9c79b}
.vipc-go{width:100%;height:42px;font-size:15px;text-transform:uppercase;letter-spacing:.5px}.vipc-u{font-size:11px;color:#cbb892;line-height:1.3}
.cur-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:#1d140d;box-shadow:inset 0 0 0 1px #6b4a26}
.cur-row label{display:flex;align-items:center;gap:10px;font-size:13px;color:#ffe3b0;font-weight:700}.cur-row select{width:auto;min-width:130px;height:34px}
.cur-row small{font-size:11.5px;color:#cbb892}
.pk-banner{display:grid;grid-template-columns:92px minmax(0,1fr) 150px;align-items:center;margin:0 0 12px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#f3dca4,#e7c47c);box-shadow:inset 0 0 0 2px #b8843e;color:#3a2410}
.pk-bl{width:64px;height:64px;justify-self:center;image-rendering:pixelated;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
.pk-bt{padding:12px 14px;border-left:1px solid rgba(58,36,16,.25);border-right:1px solid rgba(58,36,16,.25);display:flex;flex-direction:column;gap:3px}
.pk-bt small{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#7a4a14;font-weight:700}.pk-bt b{font-size:22px;color:#2a1a08}.pk-bt span{font-size:12.5px;color:#4a3218}
.pk-bt ul{display:flex;flex-wrap:wrap;gap:4px 16px;margin:6px 0 0;padding:6px 0 0;list-style:none;border-top:1px solid rgba(58,36,16,.25);font-size:12px;color:#4a3218}.pk-bt li::before{content:'◆ ';color:#c0392b}
.pk-br{width:110px;height:110px;justify-self:center;image-rendering:pixelated}
.pk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.pk-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px;border-radius:12px;background:linear-gradient(180deg,#3a2410,#241810);box-shadow:inset 0 0 0 2px #8a5a2a}
.pk-card.best{box-shadow:inset 0 0 0 2px #f2c14e,0 0 14px -4px #f2c14e}
.pk-h{font-size:17px;font-weight:800;color:#fff3cf}.pk-h span{font-size:15px}
.pk-art{position:relative;width:100%;aspect-ratio:1.15;display:flex;align-items:center;justify-content:center;border-radius:10px;background:radial-gradient(circle at 50% 45%,#ffd35a,#f5a623 60%,#c0392b 100%);box-shadow:inset 0 0 0 3px #7a4a14,inset 0 0 0 5px #f2c14e}
.pk-art img{width:62%;height:62%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.pk-art b{position:absolute;top:6px;right:10px;font-size:22px;color:#fff;text-shadow:0 2px 0 #7a2a00,0 0 6px rgba(0,0,0,.5)}
.pk-get{width:100%;text-align:center;padding:5px;border-radius:8px;background:#1a110a;box-shadow:inset 0 0 0 1px #6b4a26}.pk-get small{display:block;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:#cbb892}.pk-get b{font-size:13.5px;color:#fff3cf;text-transform:uppercase}
.pk-price{font-size:20px;color:#b8f27a}.pk-alt{font-size:11px;color:#cbb892;margin-top:-4px}
.pk-pay{width:100%;display:flex;align-items:center;gap:6px;font-size:12px;color:#ffe3b0}.pk-pay select{flex:1;min-width:0;height:32px}
.pk-go{width:100%;height:38px;text-transform:uppercase}
.pk-card .ribbon{z-index:2}
@media (max-width:900px){.vipc{grid-template-columns:90px minmax(0,1fr)}.vipc-badge img{width:66px;height:66px}.vipc-ps{grid-column:1/-1;border-left:0;border-top:1px solid rgba(184,132,62,.35)}.vipc-buy{grid-column:1/-1;border-left:0;border-top:1px solid rgba(184,132,62,.35)}}
.hf.app .vipc{grid-template-columns:72px minmax(0,1fr)}.hf.app .vipc>*{padding:10px}.hf.app .vipc-badge img{width:56px;height:56px}.hf.app .vipc-t{font-size:20px}
.hf.app .vipc-ps{grid-column:1/-1;border-left:0;border-top:1px solid rgba(184,132,62,.35)}.hf.app .vipc-buy{grid-column:1/-1;border-left:0;border-top:1px solid rgba(184,132,62,.35)}
.hf.app .pk-banner{grid-template-columns:64px minmax(0,1fr)}.hf.app .pk-bl{width:44px;height:44px}.hf.app .pk-br{display:none}.hf.app .pk-bt{border-right:0}
.hf.app .pk-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hf.app .pk-card{padding:8px 6px}.hf.app .pk-h{font-size:14px}.hf.app .pk-art b{font-size:17px}
.vipi{width:16px;height:16px;margin-left:4px;vertical-align:-3px;image-rendering:pixelated;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
/* Presentes entre VIPs (30/09). */
/* Lista de guilds (30/09). */
.gd-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.gd-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px}
.gd-card.req{box-shadow:inset 0 0 0 1px #5bd67f}
.gd-lmk{width:44px;height:44px;image-rendering:pixelated;border-radius:8px}
.gd-ct{display:flex;flex-direction:column;gap:2px;min-width:0}.gd-ct .t{font-size:15px;color:#fff3cf;font-weight:700}.gd-ct .s{font-size:12.5px;color:#b8c6dc}
.gd-lv,.gd-cs{font-style:normal;font-size:11.5px;padding:1px 7px;border-radius:8px;background:rgba(242,193,78,.16);color:#f2c14e;margin-left:4px}.gd-cs{background:rgba(255,182,64,.2);color:#ffb640}
.gd-nt{font-style:italic;color:#d9c79b!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-cb{display:flex;flex-direction:column;align-items:center;gap:3px}.gd-cb small{font-size:11px;color:var(--muted)}
.gd-open{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:13px;cursor:pointer}
.hf.app .gd-card{grid-template-columns:40px minmax(0,1fr)}.hf.app .gd-cb{grid-column:1/-1;flex-direction:row;justify-content:space-between}
/* Painel do AUTO (30/09): fechar em cima e "Salvar e fechar" no celular. */
.auto-pop .ap-x{position:absolute;top:2px;right:4px;width:28px;height:28px;border:0;border-radius:8px;background:rgba(255,255,255,.08);color:#fff;font-size:18px;line-height:1;cursor:pointer;z-index:2}
.auto-pop .ap-x:hover{background:rgba(255,255,255,.18)}
.auto-pop .ap-ok{width:100%;height:36px;margin-top:8px}
.hf.app .auto-pop .ap-x{width:34px;height:34px;font-size:22px}
/* Celular (30/09, dono: "o nome da cidade fica em cima de coisas e o online não aparece; tirar o botão Alpha do jogo e deixar
só o do menu"): sem o chip Alpha e sem o FPS na linha de cima; a faixa da cidade encolhe para caber o "online". */
.hf.app .alpha-chip{display:none}
.hf.app.is-portrait .presence .nfps{display:none}
.hf.app.is-portrait .domchip{max-width:calc(100vw - 206px - var(--sl));min-width:0}
.hf.app.is-portrait .domchip>*{min-width:0}
.hf.app.is-portrait .domchip [data-k=domtxt]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf.app.is-portrait .domchip .dbar{min-width:24px}
/* Mais (30/09): o Alpha agora fica só aqui no celular; a faixa de eventos some com o menu aberto. */
.more-btn .alpha-ico{display:grid;place-items:center;border-radius:50%;font:800 28px/1 Georgia,"Times New Roman",serif;color:#2b1702;background:radial-gradient(circle at 35% 30%,#fff3b0,#f2c14e 45%,#b77b1c);box-shadow:0 0 0 2px #6b4611,0 0 10px rgba(255,190,80,.5);transition:transform .15s}
.more-btn .alpha-ico.big{width:44px;height:44px;font-size:28px;margin:0 auto}
[data-msheet] .gmbar{display:none!important}
/* Mercado só Épico para cima (30/09) */
.mk-rule{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:7px 10px;border-radius:8px;border:1px solid rgba(214,170,90,.3);background:rgba(214,170,90,.08);font-size:12.5px;color:#d9dee7}
.mk-rule img{width:22px;height:22px;image-rendering:pixelated}.mk-rule small{color:var(--muted)}
/* Filtros da Mochila arrumados (30/09, dono: "arrumar esses filtros"): 1ª linha = título, contagem, Equipar melhores e,
à direita, Raridade/Nível/Classe; 2ª linha = tipos, alinhados à esquerda; embaixo, um quadro com Marcar e a venda
automática (as duas opções juntas, à direita). */
.inv-bh{gap:8px 10px;padding:0 2px 10px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.07)}
.inv-bh .t-title,.inv-bh .inv-count,.inv-bh .inv-more,.inv-bh .inv-best{order:1}
.inv-bh .chips{order:2;width:100%;margin-left:0;justify-content:flex-start}
.inv-bh .inv-sel{order:3;width:100%;margin-left:0;justify-content:flex-start;gap:6px 14px}
/* Mochila larga: os três filtros sobem para a 1ª linha, à direita (sem sobrar buraco quando não cabem). */
.inv-bag{container-type:inline-size}
@container (min-width:880px){.inv-bh .inv-sel{order:1;width:auto;margin-left:auto;justify-content:flex-end}}
.inv-sel label span{white-space:nowrap}
.inv-sel select{min-width:0;max-width:150px}
.inv-quick{gap:6px 8px;margin:0 0 10px;padding:7px 9px;border-radius:9px;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.inv-quick .iq-autos{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin-left:auto}
.inv-quick .iq-autos .iq-auto{margin-left:0}
.hf.app .inv-bh .inv-sel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;margin-left:0}
.hf.app .inv-bh .inv-sel label{flex-direction:column;align-items:stretch;gap:2px;min-width:0;font-size:11px}
.hf.app .inv-bh .inv-sel select{width:100%;max-width:none;padding:0 6px}
.hf.app .inv-quick .iq-autos{margin-left:0;width:100%}
/* Avisos longos (30/09): o quadro cresce e quebra a linha em vez de cortar o texto. */
.toast{height:auto;min-height:62px;max-width:min(620px,calc(100% - 24px));padding:10px 18px;text-align:center;line-height:1.3}
/* Barra de baixo no PC com o botão PvP da conta ADMIN (30/09): os botões encolhem um pouco para caber todos. */
.hf.dock .bottombar .navbtn{flex:1 1 58px;min-width:0;max-width:58px}
.hf.dock .bottombar .navbtn span{font-size:10.5px;letter-spacing:-.01em}
.hf:not(.dock):not(.app) .bottombar .navbtn{flex:1 1 68px;min-width:0;max-width:68px}
/* PvP (30/09): tela no estilo de Eventos (PvpHub em hud.js) */
.pvh-hero{background-size:cover!important;background-position:center 38%!important;min-height:170px}
.ev-desk .pvh-hero{min-height:210px}
.pvh-note{padding:7px 10px;border-radius:9px;border:1px dashed rgba(242,193,78,.5);color:#f2d38a!important;background:rgba(242,193,78,.06)}
.pvh .evc-h>img[src*="av_arena"],.pvh .ev-art img[src*="av_arena"]{object-fit:cover;border-radius:10px;image-rendering:auto}
/* Feira de ouro (30/09): Mercado › Ouro (Views.mkGold no hud.js) */
.gx{display:flex;flex-direction:column;gap:10px;container-type:inline-size}
.gx-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@container (min-width:760px){.gx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gx-sell,.gx-col{padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.gx-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.gx-h img{width:26px;height:26px;image-rendering:pixelated}.gx-h b{font-size:15px;color:#ffe7a6}.gx-h .q-d{margin-left:auto;font-size:12px}
.gx-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gx-row label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted,#b9a98a);min-width:0}.gx-row .input{width:100%;box-sizing:border-box}
.gx-seg{display:flex;gap:4px}.gx-seg button{flex:1;height:38px;border-radius:6px;border:1px solid #6d4b24;background:#1a1209;color:#e9d6ac;font:700 12.5px inherit;font-family:inherit;cursor:pointer}.gx-seg button.on{background:#7a4f17;color:#fff;border-color:#c98c32}.gx-seg button:disabled{opacity:.45;cursor:default}
.gx-math{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;padding:6px 10px;border-radius:8px;background:rgba(255,215,90,.07);border:1px solid rgba(255,215,90,.25)}.gx-math b{color:#ffe7a6}
.gx-why{margin:0;padding:7px 10px;border-radius:8px;border:1px dashed rgba(242,193,78,.5);color:#f2d38a;background:rgba(242,193,78,.06);font-size:12.5px}
.gx-rules{margin:0;font-size:11.5px;line-height:1.45}
.gx-lot{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;background:rgba(0,0,0,.25);border:1px solid rgba(214,170,90,.18)}
.gx-lot.mine{border-color:rgba(95,192,255,.45);background:rgba(79,180,255,.07)}
.gx-lot img{width:26px;height:26px;image-rendering:pixelated}.gx-lt,.gx-lp{display:flex;flex-direction:column;min-width:0}.gx-lt b{font-size:14px;color:#ffe7a6}.gx-lt small,.gx-lp small{font-size:11px;color:var(--muted,#b9a98a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-lp{text-align:right}.gx-lp b{font-size:13.5px;white-space:nowrap}
.gx-lot .buy.sm{width:auto;padding:0 12px;white-space:nowrap}.gx-lot .buy.warn{filter:hue-rotate(-25deg) saturate(1.4)}
.gx-closed{display:flex;gap:12px;align-items:flex-start;padding:14px}.gx-closed img{width:44px;height:44px;image-rendering:pixelated}.gx-closed b{font-size:16px;color:#ffe7a6}.gx-closed p{margin:4px 0 0}
.hf.app .gx-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hf.app .gx-row label:last-child{grid-column:1/-1}
/* Pagamento em USDC com a carteira (30/09, dono: "já tem que abrir a carteira com integração") */
.wpay-apps{display:grid;gap:8px}
.wpay-app{display:flex!important;align-items:center;justify-content:center;gap:10px;text-decoration:none}
.wpay-app img{width:26px;height:26px;flex:none}
.wpay-note{font-size:12.5px;opacity:.85}
.wpay-note code,.wpay-man code{word-break:break-all}
.wpay-qr{display:flex;gap:14px;align-items:center;padding:10px;border-radius:10px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08)}
.wpay-qr img{width:150px;height:150px;flex:none;background:#fff;border-radius:8px;padding:6px;image-rendering:pixelated}
.wpay-qr p{font-size:13px}.wpay-qr b{display:block;font-size:15px;margin-bottom:4px}
.wpay-man summary,.buyp details summary{cursor:pointer}
@media (max-width:560px){.wpay-qr{flex-direction:column;text-align:center}}
/* Mapa grande (30/09, dono: "ajustar layout e centralizar"): nomes sem sobrepor e, no celular em pé, mapa no meio da tela
e maior que a largura (arrasta para os lados), abrindo com o herói no centro. */
.bm-poi.nolabel span{display:none}
.bm-poi.nolabel.peek span{display:block;z-index:3}
.hf.app .win-mapa .win-body{display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hf.app .bigmap-wrap{display:block;height:auto;max-height:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:4px}
.hf.app .bigmap-wrap::-webkit-scrollbar{display:none}
.hf.app.is-portrait .bigmap{--bmh:min(68vh,118vw);height:var(--bmh);width:calc(var(--bmh) * 4 / 3);max-width:none;aspect-ratio:auto}
.hf.app.is-portrait .bm-poi span{font-size:13px}
/* Painel do AUTO no celular (30/09, dono: "ficou muito grande no celular"): compacto, sem os textos longos, habilidades
em fichinhas lado a lado e rolagem dentro dele (a altura máxima vem do AutoPop.fit). */
.auto-pop{overflow-y:auto;overscroll-behavior:contain}
.hf.app .auto-pop{padding:8px 10px;font-size:12px;-webkit-overflow-scrolling:touch}
.hf.app .auto-pop .ap-n{display:none}
.hf.app .auto-pop .ap-h{font-size:13px;margin-bottom:4px;padding-right:34px}
.hf.app .auto-pop .ap-h img{width:18px;height:18px}
.hf.app .auto-pop .ap-row{margin:0 0 6px;line-height:1.25}
.hf.app .auto-pop .ap-f{margin:0 0 4px;gap:2px}
.hf.app .auto-pop .ap-sk{margin-top:2px;padding-top:6px;padding-right:0}
.hf.app .auto-pop .ap-skr{display:inline-flex;gap:4px;margin:0 4px 6px 0;padding:3px 6px;border-radius:8px;background:rgba(255,255,255,.06)}
.hf.app .auto-pop .ap-skr img{width:22px;height:22px}
.hf.app .auto-pop .ap-skr span{font-size:0}.hf.app .auto-pop .ap-skr span .num{font-size:12px}
.hf.app .auto-pop .ap-ok{height:34px;margin-top:4px}
/* Mapa das fases (30/09): só chefe e entrada com nome; marcador do chefe em vermelho; monstros menores e mais apagados. */
.bm-poi.quiet i{width:9px;height:9px;opacity:.85}
.bm-poi.boss i{background:#ff6b5a;box-shadow:0 0 0 2px #3a0b0b,0 0 10px rgba(255,107,90,.9)}
.bm-mob{width:6px;height:6px;margin:-3px 0 0 -3px;opacity:.75;box-shadow:0 0 0 1px #3a0b0b}
.bm-mob.boss{width:12px;height:12px;margin:-6px 0 0 -6px;opacity:1}
/* Mochila em abas no celular em pé (01/10, dono: "dividir em abas, está muita coisa"): Equipado, Mochila e Status.
Deitado e no computador continua tudo na mesma tela. */
.inv-tabs,.inv-tip{display:none}
.hf.app.is-portrait .inv-tabs{display:flex;gap:6px;position:sticky;top:-6px;z-index:4;margin:0 0 12px;padding:6px 0;background:#121a28;box-shadow:0 6px 10px -6px rgba(0,0,0,.6)}
.hf.app.is-portrait .inv-tabs .tab{flex:1;min-width:0;height:40px;padding:0 6px;font-size:14px;display:flex;align-items:center;justify-content:center;gap:6px}
.hf.app.is-portrait .inv-tabs .tab b{font-size:12px;padding:1px 6px;border-radius:9px;background:rgba(0,0,0,.35)}
.hf.app.is-portrait .inv[data-invsec="equip"] .inv-hero,.hf.app.is-portrait .inv[data-invsec="equip"] .inv-bag{display:none}
.hf.app.is-portrait .inv[data-invsec="stats"] .inv-doll,.hf.app.is-portrait .inv[data-invsec="stats"] .inv-bst,.hf.app.is-portrait .inv[data-invsec="stats"] .inv-bag{display:none}
.hf.app.is-portrait .inv[data-invsec="bag"] .inv-left{display:none}
.hf.app.is-portrait .inv[data-invsec="stats"] .inv-hero{margin-top:0}
.hf.app.is-portrait .inv-tip{display:block;margin:0 0 6px}
.hf.app.is-portrait .inv-tip .q-d{margin:0;font-size:12px;line-height:1.4}
.hf.app.is-portrait .inv[data-invsec="equip"] .inv-doll .inv-slot:not(.pot),.hf.app.is-portrait .inv[data-invsec="equip"] .inv-doll .inv-mid .inv-slot:not(.pot){max-width:72px}
.hf.app.is-portrait .inv[data-invsec="equip"] .inv-doll{row-gap:30px;padding-top:6px}
/* Sets (01/10): bloco do set na ficha do item (cor do set em --sc) e marca nas peças de set da Mochila */
.set-box{margin:6px 0;padding:8px 10px;border-radius:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--sc) 16%,#0d1320),#0d1320);border:1px solid color-mix(in srgb,var(--sc) 55%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--sc) 22%,transparent) inset}
.set-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.set-h b{color:var(--sc);font-size:14px;text-shadow:0 0 8px color-mix(in srgb,var(--sc) 60%,transparent)}
.set-h em{font-style:normal;font-weight:700;color:#fff;background:color-mix(in srgb,var(--sc) 35%,#0d1320);border-radius:999px;padding:1px 9px;font-size:12px}
.set-ps{display:grid;grid-template-columns:1fr;gap:3px}
.set-p{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#6f7787;opacity:.75}
.set-p img{width:24px;height:24px;object-fit:contain;filter:grayscale(1) brightness(.7);image-rendering:pixelated}
.set-p.have{color:#c9d2e0;opacity:1}.set-p.have img{filter:none}
.set-p.on{color:var(--sc);opacity:1;font-weight:700}.set-p.on img{filter:drop-shadow(0 0 4px var(--sc))}
.set-b{display:flex;justify-content:space-between;gap:8px;margin-top:5px;padding-top:5px;border-top:1px dashed rgba(255,255,255,.12);font-size:12.5px;color:#7d8697}
.set-b b{font-weight:600}
.set-b.on{color:#7fe08a}.set-b.on b{color:#7fe08a;text-shadow:0 0 6px rgba(127,224,138,.5)}
.set-r{margin-top:5px;font-size:11.5px;line-height:1.35;color:#b9a98a;opacity:.85}
.set-go{margin-top:6px;font-size:12.5px;font-weight:700;color:#7fe08a;text-align:center;animation:setgo 1.6s ease-in-out infinite}
@keyframes setgo{50%{opacity:.55}}
.hero-look.lpc{image-rendering:pixelated;object-fit:contain}
.inv-pt img.hero-look.lpc{width:min(100%,220px);height:auto;max-height:240px}
/* ---------- Classes (01/10): Mestre das Classes ---------- */
.cl-w{display:flex;flex-direction:column;gap:12px}
.cl-intro{margin:0}
.cl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cl-card{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;position:relative}
.cl-card.cur{box-shadow:0 0 0 2px #f2c14e,0 0 18px -4px rgba(242,193,78,.6)}
.cl-card.next{box-shadow:0 0 0 2px #c77dff,0 0 18px -4px rgba(199,125,255,.6)}
.cl-card.done{opacity:.85}
.cl-top{display:flex;align-items:center;gap:10px}
.cl-art{width:84px;height:84px;flex:none;border-radius:10px;background:radial-gradient(circle at 50% 70%,rgba(255,220,140,.18),rgba(0,0,0,.25));image-rendering:pixelated;object-fit:contain}
.cl-n{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c9b38a}
.cl-nm{display:block;font-size:19px;line-height:1.15;color:#ffe9b0}
.cl-tag{display:inline-block;margin-top:5px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800}
.cl-tag.cur{background:#f2c14e;color:#2a1605}.cl-tag.next{background:#7b3fb8;color:#fff}.cl-tag.done{background:#2f6b3a;color:#dfffe3}.cl-tag.lock{background:#2b3442;color:#b8c2cf}
.cl-req{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}
.cl-req li{display:flex;gap:7px;align-items:center}
.cl-req i{font-style:normal;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;flex:none}
.cl-req li.good i{background:#2f9e4f;color:#fff}.cl-req li.bad i{background:#7a2b2b;color:#ffd0d0}
.cl-req li.bad span{color:#ffb3a6}
.cl-sets{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.cl-sets small{width:100%;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9aa6b6}
.cl-sets span{padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.07);font-size:12px;color:#e8e1d0}
.cl-bonus{margin:0;font-size:13px;color:#9fe3b0;font-weight:700}
.cl-go{margin-top:auto}
.cl-go.sure{filter:hue-rotate(-20deg) brightness(1.1)}
.hf.app .cl-grid{grid-template-columns:1fr}
.hf.app .cl-art{width:64px;height:64px}
/* Classes ainda só da equipe (01/10): o Mestre das Classes diz que abre em breve. */
.cl-soon{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:18px 12px}.cl-soon p{margin:0;max-width:420px}
@media (max-width:820px){.cl-grid{grid-template-columns:1fr}}
.hpn-clr{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.hpn-clr b{font-size:16px;color:#ffe9b0}.hpn-clr small{color:#b8c2cf;flex:1}
/* Aviso da equipe (01/10): várias contas na mesma internet */
.aviso-w{display:flex;gap:14px;align-items:flex-start;padding:4px 2px}
.aviso-ic{width:56px;height:56px;flex:none}
.aviso-t{margin:0 0 10px;font-size:16px;line-height:1.5;color:#ffd6c9;font-weight:700}
.hf.app .aviso-w{flex-direction:column;align-items:center;text-align:center}
/* Etapas das missões da guild (01/10). */
.gd-stg{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;background:rgba(242,193,78,.14);color:#f2c14e;font-size:11px;font-weight:700;vertical-align:1px}
/* ---------- Molduras e títulos (01/10, dono: "refazer essas molduras e títulos, mais chamativo para o usuário") ----------
Moldura: anel em gradiente que gira em volta do retrato, 4 pedras nos cantos que piscam e o brilho na cor dela.
Título: faixa com fundo na cor do brilho, letra com contorno e um reflexo que passa de tempos em tempos. Vale em todo
lugar (Loja, Meu visual, perfil, rankings). Loja › Visual: cartão com vitrine colorida e raios girando. */
@property --fa{syntax:'';inherits:false;initial-value:0deg}
.ar-av.fr-ouro,.fr-ouro{--f1:#fff6b0;--f2:#ffcf4a;--f3:#a8650a;--f4:#ffe27a;--fg:#fff2a8;--fl:rgba(255,200,60,.85);box-shadow:0 0 10px var(--fl);border-radius:6px;animation:frGlow 2.4s ease-in-out infinite}
.ar-av.fr-gelo,.fr-gelo{--f1:#ffffff;--f2:#9eeaff;--f3:#2a8ed0;--f4:#d8f8ff;--fg:#c8f4ff;--fl:rgba(120,220,255,.85);box-shadow:0 0 10px var(--fl);border-radius:6px;animation:frGlow 2.4s ease-in-out infinite}
.ar-av.fr-sombra,.fr-sombra{--f1:#e0c4ff;--f2:#8a4dff;--f3:#24073f;--f4:#b07cff;--fg:#d6b2ff;--fl:rgba(150,70,255,.85);box-shadow:0 0 10px var(--fl);border-radius:6px;animation:frGlow 2.4s ease-in-out infinite}
.ar-av.fr-divina,.fr-divina{--f1:#ffffff;--f2:#fff1b0;--f3:#7ff6ff;--f4:#ffd66b;--fg:#ffffff;--fl:rgba(255,240,170,.95);box-shadow:0 0 10px var(--fl);border-radius:6px;animation:frGlow 2.4s ease-in-out infinite}
.ar-av.fr-alpha,.fr-alpha{--f1:#fff0b8;--f2:#8a4dff;--f3:#f2c14e;--f4:#b98aff;--fg:#ffe9a0;--fl:rgba(160,90,255,.8);box-shadow:0 0 10px var(--fl);border-radius:6px;animation:frGlow 2.4s ease-in-out infinite}
.ar-av.fr-fundador,.fr-fundador{--f1:#fff4c4;--f2:#d99a14;--f3:#7a3fd0;--f4:#ffd35a;--fg:#fff4c4;--fl:rgba(255,200,60,.8);box-shadow:0 0 10px var(--fl);border-radius:6px;animation:frGlow 2.4s ease-in-out infinite}
.ar-av.fr-arena,.fr-arena{--f1:#ffe08a;--f2:#b3261e;--f3:#ff7a3a;--f4:#ffcf5a;--fg:#ffd27a;--fl:rgba(255,120,60,.8);box-shadow:0 0 10px var(--fl);border-radius:6px;animation:frGlow 2.4s ease-in-out infinite}
.ar-av.fr-recrutador,.fr-recrutador{--f1:#ffe9a0;--f2:#2f9e57;--f3:#7fe0a0;--f4:#ffd66b;--fg:#c8ffd8;--fl:rgba(80,220,140,.75);box-shadow:0 0 10px var(--fl);border-radius:6px;animation:frGlow 2.4s ease-in-out infinite}
.ar-av.fr-guilda,.fr-guilda{--f1:#ffffff;--f2:#5a3fb0;--f3:#a58cff;--f4:#e6dcff;--fg:#e6dcff;--fl:rgba(140,100,255,.75);box-shadow:0 0 10px var(--fl);border-radius:6px;animation:frGlow 2.4s ease-in-out infinite}
:is(.fr-ouro,.fr-gelo,.fr-sombra,.fr-divina,.fr-alpha,.fr-fundador,.fr-arena,.fr-recrutador,.fr-guilda,.fr-campeao){position:relative;isolation:isolate}
:is(.fr-ouro,.fr-gelo,.fr-sombra,.fr-divina,.fr-alpha,.fr-fundador,.fr-arena,.fr-recrutador,.fr-guilda,.fr-campeao)::before{content:'';position:absolute;inset:-5px;border-radius:9px;padding:3px;background:conic-gradient(from var(--fa),var(--f1),var(--f2),var(--f3),var(--f4),var(--f1));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:frSpin 3.2s linear infinite;pointer-events:none;z-index:2}
:is(.fr-ouro,.fr-gelo,.fr-sombra,.fr-divina,.fr-alpha,.fr-fundador,.fr-arena,.fr-recrutador,.fr-guilda,.fr-campeao)::after{content:'';position:absolute;inset:-8px;pointer-events:none;z-index:3;background:radial-gradient(circle,#fff 0 1.2px,var(--fg) 1.7px 3.2px,rgba(0,0,0,.65) 3.6px 4.3px,transparent 4.7px) 0 0/10px 10px no-repeat,radial-gradient(circle,#fff 0 1.2px,var(--fg) 1.7px 3.2px,rgba(0,0,0,.65) 3.6px 4.3px,transparent 4.7px) 100% 0/10px 10px no-repeat,radial-gradient(circle,#fff 0 1.2px,var(--fg) 1.7px 3.2px,rgba(0,0,0,.65) 3.6px 4.3px,transparent 4.7px) 0 100%/10px 10px no-repeat,radial-gradient(circle,#fff 0 1.2px,var(--fg) 1.7px 3.2px,rgba(0,0,0,.65) 3.6px 4.3px,transparent 4.7px) 100% 100%/10px 10px no-repeat;animation:frGem 2s ease-in-out infinite}
@keyframes frSpin{to{--fa:360deg}}
@keyframes frGlow{50%{box-shadow:0 0 18px var(--fl),0 0 4px var(--fl)}}
@keyframes frGem{50%{filter:brightness(1.7) drop-shadow(0 0 3px var(--fg))}}
.fr-divina::before{animation-duration:2s}.fr-sombra::before{animation-duration:4.5s}
.vz-fr{overflow:visible}.vz-fr img{border-radius:5px}
.ar-title[class*=" g-"]{position:relative;overflow:hidden;display:inline-block;font-weight:800;letter-spacing:.02em;border-radius:5px;padding:1px 8px;background:linear-gradient(180deg,color-mix(in srgb,var(--tg) 34%,#150f22),color-mix(in srgb,var(--tg) 12%,#0b0d18));text-shadow:0 1px 0 #000,0 0 6px var(--tg);line-height:1.45}
.ar-title[class*=" g-"]::after{content:'';position:absolute;top:-2px;bottom:-2px;width:38%;left:-70%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:ttShine 3.4s ease-in-out infinite;pointer-events:none}
@keyframes ttShine{0%,55%{left:-70%}100%{left:140%}}
/* Loja › Visual: vitrine */
.vz-grid .vz-card{position:relative;overflow:hidden;padding:0;gap:0;border-color:color-mix(in srgb,var(--vc,#ffcf4a) 35%,rgba(214,170,90,.2));transition:transform .15s,box-shadow .15s}
.vz-grid .vz-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.45),0 0 16px color-mix(in srgb,var(--vc,#ffcf4a) 30%,transparent)}
.vz-grid .vz-card.on{border-color:#5fcf6a}
.vz-show{position:relative;height:118px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 58%,color-mix(in srgb,var(--vc,#ffcf4a) 42%,#0f1426) 0%,color-mix(in srgb,var(--vc,#ffcf4a) 10%,#0c1120) 52%,#0a0f1c 80%);border-bottom:1px solid color-mix(in srgb,var(--vc,#ffcf4a) 40%,transparent)}
.vz-rays{position:absolute;left:50%;top:58%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;background:repeating-conic-gradient(color-mix(in srgb,var(--vc,#ffcf4a) 26%,transparent) 0 7deg,transparent 7deg 22deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 64%);mask:radial-gradient(circle,#000 18%,transparent 64%);animation:vzRays 16s linear infinite;pointer-events:none}
.vz-grid .vz-card:hover .vz-rays{animation-duration:5s}
@keyframes vzRays{to{transform:rotate(360deg)}}
.vz-show .vz-art{position:relative;width:auto;height:auto;background:none;border-radius:0}
.vz-show .vz-fr{width:66px;height:66px;background:#0d1628}.vz-show .vz-fr img{width:66px;height:66px}
.vz-show .vz-art>img{width:92px;height:92px}
.vz-show .vz-art{max-width:calc(100% - 16px)}.vz-show .ar-title{font-size:17px;padding:4px 14px;border-radius:7px;white-space:normal;text-align:center;max-width:none}
.vz-tag{position:absolute;top:8px;right:8px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:800;background:#2f9e57;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4)}.vz-tag.own{background:#3a4a6e}
.vz-grid .vz-card .vz-top{padding:10px 12px 0}
.vz-grid .vz-card .vz-t b{font-size:15px;color:#fff1cf}
.vz-grid .vz-card .vz-b{padding:8px 12px 12px}
.hf.app .vz-grid .vz-card{display:grid;grid-template-columns:104px 1fr;grid-template-rows:1fr auto;align-items:stretch}
.hf.app .vz-grid .vz-card .vz-show{grid-row:1/3;height:auto;min-height:104px;border-bottom:0;border-right:1px solid color-mix(in srgb,var(--vc,#ffcf4a) 40%,transparent)}
.hf.app .vz-grid .vz-card .vz-b{flex-direction:row;align-items:center;justify-content:space-between}
.hf.app .vz-show .ar-title{font-size:13px;padding:3px 8px;white-space:normal;text-align:center}
.hf.app .vz-show .vz-fr,.hf.app .vz-show .vz-fr img{width:56px;height:56px}
@media (prefers-reduced-motion:reduce){:is(.fr-ouro,.fr-gelo,.fr-sombra,.fr-divina,.fr-alpha,.fr-fundador,.fr-arena,.fr-recrutador,.fr-guilda,.fr-campeao),:is(.fr-ouro,.fr-gelo,.fr-sombra,.fr-divina,.fr-alpha,.fr-fundador,.fr-arena,.fr-recrutador,.fr-guilda,.fr-campeao)::before,:is(.fr-ouro,.fr-gelo,.fr-sombra,.fr-divina,.fr-alpha,.fr-fundador,.fr-arena,.fr-recrutador,.fr-guilda,.fr-campeao)::after,.ar-title[class*=" g-"]::after,.vz-rays{animation:none}}
.hf.app .vz-tag{top:auto;bottom:6px;right:50%;transform:translateX(50%);white-space:nowrap}
/* Dica das skills (01/10): quadro no estilo do balão do AUTO, em cima da skill. */
.sk-tip{position:fixed;z-index:9000;font-family:"HF Sans","Signika",system-ui,sans-serif;font-weight:600;width:max-content;max-width:300px;padding:10px 12px;border-width:12px;border-image-width:12px;font-size:12.5px;line-height:1.4;color:#d6dbe3;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.55);animation:stIn .12s ease-out}
.sk-tip[hidden]{display:none}
@keyframes stIn{from{opacity:0;transform:translateY(4px)}}
.sk-tip .st-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sk-tip .st-h img{width:30px;height:30px;border-radius:5px;image-rendering:pixelated;box-shadow:0 0 0 1px rgba(242,193,78,.5)}
.sk-tip .st-h b{font-size:15px;color:var(--gold);flex:1}
.sk-tip .st-k{padding:1px 8px;border-radius:5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font:800 12px "HF Sans","Signika",system-ui;color:#fff}
.sk-tip p{margin:0 0 4px}
.sk-tip .tm{color:#8fc4ff}.sk-tip .td{color:#ff9d8a}.sk-tip .tc{color:#ffd35a}
.sk-tip .st-on{color:#7fe08f;font-size:12px;margin:6px 0 0}.sk-tip .st-off{color:#ffb4a6;font-size:12px;margin:6px 0 0}.sk-tip .st-lk{color:#c9b98f;font-size:12px;margin:6px 0 0}
/* Heróis (01/10): retratos no desenho novo (LPC), maiores e nítidos. */
.hc-pic.lpc{width:84px;height:84px}.hc-card .hc-pic.lpc .ic{width:76px;height:76px;image-rendering:pixelated;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.hpn-pic img[data-lpc],.hpn-sk img[data-lpc]{image-rendering:pixelated}
/* Mercado › Anunciar (01/10): o que falta para vender (carteira e, no Beta, o Discord). */
.mk-req{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;margin:0 0 10px;border-radius:10px;background:rgba(255,182,64,.08);border:1px solid rgba(255,182,64,.4)}
.mk-req.ok{background:rgba(95,207,106,.07);border-color:rgba(95,207,106,.4)}
.mk-req>b{font-size:14px;color:#ffe0a0;margin-right:4px}.mk-req>small{flex-basis:100%;color:var(--muted);font-size:12px}
.mk-rq{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);font-size:13px;color:#e8dcc0}
.mk-rq img{width:22px;height:22px;image-rendering:pixelated}.mk-rq em{font-style:normal;color:#7fe08f;font-weight:800}.mk-rq.on{border-color:rgba(95,207,106,.45)}.mk-rq small{color:var(--muted)}
/* Arena (01/10): retrato do herói novo nítido. */
.ar-por.lpc img,.vs-por.lpc img{image-rendering:pixelated}
/* Arena › contagem e "Lutem!" (01/10): anel que abre, cor esquentando (3 dourado, 2 laranja, 1 vermelho) e cortes cruzados. */
.ar-pop .cring{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:6px solid var(--cc,#ffd76a);box-shadow:0 0 24px var(--cc,#ffd76a),inset 0 0 18px var(--cc,#ffd76a);animation:cRing .7s cubic-bezier(.2,.8,.3,1) forwards}
.ar-pop .cring.c2{animation-delay:.12s;border-width:3px;opacity:0}
@keyframes cRing{0%{transform:scale(.25);opacity:1}100%{transform:scale(2.3);opacity:0}}
.ar-pop.count.n3{--cc:#ffe9a0}.ar-pop.count.n2{--cc:#ffad4a}.ar-pop.count.n1{--cc:#ff5a4f}
.ar-pop.count.n2 b{color:#ffd6a0}.ar-pop.count.n1 b{color:#ffc2b8;text-shadow:0 5px 0 #5a0d0a,0 0 34px rgba(255,80,60,.95)}
.ar-pop.fight{--cc:#ffb640}
.ar-pop .fslash{position:absolute;left:-10%;right:-10%;top:50%;height:10px;margin-top:-5px;background:linear-gradient(90deg,transparent,#fff 40%,#ffd76a 60%,transparent);box-shadow:0 0 18px #ffb640;transform-origin:center;animation:fSlash .5s ease-out forwards}
.ar-pop .fslash.a{--r:-14deg}.ar-pop .fslash.b{--r:14deg;animation-delay:.06s}
@keyframes fSlash{0%{transform:rotate(var(--r)) scaleX(0);opacity:1}45%{transform:rotate(var(--r)) scaleX(1);opacity:1}100%{transform:rotate(var(--r)) scaleX(1);opacity:0}}
.hf.app .ar-pop .cring{width:110px;height:110px;margin:-55px 0 0 -55px}
@media (prefers-reduced-motion:reduce){.ar-pop .cring,.ar-pop .fslash{display:none}}
/* Skins andando (01/10): 8 passos por lado; troca de lado a cada 2 voltas (frente, direita, costas, esquerda). */
.sk-spr.sk-walk{background-size:calc(var(--s) * 8) calc(var(--s) * 4);background-position:0 0;animation:sk-wx .76s steps(8) infinite,sk-wy 6.08s steps(4) infinite}
@keyframes sk-wx{from{background-position-x:0}to{background-position-x:calc(var(--s) * -8)}}
@keyframes sk-wy{from{background-position-y:0}to{background-position-y:calc(var(--s) * -4)}}
@media (prefers-reduced-motion:reduce){.sk-spr.sk-walk{animation:none}}
.al-skg .al-duo .sk-spr.sk-walk{--s:88px}.hf.app .al-skg .al-duo .sk-spr.sk-walk{--s:64px}
/* Sets à vista (01/10, dono: "como o usuário sabe se tem um conjunto de 4 peças? quando completa tem algum lugar falando?"):
pedrinha na cor do set no canto do ícone, resumo "Sets vestidos" na Mochila e o aviso grande ao ligar o bônus. */
.ithumb .set-mk{position:absolute;left:-3px;bottom:-3px;z-index:3;width:11px;height:11px;transform:rotate(45deg);border-radius:2px;pointer-events:none;background:linear-gradient(135deg,#fff 0 16%,var(--sc) 32% 68%,color-mix(in srgb,var(--sc) 50%,#000) 100%);box-shadow:0 0 0 1.5px #0b1220,0 0 6px var(--sc)}
.inv-slot .ithumb .set-mk{left:-6px;bottom:-6px;width:12px;height:12px}
.set-sum{padding:8px 10px 6px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(214,170,90,.22)}
.ss-h{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#d9b56a;margin-bottom:2px}
.ss-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:2px 8px;padding:5px 0;border-top:1px solid rgba(255,255,255,.06)}
.ss-h+.ss-row{border-top:0}
.ss-row b{color:var(--sc);font-size:13px;text-shadow:0 0 6px color-mix(in srgb,var(--sc) 50%,transparent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-pips{display:flex;gap:4px}
.ss-pips i{width:8px;height:8px;transform:rotate(45deg);border-radius:2px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.ss-pips i.on{background:var(--sc);box-shadow:0 0 5px var(--sc)}
.ss-row em{font-style:normal;font-size:12px;font-weight:800;color:#fff}
.ss-row small{grid-column:1/-1;font-size:11.5px;line-height:1.25;color:#9aa4b5}
.ss-row.half small,.ss-row.full small{color:#7dff9a;font-weight:700}
.ss-row.full{margin:2px -6px;padding:5px 6px;border-radius:8px;border-top-color:transparent;background:linear-gradient(90deg,color-mix(in srgb,var(--sc) 22%,transparent),transparent)}
.set-sum .q-d{margin:2px 0 0;font-size:11.5px;line-height:1.3}
.set-pop{position:absolute;left:50%;top:16%;z-index:90;width:min(440px,calc(100% - 24px));padding:16px 18px 14px;border-radius:16px;text-align:center;pointer-events:none;overflow:hidden;isolation:isolate;transform:translateX(-50%);
background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--sc) 40%,#121a2c) 0%,#0e1424 72%);border:2px solid var(--sc);
box-shadow:0 0 0 1px #000,0 0 30px color-mix(in srgb,var(--sc) 55%,transparent),0 18px 40px rgba(0,0,0,.6);animation:spIn .55s cubic-bezier(.2,1.4,.4,1) both}
.set-pop.out{animation:spOut .55s ease forwards}
.sp-rays{position:absolute;left:50%;top:48%;width:560px;height:560px;margin:-280px 0 0 -280px;z-index:-1;border-radius:50%;opacity:.85;background:repeating-conic-gradient(color-mix(in srgb,var(--sc) 24%,transparent) 0 8deg,transparent 8deg 24deg);-webkit-mask:radial-gradient(circle,#000 8%,transparent 62%);mask:radial-gradient(circle,#000 8%,transparent 62%);animation:vzRays 14s linear infinite}
.sp-k{font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#fff;text-shadow:0 0 8px var(--sc),0 1px 0 #000}
.sp-n.t-title{margin-top:2px;font-size:26px;line-height:1.15;color:var(--sc);text-shadow:0 2px 0 #000,0 0 14px color-mix(in srgb,var(--sc) 70%,transparent)}
.sp-n em{font-family:inherit;font-style:normal;font-size:14px;color:#fff;background:color-mix(in srgb,var(--sc) 35%,#0d1320);border-radius:999px;padding:1px 9px;vertical-align:5px;text-shadow:none}
.sp-ps{display:flex;justify-content:center;gap:10px;margin:10px 0 9px}
.sp-p{width:54px;height:54px;display:grid;place-items:center;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);filter:grayscale(1) brightness(.5)}
.sp-p img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated}
.sp-p.on{animation:spLit .5s ease both;animation-delay:var(--d)}
.sp-b{display:inline-block;padding:4px 14px;border-radius:999px;background:rgba(0,0,0,.45);border:1px solid color-mix(in srgb,var(--sc) 60%,transparent);color:#7dff9a;font-weight:800;font-size:14px}
.sp-h{margin-top:7px;font-size:12px;color:#b8c2cf}
.set-pop.full{border-width:3px;top:14%}
.set-pop.full .sp-n.t-title{font-size:30px}
.set-pop.full::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%);animation:spShine 1.3s 1.1s ease-out forwards}
@keyframes spIn{0%{opacity:0;transform:translateX(-50%) translateY(-18px) scale(.6)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes spOut{to{opacity:0;transform:translateX(-50%) translateY(-24px) scale(.96)}}
@keyframes spLit{0%{filter:grayscale(1) brightness(.5);transform:scale(1)}55%{filter:brightness(1.7);transform:scale(1.25)}100%{filter:none;transform:scale(1);border-color:var(--sc);box-shadow:0 0 12px var(--sc),inset 0 0 10px color-mix(in srgb,var(--sc) 40%,transparent)}}
@keyframes spShine{to{transform:translateX(120%)}}
.hf.app .set-pop{top:calc(var(--st) + 90px)}
.hf.app .set-pop .sp-n.t-title{font-size:22px}.hf.app .sp-p{width:46px;height:46px}.hf.app .sp-p img{width:38px;height:38px}
@media (prefers-reduced-motion:reduce){.set-pop,.set-pop *,.set-pop::after{animation-duration:.01s!important;animation-delay:0s!important}}
/* Retrato do topo (01/10, dono: "aqui vamos melhorar, está feio"): a borda do quadro (14 px) apertava o herói novo, que ficava
pequeno e cortado embaixo. Agora o rosto ocupa o retrato inteiro, com fundo azul iluminado, aro dourado e cantos redondos;
as molduras da Loja (anel girando e pedras) continuam por fora. */
.hf .hero-card .portrait{border:0!important;border-image:none!important;padding:0;border-radius:12px;overflow:visible;cursor:pointer;
background:radial-gradient(circle at 50% 40%,#34507f 0%,#1b2a48 52%,#0c1322 100%);outline:2px solid #c9a24f;outline-offset:-2px;
box-shadow:0 0 0 1px #2a1c08,0 4px 10px rgba(0,0,0,.55);transition:transform .12s,filter .12s}
.hf .hero-card .portrait:hover{filter:brightness(1.12);transform:translateY(-1px)}
.hf .hero-card .portrait img{width:100%!important;height:100%!important;max-width:none;border-radius:12px;object-fit:cover;object-view-box:inset(15% 9% 0 9%);image-rendering:pixelated}
.hf .hero-card .portrait img:not([data-lpc]){object-view-box:none;image-rendering:auto}
.hf .hero-card .portrait::selection{background:none}
.hf .hero-card .portrait:is(.fr-ouro,.fr-gelo,.fr-sombra,.fr-divina,.fr-alpha,.fr-fundador,.fr-arena,.fr-recrutador,.fr-guilda,.fr-campeao){border-radius:12px;outline-color:rgba(0,0,0,.55);outline-width:1px;outline-offset:-1px}
.hf .hero-card .portrait:is(.fr-ouro,.fr-gelo,.fr-sombra,.fr-divina,.fr-alpha,.fr-fundador,.fr-arena,.fr-recrutador,.fr-guilda,.fr-campeao)::before{border-radius:16px}
.hf.app .hero-card .portrait{border-radius:10px}.hf.app .hero-card .portrait img{border-radius:10px}
/* Mochila: palco do herói (01/10, dono: "melhorar esse espaço e colocar um botão remover tudo"; "deixar espaço para a asa").
Em cima o quadrado das asas (× tira), no meio o herói maior com as asas atrás e o chão iluminado, embaixo nome, classe e
nível e o "Remover tudo" (2 toques). */
.hf .inv-pt{position:relative;overflow:hidden;isolation:isolate;width:100%;max-width:210px;min-width:0;align-self:stretch;border:0!important;border-image:none!important;border-radius:14px;padding:10px 8px 8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;
background:radial-gradient(ellipse 80% 45% at 50% 0%,rgba(255,214,120,.18),transparent 70%),linear-gradient(180deg,#22345a 0%,#17233e 60%,#0e1628 100%);outline:1px solid #34446a;outline-offset:-1px;box-shadow:inset 0 0 26px rgba(0,0,0,.5)}
.ip-beam{position:absolute;left:50%;top:-6%;width:84%;height:92%;transform:translateX(-50%);z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(255,230,160,.2),rgba(255,230,160,0) 92%);clip-path:polygon(36% 0,64% 0,100% 100%,0 100%);animation:ipBeam 5s ease-in-out infinite}
@keyframes ipBeam{50%{opacity:.6}}
.ip-floor{position:absolute;left:50%;bottom:62px;width:84%;height:26px;transform:translateX(-50%);z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,rgba(242,193,78,.5),rgba(242,193,78,.14) 55%,transparent 72%)}
.ip-wing{position:relative;z-index:2;width:54px;height:54px;flex:none;padding:0;display:grid;place-items:center;border-radius:12px;cursor:pointer;color:inherit;background:rgba(10,16,30,.55);border:1px dashed rgba(201,162,79,.5);transition:transform .12s,filter .12s}
.ip-wing.has{border:1px solid #c9a24f;background:radial-gradient(circle,rgba(255,214,120,.28),rgba(10,16,30,.6) 70%);box-shadow:0 0 12px rgba(255,200,80,.25)}
.ip-wing img{width:42px;height:42px;image-rendering:pixelated;pointer-events:none}
.ip-wing:not(.has) img{filter:grayscale(1) brightness(.7);opacity:.4}
.ip-wing:hover{transform:translateY(-1px);filter:brightness(1.15)}
.ip-wing .x{position:absolute;top:-7px;right:-7px;z-index:2;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800;line-height:1;color:#fff;background:#b8322a;box-shadow:0 0 0 2px #2a0d0b;cursor:pointer}
.ip-wing .x:hover{background:#e0443a;transform:scale(1.1)}
.ip-wl{font-size:10.5px;color:var(--muted);line-height:1;margin-bottom:2px}
.ip-hero{position:relative;flex:1;min-height:0;width:100%;display:flex;align-items:flex-end;justify-content:center}
.ip-hero{container-type:size}
.ip-fig{position:relative;width:min(100%,176px);aspect-ratio:1;display:grid;place-items:end center}
@supports (width:1cqh){.ip-fig{width:min(100cqw,100cqh,176px);height:min(100cqw,100cqh,176px);aspect-ratio:auto}}
.ip-fig>:not(.ip-wings){position:relative;z-index:1}
.hf .ip-fig img.hero-look.lpc{width:100%;height:100%;max-height:none;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.5))}
.ip-wings{position:absolute!important;left:12%;top:12%;width:76%;z-index:0!important;image-rendering:pixelated;filter:drop-shadow(0 0 8px rgba(255,220,140,.35));animation:ipFlap 2.6s ease-in-out infinite;pointer-events:none}
@keyframes ipFlap{50%{transform:translateY(-3px) scaleX(1.05)}}
.ip-nm{display:flex;flex-direction:column;align-items:center;line-height:1.15;max-width:100%;margin-top:-2px}
.ip-nm b{font-size:13px;color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-nm small{font-size:11px;color:#f2c14e;font-weight:700;white-space:nowrap}
.ip-off{width:100%;height:27px;flex:none;margin-top:4px;border-radius:8px;border:1px solid rgba(232,90,80,.55);background:rgba(120,24,20,.35);color:#ffb3aa;font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:background .12s,color .12s}
.ip-off:hover:not(:disabled){background:rgba(160,30,24,.6);color:#fff}
.ip-off.sure{background:#b8322a;color:#fff;border-color:#ff8a7a;animation:ipPulse .8s ease-in-out infinite}
@keyframes ipPulse{50%{box-shadow:0 0 0 3px rgba(255,120,100,.35)}}
.ip-off:disabled{opacity:.35;cursor:default}
.hf.app .inv-pt{width:100%;max-width:180px}
.hf.app .ip-wing{width:46px;height:46px}.hf.app .ip-wing img{width:36px;height:36px}
.inv-offall{display:none}
.hf.app.is-portrait .inv-offall{display:block;margin:4px auto 0}
@media (prefers-reduced-motion:reduce){.ip-beam,.ip-wings,.ip-off.sure{animation:none}}
.hf .inv-pt img.ip-wings{width:76%;height:auto;max-height:none}
.hf.app .ip-wing{width:40px;height:40px}.hf.app .ip-wing img{width:32px;height:32px}.hf.app .ip-wl{display:none}
.hf.app .inv-pt{padding:6px 6px 6px}.hf.app .ip-off{height:24px;font-size:11.5px}
/* Janela Heróis (01/10, dono: "está muito cheio, faça um layout bonito para o jogador ver seus heróis"): cartões limpos à
esquerda (palco na cor do papel, retrato grande, nome, classe e nível, Jogar) e o herói tocado no painel da direita. */
.hs2{grid-template-columns:minmax(0,1fr) 400px;gap:16px}
.hs2 .hs-step{font-size:16px}
.hr-cats{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));margin:0 0 12px}
.hr-cats .ig-cat{height:42px;padding:0 6px;font-size:12.5px;gap:5px}
.hr-cats .ig-cat img{width:22px;height:22px;border-radius:4px}
.hr-none{grid-column:1/-1;margin:8px 0;text-align:center}
.hr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.hr-card{--rc:#ff6b5a;position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:0 6px 10px;border-radius:14px;overflow:hidden;cursor:pointer;text-align:center;min-width:0;
background:linear-gradient(180deg,#18233c,#111a2e);border:1px solid rgba(255,255,255,.09);box-shadow:0 4px 12px rgba(0,0,0,.35);transition:transform .14s,box-shadow .14s,border-color .14s}
.hr-card.role-tank{--rc:#5aa6ff}.hr-card.role-healer{--rc:#4fe07a}.hr-card.role-assassin{--rc:#c07bff}
.hr-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--rc) 65%,transparent);box-shadow:0 10px 22px rgba(0,0,0,.45),0 0 14px color-mix(in srgb,var(--rc) 30%,transparent)}
.hr-card:focus-visible{outline:2px solid #ffd66b;outline-offset:2px}
.hr-card.view{border-color:var(--rc);box-shadow:0 0 0 1px var(--rc),0 0 18px color-mix(in srgb,var(--rc) 45%,transparent)}
.hr-card.field{background:linear-gradient(180deg,#2a2412,#151a28 60%)}
.hr-card.picking{opacity:.6;pointer-events:none}
.hr-stage{position:relative;margin:0 -6px;width:calc(100% + 12px);height:120px;display:grid;place-items:end center;overflow:hidden;
background:radial-gradient(ellipse 70% 75% at 50% 100%,color-mix(in srgb,var(--rc) 40%,transparent),transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--rc) 10%,#1b2542),#141d33);border-bottom:1px solid color-mix(in srgb,var(--rc) 40%,transparent)}
.hr-card.field .hr-stage{background:radial-gradient(ellipse 70% 75% at 50% 100%,rgba(255,200,80,.45),transparent 72%),linear-gradient(180deg,#3a2f12,#1c1a1a)}
.hr-stage .hr-pic{width:108px;height:108px;margin:0;image-rendering:pixelated;filter:drop-shadow(0 4px 5px rgba(0,0,0,.55));transition:transform .2s}
.hr-stage img.hr-pic:not([data-lpc]){width:86px;height:86px;margin-bottom:8px;image-rendering:auto}
.hr-card:hover .hr-stage .hr-pic{transform:scale(1.07)}
.hr-role{position:absolute;top:7px;left:7px;z-index:1;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--rc) 30%,#0b1220);border:1px solid var(--rc);box-shadow:0 0 8px color-mix(in srgb,var(--rc) 45%,transparent)}
.hr-role img{width:16px;height:16px;image-rendering:pixelated}
.hr-field{position:absolute;top:7px;right:7px;z-index:1;padding:2px 8px;border-radius:999px;background:#ffd66b;color:#2a1604;font-size:10.5px;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.hr-nm{margin-top:7px;font-weight:800;font-size:15px;color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hr-sub{font-size:11.5px;color:#8fb4ff;font-weight:700;letter-spacing:.02em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hr-foot{margin-top:7px;min-height:28px;display:grid;place-items:center}
/* Transferir o nível (10/10 00:12): ao lado do Jogar, duas linhas (Nv. N e o preço em diamantes). */
.hr-foot:has(.hr-copy){display:flex;justify-content:center;align-items:center;gap:6px}
.buy.hr-copy{height:auto;min-height:34px;flex-direction:column;gap:1px;line-height:1;padding-inline:2px}
.buy.hr-copy span{font-size:12px;font-weight:800}.buy.hr-copy small{display:flex;align-items:center;gap:3px;font-size:11px;font-weight:800}
.buy.hr-copy small img{width:12px;height:12px}
.buy.hr-copy.sure{filter:hue-rotate(-20deg) saturate(1.3)}
.hr-play{height:28px;min-height:0;padding:0 18px;font-size:12.5px}
/* Heróis no celular (12/10): Jogar e Copiar um embaixo do outro, largura toda, com "Copiar Nv. X" escrito. */
.hr-cpl{display:none;font-style:normal}
.hf.app .hr-foot:has(.hr-copy){flex-direction:column;align-items:stretch;gap:5px;width:100%}
.hf.app .hr-foot:has(.hr-copy) .hr-play{width:100%;height:30px;min-height:0;padding:0 6px}
.hf.app .buy.hr-copy{width:100%;min-height:36px;padding:3px 6px}
.hf.app .buy.hr-copy span{white-space:nowrap}
.hf.app .hr-cpl{display:inline}
.hr-here{color:#7dff9a;font-weight:800;font-size:12.5px}
.hr-soon{color:var(--muted);font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.05)}
.hr-card.locked .hr-stage .hr-pic{filter:grayscale(.9) brightness(.5)}
.hr-card.locked .hr-nm{color:#b8c2cf}
/* Painel */
.hp2{padding:0!important;border:0!important;border-image:none!important;border-radius:16px;overflow:hidden;background:#121a2d;box-shadow:0 0 0 1px color-mix(in srgb,var(--rc) 45%,rgba(255,255,255,.08)),0 10px 26px rgba(0,0,0,.4)}
.hp2-head{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:end;padding:14px 16px 14px 10px;
background:radial-gradient(ellipse 55% 85% at 22% 100%,color-mix(in srgb,var(--rc) 40%,transparent),transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--rc) 14%,#1c2744),#121a2d)}
.hp2-art{height:150px;display:grid;place-items:end center}
.hp2-art img.hp2-body{width:156px;height:156px;image-rendering:pixelated;filter:drop-shadow(0 6px 6px rgba(0,0,0,.55))}
.hp2-art img.hp2-old{width:110px;height:110px;margin-bottom:10px}
.hp2-art .sk-spr.hp2-walk{--s:132px}
.hp2-id{min-width:0;padding-bottom:4px}
.hp2-role{display:inline-flex;align-items:center;gap:5px;padding:2px 10px 2px 6px;border-radius:999px;background:color-mix(in srgb,var(--rc) 24%,#0b1220);border:1px solid var(--rc);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.hp2-role img{width:16px;height:16px;image-rendering:pixelated}
.hp2-id .nm{font-size:26px;font-weight:900;color:#fff;margin-top:4px;line-height:1.1}
.hp2-id .rar{font-size:13px;margin-top:1px}
.hp2-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.hp2-tags .hc-tag.dim{width:auto;padding:0;font-size:11.5px}
.hp2-act{margin-top:10px}
.hp2-play{width:100%;min-height:0;height:36px;font-size:14px}
.hp2-on{display:inline-block;padding:5px 14px;border-radius:999px;background:rgba(125,255,154,.12);border:1px solid #7dff9a;color:#7dff9a;font-weight:800;font-size:13px}
.hp2-soon{display:inline-block;padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--muted);font-weight:800}
.hp2-lock{margin:10px 16px 0}
.hp2-cls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 16px 0;padding:8px 10px;border-radius:10px;background:rgba(255,214,107,.07);border:1px solid rgba(255,214,107,.25)}
.hp2-cls span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#d9b56a}
.hp2-cls b{font-size:15px;color:#ffe9b0}.hp2-cls small{color:#b8c2cf;flex:1;min-width:0}
.hp2-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin:12px 16px 0}
.hp2-stats .hc-st{grid-template-columns:16px 32px minmax(0,1fr) 34px}
.hp2-tabs{display:flex;gap:4px;margin:14px 16px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.hp2-tab{padding:7px 12px 6px;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:#8d97a8;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.hp2-tab:hover{color:#dfe7ef}
.hp2-tab.on{color:#ffe9b0;border-bottom-color:var(--rc)}
.hp2-body{padding:12px 16px 16px}
.hp2-body .hc-kit{justify-content:flex-start;gap:6px;margin:0 0 8px}
.hp2-body .hc-sk{width:42px;height:42px;border-radius:9px}
.hp2-body .hc-sk span{font-size:10px;line-height:13px;min-width:15px}
.hp2-body .hc-skd{min-height:92px;padding:9px 11px}
.hp2-body .hc-skd b{font-size:14px}.hp2-body .hc-skd p{font-size:12.5px;line-height:1.35}
.hp2-kt{margin:2px 0 0;font-size:11.5px}
.hp2-body .hpn-skins{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.hf.app .hs2{grid-template-columns:minmax(0,1fr)}
.hf.app .hr-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.hf.app .hr-cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:10px}
.hf.app .hr-cats .ig-cat{position:relative;height:48px;flex-direction:column;gap:1px;padding:2px;font-size:10.5px;line-height:1.1}
.hf.app .hr-cats .ig-cat img{width:20px;height:20px}
.hf.app .hr-cats .ig-cat b{position:absolute;top:2px;right:3px;font-size:9.5px;padding:0 4px}
.hf.app .hr-stage{height:96px}.hf.app .hr-stage .hr-pic{width:88px;height:88px}
.hf.app .hr-nm{font-size:14px}
.hf.app .hp2-head{grid-template-columns:118px minmax(0,1fr)}.hf.app .hp2-art{height:118px}.hf.app .hp2-art img.hp2-body{width:124px;height:124px}.hf.app .hp2-art .sk-spr.hp2-walk{--s:108px}
.hf.app .hp2-id .nm{font-size:22px}
.hf.app .hp2-stats{grid-template-columns:1fr}
@media (max-width:1100px){.hs2{grid-template-columns:minmax(0,1fr)}}
.hp2-art{height:156px;overflow:visible}
.hp2-art img.hp2-body{width:206px;height:206px;margin-bottom:-16px}
.hf.app .hp2-art img.hp2-body{width:160px;height:160px;margin-bottom:-12px}
.hp2-tab b{font-size:11px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.08);color:inherit}
/* Mestre das Classes com tarefa (02/10): barra dos monstros, o Selo e o botão de aceitar. */
.cl-req li.cl-kl{flex-wrap:wrap}
.cl-req li.cl-kl span{flex:1;min-width:0}
.cl-req li.cl-kl em{font-style:normal;font-weight:800;color:#fff;font-size:12px}
.cl-prog{flex-basis:100%;order:3;height:7px;margin-left:25px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.cl-prog s{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#c77dff,#ffd66b);box-shadow:0 0 6px rgba(255,214,107,.6);text-decoration:none}
.cl-req li.cl-sl img{width:22px;height:22px;image-rendering:pixelated;flex:none}
.cl-req li.cl-sl.good img{filter:drop-shadow(0 0 4px #ffd66b)}
.cl-req li.cl-sl.bad img{filter:grayscale(.6) brightness(.8)}
.cl-go.cl-task{background:linear-gradient(#b78cff,#7a3fd0);color:#fff;border-color:#c9a6ff}
.cls-pop .sp-p img{width:44px;height:44px}
/* Evolução de classe: tela cheia, toque para fechar. */
.cu-pop{position:absolute;inset:0;z-index:95;display:grid;place-items:center;overflow:hidden;pointer-events:auto;cursor:pointer;animation:cuIn .3s ease both}
.cu-pop.out{animation:cuOut .5s ease forwards}
.cu-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(60,36,110,.6),rgba(4,6,14,.92) 65%)}
.cu-beam{position:absolute;left:50%;bottom:0;width:180px;height:100%;margin-left:-90px;transform-origin:50% 100%;background:linear-gradient(0deg,rgba(255,226,150,.0),rgba(255,226,150,.55) 30%,rgba(255,255,255,.75) 55%,rgba(255,226,150,0));filter:blur(6px);animation:cuBeam 1.6s ease-out both}
.cu-rings{position:absolute;left:50%;top:46%;width:0;height:0}
.cu-rings i{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:3px solid rgba(255,214,107,.9);box-shadow:0 0 18px rgba(255,214,107,.7),inset 0 0 12px rgba(199,125,255,.6);opacity:0;animation:cuRing 1.4s ease-out both}
.cu-rings i:nth-child(1){animation-delay:1s}.cu-rings i:nth-child(2){animation-delay:1.25s}.cu-rings i:nth-child(3){animation-delay:1.5s}
.cu-sparks{position:absolute;left:50%;top:46%;width:0;height:0}
.cu-sparks i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:2px;background:#fff3b0;box-shadow:0 0 8px #ffd66b;opacity:0;transform:rotate(var(--a)) translateX(0);animation:cuSpark var(--t) 1s ease-out both}
.cu-sparks i:nth-child(3n){background:#e0c4ff;box-shadow:0 0 8px #c77dff}
.cu-hero{position:relative;width:230px;height:230px;margin-top:-90px}
.cu-hero img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
.cu-a0{animation:cuOld 1.1s ease both}
.cu-a1{opacity:0;animation:cuNew .9s 1s cubic-bezier(.2,1.6,.4,1) both}
.cu-a1.solo{animation-delay:.5s}
.cu-txt{position:absolute;left:0;right:0;top:calc(46% + 110px);text-align:center;padding:0 16px;opacity:0;animation:cuTxt .6s 1.3s cubic-bezier(.2,1.5,.4,1) both}
.cu-k{font-size:14px;font-weight:900;letter-spacing:.24em;text-transform:uppercase;color:#fff;text-shadow:0 0 10px #c77dff}
.cu-n.t-title{font-size:46px;line-height:1.1;margin-top:4px;color:#ffe08a;text-shadow:0 3px 0 #3a2208,0 0 22px rgba(255,200,80,.8)}
.cu-s{margin-top:6px;font-size:15px;font-weight:800;color:#7dff9a;text-shadow:0 1px 0 #000}
.cu-tap{margin-top:14px;font-size:12px;color:#b8c2cf;opacity:.8}
@keyframes cuIn{from{opacity:0}}
@keyframes cuOut{to{opacity:0}}
@keyframes cuBeam{0%{transform:scaleY(0);opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:.35}}
@keyframes cuRing{0%{transform:scale(.3);opacity:0}15%{opacity:1}100%{transform:scale(3.4);opacity:0}}
@keyframes cuSpark{0%{opacity:0;transform:rotate(var(--a)) translateX(0)}10%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--r))}}
@keyframes cuOld{0%{opacity:1;filter:brightness(1)}70%{opacity:1;filter:brightness(3.5) drop-shadow(0 0 16px #fff)}100%{opacity:0;filter:brightness(5)}}
@keyframes cuNew{0%{opacity:0;transform:scale(.7);filter:brightness(4)}60%{opacity:1;filter:brightness(1.4)}100%{opacity:1;transform:scale(1);filter:brightness(1) drop-shadow(0 8px 10px rgba(0,0,0,.6))}}
@keyframes cuTxt{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}
.hf.app .cu-hero{width:170px;height:170px;margin-top:-70px}.hf.app .cu-txt{top:calc(46% + 80px)}.hf.app .cu-n.t-title{font-size:34px}
@media (prefers-reduced-motion:reduce){.cu-pop *{animation-duration:.01s!important;animation-delay:0s!important}}
/* Missão do Mestre das Classes no topo das Missões */
.quest.cls-q{box-shadow:inset 0 0 0 1px rgba(199,125,255,.55),0 0 12px -4px rgba(199,125,255,.6);background:linear-gradient(90deg,rgba(122,63,208,.18),transparent 70%)}
.quest.cls-q.ready{box-shadow:inset 0 0 0 1px rgba(255,214,107,.7),0 0 14px -4px rgba(255,214,107,.7);background:linear-gradient(90deg,rgba(255,200,80,.16),transparent 70%)}
.quest.cls-q > img{image-rendering:pixelated}
.hf .cu-hero{width:300px;height:300px;margin-top:-130px}
.hf .cu-txt{top:calc(46% + 120px)}
.hf.app .cu-hero{width:200px;height:200px;margin-top:-80px}
/* Chat de perto saiu (02/10): o botão Gestos do celular fica no lugar do antigo "Falar". */
.hf.app .app-emote{left:calc(8px + var(--sl))}
/* Cartão do jogador no mapa (02/10, dono: "ajustar layout, tudo quebrado"): rosto, nome, VIP, nível e classe em cima;
botões numa fileira embaixo. (O .invite img antigo deixava a coroa do VIP do tamanho do retrato.) */
.invite.pc2{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:380px;max-width:520px;padding:12px 14px;position:relative}
.pc2 .pc-x{position:absolute;top:8px;right:8px}
.pc2 .pc-top{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding-right:30px}
.pc2 .pc-pic{width:64px;height:64px;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#34507f 0%,#1b2a48 55%,#0c1322 100%);outline:2px solid #c9a24f;outline-offset:-2px}
.pc2 .pc-pic img{width:100%;height:100%;object-fit:cover;object-view-box:inset(15% 9% 0 9%);image-rendering:pixelated;animation:none}
.pc2 .pc-pic img:not([data-lpc]){object-view-box:none;image-rendering:auto;width:52px;height:52px}
.pc2 .pc-id{min-width:0;display:flex;flex-direction:column;gap:2px}
.pc2 .pc-nm{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:16px;line-height:1.2}
.pc2 .pc-nm b{color:var(--gold);font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.pc2 .pc-vip{display:inline-flex;align-items:center;gap:3px;padding:1px 7px 1px 4px;border-radius:999px;background:rgba(155,92,255,.18);border:1px solid rgba(190,140,255,.55);color:#e9d8ff;font-size:10.5px;font-weight:800;letter-spacing:.05em}
.pc2 .pc-vip img{width:14px;height:14px;animation:none;image-rendering:pixelated}
.pc2 .pc-sub{font-size:12.5px;color:#b8c2cf;font-weight:700}.pc2 .pc-sub span{color:#8fb4ff}
.pc2 .pc-st{display:flex;align-items:center;gap:6px;font-size:12px;color:#9aa4b5}
.pc2 .pc-st i{width:8px;height:8px;border-radius:50%;background:#5fd36a;box-shadow:0 0 6px #5fd36a;flex:none}
.pc2 .pc-acts{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px}
.pc2 .pc-acts .buy{flex:1 1 auto;min-width:0;height:32px;padding:0 12px;white-space:nowrap}
.hf.app .invite.pc2{min-width:0;max-width:none;width:100%}
.hf.app .pc2 .pc-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.hf.app .pc2 .pc-acts .buy{width:100%;white-space:normal}
.pc2 .iv-b.jail-on{display:block}
/* Calça (02/10): 8 espaços no boneco da Mochila. Esquerda: capacete, arma, anel e relíquia; direita: peitoral, luvas, calça e
botas. O palco do herói ocupa a coluna do meio inteira e as poções ficam nos cantos de baixo. */
.hf .inv-doll{grid-template-rows:70px 70px 70px 70px 56px}
.hf .inv-doll .inv-pt{grid-row:1/6;height:auto}
.hf.app .inv-doll{grid-template-rows:58px 58px 58px 58px 50px}
.hf.app.is-portrait .inv-doll{grid-template-rows:auto}
/* ---------- Mochila nova (02/10, dono: "redesign completo", referência de inventário em quadradinhos) ----------
Uma tela só: equipamento em cima (ou à esquerda no computador) e os itens numa grade de quadrados iguais. --c = lado do
quadrado do boneco; --q = lado do quadrado da grade. */
.win-itens .win-body{display:block;overflow:auto}
.ig{--c:62px;--g:8px;--q:66px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;min-height:100%}
.ig-eq{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;background:linear-gradient(180deg,rgba(20,30,50,.75),rgba(10,15,26,.75));box-shadow:inset 0 0 0 1px rgba(214,170,90,.28);position:sticky;top:0}
.ig-doll{display:grid;grid-template-columns:repeat(4,var(--c));grid-template-rows:repeat(4,var(--c));gap:var(--g)}
.ig-hero{grid-column:1/3;grid-row:1/4;position:relative;overflow:hidden;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:6px 4px 6px;
background:radial-gradient(ellipse 70% 40% at 50% 88%,rgba(242,193,78,.28),transparent 70%),linear-gradient(180deg,#1d2c4c,#111a2e);box-shadow:inset 0 0 0 1px #3a4c72,inset 0 0 18px rgba(0,0,0,.5)}
.ig-fig{position:relative;flex:1;min-height:0;width:100%;display:grid;place-items:end center}
.ig-fig img.hero-look,.ig-fig .hero-spr,.ig-fig .hero-sk{position:relative;z-index:1;max-width:100%;max-height:100%}
.ig-fig img.hero-look.lpc{width:auto;height:100%;max-height:150px;image-rendering:pixelated;filter:drop-shadow(0 4px 3px rgba(0,0,0,.5))}
.ig-fig .ip-wings{position:absolute;z-index:0;left:50%;top:auto;bottom:22%;width:92%;transform:translateX(-50%);image-rendering:pixelated;opacity:.95;animation:mvFlap 2.6s ease-in-out infinite}
.ig-nm{display:flex;flex-direction:column;align-items:center;line-height:1.15;max-width:100%}
.ig-nm b{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-nm small{font-size:11px;color:#f2c14e;white-space:nowrap}
.ig-wing{all:unset;box-sizing:border-box;position:absolute;z-index:3;top:5px;right:5px;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;cursor:pointer;background:rgba(8,12,22,.6);box-shadow:inset 0 0 0 1px rgba(201,162,79,.55)}
.ig-wing img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated}
.ig-wing:not(.has) img{filter:grayscale(1) brightness(.7);opacity:.45}
.ig-wing .x{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;line-height:1;color:#fff;background:#b8322a;box-shadow:0 0 0 2px #2a0d0b}
.ig-slot{all:unset;box-sizing:border-box;position:relative;width:var(--c);height:var(--c);display:grid;place-items:center;border-radius:9px;cursor:pointer;
background:linear-gradient(180deg,#18233a,#0f1727);box-shadow:inset 0 0 0 1px #33456a,inset 0 2px 6px rgba(0,0,0,.45);transition:transform .12s,filter .12s}
.ig-slot:hover{filter:brightness(1.18)}
.ig-slot:active{transform:scale(.95)}
.ig-slot.empty>img{width:58%;height:58%;object-fit:contain;opacity:.22;filter:grayscale(1);image-rendering:pixelated}
.ig-slot .ithumb{width:82%;height:82%}
.ig-slot.has{box-shadow:inset 0 0 0 2px var(--rc,#6b7a96),inset 0 0 14px color-mix(in srgb,var(--rc,#6b7a96) 35%,transparent)}
.ig-slot .up{position:absolute;top:3px;right:3px;font-size:10.5px;line-height:15px;padding:0 4px;border-radius:7px;background:rgba(0,0,0,.65);color:#ffe28a}
.ig-slot .x{position:absolute;top:-6px;left:-6px;z-index:4;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;line-height:1;color:#fff;background:#b8322a;box-shadow:0 0 0 2px #2a0d0b;opacity:0;transition:opacity .12s}
.ig-slot:hover .x,.ig.app .ig-slot .x{opacity:1}
.ig-slot.pop{animation:igPop .5s ease-out}
@keyframes igPop{40%{transform:scale(1.12);filter:brightness(1.5)}}
.s-helmet{grid-area:1/3}.s-chest{grid-area:2/3}.s-pants{grid-area:3/3}.s-boots{grid-area:4/3}
.s-weapon{grid-area:1/4}.s-gloves{grid-area:2/4}.s-accessory{grid-area:3/4}.s-relic{grid-area:4/4}
.ig-slot.pot.p-q{grid-area:4/1}.ig-slot.pot.p-e{grid-area:4/2}
.ig-slot.pot img{width:56%;height:56%;object-fit:contain;image-rendering:pixelated}
.ig-slot.pot.empty img{opacity:.3;filter:grayscale(1)}
.ig-q{position:absolute;right:4px;bottom:2px;font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000}
.ig-key{position:absolute;left:4px;top:3px;font-style:normal;font-size:10px;font-weight:800;color:#9fb0c8}
.ig .r0{--rc:#9aa4b2}.ig .r1{--rc:#5fd36a}.ig .r2{--rc:#4fa3ff}.ig .r3{--rc:#c06bff}.ig .r4{--rc:#ffb53a}.ig .r5{--rc:#ff4d5e}.ig .r6{--rc:#7ff6ff}
.ig-side{display:flex;flex-direction:column;gap:8px;min-width:0;width:calc(4 * var(--c) + 3 * var(--g))}
.ig-side .inv-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0}
.ig-side .inv-stats .sr{display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0;padding:4px 8px;border-radius:7px;border:0;background:rgba(255,255,255,.045);font-size:12.5px}
.ig-side .inv-stats .sr span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aeb9cb}
.ig-side .inv-stats .sr b{white-space:nowrap}
.ig-side .set-sum{margin:0}
.ig-eqa{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ig-note{margin:0;font-size:11.5px;color:#8e9bb0;line-height:1.35}
.ig-btn{all:unset;box-sizing:border-box;height:32px;padding:0 12px;display:inline-flex;align-items:center;gap:5px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:700;color:#dbe4f2;white-space:nowrap;
background:linear-gradient(180deg,#24344f,#18243a);box-shadow:inset 0 0 0 1px #3d5274}
.ig-btn:hover{filter:brightness(1.15)}.ig-btn:disabled{opacity:.45;cursor:default}
.ig-btn.on{color:#1d1204;background:linear-gradient(#ffd66b,#d49a2a);box-shadow:none}
.ig-btn.gold{color:#1d1204;background:linear-gradient(#ffd66b,#d49a2a);box-shadow:0 0 10px rgba(255,190,60,.35)}
.ig-btn b{padding:0 6px;border-radius:8px;background:rgba(0,0,0,.25);font-size:11px}
.ig-btn.ip-off.sure{color:#fff;background:linear-gradient(#e0574c,#a52a22);box-shadow:none}
.ig-bag{display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px 12px 12px;border-radius:12px;background:linear-gradient(180deg,rgba(18,26,44,.78),rgba(9,13,23,.78));box-shadow:inset 0 0 0 1px rgba(214,170,90,.28)}
.ig-bag.can{box-shadow:inset 0 0 0 2px #5fd36a}.ig-bag.over{box-shadow:inset 0 0 0 2px #7dff9a,0 0 18px rgba(125,255,154,.35)}
.ig-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ig-cat{all:unset;box-sizing:border-box;min-width:0;height:44px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 8px;border-radius:9px;cursor:pointer;color:#b9c6d8;font-size:13px;font-weight:700;
background:rgba(24,34,54,.9);box-shadow:inset 0 0 0 1px #34465f}
.ig-cat img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated;flex:none}
.ig-cat span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-cat b{font-size:11px;padding:1px 6px;border-radius:8px;background:rgba(0,0,0,.35);color:#e8edf5}
.ig-cat.on{color:#fff;background:linear-gradient(180deg,#2f6fd0,#1d4b97);box-shadow:inset 0 0 0 1px #7fb0ff}
.ig-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.ig-sfs{display:flex;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.ig-sfs::-webkit-scrollbar{display:none}
.ig-sf{all:unset;box-sizing:border-box;flex:none;min-width:36px;height:36px;padding:0 6px;display:grid;place-items:center;border-radius:8px;cursor:pointer;background:rgba(24,34,54,.9);box-shadow:inset 0 0 0 1px #34465f;font-size:12.5px;font-weight:700;color:#cbd6e6}
.ig-sf img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated;opacity:.85}
.ig-sf.on{background:linear-gradient(180deg,#2f6fd0,#1d4b97);box-shadow:inset 0 0 0 1px #7fb0ff;color:#fff}
.ig-sf.on img{opacity:1}
.ig-acts{display:flex;flex-wrap:wrap;gap:6px}
.ig-fil{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px #2c3c58}
.ig-fil label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:#9fb0c8}
.ig-fil select{height:32px;min-width:118px}
.ig-fil .iq-autos{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;width:100%;padding-top:6px;border-top:1px solid rgba(255,255,255,.07)}
.ig .inv-quick{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:0}
.ig .inv-sell{margin:0}
.ig .inv-sell.none{opacity:.8}
.ig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--q),1fr));gap:6px;align-content:start}
.ig-cell{all:unset;box-sizing:border-box;position:relative;aspect-ratio:1;min-width:0;display:grid;place-items:center;border-radius:9px;cursor:pointer;
background:linear-gradient(180deg,#17223a,#0e1626);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc,#33456a) 70%,#1c2840),inset 0 -10px 16px color-mix(in srgb,var(--rc,#000) 14%,transparent);transition:transform .1s,filter .12s}
.ig-cell:hover{filter:brightness(1.2)}
.ig-cell:active{transform:scale(.95)}
.ig-cell .ithumb{width:78%;height:78%}
.ig-cell.free{cursor:default;background:rgba(14,20,34,.55);box-shadow:inset 0 0 0 1px #233049}
.ig-cell.free:hover{filter:none}
.ig-cell .up{position:absolute;top:3px;right:3px;font-size:10.5px;line-height:15px;padding:0 4px;border-radius:7px;background:rgba(0,0,0,.65);color:#ffe28a}
.ig-pw{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:11px;font-weight:800;color:#dfe6f1;text-shadow:0 1px 2px #000,0 0 3px #000;pointer-events:none}
.ig-pw.good{color:#7dff9a}
.ig-best{position:absolute;top:2px;left:4px;font-style:normal;font-size:13px;color:#ffd24d;text-shadow:0 0 6px rgba(255,200,60,.9),0 1px 1px #000}
/* 02/10 (dono): o que serve no herói em campo fica mais claro; o de outra classe, bem apagado. */
.ig-cell.mine{background:linear-gradient(180deg,#283a5e,#182642);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc,#4a6290) 85%,#fff),inset 0 -10px 16px color-mix(in srgb,var(--rc,#000) 20%,transparent),0 0 8px color-mix(in srgb,var(--rc,#4a6290) 28%,transparent)}
.ig-cell.mine .ithumb{filter:brightness(1.12) saturate(1.1)}
.ig-cell.other{background:linear-gradient(180deg,#0b1019,#070a12);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc,#33456a) 30%,#141b2b)}
.ig-cell.other .ithumb{opacity:.36;filter:grayscale(.8) brightness(.8)}
.ig-cell.other .up,.ig-cell.other .ig-best{opacity:.45}
.ig-cell.low .ithumb{opacity:.55;filter:grayscale(.45)}
.ig-cell.other .ig-pw{color:#6a7486}
.ig-cell.low .ig-pw{color:#8a95a8}
.ig-cell.busy{opacity:.6}
.ig-tag{position:absolute;left:3px;top:3px;font-style:normal;font-size:9.5px;font-weight:800;padding:0 4px;border-radius:5px;background:#2d5fa8;color:#fff}
.ig-lock{position:absolute;left:3px;top:3px;width:18px;height:18px}
.ig-lock img{width:100%;height:100%;object-fit:contain}
.ig-chk{position:absolute;left:4px;top:4px;width:18px;height:18px;border-radius:5px;background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 2px #9fb0c8}
.ig-chk.on{background:#3fae5a;box-shadow:inset 0 0 0 2px #b9ffca}
.ig-chk.on::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:900;color:#fff}
.ig-cell.sel{box-shadow:inset 0 0 0 2px #7dff9a,0 0 10px rgba(125,255,154,.35)}
.ig-cell.lifted{opacity:.4}
.ig-slot.can{box-shadow:inset 0 0 0 2px #5fd36a}.ig-slot.over{box-shadow:inset 0 0 0 2px #7dff9a,0 0 14px rgba(125,255,154,.5)}.ig-slot.nope{box-shadow:inset 0 0 0 2px #ff5a4e}
.ig-cell.mat img{width:66%;height:66%;object-fit:contain;image-rendering:pixelated}
.ig-cell.mat .ig-q{font-size:12.5px}
.ig-cell.ig-more img{width:52%;height:52%;object-fit:contain}
.ig-more-ask{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:8px 10px;border-radius:9px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px #3d5274;font-size:13px}
.ig-more-ask .im-have{font-size:12px;color:#9fb0c8}.ig-more-ask .im-acts{display:flex;gap:6px;margin-left:auto}
.ig-sec{grid-column:1/-1;margin-top:6px;font-size:12px;color:#9fb0c8}
/* 10/10: Vestidos nos outros heróis (st.heroItems): uma linha que abre a lista por herói. */
.ig-hsec{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border:1px dashed #3a4a66;border-radius:8px;background:rgba(15,23,38,.6);cursor:pointer;text-align:left;font:inherit;font-size:12px;color:#9fb0c8}
.ig-hsec:hover,.ig-hsec.on{border-color:#c99a4a;color:#e8d3a6}
.ig-hname{margin-top:2px;color:#e8d3a6;font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ig-hname .ig-btn{margin-left:auto}
.ig-hc{opacity:.9}
.is-hero{margin:0 0 8px;font-size:12px;color:#e8d3a6}
.ig-grid .empty{grid-column:1/-1;padding:16px 8px;text-align:center;color:#8e9bb0;font-size:13px}
.ig-mth{display:grid;place-items:center}.ig-mth img{width:80%;height:80%;object-fit:contain;image-rendering:pixelated}
/* celular: equipamento em cima (herói + espaços, números ao lado se couber), itens embaixo; abas e ferramentas presas no alto */
.hf.app .win-itens .win-body{overflow:auto}
.ig.app{display:flex;flex-direction:column;align-items:stretch;gap:10px;--c:min(58px,calc((100vw - 64px) / 6.4));--q:58px}
.ig.app .ig-eq{position:static;flex-direction:row;flex-wrap:wrap;gap:10px;padding:10px;justify-content:center}
.ig.app .ig-side{flex:1 1 140px;width:auto;min-width:140px}
.ig.app .ig-side .inv-stats{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.ig.app .ig-side .inv-stats .sr{padding:3px 8px;font-size:12px}
.ig.app .ig-bag{padding:8px}
.ig.app .ig-cats{position:sticky;top:-2px;z-index:5;padding:4px 0;background:#0c1322}
.ig.app .ig-cat{height:46px;flex-direction:column;gap:0;padding:2px 2px;font-size:10.5px;line-height:1.1}
.ig.app .ig-cat img{width:22px;height:22px}
.ig.app .ig-cat b{position:absolute;margin:-30px 0 0 34px;font-size:10px;padding:0 5px}
.ig.app .ig-cat{position:relative}
.ig.app .ig-tools{flex-direction:column;align-items:stretch}
.ig.app .ig-acts{justify-content:flex-start}
.ig.app .ig-grid{grid-template-columns:repeat(auto-fill,minmax(var(--q),1fr));gap:5px}
.ig.app .ig-fil select{min-width:0;width:100%}
.ig.app .ig-fil label{flex:1 1 30%}
.hf.app.is-landscape .ig.app{display:grid;grid-template-columns:auto 1fr;align-items:start}
.hf.app.is-landscape .ig.app .ig-eq{flex-direction:column;position:sticky;top:0}
.hf.app.is-landscape .ig.app .ig-side{width:calc(4 * var(--c) + 3 * var(--g));flex:none}
@container (max-width:340px){.ig-side .inv-stats{grid-template-columns:1fr}}
/* Atributos (02/10, dono: "o avatar do herói está totalmente errado no mobile"): o rosto do herói novo enche o quadro. */
.attr-top .portrait{display:grid;place-items:center;overflow:hidden}
.attr-top .portrait img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
/* Botão "?" do topo das janelas (02/10, dono: "do mesmo tamanho do fechar, alinhado e com o ícone no centro"). */
.win-head .help-q,.win-head .close{display:grid;place-items:center;padding:0;line-height:1;text-align:center}
.win-head .help-q{width:36px;height:36px;font-size:22px;margin-right:8px}
.hf.app .win-head .help-q{width:40px;height:40px;font-size:24px}
.win-head .close{font-size:26px}
.attr-top .portrait img[data-lpc]{object-fit:cover;object-view-box:inset(12% 12% 4% 12%);border-radius:8px}
.hf.app.is-portrait .attr-top{grid-template-columns:60px 1fr auto}
.hf.app.is-portrait .attr-top .portrait{width:60px;height:60px}
/* ---------- Tela do jogo no celular (02/10, dono: "remover Novidades e Ranking da esquerda; Missões com ícone; radar de loot
para a esquerda; chat vira ícone na vertical igual os outros; com isso dá para ajustar as skills e o ataque") ---------- */
.hf.app .app-fabs{gap:8px}
.hf.app .app-fabs [data-sheet="missions"]{display:grid!important}
.hf.app .app-fabs .radar{position:relative;left:auto;right:auto;top:auto;width:46px;height:46px}
.hf.app .app-fabs .rd-tab{width:46px;height:46px;opacity:1}
.hf.app .app-fabs .rd-tab img{width:26px;height:26px}
.hf.app .app-fabs .rd-box{left:54px;right:auto;top:0;bottom:auto;max-height:min(330px,calc(100dvh - var(--st) - 560px));min-height:150px;animation-name:rdInL}
@keyframes rdInL{from{opacity:0;transform:translateX(-10px)}}
.hf.app .app-fabs .rd-ping{left:54px;right:auto}
.hf.app.is-landscape .app-fabs .radar,.hf.app.is-landscape .app-fabs .rd-tab{width:42px;height:42px}
.hf.app.is-landscape .app-fabs .rd-box{top:0;bottom:auto;max-height:min(230px,calc(100dvh - 120px))}
.fab-chat .dot{position:absolute;right:-7px;top:-7px;width:12px;height:12px;border-radius:50%;background:#ff5a4e;box-shadow:0 0 0 2px #1a0d0d}
.fab-chat .dot[hidden]{display:none}
.fab-chat .app-chat-last{position:absolute;left:46px;top:50%;transform:translate(-6px,-50%);opacity:0;pointer-events:none;width:max-content;max-width:min(240px,calc(100vw - 96px));
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px 10px;border-radius:12px;background:rgba(8,12,20,.9);box-shadow:inset 0 0 0 1px rgba(214,170,90,.45);font-size:12.5px;font-weight:600;color:#e3e8f0;transition:opacity .25s,transform .25s}
.fab-chat .app-chat-last.show{opacity:1;transform:translate(0,-50%)}
.fab-chat .app-chat-last b{color:#f3d9a0}
.fab-emote img{width:26px;height:26px;image-rendering:pixelated}
/* Celular em pé: ataque e skills em arco no canto direito (maiores); AUTO, Poder e poções no canto esquerdo, onde ficava o chat. */
.hf.app.is-portrait .actions{left:calc(10px + var(--sl));right:calc(10px + var(--sr));width:auto;height:180px;pointer-events:none}
.hf.app.is-portrait .actions>*,.hf.app.is-portrait .actions .skill{pointer-events:auto}
.hf.app.is-portrait .skill:nth-child(1){right:0;bottom:0;width:96px;height:96px}
.hf.app.is-portrait .skill:nth-child(1) img{width:96px;height:96px}
.hf.app.is-portrait .skill:nth-child(2){right:108px;bottom:2px;width:62px;height:62px}
.hf.app.is-portrait .skill:nth-child(3){right:90px;bottom:82px;width:62px;height:62px}
.hf.app.is-portrait .skill:nth-child(4){right:8px;bottom:108px;width:62px;height:62px}
.hf.app.is-portrait .skill:nth-child(n+2) img{width:62px;height:62px}
.hf.app.is-portrait .auto{right:auto;left:0;bottom:0;width:64px;height:74px}
.hf.app.is-portrait .auto img{width:64px;height:74px}
.hf.app.is-portrait .auto span{margin-top:40px;font-size:12px}
.hf.app.is-portrait .powr{right:auto;left:74px;bottom:6px;width:58px;height:58px}
.hf.app.is-portrait .powr img{width:32px;height:32px}
.hf.app.is-portrait .quick{right:auto;left:0;bottom:90px;width:52px;height:52px}
.hf.app.is-portrait .quick.mana{right:auto;left:60px;bottom:90px}
.hf.app.is-portrait .quick img{width:28px;height:28px}
.hf.app.is-portrait .auto-pop{right:auto;left:0}
/* Verificação em 2 etapas (02/10): QR code, chave, códigos reserva. */
.mfa-w{display:flex;flex-direction:column;gap:8px;max-width:440px;margin:0 auto}
.mfa-w p{margin:0}
.mfa-qr{align-self:center;width:200px;height:200px;background:#fff;border-radius:8px;padding:6px;box-shadow:0 0 0 2px rgba(255,207,74,.35)}
.mfa-qr svg{width:100%;height:100%;display:block}
.mfa-key{align-self:center;font-size:15px;letter-spacing:1px;color:#ffe9b0;background:rgba(0,0,0,.35);padding:6px 10px;border-radius:6px;user-select:all;word-break:break-all;text-align:center}
.mfa-in{align-self:center;max-width:220px;text-align:center;font-size:22px;letter-spacing:4px}
.mfa-err{text-align:center}
.mfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.mfa-codes code{background:rgba(0,0,0,.4);border:1px solid rgba(255,207,74,.3);border-radius:6px;padding:6px;text-align:center;font-size:15px;color:#ffe9b0;user-select:all}
/* Meu visual (02/10, refeito no jeito da Mochila nova): vitrine do herói + 4 espaços à esquerda; abas e grade à direita. */
.mv .mv-show{width:calc(4 * var(--c) + 3 * var(--g));align-items:stretch}
.mv-stage{position:relative;height:250px;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:8px 6px 10px;
background:radial-gradient(ellipse 70% 45% at 50% 92%,rgba(255,200,90,.18),transparent 70%),radial-gradient(circle at 50% 35%,#24324d,#0c1222 75%);box-shadow:inset 0 0 0 1px rgba(214,170,90,.35)}
.mv-stage::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 20deg,rgba(255,215,120,.06) 20deg 40deg,transparent 40deg 70deg,rgba(255,215,120,.05) 70deg 90deg,transparent 90deg);animation:mvRays 24s linear infinite;pointer-events:none}
@keyframes mvRays{to{transform:rotate(1turn)}}
.mv-aura{position:absolute;left:50%;bottom:30px;width:150px;transform:translateX(-50%);image-rendering:pixelated;opacity:.9;z-index:0}
.mv-fig{flex:1;width:100%;min-height:0}
/* Asas na vitrine: centradas atrás do herói (a batida de asas mexe só na escala, não no lugar). */
.mv-fig .ip-wings{left:50%;right:auto;top:auto;bottom:16%;width:min(230px,78%);transform:translateX(-50%);animation:mvFlap 2.6s ease-in-out infinite}
@keyframes mvFlap{0%,100%{transform:translateX(-50%) scaleX(1)}50%{transform:translateX(-50%) scaleX(.9)}}
.mv-fig img.hero-look.lpc{max-height:170px}
.mv-nm{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;max-width:100%}
.mv-nm .ar-title{margin:0;font-size:12px;white-space:nowrap}
.mv-nm b{font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g)}
.mv-slot{all:unset;box-sizing:border-box;position:relative;height:calc(var(--c) + 18px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px 2px;border-radius:9px;cursor:pointer;overflow:hidden;
background:linear-gradient(180deg,rgba(28,40,64,.95),rgba(14,20,34,.95));box-shadow:inset 0 0 0 1px #34465f}
.mv-slot:hover{filter:brightness(1.18)}
.mv-slot.has{box-shadow:inset 0 0 0 2px rgba(255,207,74,.7),inset 0 0 12px rgba(255,190,60,.2)}
.mv-slot.on{background:linear-gradient(180deg,#2f6fd0,#1d4b97);box-shadow:inset 0 0 0 1px #7fb0ff}
.mv-slot small{font-size:10.5px;font-weight:700;color:#aeb9cb}
.mv-slot.on small{color:#fff}
.mv-slot .mv-ph{width:26px;height:26px;object-fit:contain;opacity:.3;filter:grayscale(1)}
.mv-slot .mv-img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated}
.mv-slot .ar-title{margin:0;font-size:9px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}
.mv-slot .vz-fr,.mv-slot .vz-fr img{width:26px;height:26px}.mv-slot .vz-fr{margin:2px 0 5px}
.mv-shop{justify-content:center}
.mv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;align-content:start}
.mv-grid.k-title{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.mv-cell{all:unset;box-sizing:border-box;position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 6px 8px;border-radius:10px;cursor:pointer;
background:linear-gradient(180deg,rgba(30,42,66,.95),rgba(15,21,36,.95));box-shadow:inset 0 0 0 1px #34465f;transition:filter .12s,transform .12s}
.mv-cell:hover{filter:brightness(1.18)}.mv-cell:active{transform:scale(.97)}
.mv-cell:disabled{cursor:default}.mv-cell:disabled:hover{filter:none}
.mv-cell.on{background:linear-gradient(180deg,rgba(60,48,18,.95),rgba(26,20,8,.95));box-shadow:inset 0 0 0 2px #ffcf4a,0 0 14px rgba(255,190,60,.25)}
.mv-art{height:64px;width:100%;display:grid;place-items:center;min-width:0}
.mv-grid.k-title .mv-cell{min-height:84px}
.mv-grid.k-title .mv-art{height:30px}
.mv-art .ar-title{margin:0;font-size:12.5px;padding:2px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-art .mv-img{width:60px;height:60px;object-fit:contain;image-rendering:pixelated}
.mv-art .vz-fr,.mv-art .vz-fr img{width:52px;height:52px}
.mv-blank{display:grid;place-items:center;min-width:44px;height:30px;padding:0 10px;border-radius:6px;font-size:13px;font-weight:800;color:#9fb0c8;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px #3a4b66}
.mv-cell:not(.k-title) .mv-blank{width:52px;height:52px;font-size:22px}
.mv-lb{max-width:100%;font-size:12.5px;font-weight:700;color:#e9dcc0;text-align:center;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-sub{max-width:100%;font-size:11px;color:#8e9bb0;text-align:center;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-ok{position:absolute;top:5px;right:6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:900;color:#1d1204;background:linear-gradient(#ffe07a,#d49a2a);box-shadow:0 0 8px rgba(255,190,60,.6)}
/* Celular: vitrine e espaços lado a lado em cima; grade embaixo. */
.ig.mv.app{grid-template-columns:1fr}
.ig.mv.app .mv-show{width:auto;position:static;display:grid;grid-template-columns:132px 1fr;grid-template-rows:auto auto auto;gap:8px}
.ig.mv.app .mv-stage{grid-row:1/4;height:auto;min-height:190px}
.ig.mv.app .mv-slots{grid-template-columns:repeat(2,1fr);align-self:start}
.ig.mv.app .mv-shop{align-self:end}
.ig.mv.app .mv-show .ig-note{display:none}
.ig.mv.app .mv-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.ig.mv.app .mv-grid.k-title{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
/* Visual na Mochila (02/10): 5 abas na Mochila, os tipos (Skins, Molduras, Títulos, Asas, Auras) como fichas, o nome do herói
(cada herói usa o seu) e 5 espaços na vitrine. */
.ig-cats.n5{display:flex}
.ig-cats.n5 .ig-cat{flex:1 1 auto;gap:5px;padding:0 6px;font-size:12.5px}
.ig-cats.n5 .ig-cat span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-kinds{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}
.mv-k{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-radius:8px;cursor:pointer;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:#b9c6d8;font-size:12.5px;font-weight:700}
.mv-k:hover{filter:brightness(1.2)}
.mv-k img{width:20px;height:20px;object-fit:contain;image-rendering:pixelated}
.mv-k b{font-size:11px;color:#8a97ab}
.mv-k.on{background:linear-gradient(180deg,#2f6fd0,#1d4b97);color:#fff;box-shadow:inset 0 0 0 1px #7fb0ff}
.mv-k.on b{color:#dbe8ff}
.mv-who{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:0 0 2px;color:#ffe2a0;font-size:14px}
.mv-who small{color:#9aa7bb;font-size:12px;font-weight:500}
.mv-art .sk-spr.mv-skw{--s:64px}
.mv-using{display:flex;flex-direction:column;border-radius:10px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.mv-using-h{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8a97ab;padding:8px 12px 5px}
.mv-use{all:unset;box-sizing:border-box;display:grid;grid-template-columns:18px auto minmax(0,1fr);align-items:center;gap:8px;min-height:33px;padding:0 12px;cursor:pointer;border-top:1px solid rgba(255,255,255,.06)}
.mv-use:hover{background:rgba(255,255,255,.05)}
.mv-use.on{background:linear-gradient(90deg,rgba(47,111,208,.35),rgba(47,111,208,.08));box-shadow:inset 3px 0 0 #7fb0ff}
.mv-use img{width:18px;height:18px;object-fit:contain;image-rendering:pixelated}
.mv-ul{font-size:12px;font-weight:600;color:#9aa7bb}
.mv-uv{min-width:0;font-size:12.5px;font-weight:700;color:#ffe2a0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-uv.none{color:#5f6b7e;font-weight:600}
.ig.mv.app .mv-using{align-self:start}
.ig.mv.app .mv-use{grid-template-columns:auto minmax(0,1fr);gap:6px;min-height:31px;padding:0 9px}
.ig.mv.app .mv-use img{display:none}
.ig.mv.app .mv-uv{font-size:11.5px}
.mv-grid.k-skin{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.sk-where{display:block;font-size:11px;color:#9aa7bb;line-height:1.3}
.ig.app .ig-cats.n5{display:grid;grid-template-columns:repeat(5,1fr)}
.ig.app .ig-cats.n5 .ig-cat{font-size:10px;padding:2px}
.mv-grid.k-skin .mv-lb{white-space:normal;text-align:center;line-height:1.2}
.ig.mv.app .mv-kinds{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.ig.mv.app .mv-kinds .mv-k{flex-direction:column;justify-content:center;height:auto;min-height:52px;padding:5px 2px;gap:1px;font-size:10.5px;line-height:1.1}
.ig.mv.app .mv-kinds .mv-k b{font-size:10px}
.ig.mv.app .mv-art .sk-spr.mv-skw{--s:56px}
.ig.mv.app .mv-grid.k-skin{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
/* Mercado (02/10, no jeito da Mochila nova): abas com ícone, barra da carteira em painel, filtros por tipo com o desenho do
espaço e a grade de anúncios em cartões quadrados na cor da raridade. */
.mx{display:flex;flex-direction:column;gap:10px}
.mx .r0{--rc:#9aa4b2}.mx .r1{--rc:#5fd36a}.mx .r2{--rc:#4fa3ff}.mx .r3{--rc:#c06bff}.mx .r4{--rc:#ffb53a}.mx .r5{--rc:#ff4d5e}.mx .r6{--rc:#7ff6ff}
.mx-tabs{grid-template-columns:repeat(6,1fr)}
.mx .mk-bar{margin:0;padding:8px;border-radius:12px;background:linear-gradient(180deg,rgba(20,30,50,.75),rgba(10,15,26,.75));box-shadow:inset 0 0 0 1px rgba(214,170,90,.28)}
.mx .wchip,.mx .mk-meta{border-radius:9px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #2c3c58}
.mx-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.mx-h .t-title{font-size:17px}
.mx-n{font-size:12px;padding:1px 7px;border-radius:8px;background:rgba(0,0,0,.35);color:#e8edf5}
.mx-h .ig-note{margin-left:auto}
.mx-sel{height:36px;min-width:150px;font-size:13px}
.mx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px;align-content:start}
.mx-card{all:unset;box-sizing:border-box;position:relative;min-width:0;display:flex;flex-direction:column;gap:3px;padding:6px 6px 8px;border-radius:11px;cursor:pointer;
background:linear-gradient(180deg,rgba(30,42,66,.95),rgba(15,21,36,.95));box-shadow:inset 0 0 0 1px #34465f;transition:filter .12s,transform .12s}
.mx-card:hover{filter:brightness(1.15)}.mx-card:active{transform:scale(.97)}
.mx-card:focus-visible{outline:2px solid #6fc9ff;outline-offset:2px}
.mx-card.on{box-shadow:inset 0 0 0 2px #ffcf4a,0 0 14px rgba(255,190,60,.3)}
.mx-card.mine{box-shadow:inset 0 0 0 1px #4f8f5a}
.mx-card.busy{opacity:.6}
.mx-th{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:9px;
background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--rc,#6b7a96) 26%,transparent),rgba(8,12,22,.7) 72%);box-shadow:inset 0 0 0 2px var(--rc,#6b7a96),inset 0 0 16px color-mix(in srgb,var(--rc,#6b7a96) 30%,transparent)}
.mx-th .ithumb{width:72%;height:72%}
.mx-th .up{position:absolute;top:4px;right:4px;font-size:11px;line-height:16px;padding:0 5px;border-radius:7px;background:rgba(0,0,0,.65);color:#ffe28a}
.mx-th .ig-tag{position:absolute;top:auto;bottom:22px;left:4px;font-style:normal;font-size:10px;font-weight:800;padding:1px 6px;border-radius:7px;background:rgba(0,0,0,.7);color:#bfe9c6}
.mx-th .ig-pw{bottom:3px}
.mx-nm{font-size:12.5px;font-weight:700;color:var(--rc,#e8edf5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mx-rn{font-size:11px;color:var(--rc,#9fb0c8)}
.mx-pr{font-size:13.5px;font-weight:800;color:#ffcf4a;line-height:1.15}
.mx-pr small.brl{display:block;font-size:10.5px;font-weight:600;color:#9fb0c8}
.mx .mk-empty,.mx .how{margin:0}
/* Celular: abas só com o ícone e o nome curto, grade de 3 colunas. */
.mx.app .mx-tabs{gap:4px}
.mx.app .mx-tabs .ig-cat{height:60px;flex-direction:column;gap:2px;padding:4px 2px;font-size:10.5px}
.mx.app .mk-meta{padding:4px 7px;font-size:11.5px;min-width:0}.mx.app .mk-meta small{font-size:10px}
.mx.app .mx-tabs .ig-cat span{white-space:normal;text-align:center;line-height:1.1}
.mx.app .mk-bar{flex-wrap:wrap}
.mx.app .mk-bar .mk-meta{flex:1;min-width:0}
.mx.app .mx-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:6px}
.mx.app .mx-h .ig-note{margin-left:0;width:100%}
.mx.app .ig-acts{width:100%}
.mx.app .mx-sel{flex:1;min-width:0}
/* Fases (02/10, no jeito da Mochila nova): onde você está à esquerda; cartões dos mapas à direita. */
.fz .fz-here{width:270px}
.fz-big{position:relative;height:150px;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:10px 12px;background:#0d1422 center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(214,170,90,.4)}
.fz-big::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(5,8,15,.85))}
.fz-big>*{position:relative;z-index:1}
.fz-you{font-size:11.5px;font-weight:700;color:#cdb98d;text-transform:uppercase;letter-spacing:.5px}
.fz-big .t-title{font-size:22px}
.fz-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fz-sum>div{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px;border-radius:9px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px #2c3c58}
.fz-sum b{font-size:15px;color:#ffe08a}.fz-sum small{font-size:10.5px;color:#9fb0c8;text-align:center;line-height:1.15}
.fz-cats{grid-template-columns:repeat(3,1fr)}
/* 04/10: com a aba PvP são 4 abas numa linha só. */
.fz-cats:has(> :nth-child(4)){grid-template-columns:repeat(4,1fr)}
.fz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:10px;align-content:start}
.fz-card{position:relative;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,rgba(30,42,66,.95),rgba(15,21,36,.95));box-shadow:inset 0 0 0 1px #34465f;transition:filter .12s}
.fz-card:hover{filter:brightness(1.1)}
.fz-card.cur{box-shadow:inset 0 0 0 2px #ffcf4a,0 0 16px rgba(255,190,60,.25)}
.fz-card.locked .fz-th{filter:grayscale(.75) brightness(.55)}
.fz-th{position:relative;height:104px;background:#0d1422 center/cover no-repeat;box-shadow:inset 0 -24px 24px -18px rgba(5,8,15,.9)}
.fz-n{position:absolute;top:6px;left:6px;min-width:26px;height:26px;padding:0 6px;display:grid;place-items:center;border-radius:8px;font-size:14px;color:#fff;background:rgba(0,0,0,.7);box-shadow:inset 0 0 0 1px rgba(255,207,74,.6)}
.fz-st{position:absolute;bottom:6px;left:6px;font-size:12px;font-weight:800;color:#ffd24d;padding:1px 7px;border-radius:8px;background:rgba(0,0,0,.7)}
.fz-lk{position:absolute;inset:0;display:grid;place-items:center}.fz-lk img{width:38px;height:38px;filter:drop-shadow(0 2px 4px #000)}
.fz-drop{all:unset;box-sizing:border-box;position:absolute;top:6px;right:6px;width:36px;height:36px;display:grid;place-items:center;border-radius:9px;cursor:pointer;background:rgba(8,12,22,.75);box-shadow:inset 0 0 0 1px rgba(201,162,79,.6)}
.fz-drop img{width:26px;height:26px;object-fit:contain}
.fz-drop:hover,.fz-drop.on{background:rgba(60,44,12,.9);box-shadow:inset 0 0 0 2px #ffcf4a}
.fz-b{display:flex;flex-direction:column;gap:5px;padding:8px 10px 10px;flex:1}
.fz-t{font-size:15px;font-weight:800;color:#f3e3bd;line-height:1.15}
.fz-sub{font-size:11.5px;color:#9fb0c8;margin-top:-3px}
.fz-tags{display:flex;flex-wrap:wrap;gap:4px}
.fz-tag{font-size:11px;font-weight:700;padding:2px 7px;border-radius:7px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px #34465f;color:#cfd8e6;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fz-tag.lv{color:#9fe0ff}.fz-tag.boss{color:#ff8f86}
.fz-mobs{margin:0;font-size:11.5px;line-height:1.3;color:#8e9bb0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fz-why{margin:0;font-size:11.5px;color:#ffcf8a}
.fz-b .buy{margin-top:auto;height:36px}
.fz-over{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:rgba(4,7,14,.72)}
.fz-pop{position:relative;width:min(460px,100%);max-height:100%;overflow:auto;padding:14px;border-radius:12px;background:linear-gradient(180deg,#18233a,#0e1526);box-shadow:inset 0 0 0 1px rgba(214,170,90,.45),0 10px 40px rgba(0,0,0,.6)}
.fz-x{position:absolute;top:8px;right:8px}
.ig.fz.app{grid-template-columns:1fr}
.ig.fz.app .fz-here{width:auto;position:static;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ig.fz.app .fz-big{height:120px;grid-row:1/3}
.ig.fz.app .fz-sum{grid-template-columns:1fr;gap:4px}.ig.fz.app .fz-sum>div{flex-direction:row;justify-content:space-between;padding:4px 8px}
.ig.fz.app .fz-here .ig-note{grid-column:1/-1;display:none}
.ig.fz.app .fz-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.ig.fz.app .fz-t{font-size:14px}
/* Tema da Mochila nova nas outras telas (02/10, dono: "vamos refazer essas telas igual fizemos com as outras, com o mesmo
esquema da mochila"): .mk2 na raiz da janela troca as molduras antigas por painéis escuros com borda dourada fina, as
abas pelas abas azuis da Mochila e as linhas por cartões. */
.mk2 .fr-slot,.mk2 .fr-slot-on{border:12px solid transparent;border-image:none;border-radius:12px;background:linear-gradient(180deg,rgba(26,37,60,.92),rgba(12,18,31,.92));box-shadow:0 0 0 1px rgba(214,170,90,.3)}
.mk2 .fr-slot-on{box-shadow:0 0 0 2px #ffcf4a,0 0 14px rgba(255,190,60,.25)}
.mk2 .lrow{border-radius:10px;background:linear-gradient(180deg,rgba(30,42,66,.92),rgba(15,21,36,.92));box-shadow:inset 0 0 0 1px #34465f}
.mk2 .q-d.sec,.mk2 .t-sub{font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#cdb98d}
.mk2 .du-tab,.mk2 .ev-tab{border:0;border-radius:9px;color:#b9c6d8;font-weight:700;background:rgba(24,34,54,.9);box-shadow:inset 0 0 0 1px #34465f}
.mk2 .du-tab.on,.mk2 .ev-tab.on{color:#fff;background:linear-gradient(180deg,#2f6fd0,#1d4b97);box-shadow:inset 0 0 0 1px #7fb0ff}
.mk2 .ig-cats{margin:0}
.mk2-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.mk2-h .t-title{font-size:17px}
.mk2-h .ig-note{margin-left:auto}
/* Eventos */
.ev.ev2{display:flex;flex-direction:column;gap:10px}
.ev2-cats{grid-template-columns:repeat(3,1fr)}
.ev2-cols{display:grid;grid-template-columns:minmax(330px,40%) 1fr;gap:12px;align-items:start}
.ev2-left{position:static}
.ev2-right{min-width:0}
.ev2 .ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.ev2 .evc{border-radius:12px;overflow:hidden;background:linear-gradient(180deg,rgba(30,42,66,.95),rgba(15,21,36,.95));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ec,#34465f) 55%,#2a3a56)}
.ev2 .evc-h{background:linear-gradient(135deg,color-mix(in srgb,var(--ec,#4fc3ff) 30%,#141d30),#141d30 75%)}
.ev2 .ev-big{border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ec,#ffcf4a) 55%,#2a3a56)}
.ev2 .evs-beta{border-radius:12px}
.ev2 .ev-none{padding:18px;border-radius:12px;text-align:center;color:#9fb0c8;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px #2c3c58}
.ev2.app .ev2-cols{grid-template-columns:1fr}
.ev2.app .ev2-cats .ig-cat{height:50px;flex-direction:column;gap:1px;font-size:11px}
.mk2-none{margin:0;padding:18px;border-radius:12px;text-align:center;color:#9fb0c8;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px #2c3c58}
.mk2 .ig-eq{position:sticky;top:0}
.mk2 .ig-cats .ig-cat{position:relative}
.mk2 .ig-cat .du-n{position:absolute;top:3px;right:4px;margin:0;min-width:18px;height:18px;font-size:11px}
/* A coroa do VIP ao lado do nome (02/10): ".lrow img" deixava a coroa com 36 px, numa linha só dela. */
.lrow .vipi,.lrow img.vipi{width:16px;height:16px;flex:none}
/* Indique amigos (02/10) */
.rf3 .rf3-left{width:330px}
.rf3-hero{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px;border-radius:10px;text-align:center;background:radial-gradient(circle at 50% 20%,rgba(255,200,60,.2),rgba(8,12,22,.4) 70%);box-shadow:inset 0 0 0 1px rgba(214,170,90,.35)}
.rf3-hero .rf-big{font-size:21px}
.rf3-code{display:block;padding:9px 10px;border-radius:9px;background:#0a1120;box-shadow:inset 0 0 0 1px #2b3b5e;color:#ffd66b;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rf3-btns{display:flex;gap:6px;flex-wrap:wrap}.rf3-btns .ig-btn{flex:1;justify-content:center;text-decoration:none}
.rf3-wa{background:linear-gradient(#2fbf61,#1d8a43)!important;color:#fff!important;box-shadow:none!important}
.rf3-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rf3-steps li{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px #2c3c58;font-size:13px;color:#dfe7ef}
.rf3-steps b{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(#ffd76a,#c7881d);color:#2a1604;font-size:12.5px}
.rf3 .rf-road{gap:8px}.rf3 .rf-card{border:0;border-radius:12px;padding:12px 10px}
.rf3-fh{margin-top:6px}
.rf3-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.rf3-f{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:10px;background:linear-gradient(180deg,rgba(30,42,66,.92),rgba(15,21,36,.92));box-shadow:inset 0 0 0 1px #34465f}
.rf3-f.ok{box-shadow:inset 0 0 0 1px #4f8f5a}
.rf3-f img{width:34px;height:34px;flex:none;border-radius:7px;image-rendering:pixelated;box-shadow:0 0 0 1px rgba(214,170,90,.35)}
.rf3-f>span{display:flex;flex-direction:column;min-width:0}
.rf3-f b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rf3-f small{font-size:11px;color:#9fb0c8}
.rf3-f.ok .rf3-fs{color:#7dff9a}
.hf.app .ig.rf3{grid-template-columns:1fr}.hf.app .rf3 .rf3-left{width:auto;position:static}
/* Servidor Alpha (02/10): contagem do Beta à esquerda, abas à direita. */
.al2 .al2-left{width:300px}
.al2-top{display:flex;gap:10px;align-items:center}
.al2-top .t-title{display:block;font-size:18px;line-height:1.15}.al2-top small{display:block;margin-top:3px;font-size:12px;color:#aab6c8;line-height:1.3}
.al2-cd{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;border-radius:12px;text-align:center;background:linear-gradient(135deg,rgba(138,77,255,.32),rgba(242,193,78,.14));box-shadow:inset 0 0 0 1px rgba(185,140,255,.55),0 0 18px rgba(138,77,255,.2)}
.al2-cd small{font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#d9c8ff}
.al2-cd b{font-size:30px;line-height:1.1;color:#ffe08a;text-shadow:0 2px 0 #3a2208,0 0 14px rgba(255,200,60,.4)}
.al2-cd span{font-size:12px;color:#e7defa}
.al2-cd.none span{font-size:13.5px;color:#e7defa}
.al2-pio{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;background:rgba(125,255,154,.1);box-shadow:inset 0 0 0 1px rgba(125,255,154,.3);color:#a6ffbe;font-weight:700;font-size:13px}
.al2-pio .alpha-ico{width:24px;height:24px;display:inline-grid;place-items:center;border-radius:7px;font:800 16px/1 Georgia,serif;color:#ffe08a;background:linear-gradient(135deg,#8a4dff,#4b2a9a)}
.al2-cats{grid-template-columns:repeat(4,1fr)}
.al2 .al-card{background:none;box-shadow:none;padding:0}
.al2 .al-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.al2-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.al2 .al-keep .al-ct{color:#8ee6a0}.al2 .al-keep .al-ct + .al-row{border-top:0}
.al2 .alpha-sk{border:0;border-radius:12px}
.hf.app .ig.al2{grid-template-columns:1fr}.hf.app .al2 .al2-left{width:auto;position:static}
.hf.app .al2-two{grid-template-columns:1fr}
.hf.app .al2-cats .ig-cat,.hf.app .du2-cats .ig-cat,.hf.app .gd2-cats .ig-cat,.hf.app .rk2-cats .ig-cat,.hf.app .cfg2-cats .ig-cat{height:56px;flex-direction:column;gap:2px;padding:4px 2px;font-size:10.5px}
.hf.app .al2-cats .ig-cat span,.hf.app .du2-cats .ig-cat span,.hf.app .gd2-cats .ig-cat span,.hf.app .rk2-cats .ig-cat span,.hf.app .cfg2-cats .ig-cat span{white-space:normal;text-align:center;line-height:1.1}
/* Dúvidas (02/10): assuntos à esquerda em botões com ícone, o texto num painel. */
.hp.hpx{grid-template-columns:250px 1fr;gap:14px}
.hpx .hp-nav{gap:5px;overflow:auto;max-height:100%}
.hpx .hp-t{border:0;border-image:none;border-radius:9px;min-height:42px;padding:0 10px;color:#b9c6d8;background:rgba(24,34,54,.9);box-shadow:inset 0 0 0 1px #34465f}
.hpx .hp-t:hover{filter:brightness(1.15)}
.hpx .hp-t.on{color:#fff;background:linear-gradient(180deg,#2f6fd0,#1d4b97);box-shadow:inset 0 0 0 1px #7fb0ff}
.hpx .hp-t img{width:26px;height:26px;image-rendering:pixelated}
.hpx .hp-nav a.hp-man{box-shadow:inset 0 0 0 1px rgba(242,193,78,.55)}
.hpx .hp-c{display:block;padding:12px 16px 16px;border:0}
.hpx .hp-c h3:first-of-type{margin-top:2px}
.hpx .hp-slot{border:0;border-radius:10px;padding:6px 8px}
.hf.app .hp.hpx{grid-template-columns:1fr}
.hf.app .hpx .hp-nav{position:static;flex-direction:row;padding:8px}
.hf.app .hpx .hp-t{flex:none}
/* Novidades (02/10): lista à esquerda, a atualização aberta à direita; no celular, abre e fecha no toque. */
.nw2 .nw2-left{width:290px;max-height:100%;overflow:auto}
.nw2-list{display:flex;flex-direction:column;gap:5px}
.nw2-b{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:9px;cursor:pointer;background:rgba(24,34,54,.9);box-shadow:inset 0 0 0 1px #34465f}
.nw2-b:hover{filter:brightness(1.15)}
.nw2-b.on{background:linear-gradient(180deg,#2f6fd0,#1d4b97);box-shadow:inset 0 0 0 1px #7fb0ff}
.nw2-b b{font-size:13px;line-height:1.25;color:#eef2f8}
.nw2-b small{font-size:11px;color:#9fb0c8}.nw2-b.on small{color:#cfe0ff}
.nw2-cs{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.nw2-c,.nw2-new{font-style:normal;font-size:10.5px;font-weight:800;padding:0 6px;border-radius:7px;line-height:16px}
.nw2-c.add{background:rgba(88,186,105,.22);color:#8fe39c}.nw2-c.imp{background:rgba(88,168,255,.2);color:#9cc9ff}.nw2-c.fix{background:rgba(255,182,64,.2);color:#ffcf7a}
.nw2-c.add::before{content:"+ "}.nw2-c.fix::before{content:"✓ "}.nw2-c.imp::before{content:"↑ "}
.nw2-new{background:linear-gradient(#ffd66b,#d49a2a);color:#2a1604}
.nw2-right{min-width:0}
.nw2-art .mk2-h{align-items:center;flex-wrap:nowrap}
.nw2-art .mk2-h .t-title{display:block;font-size:19px;line-height:1.2}.nw2-art .mk2-h small{display:block;margin:2px 0 0}
.nw2-ic{width:40px;height:40px;image-rendering:pixelated;flex:none}
.nw2-body{margin:0 0 6px;line-height:1.45}
.nw2 .nw-part{margin-top:10px}
.nw2 .nw-part ul{line-height:1.45}
.nw2.app{display:flex;flex-direction:column;gap:8px}
.nw2-acc{display:flex;flex-direction:column;gap:6px}
.nw2-it{border-radius:11px;background:linear-gradient(180deg,rgba(26,37,60,.92),rgba(12,18,31,.92));box-shadow:inset 0 0 0 1px rgba(214,170,90,.3)}
.nw2-it summary{display:flex;align-items:center;gap:9px;padding:9px 10px;cursor:pointer;list-style:none}
.nw2-it summary::-webkit-details-marker{display:none}
.nw2-it summary img{width:30px;height:30px;flex:none;image-rendering:pixelated}
.nw2-it summary>span:first-of-type{display:flex;flex-direction:column;min-width:0;flex:1}
.nw2-it summary b{font-size:13.5px;line-height:1.25}.nw2-it summary small{font-size:11px;color:#9fb0c8}
.nw2-it summary .nw2-cs{flex:none;flex-direction:column;align-items:flex-end;margin:0}
.nw2-it[open] summary{box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)}
.nw2-d{padding:4px 12px 12px;font-size:13px}
/* Configurações (02/10): assuntos à esquerda e as opções do assunto à direita. */
.cfg.cfg2{max-width:none}
.cfg2 .cfg2-left{width:250px}
.cfg2-cats{grid-template-columns:1fr;gap:5px}
.cfg2-cats .ig-cat{justify-content:flex-start;padding:0 12px}
.cfg2-foot{display:flex;flex-direction:column;gap:6px;margin-top:4px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.cfg2-foot .ig-btn{justify-content:center;height:40px;font-size:14px}
.cfg2-right{min-width:0}
.cfg2-s{display:flex;flex-direction:column;gap:4px}
.cfg2-s[hidden]{display:none}
.cfg2 .field{margin-bottom:8px;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px #2c3c58}
.cfg2 .cfg-row{border:0;border-radius:10px;margin-bottom:6px;padding:8px 10px}
.cfg2 .cfg-btns{margin:4px 0 2px}
.hf.app .ig.cfg2{grid-template-columns:1fr}.hf.app .cfg2 .cfg2-left{width:auto;position:static}
.hf.app .cfg2-cats{grid-template-columns:repeat(4,1fr);gap:4px}
.hf.app .cfg2-cats .ig-cat{justify-content:center}
.hf.app .cfg2-foot{flex-direction:row;flex-wrap:wrap;align-items:center}.hf.app .cfg2-foot .ig-btn{flex:none;min-width:120px}.hf.app .cfg2-foot .ig-note{flex:1;min-width:160px}
/* Duelos (02/10): você e a temporada à esquerda; abas com ícone e os jogadores em cartões à direita. */
.du2 .du2-left{width:270px}
.du2-me{display:flex;align-items:center;gap:10px}
.du2-por{flex:none;width:64px;height:64px;border-radius:12px;overflow:hidden;background:#0d1628;box-shadow:inset 0 0 0 2px rgba(214,170,90,.55)}
.du2-por img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.du2-me b{display:block;font-size:16px;color:#f3e3bd}.du2-me small{font-size:12px;color:#9fb0c8}
.du2-season{display:flex;flex-direction:column;padding:7px 10px;border-radius:9px;background:rgba(79,163,255,.1);box-shadow:inset 0 0 0 1px rgba(79,163,255,.35)}
.du2-season small{font-size:11.5px;color:#9cc9ff}.du2-season b{font-size:14px;color:#e8f1ff}
.du2-sum b{font-size:14px}
.du2-hon{display:grid;grid-template-columns:34px auto 1fr;gap:8px;align-items:center;padding:8px 10px;border-radius:9px;background:rgba(255,207,74,.08);box-shadow:inset 0 0 0 1px rgba(255,207,74,.35)}
.du2-hon img{width:32px;height:32px;image-rendering:pixelated}
.du2-hon>div>b{display:block;font-size:16px;color:#ffe08a;line-height:1.1}.du2-hon>div>small{font-size:11px;color:#cdb98d}
.du2-cap small{display:block;font-size:11px;color:#cdb98d;margin-bottom:3px}.du2-cap .ref-bar{width:100%;height:10px}
.du2-rec{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px #2c3c58}
.du2-rec small{font-size:11.5px;color:#9fb0c8}.du2-rec b{font-size:13px}
.du2-cats{grid-template-columns:repeat(5,1fr)}
.du2-right{min-width:0}
.du2 .du-new{border:0;padding:0;background:none;box-shadow:none;max-width:none;margin:0;gap:8px}
.du2 .du-cands{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;max-height:none;overflow:visible;flex:none}
.du2 .du-g{grid-column:1/-1;margin:6px 2px 0;font-size:11.5px;font-weight:800;letter-spacing:.6px;color:#cdb98d}
.du2 .du-c{flex-direction:row;align-items:center;gap:9px;padding:9px 10px;border-radius:11px;background:linear-gradient(180deg,rgba(30,42,66,.95),rgba(15,21,36,.95));box-shadow:inset 0 0 0 1px #34465f}
.du2 .du-c.live{box-shadow:inset 0 0 0 1px rgba(111,211,106,.65),0 0 10px rgba(111,211,106,.15)}
.du2 .du-c.on{box-shadow:inset 0 0 0 2px #ffcf4a,0 0 14px rgba(255,190,60,.3)}
.du2 .du-c img{width:40px;height:40px;border-radius:9px}
.du2 .du-c .du-send{min-width:0;padding:0 12px;height:34px}
.du2 .ar-rank{gap:10px}
.du2 .ar-rws,.du2 .ar-last,.du2 .pv-bal,.du2 .pv-o{border:0;border-radius:11px}
.hf.app .ig.du2{grid-template-columns:1fr}.hf.app .du2 .du2-left{width:auto;position:static;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hf.app .du2 .du2-me,.hf.app .du2 .du2-sum,.hf.app .du2 .du2-hon{grid-column:1/-1}
.hf.app .du2 .du2-left .ig-note{display:none}
.hf.app .du2 .du-cands{grid-template-columns:1fr}
/* Ranking (02/10): pódio e a sua posição à esquerda, a lista à direita. */
.rk2{display:flex;flex-direction:column;gap:10px}
.rk2-cats{grid-template-columns:repeat(8,minmax(0,1fr))}
.rk2-cats .ig-cat{padding:0 6px;font-size:12.5px}
.rk2-cols{display:grid;grid-template-columns:250px 1fr;gap:12px;align-items:start}
.rk2-right{min-width:0}
.rk2-pod{display:flex;flex-direction:column;gap:6px}
.rk2-p{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;background:linear-gradient(90deg,color-mix(in srgb,var(--mc) 22%,transparent),rgba(8,12,22,.4));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mc) 55%,#2c3c58)}
.rk2-p.p1{--mc:#ffcf4a}.rk2-p.p2{--mc:#cfd8e6}.rk2-p.p3{--mc:#d98a4a}
.rk2-p.p1{padding:12px 10px}
.rk2-m{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:15px;color:#1b1206;background:radial-gradient(circle at 40% 35%,#fff,var(--mc) 60%);box-shadow:0 0 10px color-mix(in srgb,var(--mc) 60%,transparent)}
.rk2-p.p1 .rk2-m{width:38px;height:38px;font-size:18px}
.rk2-p>span{display:flex;flex-direction:column;min-width:0}
.rk2-p b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f3e3bd}.rk2-p.p1>span>b{font-size:15px;color:#ffe08a}
.rk2-p small{font-size:11.5px;color:#cdd6e4;display:flex;align-items:center}
.rk2-p .rk-ic{width:14px;height:14px;margin-right:4px}
.rk2-you{display:flex;flex-direction:column;align-items:center;gap:1px;margin-top:4px;padding:10px;border-radius:10px;background:rgba(79,163,255,.1);box-shadow:inset 0 0 0 1px rgba(79,163,255,.4)}
.rk2-you small{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#9cc9ff}
.rk2-you b{font-size:26px;color:#fff}.rk2-you span{font-size:12px;color:#cfe0ff;display:flex;align-items:center}
.rk2-you.none span{text-align:center}
.rk2-you .rk-ic{width:14px;height:14px;margin-right:4px}
.rk2 .list{gap:5px}
.rk2 .lrow.rank{padding:6px 10px}
.rk2 .lrow.rank .t{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0}
.rk2 .lrow.rank .t>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk2 .lrow.rank>.t-title{display:grid;place-items:center;width:32px;height:32px;margin:0 auto;border-radius:50%;font-size:15px;background:rgba(255,255,255,.06)}
.rk2 .lrow.rank.top1>.t-title{color:#1b1206;background:radial-gradient(circle at 40% 35%,#fff,#ffcf4a 60%)}
.rk2 .lrow.rank.top2>.t-title{color:#1b1206;background:radial-gradient(circle at 40% 35%,#fff,#cfd8e6 60%)}
.rk2 .lrow.rank.top3>.t-title{color:#1b1206;background:radial-gradient(circle at 40% 35%,#fff,#d98a4a 60%)}
.rk2 .lrow.rank.cur{box-shadow:inset 0 0 0 2px #ffcf4a}
.rk2 .lrow.rank .buy{height:32px}
.hf.app .rk2-cats{grid-template-columns:repeat(4,1fr);gap:4px}
.hf.app .rk2-cols{grid-template-columns:1fr}
.hf.app .rk2-left{position:static}
.hf.app .rk2-pod{flex-direction:row}.hf.app .rk2-p{flex:1;min-width:0;flex-direction:column;align-items:center;text-align:center;padding:8px 4px}.hf.app .rk2-p>span{align-items:center;max-width:100%}
.hf.app .rk2-you{flex-direction:row;justify-content:center;gap:8px}
/* Guild (02/10): janela grande; emblema, nível e números à esquerda, abas com ícone à direita. */
.gd2 .gd2-left{width:290px}
.gd2-id{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:12px;text-align:center;background:radial-gradient(circle at 50% 30%,rgba(242,193,78,.18),rgba(8,12,22,.4) 70%);box-shadow:inset 0 0 0 1px rgba(214,170,90,.35)}
.gd2-mk{width:96px;height:96px;image-rendering:pixelated;border-radius:10px;box-shadow:0 0 0 2px rgba(214,170,90,.6),0 4px 14px rgba(0,0,0,.5)}
.gd2-id .nm{font-size:19px;font-weight:800;color:#f2c14e;line-height:1.2}
.gd2 .gd-lv{margin:0}
.gd2 .gd-perks{margin:0}
.gd2-sum{grid-template-columns:repeat(2,1fr)}
.gd2-sum b{font-size:14px}
.gd2-notice{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px #2c3c58;font-size:12.5px}
.gd2-notice small{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#cdb98d}
.gd2-cats{grid-template-columns:repeat(8,minmax(0,1fr))}
.gd2-cats .ig-cat{padding:0 5px;font-size:12.5px;gap:5px}
.gd2-right{min-width:0}
.gd2 .gd-new{display:flex;gap:10px;align-items:flex-start;padding:0;margin:0;border:0;background:none;box-shadow:none}
.gd2 .gd-new img{width:48px;height:48px}
.gd2 .gd-new p{margin:4px 0 0}
.gd2 .gd-form{margin:0}
.gd2 .gd-card,.gd2 .gd-cas,.gd2 .gd-m{border:0;border-radius:11px}
.gd2 .gd-sec{margin-top:4px}
.hf.app .ig.gd2{grid-template-columns:1fr}.hf.app .gd2 .gd2-left{width:auto;position:static}
.hf.app .gd2-cats{grid-template-columns:repeat(4,1fr);gap:4px}
.hf.app .gd2-sum{grid-template-columns:repeat(3,1fr)}
.hf.app .gd2-id{flex-direction:row;text-align:left;padding:8px 10px}.hf.app .gd2-mk{width:56px;height:56px}
.ev2 .evc-h{display:grid;grid-template-columns:80px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-content:center}
.ev2 .evc-h>img{grid-row:1/3}
.ev2 .evc-h .ev-when{grid-column:2;justify-self:start;margin-top:6px}
.gd2-cats{grid-template-columns:repeat(4,minmax(0,1fr))}
.gd2-cats .ig-cat{height:40px;font-size:13px}
.rk2-m,.rk2 .lrow.rank.top1>.t-title,.rk2 .lrow.rank.top2>.t-title,.rk2 .lrow.rank.top3>.t-title{color:#1b1206;text-shadow:0 1px 0 rgba(255,255,255,.5);background:radial-gradient(circle at 38% 32%,color-mix(in srgb,var(--mc) 45%,#fff) 0%,var(--mc) 55%,color-mix(in srgb,var(--mc) 70%,#000) 100%)}
.rk2 .lrow.rank.top1{--mc:#ffcf4a}.rk2 .lrow.rank.top2{--mc:#cfd8e6}.rk2 .lrow.rank.top3{--mc:#d98a4a}
.rk2 .lrow.rank.top1>.t-title,.rk2 .lrow.rank.top2>.t-title,.rk2 .lrow.rank.top3>.t-title{font-family:inherit;font-weight:900}
.rk2-m{font-weight:900}
.rk2-p .rk2-m{color:#1b1206;overflow:visible;font-size:15px}.rk2-p.p1 .rk2-m{font-size:18px}
.hf.app .du2 .du2-season,.hf.app .du2 .du2-rec{grid-column:1/-1}
/* Loja (02/10, dono: "vamos fazer o layout da loja também"): diamantes, seções e VIP à esquerda; a vitrine à direita. */
.lj2 .lj2-left{width:250px}
.lj2-dia{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;border-radius:11px;cursor:help;background:linear-gradient(135deg,rgba(79,195,255,.2),rgba(8,12,22,.4));box-shadow:inset 0 0 0 1px rgba(127,246,255,.45)}
.lj2-dia img{width:36px;height:36px;image-rendering:pixelated}
.lj2-dia small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#9fd8ff}
.lj2-dia b{display:block;font-size:22px;line-height:1.1;color:#fff}
.lj2-dia .ig-btn{height:30px;padding:0 10px;font-size:12.5px}
.lj2-cats{grid-template-columns:1fr;gap:5px}
.lj2-cats .ig-cat{justify-content:flex-start;padding:0 12px}
.lj2-vip{display:flex;gap:9px;align-items:center;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #2c3c58}
.lj2-vip.on{background:rgba(255,207,74,.1);box-shadow:inset 0 0 0 1px rgba(255,207,74,.45)}
.lj2-vip img{width:38px;height:38px;flex:none;image-rendering:pixelated}
.lj2-vip b{display:block;font-size:14px;color:#ffe08a}.lj2-vip:not(.on) b{color:#cfd8e6}
.lj2-vip small{display:block;font-size:11.5px;color:#aab6c8;line-height:1.3}
.lj2-right{min-width:0}
.lj2-right .vip-on{display:none}
.lj2 .promo-bar{margin:0}
.lj2 .vipc{grid-template-columns:96px minmax(0,1fr) 220px;grid-template-rows:auto auto;margin:0;border:0;background:linear-gradient(135deg,rgba(70,44,120,.6),rgba(14,20,36,.96) 62%);box-shadow:inset 0 0 0 1px rgba(255,207,74,.55),0 0 18px rgba(255,190,60,.1)}
.lj2 .vipc-badge{grid-row:1}
.lj2 .vipc-main{grid-column:2;grid-row:1;border-left:0}
.lj2 .vipc-ps{grid-column:1/3;grid-row:2;border-left:0;border-top:1px solid rgba(255,255,255,.08)}
.lj2 .vipc-buy{grid-column:3;grid-row:1/3;border-left:1px solid rgba(255,207,74,.25);background:rgba(0,0,0,.25)}
.lj2 .vipc-f{background:linear-gradient(135deg,rgba(255,150,60,.25),rgba(120,50,20,.35));box-shadow:inset 0 0 0 1px rgba(255,170,80,.55)}
.lj2 .cur-row{margin:0;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px #2c3c58}
.lj2 .cur-row label{color:#e8edf5}.lj2 .cur-row small{color:#9fb0c8}
.lj2 .shop-note{margin:0}
.lj2 .starter{margin:4px 0 0;border:0;border-radius:12px;background:linear-gradient(135deg,rgba(255,207,74,.12),rgba(14,20,36,.95) 55%);box-shadow:inset 0 0 0 1px rgba(255,207,74,.55)}
.lj2 .pk-banner{margin:0;background:linear-gradient(135deg,rgba(79,195,255,.2),rgba(14,20,36,.96) 60%);box-shadow:inset 0 0 0 1px rgba(127,246,255,.4);color:#e8edf5}
.lj2 .pk-bt{border-color:rgba(255,255,255,.08)}
.lj2 .pk-bt small{color:#9fd8ff}.lj2 .pk-bt b{color:#fff}.lj2 .pk-bt span,.lj2 .pk-bt ul{color:#cfd8e6}.lj2 .pk-bt ul{border-top-color:rgba(255,255,255,.1)}
.lj2 .pk-bt li::before{color:#7ff6ff}
.lj2 .pk-card{background:linear-gradient(180deg,rgba(30,42,66,.95),rgba(15,21,36,.95));box-shadow:inset 0 0 0 1px #34465f}
.lj2 .pk-card.best{box-shadow:inset 0 0 0 2px #ffcf4a,0 0 14px rgba(255,190,60,.3)}
.lj2 .pk-art{background:radial-gradient(circle at 50% 42%,rgba(127,246,255,.32),rgba(8,12,22,.7) 72%);box-shadow:inset 0 0 0 2px #4fa3ff,inset 0 0 16px rgba(79,163,255,.3)}
.lj2 .pk-get{background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px #2c3c58}
.lj2 .pk-h{color:#eef2f8}
.lj2 .shop-items{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.lj2 .shop-items .card{border:0;border-radius:12px}
.lj2 .sk-card,.lj2 .vz-card{border:0;border-radius:12px}
.hf.app .ig.lj2{grid-template-columns:1fr;align-content:start} /* 06/10: com pouco conteúdo (aba VIP sem o Pacote de Iniciante) sobrava um vão entre as abas e a lista */
.hf.app .lj2 .lj2-left{width:auto;position:static}
.hf.app .lj2-cats{grid-template-columns:repeat(5,1fr);gap:4px}
.hf.app .lj2-cats .ig-cat{height:56px;flex-direction:column;justify-content:center;gap:2px;padding:4px 2px;font-size:10.5px}
.hf.app .lj2-vip{display:none}
.hf.app .lj2 .vipc-badge,.hf.app .lj2 .vipc-main,.hf.app .lj2 .vipc-ps,.hf.app .lj2 .vipc-buy{grid-row:auto}
.hf.app .lj2 .vipc-main{grid-column:2}
.hf.app .lj2 .vipc-buy{border-left:0}
.hf.app .lj2 .shop-items{grid-template-columns:repeat(2,minmax(0,1fr))}
.ar-row .t{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.lrow .t .vipi{display:inline-block;margin-left:2px}
/* Asas e auras batendo na Loja › Visual (02/10): a folha do jogo, quadro a quadro. */
.enf-anim{display:block;width:var(--w);height:var(--h);background-repeat:no-repeat;background-size:calc(var(--w) * var(--n)) var(--h);image-rendering:pixelated;animation:enfPlay calc(var(--n) * 100ms) steps(var(--n)) infinite}
.enf-aura{animation-duration:calc(var(--n) * 83ms)}
@keyframes enfPlay{to{background-position:calc(var(--w) * var(--n) * -1) 0}}
.vz-show .enf-anim{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--k,.95))}
.vz-show .vz-art:has(.enf-anim){position:absolute;inset:0;max-width:none}
.hf.app .vz-show .enf-wings{--k:.66}
.hf.app .vz-show .enf-aura{--k:.8}
@media (prefers-reduced-motion:reduce){.enf-anim{animation:none}}
/* Loja › Itens (02/10, dono: "dar um espaço aos lados, está encostando na borda; e em cima também, uns 10px"). */
.lj2 .shop-items .card{padding:10px 10px 10px}
.lj2 .shop-items .card .qty-seg{margin-inline:2px}
/* Atributos (02/10): herói, pontos livres e resultado à esquerda; um cartão por atributo à direita. */
.at2 .at2-left{width:300px}
.at2-me{display:flex;align-items:center;gap:10px}
.at2-por{flex:none;width:58px;height:58px;display:grid;place-items:center;border-radius:12px;overflow:hidden;background:#0d1628;box-shadow:inset 0 0 0 2px rgba(214,170,90,.55)}
.at2-por img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.at2-me b{display:block;font-size:16px;color:#f3e3bd}.at2-me small{font-size:11.5px;color:#9fb0c8;line-height:1.3}
.at2-free{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #2c3c58}
.at2-free b{font-size:28px;line-height:1;color:#cfd8e6}.at2-free span{font-size:12px;font-weight:700;color:#9fb0c8;text-transform:uppercase;letter-spacing:.5px}
.at2-free.has{background:rgba(125,255,154,.1);box-shadow:inset 0 0 0 1px rgba(125,255,154,.5),0 0 14px rgba(125,255,154,.15)}.at2-free.has b{color:#7dff9a}
.at2-stats{display:flex;flex-direction:column;gap:0}
.at2-stats .sr{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:3px 2px;border-bottom:1px solid rgba(255,255,255,.05)}
.at2-stats .sr span{color:#aeb9cb}.at2-stats .sr em{font-style:normal;color:#7dff9a}
.at2-btns{display:flex;flex-direction:column;gap:6px}
.at2-btns .ig-btn{justify-content:center;height:38px}
.at2-btns .ig-btn img{width:18px;height:18px}
.at2-right{min-width:0}
.at2-list{display:flex;flex-direction:column;gap:6px}
.at2-go{position:sticky;bottom:0;z-index:2;display:flex;gap:8px;margin-top:8px;padding:8px 0 2px;background:linear-gradient(180deg,rgba(13,19,33,0),#0d1321 30%)}
.at2-go .ig-btn{flex:1;justify-content:center;height:42px;font-size:15px}
.at2-go .ig-btn.gold{flex:2}
.at2-row{display:grid;grid-template-columns:40px minmax(0,1fr) 64px auto;gap:10px;align-items:center;padding:8px 10px;border-radius:11px;background:linear-gradient(180deg,rgba(30,42,66,.92),rgba(15,21,36,.92));box-shadow:inset 0 0 0 1px #34465f}
.at2-row.on{box-shadow:inset 0 0 0 2px #7dff9a}
.at2-ic{width:36px;height:36px;object-fit:contain;image-rendering:pixelated}
.at2-t b{display:block;font-size:15px;color:#eef2f8}.at2-t small{display:block;font-size:12px;color:#9fb0c8;line-height:1.3}
.at2-v{font-size:20px;text-align:right;color:#fff}.at2-v em{display:block;font-style:normal;font-size:13px;color:#7dff9a}
.at2-ctl{display:flex;gap:4px;align-items:center}
.at2-ctl .mini{width:32px;height:32px;font-size:17px}.at2-ctl .mini.max{width:auto;padding:0 9px;font-size:12px}
.at2-ctl .attr-n{width:58px;height:32px;text-align:center}
.hf.app .ig.at2{grid-template-columns:1fr}.hf.app .at2 .at2-left{width:auto;position:static}
.hf.app .at2-row{grid-template-columns:34px minmax(0,1fr) 54px;grid-template-areas:"i t v" "c c c";row-gap:6px}
.hf.app .at2-ic{grid-area:i;width:30px;height:30px}.hf.app .at2-t{grid-area:t}.hf.app .at2-v{grid-area:v}.hf.app .at2-ctl{grid-area:c;justify-content:flex-end}
.hf.app .at2-btns{flex-direction:row;flex-wrap:wrap}.hf.app .at2-btns .ig-btn{flex:1;min-width:140px}
/* PvP (02/10): o destaque à esquerda, os outros modos em cartões à direita (mesmo esquema de Eventos). */
.pvh.ev2 .ev2-cols{grid-template-columns:minmax(330px,42%) 1fr}
.pvh.ev2 .ev2-right .ev-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pvh.ev2.app .ev2-cols{grid-template-columns:1fr}
/* Amigos (02/10): janela grande; buscar, grupo e números à esquerda, os amigos em cartões à direita. */
.fr2 .fr2-left{width:290px}
.fr2-q{display:flex;gap:6px;margin:0}.fr2-q .input{flex:1;min-width:0;height:36px}.fr2-q .ig-btn{height:36px}
.fr2 #hf-friend-res:empty{display:none}
.fr2 #hf-friend-res .lrow{grid-template-columns:30px 1fr auto;padding:5px 8px}.fr2 #hf-friend-res .lrow img{width:28px;height:28px}
.fr2-sum b{font-size:16px}
.fr2-party{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;background:rgba(79,163,255,.1);box-shadow:inset 0 0 0 1px rgba(79,163,255,.35)}
.fr2-party img{width:32px;height:32px;image-rendering:pixelated}.fr2-party b{display:block;font-size:13.5px}.fr2-party small{display:block;font-size:11.5px;color:#9fb0c8;line-height:1.3}
.fr2-right{min-width:0}
.fr2-right .mk2-h .dot{vertical-align:0}
.fr2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:8px}
.fr2-c{display:grid;grid-template-columns:42px minmax(0,1fr);gap:4px 10px;align-items:center;padding:9px 10px;border-radius:11px;cursor:pointer;background:linear-gradient(180deg,rgba(30,42,66,.92),rgba(15,21,36,.92));box-shadow:inset 0 0 0 1px #34465f}
.fr2-c:hover{filter:brightness(1.1)}
.fr2-c.on{box-shadow:inset 0 0 0 1px rgba(87,211,106,.6)}
.fr2-c.wait{box-shadow:inset 0 0 0 1px rgba(255,207,74,.55)}
.fr2-c .fr-av{position:relative;grid-row:1}
.fr2-c .fr-av img{width:40px;height:40px;border-radius:8px;object-fit:cover;background:#0c1220}
.fr2-c:not(.on) .fr-av img{filter:grayscale(.7) brightness(.8)}
.fr2-c .fr-av .dot{position:absolute;right:-3px;bottom:-3px;box-shadow:0 0 0 2px #121a2b}
.fr2-t{min-width:0}.fr2-t b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fr2-t small{font-size:12px;color:#9fb0c8}
.fr2-b{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px}
.fr2-b .ig-btn{height:30px;padding:0 10px;font-size:12.5px}
.fr2-b .fr2-x{margin-left:auto;color:#ffb3a8}
.hf.app .ig.fr2{grid-template-columns:1fr}.hf.app .fr2 .fr2-left{width:auto;position:static}
.hf.app .fr2-grid{grid-template-columns:1fr}
/* Cartão do topo (02/10, dono: "as barras estão em cima do avatar, vamos centralizar também"): o anel e as pedras da moldura
saem 8 px para fora do retrato e encostavam nas barras. Mais espaço entre o retrato e as barras, e o retrato no meio da
altura do cartão. */
.hf.dock .hero-card{align-items:center;gap:12px;padding-left:8px}
.hf.app .hero-card{gap:12px}.hf.app .hero-card .portrait{margin-left:4px}
.hf.dock .hero-info .row{gap:4px}.hf.dock .hero-info .name{font-size:15px;min-width:0}
/* Campos de número sem as setinhas (02/10, dono: "tirar essas setinhas do input"): os botões − + e Máx já fazem isso. */
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
/* Tarefa do Mestre (02/10, dono: "tem que falar em qual mapa"; "mais de uma tarefa"): uma linha por parte com o mapa. */
.quest .cq-rows{grid-column:2;display:flex;flex-direction:column;gap:3px;margin-top:1px}
.cq-r{display:flex;align-items:baseline;gap:5px;font-size:12px;line-height:1.25;color:#e7dcc2}
.cq-r>i{font-style:normal;font-weight:900;color:#c77dff;width:9px;flex:none}
.cq-r>span{min-width:0}
.cq-r b{color:#fff;font-weight:800}
.cq-r.ok,.cq-r.ok b,.cq-r.ok>i{color:#8fe39a}
.cq-m{display:inline-flex;align-items:center;gap:2px;color:#d9c2ff;font-size:11.5px;font-weight:700;white-space:nowrap}
.quest .cq-m img,.cl-map img{grid-row:auto;width:13px;height:13px;margin:0;align-self:center;image-rendering:pixelated}
.quest .cq-btns{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.quest .cq-btns .q-act{margin-top:0}
.cl-map{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:0 7px 0 4px;border-radius:999px;background:rgba(122,63,208,.22);border:1px solid rgba(199,125,255,.35);color:#e6d4ff;font-size:11.5px;font-weight:700;white-space:nowrap;vertical-align:1px}
.cl-req li.cl-sl span{flex:1;min-width:0}
/* Imagem no chat (02/10, só a equipe manda): miniatura na mensagem e a imagem grande ao tocar. */
.cimg{display:block;margin:4px 0 2px;padding:0;border:0;background:none;cursor:zoom-in;max-width:100%}
.cimg img{display:block;max-width:min(100%,260px);max-height:170px;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.15),0 4px 10px rgba(0,0,0,.4);object-fit:contain;background:#0b1220}
.cimg-ov{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:16px;background:rgba(3,5,10,.9);cursor:zoom-out;pointer-events:auto}
.cimg-ov img{max-width:94vw;max-height:88vh;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.cimg-ov button{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:14px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:24px;cursor:pointer}
/* Comece a caçar (02/10): cartão da praça para quem está abaixo do nível 5. */
.quest.start-q{box-shadow:inset 0 0 0 1px rgba(255,214,107,.75),0 0 14px -4px rgba(255,200,80,.8);background:linear-gradient(90deg,rgba(255,190,60,.18),transparent 75%);animation:sqGlow 2.4s ease-in-out infinite}
@keyframes sqGlow{50%{box-shadow:inset 0 0 0 1px rgba(255,230,140,.95),0 0 20px -2px rgba(255,200,80,.95)}}
@media (prefers-reduced-motion:reduce){.quest.start-q{animation:none}}
/* Aviso do recomeço do Beta (02/10): janela no meio da tela, uma vez por conta. */
.bw-ov{position:absolute;inset:0;z-index:95;display:grid;place-items:center;padding:16px;background:rgba(3,5,10,.72);pointer-events:auto}
.bw-box{max-width:420px;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:18px 18px 16px;border-radius:14px;background:linear-gradient(180deg,#1d2a44,#111a2c);box-shadow:0 0 0 1px #c9a24f,0 18px 50px rgba(0,0,0,.6)}
.bw-ic{width:48px;height:48px;image-rendering:pixelated}
.bw-box .t-title{font-size:20px;color:#ffe08a}
.bw-box p{margin:0;font-size:14px;line-height:1.4;color:#e7dcc2}
.bw-box p.bw-keep{padding:7px 10px;border-radius:9px;background:rgba(79,196,106,.14);box-shadow:inset 0 0 0 1px rgba(79,196,106,.45);color:#c8f5d0}
.bw-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px}
/* Presentes do Alpha (02/10, dono: "melhorar essa moldura de alpha"): a moldura e o título numa vitrine roxa com raios, do
jeito que aparecem no jogo (antes a caixa cortava o anel e as pedras da moldura e o título era só um selo pequeno). */
.al-it.al-frame .al-art,.al-it.al-title .al-art{overflow:visible;position:relative;width:100%;height:60px;border-radius:9px;background:radial-gradient(ellipse at 50% 55%,rgba(150,80,255,.5),rgba(40,16,70,.15) 62%,transparent 75%)}
.al-it.al-frame .al-art::before,.al-it.al-title .al-art::before{content:'';position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:repeating-conic-gradient(rgba(200,150,255,.2) 0 7deg,transparent 7deg 20deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 62%);mask:radial-gradient(circle,#000 18%,transparent 62%);animation:vzRays 16s linear infinite;pointer-events:none}
.al-it.al-frame .al-fr{position:relative;z-index:1;width:46px;height:46px;border-radius:10px;overflow:visible}
.al-it.al-frame .al-fr img{border-radius:10px}
.al-it.al-title .al-tt{position:relative;z-index:1;font-size:12.5px;padding:3px 10px;border-radius:7px;white-space:normal;line-height:1.2;max-width:calc(100% - 10px);text-align:center}
@media (prefers-reduced-motion:reduce){.al-it.al-frame .al-art::before,.al-it.al-title .al-art::before{animation:none}}
/* Armeiro de Alvorada (02/10): à esquerda o armeiro e as 3 faixas (Comum, Incomum, Raro); à direita as 6 peças da classe. */
.ar2 .ar2-left{width:260px}
.ar2-who{display:flex;gap:10px;align-items:flex-start}
.ar2-who>img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated;flex:none;padding:6px;border-radius:10px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(214,170,90,.35)}
.ar2-who b{display:block;font-size:15px;color:#ffe2a0}
.ar2-who p{margin:3px 0 0;font-size:12.5px;line-height:1.35;color:#b9c6d8}
.ar2-cats{grid-template-columns:1fr;gap:6px}
.ar2-cats .ig-cat{height:52px;justify-content:flex-start;gap:10px;padding:0 12px}
.ar2-cats .ig-cat img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated}
.ar2-cats .ig-cat>span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0}
.ar2-cats .ig-cat>span b{font-size:13.5px;background:none;padding:0;min-width:0;height:auto;border-radius:0;box-shadow:none}
.ar2-cats .ig-cat>span small{font-size:11px;font-weight:600;color:#9aa7bb}
.ar2-cats .ig-cat.on>span small{color:#dbe8ff}
.ar2-cats .ig-cat>b.num{margin-left:auto;font-size:11.5px;color:#8a97ab}
.ar2-cats .ig-cat.on>b.num{color:#fff}
.ar2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
/* 02/10 (dono: "a tela aparece por cima do botão e não dá para comprar; melhore esse layout dos cards"): em cima o desenho e o
nome (só aqui aparece a dica do item); embaixo, numa faixa própria, os botões de compra. */
.ar2-card{display:flex;flex-direction:column;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,rgba(30,42,66,.92),rgba(15,21,36,.92));box-shadow:inset 0 0 0 1px #34465f}
.ar2-card.r1{box-shadow:inset 0 0 0 1px rgba(111,211,106,.35)}.ar2-card.r2{box-shadow:inset 0 0 0 1px rgba(88,168,255,.45)}
.ar2-top{display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:help}
.ar2-card .ithumb{width:52px;height:52px}
.ar2-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ar2-t b{font-size:13.5px;line-height:1.2}
.ar2-t small{font-size:11.5px;color:#9aa7bb}
.ar2-t small.bad{color:#ff8a7a}
.ar2-b{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:auto;padding:8px 12px;background:rgba(0,0,0,.22);border-top:1px solid rgba(255,255,255,.06)}
.ar2-b .buy{min-width:0;flex:1 1 0;justify-content:center}
.ar2-poor{flex-basis:100%;font-size:11px;color:#ff9a8a}
.ar2-card.got{opacity:.62}
.ar2-got{font-size:12.5px;font-weight:700}
.ar2-off{display:flex;gap:12px;align-items:flex-start;padding:16px}
.ar2-off img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated}
.ar2-off b{display:block;font-size:15px;color:#ffe2a0}
.ar2-off p{margin:6px 0 0;color:#b9c6d8}
.ig.ar2.app .ar2-left{width:auto;position:static}
.ig.ar2.app .ar2-cats{grid-template-columns:repeat(3,1fr)}
.ig.ar2.app .ar2-cats .ig-cat{height:auto;min-height:54px;flex-direction:row;justify-content:center;gap:0;padding:6px 4px;text-align:center}
.ig.ar2.app .ar2-cats .ig-cat img{display:none}
.ig.ar2.app .ar2-cats .ig-cat>span{position:static;align-items:center;white-space:normal}
.ig.ar2.app .ar2-cats .ig-cat>span b{position:static;margin:0;padding:0;font-size:13px}
/* Banco de Alvorada (09/10): à esquerda o Banqueiro e o ouro (com você e guardado); à direita o Banco (espaços) e a Mochila. */
.bk .bk-left{display:flex;flex-direction:column;gap:12px}
.bk-gold{align-self:stretch;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:linear-gradient(180deg,rgba(38,32,18,.85),rgba(20,17,10,.85));box-shadow:inset 0 0 0 1px rgba(214,170,90,.35)}
.bk-g{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:#cdbb92}
.bk-g b{display:flex;align-items:center;gap:5px;font-size:15px;color:#ffe2a0}
.bk-g b img{width:18px;height:18px;object-fit:contain;image-rendering:pixelated}
.bk-g i{display:block;font-style:normal;font-size:10.5px;font-weight:700;color:#7fe08a}
.bk-g.safe b{color:#fff1c8}
.bk-amt{all:unset;box-sizing:border-box;width:100%;height:36px;padding:0 10px;border-radius:8px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(214,170,90,.4);color:#fff;font-size:14px;text-align:right}
.bk-amt:focus{box-shadow:inset 0 0 0 2px #e8b84a}
.bk-amt::placeholder{color:#8d826a;text-align:left}
.bk-row{display:flex;gap:6px}
.bk-row .buy{flex:1 1 0;justify-content:center;min-width:0}
.bk-all{justify-content:space-between}
.bk-all .lnk{all:unset;cursor:pointer;font-size:12px;font-weight:700;color:#e8c98a;text-decoration:underline;text-underline-offset:2px}
.bk-all .lnk:disabled{opacity:.4;cursor:default;text-decoration:none}
.bk-right{display:flex;flex-direction:column;gap:8px;min-width:0}
.bk-right .mk2-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bk-right .bk-tip{margin-left:auto;color:#8fa0b8}
.bk-h2{margin-top:6px}
.bk-grid{--q:66px}
.bk-empty{cursor:default;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.bk-c.off{cursor:default;opacity:.55}
.bk-more{box-shadow:inset 0 0 0 1px rgba(120,190,255,.45)}
.bk-ask{grid-column:1/-1}
.bk-ask .row{display:flex;gap:6px;flex-wrap:wrap}
.bk-away{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:rgba(232,184,74,.1);box-shadow:inset 0 0 0 1px rgba(232,184,74,.35)}
.bk-away img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.bk-away>div{flex:1 1 200px;min-width:0}
.bk-away b{display:block;color:#ffe2a0;font-size:13.5px}
.bk-away p{margin:3px 0 0;font-size:12px;color:#c7b896}
.ig.bk.app .bk-grid{--q:56px}
.ig.bk.app .bk-left{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.bk-ask .n{display:flex;align-items:center;gap:5px}
.bk-ask .n img{width:18px;height:18px;object-fit:contain}
.ig.ar2.app .ar2-cats .ig-cat>span small{font-size:10.5px}
.ig.ar2.app .ar2-cats .ig-cat>b.num{position:absolute;top:4px;right:6px;margin:0;font-size:10.5px}
.ig.ar2.app .ar2-grid{grid-template-columns:1fr}
/* Dica das poções (02/10): preço com a moeda, no balão da barra e na Mochila. */
.sk-tip .st-buy{color:#ffe2a0;font-size:12px;margin:6px 0 0}
.sk-tip .st-buy img,.tt-n img{width:14px;height:14px;vertical-align:-2px;margin-right:2px;image-rendering:pixelated}
/* Avisos e animações por cima das janelas (02/10: o "Comprado!" ficava atrás da janela no PC). */
.fx{z-index:60}
.coin.item.buyfly{filter:drop-shadow(0 0 8px rgba(255,220,120,.9))}
.got-pop{animation:gotPop .6s ease}
@keyframes gotPop{0%{transform:scale(1)}35%{transform:scale(1.25);filter:brightness(1.6)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.got-pop{animation:none}}
/* Herbalista numa tela só (02/10, no estilo da Mochila): à esquerda ela, os saldos e os espólios; à direita a Loja de Cristais. */
.hb2 .hb2-left{width:390px}
.hb2-who{display:flex;gap:10px;align-items:flex-start}
.hb2-who .hb-face{width:48px;height:48px;object-fit:contain;image-rendering:pixelated;flex:none}
.hb2-who p{margin:0;font-size:12.5px;line-height:1.4;font-style:italic;color:#cfe3c4}
.hb2-bal{display:flex;gap:8px;flex-wrap:wrap}
.hb2-bal .fr-pill{display:flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(214,170,90,.35)}
.hb2-bal img{width:20px;height:20px;object-fit:contain}
.hb2-bal small{font-size:11px;color:#9aa7bb}
.hb2-all{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px #34465f;font-size:12.5px}
.hb2-all>span{flex:1 1 auto;min-width:0}
.hb2-day{margin:0 0 8px;padding:7px 10px;border-radius:10px;background:rgba(246,205,92,.08);box-shadow:inset 0 0 0 1px rgba(246,205,92,.35);font-size:12px;line-height:1.4}
.hb2-day b{color:#ffe08a}
.hb2-all b{white-space:nowrap}
.hb2-all b img{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin:0 2px}
.hb2-list{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow:auto}
.hb2-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:6px;padding:6px 8px;border-radius:9px;background:linear-gradient(180deg,rgba(30,42,66,.92),rgba(15,21,36,.92));box-shadow:inset 0 0 0 1px #34465f}
.hb2-row>img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.hb2-row.locked{opacity:.7}
.hb2-rt{display:flex;flex-direction:column;min-width:0}
.hb2-rt b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb2-rt small{font-size:11px;color:#9aa7bb}
.hb2-row .hb-q{width:50px;padding:4px 5px;font-size:12px}
.hb2-none{margin:0;padding:12px;border-radius:10px;background:rgba(0,0,0,.2);text-align:center}
.hb2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px;align-items:stretch}
.hb2-card{display:flex;flex-direction:column;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,rgba(30,42,66,.92),rgba(15,21,36,.92));box-shadow:inset 0 0 0 1px #34465f}
.hb2-top{display:flex;gap:10px;align-items:flex-start;padding:10px 12px}
.hb2-top .ic{width:42px;height:42px;object-fit:contain;image-rendering:pixelated;flex:none}
.hb2-ct{display:flex;flex-direction:column;gap:2px;min-width:0}
.hb2-ct b{font-size:13.5px}
.hb2-ct small{font-size:11.5px;line-height:1.3;color:#9aa7bb}
/* 02/10 (dono: "deixar tudo igual"): todo cartão igual. A quantidade numa linha (largura toda) e o botão de comprar sempre
embaixo, também na largura toda; a parte de baixo fica no pé do cartão, alinhada com os vizinhos. */
.hb2-buy{display:flex;align-items:center;gap:8px;margin-top:auto;padding:9px 12px;background:rgba(0,0,0,.22);border-top:1px solid rgba(255,255,255,.06)}
.hb2-buy .qty-seg{flex:none;margin:0}
.hb2-buy .buy{flex:1 1 auto;min-width:0;height:34px;justify-content:center}
.hb2-buy .buy img{width:16px;height:16px;object-fit:contain;margin-right:4px}
.ig.hb2.app .hb2-left{width:auto;position:static;align-items:stretch}
.ig.hb2.app .hb2-left .mk2-h{justify-content:flex-start}
.ig.hb2.app .hb2-list{max-height:280px}
.ig.hb2.app .hb2-grid{grid-template-columns:1fr}
/* Cadeado do espólio centralizado no quadrado (02/10, dono: "centralizar"): o emoji tem respiro próprio e ficava torto. */
.hb2-row .hb-lock{width:32px;height:32px;padding:0;display:grid;place-items:center;font-size:15px;line-height:1;text-align:center;box-sizing:border-box}
/* Dica dos materiais (02/10): "Onde comprar" e o que os Cristais compram, em linhas compactas com ícone e preço. */
.itip .tt-sec,.inv-sheet .tt-sec{margin:10px 0 5px;padding-top:8px;border-top:1px solid rgba(214,170,90,.22);font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#cdb98d}
/* 03/10 (dono: "todos os itens com o balão: o que faz, pra que serve, o que compra"): linhas de Para que serve e Como
conseguir (ícone e texto que quebra linha), também na ficha da Mochila no celular. */
.tt-u{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:start;gap:8px;margin-top:4px;font-size:12.5px;line-height:1.35}
.tt-u>img{width:20px;height:20px;object-fit:contain;image-rendering:pixelated}
.tt-u>b{color:#f2c14e;font-size:12px}
/* 05/10: mais ar entre as linhas e as relíquias da receita num bloco recuado embaixo da frase "entra na receita destas relíquias:". */
.tt-u{margin-top:7px}
.tt-u.sub{margin:4px 0 0 28px;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.04);border-left:2px solid rgba(214,170,90,.45);align-items:center}
.tt-u.sub+.tt-u:not(.sub){margin-top:9px}
.tt-u.sub>span{font-weight:700}
.inv-sheet .tt-k{margin-top:6px;font-size:11px;color:var(--muted)}
.tt-line{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12.5px}
.tt-line>span{color:var(--muted);margin-right:auto}
.tt-line>small{color:var(--muted);font-size:11px}
.tt-pr{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;color:#ffe9b0;font-weight:800}
.tt-pr img{width:14px!important;height:14px!important;object-fit:contain;image-rendering:pixelated;flex:none}
.tt-shop{display:flex;flex-direction:column;gap:2px}
.tt-sh{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:8px;padding:3px 6px;border-radius:6px;font-size:12.5px}
.tt-sh:nth-child(odd){background:rgba(255,255,255,.04)}
.tt-sh>img{width:18px;height:18px;object-fit:contain;image-rendering:pixelated}
.tt-sh>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Mesmo seletor de quantidade em todo o jogo (02/10, dono: "tem outros lugares com o seletor de quantidade, vamos colocar tudo
igual"): Herbalista (vender), Feira de ouro, Atributos e Fusão. − e + azuis colados no número, Máx. dourado. */
.hb2-sq{grid-column:1/-1;display:flex;align-items:center;gap:6px}
.hb2-sq .qty-seg{flex:none;margin:0}
.hb2-sq .buy{flex:1 1 auto;height:34px}
.gx-row .qty-seg{margin:0}
.hf .at2-row .at2-ctl{gap:0}
.hf .at2-row .at2-ctl .mini,.hf .at2-row .at2-ctl .attr-n,.hf .fu-luck .tab,.hf .fu-luck>b{all:unset;box-sizing:border-box;height:32px;display:grid;place-items:center;font:800 15px/1 inherit;transition:filter .12s,transform .08s}
.hf .at2-row .at2-ctl .mini:not(.max),.hf .fu-luck .tab{width:34px;cursor:pointer;color:#fff;text-shadow:0 1px 0 #10264d;background:linear-gradient(180deg,#3f7bd6,#1f4687);box-shadow:inset 0 0 0 1px #7fb0ff,inset 0 -2px 0 rgba(0,0,0,.28)}
.hf .at2-row .at2-ctl .mini[data-dec],.hf .fu-luck .tab[data-fuluck="-1"]{border-radius:9px 0 0 9px}
.hf .at2-row .at2-ctl .mini[data-inc],.hf .fu-luck .tab[data-fuluck="1"]{border-radius:0 9px 9px 0}
.hf .at2-row .at2-ctl .attr-n,.hf .fu-luck>b{width:52px;padding:0 4px;text-align:center;color:#ffe9b0;background:#0b1220;box-shadow:inset 0 1px 0 #7fb0ff,inset 0 -1px 0 #7fb0ff;-moz-appearance:textfield}
.hf .at2-row .at2-ctl .attr-n{cursor:text}
.hf .at2-row .at2-ctl .mini.max{margin-left:6px;padding:0 11px;border-radius:9px;cursor:pointer;font-size:12.5px;color:#3a2205;text-shadow:0 1px 0 rgba(255,236,170,.5);background:linear-gradient(180deg,#f6cd5c,#c08425);box-shadow:inset 0 0 0 1px #ffe08a,inset 0 -2px 0 rgba(0,0,0,.22)}
.hf .at2-row .at2-ctl .mini:hover:not([disabled]),.hf .fu-luck .tab:hover{filter:brightness(1.15)}
.hf .at2-row .at2-ctl .mini:active:not([disabled]),.hf .fu-luck .tab:active{transform:translateY(1px)}
.hf .at2-row .at2-ctl .mini[disabled],.hf .at2-row .at2-ctl .attr-n[disabled]{opacity:.4;cursor:not-allowed}
.hf .fu-luck{gap:0}
.hf .fu-luck>span{margin-right:10px}
.hf .fu-luck>em{margin-left:10px}
.hf.app .at2-row .at2-ctl .mini:not(.max),.hf.app .at2-row .at2-ctl .attr-n{height:38px}
.hf.app .at2-row .at2-ctl .mini.max{height:38px}
/* Seletor compacto (02/10, dono: "está muito grande o campo do + e −"): nos cartões da Loja › Itens fica centralizado. */
.shop-items .card .qty-seg{align-self:center;margin:4px auto 6px}
/* Ferreiro no jeito das outras telas (03/10, dono: "cada aba tem que explicar o que faz e como faz... mesma vibe das outras
páginas"): à esquerda o Ferreiro, as abas, o "Como funciona" e os saldos; à direita a lista para escolher e a bigorna. */
.win-ferreiro .win-body>.fg3{flex:1 1 auto;min-height:0}
.ig.fg3{grid-template-columns:262px minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:stretch;min-height:0}
.fg3 .fg3-left{position:static;overflow:auto;min-height:0;gap:9px}
.fg3 .fg3-right{min-height:0;overflow:hidden}
.fg3-who p{font-style:italic}
.fg3-cats .ig-cat{height:48px;position:relative}
.fg3-cats .vipb{margin-left:auto;font-style:normal;font-size:10px;font-weight:800;padding:1px 5px;border-radius:3px;background:linear-gradient(#ffe7a0,#d69a26);color:#2b1702;flex:none}
.fg3-how{padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px #34465f;font-size:12.5px;line-height:1.4;color:#c9d4e4}
.fg3-how summary{cursor:pointer;font-weight:800;font-size:13px;color:#ffe2a0;list-style:none;display:flex;align-items:center;gap:6px}
.fg3-how summary::-webkit-details-marker{display:none}
.fg3-how summary::before{content:"?";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:linear-gradient(#ffd76a,#c7881d);color:#2b1702;font-size:11px;flex:none}
.fg3-how ol{margin:7px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.fg3-how li::marker{color:#ffd76a;font-weight:800}
.fg3-how p{margin:8px 0 0;padding-top:7px;border-top:1px solid rgba(255,255,255,.08);color:#9fb0c8}
.fg3-bal{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fg3-k{flex-basis:100%;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#cdb98d}
.fg3-bal .fr-pill{display:flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(214,170,90,.35);font-size:12.5px}
.fg3-bal .fr-pill img{width:18px;height:18px;object-fit:contain;image-rendering:pixelated}
.fg3-bal .fr-pill small{font-size:10.5px;color:#9aa7bb}
.fg3-bal .buy{flex-basis:100%;margin-top:2px}
.fg3-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1.15fr);grid-template-rows:minmax(0,1fr);gap:12px;flex:1 1 auto;min-height:0}
.fg3-pick,.fg3-act{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto;padding:10px;border-radius:10px;background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px #2c3c58}
.fg3-pick>*,.fg3-act>*,.fg3-act .fu>*{flex-shrink:0}
.fg3-act{align-items:center;text-align:center}
.fg3-sec{display:flex;align-items:center;gap:6px;flex-wrap:wrap;align-self:stretch;font-weight:800;font-size:13.5px;color:#ffe2a0;text-align:left}
.fg3-sec .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:linear-gradient(#ffd76a,#c7881d);color:#2b1702;font-size:12px;flex:none}
.fg3-sec small{font-weight:600;font-size:11.5px;color:#9aa7bb}
.fg3-act .fg3-sec{max-width:400px;width:100%;align-self:center;margin-top:2px}
.fg3 .fg-grid{flex:none;min-height:0;max-height:none;overflow:visible;align-content:start}
.fg3 .fs{height:165px;width:100%;max-width:400px}
.fg3 .fg-name{font-size:16px}
.fg3 .fg-pips{width:100%;max-width:340px}
.fg3 .fg-pips.seven{grid-template-columns:repeat(7,1fr);max-width:230px}
.fg3 .fg-pow{margin:0}
.fg3-cost,.fg3-opts{display:flex;flex-direction:column;gap:6px;width:100%;max-width:400px}
.fg3-row,.fg3-tg{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border-radius:9px;text-align:left;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #34465f}
.fg3-row>img,.fg3-tg>img{width:26px;height:26px;object-fit:contain;image-rendering:pixelated;flex:none}
.fg3-row>span,.fg3-tg>span{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;line-height:1.25}
.fg3-row>span b,.fg3-tg>span b{font-size:13px;color:#e8edf5}
.fg3-row>span small,.fg3-tg>span small{font-size:11px;color:#9aa7bb}
.fg3-row>em{font-style:normal;font-weight:800;font-size:14px;color:#ffe9b0;display:flex;align-items:center;gap:4px;white-space:nowrap}
.fg3-row>em img{width:16px;height:16px;object-fit:contain}
.fg3-row.bad{box-shadow:inset 0 0 0 1px rgba(255,110,90,.55);background:rgba(255,80,60,.07)}
.fg3-row.bad>em{color:#ff9a8a}
.fg3-row.free>em{color:#8fe28a}
.fg3-tg{cursor:pointer;transition:background .12s,box-shadow .12s}
.fg3-tg:hover:not([disabled]):not(.fg3-luck){background:rgba(255,255,255,.08)}
.fg3-tg .ck{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;font-style:normal;font-weight:900;font-size:13px;color:#fff;box-shadow:inset 0 0 0 1px #7fb0ff;flex:none}
.fg3-tg.on{background:linear-gradient(180deg,rgba(47,111,208,.32),rgba(29,75,151,.32));box-shadow:inset 0 0 0 1px #7fb0ff}
.fg3-tg.on .ck{background:linear-gradient(180deg,#3f7bd6,#1f4687)}
.fg3-tg[disabled]{opacity:.5;cursor:default}
.fg3-luck{cursor:default}
.hf .fg3-luck .fu-luck{margin:0;flex:none}
.hf .fg3-luck .fu-luck .tab,.hf .fg3-luck .fu-luck>b{height:30px}
.hf .fg3-luck .fu-luck .tab{width:28px}
.hf .fg3-luck .fu-luck>b{width:40px}
.fg3-tip{margin:0;font-size:12px;line-height:1.35;color:#9fb0c8}
.fg3-pick .fg3-tip{text-align:left}
.fg3-fail{margin:0;font-size:13px}
.fg3 .fs-meter{max-width:400px;flex:none}
.fg3 .fg-need{max-width:400px}
.fg3 .fg-go{width:100%;max-width:400px;height:48px;font-size:18px;position:relative;overflow:hidden;flex:none}
.fg3 .fg-go:not(:disabled)::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation:fsShine 2.6s ease-in-out infinite}
.fg3-mode{grid-template-columns:1fr 1fr}
.fg3-mode .ig-cat{height:40px}
.fg3 .fu{gap:8px}
.fg3 .fu .fg3-cost,.fg3 .fu .fg3-opts{align-self:center}
.fg3 .fg-empty{flex:1}
.fg3 .sal-mark{display:flex;flex-wrap:wrap;gap:6px}
/* celular: as abas em 5 colunas, o passo a passo fechado (toque para abrir) e a bigorna antes da lista */
.ig.fg3.app{grid-template-columns:1fr;grid-template-rows:none}
.ig.fg3.app .fg3-left,.ig.fg3.app .fg3-right{overflow:visible}
.ig.fg3.app .fg3-cats{grid-template-columns:repeat(5,1fr);gap:4px}
.ig.fg3.app .fg3-cats .ig-cat{height:auto;min-height:58px;flex-direction:column;justify-content:center;gap:3px;padding:6px 2px;text-align:center}
.ig.fg3.app .fg3-cats .ig-cat img{width:24px;height:24px}
.ig.fg3.app .fg3-cats .ig-cat>span{position:static;align-items:center;white-space:normal}
.ig.fg3.app .fg3-cats .ig-cat>span b{position:static;margin:0;padding:0;font-size:10.5px;background:none;box-shadow:none}
.ig.fg3.app .fg3-cats .ig-cat>span small{display:none}
.ig.fg3.app .fg3-cats .vipb{position:absolute;top:2px;right:2px;margin:0;font-size:8px;padding:0 3px}
.ig.fg3.app .fg3-body{grid-template-columns:1fr;grid-template-rows:none}
.ig.fg3.app .fg3-act{order:-1;overflow:visible}
.ig.fg3.app .fg3-pick{overflow:visible}
.ig.fg3.app .fg3-pick .fg-grid{max-height:300px;overflow:auto}
.ig.fg3.app .fs{height:200px}
.ig.fg3.app .fg3-mode .ig-cat{flex-direction:row;height:40px;font-size:12px}
.ig.fg3.app .fg3-mode .ig-cat span{position:static}
.fg3 .cfg-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:400px;margin:0}
.fg3 .cfg-btns .buy{width:auto;min-width:0;margin:0}
@media (max-height:820px){.hf:not(.app) .fg3 .fs{height:118px}.hf:not(.app) .fg3 .fu-out{min-height:0}}
.win-ferreiro .win-body>.ig.fg3.app{flex:none;min-height:auto}
.ig.fg3.app .fg3-left,.ig.fg3.app .fg3-right,.ig.fg3.app .fg3-body,.ig.fg3.app .fg3-pick,.ig.fg3.app .fg3-act{min-height:auto}
.ig.fg3.app .fg3-body{flex:none}
.ig.fg3.app .fg3-cats{position:static;background:none;padding:0;z-index:auto}
.fg3-bal .fr-pill{border:0;border-image:none}
/* Fazenda de Alvorada (03/10): no jeito do Armeiro e do Ferreiro (à esquerda o Fazendeiro, as abas, o passo a passo e os
saldos; à direita a Horta com os 6 canteiros, os Pedidos do dia ou a Loja da Fazenda). */
.ig.fm{grid-template-columns:262px minmax(0,1fr)}
.fm .fm-left{position:sticky;top:0}
.fm .fg3-bal .fr-pill{border:0;border-image:none}
.fm-away{margin:0;color:#ff9a8a}
.fm-bar{display:flex;flex-direction:column;gap:8px;margin-bottom:2px}
.fm-chips{display:flex;flex-wrap:wrap;gap:6px}
.fm-chip{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:9px;cursor:pointer;background:rgba(24,34,54,.9);box-shadow:inset 0 0 0 1px #34465f;color:#b9c6d8;transition:filter .12s}
.fm-chip:hover:not([disabled]){filter:brightness(1.15)}
.fm-chip img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated;flex:none}
.fm-chip span{display:flex;flex-direction:column;line-height:1.15}
.fm-chip b{font-size:12.5px;color:#e8edf5}.fm-chip small{font-size:10.5px;color:#9aa7bb}
.fm-chip.on{background:linear-gradient(180deg,#2f6fd0,#1d4b97);box-shadow:inset 0 0 0 1px #7fb0ff}.fm-chip.on small{color:#dbe8ff}
.fm-chip.lock{opacity:.45;cursor:default}
.fm-acts{display:flex;gap:8px;flex-wrap:wrap}
.fm-acts .buy{width:auto;flex:1 1 auto}
.fm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.fm-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px 10px;align-items:center;padding:10px;border-radius:10px;background:linear-gradient(180deg,rgba(30,42,66,.92),rgba(15,21,36,.92));box-shadow:inset 0 0 0 1px #34465f}
.fm-pic{grid-row:1/3;width:64px;height:64px;border-radius:9px;display:grid;place-items:end center;overflow:hidden;background:rgba(0,0,0,.25)}
.fm-pic.soil{background:radial-gradient(ellipse 70% 30% at 50% 88%,#8a5434 0 70%,transparent 72%),rgba(0,0,0,.25)}
.fm-pic img{image-rendering:pixelated;max-width:60px;max-height:62px;margin-bottom:2px}
.fm-card.lock .fm-pic{place-items:center}.fm-card.lock .fm-pic img{width:26px;height:26px;opacity:.75;margin:0}
.fm-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.fm-t b{font-size:13.5px}.fm-t small{font-size:11.5px;color:#9aa7bb}
.fm-prog{height:6px;border-radius:4px;background:rgba(0,0,0,.45);overflow:hidden;margin-top:3px}
.fm-prog i{display:block;height:100%;background:linear-gradient(90deg,#3f9b4a,#7fe08f);transition:width .9s linear}
.fm-b{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fm-b .buy{width:auto;flex:1 1 auto}
.fm-card.ready{box-shadow:inset 0 0 0 1px rgba(127,224,143,.75),0 0 12px rgba(127,224,143,.18)}
/* 03/10 (dono: "animação da plantação crescendo"): a planta do cartão cresce (--g, de .78 a 1), balança com o vento, pula
quando muda de fase (fm-pop) e, pronta para colher, balança mais e brilha. */
.fm-pic img[data-fzgrow]{transform-origin:50% 100%;scale:var(--g,1);transition:scale 1s linear;animation:fmSway 3.2s ease-in-out infinite}
.fm-card.ready .fm-pic img[data-fzgrow]{animation:fmSway 1.6s ease-in-out infinite,fmGlow 1.6s ease-in-out infinite}
.fm-pic img[data-fzgrow].fm-pop{animation:fmPop .55s ease-out,fmSway 3.2s ease-in-out .55s infinite}
.fm-card.empty .fm-t b,.fm-card.lock .fm-t b{color:#cfd8e6}
@keyframes fmSway{0%,100%{rotate:-3deg}50%{rotate:3deg}}
@keyframes fmPop{0%{transform:scale(.7,1.3)}35%{transform:scale(1.18,.86)}65%{transform:scale(.96,1.04)}100%{transform:none}}
@keyframes fmGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,214,90,0))}50%{filter:drop-shadow(0 0 5px rgba(255,214,90,.85))}}
@media (prefers-reduced-motion:reduce){.fm-pic img[data-fzgrow],.fm-pic img[data-fzgrow].fm-pop,.fm-card.ready .fm-pic img[data-fzgrow]{animation:none}}
.fm-wait{font-size:11px;color:#9aa7bb}
.fm-reset{margin:0}
.fm-orders{display:flex;flex-direction:column;gap:8px}
.fm-order{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;background:linear-gradient(180deg,rgba(30,42,66,.92),rgba(15,21,36,.92));box-shadow:inset 0 0 0 1px #34465f}
.fm-order.done{opacity:.6}
.fm-need{display:flex;flex-wrap:wrap;gap:6px}
.fm-n{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 5px;border-radius:999px;background:rgba(255,80,60,.08);box-shadow:inset 0 0 0 1px rgba(255,110,90,.45)}
.fm-n.ok{background:rgba(111,211,106,.08);box-shadow:inset 0 0 0 1px rgba(111,211,106,.55)}
.fm-n img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated}
.fm-n b{font-size:13px;color:#ff9a8a}.fm-n.ok b{color:#8fe28a}
.fm-n small{font-size:11px;color:#9aa7bb}
.fm-pay{display:flex;align-items:center;gap:8px;font-size:12px;color:#9aa7bb}
.fm-pay b{display:flex;align-items:center;gap:4px;font-size:14px;color:#ffe9b0}.fm-pay b img{width:18px;height:18px}
.fm-order .fm-b .buy{min-width:96px}
.fm-pack{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-top:1px solid rgba(255,255,255,.06);font-size:12px;color:#9aa7bb}
.fm-pack .buy{width:auto}
.ig.fm.app{grid-template-columns:1fr}
.ig.fm.app .fm-left{position:static}
.ig.fm.app .fg3-cats{grid-template-columns:repeat(3,1fr);gap:4px;position:static;background:none;padding:0}
.ig.fm.app .fg3-cats .ig-cat{height:auto;min-height:56px;flex-direction:column;justify-content:center;gap:3px;padding:6px 2px;text-align:center}
.ig.fm.app .fg3-cats .ig-cat>span{position:static;align-items:center;white-space:normal}
.ig.fm.app .fg3-cats .ig-cat>span b{position:static;margin:0;padding:0;font-size:11px;background:none;box-shadow:none}
.ig.fm.app .fg3-cats .ig-cat>span small{display:none}
.ig.fm.app .fm-grid{grid-template-columns:1fr}
.ig.fm.app .fm-order{grid-template-columns:1fr auto;}
.ig.fm.app .fm-order .fm-need{grid-column:1/3}
.fm-who>img{padding:0;image-rendering:pixelated}
/* Fusão (03/10, dono: "quando abrir a fusão já colocar o item que ele tem mais partes"; "do lado direito tem um scroll que a
pessoa não entendeu"; "colocar algo explicando como funciona a fusão"): Como funciona na própria aba e a bigorna compacta
(os itens ao lado do resultado, custo e pedras lado a lado), para o botão Fundir aparecer sem rolar. */
.fu-how{display:flex;flex-direction:column;gap:6px;width:100%;max-width:400px;align-self:center;padding:10px 12px;border-radius:10px;text-align:left;background:linear-gradient(180deg,rgba(242,193,78,.10),rgba(242,193,78,.03));box-shadow:inset 0 0 0 1px rgba(214,170,90,.35)}
.fg3-pick .fu-how{max-width:none;align-self:stretch}
.fu-how>b{font-size:13px;color:#ffe2a0}
.fu-how ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.fu-how li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start;font-size:12px;line-height:1.35;color:#cfd8e6}
.fu-how li img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated}
.fu-how li b{color:#fff}
.fu-how small{font-size:11px;color:#9aa7bb}
.fu2-row{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:400px}
.fu2 .fu-in.many{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:auto;max-width:236px;flex:1 1 auto}
.fu2 .fu-in.many .fg-slot{height:42px;border-width:6px;border-image-width:6px}
.fu2 .fu-in.many .ithumb.md{width:30px;height:30px}
.fu-arrow.r{font-size:16px;animation:fuArrowR 1.2s ease-in-out infinite}
@keyframes fuArrowR{50%{transform:translateX(3px)}}
.fu2 .fu-out{width:104px;height:92px;flex:none;border-width:10px;border-image-width:10px}
.fu2 .fu-out span{font-size:10.5px;line-height:1.2;text-align:center}
.fu2-have{margin:0;font-size:12.5px;font-weight:700;color:#ffb38a}
.fu2-have.good{color:#8fe28a}
.fu2-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.fu2 .fu2-two .fg3-row,.fu2 .fu2-two .fg3-tg{padding:6px 8px;gap:7px;align-items:center}
.fu2 .fu2-two .fg3-row>img,.fu2 .fu2-two .fg3-tg>img{width:22px;height:22px}
.fu2 .fu2-two .fg3-row>span b,.fu2 .fu2-two .fg3-tg>span b{font-size:12px}
.fu2 .fu2-two .fg3-row>span small,.fu2 .fu2-two .fg3-tg>span small{font-size:10.5px}
.fu2 .fu2-two .fg3-luck{flex-wrap:wrap}
.hf .fu2 .fg3-luck .fu-luck .tab{width:24px;height:26px}.hf .fu2 .fg3-luck .fu-luck>b{width:30px;height:26px;font-size:13px}
.fu2 .fs-meter{height:26px}
.fu2 .fs-meter b{font-size:15px}
.fu2 .fg-go{height:44px}
.fu2.merge{gap:7px}
.ig.fg3.app .fu-how{max-width:none}
.fu2 .fg3-fail{font-size:12.5px}
.fu2 .fu-out{height:86px}
/* Canteiro fechado (03/10): ouro e dinheiro lado a lado; "ou USDC" embaixo, pequeno. */
.fm-b .fm-cash{flex:1 1 auto}
.fm-b .lnk.fm-alt,.fm-pack .lnk.fm-alt{flex:1 0 100%;width:auto;margin:0;padding:0;border:0;background:none;font-size:11px;color:#9fb0c8;text-align:left;text-decoration:underline;cursor:pointer}
.fm-pack .lnk.fm-alt{flex-basis:auto}
/* Sem sementes (03/10): onde cada uma cai. */
.fm-seedhint{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;padding:10px 12px;border-radius:10px;background:linear-gradient(180deg,rgba(242,193,78,.10),rgba(242,193,78,.03));box-shadow:inset 0 0 0 1px rgba(214,170,90,.35)}
.fm-seedhint p{margin:0;font-size:12.5px;line-height:1.4;color:#cfd8e6}
.fm-seedhint p b{color:#ffe2a0}
.fm-seedmaps{display:flex;flex-wrap:wrap;gap:6px}
.fm-seedmaps span{display:grid;grid-template-columns:24px auto;grid-template-rows:auto auto;column-gap:6px;align-items:center;padding:4px 8px;border-radius:8px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px #34465f}
.fm-seedmaps img{grid-row:1/3;width:24px;height:24px;image-rendering:pixelated}
.fm-seedmaps b{font-size:11.5px}.fm-seedmaps small{font-size:10.5px;color:#9aa7bb}
/* Aba Grupo no chat (03/10): com Grupo e Guild abertas são 7 abas; a letra fica um pouco menor no computador para caber. */
.hf:not(.app) .ctabs button{flex:1 1 auto;min-width:0;padding:0;white-space:nowrap;font-size:11px;letter-spacing:-.1px}
/* Mercado (03/10, print do dono no celular: "o contrato está bugado"): "✔ Verificado" e o endereço em duas linhas, sem
passar por cima da Cotação; nenhum quadrinho estoura a largura. */
.mk-meta{min-width:0;overflow:hidden}
.mk-meta b{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mk-verif{display:flex;flex-direction:column;line-height:1.2;white-space:normal}
.mk-verif span{white-space:nowrap}
.mk-verif em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx.app .mk-meta b{white-space:normal;overflow-wrap:anywhere;line-height:1.2}
/* PvP aberto (04/10): faixa embaixo do chip do mapa (zona, proteção, alvo e abates) e borda vermelha fora do acampamento. */
.mapchip.pvp{box-shadow:inset 0 0 0 1px rgba(255,92,72,.75),0 0 12px rgba(255,60,40,.35)}.mapchip.pvp b{color:#ff8a72}
.pvp-bar{position:absolute;left:50%;top:168px;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;max-width:min(92vw,560px);z-index:3;pointer-events:none;
font:700 12px "HF Sans","Signika",system-ui,sans-serif;color:#f3e9d2}
.pvp-bar[hidden]{display:none}
.pvp-bar>span{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 6px;border-radius:12px;background:rgba(8,11,16,.8);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.pvp-bar img{width:16px;height:16px;image-rendering:pixelated}
.pvp-bar .pv-z.war{color:#ffb4a6;box-shadow:inset 0 0 0 1px rgba(255,80,60,.8),0 0 10px rgba(255,50,30,.35);animation:pvwar 1.6s ease-in-out infinite}
.pvp-bar .pv-z.safe{color:#ffe08a;box-shadow:inset 0 0 0 1px rgba(242,193,78,.7)}
.pvp-bar .pv-p{color:#9fe3ff}.pvp-bar .pv-p b{color:#d8f4ff}
.pvp-bar .pv-r{color:#ffd0c6;pointer-events:auto}.pvp-bar .pv-r b{color:#ff7a62}
.pvp-bar .pv-x{margin-left:3px;width:18px;height:18px;border:0;border-radius:9px;background:rgba(255,90,70,.25);color:#fff;font:700 13px/18px system-ui;cursor:pointer;padding:0}
.pvp-bar .pv-x:hover{background:rgba(255,90,70,.55)}
.pvp-bar .pv-feed{display:flex;flex-direction:column;gap:2px;height:auto;padding:4px 9px;flex-basis:100%;max-width:max-content;margin:0 auto;font-weight:600;font-size:11.5px;color:#d8dee8}
.pvp-bar .pv-f b{color:#ff9a86}
@keyframes pvwar{50%{box-shadow:inset 0 0 0 1px rgba(255,80,60,.5),0 0 4px rgba(255,50,30,.2)}}
.pvp-veil{position:absolute;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 0 90px rgba(200,20,10,.38),inset 0 0 22px rgba(255,60,40,.35);animation:pvveil 3s ease-in-out infinite}
.pvp-veil[hidden]{display:none}
@keyframes pvveil{50%{box-shadow:inset 0 0 70px rgba(200,20,10,.26),inset 0 0 16px rgba(255,60,40,.22)}}
/* 09/10 21:44 (dono: "quando entra no PvP está tudo em cima do outro, os avisos em cima"): no PC a faixa do PvP ia para a coluna da
esquerda, por cima do voto e do Passe. Agora fica no meio, logo acima das habilidades (os abates do mapa sobem a partir dela). */
.hf.dock .pvp-bar{left:var(--cx);top:auto;bottom:calc(var(--db) + 10px);transform:translateX(-50%);justify-content:center;max-width:calc(100% - var(--dl) - var(--dr) - 40px);flex-wrap:wrap-reverse}
.hf.dock .pvp-bar .pv-feed{margin:0 auto}
.hf.dock:has(.veil:not([hidden])) .pvp-bar{display:none}
.hf.app .pvp-bar{left:calc(64px + var(--sl));top:calc(var(--st) + 182px);transform:none;justify-content:flex-start;max-width:calc(100vw - 190px);font-size:11px}
/* 09/10 21:44 (dono: "avisos em cima um do outro"): celular deitado = no meio, em cima da barra de baixo (antes cobria o voto);
em pé = abaixo do lugar do nome do mapa (que aparece ao chegar), em vez de embaixo dele. */
.hf.app.is-landscape .pvp-bar{top:auto;bottom:calc(var(--tab) + var(--sb) + 8px);left:50%;transform:translateX(-50%);justify-content:center;max-width:calc(100vw - 480px);flex-wrap:wrap-reverse}
.hf.app.is-landscape .pvp-bar .pv-feed{margin:0 auto}
.hf.app.is-portrait .pvp-bar{top:calc(var(--st) + 288px)}
.hf.app[data-msheet] .pvp-bar{visibility:hidden}
@media (prefers-reduced-motion:reduce){.pvp-bar .pv-z.war,.pvp-veil{animation:none}}
/* Fases › PvP (04/10): cartões com borda vermelha e o quadro das regras. */
.fz-card.pvp{box-shadow:inset 0 0 0 1px rgba(255,80,60,.55)}
.fz-card.pvp.cur{box-shadow:inset 0 0 0 2px #ff6b55,0 0 16px rgba(255,70,50,.3)}
.fz-card.pvp .fz-n{background:linear-gradient(#e4574f,#a3221f);color:#fff}
.fz-tag.pvp{color:#ff8a72;font-weight:800}
.fz-pvp-rules{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:rgba(120,20,14,.22);box-shadow:inset 0 0 0 1px rgba(255,90,70,.4);font-size:12.5px;line-height:1.45;color:#ecdcd6}
.fz-pvp-rules>b{display:flex;align-items:center;gap:6px;color:#ffb09e;font-size:13px;margin-bottom:4px}
.fz-pvp-rules img{width:18px;height:18px;image-rendering:pixelated}
.fz-pvp-rules ul{margin:0;padding-left:18px;display:grid;gap:3px}
/* Durabilidade (04/10): barrinha no ícone da peça gasta, selo vermelho e cinza na quebrada, linha na ficha e aba Consertar. */
.ithumb .dura-b{position:absolute;left:12%;right:12%;bottom:1px;height:4px;z-index:4;border-radius:2px;background:rgba(0,0,0,.65);box-shadow:0 0 0 1px rgba(0,0,0,.5);pointer-events:none}
.ithumb .dura-b>i{display:block;height:100%;border-radius:2px;background:linear-gradient(#9ef07a,#4fbf3a)}
.ithumb .dura-b.low>i{background:linear-gradient(#ffd36a,#e08a1e)}
/* 09/10: peça gasta (metade para baixo) fica vermelha: hora de ir ao Ferreiro (hud.js DURA_RED). */
.ithumb .dura-b.red>i{background:linear-gradient(#ff7a5c,#d8322a)}
.ithumb.worn{box-shadow:inset 0 0 0 2px rgba(255,59,47,.85),0 0 7px rgba(255,59,47,.55)}
.ithumb.worn::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:radial-gradient(rgba(255,40,30,0) 45%,rgba(255,40,30,.28))}
.ithumb.broken img{filter:grayscale(1) brightness(.55) sepia(.4) hue-rotate(-30deg)!important;animation:none!important}
.ithumb.broken .shine{display:none}
.ithumb .dura-x{position:absolute;inset:8%;z-index:4;pointer-events:none;background:linear-gradient(45deg,transparent 45%,rgba(0,0,0,.6) 45.5%,#ff3b2f 47%,#ff7a5c 50%,#ff3b2f 53%,rgba(0,0,0,.6) 54.5%,transparent 55%);filter:drop-shadow(0 0 3px rgba(255,50,30,.8))}
.ithumb .dura-b.x{background:#5a0f0a;box-shadow:0 0 0 1px #ff3b2f,0 0 5px rgba(255,59,47,.7)}
.ithumb.lg .dura-b{height:7px}
.tt-dura.warn b,.is-r b.warn{color:#ffb84a}
.tt-dura.bad b,.is-r b.bad{color:#ff6b5e}
.dura-line{display:block;height:4px;margin:3px 0 1px;border-radius:2px;background:rgba(0,0,0,.45);overflow:hidden}
.dura-line>i{display:block;height:100%;background:linear-gradient(90deg,#4fbf3a,#9ef07a)}
.dura-line.warn>i{background:linear-gradient(90deg,#e08a1e,#ffd36a)}
.dura-line.bad>i{width:0!important}
.itip .tt-k.bad,.inv-sheet .tt-k.bad{color:#ff8a7e;font-weight:700}
.itip .tt-k.warn,.inv-sheet .tt-k.warn{color:#ffc56a;font-weight:700}
.fg-cell .lv.warn{color:#ffb84a}
.fg3 .fr-all{align-self:stretch;margin-top:4px}
/* Fazenda longe (04/10): aviso no topo da janela com o botão que leva até o Fazendeiro. */
.fm-go{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:8px 12px;border-radius:10px;background:rgba(255,120,60,.12);box-shadow:inset 0 0 0 1px rgba(255,150,90,.45)}
.fm-go img{width:34px;height:34px;object-fit:contain;image-rendering:pixelated;flex:none}
.fm-go span{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.fm-go b{color:#ffc58a;font-size:13.5px}
.fm-go small{color:#d9c4b0;font-size:12px}
.fm-go .buy{flex:none}
@media (max-width:560px){.fm-go{flex-wrap:wrap}.fm-go .buy{flex-basis:100%}}
/* Balão do AUTO no PC (04/10, dono: "muito grande pro desktop"): duas colunas, explicações longas só na dica do mouse. */
.hf:not(.app) .auto-pop{width:560px;padding:10px 14px}
.auto-pop .ap-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.auto-pop .ap-col{min-width:0}
.auto-pop .ap-col+.ap-col{padding-left:14px;border-left:1px solid rgba(214,170,90,.25)}
.auto-pop .ap-col .ap-top{margin-top:0;padding-top:0;border-top:0}
.auto-pop .ap-h{padding-right:30px}
.auto-pop .ap-col+.ap-col .ap-h{padding-right:22px}
.hf:not(.app) .auto-pop .ap-long{display:none}
.hf:not(.app) .auto-pop .ap-row{margin-bottom:6px}
.hf.app .auto-pop .ap-cols{display:block}
.hf.app .auto-pop .ap-col+.ap-col{padding-left:0;border-left:0}
.hf.app .auto-pop .ap-col .ap-top{margin-top:2px;padding-top:6px;border-top:1px solid rgba(214,170,90,.25)}
/* Menu PvP (04/10): mapas do PvP aberto à esquerda e o "Como funciona" à direita. */
.pvh2.ev2 .ev2-cols{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.pvh2 .pvh-in{margin:0 0 8px;font-size:12.5px;color:#d6c9b8;line-height:1.4}
.pvh2 .pvh-in b{color:#ffb09e}
.pvh2 .pvh-maps{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.pvh-how{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin-bottom:12px}
.pvh-r{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:rgba(120,20,14,.16);box-shadow:inset 0 0 0 1px rgba(255,90,70,.28)}
.pvh-r img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated;flex:none;margin-top:1px}
.pvh-r b{display:block;color:#ffb09e;font-size:13px;margin-bottom:2px}
.pvh-r p{margin:0;font-size:12px;line-height:1.4;color:#d0d6df}
.pvh2 .pvh-oh{margin-top:4px}
.fz-pvpgo{display:inline-flex;align-items:center;gap:6px;margin-top:8px}
.fz-pvpgo img{width:18px;height:18px;image-rendering:pixelated}
.hf:not(.app) .pvh-how{grid-template-columns:1fr 1fr}
/* Menu PvP (04/10, dono: "quando tá essa tela eu consigo dar scroll na tela de baixo"): a coluna dos mapas não fica presa no
topo (.mk2 .ig-eq é sticky): numa coluna só ela ficava por cima do "Como funciona", e em tela baixa a parte de baixo sumia. */
.mk2.pvh2 .ig-eq.ev2-left{position:static}
.pvh2 .ev2-cols{align-items:start}
/* PvP (04/10, dono: "colocar quantas pessoas tem online no PvP"): jogadores em cada mapa e no total. */
.fz-tag.pon{color:#8ff0a0;display:inline-flex;align-items:center;gap:4px}
.fz-tag.pon i{width:7px;height:7px;border-radius:50%;background:#56d364;box-shadow:0 0 6px #56d364;flex:none}
.fz-tag.pon.z{color:#93a1b5}.fz-tag.pon.z i{background:#5b6677;box-shadow:none}
.pvh2 .ev-sec .pvh-on{margin-left:auto;font-size:11.5px;letter-spacing:.3px;font-weight:700;color:#8ff0a0;text-transform:none;white-space:nowrap}
.pvh2 .ev-sec .pvh-on b{font-size:13px;margin-right:3px}
.pvh2 .ev-sec .pvh-on.z{color:#93a1b5}
/* Baú Épico (04/10): 3 baús na coluna; o épico com brilho dourado e roxo. */
.chests .chest-card{padding-block:10px}
.chest-card.epic{box-shadow:0 0 18px rgba(255,190,70,.22),0 0 10px rgba(190,90,255,.25)}
.chest-card.epic .ic.chest{filter:drop-shadow(0 0 9px rgba(200,110,255,.6))}
.cx.k-epic .cx-rays{filter:hue-rotate(40deg) saturate(1.3)}
.hf:not(.app) .chests{gap:8px}
.hf:not(.app) .chests .chest-card{flex:0 0 auto;padding:8px 14px;grid-template-columns:92px 1fr;gap:10px}
.hf:not(.app) .chests .chest-card .ic.chest{width:86px!important;height:86px!important}
.hf:not(.app) .chests .chest-card .cc-t{gap:4px}
.hf:not(.app) .chests .chest-card .ds{margin:0}
.hf:not(.app) .chests .cc-odds{gap:1px}
.hf:not(.app) .chests .cc-odds div{font-size:11px;line-height:1.15}
.hf:not(.app) .chests .chest-card .buy{min-height:32px;height:32px;padding-block:0}
.hf:not(.app) .chests .chest-card .ck{font-size:12px}
.hf:not(.app) .chests .chest-card .ck img{width:22px;height:22px}
.chest-card .nm .cc-pre{font-size:11.5px;font-weight:600;color:var(--dim,#9fb0c6);margin-left:4px;white-space:nowrap}
/* 04/10 (dono: "os novatos estão confundindo diamante com cristais"): o nome de cada moeda embaixo do número. */
.pill .pv{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.pill .pv .v{flex:none;font-size:16px;line-height:1.05}
.pill .pl{font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#aebbd0;margin-top:1px;white-space:nowrap}
.pill[data-k="p_stones"] .pl{color:#8fd0ff}.pill[data-k="p_coupons"] .pl{color:#c9f0ff}.pill[data-k="p_gold"] .pl{color:#f2cf7a}
.chest-card .ck .cc-lv{font-size:11px;font-weight:700;color:#ffb35c;margin-left:2px}
.mk-rq .mk-lv{margin-left:auto;font-size:11px;font-weight:700;color:#ffb35c}
/* Contagem do Beta (04/10, dono: "remover o tempo do Beta do header e colocar em cima do jogo"): no centro, no topo da área do
jogo, numa linha só. Some sozinha na hora do lançamento (Live.betaPaint). O lembrete do voto desce quando ela está na tela. */
.hf.dock .betacd:not([hidden]){left:var(--cx);top:calc(var(--dt) + 10px);transform:translateX(-50%);flex-direction:row;align-items:center;gap:10px;padding:6px 16px;white-space:nowrap}
@media (max-width:1180px){.hf.dock .betacd:not([hidden]){left:var(--cx);padding:5px 12px}}
.hf.dock .betacd:not([hidden]) ~ .votebar{top:calc(var(--dt) + 58px)}
.navbtn.nb-alpha[hidden],.alpha-chip[hidden],.more-btn.more-alpha[hidden]{display:none!important}
/* Bônus ativos (05/10, ideia do PUNISHER): lista embaixo do herói (VIP, poções, eventos, guild, Fundador) com o tempo que falta. */
.hero-card .bonus{display:flex;flex-direction:column;gap:2px;flex:1 0 100%;min-width:0;margin-top:4px;padding-top:5px;border-top:1px solid rgba(255,215,140,.16)}
.hero-card .bonus[hidden]{display:none}
.hf:not(.app) .hero-card{flex-wrap:wrap}
.hf.dock .hero-card{align-content:flex-start;overflow:hidden}
.bn-r{display:flex;align-items:center;gap:6px;width:100%;min-width:0;height:22px;padding:0 6px;border:0;border-radius:6px;background:rgba(255,255,255,.04);color:#e9e2cf;font:inherit;font-size:11.5px;line-height:1;text-align:left;cursor:pointer}
.bn-r:hover{background:rgba(255,215,140,.11)}
.bn-r img{width:16px;height:16px;flex:none;image-rendering:pixelated;object-fit:contain}
.bn-t{display:flex;align-items:baseline;gap:6px;min-width:0;flex:1;overflow:hidden;white-space:nowrap}
.bn-t b{font-weight:700;color:#ffd77a;flex:none}
.bn-t small{color:#b9b3a6;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.bn-r em{font-style:normal;font-weight:700;color:#8ee39a;flex:none;font-size:11px}
.bn-r.off{background:rgba(255,255,255,.02)}.bn-r.off b{color:#c9c3b5}.bn-r.off img{filter:grayscale(.8);opacity:.75}.bn-r .bn-go{color:#7cc4ff}
.bn-more{justify-content:center}.bn-more small{color:#7cc4ff}
.bn-chip{display:none}
.hf.app .bn-chip:not([hidden]){display:inline-flex;align-items:center;gap:3px;flex:none;align-self:center;margin-left:auto;height:28px;padding:0 8px;border-radius:14px;border:1px solid #6b5423;background:#121b2e;color:#ffd77a;font-weight:700;font-size:12px;cursor:pointer}
.hf.app .bn-chip img{width:16px;height:16px;image-rendering:pixelated}
.hf.app .bn-chip:not(.on){opacity:.75}
.hf.app .bn-chip[aria-expanded="true"]{background:#1d2a44}
.hf.app .hero-card .bonus{position:absolute;top:calc(100% + 6px);left:0;right:0;margin:0;padding:6px;border:1px solid #6b5423;border-radius:10px;background:#121b2e;box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:40}
.hf.app .bn-r{height:28px;font-size:12.5px}.hf.app .bn-t small{font-size:12px}
.fm-away.good{color:#8ee39a}
/* Missões (05/10): quanto falta para renovar, em cima da lista do dia. */
.q-reset{display:flex;align-items:center;gap:6px;margin:2px 0 4px;padding:3px 8px;border-radius:8px;background:rgba(255,215,140,.07);font-size:11.5px;color:#cfc6b2}
.q-reset img{width:14px;height:14px;image-rendering:pixelated}.q-reset b{color:#ffd77a}
/* Relíquia Máxima (05/10): cor holográfica (violeta, azul e ciano) com brilho dourado; vem depois das regras do Divino
(r6) para ganhar delas. */
.rl{--rc:#b9a4ff}
span.rl,b.rl,.it-name.rl,.ifs-n.rl{background:linear-gradient(100deg,#b9a4ff 0%,#7fd8ff 30%,#fff 45%,#ffe9a8 58%,#b9a4ff 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cxShine 3s linear infinite}
.ithumb.rl{--rc:#b9a4ff}
.ithumb.rl img,.rl .ithumb img{filter:drop-shadow(0 0 5px #b9a4ff) drop-shadow(0 0 2px #ffe9a8)}
.ig .rl,.mx .rl{--rc:#b9a4ff}
.ig-cell.rl,.mx-card.rl,.inv-it.rl{animation:rlGlow 2.2s ease-in-out infinite}
@keyframes rlGlow{0%,100%{box-shadow:inset 0 0 0 1px rgba(185,164,255,.95),0 0 10px rgba(185,164,255,.45)}50%{box-shadow:inset 0 0 0 1px rgba(127,216,255,.95),0 0 20px rgba(255,233,168,.6)}}
.tt-relic{margin-top:8px;padding:8px 10px;border-radius:10px;border:1px solid rgba(185,164,255,.55);background:linear-gradient(160deg,rgba(70,40,130,.35),rgba(20,60,90,.25))}
.tt-relic .tt-n{margin:4px 0 0}
.tt-rl-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tt-rl-h b{font-size:14px}
.rl-no{font-style:normal;font-weight:800;font-size:12px;padding:1px 8px;border-radius:999px;color:#1a1030;background:linear-gradient(100deg,#b9a4ff,#7fd8ff 45%,#ffe9a8);font-variant-numeric:tabular-nums}
.tt-relic .set-bl{margin-top:6px}
@media (prefers-reduced-motion:reduce){span.rl,b.rl,.ig-cell.rl,.mx-card.rl,.inv-it.rl{animation:none}}
.tt-relic .set-b span{white-space:nowrap}
/* Perfil novo (05/10, dono: "deixar uma coisa mais bonita igual fizemos com as outras telas"): no jeito da Mochila. À esquerda
retrato, nome e o boneco com o equipamento e o poder; à direita conquistas, duelos, guild, ranking e status. */
.win.win-perfil{width:min(980px,calc(100% - 40px))}
.ig.pf2{grid-template-columns:auto minmax(0,1fr)}
.pf2-left{width:calc(4 * var(--c) + 3 * var(--g) + 24px);box-sizing:border-box}
.pf2-who{display:flex;align-items:center;gap:10px;min-width:0}
.pf2-por{flex:none;width:58px;height:58px;display:grid;place-items:center;border-radius:12px;overflow:hidden;background:#0d1628;box-shadow:inset 0 0 0 2px rgba(214,170,90,.55)}
.pf2-por img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.pf2-por[class*=" fr-"]{overflow:visible;border-radius:8px}.pf2-por[class*=" fr-"] img{border-radius:8px}
.pf2-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.pf2-nm{display:block;font-size:18px;line-height:1.15;color:#ffd66b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 0 #3a2208}
.pf2-id small{font-size:11.5px;color:#9fb0c8;line-height:1.3}.pf2-id small b{color:#e8edf5}
.pf2-id .dot{margin-right:4px}
.pf2-bd{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.pf2-bd .ar-title{margin:0}
.pf2-vip{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:800;color:#ffe08a;padding:0 6px 0 3px;border-radius:4px;background:rgba(255,190,60,.14);border:1px solid rgba(255,190,60,.45)}
.pf2-vip img{width:15px;height:15px}
.pf2-doll .ig-hero{grid-row:1/4;justify-content:flex-end;padding-bottom:4px}
.pf2-doll .ig-fig img.hero-look.lpc{max-height:170px}
.pf2-pic{width:86%;height:auto;max-height:100%;object-fit:contain;image-rendering:pixelated}
.pf2-slot{cursor:help}
.pf2-pow{grid-area:4/1/5/3;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(180deg,rgba(242,193,78,.16),rgba(242,193,78,.05));box-shadow:inset 0 0 0 1px rgba(242,193,78,.45)}
.pf2-pow small{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#cdb98d}
.pf2-pow b{font-size:22px;line-height:1.05;color:#ffe08a}
.pf2-acts{display:flex;flex-wrap:wrap;gap:6px}
.pf2-acts .ig-btn{flex:1 1 calc(50% - 6px);justify-content:center;height:36px}
.pf2-acts .pf-pts{margin-left:2px}
.pf2-right{gap:10px}
.pf2-ks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pf2-k{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:8px 10px;border-radius:11px;background:linear-gradient(180deg,rgba(30,42,66,.92),rgba(15,21,36,.92));box-shadow:inset 0 0 0 1px #34465f;min-width:0}
.pf2-k img{grid-row:1/3;width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.pf2-k b{font-size:20px;line-height:1.1;color:#fff}
.pf2-k small{font-size:11.5px;color:#9fb0c8;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.pf2-bars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pf2-bar{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:center;padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #2c3c58;min-width:0}
.pf2-bar img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.pf2-bar span{display:block;font-size:12.5px;color:#cfd8e6}.pf2-bar span b{font-size:13.5px}
.pf2-bar small{display:block;font-size:11px;color:#8e9bb0;margin-top:3px}
.pf2-meter{display:block;height:7px;margin-top:5px;border-radius:4px;overflow:hidden;background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pf2-meter>i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#d49a2a,#ffd66b)}
.pf2-meter.du{background:rgba(224,87,76,.35)}.pf2-meter.du>i{background:linear-gradient(90deg,#3fae5a,#7dff9a)}
.pf2-guild{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:11px;background:rgba(140,100,255,.08);box-shadow:inset 0 0 0 1px rgba(160,130,255,.35)}
.pf2-guild>img,.pf2-guild .pf-gm{width:40px;height:40px;image-rendering:pixelated}
.pf2-guild.none{background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px #2c3c58}.pf2-guild.none>img{opacity:.55}
.pf2-right .pf-ranks{gap:6px}
.pf2-right .pf-rank{border-radius:8px;padding:4px 10px;background:rgba(24,34,54,.9);border-color:#3d5274}
.pf2-h{margin:4px 0 0}
.pf2-st{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.pf2-s{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px #2c3c58;min-width:0}
.pf2-s img{width:20px;height:20px;object-fit:contain;image-rendering:pixelated}
.pf2-s span{font-size:12.5px;color:#aeb9cb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf2-s b{font-size:14.5px;color:#f3e3bd}
.pf2-right .pf-ats{margin:0}
.pf2-look{display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px;border-radius:12px;background:linear-gradient(180deg,rgba(60,46,16,.35),rgba(20,16,8,.25));box-shadow:inset 0 0 0 1px rgba(255,190,60,.3);scroll-margin-top:8px}
.pf2-look .mk2-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0}.pf2-look .mk2-h .ig-note{margin:0}
.pf2-look .mv-kinds{margin:2px 0}.pf2-look .ig-note{margin:0}
.pf2-bd .pf-lk-go{font-size:11.5px}
.ig.pf2.app .pf2-lkk{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.ig.pf2.app .pf2-lkk .mv-k{flex-direction:column;justify-content:center;height:auto;min-height:52px;padding:5px 2px;gap:1px;font-size:10.5px;line-height:1.1}
.ig.pf2.app .pf2-lkk .mv-k b{font-size:10px}
.ig.pf2.app .pf2-look .mv-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.ig.pf2.app .pf2-look .mv-grid.k-title{grid-template-columns:repeat(2,minmax(0,1fr))}
.ig.pf2.app .pf2-look .mv-grid.k-title .mv-cell{min-height:64px;padding:8px 4px 6px}
.ig.pf2.app .pf2-look .mv-grid.k-skin{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.ig.pf2.app{display:flex;flex-direction:column;align-items:stretch}
.ig.pf2.app .pf2-left{width:auto;position:static;flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.ig.pf2.app .pf2-doll{align-self:center}
.ig.pf2.app .pf2-ks{grid-template-columns:repeat(2,minmax(0,1fr))}
.ig.pf2.app .pf2-bars{grid-template-columns:1fr}
.ig.pf2.app .pf2-st{grid-template-columns:repeat(2,minmax(0,1fr))}
.ig.pf2.app .pf2-s{padding:5px 8px;gap:6px}
.ig.pf2.app .pf2-s span{white-space:normal;line-height:1.15;font-size:12px}
@media (max-width:860px){.ig.pf2:not(.app) .pf2-ks{grid-template-columns:repeat(2,minmax(0,1fr))}.ig.pf2:not(.app) .pf2-bars{grid-template-columns:1fr}}
/* Faixa de cima (05/10): cada parte mostra o balão ao passar o mouse; o VIP abre a Loja. */
.presence .pr-seg{display:inline-flex;align-items:center;gap:4px;cursor:help}
.presence .pr-vip{cursor:pointer}
.presence .pr-seg:hover b,.presence .bst-b:hover b{text-decoration:underline dotted rgba(255,255,255,.45);text-underline-offset:2px}
/* Votar no TopIdle embaixo da pílula do mapa (05/10, dono): dourado quando o voto está liberado; escuro com o tempo que falta. */
.votechip{position:absolute;left:50%;top:168px;transform:translateX(-50%);z-index:3}
.votechip[hidden]{display:none}
.hf.dock .votechip{left:calc(var(--dl) + 16px);top:calc(var(--dt) + 80px);transform:none}
.hf:has(.veil:not([hidden])) .votechip{display:none}
.hf.app .votechip{left:calc(64px + var(--sl));top:calc(var(--st) + 182px);transform:none}
.hf.app.is-landscape .votechip{top:calc(var(--st) + 142px)}
.hf.app[data-msheet] .votechip{visibility:hidden}
.vc-b{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px 0 7px;border-radius:18px;border:0;cursor:pointer;text-decoration:none;font:inherit;white-space:nowrap;box-sizing:border-box}
.vc-b img{width:22px;height:22px;image-rendering:pixelated;flex:none}
.vc-b>span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.12}
.vc-b b{font-size:12.5px;font-weight:800}.vc-b small{font-size:10.5px;font-weight:700}
.vc-b.go{color:#1d1204;background:linear-gradient(#ffd66b,#d49a2a);box-shadow:0 0 0 1px #8a5a12,0 2px 10px rgba(255,190,60,.45);animation:vcPulse 2.4s ease-in-out infinite}
.vc-b.go small{color:#4a2c06}
.vc-b.go:hover{filter:brightness(1.08)}
.vc-b.wait{color:#dfe7ef;background:rgba(8,11,16,.78);box-shadow:inset 0 0 0 1px rgba(214,170,90,.45),0 2px 8px rgba(0,0,0,.4)}
.vc-b.wait img{opacity:.65;filter:grayscale(.5)}
.vc-b.wait small{color:#9fb0c8}.vc-b.wait small .num{color:#ffe07a}
.hf.app .vc-b{height:32px;padding:0 11px 0 6px}.hf.app .vc-b b{font-size:11.5px}.hf.app .vc-b small{font-size:10px}
@keyframes vcPulse{50%{box-shadow:0 0 0 1px #8a5a12,0 2px 16px rgba(255,200,80,.8)}}
@media (prefers-reduced-motion:reduce){.vc-b.go{animation:none}}
/* Celular (05/10): placeParty põe o quadro do grupo embaixo do botão de votar (antes ficava por cima da pílula do mapa). */
.hf.app[data-msheet] .partybox{visibility:hidden}
/* Tesouro de ouro da guild (05/10): cofre dourado, as 6 habilidades em cartões com barra de nível e os bônus de ouro com 1 h / 3 h. */
.gd-vault.gd-gold{background:linear-gradient(115deg,rgba(242,193,78,.22),rgba(12,18,30,.8));box-shadow:inset 0 0 0 1px rgba(242,193,78,.45)}
.gd-sks{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px;margin-bottom:6px}
.gd-skc{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:rgba(12,18,30,.75);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.gd-skc.on{box-shadow:inset 0 0 0 1px rgba(242,193,78,.4)}
.gd-skc > img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.gd-skt{min-width:0}.gd-skt b{display:block;font-size:13px;color:#f3e9d2}.gd-skt small{display:block;font-size:11.5px;color:#a9b3c2;line-height:1.3}
.gd-sklv{font-style:normal;font-size:11px;font-weight:800;color:#ffe08a;margin-left:4px}
.gd-skbar{display:block;height:5px;margin-top:5px;border-radius:3px;overflow:hidden;background:rgba(0,0,0,.45)}
.gd-skbar>i{display:block;height:100%;background:linear-gradient(90deg,#d49a2a,#ffd66b)}
.gd-skc .buy,.gd-gbb .buy{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.gd-skc .buy img,.gd-gbb .buy img{width:15px;height:15px}
.gd-gbb{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.gd-gbb .buy b{margin-right:4px}
.hf.app .gd-sks{grid-template-columns:1fr}
.hf.app .gd-gbc{grid-template-columns:36px 1fr}.hf.app .gd-gbc .gd-gbb{grid-column:1/-1;justify-content:stretch}.hf.app .gd-gbc .gd-gbb .buy{flex:1;justify-content:center}
/* 05/10: 9 abas na guild (entrou o Tesouro): 5 por linha no computador. */
.gd2-cats{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (min-width:1750px){.hf:not(.app) .gd2-cats{grid-template-columns:repeat(9,minmax(0,1fr))}}
.hf.app .gd2-cats{grid-template-columns:repeat(3,minmax(0,1fr))}
.gd-gbb .buy b{color:#1d1204;opacity:.85}
/* 05/10 (dono: "colocar o nome em destaque do herói que é o item"): na ficha, o herói do item em destaque logo embaixo do nome;
no cartão do Mercado, o nome do herói (verde quando é o seu). */
.is-for .cx-for{display:flex;width:100%;box-sizing:border-box;margin:10px 0 4px;padding:6px 12px 6px 6px;border-radius:12px;font-size:14px}
.is-for .cx-for img{width:40px;height:40px;flex:none}
.is-for .cx-for b{font-size:16px;color:#ffe08a}
.is-for .cx-for em{margin-left:auto;font-size:11.5px;white-space:nowrap}
.mx-for{font-size:11px;font-weight:700;color:#ffcf7a;line-height:1.2;margin-top:1px}.mx-for.ok{color:#7dff9a}.mx-for.all{color:#9fb0c8;font-weight:600}
.mx-hero{max-width:200px}
/* 05/10 (dono: "destaque também o vendedor"): na ficha do Mercado, o vendedor numa faixa logo embaixo do herói do item. */
.is-seller{display:flex;align-items:center;gap:10px;margin:2px 0 6px;padding:6px 10px 6px 6px;border-radius:12px;background:rgba(8,12,20,.75);border:1px solid rgba(127,178,255,.45)}
.is-seller>img{width:40px;height:40px;flex:none;border-radius:50%;background:#0d1628;image-rendering:pixelated;object-fit:cover;border:1px solid rgba(255,255,255,.2)}
.is-seller .is-sl{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.is-seller .is-sl small{font-size:11px;color:#9fb0c8;text-transform:uppercase;letter-spacing:.06em}
.is-seller .is-sl b{font-size:16px;color:#bcd6ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.is-seller .is-sl i{font-style:normal;font-size:11px;color:#8a97ab}
.is-seller>em,.is-seller>.buy{margin-left:auto;flex:none}
.is-seller>em{font-style:normal;font-size:11.5px;padding:2px 8px;border-radius:999px;background:rgba(79,224,122,.18);color:#7dff9a}
.is-seller.me{border-color:#4fe07a}
/* 05/10 (dono: "na mochila fica muito grande esses balões e em cima dos outros itens"): balão curto na Mochila — força base e
upado numa linha, set e Relíquia numa linha, o equipado ao lado só com poder, força e bônus; a ficha (clique) tem tudo. */
.hf .itip.wide{width:420px}
.itip .tt-card.tt-mini .tt-h{margin-bottom:4px}
.itip .tt-card.tt-mini .mu-lines{margin-top:4px;padding-top:4px}
.itip .tt-pss{display:flex;flex-wrap:wrap;gap:1px 10px;margin-top:2px;font-size:11.5px;color:var(--muted)}
.itip .tt-pss b{color:#d6dde8;font-weight:700}
.itip .tt-card.eq.tt-mini .tt-h small{display:none}
.set-line{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-top:6px;padding:4px 8px;border-radius:7px;border:1px solid color-mix(in srgb,var(--sc,#b9a4ff) 50%,transparent);background:color-mix(in srgb,var(--sc,#b9a4ff) 12%,#0d1320)}
.set-line b{color:var(--sc,#b9a4ff);font-size:12.5px}
.set-line em{font-style:normal;font-weight:700;font-size:11px;color:#fff;background:color-mix(in srgb,var(--sc,#b9a4ff) 35%,#0d1320);border-radius:999px;padding:0 7px}
.set-line small{width:100%;font-size:11px;color:#c9d2e0;line-height:1.3}
.set-line.go small{color:var(--sc);font-weight:700}
.set-line.rl{--sc:#b9a4ff}
.itip .tt-swap,.itip .tt-pot{margin-top:5px}
.itip .tt-pot{font-size:12px}
.tt-pot .tt-pot-n{width:100%;font-size:10.5px;color:var(--muted)}
.inv-sheet .tt-relic .tt-n{font-size:13px;line-height:1.35}
/* 05/10: consumível usado com clique na Mochila dá o mesmo "pulo" das poções do atalho. */
.ig-cell.mat.cast{animation:cast .35s ease}
/* Pets (05/10, pets.ts): o cantinho do pet no quadro do herói (Mochila) e a janela do Caçador Orin (Cabana dos Caçadores). */
.ig-pet{all:unset;box-sizing:border-box;position:absolute;z-index:3;top:5px;left:5px;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;cursor:pointer;background:rgba(8,12,22,.6);box-shadow:inset 0 0 0 1px rgba(201,162,79,.55)}
.ig-pet img{width:26px;height:26px;object-fit:contain;image-rendering:pixelated}
.ig-pet:not(.has) img{filter:grayscale(1) brightness(.7);opacity:.45}
.ig-pet:hover{background:rgba(30,42,66,.85)}
.ig.pt{grid-template-columns:272px minmax(0,1fr)}
.pt-left>.buy{display:flex;align-items:center;justify-content:center;gap:6px}
.pt-left>.buy img{width:18px;height:18px;object-fit:contain;image-rendering:pixelated}
.pt-cats .ig-cat{height:50px;position:relative}
.pt-cats .ig-cat img{width:30px;height:30px}
.pt-cats .ig-cat.with{box-shadow:inset 0 0 0 1px rgba(127,224,143,.7)}
.pt-tag{margin-left:auto;flex:none;font-style:normal;font-size:10px;font-weight:800;padding:1px 6px;border-radius:4px;background:linear-gradient(#9be98f,#3f9b4a);color:#0b2410}
.pt-tag.own{background:rgba(255,255,255,.12);color:#dbe8ff}
.pt-hero{display:grid;grid-template-columns:168px minmax(0,1fr);gap:14px;align-items:start}
.pt-stage{position:relative;height:168px;border-radius:12px;overflow:hidden;display:grid;place-items:end center;background:radial-gradient(ellipse 60% 14% at 50% 86%,rgba(0,0,0,.35) 0 60%,transparent 62%),linear-gradient(180deg,#24364f 0,#1b2a3f 62%,#3c5a2e 62%,#2f4a24 100%);box-shadow:inset 0 0 0 1px #34465f}
.pt-walk{display:block;width:64px;height:64px;margin-bottom:14px;background-repeat:no-repeat;background-size:384px 64px;image-rendering:pixelated;scale:2;transform-origin:50% 100%;animation:ptWalk .7s steps(6) infinite}
@keyframes ptWalk{from{background-position:0 0}to{background-position:-384px 0}}
.pt-info{display:flex;flex-direction:column;gap:8px;min-width:0}
.pt-big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pt-big b{font-size:30px;line-height:1;color:#8fe28a;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.pt-big span{font-size:14px;font-weight:700;color:#e8edf5}
.pt-big .pt-xp{flex-basis:100%;font-size:13px;font-weight:700;color:#9fd8ff}
.pt-desc{margin:0;font-size:12.5px;line-height:1.4;color:#b9c6d8}
.pt-lvl{display:flex;flex-direction:column;gap:2px}
.pt-lvl-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pt-lvl-t b{font-size:13.5px;color:#ffe2a0}.pt-lvl-t small{font-size:11.5px;color:#9aa7bb}
.pt-food{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #34465f}
.pt-food img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated;flex:none}
.pt-food span{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pt-food b{font-size:13px}.pt-food small{font-size:11.5px;color:#9aa7bb}
.pt-acts .buy{min-width:0}
.pt-acts s{opacity:.6;margin-right:2px}
.pt-shut{margin:0;padding:7px 10px;border-radius:9px;background:rgba(255,180,60,.08);box-shadow:inset 0 0 0 1px rgba(255,190,90,.4);color:#ffd9a0}
.pt-shut.staff{background:rgba(80,140,255,.08);box-shadow:inset 0 0 0 1px rgba(127,176,255,.45);color:#cfe0ff}
.pt-buyt{margin:0;font-size:12.5px;color:#cfd8e6}
.pt-adm{align-self:flex-start;font-size:12px}
.pt-lv{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.pt-lvs{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
.pt-c{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:8px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px #2c3c58;text-align:center}
.pt-c b{font-size:10.5px;color:#9aa7bb}
.pt-c em{font-style:normal;font-weight:800;font-size:14px;color:#e8edf5}
.pt-c small{display:flex;align-items:center;gap:2px;font-size:10px;color:#9aa7bb}
.pt-c small img{width:13px;height:13px;object-fit:contain;image-rendering:pixelated}
.pt-c.got{background:rgba(111,211,106,.08);box-shadow:inset 0 0 0 1px rgba(111,211,106,.45)}
.pt-c.got em{color:#8fe28a}
.pt-c.cur{background:linear-gradient(180deg,rgba(47,111,208,.35),rgba(29,75,151,.35));box-shadow:inset 0 0 0 1px #7fb0ff}
.pt-c.cur b{color:#dbe8ff}
.ig.pt.app{grid-template-columns:1fr}
.ig.pt.app .pt-cats{grid-template-columns:repeat(3,1fr)}
.ig.pt.app .pt-cats .ig-cat{min-height:62px}
.ig.pt.app .pt-cats .ig-cat img{display:block;width:26px;height:26px}
.ig.pt.app .pt-tag{position:absolute;top:2px;right:2px;font-size:8.5px;padding:0 4px}
.ig.pt.app .pt-hero{grid-template-columns:1fr}
.ig.pt.app .pt-stage{height:140px}
.ig.pt.app .pt-lvs{grid-template-columns:repeat(5,minmax(0,1fr))}
.ig.pt.app .pt-left{flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start}
.ig.pt.app .pt-left>*{width:auto}
.ig.pt.app .pt-cats .ig-cat{flex-direction:column;justify-content:center;gap:2px;height:auto;padding:6px 2px}
/* Ficha do item lado a lado (05/10, dono: "tá muito grande esses balões"): com item equipado no mesmo espaço, duas colunas
(o item e o "Seu equipado agora"); em tela estreita, uma embaixo da outra e mais enxuta. */
.is-card.two{max-width:860px}
.is-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.is-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.is-col .is-cmp{margin:0}
.is-col .is-cmp>.is-lab{margin-bottom:4px}
.is-col .is-vs{min-height:52px}
.is-card.two .is-facts{gap:4px;padding:7px 10px}
.is-card.two .is-r{font-size:13px}
.is-card.two .is-eqf{margin-top:8px}
@media (max-width:760px){
.is-card.two{max-width:430px}
.is-cols{grid-template-columns:1fr;gap:8px}
.is-cols .is-col:first-child>.is-lab{display:none}
.is-card.two .is-facts{gap:3px;padding:6px 9px}
.is-card.two .is-r{font-size:12.5px}
}
/* Botão Usar nos consumíveis (05/10): embaixo do ícone; a quantidade sobe para o canto de cima. */
.ig-cell.mat.can img{width:52%;height:52%;margin-bottom:16px}
.ig-cell.mat.can .ig-q{top:2px;bottom:auto}
.ig-use{all:unset;box-sizing:border-box;position:absolute;left:3px;right:3px;bottom:3px;height:19px;display:grid;place-items:center;border-radius:5px;cursor:pointer;font-size:11px;font-weight:800;color:#2b1702;background:linear-gradient(#ffe08a,#d59a2a);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25),0 1px 0 rgba(0,0,0,.4)}
.ig-use:hover{filter:brightness(1.1)}
.ig-use:active{transform:translateY(1px)}
/* Passe de Batalha (05/10, passe.ts): topo com o nível e os pontos, as escolhas (pet e herói do set), a trilha (Premium em
cima, Grátis embaixo, rolando para o lado) e a compra. */
.ps{display:flex;flex-direction:column;gap:12px;min-width:0}
.ps-top{display:grid;grid-template-columns:minmax(0,auto) minmax(220px,1fr) auto auto;align-items:center;gap:10px 18px;padding:12px 14px;border-radius:12px;background:linear-gradient(180deg,rgba(60,38,90,.55),rgba(20,16,36,.75));box-shadow:inset 0 0 0 1px rgba(192,107,255,.4)}
.ps-t{display:flex;align-items:center;gap:10px;min-width:0}
.ps-t>img{width:48px;height:48px;object-fit:contain;image-rendering:pixelated;flex:none}
.ps-t b{display:block;font-size:17px}.ps-t small{font-size:12px;color:#c9b8e8}
.ps-lv{display:flex;align-items:center;gap:10px;min-width:0}
.ps-badge{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;font-size:18px;font-weight:900;color:#2b1702;background:radial-gradient(circle at 35% 30%,#ffe9a8,#e0a52c 70%,#9c6a12);box-shadow:0 0 0 2px #5a3a0a,0 0 14px rgba(255,200,80,.35)}
.ps-bar{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.ps-bt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.ps-bt b{font-size:13.5px;color:#ffe2a0}.ps-bt small{font-size:11.5px;color:#b9c6d8}
.ps-bar .fm-prog{height:8px}
.ps-bar .fm-prog i{background:linear-gradient(90deg,#9b5cff,#e0a8ff)}
.ps-pts{display:flex;flex-direction:column;gap:3px;font-size:12px;color:#c9d4e4}
.ps-pts span{display:flex;align-items:center;gap:6px}.ps-pts img{width:18px;height:18px;object-fit:contain;image-rendering:pixelated}.ps-pts b{color:#fff}
.ps-all{width:auto;min-width:150px}
.ps-pick{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;background:rgba(80,140,255,.08);box-shadow:inset 0 0 0 1px rgba(127,176,255,.5)}
.ps-pick>b{font-size:14px;color:#dbe8ff}.ps-pick>small{font-size:12px;color:#9fb0c8}
.ps-pick>.lnk{align-self:flex-start}
.ps-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}
.ps-opt{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:9px;cursor:pointer;background:rgba(24,34,54,.9);box-shadow:inset 0 0 0 1px #34465f}
.ps-opt:hover:not([disabled]){background:rgba(47,111,208,.35);box-shadow:inset 0 0 0 1px #7fb0ff}
.ps-opt[disabled]{opacity:.45;cursor:default}
.ps-opt>img,.ps-opt .hface{width:34px;height:34px;object-fit:contain;image-rendering:pixelated;flex:none}
.ps-opt span{display:flex;flex-direction:column;line-height:1.2;min-width:0}.ps-opt b{font-size:13px}.ps-opt small{font-size:11px;color:#9aa7bb}
.ps-track{overflow-x:auto;overflow-y:hidden;border-radius:12px;background:linear-gradient(180deg,rgba(18,26,44,.9),rgba(9,13,23,.9));box-shadow:inset 0 0 0 1px rgba(214,170,90,.28);scrollbar-width:thin;overscroll-behavior-x:contain}
.ps-grid{display:grid;grid-template-rows:76px 30px 76px;grid-auto-flow:column;grid-auto-columns:70px;width:max-content;padding:8px 10px 8px 0}
.ps-lab{position:sticky;left:0;z-index:3;display:flex;align-items:center;justify-content:center;width:84px;padding:0 6px;background:#0f1729;box-shadow:6px 0 10px rgba(0,0,0,.35)}
.ps-lab span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9aa7bb;text-align:center}
.ps-lab.p span{color:#e0a8ff}.ps-lab.f span{color:#ffe2a0}
.ps-lab.p{grid-row:1}.ps-lab.n{grid-row:2}.ps-lab.f{grid-row:3}
.ps-col{display:grid;grid-template-rows:76px 30px 76px;grid-row:1/4;justify-items:center;align-items:center;position:relative}
.ps-col::before{content:"";position:absolute;left:0;right:0;top:91px;height:4px;background:rgba(255,255,255,.08)}
.ps-col.got::before{background:linear-gradient(90deg,#9b5cff,#e0a8ff)}
.ps-n{position:relative;z-index:1;display:grid;place-items:center;min-width:28px;height:24px;padding:0 6px;border-radius:12px;font-size:12px;font-weight:800;color:#9aa7bb;background:#152036;box-shadow:inset 0 0 0 1px #34465f}
.ps-col.got .ps-n{color:#fff;background:#4a2d78;box-shadow:inset 0 0 0 1px #c06bff}
.ps-col.cur .ps-n{color:#2b1702;background:linear-gradient(#ffe9a8,#e0a52c);box-shadow:0 0 10px rgba(255,200,80,.5)}
.ps-cell{all:unset;box-sizing:border-box;position:relative;width:62px;height:62px;display:grid;place-items:center;border-radius:10px;cursor:pointer;background:rgba(24,34,54,.9);box-shadow:inset 0 0 0 1px #34465f}
.ps-cell.none{cursor:default;background:none;box-shadow:none}
.ps-cell img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated}
.ps-cell>b{position:absolute;right:4px;bottom:2px;font-size:11.5px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000}
.ps-cell.far{opacity:.55}
.ps-cell.set{box-shadow:inset 0 0 0 1px #5fd36a}
.ps-cell.ready{background:linear-gradient(180deg,rgba(255,214,107,.28),rgba(120,80,10,.35));box-shadow:inset 0 0 0 2px #ffd66b,0 0 12px rgba(255,214,107,.45);animation:psGlow 1.4s ease-in-out infinite}
@keyframes psGlow{50%{box-shadow:inset 0 0 0 2px #fff0b8,0 0 18px rgba(255,214,107,.7)}}
.ps-cell.done img{opacity:.45;filter:grayscale(.6)}
.ps-ok{position:absolute;top:3px;right:4px;font-style:normal;font-weight:900;font-size:14px;color:#8fe28a;text-shadow:0 1px 2px #000}
.ps-lk{position:absolute;top:3px;left:3px;display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:rgba(0,0,0,.6)}
.ps-lk img{width:12px;height:12px}
.ps-cell.lock img:not(.ps-lk img){filter:saturate(.6)}
.ps-buys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ps-buys.one{grid-template-columns:minmax(0,520px)}
.ps-buy{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;background:linear-gradient(180deg,rgba(60,38,90,.5),rgba(16,14,30,.85));box-shadow:inset 0 0 0 1px rgba(192,107,255,.45)}
.ps-buy.ps-plus{background:linear-gradient(180deg,rgba(90,64,20,.5),rgba(20,16,10,.85));box-shadow:inset 0 0 0 1px rgba(255,200,80,.55)}
.ps-bh{display:flex;align-items:center;gap:10px}.ps-bh img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated}.ps-bh b{font-size:16px;color:#fff}
.ps-buy ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:#dbe3ef}
.ps-buy li::marker{color:#e0a8ff}.ps-buy.ps-plus li::marker{color:#ffd66b}
.ps-buy .ig-note{margin:0}
.ps-pay{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:auto}
.ps-pay .buy{width:auto;flex:1 1 auto}
.ps-have{margin:0;text-align:center}
.q-pass{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;margin:2px 0 4px;padding:5px 8px;border-radius:8px;cursor:pointer;font-size:12px;color:#e9dcff;background:rgba(155,92,255,.14);box-shadow:inset 0 0 0 1px rgba(192,107,255,.45)}
.q-pass img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated}
.q-pass span{flex:1 1 auto;min-width:0}.q-pass b{color:#fff}
.q-pass .badge{position:static}
.nb-pass img{filter:drop-shadow(0 0 4px rgba(192,107,255,.6))}
.ps.app .ps-top{grid-template-columns:1fr;gap:8px}
.ps.app .ps-all{width:100%}
.ps.app .ps-buys{grid-template-columns:1fr}
.ps.app .ps-grid{grid-template-rows:66px 28px 66px;grid-auto-columns:60px}
.ps.app .ps-col{grid-template-rows:66px 28px 66px}
.ps.app .ps-col::before{top:80px}
.ps.app .ps-cell{width:54px;height:54px}.ps.app .ps-cell img{width:38px;height:38px}
.ps.app .ps-lab{width:60px}.ps.app .ps-lab span{font-size:9.5px}
.ps-grid{grid-template-columns:84px}
.ps-lab{grid-column:1}
.ps.app .ps-grid{grid-template-columns:60px}
/* Eventos no menu de baixo (05/10, dono: "colocar no menu embaixo e tirar ele de cima, e deixar ele destacado quando tiver
um evento online"): com evento ao vivo o botão brilha e pulsa; o selo roxo à esquerda conta as recompensas do Passe. */
.navbtn.nb-ev .badge.nb-pass{left:-4px;right:auto;background:linear-gradient(#c58bff,#7a3fd0);box-shadow:0 0 0 2px #2a0f4a}
.navbtn.nb-ev .badge.nb-pass[data-n="0"],.more-btn .badge.nb-pass[data-n="0"]{display:none}
.more-btn .badge.nb-pass{left:6px;right:auto;background:linear-gradient(#c58bff,#7a3fd0)}
/* 05/10 22h (jogadores: FPS baixo): o brilho do Eventos ao vivo anima só transform/opacity (fica na placa de vídeo); antes
animava sombra e filtro, que redesenham a HUD a cada quadro e tiram tempo do jogo. */
.navbtn.nb-ev.ev-on{position:relative;box-shadow:0 0 0 2px #ffd66b,0 0 16px rgba(255,200,80,.5)}
.navbtn.nb-ev.ev-on::after{content:"";position:absolute;inset:-4px;border-radius:12px;border:2px solid #ffd66b;pointer-events:none;will-change:transform,opacity;animation:evRing 1.8s ease-out infinite}
.navbtn.nb-ev.ev-on img{will-change:transform;animation:evIco 1.8s ease-in-out infinite}
@keyframes evRing{0%{opacity:.9;transform:scale(.96)}100%{opacity:0;transform:scale(1.18)}}
@keyframes evIco{50%{transform:scale(1.1) rotate(-4deg)}}
.more-btn.ev-on{box-shadow:inset 0 0 0 2px #ffd66b,0 0 14px rgba(255,200,80,.45)}
.ev2-cats.n4{grid-template-columns:repeat(4,1fr)}
.ev2-cats .ig-cat.ev-pass{box-shadow:inset 0 0 0 1px rgba(192,107,255,.6)}
.ev2-cats .ig-cat.ev-pass.on{background:linear-gradient(180deg,#7b3fd0,#4a2390);box-shadow:inset 0 0 0 1px #e0a8ff}
.ev2-cats .ig-cat.ev-pass b{background:linear-gradient(#c58bff,#7a3fd0);color:#fff}
.ev2 .ps{margin-top:10px}
/* Passe: VFX da trilha (05/10, dono: "eu quero VFX, uma coisa bonita quando vai passar nas trilhas"): a linha conquistada
corre com brilho, o nível atual pulsa com um anel, as recompensas prontas pulam e piscam com estrelinhas, e na abertura
da janela os níveis novos acendem um a um (PassFx.run). */
.ps-col.got::before{background:linear-gradient(90deg,#7b3fd0,#e0a8ff 45%,#ffe9a8 50%,#e0a8ff 55%,#7b3fd0);background-size:300% 100%;animation:psFlow 2.6s linear infinite}
@keyframes psFlow{from{background-position:100% 0}to{background-position:-200% 0}}
.ps-col.cur .ps-n{position:relative}
.ps-col.cur .ps-n::after{content:"";position:absolute;inset:-5px;border-radius:16px;border:2px solid #ffd66b;opacity:0;animation:psRing 1.8s ease-out infinite}
@keyframes psRing{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.6)}}
.ps-cell.ready img{animation:psHop 1.3s ease-in-out infinite}
@keyframes psHop{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-5px) rotate(-4deg)}50%{transform:translateY(0) rotate(0)}70%{transform:translateY(-2px) rotate(3deg)}}
.ps-cell.ready::after{content:"";position:absolute;inset:-4px;border-radius:12px;pointer-events:none;background:radial-gradient(circle at 18% 22%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 82% 30%,#fff3c4 0 1.5px,transparent 2.5px),radial-gradient(circle at 70% 85%,#fff 0 1px,transparent 2px),radial-gradient(circle at 25% 78%,#ffe9a8 0 1px,transparent 2px);animation:psTw 1.4s ease-in-out infinite}
@keyframes psTw{0%,100%{opacity:.2;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
.ps-col.ps-pre::before{background:rgba(255,255,255,.08);animation:none}
.ps-col.ps-pre .ps-n{color:#9aa7bb;background:#152036;box-shadow:inset 0 0 0 1px #34465f}
.ps-col.ps-pre .ps-cell.ready{background:rgba(24,34,54,.9);box-shadow:inset 0 0 0 1px #34465f;animation:none}
.ps-col.ps-pre .ps-cell.ready img,.ps-col.ps-pre .ps-cell.ready::after{animation:none;opacity:.55}
.ps-col.ps-pop::before{transform-origin:left center;animation:psFill .35s ease-out,psFlow 2.6s linear .35s infinite}
@keyframes psFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ps-col.ps-pop .ps-n{animation:psPop .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes psPop{0%{transform:scale(.6)}60%{transform:scale(1.45);box-shadow:0 0 0 3px #fff3c4,0 0 22px #e0a8ff}100%{transform:scale(1)}}
.ps-col.ps-pop .ps-cell.ready{animation:psGlow 1.4s ease-in-out infinite,psLit .6s ease-out}
@keyframes psLit{0%{filter:brightness(2.4)}100%{filter:none}}
/* Baú abrindo (PassFx.show): fundo escuro, raios girando na cor do baú, o baú cai, treme, abre num clarão com faíscas e as
peças saem uma a uma. Toque para pular; Esc fecha. */
.pso{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;--c:#ffd66b;--c2:#ffb43a;cursor:pointer;user-select:none;opacity:0;transition:opacity .25s}
.pso.k-rare{--c:#7fc4ff;--c2:#3f8fff}.pso.k-epic{--c:#e0a8ff;--c2:#9b5cff}
.pso.b4{--c:#ffcf6b;--c2:#ff9a1e}.pso.b5{--c:#ff8a8a;--c2:#ff3b4e}.pso.b6{--c:#b8fbff;--c2:#4fe7ff}
.pso.in{opacity:1}.pso.out{opacity:0}
.pso-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--c2) 26%,#0a0e18) 0,#05070d 62%);opacity:.94}
.pso-rays{position:absolute;left:50%;top:40%;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;opacity:0;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--c) 38%,transparent) 0 7deg,transparent 7deg 18deg);-webkit-mask:radial-gradient(circle,#000 0 18%,transparent 62%);mask:radial-gradient(circle,#000 0 18%,transparent 62%);transition:opacity .5s}
.pso.open .pso-rays{opacity:1;animation:psoSpin 16s linear infinite}
@keyframes psoSpin{to{transform:rotate(360deg)}}
.pso-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,#fff 0,color-mix(in srgb,var(--c) 70%,transparent) 22%,transparent 60%);opacity:0;pointer-events:none}
.pso.open .pso-flash{animation:psoFlash .7s ease-out}
@keyframes psoFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.pso-stage{position:relative;width:200px;height:170px;display:grid;place-items:center;transition:transform .5s cubic-bezier(.2,1,.3,1),height .5s}
.pso.open .pso-stage{transform:scale(.72);height:120px}
.pso-halo{position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 55%,transparent),transparent 65%);opacity:.5;animation:psoHalo 2s ease-in-out infinite}
@keyframes psoHalo{50%{opacity:.85;transform:scale(1.08)}}
.pso-chest{position:relative;width:170px;height:170px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6));transform:translateY(-120vh)}
.pso.in .pso-chest{animation:psoDrop .6s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes psoDrop{0%{transform:translateY(-60vh) scale(.6)}70%{transform:translateY(8px) scale(1.06,.94)}100%{transform:none}}
.pso.shake .pso-chest{animation:psoShake .5s linear infinite;transform:none}
@keyframes psoShake{0%,100%{transform:rotate(0)}15%{transform:translateX(-4px) rotate(-6deg)}35%{transform:translateX(4px) rotate(6deg)}55%{transform:translateX(-3px) rotate(-4deg)}75%{transform:translateX(3px) rotate(4deg)}}
.pso.shake .pso-halo{animation:psoHalo .5s ease-in-out infinite}
.pso.open .pso-chest{animation:psoPopOpen .5s cubic-bezier(.2,1.6,.4,1);transform:none;filter:drop-shadow(0 0 24px var(--c)) drop-shadow(0 10px 18px rgba(0,0,0,.6))}
@keyframes psoPopOpen{0%{transform:scale(.85)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
.pso-sparks{position:absolute;left:50%;top:45%;width:0;height:0}
.pso-sp{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,var(--c) 60%,transparent 70%);box-shadow:0 0 10px var(--c);animation:psoSpark 1s cubic-bezier(.1,.8,.3,1) forwards;transform:scale(var(--s))}
@keyframes psoSpark{0%{opacity:1;transform:translate(0,0) scale(var(--s))}80%{opacity:1}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 60px)) scale(.2)}}
.pso-title{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.pso-title b{font-size:24px;color:#fff;text-shadow:0 2px 0 #000,0 0 14px var(--c2)}
.pso-title small{font-size:12.5px;color:#c9d4e4;transition:opacity .3s}
.pso.open .pso-title small{opacity:0}
.pso-items{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:min(880px,94vw);max-height:46vh;overflow:auto;padding:4px}
.pso-it{display:flex;flex-direction:column;align-items:center;gap:4px;width:118px;padding:8px 6px;border-radius:12px;text-align:center;background:rgba(10,14,24,.78);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent);opacity:0;transform:translateY(-110px) scale(.2)}
.pso.open .pso-it{animation:psoIt .55s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes psoIt{0%{opacity:0;transform:translateY(-110px) scale(.2)}60%{opacity:1}100%{opacity:1;transform:none}}
.pso-it .ithumb.lg{width:64px;height:64px;margin:0}
.pso-it b{font-size:12.5px;line-height:1.2;color:#fff}
.pso-it small{font-size:10.5px;color:#9aa7bb}
.pso-it.r3{box-shadow:inset 0 0 0 1px #c06bff,0 0 14px rgba(192,107,255,.45)}
.pso-it.r4{box-shadow:inset 0 0 0 1px #ffb53a,0 0 18px rgba(255,181,58,.55)}
.pso-it.r5{box-shadow:inset 0 0 0 1px #ff4d5e,0 0 22px rgba(255,77,94,.6)}
.pso-it.r6{box-shadow:inset 0 0 0 1px #7ff6ff,0 0 26px rgba(127,246,255,.7)}
.pso-it.more{justify-content:center}.pso-it.more b{font-size:22px}
.pso-ic img{width:48px;height:48px;object-fit:contain;image-rendering:pixelated}
.pso-items.many .pso-it{width:100px}
.pso-acts{position:relative;display:flex;gap:10px;opacity:0;pointer-events:none;transition:opacity .3s}
.pso.done .pso-acts{opacity:1;pointer-events:auto}
.pso-acts .buy{width:auto;min-width:150px}
@media (max-width:600px){.pso-chest{width:130px;height:130px}.pso-stage{height:140px}.pso-it{width:96px}.pso-items.many .pso-it{width:84px}.pso-it .ithumb.lg{width:52px;height:52px}}
/* Selo do Passe no botão Eventos (05/10): pontinho roxo pequeno no canto de baixo, sem número (o número fica no vermelho). */
.navbtn.nb-ev .badge.nb-pass,.more-btn .badge.nb-pass{top:auto;bottom:4px;left:4px;right:auto;min-width:0;width:12px;height:12px;padding:0;border-width:2px;font-size:0;line-height:0;background:radial-gradient(circle at 35% 35%,#f0d4ff,#9b5cff 60%,#5a2aa0);box-shadow:0 0 8px #c06bff}
/* Passe, layout 2 (05/10 21:49, dono: "não gostei, tudo muito junto", "os pagamentos muito grandes", "mostrar os ícones do
pet na linha do tempo"): mais espaço, faixas coloridas por linha (Reforço dourada, Premium roxa, Grátis azul), barra de
nível com brilho, marcos a cada 10 níveis e a compra compacta. */
.ps{gap:16px}
.ps-top{grid-template-columns:minmax(0,auto) minmax(260px,1fr) auto auto;gap:14px 28px;padding:16px 20px;border-radius:14px;background:radial-gradient(120% 140% at 0% 0%,rgba(155,92,255,.35),transparent 55%),linear-gradient(180deg,#24173d,#140f24);box-shadow:inset 0 0 0 1px rgba(192,107,255,.45),0 6px 18px rgba(0,0,0,.35)}
.ps-t>img{width:56px;height:56px}
.ps-t b{font-size:19px}
.ps-badge{width:52px;height:52px;font-size:22px}
.ps-bt b{font-size:14.5px}.ps-bt b span{font-weight:600;color:#b9a8d8}
.ps-bt small{margin-left:auto;font-size:12px;color:#e9dcff}
.ps-prog{position:relative;height:12px;border-radius:8px;background:#0b0816;box-shadow:inset 0 0 0 1px rgba(192,107,255,.35);overflow:hidden}
.ps-prog i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:linear-gradient(90deg,#7b3fd0,#c58bff 60%,#ffd66b);box-shadow:0 0 12px rgba(197,139,255,.7);overflow:hidden}
.ps-prog i::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:220% 100%;animation:psShine 2.2s linear infinite}
@keyframes psShine{from{background-position:120% 0}to{background-position:-120% 0}}
.ps-pts{gap:5px;font-size:12.5px}
.ps-all{min-width:170px;height:44px}
.ps-track{border-radius:14px;background:#0b111e;box-shadow:inset 0 0 0 1px rgba(214,170,90,.25)}
.ps-grid{grid-template-rows:84px 84px 40px 84px;grid-auto-columns:82px;grid-template-columns:110px;padding:12px 14px 12px 0;
background:linear-gradient(180deg,rgba(255,200,80,.07) 0 84px,rgba(155,92,255,.10) 84px 168px,transparent 168px 208px,rgba(80,140,255,.06) 208px 292px) content-box}
.ps-lab{width:110px;flex-direction:column;gap:3px;background:#0e1524}
.ps-lab img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated}
.ps-lab span{font-size:10.5px}
.ps-lab.rf{grid-row:1;box-shadow:inset 3px 0 0 #ffd66b,6px 0 10px rgba(0,0,0,.35)}.ps-lab.rf span{color:#ffd66b}
.ps-lab.p{grid-row:2;box-shadow:inset 3px 0 0 #c06bff,6px 0 10px rgba(0,0,0,.35)}
.ps-lab.n{grid-row:3}.ps-lab.n img{width:20px;height:20px}
.ps-lab.f{grid-row:4;box-shadow:inset 3px 0 0 #7fb0ff,6px 0 10px rgba(0,0,0,.35)}.ps-lab.f span{color:#9cc4ff}
.ps-col{grid-row:1/5;grid-template-rows:84px 84px 40px 84px}
.ps-col::before{top:186px;height:5px}
.ps-cell{width:68px;height:68px;border-radius:12px}
.ps-cell img{width:48px;height:48px}
.ps-cell.p{background:linear-gradient(180deg,rgba(90,50,150,.55),rgba(30,20,55,.9));box-shadow:inset 0 0 0 1px rgba(192,107,255,.45)}
.ps-cell.f{background:linear-gradient(180deg,rgba(40,60,100,.55),rgba(16,24,42,.9));box-shadow:inset 0 0 0 1px rgba(127,176,255,.35)}
.ps-cell.rf{background:linear-gradient(180deg,rgba(120,85,20,.5),rgba(40,28,10,.9));box-shadow:inset 0 0 0 1px rgba(255,200,80,.45)}
.ps-cell.none{background:none;box-shadow:none}
.ps-cell.ready{background:linear-gradient(180deg,rgba(255,214,107,.32),rgba(120,80,10,.4));box-shadow:inset 0 0 0 2px #ffd66b,0 0 14px rgba(255,214,107,.5)}
.ps-cell.lock>img{filter:saturate(.55) brightness(.85)}
.ps-col.ten .ps-n{min-width:34px;height:28px;font-size:13px;box-shadow:inset 0 0 0 2px #ffd66b}
.ps-col.ten.got .ps-n{background:linear-gradient(#ffe9a8,#e0a52c);color:#2b1702}
.ps-petcyc{position:relative;display:block;width:48px;height:48px}
.ps-petcyc img{position:absolute;inset:0;opacity:0;animation:psCyc calc(var(--n) * 1.4s) infinite;animation-delay:calc(var(--i) * 1.4s)}
@keyframes psCyc{0%{opacity:0;transform:scale(.8) translateY(3px)}4%{opacity:1;transform:none}18%{opacity:1;transform:none}22%{opacity:0;transform:scale(.9)}100%{opacity:0}}
/* Compra compacta */
.ps-buys{gap:12px}
.ps-buy{gap:6px;padding:10px 14px 12px;border-radius:12px}
.ps-bh{gap:8px}.ps-bh img{width:30px;height:30px}.ps-bh b{font-size:15px}
.ps-price{margin-left:auto;font-style:normal;font-weight:900;font-size:16px;color:#ffe9a8;text-shadow:0 1px 0 #000}
.ps-buy ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;padding-left:16px;font-size:12px}
.ps-pay{justify-content:flex-end;gap:10px;margin-top:4px}
.ps-pay .buy{flex:none;width:auto;min-width:130px;height:34px;padding:0 14px;font-size:13px}
.ps-pay .fm-alt{font-size:12.5px}
.ps-buys.one{grid-template-columns:minmax(0,560px)}
.ps-flash{animation:psBuyFlash 1.2s ease-out}
@keyframes psBuyFlash{0%,40%{box-shadow:inset 0 0 0 2px #ffd66b,0 0 24px rgba(255,214,107,.7)}}
.ps-how{margin:0}
/* Eventos: "Agora e hoje" com o ponto vermelho piscando quando há evento ao vivo. */
.ev-dot{display:inline-block;width:9px;height:9px;flex:none;border-radius:50%;background:#ff3b3b;animation:evDot 1.1s ease-out infinite}
@keyframes evDot{0%{box-shadow:0 0 0 0 rgba(255,59,59,.75);opacity:1}60%{box-shadow:0 0 0 8px rgba(255,59,59,0);opacity:.55}100%{box-shadow:0 0 0 0 rgba(255,59,59,0);opacity:1}}
.ev2-cats .ig-cat.ev-live span{color:#ffd6d6}
/* Celular */
.ps.app .ps-top{grid-template-columns:1fr;padding:12px 14px}
.ps.app .ps-grid{grid-template-rows:70px 70px 34px 70px;grid-auto-columns:66px;grid-template-columns:70px;background:linear-gradient(180deg,rgba(255,200,80,.07) 0 70px,rgba(155,92,255,.10) 70px 140px,transparent 140px 174px,rgba(80,140,255,.06) 174px 244px) content-box}
.ps.app .ps-col{grid-template-rows:70px 70px 34px 70px}
.ps.app .ps-col::before{top:154px}
.ps.app .ps-lab{width:70px}.ps.app .ps-lab img{width:22px;height:22px}.ps.app .ps-lab span{font-size:9px}
.ps.app .ps-cell{width:56px;height:56px}.ps.app .ps-cell img,.ps.app .ps-petcyc{width:40px;height:40px}
.ps.app .ps-buy ul{grid-template-columns:1fr}
.ps-cell .ps-lk img{width:12px;height:12px;filter:none}
.ps-cell.lock>img{filter:saturate(.55) brightness(.85)}
.ps-cell .ps-petcyc img{width:100%;height:100%}
/* O ciclo dos pets da linha Reforço não pode perder a animação para o pulo da recompensa pronta (.ps-cell.ready img). */
.ps .ps-col .ps-cell.rf .ps-petcyc img{opacity:0;animation:psCyc calc(var(--n) * 1.4s) infinite;animation-delay:calc(var(--i) * 1.4s)}
.ps .ps-col .ps-cell.rf.ready .ps-petcyc{animation:psHop 1.3s ease-in-out infinite}
/* Cadeado pequeno também no celular (.ps.app .ps-cell img deixava o cadeado do tamanho da recompensa). */
.ps .ps-cell .ps-lk img,.ps.app .ps-cell .ps-lk img{width:12px;height:12px;filter:none}
/* PIX e USDC lado a lado, do mesmo tamanho (05/10 22:15). */
.ps-pay .fm-pix,.ps-pay .fm-usdc{flex:1 1 0;min-width:0;white-space:nowrap}
.fm-pack .fm-pix,.fm-pack .fm-usdc{white-space:nowrap}
/* Canteiro com ouro: o ouro numa linha e PIX + USDC lado a lado embaixo. */
.fm-b [data-fzslot]{flex:1 1 100%}
.fm-b .fm-pix,.fm-b .fm-usdc{flex:1 1 0;min-width:0;white-space:nowrap}
/* Loja: "Meus diamantes" no topo da janela, ao lado do "?" (05/10 22:28). */
.win-head .win-dia{margin-left:auto;display:flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 8px;border-radius:10px;cursor:help;background:linear-gradient(135deg,rgba(79,195,255,.2),rgba(8,12,22,.4));box-shadow:inset 0 0 0 1px rgba(127,246,255,.45)}
.win-head .win-dia img{width:28px;height:28px;image-rendering:pixelated}
.win-head .win-dia>span{display:flex;flex-direction:column;line-height:1.05}
.win-head .win-dia small{font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#9fd8ff}
.win-head .win-dia b{font-size:18px;color:#fff}
.win-head .win-dia .ig-btn{height:30px;padding:0 12px;font-size:12.5px}
.win-head .win-dia + .help-q{margin-left:8px}
.win-head .win-dia + .close{margin-left:8px}
.hf.app .win-head .win-dia{height:36px;gap:6px;padding:0 4px 0 6px}.hf.app .win-head .win-dia small{display:none}.hf.app .win-head .win-dia b{font-size:16px}.hf.app .win-head .win-dia img{width:24px;height:24px}.hf.app .win-head .win-dia .ig-btn{height:28px;padding:0 9px;font-size:11.5px}
/* ===== Passe em janela própria (05/10 22:34, dono: "tirar do Eventos, um menu pra ele", "sem scroll, com os valores embaixo e a
timeline em cima explicando tudo"): no PC tudo cabe numa tela. ===== */
.ps4{gap:10px}
.ps4:not(.app) .ps-top{grid-template-columns:minmax(0,auto) minmax(260px,1fr) auto;padding:10px 16px;gap:10px 22px}
.ps4:not(.app) .ps-t>img{width:44px;height:44px}.ps4:not(.app) .ps-t b{font-size:17px}
.ps4:not(.app) .ps-badge{width:44px;height:44px;font-size:19px}
.ps4:not(.app) .ps-all{height:40px;min-width:150px}
.ps-join{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:12px;background:linear-gradient(90deg,rgba(255,200,80,.16),rgba(155,92,255,.12));box-shadow:inset 0 0 0 1px rgba(255,214,107,.55)}
.ps-jic{width:40px;height:40px;object-fit:contain;image-rendering:pixelated;flex:none}
.ps-jt{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:2px}.ps-jt b{font-size:15px;color:#ffe9a8}.ps-jt small{font-size:12px;color:#c9d3e2;line-height:1.3}
.ps-steps{display:flex;gap:12px;margin:0;padding:0;list-style:none}
.ps-steps li{display:flex;align-items:center;gap:6px;font-size:12px;color:#dfe7ef;white-space:nowrap}.ps-steps img{width:20px;height:20px;object-fit:contain;image-rendering:pixelated}.ps-steps b{color:#fff}
.ps-joinb{width:auto;min-width:150px;height:42px;font-size:15px;flex:none}
.ps-todo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ps-task{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px;border-radius:10px;background:rgba(24,34,54,.85);box-shadow:inset 0 0 0 1px #34465f}
.ps-task>img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated;flex:none}
.ps-tk{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.ps-tk b{font-size:13px;color:#fff}.ps-tk small{font-size:11px;color:#9fb0c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-tb{height:6px;border-radius:4px;background:#0b0816;overflow:hidden;margin-top:2px}.ps-tb i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#7b3fd0,#c58bff)}
.ps-tn{font-size:13px;font-weight:800;color:#e9dcff;flex:none}
.ps-task.ok{box-shadow:inset 0 0 0 1px rgba(125,255,154,.45)}.ps-task.ok .ps-tn{color:#7dff9a}.ps-task.ok .ps-tb i{background:linear-gradient(90deg,#2f9e55,#7dff9a)}
.ps-task .buy{width:auto;min-width:58px;height:30px;padding:0 10px;font-size:12px;flex:none}
.ps4:not(.app) .ps-grid{grid-template-rows:66px 66px 34px 66px;grid-auto-columns:72px;grid-template-columns:96px;padding:8px 12px 8px 0;background:linear-gradient(180deg,rgba(255,200,80,.07) 0 66px,rgba(155,92,255,.10) 66px 132px,transparent 132px 166px,rgba(80,140,255,.06) 166px 232px) content-box}
.ps4:not(.app) .ps-col{grid-template-rows:66px 66px 34px 66px}
.ps4:not(.app) .ps-col::before{top:147px}
.ps4:not(.app) .ps-lab{width:96px}.ps4:not(.app) .ps-lab img{width:22px;height:22px}.ps4:not(.app) .ps-lab span{font-size:10px}
.ps4:not(.app) .ps-cell{width:58px;height:58px;border-radius:10px}.ps4:not(.app) .ps-cell>img,.ps4:not(.app) .ps-petcyc{width:40px;height:40px}
.ps4 .ps-cell .ps-lk img{width:12px;height:12px}
.ps4 .ps-n{cursor:help}
.ps4:not(.app) .ps-buy{flex-direction:row;align-items:center;gap:12px;padding:10px 12px}
.ps-bl{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ps4:not(.app) .ps-buy ul{grid-template-columns:1fr;font-size:12px;gap:1px}
.ps4:not(.app) .ps-pay{flex-direction:column;align-items:stretch;justify-content:center;gap:6px;margin:0;width:150px;flex:none}
.ps4:not(.app) .ps-pay .buy{min-width:0;width:100%;height:32px;flex:none}
.ps4 .ps-pick{padding:10px}
.ps.app .ps-join{flex-wrap:wrap}.ps.app .ps-steps{flex-wrap:wrap;gap:6px 12px}.ps.app .ps-joinb{width:100%}
.ps.app .ps-todo{grid-template-columns:1fr;gap:6px}
/* Missões do passe no painel de Missões. */
.quest.q-pt{box-shadow:inset 3px 0 0 #c06bff}
/* Missões do Passe e Baú bônus (06/10): a etiqueta "Passe" nas missões a mais do Premium (mesmo roxo do botão do passe), a linha
delas na janela do Passe (ou o aviso para quem não tem o Premium) e a tarefa do Baú bônus brilhando quando tem baú pronto. */
.quest.q-pm img{object-fit:contain;image-rendering:pixelated}
.q-ptag{display:inline-block;margin-left:5px;padding:0 5px;border-radius:4px;font-style:normal;font-size:10px;font-weight:800;line-height:1.5;letter-spacing:.03em;vertical-align:.12em;color:#fff;text-shadow:none;background:linear-gradient(#a56bff,#5a2bb8);box-shadow:0 0 0 1px #3a1780}
.ps-todo.one{grid-template-columns:minmax(0,420px)}
.ps-task[data-pstip]{cursor:help}
.ps-task:has([data-psbonus]){box-shadow:inset 0 0 0 1px #ffd66b,0 0 12px rgba(255,214,107,.35)}.ps-task:has([data-psbonus]) .ps-tn{display:none}
.ps-pm{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 10px;border-radius:10px;background:rgba(155,92,255,.10);box-shadow:inset 0 0 0 1px rgba(192,107,255,.45)}
.ps-pml{display:flex;align-items:center;gap:6px;flex:none}.ps-pml b{font-size:12.5px;color:#e9dcff;white-space:nowrap}
.ps-pml img,.ps-pm.note>img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated;flex:none}
.ps-pmi{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:6px;height:30px;padding:0 8px;border-radius:8px;cursor:help;background:rgba(24,34,54,.85);box-shadow:inset 0 0 0 1px #34465f}
.ps-pmn{flex:1;min-width:0;font-size:12px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-pmi .ps-tn{font-size:12px}
.ps-pmi.done{box-shadow:inset 0 0 0 1px rgba(125,255,154,.45)}.ps-pmi.done .ps-tn{color:#7dff9a}
.ps-pmi.go{box-shadow:inset 0 0 0 1px #ffd66b}
.ps-pmi .buy{width:auto;min-width:0;height:24px;padding:0 6px;font-size:11.5px;border-width:6px;border-image-width:6px;flex:none}
.ps-pm.note>span{flex:1;min-width:0;font-size:12px;color:#e9dcff;line-height:1.25}
.ps-pm.note .buy{width:auto;height:30px;padding:0 10px;font-size:12px;flex:none}
.ps.app .ps-pm:not(.note){flex-wrap:wrap}.ps.app .ps-pml,.ps.app .ps-pmi{flex:1 1 100%}.ps.app .ps-pmi{height:auto;min-height:34px;padding:3px 8px}.ps.app .ps-pm.col{flex-wrap:nowrap}.ps.app .ps-pm.col .ps-pml,.ps.app .ps-pm.col .ps-pmi{flex:0 0 auto}
.mboard .ps-pm.note{margin-top:8px}
/* Com o Premium sem o Reforço: as Missões do Passe em coluna, ao lado do cartão "Passar para o Reforço" (no PC). */
.ps-pm.col{flex-direction:column;align-items:stretch;justify-content:center;gap:5px;padding:8px 12px;border-radius:12px}
.ps-pm.col .ps-pmi{flex:0 0 28px;height:28px}
.ps:not(.app) .ps-buys.one.pm2{grid-template-columns:minmax(0,560px) minmax(0,1fr)}
.bar.purple > i.fill{background:linear-gradient(#e7c8ff 0 14%,#9b5cff 15% 62%,#5a2bb8 63%)}
/* Botão do passe na tela, embaixo do voto do TopIdle, com destaque roxo. O brilho anda só em opacidade (leve para o FPS). */
.votechip:not([hidden]){display:flex;flex-direction:column;align-items:center;gap:12px}
.hf.dock .votechip,.hf.app .votechip{align-items:flex-start}
.vc-b.ps-chip{position:relative;color:#fff;background:linear-gradient(#a56bff,#5a2bb8);box-shadow:0 0 0 1px #3a1780,0 2px 10px rgba(155,92,255,.45)}
.vc-b.ps-chip small{color:#eadcff}
.vc-b.ps-chip::after{content:"";position:absolute;inset:-3px;border-radius:21px;box-shadow:0 0 14px 3px rgba(197,139,255,.85);opacity:0;pointer-events:none;animation:psChipGlow 2.4s ease-in-out infinite}
.vc-b.ps-chip.has::after{box-shadow:0 0 14px 3px rgba(255,214,107,.9)}
.vc-b.ps-chip .badge{position:static;margin-left:4px}
.vc-b.ps-chip:hover{filter:brightness(1.1)}
@keyframes psChipGlow{50%{opacity:1}}
/* O pulso do voto também só em opacidade (antes animava a sombra e repintava todo quadro). */
.vc-b.go{position:relative;animation:none}
.vc-b.go::after{content:"";position:absolute;inset:-3px;border-radius:21px;box-shadow:0 0 14px 2px rgba(255,200,80,.8);opacity:0;pointer-events:none;animation:psChipGlow 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.vc-b.ps-chip::after,.vc-b.go::after{animation:none}}
/* Barra de comida do pet na janela Pets (05/10 22:50): verde; amarela com 25% ou menos; vazia, vermelha. */
.pt-sat .fm-prog i{background:linear-gradient(90deg,#2f9e55,#5fd36a)}
.pt-sat.warn .fm-prog i{background:linear-gradient(90deg,#c99a12,#ffd23f)}
.pt-sat.warn .pt-lvl-t b{color:#ffd23f}
.pt-sat.bad .fm-prog{box-shadow:inset 0 0 0 1px #e0302a}
.pt-sat.bad .pt-lvl-t b,.pt-sat.bad .pt-lvl-t small{color:#ff6b5e}
/* Comida do Caçador Orin na janela Pets (05/10 23:07): só dentro da Cabana (o VIP de qualquer mapa). */
.pt-shop{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding:10px;border-radius:10px;background:rgba(24,34,54,.6);box-shadow:inset 0 0 0 1px #34465f}
.pt-shop .fg3-k{display:flex;align-items:center;gap:6px}
.pt-away{display:flex;align-items:center;gap:8px;margin:0;font-size:12px}.pt-away img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated;flex:none}
.pt-foods{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.pt-fd{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border-radius:8px;background:rgba(10,16,30,.7);box-shadow:inset 0 0 0 1px #2b3b5e;min-width:0}
.pt-fd.own{box-shadow:inset 0 0 0 1px rgba(95,211,106,.55)}
.pt-fd>img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.pt-fdt{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}.pt-fdt b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.pt-fdt small{font-size:10.5px;color:#9fb0c8}
.pt-fdb{display:flex;gap:4px;width:100%}.pt-fdb .qty-in{width:44px;height:28px;padding:0 4px;text-align:center}.pt-fdb .buy{flex:1;min-width:0;height:28px;padding:0 6px;font-size:11.5px}
.ig.pt.app .pt-foods{grid-template-columns:repeat(2,minmax(0,1fr))}
.pt-shop{margin-top:8px;padding:8px 10px;gap:5px}
.pt-fd{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:3px 6px;padding:5px}
.pt-fd>img{width:26px;height:26px}
.pt-fdt{align-items:flex-start;text-align:left}
.pt-fd{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:4px;padding:5px 6px}
.pt-fd>img{display:none}
.pt-fdt{flex-direction:row;align-items:center;gap:6px;text-align:left}
.pt-fdt::before{content:"";flex:none;width:24px;height:24px;background:var(--fd) center/contain no-repeat;image-rendering:pixelated}
.pt-fdt>span{display:flex;flex-direction:column;min-width:0}
/* Pet no perfil (05/10 23:20): andando ao lado do herói e a linha com o nível e o bônus. */
.pf2-doll .ig-hero{position:relative}
.pf2-petw{position:absolute;right:4px;bottom:6px;width:64px;height:64px;background-repeat:no-repeat;background-size:384px 64px;image-rendering:pixelated;pointer-events:auto;animation:ptWalk .7s steps(6) infinite;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.pf2-petc{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:rgba(24,34,54,.85);box-shadow:inset 0 0 0 1px rgba(95,211,106,.45)}
.pf2-petc img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated;flex:none}
.pf2-petc span{display:flex;flex-direction:column;min-width:0;line-height:1.2}.pf2-petc b{font-size:13px;color:#fff}.pf2-petc small{font-size:11.5px;color:#7dff9a}
.pf2-petc.hungry{box-shadow:inset 0 0 0 1px rgba(224,48,42,.6)}.pf2-petc.hungry small{color:#ff6b5e}
/* Trilha do passe: arrastar com o mouse, sem barra de rolagem (05/10 23:44). */
.ps4 .ps-track{cursor:grab;scrollbar-width:none;user-select:none;-webkit-user-select:none}
.ps4 .ps-track::-webkit-scrollbar{display:none}
.ps4 .ps-track.drag{cursor:grabbing}
.ps4 .ps-track.drag .ps-cell{pointer-events:none}
.ps4 .ps-track img{-webkit-user-drag:none;user-drag:none}
.ps-buy li .ps-li{width:16px;height:16px;object-fit:contain;image-rendering:pixelated;vertical-align:-3px;margin-right:4px}
.ps-buy li b.num{color:#fff;margin-right:3px}
.ps-buy li:has(.ps-li){list-style:none;display:flex;align-items:center;gap:4px;margin-left:-16px}
.ps-buy li .ps-li{display:inline-block;flex:none;margin:0}
/* Botão do passe na tela igual ao do voto (05/10 23:58): escuro; dourado com recompensa para pegar. Sem o roxo. */
.vc-b.ps-chip.wait{color:#dfe7ef;background:rgba(8,11,16,.78);box-shadow:inset 0 0 0 1px rgba(214,170,90,.45),0 2px 8px rgba(0,0,0,.4)}
.vc-b.ps-chip.wait small{color:#9fb0c8}.vc-b.ps-chip.wait .ps-cl{color:#ffe07a}
.vc-b.ps-chip.wait::after{content:none;animation:none}
.vc-b.ps-chip.go{color:#1d1204;background:linear-gradient(#ffd66b,#d49a2a);box-shadow:0 0 0 1px #8a5a12,0 2px 10px rgba(255,190,60,.45)}
.vc-b.ps-chip.go small{color:#4a2c06}.vc-b.ps-chip.go .ps-cl{color:#4a2c06}
/* Loja só de diamantes (06/10): aviso "Faltam X para - " no topo de Loja › Diamantes, o pacote que cobre marcado, a compra
automática na tela do pagamento e os botões de diamante (Passe, Pets, Armeiro, Fazenda). */
.gem-need{position:relative;display:flex;align-items:center;gap:10px;padding:8px 12px;margin:0 0 10px;border:0;border-radius:12px;background:linear-gradient(135deg,rgba(79,195,255,.24),rgba(14,20,36,.96) 62%);box-shadow:inset 0 0 0 1px rgba(127,246,255,.6),0 0 16px rgba(79,195,255,.18)}
.lj2 .gem-need{margin:0}
.gem-need>img{width:34px;height:34px;flex:none;object-fit:contain;image-rendering:pixelated}
.gem-nt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.gem-nt>b{font-size:14.5px;color:#fff;line-height:1.3}
.gem-nt>b img{display:inline-block;width:17px;height:17px;object-fit:contain;vertical-align:-3px;margin:0 2px 0 1px}
.gem-nt small{font-size:12.5px;color:#cfe6ff;line-height:1.35}.gem-nt small b{color:#7ff6ff}
.gem-na{display:flex;align-items:center;gap:10px;flex:none}
.gem-na .buy{width:auto;padding:0 12px}.gem-na .buy img{width:16px;height:16px}
.gem-na .lnk,.ps-pick .lnk{background:none;border:0;padding:0;color:#9fc8ff;text-decoration:underline;cursor:pointer;font:600 12.5px "HF Sans","Signika",system-ui,sans-serif}
.gem-need.ok{background:linear-gradient(135deg,rgba(95,211,106,.22),rgba(14,20,36,.96) 62%);box-shadow:inset 0 0 0 1px rgba(95,211,106,.6)}
.hf.app .gem-need{flex-wrap:wrap}.hf.app .gem-na{width:100%;justify-content:flex-end}
/* Pacote que cobre o que falta: borda e brilho azul-diamante pulsando, com a etiqueta "Cobre
- ". */
.gem-pick{animation:gemPick 1.6s ease-in-out infinite}
.lj2 .pk-card.gem-pick,.lj2 .starter.gem-pick{box-shadow:inset 0 0 0 2px #7ff6ff,0 0 18px rgba(127,246,255,.45)}
@keyframes gemPick{0%,100%{filter:none}50%{filter:brightness(1.14) drop-shadow(0 0 6px rgba(127,246,255,.55))}}
.gem-tag{position:absolute;z-index:3;top:-9px;left:50%;transform:translateX(-50%);max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 9px;border-radius:999px;background:linear-gradient(#bff9ff,#3fb6e6);color:#03222e;font-size:11px;font-weight:800;box-shadow:0 2px 0 #0b4a63}
.starter .gem-tag{left:auto;right:auto;transform:none;left:14px}
.pk-card .gem-tag{left:10px;transform:none;max-width:calc(100% - 62px)}
/* Tela do pagamento: o que o jogo compra sozinho quando o pagamento cair (then) e o resultado. */
.gem-then{display:flex;align-items:center;gap:8px;margin:0;padding:7px 10px;border-radius:9px;background:rgba(79,195,255,.1);box-shadow:inset 0 0 0 1px rgba(127,246,255,.35);font-size:13px;color:#dff4ff;line-height:1.35}
.gem-then img{width:20px;height:20px;flex:none;object-fit:contain}
.gem-then b{color:#7ff6ff}
.gem-then.ok{background:rgba(95,211,106,.12);box-shadow:inset 0 0 0 1px rgba(95,211,106,.45)}.gem-then.ok b{color:#9dffb0}
.gem-then.bad{background:rgba(224,48,42,.12);box-shadow:inset 0 0 0 1px rgba(255,107,94,.45)}.gem-then.bad b{color:#ffb0a8}
.vip-fd{margin:6px 0 0}.vip-fd b.num{color:#ffe08a}
/* Botões de diamante: o número com o ícone, sem quebrar. */
.ps-gem,.pt-dia,.ar2-gem,.fm-gem{white-space:nowrap}
.ps-gem img,.pt-dia img,.ar2-gem img,.fm-gem img{width:16px;height:16px;object-fit:contain;margin:0 2px 0 0}
/* Canteiro à venda: ouro e diamantes em cima, PIX e USDC embaixo (2 × 2); sem ouro, o diamante ocupa a linha toda. */
.fm-card.lock .fm-b>.buy{flex:1 1 calc(50% - 3px);min-width:0;white-space:nowrap}
.fm-card.lock .fm-b>.fm-gem:first-child{flex-basis:100%}
/* Loja › VIP (06/10, só diamantes): as 6 vantagens numa linha só no PC. */
.lj2 .vp-tiles{gap:6px 8px}
/* Diamantes avulsos (06/10): linha embaixo dos pacotes, com a quantidade livre e o preço na hora. */
.pk-free{display:grid;grid-template-columns:minmax(0,1.6fr) auto auto minmax(150px,1fr) minmax(120px,.8fr);align-items:center;gap:10px;margin-top:12px;padding:12px;border-radius:12px;background:linear-gradient(180deg,rgba(30,42,66,.95),rgba(15,21,36,.95));box-shadow:inset 0 0 0 1px #34465f}
.pk-free.need{box-shadow:inset 0 0 0 2px #59d0ff,0 0 14px rgba(89,208,255,.25)}
.pkf-t{display:flex;align-items:center;gap:10px;min-width:0}.pkf-t>img{width:34px;height:34px;flex:none}.pkf-t b{display:block;font-size:15px;color:#fff}.pkf-t small{display:block;font-size:12px;color:#b9c6da;line-height:1.35}
.pkf-q{display:flex;align-items:center;gap:6px}.pkf-q .input{width:86px;height:34px;text-align:center;font-size:15px}.pkf-q .buy.sm{width:34px;height:34px;padding:0}
.pkf-p{font-size:18px;color:#7dffb0;white-space:nowrap;text-align:center}
.pk-free .pk-pay{margin:0}.pk-free .pk-go{margin:0}
.hf.app .pk-free{grid-template-columns:1fr auto;gap:8px}.hf.app .pkf-t{grid-column:1/-1}.hf.app .pk-free .pk-pay{grid-column:1/-1}.hf.app .pk-free .pk-go{grid-column:1/-1}
@media (max-width:900px){.pk-free{grid-template-columns:1fr auto}.pkf-t,.pk-free .pk-pay,.pk-free .pk-go{grid-column:1/-1}}
/* Loja › Diamantes (06/10, dono: "PIX e USDC um embaixo do outro, tirar a moeda; no celular está horrível"): cartão compacto,
arte menor, quantidade e os dois botões empilhados com o preço de cada um. */
.pk-cards{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.lj2 .pk-card{gap:8px;padding:12px 10px 10px}
.pk-card .pk-art{aspect-ratio:auto;height:92px}
.pk-card .pk-art img{width:auto;height:72px}
.pk-card .pk-h{font-size:18px;text-align:center;line-height:1.1}.pk-card .pk-h span{display:block;font-size:12px;font-weight:600;color:#aebbd0;letter-spacing:.5px;text-transform:uppercase}
.pk-btns{width:100%;display:flex;flex-direction:column;gap:6px}
.pk-b{width:100%;min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 12px;text-transform:none}
.pk-b b{font-size:13px;letter-spacing:.6px}.pk-b span{font-size:15px;font-weight:800}
.pk-b:disabled{justify-content:center}
.pk-free .pk-btns{min-width:180px}
.pkf-p{display:none}
.starter .st-buy .pk-btns{min-width:200px}
.hf.app .pk-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hf.app .lj2 .pk-card{padding:8px 7px 7px;gap:6px}
.hf.app .pk-card .pk-art{height:64px}.hf.app .pk-card .pk-art img{height:50px}
.hf.app .pk-card .pk-h{font-size:16px}.hf.app .pk-card .pk-h span{font-size:10.5px}
.hf.app .pk-b{min-height:36px;padding:0 9px}.hf.app .pk-b b{font-size:12px}.hf.app .pk-b span{font-size:13.5px}
.hf.app .pk-card .ribbon{font-size:10px}.hf.app .gem-tag{font-size:10px;max-width:92%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf.app .pk-free .pk-btns{grid-column:1/-1;min-width:0}
.hf.app .starter .st-buy .pk-btns{min-width:0;width:100%}
.starter .st-buy{justify-content:flex-end}
.pkf-t small em{display:block;margin-top:3px;font-style:normal;color:#ffd36a}
/* PIX de quem está fora do Brasil: embaixo e meio apagado (o toque explica). */
.pk-b.off{opacity:.42;filter:saturate(.35);box-shadow:none}
.pk-b.off:hover{opacity:.55}
/* PC: os 4 pacotes numa linha só; cartão limpo (sem a moldura dupla). */
.hf:not(.app) .pk-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.lj2 .pk-card{border-radius:14px;box-shadow:inset 0 0 0 1px #34465f,0 6px 16px rgba(0,0,0,.25)}
.lj2 .pk-card.best{box-shadow:inset 0 0 0 2px #ffcf4a,0 0 16px rgba(255,190,60,.3)}
.lj2 .pk-card.gem-pick{box-shadow:inset 0 0 0 2px #7ff6ff,0 0 18px rgba(127,246,255,.45)}
.lj2 .pk-card .pk-art{border-radius:10px}
/* Quantidade livre no PC: texto | quantidade | botões. No celular o banner "Tesouros do Reino" sai (os pacotes sobem). */
.pk-free{grid-template-columns:minmax(0,1fr) auto minmax(200px,250px)}
.pk-free .pk-btns{min-width:0}
.hf.app .pk-free{grid-template-columns:minmax(0,1fr)}.hf.app .pkf-q{justify-content:center}
.hf.app .pk-banner{display:none}
@media (max-width:900px){.pk-free{grid-template-columns:minmax(0,1fr)}.pkf-q{justify-content:center}}
/* Celular (06/10): na cidade a pílula da fase não mostra a barra vazia; a versão do jogo fica só em Config. (não cobre as
habilidades). */
.domchip.safe .dbar,[data-k="domchip"].safe .dbar{display:none}
.hf.app .hf-ver{display:none}
/* Aba VIP (06/10, refeita): topo, vantagens em 2 colunas e planos em linhas, no PC e no celular. */
.vx{display:flex;flex-direction:column;gap:10px}
.vx-hero{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,rgba(255,207,74,.18),rgba(14,20,36,.95) 60%);box-shadow:inset 0 0 0 1px rgba(255,207,74,.5)}
.vx-hero>img{width:52px;height:52px;flex:none;image-rendering:pixelated;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.vx-ht b{display:block;font-family:"HF Title","Cinzel",serif;font-size:21px;color:#ffd36a;letter-spacing:.5px}.vx-ht small{display:block;font-size:13px;color:#cfd8e6;line-height:1.35}
.vx-hero.on{box-shadow:inset 0 0 0 1px #6fd36a,0 0 14px rgba(111,211,106,.2)}.vx-hero.on .vx-ht b{color:#8ef58a}
.vx-perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.vx-pk{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 9px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #2c3c58;font-size:12.5px;color:#e8edf5;line-height:1.2}
.vx-pk img{width:24px;height:24px;flex:none;image-rendering:pixelated}
.vx-plans{display:flex;flex-direction:column;gap:8px}
.vx-plan{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:linear-gradient(180deg,rgba(30,42,66,.95),rgba(15,21,36,.95));box-shadow:inset 0 0 0 1px #34465f}
.vx-plan.best{box-shadow:inset 0 0 0 2px #ffcf4a,0 0 14px rgba(255,190,60,.25)}
.vx-ic{width:40px;height:40px;image-rendering:pixelated}
.vx-pt b{display:block;font-size:17px;color:#fff}.vx-pt small{display:block;font-size:12.5px;color:#aebbd0}.vx-pt em{font-style:normal;color:#7dffb0;font-weight:800}
.vx-buy{min-width:118px;height:40px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:16px;padding:0 12px}
.vx-buy img{width:18px;height:18px}.vx-buy .was{font-size:12px;opacity:.7;margin-right:2px}
/* 06/10 (renovação do VIP com desconto): o preço cheio riscado sumia no botão dourado; agora legível nos dois botões */
.vx-buy .was{opacity:1;font-size:12.5px;font-weight:700;color:#5a3a08;text-decoration-color:#c0261c}.vx-buy.blue .was{color:#d3e0f5;text-decoration-color:#ff8080}
.vx-tag{position:absolute;top:-8px;right:12px;padding:2px 8px;border-radius:6px;background:#ffcf4a;color:#2a1a08;font-size:11px;font-weight:800}
.vx-note{margin:0;font-size:12.5px;color:#9fb0c8}
.vx .vip-fd{margin:0}
.hf.app .vx-perks{grid-template-columns:repeat(2,minmax(0,1fr))}
.vx-renew{display:inline-block;margin-top:7px;padding:4px 10px;border-radius:999px;background:linear-gradient(90deg,rgba(255,120,60,.32),rgba(255,207,74,.22));box-shadow:inset 0 0 0 1px rgba(255,180,90,.75);color:#ffe7a6;font-size:13px;font-weight:800;line-height:1.25}
.vx-hero.renew{box-shadow:inset 0 0 0 1px rgba(255,190,90,.85),0 0 16px rgba(255,170,60,.2)}
.hf.app .vx-renew{font-size:12.5px;padding:3px 9px}
.hf.app .vx-hero{padding:10px 12px}.hf.app .vx-hero>img{width:44px;height:44px}.hf.app .vx-ht b{font-size:19px}.hf.app .vx-ht small{font-size:12.5px}
.hf.app .vx-plan{grid-template-columns:36px minmax(0,1fr) auto;gap:8px;padding:9px 10px}.hf.app .vx-ic{width:34px;height:34px}
.hf.app .vx-buy{min-width:104px;height:38px;font-size:15px}
/* ---------- Status do jogador (06/10, dono: "ocupada, idle, trabalhando, afk... assim as pessoas já sabem que não está lá
pra conversar"). Bolinha com a cor do status: no chat, nos amigos, no "Para:" do Privado e no perfil. ---------- */
.stdot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:1px;background:#6b7385}
:is(.dot,.stdot).st-disponivel{background:#57d36a!important;box-shadow:0 0 5px rgba(87,211,106,.7)!important}
:is(.dot,.stdot).st-farmando{background:#b07cff!important;box-shadow:0 0 5px rgba(176,124,255,.7)!important}
:is(.dot,.stdot).st-trabalhando{background:#4aa3ff!important;box-shadow:0 0 5px rgba(74,163,255,.7)!important}
:is(.dot,.stdot).st-ocupado{background:#ff5a4e!important;box-shadow:0 0 5px rgba(255,90,78,.7)!important}
:is(.dot,.stdot).st-ausente{background:#f5c542!important;box-shadow:0 0 5px rgba(245,197,66,.6)!important}
.stdot.st-off{background:#6b7385}
.stl{font-weight:700}.stl.st-disponivel{color:#57d36a}.stl.st-farmando{color:#c9a4ff}.stl.st-trabalhando{color:#7fbcff}.stl.st-ocupado{color:#ff7a70}.stl.st-ausente{color:#f5c542}
.clog b.who .stdot{width:7px;height:7px;margin-right:3px}
/* bolinha ao lado do meu nome no topo (toque = escolher) */
.mystat{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;margin:0 2px 0 -1px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.mystat .stdot{width:9px;height:9px;margin:0;box-shadow:0 0 0 2px #0b0806}
.mystat:hover .stdot{transform:scale(1.2)}
/* botão no cabeçalho do chat: no PC só a bolinha (falta espaço); no celular, com o nome */
.p-chat .head .chat-st{display:inline-flex;align-items:center;gap:3px;width:auto;margin-left:auto;margin-right:4px;padding:0 6px;font-size:11px}
.p-chat .head .chat-st+.chat-lang{margin-left:0}
.p-chat .head .chat-st .stdot{margin:0}
.p-chat .head .chat-st b{display:none;font-size:11px;color:#e8e2d0;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-chat .head .chat-st .car{font-size:9px;color:#c9b27a}
.hf.app .p-chat .head .chat-st b{display:inline}
.hf.app .chat-st+.chat-lang{margin-left:0}
/* lista para escolher */
.stpick{position:absolute;z-index:100;width:268px;max-width:calc(100% - 12px);padding:8px;border-radius:12px;background:#0d1524;box-shadow:0 0 0 1px rgba(214,170,90,.55),0 10px 26px rgba(0,0,0,.65);display:flex;flex-direction:column;gap:3px}
.stpick[hidden]{display:none}
.stp-h{font-size:12px;font-weight:800;color:#f2c14e;padding:2px 4px 4px;letter-spacing:.3px}
.stp-o{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;border:0;border-radius:8px;background:none;color:#e8e2d0;font:inherit;text-align:left;cursor:pointer}
.stp-o .stdot{width:11px;height:11px;margin:0}
.stp-o span{display:flex;flex-direction:column;min-width:0}
.stp-o b{font-size:13px}.stp-o small{font-size:11px;color:#9aa4b2;line-height:1.25}
.stp-o:hover{background:#17233a}.stp-o.on{background:#1c2d4c;box-shadow:inset 0 0 0 1px rgba(127,178,255,.5)}
.stp-n{margin:4px 4px 0;font-size:10.5px;line-height:1.35;color:#8f99a8}
/* aviso no Privado ao escrever para quem não está para conversa */
.cst-n{flex-basis:100%;display:flex;align-items:center;flex-wrap:wrap;gap:3px;padding:5px 8px;border-radius:7px;background:rgba(245,197,66,.08);border:1px solid rgba(245,197,66,.25);font-size:11.5px;color:#e6dcc0;line-height:1.3}
.cst-n .stdot{margin:0 2px 0 0}
.pf-st{margin-left:4px;font-size:11px}
/* Relatório offline (06/10): poções que valeram com o jogo fechado */
.ofl-pot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 8px}
.ofl-pk{display:inline-flex;align-items:center;gap:4px}
.ofl-pk img{width:20px;height:20px}
/* ---------- Eventos › Chefes mundiais (06/10, dono: "colocar quando abre todos os boss mundiais... o boss, o que ganha em
cada um, quantos minutos faltam, o level e tudo mais igual os balões"): um cartão por chefe ---------- */
.ev2 .wbc-grid{grid-template-columns:minmax(0,1fr);gap:12px}
.wbc{border-radius:12px;overflow:hidden;background:linear-gradient(180deg,rgba(30,42,66,.95),rgba(15,21,36,.95));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ec,#34465f) 55%,#2a3a56)}
.wbc.is-open{box-shadow:inset 0 0 0 2px var(--ec),0 0 16px color-mix(in srgb,var(--ec) 35%,transparent)}
.wbc.is-off{opacity:.78}
.wbc-h{display:flex;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(135deg,color-mix(in srgb,var(--ec,#4fc3ff) 30%,#141d30),#141d30 75%)}
.wbc-h>img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;flex:none}
.wbc-ht{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.wbc-ht .evc-n{font-size:17px}
.wbc-when{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px;padding:6px 10px;border-radius:10px;background:rgba(5,10,20,.7);border:1px solid #2b3b5e;cursor:help;text-align:right}
.wbc-t{font-size:16px;color:#ffe7a6;white-space:nowrap}
.wbc-t.live{display:inline-flex;align-items:center;gap:6px;color:#7dff9a}.wbc-t.live i{width:8px;height:8px;border-radius:50%;background:#7dff9a;box-shadow:0 0 8px #7dff9a;animation:pdot 1.4s ease-in-out infinite}
.wbc-t.off{font-size:13px;color:#9aa4b2}
.wbc-when small{font-size:11px;color:#b9c3cf}
.wbc-b{padding:10px 14px 12px;display:flex;flex-direction:column;gap:8px}
.wbc-k{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#c9b27a}
.wbc-c{cursor:help}.wbc-c img{width:18px;height:18px;image-rendering:pixelated}.wbc-c b{color:#ffe7a6}
.wbc-req .wbc-c{background:#0a1222}
.wbc-next{margin:0;font-size:12px;color:#b9c3cf}.wbc-next b{color:#e8edf5}
.wbc .ev-remind,.wbc .ev-go{margin-top:2px}
.ev2.app .wbc-h>img{width:52px;height:52px}
.ev2.app .wbc-h{padding:8px 10px;gap:8px}
.ev2.app .wbc-ht .evc-n{font-size:15px}
.ev2.app .wbc-b{padding:8px 10px 10px}
.ev2.app .wbc-c{font-size:11.5px;padding:3px 8px}
/* no celular, numa coluna só, o "Próximo" não fica grudado em cima (cobria a lista dos chefes ao rolar) */
.ev2.app .ig-eq.ev2-left,.mk2.ev2.app .ig-eq{position:static}
/* ---------- Celular: magias menores em arco (06/10, ideia de jogador com print de outro jogo: "os botões da magia são pequenos;
evitando de poluir a tela"). O ataque e as 3 magias num quarto de círculo no canto direito; AUTO, Poder e poções menores
no canto esquerdo. Deitado, o mesmo arco (sem encolher tudo com scale) e o zoom acima dele (antes ficava por cima da magia 3). */
.hf.app.is-portrait .actions{height:150px}
.hf.app.is-portrait .skill:nth-child(1){right:0;bottom:0;width:78px;height:78px}
.hf.app.is-portrait .skill:nth-child(1) img{width:78px;height:78px}
.hf.app.is-portrait .skill:nth-child(2){right:86px;bottom:14px;width:50px;height:50px}
.hf.app.is-portrait .skill:nth-child(3){right:65px;bottom:65px;width:50px;height:50px}
.hf.app.is-portrait .skill:nth-child(4){right:14px;bottom:86px;width:50px;height:50px}
.hf.app.is-portrait .skill:nth-child(n+2) img{width:50px;height:50px}
.hf.app.is-portrait .auto{width:56px;height:64px}
.hf.app.is-portrait .auto img{width:56px;height:64px}
.hf.app.is-portrait .auto span{margin-top:34px;font-size:11px}
.hf.app.is-portrait .powr{left:64px;bottom:4px;width:48px;height:48px}
.hf.app.is-portrait .powr img{width:28px;height:28px}
.hf.app.is-portrait .quick{bottom:72px;width:44px;height:44px}
.hf.app.is-portrait .quick.mana{left:52px;bottom:72px}
.hf.app.is-portrait .quick img{width:24px;height:24px}
.hf.app.is-landscape .actions{transform:none;width:280px;height:122px}
.hf.app.is-landscape .skill:nth-child(1){right:0;bottom:0;width:70px;height:70px}
.hf.app.is-landscape .skill:nth-child(1) img{width:70px;height:70px}
.hf.app.is-landscape .skill:nth-child(2){right:73px;bottom:13px;width:44px;height:44px}
.hf.app.is-landscape .skill:nth-child(3){right:55px;bottom:55px;width:44px;height:44px}
.hf.app.is-landscape .skill:nth-child(4){right:13px;bottom:73px;width:44px;height:44px}
.hf.app.is-landscape .skill:nth-child(n+2) img{width:44px;height:44px}
.hf.app.is-landscape .auto{right:126px;bottom:0;width:50px;height:58px}
.hf.app.is-landscape .auto img{width:50px;height:58px}
.hf.app.is-landscape .auto span{margin-top:31px;font-size:10px}
.hf.app.is-landscape .powr{right:128px;bottom:66px;width:44px;height:44px}
.hf.app.is-landscape .powr img{width:26px;height:26px}
.hf.app.is-landscape .quick{right:184px;bottom:4px;width:40px;height:40px}
.hf.app.is-landscape .quick.mana{right:230px;bottom:4px}
.hf.app.is-landscape .quick img{width:22px;height:22px}
.hf.app.is-landscape .zoomctl{top:calc(var(--st) + 142px)}
.hf.app.is-landscape .zoomctl button{height:28px;font-size:20px}
.hf.app.is-landscape .zoomctl .zpct{display:none}
/* ---------- Mapa do mundo (06/10, prévia): o mundo inclinado em 3D (perspectiva do CSS), nuvens, água, névoa e partículas ---------- */
.win-mundo{width:1240px;height:780px}
.win-mundo .win-body{position:relative;overflow:hidden;padding:0;border-radius:6px}
.wm{position:absolute;inset:0;overflow:hidden;background:#122d4b;touch-action:none;user-select:none;-webkit-user-select:none}
.wm-wait{display:grid;place-items:center}
.wm-stage{position:absolute;inset:0;overflow:hidden;cursor:grab}
.wm-stage:active{cursor:grabbing}
.wm-plane{position:absolute;left:50%;top:50%;width:1920px;height:1200px;transform-origin:0 0;will-change:transform;--pk:1}
.wm-plane.fly{transition:transform .7s cubic-bezier(.22,.8,.2,1)}
/* 10/10 (jogador: "o mapa no celular fica lento pra arrastar"): arrastando, as animações param (a imagem só anda); no celular
as nuvens e as partículas ficam paradas e os chefes sem sombra brilhante, que é o que mais pesa no desenho. */
.wm.dragging *{animation-play-state:paused!important}
.hf.app .wm-cloud,.hf.app .wm-fx b{animation:none!important}
.hf.app .wm-pin.on .wm-boss{filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.wm-img{position:absolute;left:0;top:0;width:1920px;height:1200px;image-rendering:pixelated;pointer-events:none;-webkit-user-drag:none;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}
.wm-fog{position:absolute;left:0;top:0;width:1920px;height:1200px;image-rendering:pixelated;pointer-events:none}
.wm-cloud{position:absolute;z-index:1;left:0;width:360px;height:144px;pointer-events:none;animation:wm-drift var(--t) linear var(--d) infinite}
.wm-cloud{background-size:100% 100%;image-rendering:pixelated;opacity:.55}
.wm-cloud.c2{width:300px;height:120px}.wm-cloud.c3{width:420px;height:150px}
.wm-ring{position:absolute;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;pointer-events:none;border:4px solid rgba(125,255,154,.95);box-shadow:0 0 22px rgba(125,255,154,.7),inset 0 0 18px rgba(125,255,154,.45);animation:wm-ring 2.2s ease-out infinite}
.wm-ring.sel-r{border-color:rgba(255,214,90,.95);box-shadow:0 0 22px rgba(255,200,60,.7),inset 0 0 18px rgba(255,200,60,.45)}
.wm-ring[hidden]{display:none}
.wm-fxs,.wm-pins{position:absolute;left:0;top:0;width:0;height:0}
.wm-pins{z-index:2}
.wm-pins.still .wm-fig{animation:none}
.wm-pops.still .wm-pop{animation:none}
.wm-fx{position:absolute;width:0;height:0;pointer-events:none}
.wm-fx b{position:absolute;left:var(--x);bottom:0;width:5px;height:5px;opacity:0;animation:wm-rise var(--t) linear var(--d) infinite}
.fx-fire b{background:#ffc04d;box-shadow:0 0 8px 2px #ff6a00}
.fx-ember b{width:4px;height:4px;background:#ff8a3a;box-shadow:0 0 6px #ff4a00;animation-duration:calc(var(--t) * 1.4)}
.fx-snow b{width:5px;height:5px;background:#fff;box-shadow:0 0 4px #cfe9ff;animation-name:wm-fall}
.fx-soul b{width:7px;height:7px;border-radius:50%;background:#a6ffb0;box-shadow:0 0 10px 3px rgba(140,255,170,.7);animation-name:wm-wisp;animation-duration:calc(var(--t) * 1.6)}
.fx-soul b:nth-child(2n){background:#d2a6ff;box-shadow:0 0 10px 3px rgba(190,140,255,.7)}
.fx-gem b{width:6px;height:6px;bottom:calc(var(--x) * .4 + 30px);background:#c9fbff;box-shadow:0 0 10px 3px rgba(120,230,255,.85);animation-name:wm-twinkle}
.fx-fly b{width:4px;height:4px;bottom:calc(var(--x) * .3 + 24px);background:#efff8a;box-shadow:0 0 8px 2px rgba(220,255,120,.8);animation-name:wm-flyy;animation-duration:calc(var(--t) * 1.5)}
.fx-bub b{width:8px;height:8px;border-radius:50%;border:2px solid rgba(220,255,240,.85);background:transparent;animation-name:wm-bub}
.fx-dust b{width:4px;height:4px;background:rgba(255,226,160,.85);animation-name:wm-dust}
.fx-smoke b{width:14px;height:14px;border-radius:50%;background:rgba(230,230,235,.55);filter:blur(1px);animation-name:wm-smoke;animation-duration:calc(var(--t) * 1.3)}
.wm-pin{position:absolute;width:0;height:0;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;pointer-events:none;transform:scale(var(--pk));transform-origin:0 0}
.wm-fig{position:absolute;left:-36px;bottom:0;width:72px;height:72px;pointer-events:auto;cursor:pointer;animation:wm-pop .45s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * 25ms + .05s) both}
.wm-sh{position:absolute;left:12px;bottom:-5px;width:48px;height:14px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.55),rgba(0,0,0,0) 70%)}
.wm-boss{position:absolute;left:0;bottom:0;width:72px;height:72px;image-rendering:pixelated;-webkit-user-drag:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 1px #000);transform-origin:50% 100%;animation:wm-hop 2.4s ease-in-out calc(var(--i) * -.37s) infinite}
.wm-pin.city .wm-boss{width:64px;height:64px;left:4px;animation:none}
.wm-pin.lk .wm-boss{filter:brightness(0) drop-shadow(0 0 2px rgba(150,170,210,.55));opacity:.82;animation-duration:4s}
.wm-pin.k-pvp .wm-sh{background:radial-gradient(ellipse,rgba(255,60,40,.7),rgba(255,60,40,0) 70%)}
.wm-n{position:absolute;left:-2px;bottom:-4px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:12px;font-size:13px;font-weight:800;color:#2a1906;background:linear-gradient(#ffe08a,#c9902e);border:2px solid #2a1906;box-shadow:0 2px 0 rgba(0,0,0,.45)}
.wm-pin.k-pvp .wm-n{background:linear-gradient(#ff9a86,#c4302a);color:#fff}
.wm-pin.lk .wm-n{background:linear-gradient(#b9c0cc,#6c7484);color:#1a1f28}
.wm-lk{position:absolute;right:2px;bottom:-4px;width:22px;height:22px;image-rendering:pixelated;filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.wm-st{position:absolute;right:-6px;bottom:-4px;padding:2px 6px;border-radius:10px;font-style:normal;font-size:12px;font-weight:800;color:#ffe08a;background:#2a1906;border:1px solid #c9902e}
.wm-me{position:absolute;left:14px;bottom:70px;width:44px;height:44px;border-radius:50%;overflow:hidden;border:3px solid #7dff9a;background:#14263a;box-shadow:0 0 14px rgba(125,255,154,.85);animation:wm-bob 1.4s ease-in-out infinite}
.wm-me::after{content:"";position:absolute}
.wm-me img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.wm-lbl{position:absolute;left:0;top:10px;transform:translateX(-50%) scale(.85);opacity:0;white-space:nowrap;padding:4px 10px;border-radius:999px;font-family:"HF Title","Alegreya SC",Georgia,serif;font-size:14px;font-weight:800;letter-spacing:.03em;color:#ffe9b0;background:rgba(14,10,6,.86);border:1px solid rgba(201,154,74,.8);text-shadow:0 1px 0 #000;box-shadow:0 3px 10px rgba(0,0,0,.45);transition:opacity .18s,transform .18s;pointer-events:none}
.wm-lbl small{font-size:11px;color:#ffb38a;font-weight:700}
.wm.near .wm-lbl,.wm-pin.on .wm-lbl,.wm-pin.here .wm-lbl,.wm-pin:hover .wm-lbl,.wm-fig:hover+.wm-lbl{opacity:1;transform:translateX(-50%) scale(1)}
.wm-pin.lk .wm-lbl{color:#c9d2e0;border-color:#5a6478}
.wm-pin.here .wm-lbl{border-color:#7dff9a;color:#d6ffe0}
.wm-pin.on .wm-lbl{border-color:#ffd65a;color:#fff2c4;box-shadow:0 0 14px rgba(255,214,90,.55)}
.wm-pin.on .wm-boss{animation:wm-jump .9s cubic-bezier(.3,1.4,.5,1) infinite;filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(255,214,90,.9))}
.wm-pin.lk.on .wm-boss{filter:brightness(0) drop-shadow(0 0 8px rgba(255,214,90,.9))}
.wm-fig:hover .wm-boss{animation:wm-wiggle .5s ease-in-out infinite}
/* Destaque no Mapa do mundo (09/10): onde você está, Alvorada, o escolhido e o debaixo do mouse ficam claros; os outros chefes
escurecem um pouco, como a névoa por cima das regiões (World.fog). Alvorada ganha o nome sempre à vista. */
.wm-pin:not(.here):not(.city):not(.on):not(.hov):not(.lk) .wm-boss{filter:brightness(.62) drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.wm-pin.hov .wm-lbl,.wm-pin.city .wm-lbl{opacity:1;transform:translateX(-50%) scale(1)}
.wm-pin.city .wm-lbl{border-color:#ffd66b;color:#ffe9a8}
.hf.app .wm-fig{left:-30px;width:60px;height:60px}.hf.app .wm-boss{width:60px;height:60px}.hf.app .wm-pin.city .wm-boss{width:54px;height:54px;left:3px}
.hf.app .wm-sh{left:8px;width:44px}.hf.app .wm-me{left:10px;bottom:58px;width:40px;height:40px}
@keyframes wm-pop{0%{transform:translateY(-40px) scale(0);opacity:0}100%{transform:none;opacity:1}}
@keyframes wm-hop{0%,100%{transform:translateY(0) scaleY(1)}45%{transform:translateY(-5px) scaleY(1.03)}55%{transform:translateY(-5px)}90%{transform:translateY(0) scaleY(.96)}}
@keyframes wm-jump{0%,100%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-16px) scale(.94,1.08)}60%{transform:translateY(0) scale(1.08,.92)}75%{transform:translateY(-3px)}}
@keyframes wm-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.wm-vig{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(rgba(8,16,30,.7),rgba(8,16,30,0) 12%),radial-gradient(ellipse at 50% 55%,transparent 66%,rgba(3,8,16,.45) 100%)}
.wm-top{position:absolute;z-index:3;left:14px;top:12px;display:flex;flex-direction:column;gap:6px;pointer-events:none;max-width:calc(100% - 340px)}
.wm-sum{display:flex;gap:8px}
.wm-sum>div{display:flex;flex-direction:column;padding:6px 12px;border-radius:8px;background:rgba(10,16,28,.82);border:1px solid #3a4a66}
.wm-sum b{font-size:18px;color:#ffe08a}.wm-sum small{font-size:11px;color:#b9c6d8}
.wm-hint{margin:0;font-size:12px;color:#c9d6e8;text-shadow:0 1px 2px #000}
.wm-zoom{position:absolute;z-index:3;left:14px;bottom:14px;display:flex;flex-direction:column;gap:6px}
.wm-zoom .mini{width:38px;height:38px;font-size:20px;font-weight:800}
.wm-why{margin:0;font-size:13px;color:#ffb38a}
.fz-tag.pvp{background:#5a1d18;border-color:#ff5a4a;color:#ffd2c8}
.hf.app .win-mundo .win-body{border-radius:0}
.hf.app .wm-top{max-width:calc(100% - 28px)}.hf.app .wm-hint{display:none}
.hf.app .wm-zoom{left:auto;right:12px;bottom:auto;top:12px}
@keyframes wm-drift{from{transform:translateX(-420px)}to{transform:translateX(2340px)}}
@keyframes wm-ring{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes wm-rise{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-110px);opacity:0}}
@keyframes wm-fall{0%{transform:translate(0,-130px);opacity:0}15%{opacity:1}100%{transform:translate(18px,0);opacity:0}}
@keyframes wm-wisp{0%{transform:translate(0,0);opacity:0}25%{opacity:.9}50%{transform:translate(14px,-50px)}75%{opacity:.7}100%{transform:translate(-10px,-100px);opacity:0}}
@keyframes wm-twinkle{0%,100%{transform:scale(0) rotate(0);opacity:0}50%{transform:scale(1.4) rotate(45deg);opacity:1}}
@keyframes wm-flyy{0%{transform:translate(0,0);opacity:0}20%{opacity:1}40%{opacity:.2}60%{transform:translate(22px,-18px);opacity:1}100%{transform:translate(-8px,-30px);opacity:0}}
@keyframes wm-bub{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1}90%{transform:translateY(-60px) scale(1);opacity:.9}100%{transform:translateY(-64px) scale(1.4);opacity:0}}
@keyframes wm-dust{0%{transform:translate(-30px,0);opacity:0}20%{opacity:.9}100%{transform:translate(60px,-14px);opacity:0}}
@keyframes wm-smoke{0%{transform:translateY(0) scale(.5);opacity:0}20%{opacity:.6}100%{transform:translate(10px,-90px) scale(2.2);opacity:0}}
@keyframes wm-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes wm-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wm *{animation:none!important}.wm-plane.fly{transition:none}}
/* ---------- NPCs de Alvorada (06/10): lista (janela Alvorada), conversa e o "Voltar para a caçada" ---------- */
.win-cidade{width:860px;height:640px}
.cn{display:flex;flex-direction:column;gap:10px;padding:8px}
.cn-note{margin:0}
/* 10/10: Nova Alvorada (prévia, só admin) no topo da janela Alvorada. */
.cn-nova{align-self:flex-start;display:inline-flex;align-items:center;gap:8px}
.cn-nova img{width:22px;height:22px;object-fit:contain}
.cn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.cn-card{position:relative;display:flex;align-items:center;gap:10px;padding:10px;text-align:left;border-radius:12px;border:1px solid #3a4a66;background:linear-gradient(#18243a,#0f1726);color:inherit;font:inherit;cursor:pointer;transition:transform .15s,border-color .15s}
.cn-card:hover{transform:translateY(-2px);border-color:#c99a4a}
.cn-card.has{border-color:#ffd23a;box-shadow:0 0 14px rgba(255,210,58,.25)}
.cn-face{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;overflow:hidden;background:radial-gradient(#2e4466,#142036);border:2px solid #c99a4a}
.cn-face img{width:64px;height:64px;object-fit:cover;image-rendering:pixelated}
.cn-mark{position:absolute;left:58px;top:6px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-style:normal;font-weight:900;color:#2a1906;background:#ffd23a;box-shadow:0 0 10px rgba(255,210,58,.8);animation:cn-bounce 1s ease-in-out infinite}
.cn-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cn-b b{font-size:15px;color:#ffe9b0}
.cn-b small{font-size:12px;color:#b9c6d8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-w{display:flex;align-items:center;gap:4px}.cn-w img{width:16px;height:16px;image-rendering:pixelated}
.cn-go{flex:none;pointer-events:none}
.npc-talk{display:flex;flex-direction:column;gap:14px;padding:12px}
.npc-who{display:flex;align-items:center;gap:14px}
.npc-face{width:96px;height:96px;border-radius:50%;object-fit:cover;image-rendering:pixelated;border:3px solid #c99a4a;background:radial-gradient(#2e4466,#142036)}
.npc-hi{margin:6px 0 0;font-size:15px;line-height:1.4;color:#e8edf5;font-style:italic}
.npc-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.npc-opt{position:relative;display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;border:1px solid #c99a4a;background:linear-gradient(#3b2a1a,#22180e);color:#ffe9b0;font:inherit;font-weight:800;font-size:15px;cursor:pointer}
.npc-opt:hover{filter:brightness(1.15)}
.npc-opt img{width:32px;height:32px;image-rendering:pixelated}
.npc-opt .badge{position:absolute;right:8px;top:8px}
.hf:not(.app) .veil[data-win="npc"] .win{width:620px;height:auto;max-height:90%}
.hf.app .cn-grid{grid-template-columns:1fr}
@keyframes cn-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes cn-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translateX(-50%)}}
/* Celular, mais enxuto (06/10 15h, dono: "aqui podemos diminuir um pouco, já que é idle, para ficar a tela mais limpa"): ataque,
magias, AUTO, Poder e poções ~20% menores, no mesmo arco e nos mesmos cantos. */
.hf.app.is-portrait .actions{height:122px}
.hf.app.is-portrait .skill:nth-child(1){width:62px;height:62px}
.hf.app.is-portrait .skill:nth-child(1) img{width:62px;height:62px}
.hf.app.is-portrait .skill:nth-child(2){right:69px;bottom:11px;width:40px;height:40px}
.hf.app.is-portrait .skill:nth-child(3){right:52px;bottom:52px;width:40px;height:40px}
.hf.app.is-portrait .skill:nth-child(4){right:11px;bottom:69px;width:40px;height:40px}
.hf.app.is-portrait .skill:nth-child(n+2) img{width:40px;height:40px}
.hf.app.is-portrait .auto{width:46px;height:52px}
.hf.app.is-portrait .auto img{width:46px;height:52px}
.hf.app.is-portrait .auto span{margin-top:27px;font-size:10px}
.hf.app.is-portrait .powr{left:52px;width:40px;height:40px}
.hf.app.is-portrait .powr img{width:23px;height:23px}
.hf.app.is-portrait .quick{bottom:60px;width:36px;height:36px;border-width:7px;border-image-width:7px}
.hf.app.is-portrait .quick.mana{left:42px;bottom:60px}
.hf.app.is-portrait .quick img{width:20px;height:20px}
.hf.app.is-landscape .actions{width:236px;height:100px}
.hf.app.is-landscape .skill:nth-child(1){width:58px;height:58px}
.hf.app.is-landscape .skill:nth-child(1) img{width:58px;height:58px}
.hf.app.is-landscape .skill:nth-child(2){right:60px;bottom:11px;width:36px;height:36px}
.hf.app.is-landscape .skill:nth-child(3){right:45px;bottom:45px;width:36px;height:36px}
.hf.app.is-landscape .skill:nth-child(4){right:11px;bottom:60px;width:36px;height:36px}
.hf.app.is-landscape .skill:nth-child(n+2) img{width:36px;height:36px}
.hf.app.is-landscape .auto{right:104px;width:42px;height:48px}
.hf.app.is-landscape .auto img{width:42px;height:48px}
.hf.app.is-landscape .auto span{margin-top:25px;font-size:9px}
.hf.app.is-landscape .powr{right:106px;bottom:54px;width:36px;height:36px}
.hf.app.is-landscape .powr img{width:21px;height:21px}
.hf.app.is-landscape .quick{right:152px;width:34px;height:34px;border-width:7px;border-image-width:7px}
.hf.app.is-landscape .quick.mana{right:190px}
.hf.app.is-landscape .quick img{width:18px;height:18px}
.hf.app.is-landscape .zoomctl{top:calc(var(--st) + 120px)}
.hf.app .skill .k:not(.wide){width:16px;height:16px;font-size:10px;line-height:13px;right:-2px;bottom:-2px}
.hf.app .powr .key{width:16px;height:16px;font-size:10px;line-height:13px;right:calc(-2px - var(--bw));bottom:calc(-2px - var(--bw))}
/* Barra de ações do PC (06/10 15:41, dono: "diminuir um pouco os ícones e deixar todos alinhados horizontalmente"): ataque,
magias, Poder (R), AUTO e poções do mesmo tamanho (56 px; eram de 58 a 79) e todos na mesma linha. O AUTO usa a arte
quadrada, com o nome numa plaquinha embaixo (como o "Espaço" do ataque). */
.hf:not(.app) .actions,.hf:not(.app) .actions .skills{align-items:center;gap:7px}
.hf:not(.app) .actions .skill,.hf:not(.app) .actions .skill img,.hf:not(.app) .actions .powr,.hf:not(.app) .actions .quick,.hf:not(.app) .actions .auto,.hf:not(.app) .actions .auto img{width:56px;height:56px}
.hf:not(.app) .actions .auto span{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);margin:0;height:18px;padding:0 7px;border-radius:9px;background:#101826;box-shadow:0 0 0 1px #c9a15a;font-size:10px;line-height:18px;letter-spacing:.05em;color:#ffe7a6}
.hf:not(.app) .actions .powr img{width:34px;height:34px}
.hf:not(.app) .actions .quick img{width:30px;height:30px}
/* Mapa do mundo, balão da região (06/10 15:52, dono: "clica no ícone, aparece o que ganha, um balão igual já temos, e o botão
de entrar"): no PC fica ao lado do chefe, dentro do mapa (--iz desfaz o zoom: o balão tem sempre o mesmo tamanho na tela);
no celular, embaixo. Tocar de novo no chefe entra. */
.wm-pops{position:absolute;left:0;top:0;width:0;height:0;z-index:3}
.wm-pop{position:absolute;width:310px;transform-origin:0 0;transform:scale(var(--iz,1)) translate(52px,var(--dy,-45%));pointer-events:auto;cursor:default;animation:wm-pin .18s ease-out}
.wm-pop.l{transform:scale(var(--iz,1)) translate(calc(-100% - 52px),var(--dy,-45%))}
.wm-pi{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:rgba(12,18,30,.97);border:1px solid #c9a15a;box-shadow:0 12px 30px rgba(0,0,0,.55);max-height:min(560px,80vh);overflow:auto}
/* 09/10: cabeçalho e botão sempre à vista; o meio (regras, Amuleto, o que ganha) rola. --ph = altura livre do mapa (World.side). */
.wm-pop:not(.ev) .wm-pi{max-height:min(560px,80vh,var(--ph,560px));overflow:hidden}
.wm-pb{display:flex;flex-direction:column;gap:8px;min-height:0;flex:1 1 auto;overflow:auto;overscroll-behavior:contain}.wm-pb>*{flex:none}
.wm-pf{display:flex;flex-direction:column;gap:6px;flex:none;padding-top:2px}
.wm-pop.lk .wm-pi{border-color:#5a6478}.wm-pop.here .wm-pi{border-color:#7dff9a}
.wm-ph{display:flex;align-items:center;gap:10px}
.wm-ph>div{flex:1;min-width:0;display:flex;flex-direction:column}
.wm-ph .t-title{font-size:18px;line-height:1.15}
.wm-pth{position:relative;flex:none;width:56px;height:56px;border-radius:8px;background-size:cover;background-position:center;image-rendering:pixelated;border:1px solid #3a4a66}
.wm-pop.lk .wm-pth{filter:grayscale(.65) brightness(.6)}
.wm-pth b.num{position:absolute;left:-6px;top:-6px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:12px;background:linear-gradient(#ffe08a,#c9902e);color:#2a1906;font-size:12px;font-weight:800;border:2px solid #2a1906}
.wm-x{flex:none;align-self:flex-start;width:28px;height:28px;font-size:18px}
.wm-why{margin:0;font-size:13px;color:#ffb38a}
.wm-gs{display:flex;flex-direction:column;gap:5px;padding:8px 10px;border-radius:8px;background:rgba(255,214,90,.06);border:1px solid rgba(201,161,90,.35)}
.wm-gt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#ffd66b}
.wm-g{display:grid;grid-template-columns:20px 92px 1fr;align-items:center;gap:6px;font-size:12px}
.wm-g img{width:20px;height:20px;image-rendering:pixelated}
.wm-g span{color:#b9c6d8}.wm-g b{font-weight:700;color:#f1e6c8}.wm-g b span{color:inherit}
.wm-all{align-self:flex-start;font-size:12px}
.wm-dt{max-height:260px;overflow:auto}
.wm-pop .fz-mobs{margin:0;font-size:12px}
/* PvP no mapa do mundo (06/10): regras numa linha e a faixa de nível do que cai. */
.wm-pvr{margin:0;font-size:12px;line-height:1.35;color:#ffb3a6}
.wm-pvr .lnk{font-size:12px;padding:0;margin-left:2px}
.wm-pvn{margin:0;font-size:11.5px;line-height:1.3;color:#b9c6d8}
.wm-pop .buy{width:100%}
.wm-go{font-size:16px}
.wm-tip{text-align:center;font-size:11px;color:#9fb0c8;margin-top:-4px}
.hf.app .wm-pops{position:absolute;left:8px;right:8px;top:auto;bottom:8px;width:auto;height:auto;z-index:4}
.hf.app .wm-pop{position:relative;width:auto;transform:none}
.hf.app .wm-pi{max-height:52vh}
@keyframes wm-pin{from{opacity:0}to{opacity:1}}
/* "Você está aqui" (06/10 15:46, dono: "coloque mais destacado onde o herói está e escreva VOCÊ ESTÁ AQUI"): o rosto do herói
maior, com anel verde pulsando, e uma placa verde em cima, sempre visível. */
.wm-pin.here{z-index:5000!important}
.wm-pin.here .wm-me{left:8px;bottom:74px;width:56px;height:56px;border-width:3px;box-shadow:0 0 0 3px rgba(125,255,154,.35),0 0 18px rgba(125,255,154,.95)}
.wm-you{position:absolute;left:36px;bottom:136px;translate:-50% 0;white-space:nowrap;padding:4px 10px;border-radius:8px;font:800 13px/1.1 "HF Sans",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#062411;background:linear-gradient(#a8ffbe,#3fd56c);border:2px solid #062411;box-shadow:0 3px 0 rgba(0,0,0,.45),0 0 14px rgba(125,255,154,.8);animation:wm-bob 1.4s ease-in-out infinite;pointer-events:none}
.wm-you::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-6px;border:6px solid transparent;border-top-color:#062411;border-bottom:0}
.hf.app .wm-pin.here .wm-me{left:5px;bottom:62px;width:50px;height:50px}.hf.app .wm-you{left:30px;bottom:118px;font-size:12px}
/* Loja de volta na barra (06/10): um brilho dourado leve para chamar a atenção. */
.navbtn.nb-shop img{filter:drop-shadow(0 0 6px rgba(255,200,70,.75))}
.navbtn.nb-shop span{color:#ffd66b}
.hf.app .atab[data-open="loja"] span{color:#ffd66b}
/* Lista de Alvorada (06/10 15:48, dono: "deixar o que é cada NPC mais destacado"): o que o NPC faz numa plaquinha dourada com o
ícone (Loja, Mercado, Fazenda, Ranking…), logo abaixo do nome; o lugar fica menor, embaixo. */
.cn-what{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0}
.cn-what em{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 4px;border-radius:999px;font-style:normal;font-size:13px;font-weight:800;color:#2a1906;background:linear-gradient(#ffe08a,#d9a440);box-shadow:0 1px 0 rgba(0,0,0,.45);white-space:nowrap}
.cn-what em img{width:18px;height:18px;image-rendering:pixelated}
.cn-b small.cn-w{font-size:11px;color:#8fa0b8}
/* Parceria (06/10): os números do parceiro e a lista de quem veio pelo link (recebeu o VIP / VIP até). */
.pt-k{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.pt-k>div{display:flex;flex-direction:column;align-items:center;padding:10px 6px;border-radius:10px;background:rgba(255,214,90,.06);border:1px solid rgba(201,161,90,.35)}
.pt-k b{font-size:22px;color:#ffd66b}.pt-k small{font-size:11px;color:#b9c6d8;text-align:center}
.pt-tw{overflow:auto;max-height:100%;min-height:0}
.pt-t{width:100%;border-collapse:collapse;font-size:13px}
.pt-t th{position:sticky;top:0;background:#101a2b;text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#9fb0c8;padding:6px 8px}
.pt-t td{padding:7px 8px;border-top:1px solid #23314a}
.pt-st{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;color:#b9c6d8;background:#1b2638}
.pt-st.on{color:#062411;background:linear-gradient(#a8ffbe,#3fd56c)}
/* Etiquetas do item (06/10, dono: "[RARO][+12][BÔNUS] e quando passa o mouse mostra"): raridade na cor dela, +N dourado e
BÔNUS verde, no canto de cima da miniatura; o balão aparece com o mouse em cima das etiquetas. */
.ibx{position:absolute;top:4px;left:4px;right:4px;z-index:3;display:flex;flex-wrap:wrap;gap:3px;pointer-events:auto}
.ibx>i{font-style:normal;font-size:9.5px;font-weight:800;line-height:15px;padding:0 5px;border-radius:5px;letter-spacing:.03em;text-transform:uppercase;background:rgba(6,10,18,.82);box-shadow:inset 0 0 0 1px currentColor;white-space:nowrap}
.ibx-r{color:var(--rc,#c9cfd8)}
.ibx-r.r0{color:#c9cfd8}.ibx-r.r1{color:#6fd36a}.ibx-r.r2{color:#58a8ff}.ibx-r.r3{color:#c77dff}.ibx-r.r4{color:#ffb640}.ibx-r.r5{color:#ff5a7a}.ibx-r.r6{color:#7ff6ff}
.ibx-r.rl{color:#b9a4ff}
.ibx-u{color:#ffe28a}
.ibx-b{color:#7dff9a}
.ibx-tip{display:none;position:absolute;top:19px;left:0;min-width:180px;max-width:240px;padding:8px 10px;border-radius:9px;background:rgba(10,15,26,.97);border:1px solid #c9a15a;box-shadow:0 10px 26px rgba(0,0,0,.6);font-size:11.5px;line-height:1.35;color:#e8edf5;text-transform:none;letter-spacing:0;pointer-events:none}
.ibx:hover .ibx-tip{display:flex;flex-direction:column;gap:2px}
.mx-card:hover,.mx-card:focus-within{z-index:6}
.ibx-tip>b{font-size:12.5px}
.ibx-tip .ibx-h{margin-top:4px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#7dff9a}
.ibx-tip .ibx-up{color:#ffe28a;font-weight:700}
.ibx-tip .ibx-l.no{color:#9fb0c8}
.ibx-tip .rng{color:#9fb0c8}
@media (hover:none){.ibx-tip{display:none!important}}
/* Mochila (06/10, dono: "etiquetas... colocar na mochila"): as mesmas etiquetas, menores, no quadrado do item. Sem balão
próprio (o balão da Mochila já mostra tudo) e sem pegar o mouse (arrastar e clicar continuam no quadrado). A estrela do
melhor vai para baixo, à direita; cadeado, marca de venda e "à venda" vão para baixo, à esquerda, acima do poder. */
.ig-cell .ibx{top:3px;left:3px;right:3px;gap:2px;pointer-events:none}
.ig-cell .ibx>i{font-size:7.5px;line-height:12px;padding:0 3px;border-radius:4px;letter-spacing:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ig-cell.other .ibx{opacity:.45}
.ig-cell .ig-best{top:auto;left:auto;right:3px;bottom:13px;font-size:12px}
.ig-cell .ig-lock,.ig-cell .ig-chk{top:auto;bottom:14px;left:3px;width:16px;height:16px}
.ig-cell .ig-tag{top:auto;bottom:14px;left:3px;font-size:8.5px}
/* Suporte (06/10, dono: "abrir um ticket para mim... responder via painel... fica tudo salvo"): a lista dos tickets à esquerda;
à direita o formulário, a conversa com a equipe e o histórico da conta anexado por ela. */
.sp2 .sp2-left{width:300px}
.sp-new{justify-content:center;height:40px;font-size:15px}
.sp-list{display:flex;flex-direction:column;gap:6px}
.sp-none{text-align:center;padding:10px 0}
.sp-tk{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-radius:10px;cursor:pointer;background:linear-gradient(180deg,rgba(30,42,66,.92),rgba(15,21,36,.92));box-shadow:inset 0 0 0 1px #34465f}
.sp-tk:hover{filter:brightness(1.12)}.sp-tk.on{box-shadow:inset 0 0 0 2px #f2c14e}
.sp-tk.unread{box-shadow:inset 0 0 0 2px #7dff9a}
.sp-tk-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.sp-tk-h b{color:#eef2f8;font-size:13.5px}.sp-tk-h em{font-style:normal;font-size:11.5px;color:#9fb0c8}
.sp-tk small{font-size:12px;color:#aeb9cb;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sp-tk small b{color:#f2c14e}
.sp-tk time{font-size:11px;color:#7f8ca3}
.sp-dot{position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%;background:#7dff9a;box-shadow:0 0 8px #7dff9a}
.sp-emo{font-style:normal}
.sp-st{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:999px;background:#1d2a40;color:#cfd8e6;white-space:nowrap}
.sp-st.wait{background:rgba(242,193,78,.16);color:#f2c14e}.sp-st.ans{background:rgba(125,255,154,.14);color:#7dff9a}.sp-st.off{background:#1b2333;color:#8a95a8}
.sp-kinds{margin-bottom:6px}
.sp-orders{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;margin-bottom:8px}
.sp-ord{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;cursor:pointer;background:#0f1828;box-shadow:inset 0 0 0 1px #2c3c58}
.sp-ord:hover{filter:brightness(1.15)}.sp-ord.on{box-shadow:inset 0 0 0 2px #f2c14e;background:rgba(242,193,78,.08)}
.sp-ord b{font-size:13.5px;color:#eef2f8}.sp-ord span{font-size:12.5px;color:#f3e3bd}.sp-ord small{font-size:11.5px;color:#9fb0c8}
.sp-os{font-style:normal;font-weight:700}.sp-os.paid{color:#7dff9a}.sp-os.expired{color:#ff8f7d}.sp-os.pending{color:#f2c14e}.sp-os.refunded{color:#9fb0c8}
.sp-shots{margin-top:6px}
.sp-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}.sp-head b{font-size:16px;color:#f3e3bd}.sp-head em{font-style:normal;color:#9fb0c8;font-size:12.5px}
.sp-back{display:none}
.sp-oline{display:flex;align-items:center;gap:8px;padding:6px 10px;margin-bottom:8px;border-radius:9px;background:#0f1828;box-shadow:inset 0 0 0 1px #2c3c58;font-size:13px;color:#cfd8e6}
.sp-oline img{width:20px;height:20px}
.sp2-msgs{display:flex;flex-direction:column;gap:8px;max-height:min(44vh,400px);overflow-y:auto;padding:2px 4px 2px 0;margin-bottom:8px;overscroll-behavior:contain}
.sp-msg{max-width:88%;padding:8px 11px;border-radius:12px;background:#17233a;box-shadow:inset 0 0 0 1px #2c3c58}
.sp-msg.me{align-self:flex-end;background:#1f3150}
.sp-msg.staff{align-self:flex-start;background:linear-gradient(180deg,rgba(242,193,78,.12),rgba(242,193,78,.05));box-shadow:inset 0 0 0 1px rgba(242,193,78,.45)}
.sp-msg.staff:has(.sp-rep){max-width:100%;width:100%}
.sp-mh{display:flex;align-items:center;gap:6px;font-size:12px;color:#aeb9cb;margin-bottom:3px}.sp-mh time{margin-left:auto;color:#7f8ca3;font-size:11px}
.sp-team{color:#f2c14e;text-transform:uppercase;font-size:11px;letter-spacing:.05em}
.sp-mt{font-size:14px;color:#eef2f8;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.4}
.sp-imgs{display:flex;gap:6px;margin-top:6px}.sp-imgs img{width:96px;height:72px;object-fit:cover;border-radius:8px;box-shadow:inset 0 0 0 1px #2c3c58}
.sp-rep{margin-top:8px;padding:10px;border-radius:10px;background:#0c1422;box-shadow:inset 0 0 0 1px #34465f}
.sp-rep-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}.sp-rep-h img{width:22px;height:22px}.sp-rep-h b{color:#f3e3bd;font-size:14px}.sp-rep-h small{margin-left:auto;color:#9fb0c8;font-size:12px}
.sp-rsum{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;margin-bottom:8px}
.sp-rs{display:flex;flex-direction:column;padding:6px 8px;border-radius:8px;background:#121c2e}.sp-rs span{font-size:11px;color:#9fb0c8;text-transform:uppercase;letter-spacing:.04em}.sp-rs b{font-size:13.5px;color:#eef2f8}
.sp-rrows{display:flex;flex-direction:column;max-height:300px;overflow-y:auto;overscroll-behavior:contain}
.sp-rr{display:grid;grid-template-columns:86px 20px minmax(0,1fr);gap:8px;align-items:start;padding:5px 2px;border-top:1px solid rgba(255,255,255,.05)}
.sp-rr time{font-size:11.5px;color:#9fb0c8;padding-top:2px}.sp-rr img{width:18px;height:18px;object-fit:contain;margin-top:1px}
.sp-rr b{display:block;font-size:13px;color:#eef2f8;font-weight:600}.sp-rr small{display:block;font-size:11.5px;color:#8a95a8;overflow-wrap:anywhere}
.sp-rr.k-paid b,.sp-rr.k-in b{color:#7dff9a}.sp-rr.k-out b{color:#f3c27a}.sp-rr.k-expired b{color:#ff8f7d}.sp-rr.k-auto b{color:#cfe1ff}
textarea.input.fb-text.sp-reply{min-height:0;height:66px;resize:vertical}
.sp-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}.sp-acts .buy{flex:1;min-width:120px}
.sp-acts .sp-shots{margin:0;flex:none}
.sp-shots .fb-add,.sp-shots .fb-shot{width:52px;height:52px}.sp-shots .fb-add b{font-size:18px}.sp-shots .fb-add span{font-size:10px}
.sp2-msgs .sp-rrows{max-height:none;overflow:visible}
.sp-intro{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:30px 20px}.sp-intro img{width:56px;height:56px}.sp-intro b{font-size:18px;color:#f3e3bd}.sp-intro p{max-width:420px}
.lj2-sup{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:8px 10px;margin-top:8px;border-radius:10px;cursor:pointer;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #2c3c58}
.lj2-sup:hover{filter:brightness(1.15)}.lj2-sup img{width:26px;height:26px}.lj2-sup b{display:block;font-size:13px;color:#f3e3bd}.lj2-sup small{display:block;font-size:11.5px;color:#9fb0c8;line-height:1.3}
.hf.app .ig.sp2{grid-template-columns:1fr}.hf.app .sp2 .sp2-left{width:auto}
.hf.app .sp2.sp-detail .sp2-left{display:none}.hf.app .sp2:not(.sp-detail) .sp2-right{display:none}
.hf.app .sp-back{display:inline-grid}
.hf.app .sp-msg{max-width:94%}
.hf.app .sp-rr{grid-template-columns:70px 18px minmax(0,1fr)}
/* Loja simples (06/10 20:11, dono: "muito cheio de informação, ninguém entende nada; quero uma coisa simples, rápida e fácil de
visualizar e comprar"). VIP: a sua situação numa linha, 3 cartões (dias e o botão com o preço) e as vantagens numa faixa.
Diamantes: cartões pequenos com o preço no botão e o Pacote de Iniciante numa linha. */
.vq{display:flex;flex-direction:column;gap:12px}
.vq-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:12px;background:rgba(255,207,74,.08);box-shadow:inset 0 0 0 1px rgba(255,207,74,.35)}
.vq-top>img{width:34px;height:34px;image-rendering:pixelated}
.vq-top b{display:block;font-size:16px;color:#ffd36a}.vq-top small{display:block;font-size:12.5px;color:#cfd8e6}
.vq-top.on{background:rgba(111,211,106,.08);box-shadow:inset 0 0 0 1px rgba(111,211,106,.5)}.vq-top.on b{color:#8ef58a}
.vq-top .vx-renew{margin:0 0 0 auto}
.vq-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.vq-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:16px 10px 12px;border-radius:14px;background:linear-gradient(180deg,rgba(34,48,76,.95),rgba(14,20,36,.95));box-shadow:inset 0 0 0 1px #34465f}
.vq-card.best{box-shadow:inset 0 0 0 2px #ffcf4a,0 0 16px rgba(255,190,60,.22)}
.vq-tag,.ds-tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);padding:2px 9px;border-radius:999px;background:#ffcf4a;color:#2a1a08;font-size:11px;font-weight:800;white-space:nowrap}
.ds-tag.off{background:#3fae5a;color:#fff}
.vq-d{font-size:36px;line-height:1;color:#fff;font-family:"HF Title","Cinzel",serif}
.vq-du{margin-top:-4px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9fb0c8}
.vq-buy{width:100%;max-width:170px;height:42px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:17px;margin-top:4px}
.vq-buy img{width:18px;height:18px}.vq-buy .was{font-size:12px;margin-right:2px;opacity:.75}
/* 09/10 23:10 (dono: "quando está com desconto o valor fica ruim no botão"): o preço cheio sai do botão e fica em cima, riscado e
legível, com a etiqueta do desconto. */
.vq-was{display:flex;align-items:center;justify-content:center;gap:6px;margin:2px 0 -2px;font-size:13px;line-height:1}
.vq-was s{color:#c3cede;font-weight:700;text-decoration-thickness:2px;text-decoration-color:#ff6b6b}
.vq-was b{padding:2px 7px;border-radius:999px;background:#2fbf71;color:#06210f;font-size:12px;font-weight:800}
.buy s.was{color:#5a3a08;opacity:1;text-decoration-color:#c0261c}.buy.blue s.was{color:#d3e0f5;text-decoration-color:#ff8080}
.vq-pd{font-size:12px;color:#9fb0c8}.vq-pd em{font-style:normal;font-weight:800;color:#7dffb0}
.vq-perks{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.vq-ph{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#ffd36a;margin-right:2px}
.vq-pk{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 4px;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #2c3c58;font-size:12px;color:#dfe6f1}
.vq-pk img{width:18px;height:18px;image-rendering:pixelated}
.vq-note{margin:0;font-size:12px;color:#8a95a8}
.ds-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:8px}
.ds-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:14px 10px 10px;border-radius:14px;background:linear-gradient(180deg,rgba(34,48,76,.95),rgba(14,20,36,.95));box-shadow:inset 0 0 0 1px #34465f}
.ds-card.best{box-shadow:inset 0 0 0 2px #ffcf4a,0 0 16px rgba(255,190,60,.22)}
.ds-card.gem-pick,.ds-start.gem-pick{box-shadow:inset 0 0 0 2px #7dff9a,0 0 16px rgba(125,255,154,.25)}
.ds-art{width:64px;height:48px;object-fit:contain;image-rendering:pixelated}
.ds-n{font-size:24px;line-height:1.1;color:#fff}.ds-u{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9fb0c8}
.ds-pay{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;margin-top:8px}
.ds-buy{width:100%;height:42px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:17px}
.ds-buy small{font-size:11px;font-weight:800;opacity:.75}
.ds-usdc img{width:20px;height:20px;image-rendering:pixelated}
.pay-qr{width:16px;height:16px;flex:none;color:#3a2504;opacity:.9}.pk-pix b{display:inline-flex;align-items:center;gap:6px}
.ds-usdc.sub{height:34px;font-size:14px;margin-top:4px}.ds-usdc.sub img{width:18px;height:18px}
/* Cartão (Stripe, 13/10): embaixo do PIX vira um botão prateado menor (o dourado do PIX sem cor), entre o PIX e o USDC azul. */
.ds-cc .pay-qr{width:17px;height:13px}.ds-cc.sub{height:34px;font-size:14px;margin-top:4px;filter:grayscale(.9) brightness(1.08)}
.pk-usdc b{display:inline-flex;align-items:center;gap:6px}.pk-wal{width:18px;height:18px;image-rendering:pixelated}
.ds-start{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) minmax(150px,190px);align-items:center;gap:12px;margin-top:14px;padding:14px 12px 10px;border-radius:14px;background:linear-gradient(135deg,rgba(255,207,74,.12),rgba(14,20,36,.95) 55%);box-shadow:inset 0 0 0 1px rgba(255,207,74,.45)}
.ds-start .ds-tag{left:auto;right:12px;transform:none}
.ds-chest{width:48px;height:48px;image-rendering:pixelated}
.ds-st b{display:block;font-size:16px;color:#ffd36a}.ds-st small{display:block;font-size:12.5px;color:#cfd8e6;line-height:1.35}
.ds-start .ds-pay{margin-top:0}
.ds-free{margin-top:10px;background:linear-gradient(180deg,rgba(34,48,76,.95),rgba(14,20,36,.95));box-shadow:inset 0 0 0 1px #34465f}
.ds-free .ds-st b{color:#eef2f8}
.ds-free .ds-chest{width:40px;height:40px;justify-self:center}
.ds-q{display:inline-flex;align-items:center;gap:4px;margin-top:6px}
.ds-qb{width:30px;height:30px;border:0;border-radius:8px;background:#22324d;color:#eef2f8;font:700 17px/1 inherit;cursor:pointer;box-shadow:inset 0 0 0 1px #3b5276}
.ds-qb:hover{filter:brightness(1.2)}
.ds-q input{width:84px;height:30px;text-align:center;font-size:15px}
.hf.app .vq-d{font-size:30px}.hf.app .vq-card{padding:14px 6px 10px}.hf.app .vq-buy{font-size:15px;height:40px;gap:4px}
.hf.app .ds-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.hf.app .ds-start{grid-template-columns:44px minmax(0,1fr)}.hf.app .ds-start .ds-pay{grid-column:1/-1}
/* Ficha do item (06/10): de onde vem a força do item. */
.is-note{margin:4px 0 0;font-size:11.5px;line-height:1.35;color:#9fb0c8}
/* Mercado › ficha do anúncio (06/10 21:19): preço e Comprar no topo, no jeito da Loja (diamantes e VIP). Fica preso no alto
quando a ficha rola. */
.mkb{position:sticky;top:-16px;z-index:3;display:flex;align-items:center;gap:12px;margin:0 -4px;padding:12px 14px;border-radius:14px;background:linear-gradient(180deg,#22304c,#121a2e);box-shadow:inset 0 0 0 2px #ffcf4a,0 6px 16px rgba(0,0,0,.45)}
.mkb.me{box-shadow:inset 0 0 0 2px #4fe07a,0 6px 16px rgba(0,0,0,.45)}
.mkb-p{display:flex;flex-direction:column;min-width:0;flex:1}
.mkb-p>small{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9fb0c8}
.mkb-p .is-price{font-size:24px;line-height:1.15}.mkb-p .is-price .brl{font-size:13px;color:#cfd8e6;font-weight:600}
.mkb-s{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12px;color:#9fb0c8}
.mkb-go{flex:none;width:auto;min-width:150px;height:48px;margin:0;padding:0 18px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:18px}
.mkb-go img{width:22px;height:22px;image-rendering:pixelated}
.mkb-sel{display:flex;align-items:center;gap:8px;font-size:13px;color:#b9c6d8;min-width:0}
.mkb-sel img{width:26px;height:26px;border-radius:50%;flex:none;background:#0d1628;image-rendering:pixelated;object-fit:cover;border:1px solid rgba(255,255,255,.2)}
.mkb-sel>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkb-sel b{color:#bcd6ff}.mkb-sel i{font-style:normal;color:#8a97ab;font-size:12px}
.mkb-sel .lnk{margin-left:auto;flex:none;font-size:13px}
@media (max-width:520px){.mkb{flex-wrap:wrap}.mkb-go{width:100%}}
/* Mercado › compra feita (06/10 21:24): cartão de sucesso no jeito da Loja. */
.mkok{gap:12px;padding:16px!important;box-shadow:inset 0 0 0 2px #4fe07a,0 0 18px rgba(79,224,122,.15)}
.mkok-h{display:flex;align-items:center;gap:14px;min-width:0}
.mkok-art{position:relative;flex:none;width:72px;height:72px;display:grid;place-items:center;border-radius:14px;background:radial-gradient(circle,rgba(255,255,255,.08),rgba(8,12,20,.9));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mkok-art img{width:60px;height:60px;object-fit:contain;image-rendering:pixelated}
.mkok-art i{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#3fae5a;color:#fff;font-style:normal;font-weight:800;font-size:14px;box-shadow:0 0 0 2px #0f1626}
.mkok-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.mkok-t small{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7dff9a}
.mkok-t b{font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkok-t .rar{font-size:13px}
.mkok-pay{display:flex;flex-direction:column;align-items:flex-end;flex:none;text-align:right}
.mkok-pay small{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9fb0c8}
.mkok-pay b{font-size:20px;color:#f2c14e}.mkok-pay b .brl{display:block;font-size:12px;color:#cfd8e6;font-weight:600}
.buyp .mkok-ok{font-size:15px;font-weight:700;color:#dfe6f1}
.mkok-acts .buy{flex:1 1 200px;height:46px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px}
.mkok-acts .buy img{width:22px;height:22px;image-rendering:pixelated}
.mkok-d summary{font-size:13px;color:#9fb0c8}
.mkok-d .buy-log{margin-top:6px}
@media (max-width:520px){.mkok-h{flex-wrap:wrap}.mkok-pay{align-items:flex-start;text-align:left;width:100%}}
/* Mercado › Vendas: abas Itens e Ouro (06/10). */
.mk-vk{margin:0 0 10px}
.mk-vk .ig-cat{flex:0 1 180px}
.mk-sale.gold .nm{color:#ffd36a}.mk-sale.gold .nm span{color:#cfd8e6;font-weight:600;font-size:.85em}
.mk-sale.gold .rar{color:#9fb0c8}
.mk-sale .lp small{display:block;font-size:11.5px}
/* Mercado › Ouro (06/10 21:36): abas Comprar ouro, Vender ouro e Meus lotes; lotes em cartões com o preço no botão. */
.gx-tabs{margin:0 0 10px}
.gx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;align-content:start}
.gx-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:12px 10px 10px;border-radius:14px;background:linear-gradient(180deg,rgba(34,48,76,.95),rgba(14,20,36,.95));box-shadow:inset 0 0 0 1px #34465f}
.gx-card.mine{box-shadow:inset 0 0 0 2px #4f8fd6}
.gx-art{width:44px;height:44px;image-rendering:pixelated;margin-bottom:2px}
.gx-amt{font-size:22px;line-height:1.1;color:#ffd36a}
.gx-u{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9fb0c8}
.gx-per{font-size:12px;color:#cfd8e6;margin-top:4px}
.gx-who{font-size:11.5px;color:#8a97ab;min-height:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gx-me{position:absolute;top:6px;right:8px;font-style:normal;font-size:10.5px;padding:1px 7px;border-radius:999px;background:rgba(79,143,214,.25);color:#bcd6ff}
.gx-go{width:100%;height:40px;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:16px;white-space:nowrap;padding:0 8px}
.gx-go img{width:18px;height:18px;image-rendering:pixelated}
.gx-go.warn{filter:hue-rotate(-25deg) saturate(1.4)}
.gx-tools{margin-bottom:8px}.gx-fc span{padding:0 10px;font-weight:700}
.gx-sellw{max-width:760px}
.mx.app .gx-cards{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.mx.app .mk-vk{gap:4px;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.mx.app .mk-vk .ig-cat{flex:1 1 0;min-width:0;height:auto;min-height:44px;padding:4px 6px;gap:4px;font-size:11.5px}
.mx.app .mk-vk .ig-cat span{white-space:normal;text-align:center;line-height:1.1;overflow:visible}
.mx.app .mk-vk .ig-cat img{width:22px;height:22px}
/* Pets (06/10 21:58): regras em cartões curtos embaixo, no lugar do "Como funciona" comprido da esquerda. */
.pt-how{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:10px}
.pt-hw{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px #2c3c58;min-width:0}
.pt-hw img{width:30px;height:30px;flex:none;object-fit:contain;image-rendering:pixelated}
.pt-hw span{display:flex;flex-direction:column;min-width:0}.pt-hw b{font-size:13px;color:#f1e6c8}.pt-hw small{font-size:11.5px;line-height:1.35;color:#9fb0c8}
/* Mercado › Recursos (06/10 22:50): cartões dos lotes com o ícone do recurso e a quantidade, filtro pelo tipo e a grade do que
o jogador tem para vender (hud.js mkGoods). */
.rd-card .rd-art{position:relative;display:grid;place-items:center;width:58px;height:58px;margin-bottom:4px;border-radius:12px;background:radial-gradient(circle at 50% 40%,rgba(255,214,107,.18),rgba(0,0,0,0) 70%)}
.rd-card .rd-art img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated}
.rd-card .rd-art b{position:absolute;right:-8px;bottom:-4px;padding:1px 6px;border-radius:8px;background:#0c1220;box-shadow:inset 0 0 0 1px #b8843e;color:#ffd36a;font-size:13px}
.rd-card .rd-nm{max-width:100%;font-size:13.5px;line-height:1.2;text-align:center;color:#f3ead2;overflow-wrap:anywhere}
/* Quantos comprar (08/10 16:28, dono: "deixar os botões tudo alinhados... melhorar essa parte de aumentar e diminuir"): o pé do
cartão (quantidade, botão e valor aproximado) tem sempre a mesma altura e fica embaixo, então os botões ficam na mesma linha. */
.gx-card .rd-foot{width:100%;margin-top:auto;padding-top:8px;display:flex;flex-direction:column;align-items:stretch;gap:6px}
.rd-card .rd-q{height:58px;display:flex;flex-direction:column;justify-content:flex-end;gap:5px}
.rd-card .rd-q.none{justify-content:center;align-items:center;border-radius:9px;background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(52,70,95,.6)}
.rd-card .rd-q.none small{font-size:11.5px;font-weight:700;color:#8a97ab}
.rd-qh{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 2px}
.rd-qh>small{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9fb0c8}
.hf .rd-max{all:unset;box-sizing:border-box;cursor:pointer;height:20px;padding:0 8px;display:inline-flex;align-items:center;gap:3px;border-radius:999px;font-size:10.5px;font-weight:800;color:#3a2205;background:linear-gradient(180deg,#f6cd5c,#c08425);box-shadow:inset 0 0 0 1px #ffe08a}
.hf .rd-max:hover{filter:brightness(1.1)}
.hf .rd-card .qty-seg{display:flex;width:100%;height:34px;margin:0}
.hf .rd-card .qty-seg>button:first-child,.hf .rd-card .qty-seg>button:nth-child(3){width:38px;height:34px;font-size:17px}
.hf .rd-card .qty-seg .qty-in{flex:1;width:auto;min-width:0;height:34px;font-size:16px}
.gx-card .rd-foot .gx-go{margin-top:0}
.gx-eq{display:block;min-height:15px;margin-top:3px;font-size:11px;font-weight:600;line-height:15px;text-align:center;color:#9fb0c8;white-space:nowrap}
.gx-card>.gx-go{margin-top:auto}
.rd-grps{flex-wrap:wrap;gap:6px;margin:0 0 8px}
.rd-grps .ig-sf{grid-auto-flow:column;gap:6px;padding:0 10px}
.rd-grps .ig-sf img{width:22px;height:22px}
.rd-have{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.rd-tile{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:8px 6px;border-radius:12px;background:rgba(24,34,54,.9);box-shadow:inset 0 0 0 1px #34465f;text-align:center}
.rd-tile img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated}
.rd-tile b{color:#ffd36a;font-size:14px}
.rd-tile small{font-size:11px;line-height:1.15;color:#c9d4e4;overflow-wrap:anywhere}
.rd-tile:hover{filter:brightness(1.15)}
.rd-tile.on{background:linear-gradient(180deg,#2f6fd0,#1d4b97);box-shadow:inset 0 0 0 2px #7fb0ff}
.rd-tile.on small{color:#fff}
.rd-tile:focus-visible{outline:2px solid #f2c14e}
/* Cadeado da Mochila (06/10 23:09): no computador o cadeado apagado aparece ao passar o mouse no item (um clique trava); o
botão Travar/Destravar das fichas leva o cadeado; "travado" no subtítulo da ficha do material. */
.ig-lock{cursor:pointer;z-index:2}
.ig-lock.off{opacity:0;transition:opacity .15s}
.ig-cell:hover .ig-lock.off{opacity:.45}
.ig-cell .ig-lock.off:hover{opacity:1;filter:drop-shadow(0 0 3px #ffd36a)}
.is-lock{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.is-lock img{width:18px;height:18px;object-fit:contain}
.is-lk{color:#ffd36a;font-weight:700}
.ig-cell.mat .ig-lock{top:3px;bottom:auto;left:3px;width:16px;height:16px;pointer-events:none}
.rd-tile{position:relative}
.rd-tile .rd-lk{position:absolute;top:4px;left:4px;width:16px;height:16px}
.rd-tile .rd-lk img{width:100%;height:100%;object-fit:contain}
/* ---------- Topo do celular em pé, mais limpo (06/10 23:21, dono: "muito poluído a parte de cima do mobile"; "faça todas") ----------
1. Moedas numa linha fina: ícone e número, sem o nome e com um "+" só (no diamante, abre a Loja).
2. Avisos (Votar no TopIdle, Passe, Plantação pronta) no sino da coluna da esquerda; tocar mostra a lista ao lado.
3. Cartão do herói enxuto: nome e nível (sem o nome do herói, o escudo e o ponto de status), barras mais finas.
4. Nome do mapa (abre o Mapa do mundo), online/VIP e a tarefa do mapa numa coluna pequena embaixo do minimapa; na cidade
a tarefa some ("Cidade · área segura" não ajuda).
5. Botões da esquerda menores. 6. Zoom: sem o + e −, só a pinça (o jogo já aceita). */
.hf.app.is-portrait .hero-card{top:calc(var(--st) + 4px)}
.hf.app.is-portrait .hero-card .portrait{width:50px;height:50px;border-width:8px;border-image-width:8px}
.hf.app.is-portrait .hero-card .portrait img{width:34px;height:34px}
.hf.app.is-portrait .hero-info{height:50px;border-width:8px;border-image-width:8px}
.hf.app.is-portrait .hero-info .row > img:first-child,.hf.app.is-portrait .hero-info .hn,.hf.app.is-portrait .hero-info .mystat{display:none}
.hf.app.is-portrait .hero-info .name{font-size:14px}
.hf.app.is-portrait .hero-info .bar.hp{height:10px}
.hf.app.is-portrait .hero-info .bar.hp b{font-size:9.5px}
.hf.app.is-portrait .hero-info .bar.mana,.hf.app.is-portrait .hero-info .bar.xp{height:4px}
.hf.app.is-portrait .topcenter{top:calc(var(--st) + 58px)}
.hf.app.is-portrait .currencies{gap:5px}
.hf.app.is-portrait .pill{height:28px;border:0;border-image:none;border-radius:14px;background:rgba(9,13,22,.8);box-shadow:inset 0 0 0 1px rgba(214,170,90,.45);padding:0 3px 0 7px;gap:5px}
.hf.app.is-portrait .pill img{width:18px;height:18px}
.hf.app.is-portrait .pill .pv{align-items:flex-start}
.hf.app.is-portrait .pill .pl,.hf.app.is-portrait .pill .plus{display:none}
.hf.app.is-portrait .pill .v{font-size:13.5px}
.hf.app.is-portrait .pill[data-k="p_coupons"] .plus{display:grid;width:22px;height:22px}
/* minimapa e a coluna embaixo dele */
.hf.app.is-portrait .p-map{top:calc(var(--st) + 92px);width:96px;height:96px}
.hf.app.is-portrait .zoomctl{display:none}
.hf.app.is-portrait .mapchip{left:auto;right:calc(8px + var(--sr));top:calc(var(--st) + 194px);height:24px;max-width:150px;padding:0 7px 0 4px;gap:4px;font-size:11px}
.hf.app.is-portrait .mapchip img{width:16px;height:16px}
.hf.app.is-portrait .mapchip b{display:none}
.hf.app.is-portrait .mapchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf.app.is-portrait .presence{top:164px;right:2px;height:20px;padding:0 7px;font-size:10.5px;background:rgba(8,11,16,.6);box-shadow:none}
.hf.app.is-portrait .presence .netst{display:none}
.hf.app.is-portrait .presence img{width:12px;height:12px}
.hf.app.is-portrait .domchip{left:auto;right:calc(8px + var(--sr));top:calc(var(--st) + 246px);width:auto;min-width:0;max-width:none;height:24px;border:0;border-image:none;border-radius:12px;background:rgba(9,13,22,.8);box-shadow:inset 0 0 0 1px rgba(214,170,90,.4);padding:0 7px 0 4px;gap:4px;font-size:10.5px}
.hf.app.is-portrait .domchip img{width:16px;height:16px}
.hf.app.is-portrait .domchip.safe{display:none}
.hf.app.is-portrait .domchip .dbar{width:34px;flex:none}
/* coluna da esquerda */
.hf.app.is-portrait .app-fabs{top:calc(var(--st) + 92px);gap:6px}
.hf.app.is-portrait .fab{width:40px;height:40px}
.hf.app.is-portrait .fab img{width:24px;height:24px}
.hf .fab-bell{display:none}
.hf.app.is-portrait .fab-bell:not([hidden]){display:grid}
.hf.app.is-portrait .fab-bell.ring img{animation:bellring 2.6s ease-in-out infinite;transform-origin:50% 10%}
.hf.app.is-portrait.bell-open .fab-bell{box-shadow:0 0 0 2px #ffd36a}
@keyframes bellring{0%,70%,100%{transform:rotate(0)}74%{transform:rotate(-14deg)}80%{transform:rotate(12deg)}86%{transform:rotate(-8deg)}92%{transform:rotate(4deg)}}
.hf.app.is-portrait .votechip{left:calc(56px + var(--sl));top:calc(var(--st) + 92px);z-index:30;max-width:calc(100% - 180px - var(--sl) - var(--sr))}
.hf.app.is-portrait .partybox{left:calc(56px + var(--sl));top:calc(var(--st) + 92px)}
@media (prefers-reduced-motion:reduce){.hf.app.is-portrait .fab-bell.ring img{animation:none}}
/* ---------- Topo do celular, 2ª versão (06/10 23:51, dono: "diminuir a largura do ouro, cristal e diamante e colocar o fps e o
mapa na mesma linha; ao lado direito só fica o mapa, com um botão de ocultá-lo (salvo na conta); as missões no ícone abaixo do
sino"). Linha 2: moedas (só ícone e número), online e FPS, e o nome do mapa (placeTop põe o botão do mapa aqui). ---------- */
.hf.app.is-portrait .topcenter{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:4px}
.hf.app.is-portrait .currencies{display:flex;flex:none;width:auto;gap:4px}
.hf.app.is-portrait .pill{flex:none;width:auto;height:26px;padding:0 6px 0 5px;gap:3px}
.hf.app.is-portrait .pill img{width:16px;height:16px}
.hf.app.is-portrait .pill .v{font-size:12.5px}
.hf.app.is-portrait .pill[data-k="p_coupons"]{padding-right:2px}
.hf.app.is-portrait .pill[data-k="p_coupons"] .plus{width:20px;height:20px;border-width:4px;border-image-width:4px}
.hf.app.is-portrait .presence{position:static;order:2;flex:none;top:auto;right:auto;height:26px;padding:0 6px;gap:3px;font-size:10.5px;background:rgba(9,13,22,.8);box-shadow:inset 0 0 0 1px rgba(214,170,90,.3);border-radius:13px}
.hf.app.is-portrait .presence .pr-seg[data-ptip="online"]{font-size:0;display:inline-flex;align-items:center;gap:3px}
.hf.app.is-portrait .presence .pr-seg[data-ptip="online"] b{font-size:10.5px}
.hf.app.is-portrait .presence > .sep,.hf.app.is-portrait .presence .pr-vip,.hf.app.is-portrait .presence .bst,.hf.app.is-portrait .presence .netst > .sep,.hf.app.is-portrait .presence .netst > [data-ptip="ping"]{display:none}
.hf.app.is-portrait .topcenter .mapchip{position:static;order:3;flex:0 1 auto;min-width:0;margin-left:auto;left:auto;right:auto;top:auto;transform:none;height:26px;max-width:none}
.hf.app.is-portrait .domchip:not(.fight){display:none}
.hf.app.is-portrait .domchip.fight{left:calc(56px + var(--sl));right:auto;top:calc(var(--st) + 90px)}
/* tarefa do mapa no botão das Missões */
.hf .fab-task{display:none}
.hf.app.is-portrait .fab-quest{margin-bottom:8px}
.hf.app.is-portrait .fab-task:not([hidden]){display:flex;position:absolute;left:-4px;right:-4px;bottom:-10px;flex-direction:column;align-items:center;gap:1px;pointer-events:none}
.hf.app.is-portrait .fab-task b{font-size:9.5px;line-height:1.1;color:#fff3cf;padding:0 4px;border-radius:6px;background:rgba(9,13,22,.9);box-shadow:0 0 0 1px rgba(214,170,90,.45)}
.hf.app.is-portrait .ft-bar{display:block;width:32px;height:4px;border-radius:2px;background:#0b0f18;box-shadow:0 0 0 1px #000;overflow:hidden;order:2}
.hf.app.is-portrait .ft-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f2c14e,#ff8a3d)}
/* voto (enquanto dá para votar) e Passe sempre à vista; o resto fica no sino */
.hf.app.is-portrait:not(.bell-open) .votechip > :not(.keep){display:none}
/* esconder e mostrar o minimapa (celular e computador) */
.hf .mm-x{display:none}
.hf.app .p-map .mm-x{display:grid;place-items:center;position:absolute;left:2px;top:2px;z-index:3;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid #b8843e;background:#141c2e;color:#f3ead2;font:700 11px/1 system-ui,sans-serif;cursor:pointer}
.hf.app .p-map{overflow:visible}
.hf .mm-show{display:none}
.hf.mm-hide .p-map{display:none!important}
.hf.mm-hide .mm-show{display:flex;position:absolute;z-index:6;right:12px;top:112px;align-items:center;gap:6px;height:32px;padding:0 12px 0 8px;border-width:6px;border-image-width:6px;cursor:pointer;color:#f3ead2;font-weight:700;font-size:13px}
.hf.mm-hide .mm-show img{width:20px;height:20px}
.hf.dock.mm-hide .mm-show{right:10px;top:calc(var(--dt) + 8px)}
.hf.dock.mm-hide .p-missions{top:calc(var(--dt) + 50px);height:calc((100% - var(--dt) - 68px) * .52)}
.hf.dock.mm-hide .p-loot{top:calc(var(--dt) + 58px + (100% - var(--dt) - 68px) * .52)}
.hf.app.mm-hide .mm-show{right:calc(8px + var(--sr));top:calc(var(--st) + 92px);width:40px;height:40px;padding:0;justify-content:center;border-radius:50%;border:2px solid #b8843e;border-image:none;background:#141c2e}
.hf.app.is-landscape.mm-hide .mm-show{top:calc(var(--st) + 50px)}
.hf.app.mm-hide .mm-show span{display:none}
.hf.app .mm-show img{width:24px;height:24px}
/* 06/10 23:59 (dono: "dê mais um espaço no ouro e no cristal, pode até colocar o +, não deixe muito colado"): mais respiro nas
moedas e o + de volta no ouro e nos cristais. */
.hf.app.is-portrait .currencies{gap:6px}
.hf.app.is-portrait .pill{padding:0 3px 0 7px;gap:6px}
.hf.app.is-portrait .pill .plus{display:grid;width:20px;height:20px;border-width:4px;border-image-width:4px}
/* online e FPS na linha do nome (placeTop), pequenos, entre o nome e o nível */
.hf.app.is-portrait .hero-info .row .presence{order:0;position:static;flex:none;height:16px;margin:0 6px 0 auto;padding:0 6px;gap:3px;font-size:10px;line-height:16px;border-radius:8px;background:rgba(0,0,0,.35);box-shadow:none}
.hf.app.is-portrait .hero-info .row .presence .pr-seg[data-ptip="online"] b,.hf.app.is-portrait .hero-info .row .presence b{font-size:10px}
.hf.app.is-portrait .hero-info .row .presence .dot{width:6px;height:6px}
.hf.app.is-portrait .hero-info .row .lvl{margin-left:0}
.hf.app.is-portrait .topcenter .mapchip > img{display:none}
.hf.app.is-portrait .topcenter .mapchip{padding:0 7px 0 9px;font-size:10.5px}
/* 07/10 00:00 (dono: "mude o + ou remove e deixa os botões clicáveis sem o +"): sem o +; a moeda inteira abre a Loja. */
.hf.app.is-portrait .pill .plus{display:none}
.hf.app.is-portrait .pill{padding:0 9px 0 7px;cursor:pointer}
.hf.app.is-portrait .pill:active{filter:brightness(1.25)}
.currencies .pill{cursor:pointer}
.hf.app.is-portrait .pill[data-k="p_coupons"]{padding:0 9px 0 7px}
.hf.app.is-portrait .pill[data-k="p_coupons"] .plus{display:none}
/* 07/10 00:01: FPS, ms e o pote (bônus) empilhados no canto de cima à direita (placeTop, .hc-side). */
.hf .hc-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:1px;flex:none;align-self:center;margin-left:2px}
.hf .hc-side .netst:not([hidden]){display:flex;flex-direction:column;align-items:flex-end;gap:0;font-size:10px;line-height:12px;font-weight:700;color:#dfe7ef;text-shadow:0 1px 0 #000,0 0 3px #000}
.hf .hc-side .netst > .sep,.hf .hc-side .netst .nfps > .sep{display:none}
.hf .hc-side .netst .nfps{order:-1}
.hf .hc-side .netst b{color:#fff3cf;font-size:10px}
.hf .hc-side .bn-chip{margin:1px 0 0;height:24px;padding:0 7px}
/* 07/10 00:05 (dono: "dá para colocar um + menor dentro do oval dos botões, não precisa ser aquele"): um + pequeno e simples no
fim de cada moeda, sem a moldura dourada (a moeda inteira continua abrindo a Loja). */
.hf.app.is-portrait .pill{padding:0 4px 0 7px;gap:5px}
.hf.app.is-portrait .pill[data-k="p_coupons"]{padding:0 4px 0 7px}
.hf.app.is-portrait .pill .plus,.hf.app.is-portrait .pill[data-k="p_coupons"] .plus{display:grid;width:16px;height:16px;margin-left:1px;border:0;border-image:none;border-radius:50%;background:rgba(242,193,78,.22);box-shadow:inset 0 0 0 1px rgba(242,193,78,.6)}
.hf.app.is-portrait .pill .plus::before,.hf.app.is-portrait .pill .plus::after{background:#ffd36a;box-shadow:none}
.hf.app.is-portrait .pill .plus::before{width:56%;height:14%}
.hf.app.is-portrait .pill .plus::after{width:14%;height:56%}
/* 07/10 00:07 (dono: "centralize vertical e horizontal o + com o texto e coloque eles iguais e alinhados"): as três moedas com a
mesma largura; ícone, número e + juntos no meio de cada uma, todos na mesma linha. */
.hf.app.is-portrait .topcenter .currencies{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.hf.app.is-portrait .topcenter .mapchip{flex:0 1 auto;max-width:132px}
.hf.app.is-portrait .pill,.hf.app.is-portrait .pill[data-k="p_coupons"]{width:auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 5px}
.hf.app.is-portrait .pill > img{flex:none;display:block}
.hf.app.is-portrait .pill .pv{flex:none;display:flex;align-items:center;justify-content:center;height:16px;line-height:16px}
.hf.app.is-portrait .pill .v{display:block;line-height:16px}
.hf.app.is-portrait .pill .plus,.hf.app.is-portrait .pill[data-k="p_coupons"] .plus{flex:none;margin:0;align-self:center}
.hf.app.is-portrait .topcenter .mapchip{flex:0 0 auto}
.hf.app.is-portrait .topcenter .currencies{gap:5px}
.hf.app.is-portrait .pill,.hf.app.is-portrait .pill[data-k="p_coupons"]{gap:4px;padding:0 4px}
/* 07/10 00:13 (dono: "em cima da barra de hp tem um número 34… o que seria isso?"): o número é de jogadores online; mostra a palavra "online" ao lado. */
.hf.app.is-portrait .hero-info .row .presence .pr-seg[data-ptip="online"]{font-size:10px;font-weight:700;color:rgba(232,238,248,.82)}
.hf.app.is-portrait .hero-info .row .presence.pr-short .pr-seg[data-ptip="online"]{font-size:0}
/* 07/10 00:22 (dono: "veja o ícone do VIP também"): selo VIP (coroa e a palavra) embaixo do retrato, no jeito do selo ADM;
tocar abre o VIP. Sai da linha do nome, que fica com o nome, quem está online e o nível. */
.hero-card .vip-tag{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:1px;height:15px;padding:0 5px 0 2px;border-radius:4px;background:linear-gradient(180deg,#ffd76a,#d18f1f);box-shadow:inset 0 0 0 1px #fff0b0,0 1px 3px rgba(0,0,0,.7);color:#3d2304;font-weight:800;font-size:10px;line-height:1;letter-spacing:.04em;white-space:nowrap;cursor:pointer;text-shadow:none}
.hero-card .vip-tag .vt-ic{width:13px;height:13px;flex:none;background:center/contain no-repeat;image-rendering:pixelated}
.hero-card .vip-tag b{font-weight:800}
.hero-card .vip-tag[hidden]{display:none}
/* 07/10 00:53 (dono: "no celular, uma animação no mapa na primeira vez para ver que dá para dar zoom com o gesto de pinça"):
dica da pinça (PinchTip). O fundo deixa a pinça passar para o jogo; só o cartão recebe toque. */
.pz-ov{position:absolute;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding-top:calc(var(--st,0px) + 34vh);pointer-events:none}
.pz-card{pointer-events:auto;width:min(290px,calc(100% - 32px));display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 16px 14px;text-align:center;background:rgba(12,16,26,.94);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.55);animation:pzIn .35s ease-out both}
.pz-card .t-title{font-size:16px;color:#ffe7b0}
.pz-card p{margin:0;font-size:12.5px;line-height:1.35;color:#e3e9f2}
.pz-card .pz-s{font-size:11.5px;color:#a9b6c8}
.pz-card .buy{margin-top:6px;min-width:120px}
.pz-ok{color:#7be08f;font-size:14px}
.pz-anim{position:relative;width:150px;height:96px;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 2px rgba(214,170,90,.55),0 2px 6px rgba(0,0,0,.5);background:#2f6b33}
.pz-map{position:absolute;inset:-30%;background:linear-gradient(105deg,transparent 44%,#9b7a4c 44%,#a8865a 53%,transparent 53%),radial-gradient(circle at 20% 30%,#3d8a3f 0 6%,transparent 7%),radial-gradient(circle at 75% 65%,#3d8a3f 0 5%,transparent 6%),radial-gradient(circle at 60% 20%,#4a9647 0 4%,transparent 5%),#356f36;transform-origin:50% 50%;animation:pzMap 3.2s ease-in-out infinite}
.pz-tree{position:absolute;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7cc46a,#2f7a35 70%);box-shadow:0 3px 0 rgba(0,0,0,.25)}
.pz-tree.t1{left:28%;top:34%}.pz-tree.t2{left:64%;top:58%}.pz-tree.t3{left:40%;top:66%;width:12px;height:12px}
.pz-hero{position:absolute;left:calc(50% - 4px);top:calc(50% - 7px);width:8px;height:12px;border-radius:3px 3px 2px 2px;background:linear-gradient(#f2c99a 0 35%,#3d6fd1 35%);box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.pz-f{position:absolute;left:calc(50% - 12px);top:calc(50% - 12px);width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 0 4px rgba(255,255,255,.25),0 2px 6px rgba(0,0,0,.5)}
.pz-f.a{animation:pzA 3.2s ease-in-out infinite}
.pz-f.b{animation:pzB 3.2s ease-in-out infinite}
@keyframes pzA{0%,12%{transform:translate(-40px,-24px)}45%,60%{transform:translate(-11px,-6px)}92%,100%{transform:translate(-40px,-24px)}}
@keyframes pzB{0%,12%{transform:translate(40px,24px)}45%,60%{transform:translate(11px,6px)}92%,100%{transform:translate(40px,24px)}}
@keyframes pzMap{0%,12%{transform:scale(1.3)}45%,60%{transform:scale(.72)}92%,100%{transform:scale(1.3)}}
@keyframes pzIn{from{opacity:0;transform:translateY(10px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.pz-f.a,.pz-f.b,.pz-map{animation-duration:6s}}
/* 07/10 01:01 (dono: "não conseguem rolar a barra de rolagem do atributo; estão tendo que dar zoom no navegador para ver o
botão; refaça"): Atributos refeito (Views.atributos, .at3). A janela inteira rola no computador e no celular e a barra de
baixo (pontos livres, Limpar e Confirmar) fica presa no rodapé, sempre à vista. */
.win-atributos .win-body,.hf.app .win-atributos .win-body{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-bottom:0}
.at3{display:flex;flex-direction:column;gap:10px;min-height:100%}
.at3-top{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:linear-gradient(180deg,rgba(40,54,84,.92),rgba(18,26,44,.92));box-shadow:inset 0 0 0 1px #3a4d6c}
.at3-top .at2-por{width:52px;height:52px}
.at3-who{flex:1;min-width:0}
.at3-who b{display:block;font-size:17px;color:#f3e3bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.at3-who small{display:block;font-size:12px;line-height:1.3;color:#9fb0c8}
.at3-pts{flex:none;min-width:150px;padding:8px 14px}
.at3-main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,1fr);gap:10px;align-items:start}
.at3-box{min-width:0;padding:10px;border-radius:12px;background:rgba(9,14,26,.55);box-shadow:inset 0 0 0 1px #26354f}
.at3-h{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;flex-wrap:wrap;margin:0 2px 8px}
.at3-h .t-title{font-size:15px}.at3-h .ig-note{font-size:11.5px;margin:0}
.at3-news{margin:0 2px 8px;padding:7px 10px;border-radius:8px;font-size:12px;line-height:1.45;background:rgba(255,214,102,.1);border:1px solid rgba(255,214,102,.35);color:#f4e3b5}.at3-news b{color:#ffe08a}
.at3-list{gap:6px}
.at3-row{position:relative;grid-template-columns:42px minmax(0,1fr) 56px auto;padding:7px 10px 7px 12px;overflow:hidden}
.at3-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--k,#5b7bb0)}
.at3-row.k-forca{--k:#ff7a5c}.at3-row.k-agilidade{--k:#f2c14e}.at3-row.k-velocidade{--k:#5fd3c4}.at3-row.k-vitalidade{--k:#ff5d73}.at3-row.k-defesa{--k:#8fb2ff}.at3-row.k-mana{--k:#6aa8ff}.at3-row.k-sorte{--k:#7dff9a}
.at3-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.at3-ic img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.at3-row .at2-t b{font-size:14.5px}.at3-row .at2-t small{font-size:11.5px}
.at3-row .at2-v{font-size:19px}
.at3-rec{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#2fbf71;color:#06210f;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.03em;vertical-align:2px}
.at3-rec2{background:#e3b341;color:#2a1d00}.at3-rec0{background:#5a6270;color:#e8ecf2}
.at3-build{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between;margin:0 0 10px;padding:8px 10px;border-radius:10px;background:rgba(47,191,113,.1);border:1px solid rgba(47,191,113,.35);font-size:12.5px}
.at3-build b{white-space:nowrap}
.at3-row.k-inteligencia{--k:#b48cff}
.at3-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));column-gap:16px}
.at3-stats .sr{font-size:12.5px;padding:4px 2px}
.at3-res .ig-note{font-size:11.5px;margin:8px 2px 0}
.at3-btns{margin-top:10px}
.at3-bar{position:sticky;bottom:0;z-index:5;margin:auto -4px 0;display:flex;align-items:center;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(13,19,33,.9),#0d1321 40%);border-top:1px solid rgba(214,170,90,.4);box-shadow:0 -8px 16px rgba(0,0,0,.4)}
.at3-bar .at3-left{flex:none;gap:6px;padding:6px 12px}
.at3-bar .at3-left b{font-size:22px}.at3-bar .at3-left span{font-size:11px}
.at3-bar .ig-btn{height:44px;justify-content:center;font-size:15px}
.at3-bar [data-attr-clear]{flex:1}.at3-bar [data-attr-ok]{flex:2}
/* Celular: uma coluna, atributos primeiro; os controles na 2ª linha do cartão. */
.hf.app .at3-main{grid-template-columns:1fr}
.hf.app .at3-top{padding:8px 10px;gap:10px}.hf.app .at3-top .at2-por{width:46px;height:46px}
.hf.app .at3-pts{min-width:0;padding:6px 10px}.hf.app .at3-pts b{font-size:22px}.hf.app .at3-pts span{font-size:10.5px}
.hf.app .at3-row{grid-template-columns:40px minmax(0,1fr) 50px;grid-template-areas:"i t v" "c c c";row-gap:6px}
.hf.app .at3-ic{grid-area:i;width:36px;height:36px}.hf.app .at3-ic img{width:26px;height:26px}
.hf.app .at3-bar{margin:auto -12px 0;padding-left:12px;padding-right:12px}
.hf.app .at3-stats{grid-template-columns:1fr 1fr;column-gap:12px}
.hf.app .at3-stats .sr{font-size:12px}
@media (max-width:380px){.hf.app .at3-stats{grid-template-columns:1fr}}
/* Celular deitado (tela larga e baixa): cartão numa linha só e Resultado ao lado, como no computador. */
.hf.app.is-landscape .at3-main{grid-template-columns:minmax(0,1.5fr) minmax(220px,1fr)}
.hf.app.is-landscape .at3-row{grid-template-columns:36px minmax(0,1fr) 44px auto;grid-template-areas:none;row-gap:0;padding:5px 8px 5px 11px}
.hf.app.is-landscape .at3-row>*{grid-area:auto}
.hf.app.is-landscape .at3-row .at2-t small{display:none}
.hf.app.is-landscape .at3-ic{width:32px;height:32px}.hf.app.is-landscape .at3-ic img{width:24px;height:24px}
.hf.app.is-landscape .at3-top{padding:6px 10px}.hf.app.is-landscape .at3-top .at2-por{width:38px;height:38px}
.hf.app.is-landscape .at3-stats{grid-template-columns:1fr}
.hf.app.is-landscape .at3-bar .ig-btn{height:38px}
/* 07/10 01:06 (dono: "sem botões enormes, por favor"): barra de baixo com botões do tamanho do texto, à direita. */
.at3-bar{justify-content:flex-end;padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
.at3-bar .at3-left{margin-right:auto;padding:4px 10px}.at3-bar .at3-left b{font-size:18px}
.at3-bar .ig-btn,.hf.app .at3-bar .ig-btn,.hf.app.is-landscape .at3-bar .ig-btn{flex:none!important;width:auto;height:34px;padding:0 16px;font-size:13.5px}
.at3-btns{flex-direction:row;flex-wrap:wrap}.at3-btns .ig-btn,.hf.app .at3-btns .ig-btn{flex:none;min-width:0;width:auto;height:32px;padding:0 14px;font-size:13px}
.hf.app .at3-row .at2-ctl .mini:not(.max),.hf.app .at3-row .at2-ctl .attr-n,.hf.app .at3-row .at2-ctl .mini.max{height:32px}
.hf.app .at3-row .at2-t small{font-size:11px}
/* 07/10 01:04 (dono, print do topo do celular: "colocar no mobile o total de XP na barra de exp, em cima onde tem as barras
vermelha e azul; pode aumentar as outras e deixar igual à de HP"): vida, mana e XP com a mesma altura e o número dentro
(mana 46 / 46, XP 550 / 2.300). O cartão fica --hcx mais alto; o que vem embaixo dele desce o mesmo tanto. */
.hf.app.is-portrait{--hcx:12px}
.hf.app.is-portrait .hero-info .bar.hp,.hf.app.is-portrait .hero-info .bar.mana,.hf.app.is-portrait .hero-info .bar.xp{height:10px;min-height:0}
.hf.app.is-portrait .hero-info .bar.hp b,.hf.app.is-portrait .hero-info .bar.mana b,.hf.app.is-portrait .hero-info .bar.xp b{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;font-size:8.5px;line-height:1}
.hf.app.is-portrait :is(.topcenter,.p-map,.mapchip,.domchip,.app-fabs,.votechip,.partybox,.banner,.toast,.mm-show,.invites,.radar,.gmbar,.set-pop,.pvp-bar,.zoomctl){--st:calc(env(safe-area-inset-top,0px) + var(--hcx))}
.hf.app.is-portrait .hero-info{height:calc(50px + var(--hcx))}
.hf.app.is-portrait .hero-card .portrait{width:calc(50px + var(--hcx) / 2);height:calc(50px + var(--hcx) / 2)}
/* 07/10 01:13 (dono: "quanto tempo o jogador fica offline/AFK; os status do chat interferem no boneco?"): linhas do Afk
(Loja VIP, perfil, volta do offline e menu de status). */
.vq-afk,.ofl-afk,.pf2-afk{display:flex;align-items:center;gap:8px;margin:8px 0 0;padding:7px 10px;border-radius:10px;font-size:12.5px;line-height:1.35;color:#d9e2ee;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #2c3c58}
.vq-afk img,.ofl-afk img,.pf2-afk img{flex:none;width:22px;height:22px;image-rendering:pixelated}
.vq-afk b,.pf2-afk b{color:#ffe7b0}
.pf2-afk span{flex:1;min-width:0}.pf2-afk small{display:block;font-size:11.5px;color:#9fb0c8}
.vq-afk .lnk,.ofl-afk .lnk,.pf2-afk .lnk,.stp-afk{all:unset;cursor:pointer;color:#8fc4ff;text-decoration:underline;text-underline-offset:2px;font-size:12px;white-space:nowrap}
.pf2-afk .lnk{flex:none}
.stp-hero{color:#bfe7c6!important}
.stpick .stp-afk{display:block;margin:2px 10px 8px;font-size:12px}
/* 07/10 01:24: o botão Mais mostra um número só (a soma de Alvorada, Novidades e Suporte). */
.atab .atab-bdg .badge:not(.sum){display:none}
.hf.app.is-landscape .atab .atab-bdg .badge{top:-3px;left:calc(50% - 14px)}
.afk-it{font-style:normal}
.more-btn[hidden],.alpha-chip[hidden]{display:none!important}
/* 07/10 02:05 (dono: "o chat está meio bugado no mobile; refaça, melhore o layout; o Privado buga, sobe na tela"): chat do
celular refeito. O "Para:" do Privado fica numa faixa fixa (.cfrbox) acima das mensagens e a lista de amigos abre por cima
delas (não empurra nada). Abas em pílulas que rolam para o lado, mensagens em cartões, campo e botões compactos. */
.cfrbox{flex:none;position:relative;z-index:4}
.cfrbox[hidden]{display:none}
.cfrbox .cfr{position:static;max-height:none;padding:2px 0 6px}
.cfrbox .cfr.dd{flex-wrap:wrap}
.cfrbox .cdd-p{position:absolute;left:0;right:0;top:calc(100% - 4px);z-index:6;display:flex;flex-direction:column;max-height:min(46vh,320px)}
.cfrbox .cdd-l{flex:1;min-height:0;max-height:none}
.cfrbox .cst-n{flex-basis:100%}
.hf.app.is-portrait .p-chat{height:calc(100% - var(--st) - var(--tab) - var(--sb) - 88px - var(--hcx,0px))!important}
.hf.app[data-msheet] .banner{visibility:hidden}
.hf.app .p-chat .ctabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:6px;padding:2px 1px 8px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.hf.app .p-chat .ctabs::-webkit-scrollbar{display:none}
.hf.app .p-chat .ctabs button{flex:none;height:32px;padding:0 14px;border-radius:16px;border:1px solid #2c3a52;border-image:none;background:#141d2c;color:#cfd6e2;font-size:13px;overflow:visible}
.hf.app .p-chat .ctabs button.on{background:#2b4f93;border-color:#7fb2ff;color:#fff}
.hf.app .p-chat .clog{gap:6px;font-size:14px;line-height:1.38;padding:0 1px 6px}
.hf.app .p-chat .clog p{grid-template-columns:auto 1fr;gap:6px;padding:6px 9px;border-radius:10px;background:rgba(255,255,255,.035)}
.hf.app .p-chat .clog p.mine{background:rgba(43,79,147,.3)}
.hf.app .p-chat .clog p.ann{background:rgba(242,193,78,.08)}
.hf.app .p-chat .clog p.tome{box-shadow:inset 3px 0 0 #f2c14e}
.hf.app .p-chat .clog time{font-size:11px}
.hf.app .p-chat .clog .empty-line{background:none;padding:8px 2px;color:#9fb0c8}
.hf.app .p-chat .csend{gap:6px;align-items:center;padding:6px 0 2px}
.hf.app .p-chat .cinput{height:40px;border-radius:20px;padding:0 40px 0 14px;border:1px solid #33435f;background:#0b1220}
.hf.app .p-chat textarea.cinput{padding-top:10px;padding-bottom:6px}
.hf.app .p-chat .csbtn{height:40px;padding:0 14px;border-radius:20px;font-size:14px}
.hf.app .p-chat .csend .csay{width:40px;height:40px;border-radius:50%}
.hf.app .p-chat .cdd-b{height:36px;border-radius:18px;padding:0 12px}
.hf.app .p-chat .cdd-o{min-height:40px;font-size:14px}
/* iPhone: campo com letra menor que 16 px faz o Safari dar zoom sozinho ao tocar (e a tela fica torta). */
@supports (-webkit-touch-callout:none){.hf input:not([type=checkbox]):not([type=radio]):not([type=range]),.hf textarea,.hf select{font-size:16px!important}}
/* 07/10 02:11: alça de arrastar para fechar os painéis do celular (SheetDrag). */
.sheet-grip{display:none}
.hf.app .sheet-grip{display:block;position:absolute;left:0;right:0;top:0;height:26px;z-index:6;touch-action:none;cursor:grab}
.hf.app .sheet-grip i{position:absolute;left:50%;top:7px;width:52px;height:5px;margin-left:-26px;border-radius:3px;background:rgba(236,224,196,.8);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.hf.app .sheet-grip:active i{background:#fff}
.hf.app .panel .head::before{display:none}
.hf.app .p-chat,.hf.app .p-missions,.hf.app .p-loot{padding-top:18px}
.hf.app .app-more .sheet-grip{position:sticky;top:-6px;margin:-6px -12px 4px;flex:none;background:inherit}
.hf.app .app-more{padding-top:6px}
/* 07/10 02:18 (dono: "atualize o chat do desktop também, não só o mobile"): o chat do computador no mesmo estilo do celular:
abas em pílulas (rolam para o lado quando não cabem), mensagens em cartões e o campo de escrever arredondado. */
.hf:not(.app) .p-chat .ctabs{flex-wrap:wrap;overflow:visible;gap:3px;padding:0 0 6px}
.hf:not(.app) .p-chat .ctabs::-webkit-scrollbar{display:none}
.hf:not(.app) .p-chat .ctabs button{flex:1 1 auto;min-width:0;height:26px;padding:0 5px;border-radius:13px;border:1px solid #2c3a52;outline:0;border-image:none;background:#141d2c;color:#cfd6e2;font-size:10.5px;letter-spacing:-.1px;overflow:visible}
.hf:not(.app) .p-chat .ctabs button.on{background:#2b4f93;border-color:#7fb2ff;color:#fff}
.hf:not(.app) .p-chat .ctabs button:hover:not(.on){background:#1b2740}
.hf:not(.app) .p-chat .clog{gap:4px;padding-right:3px}
.hf:not(.app) .p-chat .clog p{grid-template-columns:auto 1fr;gap:5px;padding:4px 7px;border-radius:8px;background:rgba(255,255,255,.035)}
.hf:not(.app) .p-chat .clog p.mine{background:rgba(43,79,147,.3)}
.hf:not(.app) .p-chat .clog p.ann{background:rgba(242,193,78,.08)}
.hf:not(.app) .p-chat .clog p.tome{box-shadow:inset 3px 0 0 #f2c14e}
.hf:not(.app) .p-chat .clog .empty-line{background:none;padding:6px 2px}
.hf:not(.app) .p-chat.clear .clog p{background:rgba(6,10,17,.35)}
.hf:not(.app) .p-chat .csend{gap:5px;align-items:center;padding-top:5px}
.hf:not(.app) .p-chat .cinput{height:32px;border-radius:16px;padding:0 32px 0 12px;border:1px solid #33435f;background:#0b1220}
.hf:not(.app) .p-chat .csbtn{height:32px;padding:0 12px;border-radius:16px}
.hf:not(.app) .p-chat .csend .csay{width:32px;height:32px;border-radius:50%}
.hf:not(.app) .p-chat .cdd-b{height:30px;border-radius:15px}
/* Convite dos avisos no celular (07/10): o mesmo cartão da dica do zoom, com o ícone em cima. */
.pz-card .pz-ico{display:block;margin:0 auto 6px;width:56px;height:56px;image-rendering:pixelated}
/* Privado como no WhatsApp (07/10): lista de conversas (Privado) e de amigos (Amigos); tocar abre a conversa inteira. */
.clog.dml{gap:4px}
.dmr{all:unset;box-sizing:border-box;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;padding:6px 8px;border-radius:10px;cursor:pointer;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.dmr:hover{background:rgba(255,255,255,.07)}.dmr:active{transform:scale(.99)}
.dmr.new{background:rgba(47,111,208,.16);box-shadow:inset 0 0 0 1px rgba(127,176,255,.35)}
.dmr.grp{background:rgba(87,211,106,.07);box-shadow:inset 0 0 0 1px rgba(87,211,106,.25)}
.dmr-av{position:relative;width:34px;height:34px;flex:none}
.dmr-av img{width:34px;height:34px;border-radius:50%;object-fit:cover;image-rendering:pixelated;background:#1b2538;box-shadow:inset 0 0 0 1px #3a4b66}
.dmr-av .dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;box-shadow:0 0 0 2px #0f1626}
.dmr-av.sm,.dmr-av.sm img{width:28px;height:28px}
.dmr-t{min-width:0;display:flex;flex-direction:column;gap:1px}
.dmr-t b{font-size:13px;color:#ffe2a0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmr-t small{font-size:12px;color:#aab6c8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmr.new .dmr-t small{color:#e8eef7;font-weight:700}
.dmr-me{font-style:normal;color:#8fb8ff}
.dmr-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.dmr-r time{font-size:11px;color:#8e9bb0;white-space:nowrap}
.dmr.new .dmr-r time{color:#7fb2ff}
.dmr-n{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:#2f7be0;box-sizing:border-box}
.dmr-sep{font-size:11.5px;font-weight:700;color:var(--muted);padding:6px 2px 2px}
.cfr.dmh{flex-wrap:wrap;gap:8px;align-items:center}
.dmh-b{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid rgba(214,170,90,.5);background:rgba(20,28,44,.95);color:#ffe2a0;font:inherit;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 2px}
.dmh-b:hover{border-color:#d6aa5a}
.dmh-i{width:28px;height:28px;image-rendering:pixelated}
.dmh-t{flex:1;min-width:0;display:flex;flex-direction:column}
.dmh-t b{font-size:13.5px;color:#ffe2a0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmh-t small{font-size:11.5px;color:#9fb0c8}
.cfr .dmh-p{font-size:12px}
.dm-older{all:unset;align-self:center;margin:2px 0 4px;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:700;color:#9fc3ff;background:rgba(47,111,208,.14);cursor:pointer}
.dm-older:disabled{opacity:.6;cursor:default}
.hf.app .dmr{padding:8px 10px;grid-template-columns:40px minmax(0,1fr) auto}
.hf.app .dmr-av,.hf.app .dmr-av img{width:40px;height:40px}
.hf.app .dmr-av.sm,.hf.app .dmr-av.sm img{width:32px;height:32px}
.hf.app .dmr-t b{font-size:15px}.hf.app .dmr-t small{font-size:13px}
.cdd-plus{font-style:normal;font-weight:900;margin-right:2px}
/* Mercado › Explorar (07/10, dono: "melhorar filtros e melhorar UI UX no mobile"): busca, peças com nome, painel de filtros em
botões e etiquetas do que está ligado. */
.mx-bar{display:flex;gap:6px;align-items:center}
.mx-q{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;border-radius:9px;background:rgba(10,15,26,.85);box-shadow:inset 0 0 0 1px #3a4b66}
.mx-q:focus-within{box-shadow:inset 0 0 0 1px #d6aa5a}
.mx-q span{font-size:13px;opacity:.7}
.mx-q input{flex:1;min-width:0;border:0;outline:0;background:none;color:#eef2f7;font:inherit;font-size:13.5px;height:100%}
.mx-q input::placeholder{color:#7c8aa0}
.mx-fbtn{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px}
.mx-fbtn i{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#1d1204;background:#ffcf4a;box-sizing:border-box}
.mx-fbtn.on{box-shadow:inset 0 0 0 1px #7fb0ff;color:#fff}
.mx-sls{margin-top:6px;padding-bottom:2px}
.ig-sf.mx-sl{display:flex;align-items:center;gap:5px;padding:0 9px;font-size:12px}
.ig-sf.mx-sl img{width:22px;height:22px}
.mx-fp{display:flex;flex-direction:column;gap:9px;margin-top:8px;padding:10px;border-radius:11px;background:rgba(10,15,26,.7);box-shadow:inset 0 0 0 1px rgba(214,170,90,.3)}
.mx-fs>b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#cdb98d;margin-bottom:5px}
.mx-chips{display:flex;flex-wrap:wrap;gap:5px}
.mx-chip{all:unset;box-sizing:border-box;height:30px;padding:0 11px;border-radius:15px;display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-size:12.5px;font-weight:700;color:#cbd6e6;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px #34465f}
.mx-chip small{font-size:11px;font-weight:600;color:#8e9bb0}.mx-chip em{font-style:normal;font-size:11px;color:#7dff9a}
.mx-chip:hover{filter:brightness(1.2)}
.mx-chip.on{background:linear-gradient(180deg,#2f6fd0,#1d4b97);box-shadow:inset 0 0 0 1px #7fb0ff;color:#fff}.mx-chip.on small{color:#dbe8ff}
.mx-chip.rc{box-shadow:inset 0 0 0 1px currentColor}.mx-chip.rc.on{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px currentColor}
.mx-fa{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.mx-act{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:6px}
.mx-tag{all:unset;box-sizing:border-box;height:26px;padding:0 9px;border-radius:13px;display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-size:12px;font-weight:700;color:#e8eef7;background:rgba(47,111,208,.22);box-shadow:inset 0 0 0 1px rgba(127,176,255,.45)}
.mx-tag i{font-style:normal;font-size:10px;opacity:.8}
.mx-tag[class*=" r"]{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px currentColor}
.mx-act .lnk{font-size:12px;color:#7fb2ff;text-decoration:underline;background:none;border:0;cursor:pointer;padding:0 2px}
/* Celular: carteira e taxas em linhas finas, botões pequenos, nome do item em até 2 linhas. */
.mx.app .mk-bar{gap:6px;padding:6px}
.mx.app .wchip{flex-basis:100%;flex-wrap:nowrap;gap:6px;padding:5px 6px}
.mx.app .wchip img{width:26px;height:26px}
.mx.app .wchip b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx.app .wchip small{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx.app .wchip .buy,.mx.app .wchip .buy:only-of-type{width:auto;flex:none;height:30px;min-height:0;padding:0 9px;font-size:12px}
.mx.app .mk-bar .mk-meta{flex:1 1 0;padding:3px 7px;font-size:11px;line-height:1.2}
.mx.app .mk-meta small{font-size:9.5px}
.mx.app .mk-meta em{display:none}
.mx.app .mx-nm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.15;font-size:12px}
.mx.app .mx-fp{padding:8px}
.mx.app .mx-chip{height:32px}
.mx.app .ig-sfs.mx-sls{flex-wrap:nowrap}
.mx-chip.rc.r2,.mx-tag.r2{color:#58a8ff}.mx-chip.rc.r3,.mx-tag.r3{color:#c77dff}.mx-chip.rc.r4,.mx-tag.r4{color:#ffb640}.mx-chip.rc.r5,.mx-tag.r5{color:#ff5a7a}.mx-chip.rc.r6,.mx-tag.r6{color:#7ff6ff}
.mx-sorts{margin-top:6px}
/* 07/10 (dono: "o botão de mapa está em cima das outras telas"): com uma janela aberta (Novidades, Mochila…) ou um painel do
celular por cima, o botão "Mapa" do minimapa escondido some, como o chip do mapa. */
.hf:has(.veil:not([hidden])) .mm-show,.hf.app[data-msheet] .mm-show{display:none!important}
/* Mercado com navegação nova (07/10, dono: "mais intuitivo; abas que são as mesmas coisas; mais fácil vender e comprar"):
em cima o que fazer (Comprar, Vender, Meus negócios, Preços), embaixo o quê (Itens, Ouro, Recursos). As abas de dentro de
Ouro, Recursos e Preços somem (a navegação de cima faz o papel delas). */
.mx-nav .gx-tabs,.mx-nav .mk-vk{display:none!important}
.mx-cats{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin:-2px 0 2px}
.mx-catb{display:inline-flex;gap:3px;padding:3px;border-radius:12px;background:rgba(10,15,26,.85);box-shadow:inset 0 0 0 1px #34465f}
.mx-cat{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border-radius:9px;cursor:pointer;font-weight:700;font-size:13px;color:#b9c6d8}
.mx-cat:hover{background:rgba(255,255,255,.06)}
.mx-cat img{width:20px;height:20px;object-fit:contain;image-rendering:pixelated}
.mx-cat b{font-size:11px;line-height:17px;padding:0 6px;border-radius:9px;background:rgba(255,255,255,.1);color:#e8eef7}
.mx-cat.on{background:linear-gradient(180deg,#ffe27a,#e9a93a);color:#2a1605;box-shadow:inset 0 0 0 1px #8a5a18}
.mx-cat.on b{background:rgba(42,22,5,.18);color:#2a1605}
.mx-hint{font-size:12.5px;color:#9fb0c8}
.mx .wchip .buy,.mx .wchip .buy:only-of-type{width:auto;height:32px;min-height:0;padding:0 14px;font-size:13px}
.mk-req.one{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:7px 12px}
.mk-req.one em{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;color:#0d2a14;background:#57d36a}
.mk-req.one b{color:#bff5c9}.mk-req.one small{color:#9fb0c8;font-size:12px}
.mk-px{margin-top:8px}.mk-px .mx-chip b{color:#ffcf4a}
.mx-open{margin-bottom:10px}
.mx.app .mx-acts .ig-cat{height:56px}
.mx.app .mx-catb{display:flex;width:100%}
.mx.app .mx-cat{flex:1 1 0;min-width:0;padding:0 4px;font-size:12.5px}
.mx.app .mx-hint{width:100%;text-align:center;font-size:12px}
.mk-req.one>small{flex-basis:auto}
.mx-acts{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))}
.mx.app .sell-wrap{display:flex;flex-direction:column-reverse;gap:10px}
.mx.app .gx-tools{flex-wrap:nowrap;align-items:center}
.mx.app .gx-tools .ig-sfs{flex:1;min-width:0}
.mx.app .gx-tools .ig-acts{width:auto;flex:none}
/* Limite do dia na Feira de ouro (07/10): quanto já foi posto à venda hoje. */
.gx-day{display:flex;flex-direction:column;gap:4px;padding:8px 10px;margin:6px 0;border-radius:9px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #2c3c58}
.gx-dayt{font-size:12.5px;color:#cfd8e6}.gx-dayt b{color:#ffcf4a}
.gx-bar{display:block;height:7px;border-radius:4px;overflow:hidden;background:rgba(0,0,0,.4)}
.gx-bar>i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#3fae5a,#7dff9a)}
.gx-bar.full>i{background:linear-gradient(90deg,#d0453a,#ff7a70)}
.gx-day small{font-size:11px;color:#8e9bb0}
/* Quadro do grupo com mais informação (07/10): rosto, função e bônus, vida em % e onde está. */
.partybox{width:196px}
.pb-m{display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px;align-items:center;cursor:pointer;padding:2px 2px;border-radius:6px}
.pb-m:hover{background:rgba(255,255,255,.05)}
.pb-face{position:relative;width:24px;height:24px}
.pb-face img{width:24px;height:24px;border-radius:5px;object-fit:cover;image-rendering:pixelated;background:#1b2538;box-shadow:inset 0 0 0 1px #3a4b66}
.pb-face .dot{position:absolute;right:-2px;bottom:-2px;width:7px;height:7px;box-shadow:0 0 0 1.5px #0b1018}
.pb-b{min-width:0}
.pb-i{display:flex;justify-content:space-between;gap:4px;align-items:baseline;margin-top:1px}
.pb-i small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9aa6b2;font-size:9.5px}
.pb-i .num{font-size:9.5px;color:#b7f28a}
.pb-st{font-style:normal}.pb-st.far{color:#ffcf7a}.pb-st.dead{color:#ff7a70}.pb-st.off{color:#8e9bb0}
.pb-m.dead .pb-hp i{background:#a33}
.pb-m.far{opacity:.8}
.pb-f{white-space:normal;line-height:1.3}
/* Loja › Diamantes (07/10, dono: "ajustar esses cards"): os pacotes ocupam a linha inteira (sem sobra à direita) e o preço do
PIX fica numa linha só. */
.ds-cards{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.ds-card{padding:14px 10px 10px}
.ds-buy{white-space:nowrap;padding:0 6px;gap:5px;font-size:15.5px}
.ds-buy span{white-space:nowrap}
.ds-buy small{margin-left:1px}
@media (max-width:1100px){.hf:not(.app) .ds-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hf.app .ds-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.hf.app .ds-buy{font-size:15px;padding:0 6px;gap:4px}
/* 07/10 "Enquanto você esteve fora" compacto (dono: "olha o tamanho do scroll... horrível"). */
.hf:not(.app) .veil[data-win="offline"] .win{width:640px;height:auto;max-height:90%}
.ofl2{display:flex;flex-direction:column;gap:10px}
.ofl2 p{margin:0}
.ofl-when{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.35;color:var(--ink)}
.ofl-when img{width:26px;height:26px;flex:none;image-rendering:pixelated}
.ofl-when b.num{white-space:nowrap}
.ofl-when small{color:var(--muted);font-size:12px;white-space:nowrap}
.ofl-main{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ofl-k{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 12px;border-radius:10px;background:linear-gradient(180deg,#1c2842,#141d31);box-shadow:inset 0 0 0 1px #2e3e5c}
.ofl-k img{width:30px;height:30px;flex:none;image-rendering:pixelated}
.ofl-k span{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.ofl-k b{font-size:19px;color:#fff3cf}
.ofl-k small{font-size:11.5px;color:var(--muted)}
.ofl2 .ofl-pot{margin:0;font-size:12.5px}
.ofl-h{margin:2px 0 -4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.ofl-chips{display:flex;flex-wrap:wrap;gap:6px}
.ofl-c{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px 0 6px;border-radius:15px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #2c3c58;font-size:12.5px;white-space:nowrap}
.ofl-c img{width:20px;height:20px;flex:none;image-rendering:pixelated}
.ofl-c b{color:#fff3cf}
.ofl-c small{font-size:12px;color:#c9d3e0}
.ofl-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.ofl-it{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 10px 6px 8px;border-radius:9px;background:rgba(255,255,255,.035);box-shadow:inset 3px 0 0 currentColor,inset 0 0 0 1px #2c3c58}
.ofl-it img{width:30px;height:30px;flex:none;object-fit:contain;image-rendering:pixelated}
.ofl-it span{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.2}
.ofl-it b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ofl-it b em{font-style:normal;color:#ffd36b}
.ofl-it small{font-size:11.5px;color:var(--muted)}
.ofl-it i{flex:none;font-style:normal;font-weight:700;font-size:13px;color:#fff3cf}
.ofl2 .bag-sold{font-size:12.5px}
.ofl2 .ofl-afk{margin:0}
.ofl-foot{display:flex;justify-content:center;padding-top:2px}
.ofl-foot .buy{min-width:240px;height:44px}
.hf.app .ofl-main{gap:6px}
.hf.app .ofl-k{flex-direction:column;gap:2px;padding:8px 4px;text-align:center}
.hf.app .ofl-k span{align-items:center}
.hf.app .ofl-k b{font-size:17px}
.hf.app .ofl-items{grid-template-columns:1fr 1fr}
.hf.app .ofl-it{padding:5px 8px 5px 6px;gap:6px}
.hf.app .ofl-it img{width:26px;height:26px}
.hf.app .ofl-it b{font-size:12.5px}
.hf.app .veil[data-win="offline"] .ofl-foot .buy{width:auto;min-width:210px;height:42px}
.hf.app .ofl-k img{width:26px;height:26px}
.hf.app .ofl-k{padding:7px 4px}
/* 07/10 Mochila: tipos com nome e quantidade, Filtro em fichas e o painel "Vender itens" (dono: "filtros feios, vender vários
mal intuitivo"). As fichas e etiquetas são as do Mercado (.mx-chip, .mx-tag). */
.mx-chip.rc.r0,.mx-tag.r0{color:#c9cfd8}.mx-chip.rc.r1,.mx-tag.r1{color:#6fd36a}
.ig-tools2{display:flex;flex-direction:column;gap:8px;min-width:0}
.ig-sls{display:flex;gap:5px;min-width:0;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.ig-sf.ig-sl{position:relative;flex:1 0 62px;max-width:118px;height:52px;padding:5px 4px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ig-sl img{width:24px;height:24px;filter:brightness(1.25) drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.ig-sl span{font-size:10.5px;font-weight:700;line-height:1.1;white-space:nowrap}
.ig-sl b{position:absolute;top:3px;right:5px;font-size:10px;font-weight:800;color:#8e9bb0}
.ig-sl.on b{color:#dbe8ff}
.ig-sl.zero:not(.on){opacity:.42}
.ig-acts2{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ig-acts2 .sp{flex:1}
.ig-acts2 .mx-fbtn{height:32px;padding:0 12px}
.ig-acts2 .mx-fbtn i{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#1d1204;background:#ffcf4a;box-sizing:border-box}
.ig-acts2 .mx-fbtn.on i{background:#1d1204;color:#ffcf4a}
.ig-sellb img{width:18px;height:18px}
.ig-autotag{all:unset;box-sizing:border-box;cursor:pointer;height:26px;padding:0 10px;border-radius:13px;display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;color:#ffd76a;background:rgba(242,193,78,.1);box-shadow:inset 0 0 0 1px rgba(242,193,78,.4)}
.ig-autotag:hover{filter:brightness(1.2)}
.ig-tools2 .mx-act{margin-top:0}
.ig-fp{margin-top:0}
.ig-fp .mx-fa .lnk,.ig-tools2 .mx-act .lnk{font-size:12px;color:#7fb2ff;text-decoration:underline;background:none;border:0;cursor:pointer;padding:0 2px}
.ig-sellp{display:flex;flex-direction:column;gap:9px;padding:10px 12px;border-radius:11px;background:linear-gradient(180deg,rgba(58,44,12,.6),rgba(22,17,8,.55));box-shadow:inset 0 0 0 1px rgba(242,193,78,.45);animation:fadeIn .15s ease}
.isp-h{display:flex;align-items:center;gap:10px}
.isp-h img{width:30px;height:30px;flex:none}
.isp-h>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.isp-h b{font-size:15px;color:#ffd76a}
.isp-h small{font-size:12px;line-height:1.3;color:#d9cba6}
.isp-q{display:flex;flex-direction:column;gap:5px}
.isp-q>span,.isp-auto b{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#cdb98d}
.ig-sellp .mx-chip.on{background:linear-gradient(180deg,#ffd66b,#d49a2a);box-shadow:none;color:#1d1204}.ig-sellp .mx-chip.on small{color:#4a3208}
.ig-sellp .mx-chip.rc.on{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px currentColor;color:inherit}
.isp-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:9px;background:rgba(0,0,0,.32);box-shadow:inset 0 0 0 1px rgba(242,193,78,.25)}
.isp-bar>span{flex:1;min-width:150px;font-size:13px;line-height:1.35}
.isp-bar.none>span{color:#a9b3c2;font-size:12.5px}
.isp-bar .amt{display:inline-flex;align-items:center;gap:3px;color:#f2c14e;white-space:nowrap;vertical-align:-3px}
.isp-bar .amt img{width:16px;height:16px}
.isp-bar em{display:block;font-style:normal;font-size:12px}
.isp-bar .buy.sm{width:auto;padding:0 14px;white-space:nowrap}
.isp-bar .lnk{background:none;border:0;padding:0 2px;color:#8fc1ff;text-decoration:underline;cursor:pointer;font:600 12.5px "HF Sans","Signika",system-ui,sans-serif}
.isp-bar.ask{background:#2e1a18;box-shadow:inset 0 0 0 1px rgba(255,138,122,.55)}
.isp-auto{display:flex;flex-direction:column;gap:6px;padding-top:9px;border-top:1px solid rgba(242,193,78,.2)}
.isp-auto small{display:block;margin-top:2px;font-size:11.5px;line-height:1.3;color:#a9b3c2}
.isp-auto .mx-chip{height:28px;font-size:12px}
.isp-oc{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#d9e2ee;cursor:pointer}
.isp-oc input{width:16px;height:16px;margin:0;accent-color:#f2c14e}
.hf.app .ig-sls{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
.hf.app .ig-sf.ig-sl{flex:0 0 60px;height:50px}
.hf.app .ig-acts2 .ig-btn{height:32px;font-size:12.5px;padding:0 10px}
.hf.app .ig-acts2 .sp{display:none}
.hf.app .ig-sellp{padding:9px 10px}
.hf.app .isp-bar .buy.sm{flex:1 0 auto}
.ig-sellp .mx-chip.rc.on small{color:inherit;opacity:.85}
.isp-auto{gap:7px}
.isp-ah{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:24px}
.isp-ah b{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#cdb98d}
.isp-ah span{font-size:12.5px;font-weight:700;color:#a9b3c2}.isp-ah span.on{color:#ffd76a}
.isp-ah i{margin-left:auto;font-style:normal;font-size:10px;color:#cdb98d}
.isp-ah:hover span{text-decoration:underline}
.isp-auto>small{margin-top:0}
/* Radar de jogadores (07/10 14:17, dono: "embaixo da sacolinha do radar de itens, exatamente igual: clica e abre, e você pode
filtrar"): o mesmo botão e a mesma lista do Radar de loot (.radar/.rd-*), 48 px abaixo dele, só no PvP. */
.radar.pradar{top:276px;--rc:#ff5a48}
.hf.dock .radar.pradar{top:266px}
.radar.pradar[data-hot="tg"]{--rc:#f2c14e}
.radar.pradar .rd-n{background:#ff5a48;color:#fff}
.radar.pradar .rd-tab{box-shadow:0 0 0 2px rgba(255,110,90,.75),0 2px 8px rgba(0,0,0,.55)}
.pr-box{width:262px}
.hf.app .pr-box{width:min(262px,calc(100vw - 80px))}
.pr-row{grid-template-columns:24px minmax(0,1fr) 24px 26px;cursor:default;min-height:34px}
.pr-row:hover{background:rgba(255,255,255,.035)}
.pr-row img.pr-f{width:24px;height:24px;border-radius:6px;object-fit:cover;object-position:top;background:#1a222e;box-shadow:0 0 0 2px var(--pvc,#ff5a48);filter:none}
.pr-row.al{--pvc:#4fe08a}.pr-row.pr{--pvc:#8fd3ff}.pr-row.en{--pvc:#ff5a48}
.pr-row.tg img.pr-f{box-shadow:0 0 0 2px var(--pvc),0 0 0 4px #f2c14e}
.pr-row.en .rd-2 b{color:#ffb4a6}.pr-row.al .rd-2 b{color:#a6f0c2}.pr-row.pr .rd-2 b{color:#bfe6ff}
.pr-row .rd-2 small{display:flex;align-items:center;gap:4px;color:#b9c3d0;opacity:1}
.pr-hp{display:block;height:3px;margin-top:2px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}.pr-hp i{display:block;height:100%;background:#e0574c}
.pr-tag{font-size:9px;font-weight:800;line-height:12px;padding:0 4px;border-radius:6px;white-space:nowrap}
.pr-tag.rv{background:rgba(255,60,40,.35);color:#ffd0c6;animation:pvwar 1.6s ease-in-out infinite}.pr-tag.al{background:rgba(79,224,138,.2);color:#a6f0c2}.pr-tag.pr{background:rgba(143,211,255,.2);color:#cfeaff}
.pr-st,.pr-atk{all:unset;box-sizing:border-box;display:grid;place-items:center;width:24px;height:24px;border-radius:6px;cursor:pointer;font:700 15px/1 system-ui;color:#7d8794}
.pr-st:hover{color:#f2c14e;background:rgba(242,193,78,.12)}.pr-st.on{color:#f2c14e;text-shadow:0 0 6px rgba(242,193,78,.7)}
.pr-atk{width:26px;height:26px;background:rgba(255,90,70,.22);box-shadow:inset 0 0 0 1px rgba(255,110,90,.55)}
.pr-atk img{width:16px;height:16px;image-rendering:pixelated}
.pr-atk:hover:not([disabled]):not(.off){background:rgba(255,90,70,.45)}.pr-atk.on{background:rgba(255,90,70,.6);box-shadow:inset 0 0 0 1px #ffb4a6,0 0 8px rgba(255,80,60,.6)}
.pr-atk[disabled],.pr-atk.off{opacity:.35;cursor:not-allowed;background:rgba(255,255,255,.06);box-shadow:none}
.pradar .rd-box[hidden]{display:none}
.pr-st:focus-visible,.pr-atk:focus-visible,.pr-vip:focus-visible{outline:2px solid #f2c14e;outline-offset:1px}
.pr-sp{width:24px}
.pr-ft{display:flex;align-items:center;gap:8px;padding-top:4px;border-top:1px solid rgba(255,255,255,.08);color:#8e9bb0;font-size:11px}.pr-ft b{color:#f2c14e}
.pr-vip{all:unset;margin-left:auto;display:inline-flex;align-items:center;gap:4px;cursor:pointer;color:#ffd77a;font-weight:700;white-space:nowrap}
.pr-vip img{width:14px;height:14px;image-rendering:pixelated}.pr-vip:hover{text-decoration:underline}
.pr-ping img{border-radius:6px;object-fit:cover;object-position:top}.pr-ping{color:#f2c14e}.pr-ping.rv{color:#ff5a48}
@media (prefers-reduced-motion:reduce){.pr-tag.rv{animation:none}}
/* Amuleto do Ouro: ícone = moeda com o escudo; botão na faixa do PvP e cartão na janela PvP. */
.am-ic{position:relative;display:inline-block;width:18px;height:18px;flex:none}.am-ic img{width:100%;height:100%;image-rendering:pixelated}
.am-ic .am-sh{position:absolute;right:-4px;bottom:-3px;width:60%;height:60%}
.am-ic.big{width:44px;height:44px}
.pvp-bar .pv-am{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px 0 6px;border-radius:12px;background:rgba(8,11,16,.8);box-shadow:inset 0 0 0 1px rgba(242,193,78,.55);color:#ffe08a;cursor:pointer;pointer-events:auto}
.pvp-bar .pv-am img{width:16px;height:16px}.pvp-bar .pv-am .am-ic{width:16px;height:16px}
.pvp-bar .pv-am.on{color:#bff0c9;box-shadow:inset 0 0 0 1px rgba(79,224,138,.6)}.pvp-bar .pv-am.on b{color:#e6ffe9}
.pvp-bar .pv-am:hover{background:rgba(40,30,8,.9)}
.pvp-bar .pv-am.pulse{animation:pvam 1s ease-in-out infinite}
@keyframes pvam{50%{box-shadow:inset 0 0 0 1px #f2c14e,0 0 14px rgba(242,193,78,.85)}}
.pvh-am{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;margin:0 0 12px;border-radius:12px;background:rgba(242,193,78,.08);box-shadow:inset 0 0 0 1px rgba(242,193,78,.35)}
.pvh-am.on{background:rgba(79,224,138,.08);box-shadow:inset 0 0 0 1px rgba(79,224,138,.4)}
.pvh-amt{min-width:0;display:flex;flex-direction:column;gap:3px}.pvh-amt b{color:#ffe08a;font-size:14px}.pvh-amt small{color:#d6c9b8;font-size:12px;line-height:1.35}
.pvh-amt em{font-style:normal;font-size:12px;color:#ffb09e}.pvh-amt em.good{color:#8fe3a8}
.pvh-am .buy{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.pvh-am .buy img{width:16px;height:16px;image-rendering:pixelated}
.pvh-tl{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;margin-bottom:6px}
.pvh-t{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(242,193,78,.25)}
.pvh-t b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.pvh-t small{color:var(--muted);font-size:11.5px}
.pvh-ts{color:#f2c14e;font-size:15px}
.pvh-tn{margin:0 0 12px;font-size:12px;color:#b9c3d0;line-height:1.4}
@media (max-width:560px){.pvh-am{grid-template-columns:40px minmax(0,1fr)}.pvh-am .buy{grid-column:2;justify-self:start;width:auto;min-width:0;padding:0 14px;height:34px}.am-ic.big{width:40px;height:40px}}
/* Minimapa no PvP: inimigo vermelho com borda clara (o monstro não tem), aliado verde, protegido azul; alvo com anel dourado,
Vingança com anel vermelho; quem está longe (radar do VIP) fica mais apagado. */
.mob.ply.en{background:#ff4d6a;box-shadow:0 0 0 1.5px #ffe3e0}
.mob.ply.al{background:#4fe08a;box-shadow:0 0 0 1.5px #0d3a20}
.mob.ply.pr{background:#8fd3ff;box-shadow:0 0 0 1.5px #0b2345}
.mob.ply.tg{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;box-shadow:0 0 0 2px #f2c14e,0 0 6px rgba(242,193,78,.9);z-index:3}
.mob.ply.rv{box-shadow:0 0 0 2px #ff3b2f,0 0 6px rgba(255,60,40,.9);z-index:3}
.mob.ply.far{opacity:.6}
@media (prefers-reduced-motion:reduce){.pvp-bar .pv-am.pulse{animation:none}}
/* Janela GM nova (07/10 14:17, hud.js Views.gm): catálogo com busca e filtros à esquerda, o escolhido e o botão à direita. */
.gm2 .rc0{--gc:#c9cfd8}.gm2 .rc1{--gc:#6fd36a}.gm2 .rc2{--gc:#58a8ff}.gm2 .rc3{--gc:#c77dff}.gm2 .rc4{--gc:#ffb640}.gm2 .rc5{--gc:#ff5a7a}.gm2 .rc6{--gc:#7ff6ff}
.gm2-note{margin:0 0 8px}
.gm2-cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:14px;align-items:start}
.gm2-left,.gm2-right{min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(214,170,90,.18)}
.gm2-right{position:sticky;top:0}
.gm2-cats{display:flex;flex-wrap:wrap;gap:5px}
.gm2-cat{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px 0 6px;border-radius:9px;cursor:pointer;font:700 12.5px "HF Sans","Signika",system-ui,sans-serif;color:#cfd8e6;background:rgba(20,30,46,.9);box-shadow:inset 0 0 0 1px #34465f}
.gm2-cat img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated}
.gm2-cat:hover{filter:brightness(1.15)}.gm2-cat.on{color:#2a1604;background:linear-gradient(#ffd66b,#d49a2a);box-shadow:none}
.gm2-cat:focus-visible,.gm2-t:focus-visible,.gm2-r:focus-visible,.gm2-ev:focus-visible{outline:2px solid #f2c14e;outline-offset:2px}
.gm2-q{position:relative;display:block}.gm2-q img{position:absolute;left:9px;top:50%;width:18px;height:18px;transform:translateY(-50%);opacity:.7;image-rendering:pixelated}
.gm2-q input{box-sizing:border-box;width:100%;height:36px;padding:0 12px 0 34px;border-radius:9px;border:1px solid rgba(214,170,90,.35);background:rgba(8,12,20,.7);color:#f3e9d2;font:600 13.5px "HF Sans","Signika",system-ui,sans-serif;outline:0}
.gm2-q input:focus{border-color:#f2c14e}
.gm2-f{display:flex;flex-direction:column;gap:6px}
.gm2-sl{display:flex;flex-wrap:wrap;gap:4px}.gm2-sl .chip{cursor:pointer}
.gm2-fs{display:flex;flex-wrap:wrap;gap:8px}.gm2-fs .du-lb{flex:1 1 150px}
.gm2-n{font-size:11.5px;color:var(--muted);margin-bottom:4px}
.gm2-grid{min-height:120px}
.gm2-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;max-height:min(46vh,430px);overflow:auto;padding:2px;scrollbar-width:thin;overscroll-behavior:contain}
.gm2-t{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:7px 5px 6px;border-radius:10px;cursor:pointer;text-align:center;background:rgba(24,34,54,.9);box-shadow:inset 0 0 0 1px #34465f}
.gm2-t img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated}
.gm2-t b{max-width:100%;font-size:11.5px;line-height:1.2;color:#f3ead2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gm2-t small{max-width:100%;font-size:10px;line-height:1.2;color:#9fb0c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm2-t:hover{filter:brightness(1.15)}.gm2-t.on{background:rgba(47,127,224,.25);box-shadow:inset 0 0 0 2px #58a8ff}
.gm2-more{align-self:center;margin-top:6px}
.gm2-pick{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(8,12,20,.6);box-shadow:inset 0 0 0 1px rgba(214,170,90,.3)}
.gm2-pick img{width:48px;height:48px;object-fit:contain;image-rendering:pixelated;flex:none}
.gm2-pick b{display:block;font-size:14.5px;color:var(--gc,#f3e9d2)}.gm2-pick small{display:block;font-size:11.5px;color:var(--muted)}
.gm2-pick.none{opacity:.75}
.gm2-rar{display:flex;flex-wrap:wrap;gap:4px}
.gm2-r{all:unset;box-sizing:border-box;height:28px;padding:0 9px;border-radius:8px;cursor:pointer;font:700 12px "HF Sans","Signika",system-ui,sans-serif;color:var(--gc);background:rgba(20,30,46,.9);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gc) 45%,transparent)}
.gm2-r.on{color:#10151f;background:var(--gc);box-shadow:none}
.gm2 .du-lb>span{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
.gm2-mode{margin:2px 0 0}.gm2 .gm2-mode .du-s{width:auto;flex:1;min-height:58px}
.gm2-go{width:100%;min-height:44px;font-size:14px;line-height:1.2;white-space:normal;padding:6px 10px}
.gm2-go.pulse{animation:gmGo .8s ease-in-out 2}
@keyframes gmGo{50%{box-shadow:0 0 0 3px #f2c14e,0 0 18px rgba(242,193,78,.8)}}
.gm2-city{align-self:flex-start}
.gm2-h{margin-top:6px}
.gm2-evs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.gm2-ev{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:10px;cursor:pointer;background:rgba(242,193,78,.07);box-shadow:inset 0 0 0 1px rgba(242,193,78,.3)}
.gm2-ev img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated;flex:none}
.gm2-ev b{display:block;font-size:12.5px;color:#ffe08a}.gm2-ev small{display:block;font-size:10.5px;line-height:1.25;color:#b9c3d0}
.gm2-ev:hover{background:rgba(242,193,78,.14)}
.gm2-try{margin-top:12px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(214,170,90,.18)}
.gm2-try summary{cursor:pointer;font-weight:700;color:#f2c14e;display:flex;align-items:center;gap:7px}
.gm2-try summary .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:linear-gradient(#ffd76a,#c7881d);color:#2b1702;font-size:12px}
@media (max-width:900px){.gm2-cols{grid-template-columns:1fr}.gm2-right{position:static}}
@media (max-width:560px){.gm2-tiles{grid-template-columns:repeat(3,minmax(0,1fr));max-height:52vh}.gm2-t img{width:34px;height:34px}.gm2-cat{height:30px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.gm2-go.pulse{animation:none}}
.gm2-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin-bottom:6px}
.gm2>.gm2-evs{margin-bottom:12px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.gm2-top .gm2-h{margin:0}
.gm2 .gm2-more,.gm2 .gm2-city{height:34px;min-height:0;font-size:13px;padding:0 14px;width:auto}
/* Colunas da tela fixa (07/10 14:57, hud.js Cols): borda de arrastar entre cada coluna e o jogo, ‹ › para esconder e a aba
fina na borda da tela para mostrar de novo. Coluna escondida = --dl/--dr 0 e o jogo ocupa o espaço. */
.dk-grip,.dk-show{display:none}
.hf.dock .dk-grip{display:block;position:absolute;z-index:7;top:calc(var(--dt) + 8px);bottom:10px;width:14px;cursor:col-resize;pointer-events:auto;touch-action:none}
.hf.dock .dk-grip.l{left:calc(var(--dl) - 9px)}
.hf.dock .dk-grip.r{right:calc(var(--dr) - 9px)}
.dk-bar{position:absolute;left:5px;top:50%;width:4px;height:56px;margin-top:-28px;border-radius:2px;background:rgba(214,170,90,.35);transition:background .15s,height .15s}
.hf.dock .dk-grip:hover .dk-bar,.hf.dock .dk-grip.drag .dk-bar,.hf.dock .dk-grip:focus-visible .dk-bar{background:#f2c14e;height:90px;margin-top:-45px}
.hf.dock .dk-grip:focus-visible{outline:none}
.dk-hide{position:absolute;left:-4px;top:2px;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid #b8843e;background:#141c2e;color:#f3ead2;font:700 15px/18px system-ui,sans-serif;cursor:pointer;opacity:.75}
.dk-hide:hover,.dk-hide:focus-visible{opacity:1;background:#24324f;outline:none;box-shadow:0 0 0 2px #f2c14e}
.hf.dock.cols-lh .dk-grip.l,.hf.dock.cols-rh .dk-grip.r{display:none}
.hf.dock.cols-lh .dk-show.l,.hf.dock.cols-rh .dk-show.r{display:grid;place-items:center;position:absolute;z-index:7;top:calc(var(--dt) + 120px);width:18px;height:72px;padding:0;border:1px solid #b8843e;background:linear-gradient(#1c2942,#0e1524);color:#f3ead2;font:700 15px/1 system-ui,sans-serif;cursor:pointer;pointer-events:auto;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.hf.dock.cols-lh .dk-show.l{left:0;border-left:0;border-radius:0 9px 9px 0}
.hf.dock.cols-rh .dk-show.r{right:0;border-right:0;border-radius:9px 0 0 9px}
.hf.dock .dk-show:hover,.hf.dock .dk-show:focus-visible{background:#24324f;outline:none;box-shadow:0 0 0 2px #f2c14e}
.hf.dock.cols-lh .hero-card,.hf.dock.cols-lh .p-chat{display:none!important}
.hf.dock.cols-rh .p-map,.hf.dock.cols-rh .p-missions,.hf.dock.cols-rh .p-loot,.hf.dock.cols-rh .mm-show{display:none!important}
.hf.dock:has(.veil:not([hidden])) .dk-grip,.hf.dock:has(.veil:not([hidden])) .dk-show{display:none}
.hf.dock .hf-stage.arena-on .dk-grip,.hf.dock .hf-stage.arena-on .dk-show,.hf.dock .hf-stage.immersive .dk-grip,.hf.dock .hf-stage.immersive .dk-show{display:none}
/* Botão do chat com a coluna da esquerda escondida (07/10 15:04, hud.js Chat.float): no canto de baixo à esquerda; abre o chat
flutuante logo acima dele. O número vermelho = privados, @ e respostas para você que chegaram com o chat fechado. */
.chatfab{display:none}
.hf.dock.cols-lh .chatfab{display:grid;place-items:center;position:absolute;z-index:8;left:14px;bottom:14px;width:54px;height:54px;padding:0;border-radius:50%;cursor:pointer;pointer-events:auto;
border:2px solid #b8843e;background:radial-gradient(circle at 50% 40%,#22314f,#0e1524);box-shadow:0 3px 10px rgba(0,0,0,.55)}
.hf.dock.cols-lh .chatfab img{width:30px;height:30px;image-rendering:pixelated}
.hf.dock.cols-lh .chatfab:hover,.hf.dock.cols-lh .chatfab:focus-visible{border-color:#f2c14e;outline:none;box-shadow:0 0 0 2px #f2c14e,0 3px 10px rgba(0,0,0,.55)}
.hf.dock.cols-lh .chatfab.on{border-color:#f2c14e;background:radial-gradient(circle at 50% 40%,#3a4f7a,#16213a)}
.hf.dock.cols-lh .chatfab.hot{animation:cfHot 1.4s ease-in-out infinite}
@keyframes cfHot{50%{box-shadow:0 0 0 3px rgba(255,90,78,.75),0 0 16px rgba(255,90,78,.6)}}
.chatfab .badge{right:-6px;top:-6px}
.hf.dock.cols-lh.chat-float .p-chat{display:flex!important;left:10px;right:auto;top:auto;bottom:78px;width:min(380px,calc(100% - 40px));height:min(480px,calc(100% - var(--dt) - 110px));z-index:8;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.hf.dock:has(.veil:not([hidden])) .chatfab{display:none}
.hf.app .fab-chat .badge{right:-8px;top:-8px}
@media (prefers-reduced-motion:reduce){.hf.dock.cols-lh .chatfab.hot{animation:none}}
/* Barras de baixo (07/10 15:14, hud.js Cols.bottom): ▾ ao lado dos menus esconde habilidades e menus; a aba ▴ Menus no pé da tela
traz de volta. As teclas (Espaço, 1, 2, 3, Q, E, R) continuam valendo com as barras escondidas. */
.dk-bot,.dk-botshow{display:none}
.hf.dock .dk-bot{display:grid;place-items:center;position:absolute;z-index:7;right:calc(var(--dr) + 12px);bottom:20px;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid #b8843e;background:#141c2e;color:#f3ead2;font:700 15px/1 system-ui,sans-serif;cursor:pointer;pointer-events:auto;opacity:.8}
.hf.dock .dk-bot:hover,.hf.dock .dk-bot:focus-visible{opacity:1;background:#24324f;outline:none;box-shadow:0 0 0 2px #f2c14e}
.hf.dock.cols-bh .dk-bot{display:none}
.hf.dock.cols-bh .actions,.hf.dock.cols-bh .bottombar,.hf.dock.cols-bh .auto-pop{display:none!important}
.hf.dock.cols-bh .dk-botshow{display:inline-flex;align-items:center;gap:5px;position:absolute;z-index:7;left:var(--cx);bottom:0;transform:translateX(-50%);height:22px;padding:0 14px;border:1px solid #b8843e;border-bottom:0;border-radius:10px 10px 0 0;background:linear-gradient(#1c2942,#0e1524);color:#f3ead2;font:700 12px "HF Sans","Signika",system-ui,sans-serif;cursor:pointer;pointer-events:auto;box-shadow:0 -2px 8px rgba(0,0,0,.45)}
.hf.dock.cols-bh .dk-botshow:hover,.hf.dock.cols-bh .dk-botshow:focus-visible{background:#24324f;outline:none;box-shadow:0 0 0 2px #f2c14e}
.hf.dock:has(.veil:not([hidden])) .dk-bot{display:none}
/* Coluna estreita (07/10 15:16, dono: "igual sidebar collapse, fica só os ícones quando vai chegando para a esquerda"): o chat
mede a própria largura (@container) e as abas viram só o ícone, os botões do topo encolhem; nada quebra de linha. */
.ctabs .ct-ic{display:none;width:18px;height:18px;margin:auto;object-fit:contain;image-rendering:pixelated}
.hf.dock .p-chat{container-type:inline-size;container-name:chat}
@container chat (max-width:340px){
.ctabs{flex-wrap:nowrap}.ctabs button{min-width:0;padding:0}
.ctabs .ct-t{display:none}.ctabs .ct-ic{display:block}
.p-chat .head .t-title{font-size:15px}
.p-chat .head .chat-lang b{display:none}
}
@container chat (max-width:270px){
.p-chat .head .chat-poll{display:none}
.p-chat .head .t-title{font-size:14px}
}
/* Setinhas (07/10 15:17, dono: "mais destacado, centralizado e alinhado"): SVG dourado no meio do botão. */
.chev{display:block;width:14px;height:14px;flex:none;color:#ffd66b;filter:drop-shadow(0 1px 0 rgba(0,0,0,.8))}
.hf.dock .dk-hide{display:grid;place-items:center;left:-6px;top:0;width:26px;height:26px;padding:0;border:1.5px solid #d6a640;background:radial-gradient(circle at 50% 35%,#2a3a5c,#111a2c);opacity:1;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.hf.dock .dk-hide .chev{width:13px;height:13px}
.hf.dock .dk-hide:hover,.hf.dock .dk-hide:focus-visible{background:radial-gradient(circle at 50% 35%,#3c5384,#1a2640);box-shadow:0 0 0 2px #f2c14e,0 0 10px rgba(242,193,78,.55)}
.hf.dock.cols-lh .dk-show.l,.hf.dock.cols-rh .dk-show.r{width:24px;height:84px;border:1.5px solid #d6a640;background:linear-gradient(90deg,#24345a,#121b2e);box-shadow:0 2px 10px rgba(0,0,0,.6),0 0 10px rgba(242,193,78,.25)}
.hf.dock.cols-lh .dk-show.l{border-left:0}.hf.dock.cols-rh .dk-show.r{border-right:0;background:linear-gradient(270deg,#24345a,#121b2e)}
.hf.dock .dk-show .chev{width:16px;height:16px}
.hf.dock .dk-show:hover .chev,.hf.dock .dk-hide:hover .chev,.hf.dock .dk-bot:hover .chev,.hf.dock .dk-botshow:hover .chev{color:#fff3c4}
.hf.dock .dk-bot{width:30px;height:30px;border:1.5px solid #d6a640;background:radial-gradient(circle at 50% 35%,#2a3a5c,#111a2c);opacity:1;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.hf.dock .dk-bot .chev{width:14px;height:14px}
.hf.dock.cols-bh .dk-botshow{height:26px;gap:6px;padding:0 16px;border:1.5px solid #d6a640;border-bottom:0;color:#ffe9a8}
.hf.dock.cols-bh .dk-botshow .chev{width:12px;height:12px}
/* Herói com a coluna estreita: retrato menor para o nome caber. */
.hf.dock .hero-card{container-type:inline-size;container-name:hero}
@container hero (max-width:290px){.hf.dock .hero-card .portrait{width:52px;height:52px}.hf.dock .hero-card .portrait img{width:40px;height:40px}.hf.dock .hero-info .name{font-size:14px}}
/* X do chat flutuante (07/10 15:19, dono: "aqui também colocar um SVG para fechar"): no canto de cima à direita. */
.chat-x{display:none}
.hf.dock.cols-lh.chat-float .p-chat .chat-x{display:grid;place-items:center;position:absolute;z-index:9;right:-10px;top:-10px;width:28px;height:28px;padding:0;border-radius:50%;cursor:pointer;
border:1.5px solid #d6a640;background:radial-gradient(circle at 50% 35%,#2a3a5c,#111a2c);color:#ffd66b;box-shadow:0 2px 8px rgba(0,0,0,.6)}
.chat-x svg{width:13px;height:13px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.8))}
.hf.dock.cols-lh.chat-float .p-chat .chat-x:hover,.hf.dock.cols-lh.chat-float .p-chat .chat-x:focus-visible{color:#fff3c4;outline:none;background:radial-gradient(circle at 50% 35%,#3c5384,#1a2640);box-shadow:0 0 0 2px #f2c14e,0 0 10px rgba(242,193,78,.55)}
.hf.dock.cols-lh.chat-float .p-chat{overflow:visible}
/* Amuleto do Ouro no balão dos mapas PvP do Mapa do mundo (07/10 16:15, dono: "no Mundo, no PvP, aparece também a opção de já comprar o amuleto") */
.am-ic.mid{width:30px;height:30px}
.wm-am{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;margin:6px 0 8px;padding:7px 9px;border-radius:10px;background:rgba(242,193,78,.08);box-shadow:inset 0 0 0 1px rgba(242,193,78,.35)}
.wm-am.on{background:rgba(79,224,138,.08);box-shadow:inset 0 0 0 1px rgba(79,224,138,.4)}
.wm-amt{display:flex;flex-direction:column;gap:1px;min-width:0}.wm-amt b{font-size:12.5px;color:#f2c14e}.wm-am.on .wm-amt b{color:#7ff0a8}
.wm-amt small{font-size:11px;line-height:1.3;color:#c9d2de}
.wm-am .buy{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;width:auto;min-width:0;height:30px;padding:0 10px;font-size:12px}.wm-am .buy img{width:14px;height:14px;image-rendering:pixelated}
/* Guarda do corpo a corpo na ficha do herói (07/10, server content.ts MELEE_GUARD) */
.hp2-guard{display:flex;align-items:flex-start;gap:8px;margin:6px 0 8px;padding:7px 10px;border-radius:10px;background:rgba(143,211,255,.07);box-shadow:inset 0 0 0 1px rgba(143,211,255,.3);font-size:12.5px;line-height:1.35;color:#d6e2ef}
.hp2-guard img{width:18px;height:18px;flex:none;image-rendering:pixelated;margin-top:1px}.hp2-guard b{color:#bfe6ff}
/* "O que cai" na janela por cima (07/10 16:50, dono: "ajustar essas informações no modal, remover esse scroll"): mais largo, a
tabela de raridade à esquerda e as chances em grade de 2 colunas à direita; tudo cabe sem rolar. Celular: uma coluna. */
.fz-pop:has(.md-cols){width:min(900px,100%)}
.fz-pop .md-cols{display:grid;grid-template-columns:minmax(250px,310px) minmax(0,1fr);gap:16px;align-items:start}
.fz-pop .md-r{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start;padding-top:30px}
.fz-pop .md-r .md-ch{margin:0;padding:5px 8px;gap:8px}
.fz-pop .md-r .md-ch b{font-size:13.5px}
.fz-pop .md-r .md-ch>span{font-size:12px;line-height:1.15}
.fz-pop .md-ch+.md-ch{margin-top:0}
.fz-pop .md-h{padding-right:28px}
.fz-pop .wm-pvn{margin:10px 0 0}
.hf.app .fz-pop .md-cols{grid-template-columns:1fr;gap:10px}
.hf.app .fz-pop .md-r{padding-top:0}
@media (max-width:520px){.fz-pop .md-r{grid-template-columns:1fr}}
/* 07/10 20:11 (dono: "essa parte tá muito ruim, muito largo"): no PC, a barra da carteira do Mercado fica numa linha só e do
tamanho do que tem dentro (antes o quadro da carteira esticava até o fim e sobrava um vão). */
.hf:not(.app) .mx .mk-bar{flex-wrap:wrap;align-items:center;gap:6px;padding:6px;width:fit-content;max-width:100%;border-radius:10px}
.hf:not(.app) .mx .wchip{flex:none;gap:8px;height:38px;padding:0 6px 0 8px}
.hf:not(.app) .mx .wchip img{width:24px;height:24px}
.hf:not(.app) .mx .wchip > div{flex:none;flex-direction:row;align-items:baseline;gap:7px}
.hf:not(.app) .mx .wchip b{font-size:13.5px}
.hf:not(.app) .mx .wchip small{font-size:11px}
.hf:not(.app) .mx .wchip .buy,.hf:not(.app) .mx .wchip .buy:only-of-type{width:auto;height:28px;padding:0 11px;font-size:12px}
.hf:not(.app) .mx .mk-meta{flex:none;flex-direction:row;align-items:center;gap:6px;height:38px;padding:0 11px}
.hf:not(.app) .mx .mk-meta small{font-size:11px}
.hf:not(.app) .mx .mk-meta b{font-size:13px;white-space:nowrap}
.hf:not(.app) .mx .mk-verif{flex-direction:row;align-items:baseline;gap:6px}
.hf:not(.app) .mx .mk-verif em{font-size:10.5px}
/* 07/10 20:22 (dono: "parte de pesquisa também muito largura grande"): no computador a busca fica na linha do título "Anúncios",
à direita e com largura limitada; no celular desce para a linha de baixo, na largura toda. */
.mx-h{align-items:center}
.mx-h .mx-bar{flex:0 1 460px;margin-left:auto;min-width:0}
.mx:not(.app) .mx-h .ig-note{margin-left:0;font-size:11.5px}
.mx.app .mx-h .mx-bar{flex:1 1 100%;margin-left:0;order:3}
/* 07/10: "Conectar só com o login" do Discord (quando o Discord pede para verificar a conta). */
.dsc-basic{margin:-2px 0 4px;padding:0 4px;font-size:12px;line-height:1.4;color:#a9b6c7}
.dsc-basic .lnk{background:none;border:0;padding:0 2px;color:#8fc1ff;text-decoration:underline;cursor:pointer;font:700 12px "HF Sans","Signika",system-ui,sans-serif}
.dsc-basic .lnk:hover{color:#b5d6ff}
/* Fusão de misturados (07/10): cores, botões de marcar e o "?" do resultado. */
.fu-mr{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}.fu-mr .tab{display:inline-flex;align-items:center;gap:6px}.fu-mr .tab b{font-size:11px;opacity:.8}
.fu-mr .tab.r1{color:#7ee08a}.fu-mr .tab.r2{color:#6fb6ff}.fu-mr .tab.r3{color:#c48dff}.fu-mr .tab.r4{color:#ffb547}
.fu-mxb{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.fu-mxout{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.fu-mxout>b{font:800 30px/1 "HF Title",Georgia,serif;color:#ffe07a;text-shadow:0 2px 0 #3a2a10}
.fu-mxout small{font-size:10.5px;color:#a9b6c7}
/* Mercado em diamantes e vitrine (08/10) */
.mx-pr.gem{color:#9fe3ff}
.mk-meta.mk-gems b{color:#9fe3ff}
.mkb-p .mkb-pay{display:block;margin-top:2px;color:#9fb0c8;font-size:11.5px}
.mkb-go.sure{background:linear-gradient(#5fd38a,#2f9a5c);border-color:#7ee6a6;color:#06240f;text-shadow:none}
.mk-tz{display:flex;align-items:center;gap:10px;width:100%;margin:10px 0 0;padding:8px 12px;border:0;border-radius:10px;background:rgba(79,195,255,.08);box-shadow:inset 0 0 0 1px rgba(79,195,255,.35);color:#dbe8f7;font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.mk-tz:hover{background:rgba(79,195,255,.14)}
.mk-tz img{width:26px;height:26px;flex:none;image-rendering:pixelated}
.mk-tz>span{flex:1;min-width:0;line-height:1.35}
.mk-tz b{color:#ffe7a6}
.mk-tz i{flex:none;font-style:normal;font-size:20px;color:#9fe3ff}
.gx-sg{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0 0 6px;padding:6px 10px;border-radius:8px;background:rgba(79,195,255,.07);border:1px solid rgba(79,195,255,.28);font-size:13px}
.gx-sg>span{flex:1;min-width:0}
.gx-sg b{color:#9fe3ff}
.gx-sg small{color:#9fb0c8}
/* Arauto IA no chat (08/10): a resposta do bot em azul, com o nome marcado */
.clog p.ann.bot{background:rgba(79,195,255,.09)!important;border-left:2px solid rgba(79,195,255,.6)}
.clog p.ann.bot span{color:#d9f1ff}
.clog p.ann.bot .who{color:#7fd3ff}
.clog p.ann.bot .who::before{content:'🤖 '}
/* Pesca (08/10): a janela do Pescador Tião, no jeito da Fazenda. A cena é o píer do Porto (recorte 320x160 do chão da cidade,
pesca_porto.png); --k = largura da cena / 320 (wire_pesca), então os bonecos crescem junto com a cena. */
.pc-scene{position:relative;aspect-ratio:2/1;max-width:100%;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px #34465f,0 6px 16px rgba(0,0,0,.35);margin-bottom:8px;--k:1.8;--hs:.5}
.pc-bg{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;max-width:none}
.pc-old{position:absolute;left:31%;top:45%;width:calc(var(--k)*40px);height:calc(var(--k)*40px);translate:-50% -78%;background:url(assets/pesca_velho.png) 0 0/1000% 100% no-repeat;image-rendering:pixelated;animation:pcOld 1.6s steps(10) infinite;filter:drop-shadow(0 2px 1px rgba(0,0,0,.35))}
@keyframes pcOld{from{background-position:0 0}to{background-position:111.111% 0}}
.pc-hero{position:absolute;left:74.4%;top:51.3%;width:0;height:0;z-index:1}
.pc-hero>*{position:absolute!important;bottom:0;left:0;translate:-50% 0;scale:var(--hs);transform-origin:50% 100%;max-width:none!important;max-height:none!important}
.pc-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.pc-svg .pc-rodg{transform-box:view-box;transform-origin:245px 70px}
.pc-svg .pc-rodg.on{animation:pcRodCast .9s cubic-bezier(.3,.7,.3,1) both,pcRodSway 3.2s ease-in-out .9s infinite}
.pc-scene.bite .pc-svg .pc-rodg.on{animation:pcRodBite .45s ease-in-out 4}
@keyframes pcRodCast{0%{transform:rotate(-55deg)}25%{transform:rotate(-55deg)}70%{transform:rotate(8deg)}100%{transform:rotate(0)}}
@keyframes pcRodSway{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.8deg)}}
@keyframes pcRodBite{0%,100%{transform:rotate(0)}50%{transform:rotate(3.5deg)}}
.pc-svg .pc-rod line{stroke-linecap:round}.pc-svg .pc-rodp{stroke:#8a5a2b;stroke-width:1.15}.pc-svg .pc-grip{stroke:#3d2410;stroke-width:2.1}.pc-svg .pc-reel{fill:#9aa3ad;stroke:#4a5560;stroke-width:.45}
.pc-svg .pc-line{stroke:rgba(255,255,255,.75);stroke-width:.45}
.pc-svg .pc-bob{animation:pcBob 2.4s ease-in-out infinite}
.pc-svg .pc-ring{fill:none;stroke:rgba(220,240,255,.7);stroke-width:.5;transform-box:fill-box;transform-origin:center;animation:pcRing 2.4s ease-out infinite}
@keyframes pcBob{0%,100%{transform:translateY(0)}50%{transform:translateY(1.3px)}}
@keyframes pcRing{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.pc-scene.bite .pc-bob{animation:pcBite .45s ease-in-out 4}
@keyframes pcBite{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.pc-jump{position:absolute;left:84%;top:74%;width:calc(var(--k)*48px);height:calc(var(--k)*32px);translate:-50% -70%;background:url(assets/pesca_pulo.png) 0 0/900% 100% no-repeat;image-rendering:pixelated;opacity:0;z-index:1;pointer-events:none}
.pc-jump.go{animation:pcJumpF 1s steps(9) 1,pcJumpO 1s linear 1}
@keyframes pcJumpF{from{background-position:0 0}to{background-position:112.5% 0}}
@keyframes pcJumpO{0%,100%{opacity:1}}
.pc-tag{position:absolute;left:8px;bottom:8px;z-index:3;display:flex;flex-direction:column;gap:1px;max-width:calc(100% - 16px);padding:6px 10px;border-radius:9px;background:rgba(8,14,26,.78);box-shadow:inset 0 0 0 1px rgba(127,176,255,.35);line-height:1.25}
.pc-tag b{font-size:13px;color:#e8edf5}.pc-tag small{font-size:11.5px;color:#a9bad2}
.pc-scene.on .pc-tag{box-shadow:inset 0 0 0 1px rgba(127,224,143,.55)}
.pc-scene:not(.on) .pc-old{animation-duration:2.4s}
@media (prefers-reduced-motion:reduce){.pc-old,.pc-svg .pc-bob,.pc-svg .pc-ring,.pc-jump.go,.pc-svg .pc-rodg.on{animation:none}.pc-scene .pc-svg .late{opacity:1}}
.pc-acts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.pc-acts .buy{width:auto;flex:1 1 200px}
.pc-h{margin-top:10px}
.pc-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pc-bait.on,.pc-rod.on{box-shadow:inset 0 0 0 1px rgba(127,224,143,.75),0 0 12px rgba(127,224,143,.16)}
.pc-rod.lock .ic{opacity:.8}
.pc-bb{flex-wrap:wrap}
.pc-bb>.buy{flex:1 1 100%}
.pc-bb .hb2-sq{display:flex;gap:8px;align-items:center;flex:1 1 100%}
.pc-bb .hb2-sq .buy{flex:1 1 auto}
.pc-pk{font-size:10.5px;color:#8a98ad;flex-basis:100%}
.pc-hand{font-size:13px;font-weight:700;padding:6px 0}
.pc-log{display:flex;flex-wrap:wrap;gap:6px}
.pc-lg{width:44px;height:44px;display:grid;place-items:center;border-radius:9px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px currentColor}
.pc-lg img{width:38px;height:38px;image-rendering:pixelated}
.pc-oddsel{margin-bottom:8px}
.pc-rars{display:flex;flex-direction:column;gap:8px}
.pc-rar{padding:8px 10px;border-radius:10px;background:linear-gradient(180deg,rgba(30,42,66,.92),rgba(15,21,36,.92));box-shadow:inset 0 0 0 1px #34465f}
.pc-rh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.pc-rh b{font-size:14px}.pc-rh span{font-size:12px;color:#c2cee0}
.pc-fl{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px}
.pc-f{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;border-radius:9px;background:rgba(0,0,0,.22)}
.pc-fi{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:8px;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);box-shadow:inset 0 0 0 1px currentColor}
.pc-fi img{width:46px;height:46px;image-rendering:pixelated}
.pc-f:not(.has) .pc-fi img{filter:brightness(.55) saturate(.6)}
.pc-ft{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.pc-ft b{font-size:12.5px;color:#e8edf5}.pc-ft small{font-size:11px;color:#9aa7bb}
.pc-pzs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
.pc-pz{display:grid;grid-template-columns:30px 1fr;gap:0 8px;align-items:center;padding:6px 10px;border-radius:9px;background:rgba(0,0,0,.22)}
.pc-pz img{grid-row:1/3;width:28px;height:28px;object-fit:contain;image-rendering:pixelated}
.pc-pz b{font-size:12.5px}.pc-pz small{font-size:11px;color:#9aa7bb}
.pc-task .fm-n small{max-width:260px}
.pc-ph{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:linear-gradient(180deg,rgba(30,42,66,.92),rgba(15,21,36,.92));box-shadow:inset 0 0 0 1px #34465f;margin-bottom:8px}
.pc-lv{display:flex;flex-direction:column;align-items:center;line-height:1}
.pc-lv small{font-size:11px;color:#9aa7bb}
.pc-xp{flex:1 1 220px;display:flex;flex-direction:column;gap:4px}
.pc-xp .fm-prog{height:9px}
.pc-xp .fm-prog i{background:linear-gradient(90deg,#2f8fd0,#7fd3ff)}
.pc-xp small{font-size:11.5px;color:#9aa7bb}
.pc-ph .buy{width:auto}
.pc-buys{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px;margin-bottom:8px}
.pc-buy{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:10px;background:linear-gradient(180deg,rgba(40,48,80,.95),rgba(18,22,40,.95));box-shadow:inset 0 0 0 1px #4a5a86}
.pc-buy.pc-plus{background:linear-gradient(180deg,rgba(74,56,18,.95),rgba(34,24,8,.95));box-shadow:inset 0 0 0 1px #c99a3a,0 0 14px rgba(255,190,60,.14)}
.pc-bt{display:flex;gap:10px;align-items:flex-start}
.pc-bt img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated;flex:none}
.pc-bt span{display:flex;flex-direction:column;gap:2px}
.pc-bt b{font-size:14px}.pc-bt small{font-size:11.5px;color:#c9c2b0;line-height:1.3}
.pc-buy .buy{width:100%}
.pc-pets{display:flex;flex-wrap:wrap;gap:6px}
.pc-pet{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;width:68px;padding:5px 4px;border-radius:8px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.pc-pet img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.pc-pet small{font-size:10px;color:#d8cfb8;text-align:center;line-height:1.1}
.pc-pet.on{background:rgba(255,200,80,.2);box-shadow:inset 0 0 0 2px #ffcf6a}
.pc-own{margin:0 0 8px}
.pc-pts{margin:0 0 8px;font-size:12px}
.pc-pts b{font-weight:700}
.pc-track{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}
.pc-lvl{flex:none;width:72px;display:flex;flex-direction:column;gap:4px;align-items:stretch;text-align:center;opacity:.6}
.pc-lvl.open{opacity:1}
.pc-lvl>b{font-size:12px;color:#9aa7bb}
.pc-lvl.cur>b{color:#7fd3ff}
.pc-rw{position:relative;min-height:62px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px;padding:4px;border-radius:8px;background:rgba(30,42,66,.9);box-shadow:inset 0 0 0 1px #34465f}
.pc-rw.p{background:rgba(70,52,16,.92);box-shadow:inset 0 0 0 1px #8a6a2a}
.pc-rw.p.lock{filter:grayscale(.6) brightness(.8)}
.pc-rw.got{opacity:.55}
.pc-rw>i{position:absolute;right:3px;top:1px;font-style:normal;color:#8fe28a;font-weight:800;font-size:13px}
.pc-none{color:#56647a}
.pc-g{display:flex;flex-direction:column;align-items:center;line-height:1}
.pc-g img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.pc-g b{font-size:11px;color:#ffe9b0}
.pc-me{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:linear-gradient(180deg,rgba(30,42,66,.92),rgba(15,21,36,.92));box-shadow:inset 0 0 0 1px #34465f;margin-bottom:8px}
.pc-me>span:first-child{display:flex;flex-direction:column}
.pc-me small{font-size:12px;color:#9aa7bb}
.pc-wk{font-size:12px;color:#c2cee0}
.pc-prz{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px;margin-bottom:8px}
.pc-prz>span{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px;border-radius:9px;background:rgba(0,0,0,.22);font-size:12px}
.pc-rank{display:flex;flex-direction:column;gap:4px}
.pc-rr{display:grid;grid-template-columns:44px minmax(0,1fr) auto 70px;gap:8px;align-items:center;padding:7px 12px;border-radius:9px;background:rgba(0,0,0,.22);font-size:13px}
.pc-rr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-rr small{color:#9aa7bb}
.pc-rr>b:last-child{text-align:right;color:#ffe9b0}
.pc-rr.me{box-shadow:inset 0 0 0 1px #7fb0ff;background:rgba(47,111,208,.18)}
.pc-rr.top1>b:first-child{color:#ffd54a}.pc-rr.top2>b:first-child{color:#d9e1ec}.pc-rr.top3>b:first-child{color:#e0a46a}
.ig.fm.pc .ig-cat{position:relative}
.ig.fm.pc .ig-cat .badge{position:absolute;top:4px;right:6px}
.ig.fm.pc.app .pc-grid,.ig.fm.pc.app .pc-fl{grid-template-columns:1fr}
.ig.fm.pc.app .fg3-cats{grid-template-columns:repeat(5,1fr)}
/* Herói pescando (08/10, PixelLab): 9 quadros de 48x48 (pés na linha 44). Lança a linha (0-5) e fica segurando (6-8). */
.pc-hspr{position:absolute;left:74.4%;top:51.3%;z-index:1;width:calc(var(--k)*60px);height:calc(var(--k)*60px);translate:-50% -91.7%;background:0 0/900% 100% no-repeat;image-rendering:pixelated;filter:drop-shadow(0 2px 1px rgba(0,0,0,.35))}
.pc-hspr.on{animation:pcCast .8s steps(6) forwards,pcHold 1.6s steps(3) .8s infinite}
@keyframes pcCast{from{background-position:0 0}to{background-position:75% 0}}
@keyframes pcHold{from{background-position:75% 0}to{background-position:112.5% 0}}
.pc-svg .late{opacity:0;animation:pcLineIn .25s .75s forwards}
.pc-svg .pc-bob.late{animation:pcLineIn .25s .75s forwards,pcBob 2.4s ease-in-out 1s infinite}
@keyframes pcLineIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pc-hspr.on{animation:none;background-position:100% 0}.pc-svg .late{animation:none;opacity:1}}
.pc-scene.bite .pc-svg .pc-bob{animation:pcBite .45s ease-in-out 4;opacity:1}
/* Passe de Batalha (08/10): nível com novidade da Pesca e o baú junto; o baú fica pequeno no canto do quadrado. */
.ps-cell img.ps-more{position:absolute;left:3px;top:3px;width:22px!important;height:22px!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
/* Advertências da equipe em Configurações › Conta (08/10) */
.cfg-strike{align-items:flex-start;background:rgba(255,120,90,.1);box-shadow:inset 0 0 0 1px rgba(255,140,110,.45)}
.cfg-strike b{color:#ffb29a}.cfg-strike ul{margin:4px 0;padding-left:18px;font-size:13px;line-height:1.4}.cfg-strike small{color:#ffcfb8}
.hf-strike-ov{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,8,14,.72)}
.hf-strike{max-width:420px;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:20px 18px;border-radius:14px;background:linear-gradient(180deg,#2a1414,#170c0c);box-shadow:inset 0 0 0 2px #d9583f,0 20px 50px rgba(0,0,0,.6)}
.hf-strike img{width:48px;height:48px;image-rendering:pixelated}.hf-strike b{color:#ffb29a;font-size:20px}
.hf-strike p{margin:0;color:#f6e3d8;font-size:15px;line-height:1.45}.hf-strike .hf-strike-warn{color:#ff8f78;font-weight:700}
.hf-strike .buy{min-width:140px}
/* Dois passes (08/10): a escolha ao abrir o Passe e a barra para trocar entre o de Batalha e o de Pesca */
.win-head .pss-bar{display:flex;gap:6px;flex:none;margin-left:14px}
.pss-tab{display:flex;align-items:center;gap:6px;padding:5px 12px;border:0;border-radius:8px;cursor:pointer;font-family:inherit;font-weight:600;font-size:13px;line-height:1;color:#d9cdb3;background:rgba(20,15,10,.7);box-shadow:inset 0 0 0 1px rgba(242,193,78,.3)}
.pss-tab img{width:22px;height:22px;image-rendering:pixelated}.pss-tab.on{color:#2a1605;background:linear-gradient(#ffe27a,#f2b93c)}
.pc-only .fg3-cats{display:none}
/* Escolha do passe (08/10 12:18, dono: "deixar igual a de eventos, uma coisa mais bonita"): o cartão grande dos Eventos (ev-big). */
.pss2{display:flex;flex-direction:column;gap:10px}
.pss2-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.pss2-card{display:flex;flex-direction:column;cursor:pointer;transition:box-shadow .15s,transform .15s}
.pss2-card:hover{box-shadow:inset 0 0 0 1px var(--ec),0 0 24px color-mix(in srgb,var(--ec) 30%,transparent);transform:translateY(-1px)}
.pss2-card .ev-hero{height:auto;min-height:0;padding:10px 16px 10px}
.pss2-card .ev-hero img{width:84px;height:84px;margin:-4px -4px -4px 0}
.pss2-card .ev-title{font-size:23px}.pss2-card .ev-ht{gap:4px}.pss2-card .ev-sub{font-size:12px}
.pss2-card .ev-body{flex:1;gap:7px;padding:10px 14px 12px}
.pss2-card .ev-foot2{margin-top:auto;padding-top:2px}
.pss2-card.dim .ev-hero{filter:saturate(.7) brightness(.9)}
.pss2-h{font-size:10.5px;margin-bottom:-2px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:color-mix(in srgb,var(--ec) 80%,#fff)}
.pss2-how{gap:5px}.pss2-how .ev-chip{font-size:12px;padding:2px 8px;color:#d7e0ee}.pss2-how .ev-chip img{width:18px;height:18px}
.pss2-lv{display:flex;flex-direction:column;gap:5px;padding:7px 10px;border-radius:10px;background:#0d1628;border:1px solid #25355a}
.pss2-lt{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pss2-lt b{font-size:14px;color:#fff}.pss2-lt b small{color:#8d9ab0;font-size:12px;font-weight:600}
.pss2-pt{margin-left:auto;font-size:12px;color:#9aa6b8}
.pss2-tag{padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;background:#1b2740;color:#b7c1d3}
.pss2-tag.tp{background:#3a2a0c;color:#ffd36b;box-shadow:inset 0 0 0 1px rgba(255,211,107,.4)}
.pss2-tag.tr{background:linear-gradient(90deg,#4a2f0a,#3b1d4a);color:#ffe08a;box-shadow:inset 0 0 0 1px rgba(255,224,138,.4)}
.pss2-bar{height:7px}.pss2-bar i{background:linear-gradient(90deg,color-mix(in srgb,var(--ec) 65%,#fff),var(--ec))}
.pss2-go{width:100%;min-height:38px;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px}
.pss2-go .badge{position:static;transform:none}
.pss2-soon{margin:0;font-size:12.5px;padding:7px 10px;border-radius:10px;background:#0d1628;border:1px dashed #2c3f66}
@media (max-width:700px){.pss2-cols{grid-template-columns:1fr}.pss2-card .ev-hero{min-height:130px;padding:12px 14px}.pss2-card .ev-hero img{width:104px;height:104px}.pss2-card .ev-title{font-size:22px}.pss2-card .ev-body{padding:12px 14px 14px}}
/* O que cada linha dá (08/10 12:27): Grátis, Premium e Premium + Reforço, um embaixo do outro. */
.pss2-lns{display:flex;flex-direction:column;gap:5px}
.pss2-ln{align-items:center;gap:4px;padding:5px 7px;border-radius:10px;background:#0d1628;border:1px solid #1f2d4a}
.pss2-ln>.pss2-tag{white-space:nowrap;margin-right:2px}
.pss2-ln .ev-chip{padding:2px 7px;font-size:11.5px;gap:4px;background:#111d33}.pss2-ln .ev-chip img{width:16px;height:16px}.pss2-ln .ev-chip b{color:#fff}
.pss2-more{align-self:center;font-size:11.5px;color:#ffe08a;font-weight:600}
.pss2-note{margin:0}
/* Passe de Batalha (08/10 12:30): três cartões embaixo, Grátis, Premium e Premium + Reforço. */
.ps-buy.ps-free{background:linear-gradient(180deg,rgba(30,60,96,.5),rgba(12,18,32,.85));box-shadow:inset 0 0 0 1px rgba(95,170,255,.45)}
.ps-buy.ps-free li::marker{color:#8cc8ff}
.ps-buys.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ps4:not(.app) .ps-buys.three .ps-buy{flex-direction:column;align-items:stretch;gap:6px}
.ps4:not(.app) .ps-buys.three .ps-pay{width:auto;margin-top:auto}
.ps4:not(.app) .ps-buys.three .ps-pay .buy{height:32px}
.ps-in{display:block;text-align:center;font-size:12.5px;font-weight:700;color:#9fe0a8;line-height:1.3}
.ps.app .ps-buys.three{grid-template-columns:1fr}
@media (max-width:1100px){.ps-buys.three{grid-template-columns:1fr}}
/* Celular: a troca Batalha/Pesca no alto da janela fica só com os ícones, para o X de fechar caber. */
@media (max-width:560px){.win-head .pss-bar{margin-left:8px;gap:4px}.win-head .pss-tab{font-size:0;gap:0;padding:5px 8px}.win-head .pss-tab img{width:24px;height:24px}}
/* Destaque do chat com o item (08/10 12:26): a miniatura embaixo do aviso, que abre a ficha. */
.citem{display:flex;align-items:center;gap:8px;margin-top:6px;padding:4px 10px 4px 4px;border:0;border-radius:10px;cursor:pointer;font:inherit;color:inherit;text-align:left;max-width:100%;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,214,107,.3)}
.citem:hover{box-shadow:inset 0 0 0 1px #ffd66b,0 0 12px rgba(255,214,107,.25)}
.citem .ithumb{width:42px;height:42px}
.citem-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}.citem-row .citem{margin-top:0;min-width:0}.citem-row .citem-buy{flex:none}
.citem-t{display:flex;flex-direction:column;gap:1px;min-width:0}.citem-t b{font-size:12.5px;line-height:1.2}.citem-t small{font-size:11px;color:#c9b98f}
/* Passe de Pesca (08/10 12:30): lista longa em duas colunas e a comida do pet do Reforço pequena. */
.ps4:not(.app) .ps-buys.three .ps-buy ul.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 12px}
.ps-petf{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:4px;font-size:12px;color:#ffe08a}
.ps-petf span{flex-basis:100%}
.ps-petf .pc-pet{width:34px;height:34px;padding:2px;display:grid;place-items:center;border-radius:8px;border:0;cursor:pointer;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(255,214,107,.3)}
.ps-petf .pc-pet img{width:26px;height:26px;image-rendering:pixelated}.ps-petf .pc-pet.on{box-shadow:inset 0 0 0 2px #ffd66b,0 0 10px rgba(255,214,107,.4)}
/* Sem rolar no PC (08/10 15:33, dono: "ajustar para não ter scroll"; 15:38: "não gostei do comprar assim, coloque embaixo"): o botão
de comprar continua embaixo; a comida do pet fica numa linha só (frase e ícones lado a lado) e a trilha, o topo e os espaços
ficam um pouco mais baixos. */
.ps4{gap:8px}
.ps4:not(.app) .ps-top{padding:7px 16px}
.ps4:not(.app) .ps-task{padding:6px 10px}
.ps4:not(.app) .ps-grid{grid-template-rows:62px 62px 30px 62px;padding:6px 12px 6px 0;background:linear-gradient(180deg,rgba(255,200,80,.07) 0 62px,rgba(155,92,255,.10) 62px 124px,transparent 124px 154px,rgba(80,140,255,.06) 154px 216px) content-box}
.ps4:not(.app) .ps-col{grid-template-rows:62px 62px 30px 62px}
.ps4:not(.app) .ps-col::before{top:137px}
.ps4:not(.app) .ps-cell{width:55px;height:55px}.ps4:not(.app) .ps-cell>img,.ps4:not(.app) .ps-petcyc{width:38px;height:38px}
.ps4:not(.app) .ps-petf{flex-wrap:nowrap;gap:4px;margin-top:2px}
.ps4:not(.app) .ps-petf span{flex:0 1 auto;white-space:nowrap;margin-right:2px}
.ps4:not(.app) .ps-petf .pc-pet{width:28px;height:28px;padding:1px;flex:none}.ps4:not(.app) .ps-petf .pc-pet img{width:22px;height:22px}
/* Balão em cada item da soma (08/10 15:38, dono: "quando passar o mouse em cima aparece o que é cada item"). */
.ps-buy li[data-sumtip]{cursor:help}.ps-buy li[data-sumtip]:hover{color:#fff}
/* USDC só na rede Base (08/10 13:43: jogador tentou pagar pela Solana no Phantom). */
.wpay-net{display:flex;gap:10px;align-items:flex-start;margin:8px 0;padding:10px 12px;border-radius:10px;background:rgba(255,170,60,.1);box-shadow:inset 0 0 0 1px rgba(255,170,60,.55)}
.wpay-net img{width:28px;height:28px;flex:none;image-rendering:pixelated}
.wpay-net div{display:flex;flex-direction:column;gap:3px;font-size:12.5px;line-height:1.4;color:#f3e2c4}.wpay-net b{color:#ffcf6b}
/* Pesca nova (08/10 13:43, dono: "esta muito feio... ver em tempo real quem esta pescando... melhorar UI/UX"). */
.pc2{display:flex;flex-direction:column;gap:10px;min-height:0}
.pc2-bar{display:flex;align-items:stretch;gap:8px}
.pc2-tabs{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;min-width:0}
.pc2-tab{position:relative;display:flex;align-items:center;gap:8px;padding:7px 10px;border:0;border-radius:10px;cursor:pointer;font:inherit;text-align:left;color:#d6deea;background:linear-gradient(180deg,rgba(30,42,66,.92),rgba(15,21,36,.92));box-shadow:inset 0 0 0 1px #34465f;min-width:0}
.pc2-tab img{width:28px;height:28px;flex:none;object-fit:contain;image-rendering:pixelated}
.pc2-tab span{display:flex;flex-direction:column;min-width:0}.pc2-tab b{font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc2-tab small{font-size:11px;color:#9fb0c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc2-tab:hover{box-shadow:inset 0 0 0 1px #5d7aa6}
.pc2-tab.on{background:linear-gradient(180deg,#2f63c9,#2050a8);box-shadow:inset 0 0 0 1px #79a6ff}.pc2-tab.on small{color:#d7e5ff}
.pc2-tab .badge{position:absolute;top:-6px;right:-4px}
.pc2-help{flex:none;width:40px;border:0;border-radius:10px;cursor:pointer;font-family:inherit;font-weight:700;font-size:18px;line-height:1;color:#ffd66b;background:rgba(15,21,36,.92);box-shadow:inset 0 0 0 1px #6b5a2a}
.pc2-help.on{background:#3a2f12}
.pc2-how{padding:10px 14px;border-radius:10px;background:rgba(255,214,107,.07);box-shadow:inset 0 0 0 1px rgba(255,214,107,.3);font-size:12.5px;color:#e6dcc4}
.pc2-how ol{margin:6px 0 0;padding-left:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 18px}
.pc2-closed{margin:0}
.pc2-team{padding:6px 10px;border:1px solid rgba(240,190,80,.35);border-radius:6px;background:rgba(240,190,80,.08);color:#f0c870}
.pc2-main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:12px;align-items:stretch}
.pc2-stage{min-width:0}.pc2-stage .pc-scene{margin-bottom:8px}.pc2-stage .pc-acts{margin:0}
.pc2-live{position:relative;min-height:260px;border-radius:12px;background:linear-gradient(180deg,rgba(16,30,52,.95),rgba(10,17,30,.95));box-shadow:inset 0 0 0 1px #2c4a72}
.pl-in{position:absolute;inset:0;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.pl-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pl-h b{font-size:14px;color:#fff}.pl-h small{margin-left:auto;font-size:11.5px;color:#9fb0c8}
.pl-dot{width:9px;height:9px;border-radius:50%;background:#55657e;flex:none}.pl-dot.on{background:#3ddc84;animation:evDot 1.4s ease-out infinite;box-shadow:0 0 0 0 rgba(61,220,132,.6)}
.pl-sec{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:10.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:#7fb6ff}
.pl-sec .lnk{margin-left:auto;font-size:11px;text-transform:none;letter-spacing:0}
.pl-list,.pl-feed,.pl-top{display:flex;flex-direction:column;gap:4px}
.pl-f{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.04)}
.pl-f.me{box-shadow:inset 0 0 0 1px rgba(255,214,107,.6)}
.pl-f>img{width:22px;height:22px;flex:none;image-rendering:pixelated}
.pl-ft{flex:1;min-width:0;display:flex;flex-direction:column}.pl-ft b{font-size:12.5px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pl-ft small{font-size:11px;color:#9fb0c8}
.pl-n{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}.pl-n b{font-size:13px;color:#ffe08a}.pl-n small{font-size:10px;color:#8796ad}
.pl-c{display:flex;align-items:center;gap:8px;font-size:12px;color:#d6deea}
.pl-ci{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:7px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px currentColor}
.pl-ci img{width:26px;height:26px;image-rendering:pixelated}
.pl-ct{flex:1;min-width:0;line-height:1.3}.pl-ct b[translate]{color:#fff}.pl-c small{font-size:10.5px;color:#8796ad;flex:none}
.pl-t{display:flex;align-items:center;gap:8px;padding:3px 8px;border-radius:7px;font-size:12.5px;background:rgba(255,255,255,.03)}
.pl-t span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e7edf6}.pl-t b:last-child{color:#ffe08a}
.pl-t.p1 b:first-child{color:#ffd66b}.pl-t.p2 b:first-child{color:#d6dde8}.pl-t.p3 b:first-child{color:#e0a36b}.pl-t.me{box-shadow:inset 0 0 0 1px rgba(255,214,107,.6)}
.pl-empty{margin:0;font-size:12px;color:#8796ad}
.pc2-gear{display:flex;flex-direction:column;gap:10px}
.pc2-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}.pc2-h small{font-size:12px;color:#9fb0c8}
.pc2-bal{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px}
.pc2-row{display:grid;gap:8px}.pc2-row.baits{grid-template-columns:repeat(3,minmax(0,1fr))}.pc2-row.rods{grid-template-columns:repeat(4,minmax(0,1fr))}
.pc2-row .hb2-card .hb2-top{padding:8px 10px}.pc2-row .hb2-card .ic{width:36px;height:36px}
.pc2-row .hb2-buy{padding:6px 10px 8px}
.pc2-page{min-width:0}
.pc2.app .pc2-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}.pc2.app .pc2-tab{flex-direction:column;gap:2px;padding:6px 4px;text-align:center}.pc2.app .pc2-tab small{display:none}.pc2.app .pc2-tab b{font-size:11px}
.pc2.app .pc2-main{grid-template-columns:1fr}.pc2.app .pc2-live{min-height:0}.pc2.app .pl-in{position:static;max-height:none}
.pc2.app .pc2-row.baits,.pc2.app .pc2-row.rods{grid-template-columns:1fr}.pc2.app .pc2-how ol{grid-template-columns:1fr}
@media (max-width:1100px){.pc2:not(.app) .pc2-row.rods{grid-template-columns:repeat(2,minmax(0,1fr))}.pc2:not(.app) .pc2-tab small{display:none}}
.pl-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:3px;border-radius:9px;background:rgba(0,0,0,.25)}
.pl-tab{border:0;border-radius:7px;padding:5px 4px;cursor:pointer;font-family:inherit;font-weight:600;font-size:12px;line-height:1.1;color:#9fb0c8;background:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-tab b{color:#ffe08a}.pl-tab.on{color:#fff;background:#2050a8;box-shadow:inset 0 0 0 1px #79a6ff}
.pl-all{align-self:center;font-size:12px;margin-top:2px}
.pc2-bal .fr-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border:0;border-image:none;border-radius:999px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(214,170,90,.35);font-size:12.5px}
.pc2-bal .fr-pill img{width:18px;height:18px;object-fit:contain;image-rendering:pixelated}.pc2-bal .fr-pill small{font-size:10.5px;color:#9aa7bb}
/* Item do Destaque no meio da tela (08/10 15:39): a mesma ficha do Mercado, com a etiqueta em cima. */
.is-card .cdst-lab{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#ffd66b}
/* 08/10 16:34 (dono: "clica fora e não sai, clica no X e não sai"): o #hf-hud não recebe cliques (pointer-events:none) e o modal
herdava isso; os cliques passavam para a janela de baixo. */
.citem-modal,.citem-modal .inv-sheet{pointer-events:auto}
.citem-modal .inv-sheet{z-index:120}
/* Comprar nível do Passe de Pesca (08/10 17:22): o botão pequeno na linha do nível; o segundo toque confirma. */
.hf .ps-lvbuy{all:unset;box-sizing:border-box;cursor:pointer;height:22px;padding:0 9px;display:inline-flex;align-items:center;gap:4px;border-radius:999px;font-size:11.5px;font-weight:800;white-space:nowrap;color:#3a2205;background:linear-gradient(180deg,#f6cd5c,#c08425);box-shadow:inset 0 0 0 1px #ffe08a}
.hf .ps-lvbuy img{width:14px;height:14px;flex:none;image-rendering:pixelated}
.hf .ps-lvbuy:hover{filter:brightness(1.1)}.hf .ps-lvbuy.sure{color:#fff;background:linear-gradient(180deg,#e0603a,#a8321a);box-shadow:inset 0 0 0 1px #ffb08a}
/* Ambiente de teste (08/10): selo do dev.heroesfarm.com.br. */
.hf-devtag{position:fixed;top:4px;left:50%;transform:translateX(-50%);z-index:2147483000;pointer-events:none;padding:3px 9px;border-radius:999px;background:#b3261e;color:#fff;font:800 11px/1.1 system-ui,sans-serif;letter-spacing:.06em;box-shadow:0 1px 0 rgba(0,0,0,.4);opacity:.92}
/* Ilha dos Eventos (09/10): Portal Dourado em pé (65x90, sem esticar), sombra dourada; fechada fica em silhueta com cadeado como as outras. */
.wm-pin.k-event .wm-boss{width:52px;height:72px;left:10px}
.hf.app .wm-pin.k-event .wm-boss{width:44px;height:60px;left:8px}
.wm-pin.k-event .wm-sh{background:radial-gradient(ellipse,rgba(255,200,60,.75),rgba(255,200,60,0) 70%)}
.wm-pin.k-event:not(.lk) .wm-boss{filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(255,200,60,.9))}
.wm-pop.ev .wm-pth{background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#2a2112}
.wm-evn{margin:0;font-size:15px;color:#ffe08a}
.fz-tag.ev{background:#4a3a10;border-color:#ffd65a;color:#ffe9a8}
.wm-pop.ev .fz-mobs,.wm-pop.ev .wm-evn{flex:none;-webkit-line-clamp:6}
/* Evento da Ilha (09/10): painel do topo na arena (largada, relógio, baús, posição e Top 5), o 3-2-1 grande e o botão de voltar. */
.evh-hud{position:absolute;z-index:40;left:0;right:0;top:104px;margin:0 auto;width:fit-content;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:min(420px,calc(100% - 24px))}
.evh-box,.evh-out{pointer-events:auto;min-width:260px;padding:10px 14px;border-radius:12px;background:rgba(14,20,34,.88);border:1px solid #c9902e;box-shadow:0 6px 18px rgba(0,0,0,.45);color:#e9eef7}
.evh-t{display:flex;align-items:center;gap:8px}.evh-t img{width:20px;height:28px;image-rendering:pixelated}.evh-t b{flex:1;color:#ffe08a;font-size:14px}
.evh-x{font-size:11px;padding:2px 8px}
.evh-ph{margin:6px 0 0;display:flex;align-items:center;gap:6px;font-size:14px}.evh-ph b{font-size:18px;color:#fff}.evh-ph img{width:18px;height:18px;image-rendering:pixelated}.evh-ph small{color:#b9c6d8}
.evh-sep{width:1px;height:16px;background:#3a4a66;margin:0 4px}
.evh-sub{margin:2px 0 0;font-size:12px;color:#b9c6d8}.evh-me{margin:6px 0 0;font-size:13px;color:#d6ffe0}
.evh-top{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:12px}
.evh-top li{display:flex;align-items:center;gap:6px}.evh-top li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.evh-top li.me{color:#7dff9a}
.evh-top small{display:flex;align-items:center;gap:3px;color:#b9c6d8}.evh-top small img{width:13px;height:13px}
.evh-out{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.evh-out b{color:#ffe08a}.evh-out span{font-size:12px;color:#b9c6d8}
.evh-big{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);font-family:"HF Title","Alegreya SC",Georgia,serif;font-size:140px;font-weight:900;color:#ffe08a;text-shadow:0 6px 0 #6b3d08,0 0 28px rgba(255,200,60,.8);pointer-events:none}
.evh-big.pop{animation:ev-pop .9s cubic-bezier(.2,1.5,.4,1) both}
@keyframes ev-pop{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}30%{transform:translate(-50%,-50%) scale(1.15);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:.95}}
.hf.app .evh-hud{top:54px}.hf.app .evh-big{font-size:96px}.hf.app .evh-box,.hf.app .evh-out{min-width:220px;padding:6px 10px}.hf.app .evh-top{display:none}
.wm-evok{margin:0;font-size:12.5px;color:#7dff9a}
.wm-pop.ev .wm-gs{flex:none}
.evh-rows{flex:none;display:flex;flex-direction:column;gap:2px;padding:6px 10px;border-radius:8px;background:rgba(0,0,0,.22);border:1px solid #2c3a52}
.evh-r{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;padding:2px 0}
.evh-r span{color:#b9c6d8}.evh-r b{display:flex;align-items:center;gap:4px;text-align:right;color:#f1f4fa}.evh-r b small{color:#8e9bb0;font-weight:600}
.evh-r img{width:16px;height:16px;image-rendering:pixelated}
/* Alquimista (09/10, hud.js Views.alquimia): receita = ícone, nome, efeito, ingredientes (verde tem / vermelho falta) e Criar. */
.alq{display:flex;flex-direction:column;gap:10px}
.alq-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:8px}
.alq-r{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.alq-r.off .alq-ic{filter:grayscale(.6) brightness(.8)}
.alq-ic{width:40px;height:40px;object-fit:contain;image-rendering:pixelated;flex:none}
.alq-b{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:2px}
.alq-b>b{font-size:13.5px;color:#f3e3b5}
.alq-b>small{font-size:11.5px;color:#9fb0c6}
.alq-ing{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.alq-i{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:6px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(229,110,110,.35);font-size:11px;color:#f09a9a}
.alq-i.ok{color:#9fe0a0;box-shadow:inset 0 0 0 1px rgba(110,200,120,.3)}
.alq-i img{width:16px;height:16px;object-fit:contain;image-rendering:pixelated}
.alq-i em{font-style:normal;color:#c9d3e0}
/* 09/10: peixe da receita com a arte dos 3 peixes da raridade (qualquer um serve) e balão ao passar o mouse */
.alq-i[data-mt],.alq-fish{cursor:help}
.alq-i[data-mt]:hover,.alq-fish:hover{box-shadow:inset 0 0 0 1px rgba(242,193,78,.75);background:rgba(242,193,78,.08)}
.alq-fs{display:inline-flex;align-items:center;gap:2px;margin-right:2px;padding:1px 3px;border-radius:4px;background:rgba(99,179,255,.12)}
.alq-fs img{width:18px;height:18px}
.alq-go{display:flex;flex-direction:column;gap:4px;flex:none;min-width:84px}
/* Painel de missão do NPC (09/10, hud.js Talk; dono: "uma quest na tela, transparente e escrito, do que tela toda"): pequeno, por
cima do jogo, à esquerda (no celular, embaixo, acima da barra). Não escurece a tela. */
.qw{position:absolute;z-index:60;left:calc(var(--lw,318px) + 14px);top:96px;width:300px;max-height:calc(100% - 130px);overflow:auto;padding:8px 10px 10px;
background:rgba(8,10,16,.74);border:1px solid rgba(201,154,74,.75);border-radius:6px;box-shadow:0 6px 22px rgba(0,0,0,.45);color:#e8edf5;font-size:12.5px;
backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:flex;flex-direction:column;gap:6px}
.qw[hidden]{display:none}
.qw-h{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(201,154,74,.45);padding-bottom:4px;color:#e9c36b;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:11.5px}
.qw-x{background:none;border:0;color:#e9c36b;font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.qw-t{text-align:center;color:#ffd36a;font-weight:800;font-size:13.5px}
.qw-who{display:flex;align-items:center;gap:8px}
.qw-face{width:34px;height:34px;border-radius:50%;object-fit:cover;image-rendering:pixelated;border:1px solid #c99a4a;background:#142036;flex:none}
.qw-who b{color:#e2b45c;font-size:12.5px}
.qw-say{margin:0;font-size:13px;line-height:1.45;color:#f4f6fa;text-shadow:0 1px 0 #000}
.qw-q{display:flex;align-items:baseline;justify-content:space-between;color:#ffd36a;font-weight:800;margin-top:2px}
.qw-q small{color:#9fb0c6;font-weight:600}
.qw-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.qw-qs{display:flex;gap:6px}.qw-qs button{flex:1;padding:3px 0;font:inherit;font-size:12px;font-weight:700;color:#e9c36b;background:rgba(0,0,0,.35);border:1px solid rgba(201,154,74,.45);border-radius:3px;cursor:pointer}.qw-qs button.on{color:#2a1a06;background:linear-gradient(#ffd36a,#d99a3b)}
.qw-tabs button{padding:4px 0;font:inherit;font-weight:700;color:#cfd8e6;background:rgba(20,40,40,.65);border:1px solid rgba(120,170,160,.5);border-radius:3px;cursor:pointer}
.qw-tabs button.on{color:#fff;background:rgba(30,90,80,.85);border-color:#7fd0bf}
.qw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:#f09a9a}
.qw-list li.ok{color:#9fe0a0}
.qw-list.rw{color:#dfe6f0}
.qw-list small{color:#9fb0c6}
.qw-why{margin:0;font-size:11.5px;color:#e8c27a}
.qw-act{display:flex;gap:6px;flex-wrap:wrap}
.qw-b{flex:1;min-width:120px;padding:6px 8px;font:inherit;font-weight:800;border-radius:4px;cursor:pointer;color:#2a1a06;background:linear-gradient(#ffd36a,#d99a3b);border:1px solid #8a5a17}
.qw-b.blue{color:#fff;background:linear-gradient(#4b8de0,#2a5fae);border-color:#1b3d73}
.qw-b[disabled]{filter:grayscale(.7) brightness(.75);cursor:default}
.qw-more{display:flex;gap:6px}
.qw-more button{flex:1;padding:4px 0;font:inherit;font-size:12px;color:#e9c36b;background:rgba(0,0,0,.35);border:1px solid rgba(201,154,74,.5);border-radius:3px;cursor:pointer}
.qw-more button[disabled]{opacity:.5;cursor:default}
.tk-dots{display:inline-flex;gap:4px;vertical-align:middle}
.tk-dots i{width:6px;height:6px;border-radius:50%;background:#e2b45c;opacity:.35;animation:tkdot 1s infinite}
.tk-dots i:nth-child(2){animation-delay:.15s}.tk-dots i:nth-child(3){animation-delay:.3s}
@keyframes tkdot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@media (max-width:760px){.qw{left:8px;right:8px;top:auto;bottom:calc(74px + env(safe-area-inset-bottom,0px));width:auto;max-height:52%}}
/* 09/10: clicar na linha ↪ da resposta leva até a mensagem respondida e ela pisca em dourado */
.clog .cq.go{cursor:pointer}
.clog .cq.go:hover{color:#ffe3a0;border-left-color:#f2c14e;background:rgba(242,193,78,.08)}
.clog p.jump{animation:cjump 2.4s ease-out}
@keyframes cjump{0%,30%{background:rgba(242,193,78,.32);box-shadow:inset 3px 0 0 #f2c14e}100%{background:transparent;box-shadow:inset 0 0 0 transparent}}
/* 09/10: comandos da equipe no chat (/mover, /banir...): a lista ao digitar "/" e o quadro com as respostas */
.cment .ccmd-o{display:flex;flex-direction:column;gap:1px;font-weight:400}
.cment .ccmd-o b{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:#ffe3a0}
.cment .ccmd-o small{font-size:11px;color:#a9b3c2;white-space:normal;line-height:1.3}
.ccmd{position:absolute;left:0;right:0;bottom:40px;z-index:4;max-height:46%;overflow:auto;padding:6px 8px 8px;border-radius:6px;background:rgba(9,14,24,.96);box-shadow:0 0 0 1px rgba(214,170,90,.55),0 8px 22px rgba(0,0,0,.6);font-size:12.5px}
.ccmd[hidden]{display:none}
.ccmd-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;color:#f2c14e;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.ccmd-r{display:flex;flex-direction:column;gap:2px;padding:5px 6px;border-radius:4px;border-left:3px solid #4fc27a;background:rgba(79,194,122,.08);margin-top:4px}
.ccmd-r.bad{border-left-color:#e05a5a;background:rgba(224,90,90,.1)}
.ccmd-r.old{opacity:.6}
.ccmd-r code{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:#ffe3a0;word-break:break-all}
.ccmd-r span{color:#e9edf4;line-height:1.35}
.ccmd-r ul{margin:4px 0 0;padding-left:16px;color:#c9d3e0;font-size:11.5px;line-height:1.4}
/* 09/10 19:56 (dono, painel de missão: "melhorar, deixar os botões mais destacados"): botão principal dourado com brilho e
pulsando quando dá para entregar; desligado fica cinza-azulado (não parece marrom); abas e botões de baixo com contorno
dourado forte e realce ao passar o mouse. */
.qw-b{padding:9px 10px;font-size:13.5px;letter-spacing:.02em;color:#2a1604;text-shadow:0 1px 0 rgba(255,240,200,.6);background:linear-gradient(#ffe48a,#f2b640 55%,#d48a22);border:1px solid #7a4a0e;border-radius:5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 1px rgba(255,214,106,.35),0 3px 10px rgba(242,182,64,.35);transition:filter .12s,transform .12s,box-shadow .12s}
.qw-b:not([disabled]):hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(255,214,106,.6),0 6px 16px rgba(242,182,64,.5)}
.qw-b:not([disabled]):active{transform:translateY(0)}
.qw-b:not([disabled]):not(.blue){animation:qwPulse 1.8s ease-in-out infinite}
@keyframes qwPulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 1px rgba(255,214,106,.35),0 3px 10px rgba(242,182,64,.35)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 2px rgba(255,214,106,.75),0 0 18px rgba(255,200,80,.6)}}
.qw-b.blue{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.4);background:linear-gradient(#6aa8ff,#3b78d6 55%,#2a59a8);border-color:#163a70;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 10px rgba(59,120,214,.35)}
.qw-b[disabled]{filter:none;animation:none;transform:none;color:#8d99ab;text-shadow:none;background:linear-gradient(#2c3546,#232b3a);border:1px solid #3f4c62;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.qw-tabs button{padding:6px 0;color:#d9c08a;background:rgba(10,14,22,.7);border:1px solid rgba(201,154,74,.55);border-radius:4px;transition:background .12s,color .12s}
.qw-tabs button:hover{background:rgba(242,193,78,.14);color:#ffe3a0}
.qw-tabs button.on{color:#2a1604;background:linear-gradient(#ffd770,#e0a63a);border-color:#8a5a17;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.qw-more button{padding:7px 0;font-weight:800;font-size:12.5px;color:#ffe3a0;background:linear-gradient(rgba(242,193,78,.16),rgba(242,193,78,.05));border:1px solid #c99a4a;border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:background .12s,transform .12s}
.qw-more button:not([disabled]):hover{background:linear-gradient(rgba(242,193,78,.32),rgba(242,193,78,.14));transform:translateY(-1px)}
.qw-qs button{padding:5px 0}
/* 09/10 20:06 (dono: "novidades muito mal feitas: colocar em tópicos, tudo muito junto; mudar esse layout"): seções com etiqueta
colorida e contagem, cada item num cartão com o título em destaque e, nos textos longos, uma frase por tópico. */
.nw3-top{padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid rgba(201,154,74,.25)}
.nw3-sum{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.nw3-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:rgba(255,255,255,.06);color:#c9d3e0}
.nw3-chip b{font-size:12px}
.nw3-chip.add{background:rgba(79,194,122,.14);color:#8fe0a9}.nw3-chip.imp{background:rgba(99,179,255,.14);color:#9cc9ff}.nw3-chip.fix{background:rgba(242,193,78,.14);color:#ffd77a}
.nw3-body{margin:8px 0 12px;font-size:13.5px;line-height:1.55;color:#dfe6f0}
.nw3-sec{--c:#4fc27a;margin:14px 0 4px}
.nw3-sec.imp{--c:#63b3ff}.nw3-sec.fix{--c:#f2c14e}.nw3-sec.thx{--c:#d68cff}
.nw3-sh{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.nw3-tag{padding:3px 10px;border-radius:4px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0d1524;background:var(--c)}
.nw3-n{font-style:normal;font-size:11.5px;font-weight:700;color:var(--c)}
.nw3-sh::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--c),transparent);opacity:.45}
.nw3-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.nw3-it{padding:10px 12px 10px 14px;border-radius:8px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);border-left:3px solid var(--c)}
.nw3-h{display:block;margin-bottom:4px;color:#ffe3a0;font-size:14px;font-weight:800;line-height:1.3}
a.nw3-h{cursor:pointer;text-decoration:none}
.nw3-it p{margin:0;font-size:13px;line-height:1.55;color:#d5dce8}
.nw3-pts{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.5;color:#d5dce8}
.nw3-pts li::marker{color:var(--c)}
/* 09/10: XP de recuperação (+35% até o nível do herói mais alto da conta): a barra de XP ganha brilho dourado */
.bar.xp.catchup{box-shadow:0 0 0 1px rgba(255,214,106,.75),0 0 8px rgba(255,200,80,.45)}
.bar.xp.catchup > i.fill{background:linear-gradient(#ffe9a8 0 14%,#4f9cff 15% 62%,#2a5fae 63%)}
.bar.xp.catchup::after{content:attr(data-cu);position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:9px;font-weight:800;color:#ffe08a;text-shadow:0 1px 0 #000;pointer-events:none}
/* 09/10 20:47 (dono: "aqui vamos mostrar os peixes igual fizemos com itens"): peixe no Destaque do chat e a ficha dele ao clicar */
.cfish-ic{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:8px;background:radial-gradient(circle at 50% 45%,rgba(99,179,255,.28),rgba(0,0,0,.35) 70%);box-shadow:inset 0 0 0 1px rgba(99,179,255,.4)}
.cfish-ic img{width:34px;height:34px;object-fit:contain;image-rendering:pixelated}
.citem.cfish.r3 .cfish-ic{box-shadow:inset 0 0 0 1px #b46cff}.citem.cfish.r4 .cfish-ic{box-shadow:inset 0 0 0 1px #ffb23f;background:radial-gradient(circle at 50% 45%,rgba(255,178,63,.3),rgba(0,0,0,.35) 70%)}
.citem.cfish.r5 .cfish-ic,.citem.cfish.r6 .cfish-ic{box-shadow:inset 0 0 0 1px #ff5d5d,0 0 10px rgba(255,93,93,.35)}
.cfish-modal{position:fixed;inset:0;z-index:118;display:grid;place-items:center;background:rgba(4,8,14,.55)}
.cfish-card{position:relative;width:min(340px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;padding:14px 16px 16px;border-radius:12px;background:#0d1524;box-shadow:0 0 0 1px rgba(214,170,90,.6),0 18px 40px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.cfish-card .tt-u,.cfish-card .tt-sec,.cfish-card .tt-k{align-self:stretch;text-align:left}
.cfish-big{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle,rgba(99,179,255,.3),transparent 70%)}
.cfish-big img{width:80px;height:80px;object-fit:contain;image-rendering:pixelated}
.cfish-r{color:#c9b98f;font-size:12px;margin-top:-4px}
.cfish-x{position:absolute;top:8px;right:8px;border:0;background:none;color:#e9c36b;font-size:16px;cursor:pointer}
/* 09/10: tabela dos heróis nas Novidades (todas as estatísticas e o 1x1 de cada um) */
.nw3-sec.tbl{--c:#e9c36b}
.nw3-note{margin:0 0 8px;font-size:12.5px;line-height:1.5;color:#b9c4d4}
.nw3-tw{overflow-x:auto;border-radius:8px;border:1px solid rgba(201,154,74,.3)}
.nw3-tb{width:100%;border-collapse:collapse;font-size:12.5px;min-width:560px}
.nw3-tb th,.nw3-tb td{padding:6px 8px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap}
.nw3-tb thead th{position:sticky;top:0;background:#1a2130;color:#e9c36b;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.nw3-tb tbody th{color:#ffe3a0;font-weight:800}
.nw3-tb td.num{text-align:right;font-variant-numeric:tabular-nums;color:#dfe6f0}
.nw3-tb tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
.nw3-tb tbody tr:hover{background:rgba(242,193,78,.08)}
/* 09/10 21:11: console da equipe (Shift+Enter, só ADMIN e GM) */
.gmc{position:absolute;z-index:95;left:50%;bottom:118px;transform:translateX(-50%);width:min(620px,calc(100% - 32px));max-height:min(60vh,520px);display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px;border-radius:10px;background:rgba(8,12,20,.95);box-shadow:0 0 0 1px rgba(214,170,90,.7),0 14px 34px rgba(0,0,0,.6);pointer-events:auto}
.gmc[hidden]{display:none}
.gmc-h{display:flex;align-items:baseline;gap:10px;color:#f2c14e}
.gmc-h b{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.gmc-h small{flex:1;color:#8d99ab;font-size:11px}
.gmc-x{border:0;background:none;color:#e9c36b;font-size:15px;cursor:pointer}
.gmc-out{overflow:auto;display:flex;flex-direction:column;gap:2px;font-size:12.5px;min-height:0}
.gmc-out:empty{display:none}
.gmc-hint{display:flex;flex-direction:column;gap:2px}
.gmc-hint:empty{display:none}
.gmc-o{display:flex;flex-direction:column;gap:1px;text-align:left;padding:5px 8px;border:0;border-radius:5px;background:rgba(255,255,255,.04);color:#e9edf4;font:inherit;cursor:pointer}
.gmc-o:hover{background:rgba(242,193,78,.14)}
.gmc-o b{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:#ffe3a0}
.gmc-o small{font-size:11px;color:#a9b3c2;line-height:1.3}
.gmc-f{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;background:#05080e;box-shadow:inset 0 0 0 1px rgba(242,193,78,.45)}
.gmc-p{font-family:ui-monospace,Consolas,monospace;color:#f2c14e;font-weight:800}
.gmc-i{flex:1;min-width:0;border:0;outline:0;background:none;color:#fff;font:14px ui-monospace,Consolas,monospace}
/* 09/10 21:52: comprar Pedra da Sorte e de Bloqueio dentro do Ferreiro; 22:00: chance de pular uma cor na fusão. */
.fg3-tgw{display:flex;gap:6px;align-items:stretch;width:100%}
.fg3-tgw>.fg3-tg{flex:1 1 auto;min-width:0;width:auto}
.fg3-buy{all:unset;box-sizing:border-box;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:68px;padding:4px 10px;border-radius:9px;cursor:pointer;background:linear-gradient(180deg,#2f6fd6,#1f4fa3);box-shadow:inset 0 0 0 1px #5b9bff,0 2px 0 rgba(0,0,0,.35);color:#fff;text-align:center}
.fg3-buy:hover{filter:brightness(1.12)}.fg3-buy:active{transform:translateY(1px)}.fg3-buy[disabled]{opacity:.5;cursor:default}
.fg3-buy small{font-size:10.5px;color:#cfe2ff;letter-spacing:.02em}
.fg3-buy b{display:inline-flex;align-items:center;gap:4px;font-size:13px}.fg3-buy b img{width:13px;height:13px}
.fu-odds{margin:2px 0 0;font-size:12px;color:#9aa7bb;text-align:center}
.fu-odds span{font-weight:700}
.fu-odds .r2{color:#5aa8ff}.fu-odds .r3{color:#c27bff}.fu-odds .r4{color:#ffb347}
/* 09/10 22:00: Fazenda, pedido grande do dia e pedido extra (a cada 4 h). */
.fm-order{position:relative}
.fm-order .fm-tag{position:absolute;top:-8px;left:12px;padding:1px 8px;border-radius:8px;font-size:10.5px;font-weight:700;letter-spacing:.02em;background:#1a2438;box-shadow:inset 0 0 0 1px #34465f;color:#cfd8e6}
.fm-order.big{box-shadow:inset 0 0 0 1px #c9a24a,0 0 12px rgba(242,193,78,.18);margin-top:6px}.fm-order.big .fm-tag{color:#ffe08a;box-shadow:inset 0 0 0 1px #c9a24a}
.fm-order.extra{box-shadow:inset 0 0 0 1px #3f7fbf;margin-top:6px}.fm-order.extra .fm-tag{color:#9fd3ff;box-shadow:inset 0 0 0 1px #3f7fbf}
/* 09/10 22:08: Mestre das Classes › Copiar nível. */
.cp-w{display:flex;flex-direction:column;gap:12px}
.cp-intro{margin:0;max-width:720px}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.cp-card{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;gap:6px 10px;align-items:center;padding:10px;border-radius:10px;background:linear-gradient(180deg,rgba(30,42,66,.92),rgba(15,21,36,.92));box-shadow:inset 0 0 0 1px #34465f}
.cp-card.top{box-shadow:inset 0 0 0 1px #c9a24a}
.cp-card .cp-art{width:48px;height:48px;object-fit:contain;image-rendering:pixelated}
.cp-card .cp-b{display:flex;flex-direction:column;min-width:0}.cp-card .cp-b b{color:#e8edf5}.cp-card .cp-b small{color:#9aa7bb}
.cp-card .buy{grid-column:1/3;display:inline-flex;align-items:center;justify-content:center;gap:5px}.cp-card .buy img{width:14px;height:14px}
/* 09/10 22:19 (dono: "SEM SCROLL"): no PC o Fortalecer cabe sem rolar: bigorna mais baixa, custo em 2 colunas, chance e "se falhar"
na mesma linha e menos espaço entre as partes. */
.hf:not(.app) .fg3-act{gap:6px}
.hf:not(.app) .fg3 .fs{height:112px}
@media (max-height:820px){.hf:not(.app) .fg3 .fs{height:96px}}
.hf:not(.app) .fg3-act .fg3-sec{margin-top:0}
.hf:not(.app) .fg3-act .fg3-opts .fg3-tg{padding-top:5px;padding-bottom:5px}
.fg3-c2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.fg3-c2 .fg3-row{padding:6px 8px;gap:7px}.fg3-c2 .fg3-row>img{width:22px;height:22px}
.fg3-chance{display:flex;align-items:center;gap:10px;width:100%;max-width:400px}
.fg3-chance .fs-meter{flex:1 1 auto;min-width:0;margin:0}
.fg3-chance .fg3-fail{flex:none;max-width:45%;text-align:right;font-size:12px;line-height:1.25}
.ig.fg3.app .fg3-chance{flex-direction:column;align-items:stretch;gap:4px}.ig.fg3.app .fg3-chance .fg3-fail{max-width:none;text-align:center}
/* Bigorna baixa no PC (22:19, "SEM SCROLL"): a cena inteira em escala menor para caber nos 112px (item em cima da bigorna, martelo ao
lado, fogo à esquerda), sem cortar o item. */
.hf:not(.app) .fg3 .fs .fs-fire{width:56px;bottom:4px;left:10px}
.hf:not(.app) .fg3 .fs .fs-anvil{width:94px;margin-left:-42px;bottom:2px}
.hf:not(.app) .fg3 .fs .fs-item{bottom:56px;width:52px;height:52px;margin-left:-22px}
.hf:not(.app) .fg3 .fs .fs-item .ithumb.lg{width:46px;height:46px}
.hf:not(.app) .fg3 .fs .fs-lv{right:-18px;top:-4px;height:18px;min-width:26px;font-size:12px}
.hf:not(.app) .fg3 .fs .fs-ham{width:62px;height:66px;right:calc(50% - 112px);bottom:44px}
.hf:not(.app) .fg3 .fs .fs-sp{bottom:70px}
.hf:not(.app) .fg3 .fs .fs-glow{bottom:-90px}
.hf:not(.app) .fg3 .fs .fs-pop{top:6px;font-size:24px}.hf:not(.app) .fg3 .fs .fs-pop.bad{font-size:20px}
.hf:not(.app) .fg3 .fs .fs-hint{top:10px;font-size:13px}
.hf:not(.app) .fg3 .fs .fs-win .fs-item::before,.hf:not(.app) .fg3 .fs.fs-win .fs-item::before{inset:-30px}
@media (max-height:820px){.hf:not(.app) .fg3 .fs .fs-anvil{width:84px;margin-left:-38px}.hf:not(.app) .fg3 .fs .fs-item{bottom:50px;width:44px;height:44px;margin-left:-18px}.hf:not(.app) .fg3 .fs .fs-item .ithumb.lg{width:40px;height:40px}.hf:not(.app) .fg3 .fs .fs-ham{bottom:38px;width:54px;height:58px}}
/* 09/10 22:48: Heróis › Jogar no nível do herói mais alto (Copiar nível, diamantes). */
.hp2-copy{display:inline-flex;align-items:center;gap:5px;margin-top:6px}.hp2-copy img{width:14px;height:14px}
.hp2-cpn{display:block;margin-top:3px;font-size:11px;color:#9aa7bb;max-width:240px;line-height:1.3}
/* ---------- Torneio de Alvorada (09/10) ---------- */
.tn-w{display:grid;grid-template-columns:240px minmax(0,1fr);gap:12px;min-height:0;height:100%}
.tn-l{display:flex;flex-direction:column;gap:8px;min-width:0}
.tn-l .ig-cat{width:100%}
.tn-st{margin:4px 2px 0;font-size:12px;line-height:1.35}
.tn-r{display:flex;flex-direction:column;gap:10px;min-width:0;overflow:auto;padding-right:4px}
.tn-card{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:10px;background:linear-gradient(180deg,rgba(30,42,66,.92),rgba(15,21,36,.92));box-shadow:inset 0 0 0 1px #34465f}
.tn-card p{margin:0}
.tn-t{font-size:14px;color:#ffe2a0;letter-spacing:.02em}
.tn-lgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tn-lc{display:flex;flex-direction:column;gap:5px;align-items:flex-start;padding:10px;border-radius:9px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px #34465f}
.tn-lc.cur{box-shadow:inset 0 0 0 2px #4fe08a}
.tn-lc small{font-size:11.5px;color:#9aa7bb;line-height:1.3}.tn-lc small img{width:12px;height:12px;vertical-align:-2px}
.tn-lgn{font-size:15px}.tn-lc.lg-bronze .tn-lgn{color:#e0a46d}.tn-lc.lg-prata .tn-lgn{color:#dfe7f2}.tn-lc.lg-ouro .tn-lgn{color:#ffd76a}
.tn-pr{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:#e8edf5}.tn-pr img{width:15px;height:15px}
.tn-lc .buy{margin-top:auto}.tn-lc .buy img{width:13px;height:13px;vertical-align:-2px}
.tn-lg{display:inline-block;padding:1px 8px;border-radius:8px;font-size:12px;font-weight:800;background:rgba(0,0,0,.3)}
.tn-lg.lg-bronze{color:#e0a46d;box-shadow:inset 0 0 0 1px #8a5a33}.tn-lg.lg-prata{color:#dfe7f2;box-shadow:inset 0 0 0 1px #7d8796}.tn-lg.lg-ouro{color:#ffd76a;box-shadow:inset 0 0 0 1px #b8892a}
.tn-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tn-slot{display:flex;gap:8px;align-items:flex-start;padding:8px;border-radius:9px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px #34465f}
.tn-slot>img{width:48px;height:48px;object-fit:contain;image-rendering:pixelated;flex:none}
.tn-empty{display:grid;place-items:center;width:48px;height:48px;border-radius:8px;border:1px dashed #4a5d7c;color:#6f8099;font-style:normal;font-size:22px;flex:none}
.tn-sb{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.tn-sb select{width:100%;min-width:0;padding:4px 6px;border-radius:6px;border:1px solid #34465f;background:#0f1624;color:#e8edf5;font:inherit;font-size:12px}
.tn-rows,.tn-opts{display:flex;flex-wrap:wrap;gap:5px}
.tn-rows .tab,.tn-opts .tab{padding:4px 9px;font-size:12px}
.tn-tbw{overflow-x:auto}
.tn-tb{width:100%;border-collapse:collapse;font-size:13px}
.tn-tb th{text-align:left;color:#9aa7bb;font-weight:600;font-size:11.5px;padding:4px 6px;border-bottom:1px solid #2c3c58}
.tn-tb td{padding:5px 6px;border-bottom:1px solid rgba(52,70,95,.45)}
.tn-tb tr.me td{background:rgba(255,215,106,.08)}.tn-tb tr.me td:nth-child(2){color:#ffd76a;font-weight:700}
.tn-tb tr.up td:first-child{box-shadow:inset 3px 0 0 #4fe08a}.tn-tb tr.down td:first-child{box-shadow:inset 3px 0 0 #ff6a5a}
.tn-tb tr.left td{opacity:.55}
.tn-m{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;background:rgba(0,0,0,.18)}
.tn-m>span{min-width:70px;font-weight:800}.tn-m>b{flex:1;min-width:0;font-weight:600;color:#cfd8e6}
.tn-ld{display:flex;align-items:center;gap:8px;font-size:13px}.tn-ld>span{width:28px;color:#9aa7bb}.tn-ld>b{flex:1;min-width:0}.tn-ld small{color:#9aa7bb}.tn-ld em{font-style:normal;color:#ffd76a}
.tn-champ{flex-direction:row;align-items:center;box-shadow:inset 0 0 0 1px #c9a24a,0 0 16px rgba(242,193,78,.2)}.tn-champ img{width:40px;height:40px}.tn-champ p{font-size:16px;color:#ffd76a;font-weight:800}
.tn-ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:13px;line-height:1.4}.tn-ul img{width:13px;height:13px;vertical-align:-2px}
/* replay */
.tn-rpw{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.tn-rph{display:flex;align-items:center;justify-content:center;gap:14px;font-size:16px}.tn-rph b{color:#e8edf5}.tn-vs{font-weight:900;color:#ff7a62;letter-spacing:.08em}.tn-rph em{font-style:normal;color:#9aa7bb;font-size:12px;min-width:40px}
.tn-arena{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:16px;border-radius:12px;background:radial-gradient(ellipse at 50% 100%,rgba(255,140,40,.18),transparent 60%),linear-gradient(#141c2c,#0b1019);box-shadow:inset 0 0 0 1px #34465f}
.tn-side{display:flex;flex-direction:column;gap:10px}.tn-side.s1{align-items:flex-end}
.tn-u{position:relative;display:flex;align-items:center;gap:8px;width:min(100%,260px);padding:8px;border-radius:9px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px #34465f;transition:opacity .3s,filter .3s}
.tn-side.s0 .tn-u.r-front{transform:translateX(26px)}.tn-side.s1 .tn-u.r-front{transform:translateX(-26px)}
.tn-u>img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated}
.tn-u>div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.tn-u small{color:#9aa7bb;font-size:11px}
.tn-hp{display:block;height:7px;border-radius:4px;background:#2a1418;overflow:hidden}.tn-hp i{display:block;height:100%;background:linear-gradient(90deg,#e0443a,#ff8a5a);transition:width .25s}
.tn-u.hit{animation:tnHit .25s ease}.tn-u.ko{opacity:.35;filter:grayscale(1)}
.tn-dmg{position:absolute;left:50%;top:-4px;transform:translateX(-50%);font-size:15px;font-weight:900;color:#ffd0c6;text-shadow:0 2px 0 #000;pointer-events:none;animation:tnDmg .9s ease-out forwards}
.tn-dmg.crit{color:#ffd76a;font-size:18px}.tn-dmg.heal{color:#7ff0a0}
.tn-end{text-align:center;display:flex;flex-direction:column;gap:2px}.tn-end[hidden]{display:none}.tn-end b{font-size:20px;color:#ffd76a}.tn-end small{color:#9aa7bb}
.tn-rpb{display:flex;justify-content:center;gap:8px}
@keyframes tnHit{0%{transform:scale(1)}50%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes tnDmg{0%{opacity:0;transform:translate(-50%,6px)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-26px)}}
.hf.app .tn-w,.ig.app .tn-w{grid-template-columns:1fr;height:auto}
.hf.app .tn-lgs,.hf.app .tn-slots{grid-template-columns:1fr}
@media (max-width:900px){.tn-w{grid-template-columns:1fr;height:auto}.tn-lgs,.tn-slots{grid-template-columns:1fr}}
.tn-card>.buy{align-self:flex-start}.tn-card>.buy:not(.sm){align-self:stretch}
.tn-lc .tn-mo{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.tn-lc .tn-mo img{display:inline-block;width:12px;height:12px}
.tn-pr img,.tn-lc .buy img{display:inline-block}
/* celular: as abas numa fileira que rola de lado */
.hf.app .tn-cats{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px}.hf.app .tn-cats .ig-cat{flex:none;width:auto;padding:6px 10px}.hf.app .tn-cats .ig-cat img{width:20px;height:20px}.hf.app .tn-st{display:none}
@media (max-width:900px){.tn-cats{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px}.tn-cats .ig-cat{flex:none;width:auto}.tn-st{display:none}}
/* Conversa dos NPCs (10/10): Coletar pequeno ao lado da missão e o visto da coletada. */
.qw-list .qw-mini{flex:none;min-width:0;display:inline-flex;min-height:0;height:22px;padding:0 8px;font-size:11px;margin-left:6px;vertical-align:middle}
.qw-list .qw-done{color:#7fe08a;margin-left:4px}
/* Evento da Ilha na tela (10/10): botão fixo junto do voto com os itens que caem; no balão da ilha, os itens do Chefe da Ilha. */
.ev-chip .evc-its{display:inline-flex;gap:2px;margin-left:4px;font-style:normal}
.ev-chip .evc-it{width:20px;height:20px;image-rendering:pixelated;border-radius:4px;background:rgba(0,0,0,.35)}
.ev-pz{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.ev-pzi{display:flex;flex-direction:column;align-items:center;gap:2px;width:64px;text-align:center}
.ev-pzi img{width:40px;height:40px;image-rendering:pixelated;border-radius:8px;background:rgba(0,0,0,.35);padding:3px;box-sizing:border-box}
.ev-pzi small{font-size:10.5px;line-height:1.15;overflow-wrap:anywhere}
/* Regras de prêmio do Chefe da Ilha (10/10 14:24, dono: "ajustar pra ficar sem scroll"): uma linha por regra, prêmios em pílulas
pequenas ao lado; o balão fica mais largo no computador (bx) e as informações em 2 colunas. */
.ev-rl{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 5px;padding:4px 7px;border-radius:8px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ev-rl>b{font-size:12px;color:#f2c14e;margin-right:2px}
.ev-rl em{font-style:normal;font-size:10px;padding:0 6px;border-radius:999px;background:rgba(99,179,255,.14);color:#9fcbff;line-height:16px}
.ev-pzc{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:1px 6px 1px 2px;border-radius:999px;background:rgba(255,255,255,.06)}
.ev-pzc img{width:20px;height:20px;image-rendering:pixelated}
.hf:not(.app) .wm-pop.ev.bx{width:500px}
.wm-pop.ev.bx .evh-rows{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.wm-pop.ev.bx .fz-mobs{-webkit-line-clamp:3;font-size:11.5px}
.wm-pop.ev.bx .q-d{margin:2px 0 0}
.wm-pop.ev.bx .wm-pi{gap:5px}
/* Wiki (10/10): o Manual do Herói por cima do jogo. */
.wiki-ov{position:fixed;inset:0;z-index:2147482000;pointer-events:auto;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));background:rgba(4,8,14,.72)}
.wiki-ov[hidden]{display:none}
.wiki-box{display:flex;flex-direction:column;width:min(1280px,100%);height:min(900px,100%);border-radius:14px;overflow:hidden;background:#070c14;border:1px solid #c9a15a;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.wiki-hd{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;background:#0e1626;border-bottom:1px solid #2c3a52;color:#e9eef7}
.wiki-hd img{width:30px;height:30px;image-rendering:pixelated}.wiki-hd b{font-size:18px;color:#ffe08a}
.wiki-hd span{flex:1;min-width:0;font-size:12.5px;color:#b9c6d8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wiki-hd .buy{width:auto;flex:none;text-decoration:none}
.wiki-x{flex:none;font-size:20px;line-height:1}
.wiki-box iframe{flex:1;width:100%;border:0;background:#070c14}
.hf.app .wiki-ov{padding:0}.hf.app .wiki-box{border-radius:0;height:100%;border:0}.hf.app .wiki-hd span,.hf.app .wiki-hd .buy{display:none}
/* Sorteio ao vivo (10/10): roleta de cada regra, ganhadores ao lado e ranking de dano. */
.dw-ov{position:fixed;inset:0;z-index:2147481500;pointer-events:auto;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(4,8,14,.66)}
.dw-box{display:flex;flex-direction:column;width:min(860px,100%);max-height:100%;border-radius:14px;overflow:hidden;background:#0b1220;border:1px solid #c9a15a;box-shadow:0 18px 50px rgba(0,0,0,.6);color:#e9eef7}
.dw-hd{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;background:#0e1626;border-bottom:1px solid #2c3a52}
.dw-hd img{width:28px;height:28px;image-rendering:pixelated}.dw-hd b{font-size:18px;color:#ffe08a}
.dw-hd span{flex:1;min-width:0;font-size:12.5px;color:#b9c6d8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dw-hd .buy{width:auto;flex:none}.dw-x{flex:none;font-size:20px;line-height:1}
.dw-main{display:grid;grid-template-columns:1fr 280px;min-height:0;overflow:hidden}
.dw-stage{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 16px;text-align:center;min-width:0}
.dw-step{margin:0;font-size:11.5px;color:#8e9bb0;text-transform:uppercase;letter-spacing:.08em;min-height:14px}
.dw-rule{margin:0;font-size:15px;color:#f2c14e;font-weight:700}
.dw-pz{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;min-height:24px}
.dw-wheel{--c:#ffd65a;position:relative;width:100%;padding:12px 0;margin-top:8px;border-radius:12px;background:linear-gradient(180deg,#0a1120,#121c31 50%,#0a1120);box-shadow:inset 0 0 0 1px #2c3a52,inset 0 10px 24px rgba(0,0,0,.5);transition:box-shadow .25s}
.dw-win{position:relative;height:64px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.dw-strip{display:flex;gap:6px;width:max-content;will-change:transform}
.dw-t{flex:none;display:grid;place-items:center;width:132px;height:64px;padding:0 8px;box-sizing:border-box;border-radius:8px;font-size:14px;font-weight:800;color:#e9eef7;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.06)}
.dw-t span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dw-t.t0{background:linear-gradient(#26324a,#1a2336)}.dw-t.t1{background:linear-gradient(#3a2346,#28182f)}.dw-t.t2{background:linear-gradient(#1f3a40,#15282c)}
.dw-t.w{background:linear-gradient(#ffe08a,#d39a2c);color:#2a1702;text-shadow:none;box-shadow:0 0 0 2px #fff3c4,0 0 26px color-mix(in srgb,var(--c) 75%,transparent);animation:dw-pop .45s ease-out both}
.dw-mk{position:absolute;left:50%;z-index:2;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;transform:translateX(-50%);filter:drop-shadow(0 0 6px var(--c))}
.dw-mk.t{top:2px;border-top:11px solid var(--c)}.dw-mk.b{bottom:2px;border-bottom:11px solid var(--c)}
.dw-wheel::after{content:"";position:absolute;left:50%;top:12px;bottom:12px;width:2px;transform:translateX(-50%);background:var(--c);opacity:.55;z-index:2;pointer-events:none}
.dw-wheel.hit{box-shadow:inset 0 0 0 1px var(--c),0 0 30px color-mix(in srgb,var(--c) 45%,transparent)}
.dw-wheel.none .dw-t{width:auto;min-width:220px;color:#8e9bb0;font-size:15px}
.dw-pz{gap:8px}
.dw-pc{display:flex;flex-direction:column;align-items:center;gap:4px;width:96px;padding:8px 6px 7px;border-radius:10px;background:linear-gradient(180deg,#18233a,#0e1626);box-shadow:inset 0 3px 0 var(--rc,#c9cfd8),0 0 0 1px #2c3a52;animation:dw-slide .5s ease-out both}
.dw-pc img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--rc,#fff) 55%,transparent))}
.dw-pc b{font-size:11px;line-height:1.15;color:var(--rc,#e9eef7);text-align:center}
.dw-pc.r0,.dw-pc.r1{--rc:#c9cfd8}.dw-pc.r2{--rc:#6fd36a}.dw-pc.r3{--rc:#58a8ff}.dw-pc.r4{--rc:#c77dff}.dw-pc.r5{--rc:#ffb640}.dw-pc.r6{--rc:#ff5a7a}
@keyframes dw-slide{from{opacity:0;transform:translateX(40px) scale(.9)}to{opacity:1;transform:none}}
@keyframes dw-pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.dw-pc,.dw-t.w{animation:none}}
.dw-fx{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:2}
.dw-fx b{position:absolute;left:-4px;top:-4px;width:8px;height:12px;border-radius:2px;animation:dw-conf 1.4s cubic-bezier(.15,.7,.3,1) both}
.dw-ring{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:3px solid var(--c);animation:dw-ring .8s ease-out both}
@keyframes dw-conf{0%{transform:translate(0,0) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 120px)) rotate(var(--r));opacity:0}}
@keyframes dw-ring{from{transform:scale(.3);opacity:1}to{transform:scale(3.2);opacity:0}}
.dw-stage.rule-in .dw-rule,.dw-stage.rule-in .dw-pz{animation:dw-in .6s ease-out both}
.dw-cands{color:#8e9bb0;font-size:12px}
.dw-me{margin:2px 0 0;font-size:16px;font-weight:800;color:#7dff9a;animation:dw-in .5s ease-out both}
.dw-side{display:flex;flex-direction:column;gap:4px;padding:12px;border-left:1px solid #2c3a52;background:rgba(0,0,0,.18);min-height:0;overflow:auto;max-height:min(70vh,520px)}
.dw-side h4{margin:4px 0 2px;font-size:12px;color:#b9c6d8;text-transform:uppercase;letter-spacing:.06em}
.dw-wins,.dw-top{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:12.5px}
.dw-wins li{display:flex;flex-direction:column;gap:2px;padding:4px 6px;border-radius:7px;background:rgba(255,255,255,.04);animation:dw-in .4s ease-out both}
@keyframes dw-in{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.dw-wins li span{display:flex;flex-wrap:wrap;gap:3px}
.dw-top li{display:flex;justify-content:space-between;gap:8px;padding:2px 6px}
.dw-wins li.me,.dw-top li.me{background:rgba(125,255,154,.12);color:#7dff9a}
.hf.app .dw-ov{padding:0}.hf.app .dw-box{height:100%;border-radius:0;border:0}.hf.app .dw-main{grid-template-columns:1fr;overflow:auto}.hf.app .dw-side{border-left:0;border-top:1px solid #2c3a52;max-height:none}
/* Inscrito no evento (10/10 17:25): anúncio com a contagem para entrar e o Desistir ao lado. */
.evq{display:inline-flex;align-items:center;gap:5px}
.vc-b.evq-c small{max-width:170px;overflow:hidden;text-overflow:ellipsis}
.vc-b.evq-c .num{font-variant-numeric:tabular-nums}
.vc-b.evq-b{padding:0 12px;font-weight:800;font-size:12px}
.hf.app .vc-b.evq-b{padding:0 10px;font-size:11px}
/* Cartão do Chefe da Ilha (10/10 17:36): o desenho do cartão do herói, no topo e no meio. */
.ib-card{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:6px;width:min(400px,calc(100% - 24px));padding:6px 10px 6px 6px;box-sizing:border-box;border-radius:10px;background:linear-gradient(180deg,rgba(28,14,20,.92),rgba(12,8,14,.92));box-shadow:0 0 0 1px #6b2a2a,0 0 0 2px #0a0707,0 6px 18px rgba(0,0,0,.55);pointer-events:auto}
.ib-card[hidden]{display:none}
.ib-p{position:relative;flex:none;width:58px;height:58px;border-radius:8px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#4a1f3a,#160b14);box-shadow:inset 0 0 0 2px #c9a15a}
.ib-p i{position:absolute;inset:-4px;background:center 8%/250% no-repeat;image-rendering:pixelated}
.ib-tag{position:absolute;left:50%;bottom:1px;transform:translateX(-50%);padding:0 5px;border-radius:4px;background:linear-gradient(#ff7a6a,#b8261f);color:#fff;font-size:9px;font-weight:800;letter-spacing:.06em;line-height:14px}
.ib-i{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ib-row{display:flex;align-items:center;gap:6px;min-width:0}
.ib-n{flex:1;min-width:0;font-size:14.5px;font-weight:800;color:#ffd2c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-pl{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:#e9eef7}.ib-pl img{width:16px;height:16px;image-rendering:pixelated}
.ib-card .bar.hp{height:16px}.ib-card .bar.mana{height:10px}.ib-card .bar.xp{height:10px}.ib-card .bar.xp > b{font-size:9px}
.ib-me{font-size:11px;color:#c9b6a8}.ib-me b{color:#ffe08a}
.hf.dock .ib-card{top:calc(var(--dt, 0px) + 10px)}
.hf.app .ib-card{top:calc(var(--st, 0px) + 92px);width:min(340px,calc(100% - 132px - var(--sl, 0px) - var(--sr, 0px)));padding:4px 8px 4px 4px}
.hf.app.is-portrait .ib-card{left:calc(56px + var(--sl, 0px));right:calc(8px + var(--sr, 0px));top:calc(var(--st, 0px) + 212px);width:auto;transform:none}
.hf.app .ib-p{width:46px;height:46px}.hf.app .ib-n{font-size:13px}
/* Primeiros passos (11/10): o passo da vez, com as bolinhas do caminho e o prêmio. */
.quest.tut-q{border-color:#c9a15a}
.quest.tut-q.ready{box-shadow:0 0 0 1px #ffd66b,0 0 14px rgba(255,214,107,.35)}
.tut-dots{display:flex;gap:4px;margin:2px 0 4px}
.tut-dots i{width:16px;height:5px;border-radius:3px;background:#2c3a52}.tut-dots i.ok{background:#6fd36a}.tut-dots i.now{background:#ffd66b}
.tut-btns{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.tut-btns .lnk{font-size:11.5px;color:#8e9bb0}
.tut-rw{display:block;margin-top:4px;font-size:11px;color:#c9b6a8}
/* Membros de outra guild (11/10): nome, nível e cargo, aberto no "Ver membros". */
.gd-mem{margin-top:6px}.gd-mem summary{cursor:pointer;font-size:12px;color:#9fd2ff}
.gd-mrows{display:flex;flex-direction:column;gap:2px;margin-top:4px;max-height:220px;overflow:auto}
.gd-mr{display:grid;grid-template-columns:20px 1fr auto auto;align-items:center;gap:6px;font-size:12px;padding:2px 4px;border-radius:5px;background:rgba(255,255,255,.03)}
.gd-mr img{width:20px;height:20px;border-radius:4px;object-fit:cover;image-rendering:pixelated}
.gd-mr b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gd-mr em{font-style:normal;color:#ffe08a}.gd-mr small{color:#8e9bb0}
.quest.tut-q > :not(img){grid-column:2}
.quest.tut-q .tut-btns .q-act{margin-top:0}
.mx-more{display:flex;justify-content:center;padding:10px 0 4px}.mx-more .ig-btn{min-width:180px}
/* Primeira compra em dobro (12/10) */
.ds-firstbar{display:flex;gap:10px;align-items:center;margin:0 0 10px;padding:10px 12px;border-radius:10px;background:linear-gradient(90deg,rgba(255,196,64,.18),rgba(255,196,64,.04));border:1px solid rgba(255,196,64,.45)}
.ds-firstbar img{width:28px;height:28px}.ds-firstbar b{display:block;color:#ffd36a}.ds-firstbar small{opacity:.85}
.ds-tag.first{background:#ffb627;color:#2a1600}
.ds-card .ds-was{display:block;opacity:.55;font-size:.8em;line-height:1}
.ds-card.ds-first{border-color:rgba(255,196,64,.55)}
/* Ferreiro › Bônus (12/10) */
.fg-opts{margin:4px 0 8px;padding-left:18px}.fg-opts li{margin:2px 0}
/* Pesca 12/10 17:20: vida da vara, receita do Ferreiro e Troca do Pescador. */
.pc-life{height:5px;border-radius:3px;background:rgba(0,0,0,.4);overflow:hidden;margin:4px 0 2px}.pc-life i{display:block;height:100%;background:linear-gradient(90deg,#e0a33a,#7ed36b)}
.pc-craft{display:grid;gap:3px;margin:4px 0}.pc-craft span{display:flex;flex-wrap:wrap;gap:4px 8px}.pc-craft b{display:inline-flex;align-items:center;gap:2px;font-size:11.5px}.pc-craft img{width:18px;height:18px;image-rendering:pixelated}
.pc-trade{border:1px solid rgba(180,110,255,.5)}.pc-trade-n{margin:2px 0 10px}
/* Atributos 12/10 18:50: o que vem dos itens */
/* 12/10 20:10 ("melhorar esse layout"): Resultado à direita dos pontos; itens numa faixa larga embaixo, 3 por linha. */
.at3-items{grid-column:1/-1}.at3-items .at3-h .ig-note{flex:1 1 100%;line-height:1.45}.at3-items .at3-h .ig-note b{color:#ffe08a}
.at3-src{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.at3-si{display:flex;gap:9px;align-items:center;min-width:0;padding:6px 9px;border-radius:10px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px #26354f}
.at3-si .at3-ic{flex:none;width:34px;height:34px;border-radius:9px}.at3-si .at3-ic img{width:24px;height:24px}
.at3-si>span:last-child{display:grid;min-width:0}.at3-si b{font-size:12.5px;color:#f3e3bd}.at3-si small{font-size:11.5px;color:#9aa7bb;line-height:1.3}
.hf.app .at3-src{grid-template-columns:1fr 1fr}
@media (max-width:420px){.hf.app .at3-src{grid-template-columns:1fr}}
.hf.app.is-landscape .at3-src{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Passe 12/10 19:09 ("para pegar pet tá bugando.. colocar em um modal"): escolhas do pet, do set e da comida numa janela por cima. */
.ps-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(3,5,10,.78)}
.ps-mbox{position:relative;width:min(560px,100%);max-height:calc(100% - 24px);overflow:auto;border-radius:14px;background:linear-gradient(180deg,#1a2540,#0e1527);box-shadow:0 0 0 1px rgba(214,170,90,.55),0 18px 48px rgba(0,0,0,.6)}
.ps-mbox .ps-pick{padding:18px 16px 14px;background:none;box-shadow:none;gap:8px}
.ps-mbox .ps-pick>b{font-size:17px;color:#f3e3bd;padding-right:36px}.ps-mbox .ps-pick>small{font-size:12.5px}
.ps-mbox .ps-opts{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:4px}
.ps-mbox .ps-opt{padding:8px 10px 8px 8px;min-height:52px}.ps-mbox .ps-opt>img,.ps-mbox .ps-opt .hface{width:40px;height:40px}
.ps-mbox .ps-pick>.lnk{align-self:center;margin-top:4px}
.ps-mx{all:unset;box-sizing:border-box;position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;border:1px solid rgba(214,170,90,.55);background:rgba(8,12,20,.75);color:#f2d38a;font:700 17px/1 system-ui,sans-serif;cursor:pointer}
.ps-petdue{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:rgba(47,191,113,.12);box-shadow:inset 0 0 0 1px rgba(80,220,140,.55)}
.ps-petdue img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated;flex:none}
.ps-petdue span{flex:1;min-width:0;display:grid}.ps-petdue b{font-size:13.5px;color:#cfffe0}.ps-petdue small{font-size:11.5px;color:#9fb0c8}
.hf.app .ps-mbox .ps-opts{grid-template-columns:1fr 1fr}
/* Pesca 12/10 19:36: vara gasta (não some) e conserto no Ferreiro. */
.pc-life.worn{box-shadow:inset 0 0 0 1px rgba(255,93,93,.7)}
.pc-rod .hb2-buy .lnk[data-pcfix]{font-size:11.5px}
/* 12/10 20:01 (dono: "essa tela está muito feia... não quero com esses scrolls feios"): Sorteio ao vivo com prêmios em cartas
menores numa linha, ganhadores agrupados por regra (prêmios uma vez, nomes em etiquetas) e Top 5 de dano; sem barra de rolagem. */
.dw-box{width:min(900px,100%)}
.dw-main{grid-template-columns:minmax(0,1fr) 260px}
.dw-stage{padding:16px 14px 14px;justify-content:center}
.dw-pz{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,66px));justify-content:center;width:100%;gap:6px}
.dw-pc{width:auto;padding:7px 4px 6px;gap:3px}
.dw-pc img{width:32px;height:32px}
.dw-pc b{font-size:10.5px}
.dw-side{gap:6px;padding:12px 12px 14px;max-height:min(74vh,560px);overflow:auto;scrollbar-width:none}
.dw-side::-webkit-scrollbar{display:none}
.dw-wins{gap:6px}
.dw-g{display:flex;flex-direction:column;gap:5px;padding:7px 8px;border-radius:9px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px #24324a;animation:dw-in .4s ease-out both}
.dw-gh{display:flex;flex-direction:column;gap:3px}
.dw-gh small{font-size:11px;color:#f2c14e;line-height:1.25}
.dw-gi{display:flex;flex-wrap:wrap;gap:2px}
.dw-gi img{width:20px;height:20px;object-fit:contain;image-rendering:pixelated}
.dw-gn{display:flex;flex-wrap:wrap;gap:4px}
.dw-gn:empty::before{content:"…";color:#5d6a80;font-size:12px}
.dw-n{padding:2px 8px;border-radius:999px;background:#1c2840;box-shadow:inset 0 0 0 1px #33456a;font-size:12px;font-weight:700;color:#e9eef7;animation:dw-in .35s ease-out both}
.dw-n.me{background:rgba(125,255,154,.16);box-shadow:inset 0 0 0 1px #4fcf7a;color:#7dff9a}
.dw-top{gap:2px}
.dw-top li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:6px;align-items:baseline;padding:3px 6px;border-radius:6px}
.dw-top li i{font-style:normal;color:#ffd66b;font-size:11.5px}.dw-top li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf.app .dw-side{max-height:none;overflow:visible}
.hf.app .dw-pz{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Resultado do Chefe (chefe_fim) compacto: números, prêmios em grade de 3, Top 3, sem rolar. */
.win.win-chefe_fim{width:480px}
.be2 .be-h{margin:0 0 8px;font-size:14px;line-height:1.4}.be2 .be-h span{display:block;font-size:12.5px;color:#b9c6d8;margin-top:2px}
.be-st{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 10px}
.be-st span{display:flex;flex-direction:column;align-items:center;padding:6px 4px;border-radius:9px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #26354f}
.be-st b{font-size:17px;color:#ffe08a}.be-st small{font-size:11px;color:#9aa7bb}
.be-sec{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.be-sec h4{margin:0;font-size:11.5px;color:#b9c6d8;text-transform:uppercase;letter-spacing:.06em}
.be2 .be-rw{margin:0;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:5px}
.be2 .be-rw>.fr-slot{flex-direction:row;justify-content:center;gap:6px;min-height:0;height:auto;aspect-ratio:auto;padding:6px 8px}
.be2 .be-rw>.fr-slot img{width:24px;height:24px}.be2 .be-rw>.fr-slot b{font-size:16px}
.be-pz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.be-it{display:flex;align-items:center;gap:6px;min-width:0;padding:5px 7px;border-radius:8px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px #26354f}
.be-it img{width:24px;height:24px;flex:none;object-fit:contain;image-rendering:pixelated}
.be-it b{font-size:11.5px;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.be-it.r0 b,.be-it.r1 b{color:#c9cfd8}.be-it.r2 b{color:#6fd36a}.be-it.r3 b{color:#58a8ff}.be-it.r4 b{color:#c77dff}.be-it.r5 b{color:#ffb640}.be-it.r6 b{color:#ff5a7a}
.be-note{font-size:11.5px;color:#9aa7bb}
.be-top{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.be-top li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:6px;padding:3px 6px;border-radius:6px;background:rgba(255,255,255,.03)}
.be-top li i{font-style:normal;color:#ffd66b}.be-top li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.be2 .cfg-btns{margin:4px 0 2px}
.hf.app .be-pz{grid-template-columns:1fr 1fr}
/* Pagar com cripto (12/10 19:30): escolha da moeda, guia com a tela de saque desenhada e o cartão do pedido (corretora | carteira). */
.cg-ov{position:fixed;inset:0;z-index:2147481400;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(4,8,14,.72);pointer-events:auto}
.cg-box{position:relative;width:min(860px,100%);max-height:calc(100% - 8px);overflow:auto;scrollbar-width:none;padding:14px 16px 16px;border-radius:14px;background:linear-gradient(180deg,#121b2e,#0b1220);border:1px solid #c9a15a;box-shadow:0 18px 50px rgba(0,0,0,.6);color:#e9eef7;display:flex;flex-direction:column;gap:12px}
.cg-box::-webkit-scrollbar{display:none}
.cg-box.sm{width:min(520px,100%)}
.cg-hd{display:flex;align-items:center;gap:10px}.cg-hd .t-title{flex:1;font-size:18px;color:#ffe08a}.cg-hd .mini{flex:none}
.cg-lead{margin:0;font-size:13px;color:#c6d1e2;line-height:1.45}
.cg-b{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:100px;flex:none;padding:4px 10px;border-radius:10px;line-height:1.1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.cg-b b{font-size:15px;letter-spacing:.04em}.cg-b small{font-size:10px;opacity:.85;white-space:nowrap}
.cg-picks{display:grid;gap:8px}
.cg-pick{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #2c3a52}
.cg-pick:hover{background:rgba(47,111,208,.18);box-shadow:inset 0 0 0 1px #7fb0ff}
.cg-pt{display:flex;flex-direction:column;gap:2px;min-width:0}.cg-pt b{font-size:15px}.cg-pt small{font-size:12px;color:#9fb0c8;line-height:1.35}
.lnk.cg-how{align-self:center;font-size:12.5px}
.cg-tabs{display:flex;gap:6px}
.cg-tabs button,.cg-via button{all:unset;box-sizing:border-box;cursor:pointer;flex:1;text-align:center;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #2c3a52;font-size:13px;font-weight:700;color:#c6d1e2}
.cg-tabs button.on,.cg-via button.on{background:rgba(47,111,208,.28);box-shadow:inset 0 0 0 1px #7fb0ff;color:#fff}
.cg-via{display:flex;gap:6px;margin:4px 0 8px}.cg-via button{display:flex;flex-direction:column;gap:1px}.cg-via small{font-size:11px;font-weight:400;color:#9fb0c8}
.cg-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:14px;align-items:start}
.cg-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cg-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start}
.cg-steps i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#2f6fd0;color:#fff;font-style:normal;font-weight:800;font-size:14px}
.cg-steps b{font-size:14px;color:#ffe08a}.cg-steps p{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:#d3dbe8}
.cg-steps.sm{gap:6px}.cg-steps.sm i{width:24px;height:24px;font-size:12px}.cg-steps.sm li{grid-template-columns:24px minmax(0,1fr)}.cg-steps.sm b{font-size:13px}.cg-steps.sm p{font-size:12px}
.cg-side,.cg-exr{display:flex;flex-direction:column;gap:8px;align-items:center}
.cg-phone{width:100%;max-width:250px;padding:10px;border-radius:18px;background:#f4f6fa;color:#1b2333;box-shadow:0 0 0 6px #1c2333,0 10px 26px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:6px;font-size:12px}
.cg-ph-top{display:flex;flex-direction:column;padding-bottom:4px;border-bottom:1px solid #dfe4ec}.cg-ph-top span{font-size:15px;font-weight:800}.cg-ph-top small{color:#6b7689}
.cg-f{position:relative;display:flex;flex-direction:column;gap:1px;padding:6px 8px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px #dfe4ec}
.cg-f small{font-size:10.5px;color:#6b7689}.cg-f b{font-size:12.5px;color:#111827;word-break:break-all}
.cg-f.ok{box-shadow:inset 0 0 0 2px #17a058}.cg-f.ok i{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:800;color:#17a058}
.cg-f.hl{box-shadow:inset 0 0 0 2px #e0a100;background:#fff8e1}
.cg-bad{display:flex;flex-wrap:wrap;gap:3px 6px;padding:0 4px;font-size:10.5px;color:#c0392b}.cg-bad s{text-decoration-thickness:2px}
.cg-ph-btn{margin-top:2px;padding:7px;border-radius:9px;background:#f0b90b;color:#1b1400;text-align:center;font-weight:800}
.cg-copy{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.cg-copy .buy{width:auto}
.cg-warn{font-size:12px;color:#ffd0c7;padding:7px 10px;border-radius:9px;background:rgba(255,90,70,.1);box-shadow:inset 0 0 0 1px rgba(255,120,100,.4)}
.cg-ex{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px;align-items:start}
.cg-exl{display:flex;flex-direction:column;gap:8px;min-width:0}.cg-exl .cg-copy{justify-content:flex-start}
.wpay-net .cg-b{flex:none}
.hf.app .cg-ov{padding:0;align-items:stretch}.hf.app .cg-box{border-radius:0;max-height:100%;height:100%}
.hf.app .cg-grid,.hf.app .cg-ex{grid-template-columns:1fr}
@media (max-width:640px){.cg-grid,.cg-ex{grid-template-columns:1fr}}
/* Pesca fora do Porto (12/10 21:38): aviso na tela e a frase de que dá para ir caçar. */
.pc-tag .pc-away{display:block;margin-top:2px;color:#9ff0c8}
/* Guild › Membros (12/10 21:51): quando cada um foi visto. */
.gd-mb .gd-seen{font-size:11.5px;color:#9aa7bb}.gd-mb .gd-seen.on{color:#7dff9a}.gd-mb .gd-seen.old{color:#ff8a7a}
/* Moderação rápida da equipe (12/10): clique no herói ou no nome no chat › Moderar. */
.md-w{display:flex;flex-direction:column;gap:12px;max-width:620px;margin:0 auto}
.md-h{display:flex;gap:10px;align-items:center}.md-h img{width:34px;height:34px}.md-h b{display:block;font-size:17px}.md-h small{display:block;opacity:.75;font-size:12.5px;line-height:1.35}
.md-l{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:13px}.md-l small{font-weight:400;opacity:.7}
.md-s{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(0,0,0,.18)}
.md-s.danger{border-color:rgba(255,90,90,.35)}.md-t{font-weight:800;font-size:13px;letter-spacing:.02em;text-transform:uppercase;opacity:.85}
.md-b{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.md-b .ig-btn{min-width:0;padding-inline:10px}
.md-or{display:inline-flex;gap:4px;align-items:center}.md-or .input{width:74px}
.md-out p{margin:2px 0}.ig-btn.md-open{border-color:rgba(255,90,90,.5)}
.ig-btn.red{color:#fff;background:linear-gradient(#e0574f,#a8261f);box-shadow:0 0 8px rgba(224,87,79,.3)}
.md-w,.md-w *{box-sizing:border-box}.md-l .input{width:100%}
/* Doações da guild (13/10): total por membro e dia a dia. */
.gdn{display:flex;flex-direction:column;gap:8px}.gdn-sum>div small{display:block}
.gdn-r .gdn-v{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.gdn-r.gone{opacity:.65}.gdn-r.zero .gdn-v{opacity:.45}
.gdn-g,.gdn-d{display:inline-flex;align-items:center;gap:3px}.gdn-d{font-size:12px;color:#9fd8ff}
.gdn-days{display:flex;flex-direction:column;gap:6px}.gdn-day{padding:7px 9px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:rgba(0,0,0,.18)}
.gdn-day.empty{opacity:.55}.gdn-dh{display:flex;justify-content:space-between;align-items:center;gap:8px}.gdn-dh span{display:flex;gap:8px}
.gdn-ppl{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px;font-size:12.5px;opacity:.9}.gdn-ppl i{font-style:normal;font-weight:700}
/* Selos dos Portais (13/10): quest de cada portal, invocar escolhendo quem entra e os prêmios do sorteio. */
.sm-w{display:flex;flex-direction:column;gap:10px;max-width:760px;margin:0 auto}
.sm-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sm-tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(0,0,0,.2);color:inherit;font-size:12px;font-weight:700;cursor:pointer}
.sm-tab img{width:34px;height:34px}.sm-tab.on{border-color:var(--pc);box-shadow:0 0 10px color-mix(in srgb,var(--pc) 45%,transparent)}
.sm-tab b{position:absolute;top:2px;right:4px;min-width:18px;padding:0 4px;border-radius:9px;background:#e0574f;color:#fff;font-size:11px}
.sm-hd{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:linear-gradient(90deg,color-mix(in srgb,var(--pc) 22%,transparent),rgba(0,0,0,.2));border:1px solid color-mix(in srgb,var(--pc) 45%,transparent)}
.sm-hd img{width:48px;height:48px}.sm-hd b{display:block;font-size:17px}.sm-hd small{display:block;opacity:.8;font-size:12px}
.sm-seal{margin-left:auto;text-align:center}.sm-seal b{display:block;font-size:22px;color:#ffd36b}.sm-seal small{font-size:11px;opacity:.75}
.sm-sec{display:flex;align-items:center;gap:8px;margin-top:4px}.sm-sec small{opacity:.7;font-size:12px}
.sm-needs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.sm-need{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.07)}
.sm-need img{width:28px;height:28px}.sm-need>div{flex:1;min-width:0}.sm-need b{display:block;font-size:12.5px}.sm-need .num{font-size:12px;font-weight:800}
.sm-bar{display:block;height:6px;margin-top:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}.sm-bar i{display:block;height:100%;background:#e0a33a}.sm-need.ok .sm-bar i{background:#5ccf6e}.sm-need.ok .num{color:#7dff9a}
.sm-ppl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.sm-p{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;padding:6px 8px;border-radius:9px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.08);cursor:pointer}
.sm-p span{font-weight:700;font-size:13px}.sm-p small{flex-basis:100%;opacity:.65;font-size:11px}.sm-p.on{border-color:#ffd36b;background:rgba(255,201,60,.12)}.sm-p.off{opacity:.55}
.sm-go{align-self:flex-start}.sm-rules{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.sm-pz{position:relative;display:flex;align-items:center;gap:8px;padding:7px 26px 7px 8px;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.07);cursor:help}.sm-pz:hover{border-color:rgba(255,214,107,.45);background:rgba(255,214,107,.07)}
.sm-pz img{width:38px;height:38px;image-rendering:pixelated;flex:none}.sm-pz>div{min-width:0;display:flex;flex-direction:column;gap:2px}.sm-pz b{font-size:13px}.sm-pz small{opacity:.75;font-size:11px;line-height:1.3}
.sm-pz.r2 b{color:#5aa8ff}.sm-pz.r3 b{color:#ff5d8f}.sm-pz.r4 b{color:#ffb43c}.sm-pz-q{position:absolute;top:6px;right:8px;font-style:normal;font-size:11px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);opacity:.7}
.sm-rule{display:flex;flex-direction:column;gap:4px;padding:6px 8px;border-radius:9px;background:rgba(0,0,0,.18)}.sm-rule>span{display:flex;flex-wrap:wrap;gap:4px}
.sm-invs{display:flex;flex-direction:column;gap:6px}.sm-invr{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;background:rgba(255,201,60,.12);border:1px solid rgba(255,201,60,.4)}
.sm-invr img{width:30px;height:30px}.sm-invr span{flex:1}
.sm-inv .sm-ih{display:flex;gap:8px;align-items:center}.sm-inv .sm-ih img{width:40px;height:40px}.sm-inv .sm-ih b{display:block}.sm-inv .sm-ih small{display:block;opacity:.8}
.hf.app .sm-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Dar item (13/10, presente da equipe) */
.gf-w{display:flex;flex-direction:column;gap:10px}.gf-hd{display:flex;flex-direction:column;gap:2px}.gf-hd small{opacity:.75}
.gf-tabs{display:flex;flex-wrap:wrap;gap:6px}.gf-tab{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.2);color:inherit;cursor:pointer}.gf-tab img{width:22px;height:22px;image-rendering:pixelated}.gf-tab.on{border-color:rgba(255,214,107,.55);background:rgba(255,214,107,.1)}
.gf-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.gf-bar input[type=search]{flex:1;min-width:160px}.gf-o{display:flex;align-items:center;gap:6px;font-size:12px}.gf-o input{width:90px}
.gf-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;max-height:300px;overflow:auto;padding-right:4px}
.gf-it{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:9px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.22);color:inherit;text-align:left;cursor:pointer;min-width:0}.gf-it:hover{border-color:rgba(255,214,107,.45)}
.gf-it img{width:30px;height:30px;image-rendering:pixelated;flex:none}.gf-it span{font-size:12px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.gf-it{flex-wrap:wrap}.gf-has{width:100%;padding-left:36px;margin-top:-4px;font-size:10.5px;color:#7fe0a0}.gf-has.z{color:inherit;opacity:.5}
.gf-sum{display:flex;flex-wrap:wrap;gap:6px}.gf-sum span{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.28);font-size:12px}.gf-sum img{width:18px;height:18px;image-rendering:pixelated}
.gf-cart{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:10px;background:rgba(0,0,0,.25)}.gf-c{display:flex;align-items:center;gap:6px}.gf-c img{width:24px;height:24px;image-rendering:pixelated}.gf-c span{flex:1;font-size:12px}
.gf-w input,.gf-w select{background:rgba(0,0,0,.35);color:inherit;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:6px 9px;font:inherit}
/* Converter antes de pagar (13/10): troca no Uniswap pelo valor exato do pedido. */
.wpay-swap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0;padding:8px 10px;border-radius:8px;background:rgba(88,168,255,.08);box-shadow:inset 0 0 0 1px rgba(88,168,255,.25)}
.wpay-swap b{flex:0 0 100%}.wpay-swap span{flex:1 1 220px;font-size:12px;opacity:.85}
/* Logos originais das moedas e redes (13/10 17:22): fundo neutro, o logo é quem dá a cor. */
.cg-b.usdc,.cg-b.usdt,.cg-b.sol{background:rgba(255,255,255,.06);color:#f3e9d2}
.cg-bc{display:inline-flex;align-items:center;gap:5px}.cg-bc img{width:20px;height:20px}
.cg-b small{display:inline-flex;align-items:center;gap:3px}.cg-b small img{width:12px;height:12px;border-radius:2px}
.cg-fi{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
/* Eventos de venda na Loja (13/10, vendas.ts): faixa de promoções, oferta relâmpago no pacote e o bônus no pedido pago. */
.sl-box{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:linear-gradient(90deg,rgba(255,120,40,.16),rgba(255,196,64,.05));border:1px solid rgba(255,150,60,.45);display:flex;flex-direction:column;gap:8px}
.sl-h{font-weight:800;color:#ffb35c;letter-spacing:.02em}
.sl-row{display:flex;gap:10px;align-items:flex-start}.sl-row>img{width:28px;height:28px;flex:none;image-rendering:pixelated}
.sl-row b{display:block;color:#ffe2a8}.sl-row small{display:block;opacity:.85}.sl-row>div{min-width:0;flex:1}
.sl-bar{height:8px;margin:6px 0 4px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}.sl-bar i{display:block;height:100%;background:linear-gradient(90deg,#ff9a3c,#ffd36a)}
.sl-tiers{display:flex;flex-wrap:wrap;gap:6px}.sl-t{display:inline-flex;gap:4px;align-items:center;font-size:12px;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1)}
.sl-t img{width:16px;height:16px}.sl-t.ok{border-color:rgba(125,255,154,.5);color:#9dffb3}
.ds-card.ds-flash{box-shadow:inset 0 0 0 2px #ff8a3c,0 0 16px rgba(255,120,40,.3)}.ds-tag.flash{background:#ff6a2a;color:#fff}
.ds-wasp{display:block;font-size:12px;opacity:.7;margin-top:2px}.sl-got{margin-top:-4px}
/* Bônus dos visuais (13/10, visual-bonus.ts): a etiqueta ✦ no cartão da Loja e na Mochila › Visual. */
.lb-b{display:block;color:#9dffb3;font-weight:700;font-size:12px;line-height:1.2;margin:2px 0}
.vz-card{position:relative}.vz-lb{position:absolute;left:6px;top:6px;z-index:2;padding:2px 7px;border-radius:999px;background:rgba(10,20,14,.82);border:1px solid rgba(125,255,154,.45)}
.mv-cell{position:relative}.mv-cell .lb-b{position:absolute;left:3px;top:3px;z-index:2;font-size:10.5px;padding:1px 5px;border-radius:999px;background:rgba(10,20,14,.85);max-width:calc(100% - 6px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Ranking de Honra da semana (13/10) na janela do PvP. */
.pvh-rkb{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.pvh-rk{display:grid;grid-template-columns:34px 1fr auto;gap:2px 8px;align-items:center;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.04)}
.pvh-rk.top{background:rgba(255,201,60,.1)}
.pvh-rk span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.pvh-rk small{grid-column:2;opacity:.75;font-size:11px}.pvh-rk em{grid-column:3;grid-row:1/3;font-style:normal;font-size:11px;color:#ffd66b;text-align:right}
/* Alvorada ilustrada (13/10, CityNpc.mapView): a cidade vista de cima com os moradores no lugar; moldura de madeira e ouro. */
.cn-city{display:flex;flex-direction:column;gap:8px}
.cm-seg{display:flex;gap:4px;align-self:flex-start;padding:3px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid rgba(201,162,92,.35)}
.cm-seg button{padding:6px 14px;border-radius:7px;font:inherit;font-weight:700;font-size:13px;color:#cdbb92;background:transparent;border:0;cursor:pointer}
.cm-seg button.on{background:linear-gradient(#e8bf5a,#b8862a);color:#2a1a06;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.cm-wrap{position:relative;max-height:min(72vh,860px);overflow:auto;border-radius:12px;border:3px solid #6b4a24;box-shadow:0 0 0 2px #2a1a0a,0 0 0 4px #c9a25c,inset 0 0 40px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.5);background:#1b2a12}
.cm-map{position:relative;width:100%;min-width:760px;aspect-ratio:5/4;background-size:100% 100%;image-rendering:pixelated}
.cm-map::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px rgba(0,0,0,.55)}
.cm-pin{position:absolute;transform:translate(-50%,-92%);display:flex;flex-direction:column;align-items:center;gap:1px;padding:0;border:0;background:none;cursor:pointer;z-index:2}
.cm-pin:hover,.cm-pin:focus-visible{z-index:5}
.cm-face{width:38px;height:38px;border-radius:50%;overflow:hidden;display:block;background:radial-gradient(#3b2a14,#120c05);border:2px solid #c9a25c;box-shadow:0 0 0 2px #2a1a0a,0 4px 10px rgba(0,0,0,.6);transition:transform .15s}
.cm-face img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.cm-pin:hover .cm-face,.cm-pin:focus-visible .cm-face{transform:scale(1.18);border-color:#ffe08a;box-shadow:0 0 0 2px #2a1a0a,0 0 16px rgba(255,208,100,.8)}
.cm-pin.has .cm-face{border-color:#ffd24a;animation:cm-glow 1.6s ease-in-out infinite}
@keyframes cm-glow{50%{box-shadow:0 0 0 2px #2a1a0a,0 0 18px rgba(255,210,74,.95)}}
.cm-mark{position:absolute;top:-10px;right:-6px;width:20px;height:20px;border-radius:50%;background:#ffd24a;color:#2a1a06;font-style:normal;font-weight:900;font-size:14px;line-height:20px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.cm-name{font-size:10.5px;font-weight:800;color:#ffe6a8;white-space:nowrap;padding:1px 6px;border-radius:6px;background:rgba(18,11,4,.82);border:1px solid rgba(201,162,92,.5);text-shadow:0 1px 0 #000}
.cm-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);width:max-content;max-width:240px;display:none;flex-direction:column;gap:3px;padding:8px 10px;border-radius:8px;text-align:left;background:linear-gradient(#2b1d0c,#16100a);border:1px solid #c9a25c;box-shadow:0 8px 20px rgba(0,0,0,.6);color:#f3e9d2}
.cm-tip b{font-size:13px;color:#ffd66b}.cm-tip em{font-style:normal;font-size:12px;color:#c9e3a0}.cm-tip small{font-size:11.5px;line-height:1.35;opacity:.85;white-space:normal}
.cm-pin:hover .cm-tip,.cm-pin:focus-visible .cm-tip{display:flex}
@media (hover:none){.cm-tip{display:none!important}}
/* Animação ao abrir (13/10 23:14) e celular. */
.cm-wrap{animation:cm-open .55s cubic-bezier(.2,.8,.2,1) both}
.cm-map{animation:cm-reveal .9s ease-out both}
@keyframes cm-open{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes cm-reveal{from{filter:brightness(.25) saturate(.4) blur(2px)}60%{filter:brightness(.9) saturate(1) blur(0)}to{filter:none}}
.cm-pin{animation:cm-drop .5s cubic-bezier(.3,1.5,.5,1) var(--d,.3s) both}
@keyframes cm-drop{from{opacity:0;translate:0 -26px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.cm-wrap,.cm-map,.cm-pin{animation:none}}
@media (max-width:720px){
.cm-wrap{max-height:62vh;border-width:2px}
.cm-map{min-width:900px}
.cm-face{width:30px;height:30px;border-width:2px}
.cm-name{font-size:9.5px;padding:0 4px}
.cm-mark{width:16px;height:16px;line-height:16px;font-size:11px;top:-8px;right:-5px}
.cm-seg button{padding:6px 12px}
}
/* Conjuntos de equipamento (14/10, Inv.gearBox). */
.gs{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.gs-h{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#d9b770}
.gs-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.gs-slot{position:relative;display:flex;min-width:0}
.gs-use{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 16px 6px 8px;border-radius:8px;border:1px solid rgba(201,162,92,.55);background:linear-gradient(#2c2213,#1a140b);color:#f3e9d2;cursor:pointer;font:inherit;text-align:left}
.gs-use:hover{border-color:#ffd66b;box-shadow:0 0 10px rgba(255,214,107,.25)}
.gs-use b{font-size:12.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gs-use small{font-size:11px;opacity:.75}
.gs-slot.gs-new .gs-use{border-style:dashed;background:rgba(0,0,0,.2);color:#bfae88}
.gs-more{position:absolute;right:2px;top:2px;width:20px;height:20px;padding:0;border:0;border-radius:5px;background:transparent;color:#d9b770;cursor:pointer;font-size:14px;line-height:1}
.gs-more:hover{background:rgba(255,214,107,.15)}
.gs-menu{position:absolute;left:0;top:calc(100% + 4px);z-index:20;min-width:200px;display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-radius:8px;background:#1d160c;border:1px solid #c9a25c;box-shadow:0 10px 24px rgba(0,0,0,.55)}
.gs-slot:nth-child(3) .gs-menu{left:auto;right:0}
.gs-menu .ig-btn{flex:1 1 auto}
.gs-in{flex:1;min-width:0;height:30px;padding:0 8px;border-radius:6px;border:1px solid #6b5530;background:#0f0b06;color:#f3e9d2;font:inherit}
/* Espólios deste mapa (14/10, PUNISHER: "onde farmar, com uma tabela dos espólios indicada direto no mapa"): Views.mapDrops */
.tt-drops .md-mats{margin-top:10px}
.tt-drops .md-ml{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tt-drops .md-m{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.06);font-size:12px;line-height:1.2}
.tt-drops .md-m img{width:22px;height:22px;image-rendering:pixelated;flex:none}
.tt-drops .md-m i{font-style:normal;color:#ffd77a;font-weight:800}
.tt-drops .md-m em,.lg-m em{font-style:normal;font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;background:rgba(111,140,255,.25);color:#cfd8ff}
.tt-drops .md-m.raro b{color:#8ec2ff}
/* Onde encontrar cada espólio (14/10): Mochila › Espólios (Inv.lootGuide) */
.lg{margin-top:12px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px}
.lg summary{cursor:pointer;font-weight:800;color:#ffd77a;margin-bottom:4px}
.lg-r{display:flex;flex-direction:column;gap:4px;padding:6px 8px;border-radius:6px;background:rgba(255,255,255,.04);margin-top:6px}
.lg-ms{display:flex;flex-wrap:wrap;gap:4px 12px}
.lg-m{display:inline-flex;align-items:center;gap:5px;font-size:12px}
.lg-m img{width:22px;height:22px;image-rendering:pixelated;flex:none}
.lg-m.none{opacity:.45}
.lg-m i{font-style:normal;color:#aab4c1;font-size:11px}
.lg-w{display:flex;align-items:flex-start;gap:5px;color:#cfd8e3;font-size:11.5px;line-height:1.35}
.lg-w img{width:14px;height:14px;margin-top:1px;flex:none}
/* Indique & Ganhe (15/10): quanto o jogador já ganhou em diamantes com as indicações. */
.rf-earn{display:flex;align-items:center;gap:6px;margin-top:4px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.28);border:1px solid rgba(255,214,107,.35);font-size:13px;color:#f3e3bd}.rf-earn img{width:18px;height:18px}.rf-earn b{color:#ffd66b}
/* Estandarte da Guild (15/10): meta do cofre e o bônus de XP por dias. */
.gd-banner{display:flex;align-items:center;gap:10px;margin:8px 0;padding:10px;border-radius:10px;background:rgba(0,0,0,.25);border:1px solid rgba(255,214,107,.25)}.gd-banner.ready{border-color:#ffd66b;box-shadow:0 0 12px rgba(255,214,107,.25)}.gd-banner.on{border-color:#7dff8a}
.gd-bn-ic{font-size:26px}.gd-bn-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.gd-bn-t .bar{height:8px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}.gd-bn-t .bar i{display:block;height:100%;background:linear-gradient(90deg,#c58a1c,#ffd66b)}
/* Arena ranqueada (15/10): faixa, duelos da semana e prêmios de sábado. */
.rk-box{display:flex;flex-direction:column;gap:6px;margin:8px 0;padding:10px;border-radius:10px;background:rgba(0,0,0,.25);border:1px solid rgba(255,214,107,.25)}
.rk-top{display:flex;align-items:center;gap:10px}.rk-top>div{display:flex;flex-direction:column;min-width:0}.rk-top b{font-size:18px;color:#ffd66b}.rk-top small{font-size:11px;opacity:.85}
.rk-dot{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(0,0,0,.4)}.rk-dot.big{width:34px;height:34px}
.rk-bronze{background:#b0703a}.rk-prata{background:#c8ced6}.rk-ouro{background:#ffcf4a}.rk-platina{background:#7fe0d0}.rk-diamante{background:#6fb8ff}.rk-mestre{background:#c27dff}.rk-challenger{background:linear-gradient(135deg,#ff5a5a,#ffd66b)}
.rk-prog small{font-size:12px}.rk-tab summary{cursor:pointer;font-size:12px;opacity:.9}.rk-row{display:grid;grid-template-columns:14px 1fr auto auto;gap:8px;align-items:center;padding:3px 2px;font-size:12px}.rk-row.on{background:rgba(255,214,107,.12);border-radius:6px}.rk-last{font-size:12px;opacity:.9}
/* PvP em reformulação (15/10): aviso no lugar dos mapas PvP. */
.pv-off{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 18px;text-align:center}.pv-off img{width:64px;height:64px;image-rendering:pixelated}.pv-off p{max-width:460px;margin:0;opacity:.9}
/* RANKEADA:INI — Arena Rankeada (15/10): tela própria com insígnias SVG animadas, contagem para o prêmio, faixas e ranking. */
.win-rankeada{width:1080px;height:730px}
.win-rankeada .win-body{padding:0;overflow:auto;position:relative}
/* Insígnias v2 (15/10 16:23, dono: "insígnias mais bonitas... VFX elas montando, animação quando troca de elo"). */
.rkb{display:block;overflow:visible}
.rkb [class^="rkp"],.rkb [class*=" rkp"]{transform-box:view-box}
.rkb .rkb-sh{animation:rkSh 4s ease-in-out infinite}
@keyframes rkSh{0%,60%{transform:translateX(0) skewX(-20deg)}100%{transform:translateX(360px) skewX(-20deg)}}
.rkb .rkp-flash,.rkb .rkp-ring{opacity:0;pointer-events:none}
.rkb .rkp-fl{animation:rkFl .7s ease-in-out infinite alternate}.rkb .rkp-fl.b{animation-duration:.5s}
@keyframes rkFl{from{transform:scale(1,1)}to{transform:scale(1.05,1.14)}}
.rkb .rkp-st{opacity:0;transform-box:fill-box;transform-origin:center;animation:rkTw 2.4s ease-in-out var(--d) infinite}
@keyframes rkTw{0%,100%{opacity:0}50%{opacity:1}}
.rkb .rkp-tw{animation:rkTw 3s ease-in-out infinite}
.rkb .rkp-sh2{transform-box:fill-box;transform-origin:center;animation:rkBobS 3s ease-in-out var(--d) infinite}
@keyframes rkBobS{0%,100%{translate:0 0}50%{translate:0 -6px}}
/* Grande: flutua, as asas batem devagar, a gema pulsa, os raios giram. */
.rkb.big{animation:rkFloat 3.6s ease-in-out infinite;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--rkc) 70%,transparent)) drop-shadow(0 8px 10px rgba(0,0,0,.5))}
@keyframes rkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.rkb.big .rkp-wl{animation:rkFlapL 3.6s ease-in-out infinite}.rkb.big .rkp-wr{animation:rkFlapR 3.6s ease-in-out infinite}
@keyframes rkFlapL{0%,100%{transform:rotate(0)}50%{transform:rotate(5deg)}}@keyframes rkFlapR{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
.rkb.big .rkp-gglow{animation:rkGlow 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes rkGlow{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
.rkb.big .rkp-rays{animation:rkSpin 24s linear infinite}
.rkb.big .rkp-aura{animation:rkAura 3s ease-in-out infinite}
@keyframes rkAura{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes rkSpin{to{transform:rotate(360deg)}}
/* Montagem (troca de elo e ao tocar na insígnia): a aura acende, o escudo cai girando, louros e faixa entram, as asas abrem,
a coroa desce, a gema acende com um clarão e uma onda de choque. */
.rkb.build{animation:none}
.rkb.build .rkp-aura{animation:rkbAura .6s ease-out both}
.rkb.build .rkp-body{animation:rkbBody .75s cubic-bezier(.2,1.5,.4,1) .1s both}
.rkb.build .rkp-lau{animation:rkbPop .45s cubic-bezier(.2,1.6,.4,1) .55s both}
.rkb.build .rkp-rib{animation:rkbRib .5s cubic-bezier(.2,1.4,.4,1) .65s both}
.rkb.build .rkp-wl{animation:rkbWL .7s cubic-bezier(.2,1.4,.4,1) .7s both}
.rkb.build .rkp-wr{animation:rkbWR .7s cubic-bezier(.2,1.4,.4,1) .7s both}
.rkb.build .rkp-top{animation:rkbTop .55s cubic-bezier(.3,1.6,.5,1) 1.05s both}
.rkb.build .rkp-fx{animation:rkbFade .6s ease-out 1.2s both}
.rkb.build .rkp-gem{animation:rkbGem .6s cubic-bezier(.2,1.8,.4,1) 1.25s both}
.rkb.build .rkp-flash{animation:rkbFlash .7s ease-out 1.3s both}
.rkb .rkp-ring{transform-box:fill-box;transform-origin:center}.rkb.build .rkp-ring{animation:rkbRingW .9s ease-out 1.3s both}
@keyframes rkbAura{from{opacity:0;transform:scale(.2)}}
@keyframes rkbBody{0%{opacity:0;transform:translateY(-90px) scale(.3) rotate(-35deg)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes rkbPop{from{opacity:0;transform:scale(0)}}
@keyframes rkbRib{from{opacity:0;transform:translateY(40px) scaleX(.2)}}
@keyframes rkbWL{from{opacity:0;transform:rotate(-95deg) scale(.3)}}
@keyframes rkbWR{from{opacity:0;transform:rotate(95deg) scale(.3)}}
@keyframes rkbTop{0%{opacity:0;transform:translateY(-80px)}70%{opacity:1}100%{opacity:1;transform:none}}
@keyframes rkbFade{from{opacity:0}}
@keyframes rkbGem{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:none}}
@keyframes rkbFlash{0%{opacity:0}15%{opacity:.95}100%{opacity:0}}
@keyframes rkbRingW{0%{opacity:0;transform:scale(.3);stroke-width:14}2%{opacity:.9;transform:scale(.3);stroke-width:14}100%{opacity:0;transform:scale(1.5);stroke-width:1}}
/* Tela de promoção (troca de faixa) */
.rk-promo{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:#e8e1d0;
background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--rkc) 30%,#0b1220) 0,#05080e 65%);animation:rkFade .35s both;overflow:hidden;font-family:"HF Sans",system-ui,sans-serif}
.rk-promo.out{animation:rkOut .35s both}
@keyframes rkFade{from{opacity:0}}@keyframes rkOut{to{opacity:0}}
.rk-promo .rkpm-rays{position:absolute;left:50%;top:42%;width:1400px;height:1400px;margin:-700px 0 0 -700px;opacity:.3;pointer-events:none;
background:repeating-conic-gradient(from 0deg,var(--rkc) 0 5deg,transparent 5deg 18deg);-webkit-mask:radial-gradient(closest-side,#000 5%,transparent 70%);mask:radial-gradient(closest-side,#000 5%,transparent 70%);animation:rkSpin 30s linear infinite}
.rk-promo .rkpm-b{position:relative;cursor:pointer}
.rk-promo .rkpm-k{position:relative;font:700 14px/1 "HF Sans",sans-serif;letter-spacing:.4em;color:#ffd96a;text-transform:uppercase;animation:rkUpIn .5s ease-out 1.4s both}
.rk-promo .rkpm-t{position:relative;margin:4px 0 0;font:800 64px/1 "HF Title","Alegreya SC",Georgia,serif;letter-spacing:.04em;background:linear-gradient(180deg,#fff,var(--rkc) 75%);-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 3px 0 rgba(0,0,0,.6)) drop-shadow(0 0 18px color-mix(in srgb,var(--rkc) 60%,transparent));animation:rkTitle .6s cubic-bezier(.2,1.6,.4,1) 1.5s both}
@keyframes rkTitle{from{opacity:0;transform:scale(2.2);letter-spacing:.4em}}
@keyframes rkUpIn{from{opacity:0;transform:translateY(12px)}}
.rk-promo .rkpm-s{position:relative;color:#b8c2d0;max-width:440px;animation:rkUpIn .5s ease-out 1.8s both}.rk-promo .rkpm-s b{color:#ffd96a}
.rk-promo .rkpm-go{position:relative;margin-top:14px;cursor:pointer;border:0;border-radius:12px;padding:12px 34px;font:800 17px "HF Title",Georgia,serif;letter-spacing:.08em;color:#2a1906;background:linear-gradient(#ffe08a,#f2b630 55%,#d28d18);box-shadow:0 4px 0 #8a5a12;animation:rkUpIn .5s ease-out 2s both}
.rk-promo .rkpm-cf{position:absolute;left:50%;top:42%;width:0;height:0;pointer-events:none}
.rk-promo .rkpm-cf i{position:absolute;width:8px;height:14px;border-radius:2px;background:var(--c);opacity:0;animation:rkConf 1.6s cubic-bezier(.1,.7,.3,1) calc(1.3s + var(--d)) both}
@keyframes rkConf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
.rk-promo.down{background:radial-gradient(circle at 50% 42%,#1b2638 0,#05080e 65%)}.rk-promo.down .rkpm-rays{opacity:.1}
@media (prefers-reduced-motion:reduce){.rkb,.rkb *,.rk-promo,.rk-promo *{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important}}
.rkq{--gold:#f2c14e;--ink:#e8e1d0;--mut:#9aa6b6;display:flex;flex-direction:column;gap:12px;padding:12px;color:var(--ink);min-height:100%;position:relative;
background:radial-gradient(900px 380px at 50% -80px,color-mix(in srgb,var(--rkc) 26%,transparent),transparent 70%),linear-gradient(180deg,#0b1220,#070c14)}
.rkq-eye{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.rkq-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:210px minmax(0,1fr) 240px;align-items:center;gap:18px;padding:18px 22px;border-radius:16px;
border:1px solid color-mix(in srgb,var(--rkc) 55%,#243246);background:linear-gradient(120deg,rgba(255,255,255,.06),rgba(255,255,255,0) 40%),linear-gradient(180deg,#152236,#0e1726);
box-shadow:0 0 0 1px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45),inset 0 0 60px color-mix(in srgb,var(--rkc) 18%,transparent)}
.rkq-rays{position:absolute;left:100px;top:50%;width:620px;height:620px;margin:-310px 0 0 -310px;pointer-events:none;opacity:.35;
background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rkc) 70%,transparent) 0 6deg,transparent 6deg 22deg);
-webkit-mask:radial-gradient(closest-side,#000 10%,transparent 75%);mask:radial-gradient(closest-side,#000 10%,transparent 75%);animation:rkSpin 40s linear infinite}
@keyframes rkSpin{to{transform:rotate(360deg)}}
.rkq-sparks{position:absolute;inset:0;pointer-events:none}
.rkq-sparks i{position:absolute;left:var(--x);bottom:-6px;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px var(--rkc),0 0 2px #fff;opacity:0;animation:rkUp var(--s) linear var(--d) infinite}
@keyframes rkUp{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-190px);opacity:0}}
.rkq-mb{position:relative;display:grid;place-items:center;z-index:1;cursor:pointer}
.rkq-mb::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rkc) 55%,transparent),transparent 70%);animation:rkPulse 2.6s ease-in-out infinite}
@keyframes rkPulse{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.12);opacity:1}}
.rkq-me{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.rkq-chip{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.08em;padding:3px 10px;border-radius:999px;color:#2a1906;background:linear-gradient(#ffd96a,#e0a52a);box-shadow:0 2px 0 #8a5a12}
.rkq-tier{margin:0;font-family:"HF Title","Alegreya SC",Georgia,serif;font-weight:800;font-size:46px;line-height:1;letter-spacing:.03em;
background:linear-gradient(180deg,#fff,var(--rkc) 70%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.rkq-meta{font-size:15px;color:var(--mut)}.rkq-meta b{color:var(--ink);font-size:17px}.rkq-meta span{margin:0 4px}
.rkq-bar{position:relative;height:12px;border-radius:999px;background:#0a111c;border:1px solid #2b3a52;overflow:hidden}
.rkq-bar i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--rkc) 60%,#000),var(--rkc),#fff);animation:rkGrow 1.1s cubic-bezier(.2,.9,.3,1) both}
.rkq-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:200% 100%;animation:rkShim 2.2s linear infinite}
@keyframes rkGrow{from{width:0}}@keyframes rkShim{from{background-position:150% 0}to{background-position:-50% 0}}
.rkq-nx{color:var(--mut)}.rkq-nx b{color:var(--ink)}
.rkq-cta{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;gap:8px;text-align:center}
.rkq-find{position:relative;cursor:pointer;border:0;border-radius:14px;padding:16px 14px;color:#2a1906;background:linear-gradient(#ffe08a,#f2b630 55%,#d28d18);box-shadow:0 4px 0 #8a5a12,0 10px 24px rgba(242,182,48,.35);display:flex;flex-direction:column;gap:2px;transition:transform .12s}
.rkq-find b{font:800 19px/1.1 "HF Title","Alegreya SC",Georgia,serif;letter-spacing:.06em}.rkq-find small{font-size:12px;opacity:.8}
.rkq-find::before{content:"";position:absolute;inset:-4px;border-radius:17px;border:2px solid #ffd96a;opacity:0;animation:rkRing 2s ease-out infinite}
.rkq-find:hover{transform:translateY(-2px)}.rkq-find:active{transform:translateY(2px);box-shadow:0 2px 0 #8a5a12}
.rkq-find:disabled{cursor:default;filter:grayscale(.8) brightness(.7);transform:none}.rkq-find:disabled::before{animation:none}
@keyframes rkRing{0%{transform:scale(.96);opacity:.9}100%{transform:scale(1.12);opacity:0}}
.rkq-left{color:var(--mut)}.rkq-left b{color:var(--gold)}
.rkq-row{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:12px}
.rkq-card{position:relative;min-width:0;border-radius:14px;padding:14px 16px;border:1px solid #243246;background:linear-gradient(180deg,#132036,#0e1726);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.win:not(.still) .rkq-card,.win:not(.still) .rkq-hero{animation:rkIn .5s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i,0) * 70ms + 60ms)}
@keyframes rkIn{from{opacity:0;transform:translateY(14px)}}
.rkq-prize{display:flex;flex-direction:column;gap:4px;overflow:hidden}
.rkq-prize::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(242,193,78,.25),transparent 70%)}
.rkq-cd{font:800 30px/1.1 "HF Sans",system-ui,sans-serif;color:var(--gold);letter-spacing:.02em;text-shadow:0 0 18px rgba(242,193,78,.35)}
.rkq-day{color:var(--mut);text-transform:capitalize}
.rkq-now{display:flex;align-items:center;gap:10px;margin-top:6px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.25)}
.rkq-now span{display:flex;flex-direction:column;font-size:12px;color:var(--mut)}.rkq-now span b{font-size:18px;color:var(--ink)}
.rkq-week{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.rkq-week .rkq-eye{align-self:stretch;text-align:left}
.rkq-week small{color:var(--mut)}.rkq-week small b{color:var(--ink)}
.rkq-ring{--p:0;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--p) * 1%),#1b2638 0);animation:rkRingIn 1s ease-out both;position:relative}
.rkq-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#0e1726}
.rkq-ring b{position:relative;font-size:22px}.rkq-ring.ok{background:conic-gradient(#7dff9a calc(var(--p) * 1%),#1b2638 0);box-shadow:0 0 22px rgba(125,255,154,.25)}
@keyframes rkRingIn{from{transform:rotate(-90deg) scale(.8);opacity:0}}
.rkq-how ol{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px;counter-reset:rk}
.rkq-how li{counter-increment:rk;display:grid;grid-template-columns:24px 1fr;column-gap:8px;font-size:13px;line-height:1.3}
.rkq-how li::before{content:counter(rk);grid-row:span 2;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12px;color:#2a1906;background:linear-gradient(#ffd96a,#e0a52a)}
.rkq-how li span{color:var(--mut)}
.rkq-track{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:6px;padding:26px 4px 4px}
.rkq-track::before{content:"";position:absolute;left:6%;right:6%;bottom:64px;height:3px;border-radius:2px;background:linear-gradient(90deg,#cd8445,#b7c3d6,#f2c14e,#45d3bc,#5aa8ff,#a75cff,#ff6a3a);opacity:.5}
.rkq-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;animation:rkIn .5s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i) * 80ms + 300ms)}
.rkq-sb{display:grid;place-items:end center;min-height:128px;cursor:pointer}.rkq-sb:hover .rkb{transform:scale(1.08)}.rkq-sb .rkb{transition:transform .2s}
.rkq-step b{font-size:14px;margin-top:2px}.rkq-step small{color:var(--mut);font-size:11px}.rkq-step em{font-style:normal;font-weight:700;color:var(--gold);font-size:13px}
.rkq-step.lock .rkb{filter:grayscale(.55) brightness(.75)}.rkq-step.lock b{color:var(--mut)}
.rkq-step.done .rkb{filter:brightness(.92)}
.rkq-step.on b{color:var(--rkc)}
.rkq-step.on::before{content:"";position:absolute;left:50%;top:6px;width:96px;height:96px;margin-left:-48px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rkc) 45%,transparent),transparent 70%);animation:rkPulse 2.6s ease-in-out infinite}
.rkq-you{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-style:normal;font-size:10px;font-weight:800;letter-spacing:.12em;padding:2px 8px;border-radius:999px;color:#2a1906;background:var(--gold);animation:rkBob 1.6s ease-in-out infinite}
@keyframes rkBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-4px)}}
.rkq-rh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}.rkq-rh small:last-child{color:var(--mut)}.rkq-rh b{color:var(--gold)}
.rkq-list{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.rkq-r{display:grid;grid-template-columns:44px 40px minmax(0,1fr) 140px 80px;align-items:center;gap:10px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid transparent;animation:rkIn .45s ease-out both;animation-delay:calc(var(--i) * 40ms + 380ms)}
.rkq-r:hover{background:rgba(255,255,255,.06)}
.rkq-r.me{border-color:var(--gold);background:linear-gradient(90deg,rgba(242,193,78,.16),rgba(242,193,78,.03))}
.rkq-pos{font-size:16px;text-align:center;color:var(--mut)}
.rkq-r.p1 .rkq-pos{color:#ffd96a;text-shadow:0 0 10px rgba(255,217,106,.6)}.rkq-r.p2 .rkq-pos{color:#dfe8ff}.rkq-r.p3 .rkq-pos{color:#ffb36b}
.rkq-r.p1{background:linear-gradient(90deg,rgba(255,217,106,.12),transparent)}
.rkq-por{width:36px;height:36px;border-radius:9px;overflow:hidden;background:#0a111c;border:1px solid #2b3a52}.rkq-por img{width:100%;height:100%;object-fit:cover}
.rkq-nm{display:flex;flex-direction:column;min-width:0}.rkq-nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rkq-nm small{color:var(--mut);font-size:11px}
.rkq-tb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}
.rkq-pts{text-align:right;font-size:16px;color:var(--gold)}
.rkq-gap{text-align:center;color:var(--mut);letter-spacing:.4em;font-size:12px}
.rkq-search{position:fixed;inset:0;z-index:9998;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(5,9,16,.86);backdrop-filter:blur(4px);animation:rkFade .25s both}
.rkq-search[hidden]{display:none}
.rkq-search .t-title{font-size:26px}.rkq-search small{color:var(--mut)}
@keyframes rkFade{from{opacity:0}}
.rkq-radar{position:relative;width:220px;height:220px;display:grid;place-items:center}
.rkq-radar i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--rkc);opacity:0;animation:rkRadar 1.8s ease-out infinite}
.rkq-radar i:nth-child(2){animation-delay:.6s}.rkq-radar i:nth-child(3){animation-delay:1.2s}
@keyframes rkRadar{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1);opacity:0}}
.rkq-off{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:100%;text-align:center;padding:30px}
.rkq-off img{width:80px}.rkq-off p{color:#9aa6b6;max-width:420px}
.navbtn.nb-rank img,.more-rank img{filter:drop-shadow(0 0 6px rgba(255,200,70,.7))}.navbtn.nb-rank span{color:#ffd66b;font-weight:700;letter-spacing:.03em}
@media (max-width:820px){
.rkq{padding:8px;gap:10px}
.rkq-hero{grid-template-columns:1fr;justify-items:center;text-align:center;padding:16px 12px}
.rkq-rays{left:50%;top:110px}
.rkq-me{align-items:center}.rkq-me .rkq-chip{align-self:center}.rkq-bar{align-self:stretch}
.rkq-tier{font-size:38px}.rkq-cta{align-self:stretch}
.rkq-row{grid-template-columns:1fr}
.rkq-track{grid-template-columns:repeat(7,minmax(64px,1fr));overflow-x:auto;padding-bottom:6px}
.rkq-r{grid-template-columns:34px 34px minmax(0,1fr) 34px 64px}.rkq-tb small{display:none}
}
@media (prefers-reduced-motion:reduce){.rkq *,.rkq *::before,.rkq *::after,.rkb,.rkb *{animation:none!important}}
.rkq-sw{width:96px;height:96px;filter:drop-shadow(0 0 12px var(--rkc))}
.rkq-norm{background:linear-gradient(#9fd6ff,#4a8fe0 55%,#2c5fae);box-shadow:0 4px 0 #1c3a6e,0 10px 24px rgba(74,143,224,.35);color:#0b1a33}.rkq-norm::before{border-color:#9fd6ff}
.nm-card{display:flex;align-items:center;gap:10px;margin:8px 0;padding:10px 12px;border-radius:12px;border:1px solid #3a5a8a;background:linear-gradient(120deg,rgba(90,168,255,.16),rgba(90,168,255,.03))}
.nm-t{display:flex;flex-direction:column;min-width:0;flex:1}.nm-t b{color:#bfe2ff}.nm-t small{color:#9aa6b6;font-size:12px}
.nm-go{cursor:pointer;border:0;border-radius:10px;padding:8px 14px;display:flex;flex-direction:column;align-items:center;color:#0b1a33;background:linear-gradient(#9fd6ff,#4a8fe0);box-shadow:0 3px 0 #1c3a6e;font:700 14px "HF Sans",sans-serif}
.nm-go small{font-size:11px;font-weight:400}.nm-go:disabled{filter:grayscale(.8) brightness(.7);cursor:default}
/* Janela Duelos nova (15/10 18:08): faixa com você, abas grandes e o conteúdo rolando por baixo. */
.win-duelos{width:1100px;height:740px}
.win-duelos .win-body{display:flex;flex-direction:column;overflow:hidden;padding:0}
.du3{display:flex;flex-direction:column;flex:1;min-height:0;gap:10px;padding:10px 12px 12px;background:radial-gradient(900px 300px at 50% -60px,rgba(90,168,255,.12),transparent 70%)}
.du3.tab-ranked{background:radial-gradient(900px 300px at 50% -60px,rgba(242,193,78,.14),transparent 70%)}
.du3-top{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;border:1px solid #243246;background:linear-gradient(180deg,#132036,#0e1726)}
.du3-por{width:44px;height:44px;border-radius:10px;overflow:hidden;border:1px solid #3a4a66;background:#0a111c;flex:none}.du3-por img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.du3-me{display:flex;flex-direction:column;min-width:0;flex:1}.du3-me b{font-size:16px}.du3-me small{color:#9aa6b6}
.du3-hon{display:flex;align-items:center;gap:8px;min-width:200px}.du3-hon img{width:30px}.du3-hon div{display:flex;flex-direction:column;flex:1}.du3-hon b{color:#ffd96a;font-size:16px}.du3-hon small{color:#9aa6b6;font-size:11px}
.du3-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.du3-tab{position:relative;flex:1;min-width:120px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;padding:10px 12px;border-radius:12px;border:1px solid #2b3a52;background:linear-gradient(180deg,#16233a,#0f1828);color:#c9d2e0;font:700 14px "HF Sans",sans-serif;transition:transform .12s,background .2s}
.du3-tab img,.du3-tab .rkb{width:24px;height:24px}.du3-tab:hover{transform:translateY(-1px);background:linear-gradient(180deg,#1b2b47,#122036)}
.du3-tab.on{color:#fff;border-color:#6aa8ff;background:linear-gradient(180deg,#2f6fd0,#1d4a96);box-shadow:0 0 0 1px rgba(106,168,255,.4),0 6px 16px rgba(47,111,208,.35)}
.du3-tab.rk.on{border-color:#ffd96a;color:#2a1906;background:linear-gradient(180deg,#ffe08a,#e0a52a);box-shadow:0 0 0 1px rgba(255,217,106,.4),0 6px 16px rgba(242,182,48,.35)}
.du3-tab .du-n{position:absolute;top:-6px;right:-4px}
.du3-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:#8a6a3a #0c121c}
.du3-body>*{flex-shrink:0}.du3-body>.rkq{padding:0;background:none;min-height:auto}
.rkq-pre{color:#9aa6b6}
.du3-sec{border-radius:14px;padding:12px 14px;border:1px solid #243246;background:linear-gradient(180deg,#132036,#0e1726)}
.du3-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}.du3-h b{font:800 17px "HF Title",Georgia,serif;color:#ffd96a}.du3-h small{color:#9aa6b6}
.du3-sec .du-new{border:0;background:none;padding:0}.du3-sec .du-step{display:none}
.du3-inbox{border-color:#e0a52a;box-shadow:0 0 0 1px rgba(224,165,42,.25)}
.du3-old summary{cursor:pointer;color:#9aa6b6;font-weight:700}
.nm-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:120px minmax(0,1fr) 220px;align-items:center;gap:16px;padding:16px 20px;border-radius:16px;border:1px solid #3a5a8a;
background:radial-gradient(500px 200px at 15% 50%,rgba(90,168,255,.25),transparent 70%),linear-gradient(180deg,#152a48,#0e1a2e);box-shadow:0 10px 26px rgba(0,0,0,.4)}
.nm-hero.off{grid-template-columns:1fr;opacity:.8}
.nm-art{display:grid;place-items:center}.nm-art img{width:96px;height:96px;filter:drop-shadow(0 0 14px rgba(90,168,255,.7));animation:rkFloat 3.4s ease-in-out infinite}
.nm-ht{display:flex;flex-direction:column;gap:4px;min-width:0}.nm-ht .t-title{font-size:30px;color:#cfe6ff}.nm-ht p{margin:0;color:#9aa6b6}
.nm-cta{display:flex;flex-direction:column}
@media (max-width:820px){.du3{padding:8px;gap:8px}.du3-tab{min-width:auto;flex:none;padding:8px 10px}.du3-tab span{font-size:13px}.du3-hon{min-width:0}.nm-hero{grid-template-columns:1fr;justify-items:center;text-align:center}.nm-art img{width:72px;height:72px}.nm-cta{align-self:stretch}}
/* 19:04 (dono: "largura muito grande, muito feio"): janela mais estreita, Partida normal em duas colunas e os amigos em cartões. */
.win-duelos{width:980px}
.du3-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:10px;align-items:start}
.du3-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.du3-col .nm-hero{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px;padding:16px}
.du3-col .nm-art img{width:72px;height:72px}.du3-col .nm-ht .t-title{font-size:26px}.du3-col .nm-cta{align-self:stretch}.du3-col .nm-cta .rkq-find{width:100%}
.du3-col .du-card.du-in{flex-direction:column;align-items:stretch;gap:8px;padding:8px 10px}
.du3-col .du-card.du-in .du-acts .buy.sm{width:auto;flex:1;height:32px}
.du3 .du-new{border:0;padding:0;background:none;box-shadow:none;max-width:none;margin:0;gap:8px}
.du3 .du-cands{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;max-height:none;overflow:visible;flex:none}
.du3 .du-g{grid-column:1/-1;margin:6px 2px 0;font-size:11.5px;font-weight:800;letter-spacing:.6px;color:#cdb98d}
.du3 .du-c{flex-direction:row;align-items:center;gap:9px;padding:8px 10px;border-radius:11px;background:linear-gradient(180deg,rgba(30,42,66,.95),rgba(15,21,36,.95));box-shadow:inset 0 0 0 1px #34465f}
.du3 .du-c.live{box-shadow:inset 0 0 0 1px rgba(111,211,106,.65),0 0 10px rgba(111,211,106,.15)}
.du3 .du-c.on{box-shadow:inset 0 0 0 2px #ffcf4a,0 0 14px rgba(255,190,60,.3)}
.du3 .du-c img{width:38px;height:38px;border-radius:9px}
.du3 .du-c .du-send{min-width:0;padding:0 12px;height:32px}
.du3 .du-help{display:none}
.du3-tab{min-width:0}.du3-top{padding:6px 12px}
.du3-body>.rkq .rkq-hero{grid-template-columns:180px minmax(0,1fr) 220px}
@media (max-width:820px){.du3-grid{grid-template-columns:1fr}.du3 .du-cands{grid-template-columns:1fr}}
.hf.app .du3-grid{grid-template-columns:1fr}.hf.app .du3 .du-cands{grid-template-columns:1fr}
/* RANKEADA:FIM */
/* Duelo v2 (15/10 19:10, dono: "mudar totalmente o layout do duelo... VFX"): barras de jogo de luta, relógio, magias e combos. */
#hf-arena.ax .ar-top,.ax .ar-top{display:none}
.ax-top{position:absolute;left:14px;right:14px;top:10px;display:grid;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);align-items:start;gap:10px;pointer-events:none;z-index:2}
.ax-side{display:flex;align-items:flex-start;gap:10px;min-width:0;animation:axIn .6s cubic-bezier(.2,1.2,.4,1) both}
.ax-side.r{flex-direction:row-reverse;text-align:right;animation-name:axInR}
@keyframes axIn{from{opacity:0;transform:translateX(-60px)}}@keyframes axInR{from{opacity:0;transform:translateX(60px)}}
.ax-por{position:relative;flex:none;width:84px;height:84px;display:grid;place-items:center;border-radius:14px;background:radial-gradient(circle at 50% 35%,#24324c,#0a0f18);overflow:visible}
.ax-por img{width:64px;height:64px;image-rendering:pixelated}
.ax-side.l .ax-por{box-shadow:0 0 0 3px #58a8ff,0 0 22px rgba(88,168,255,.55),inset 0 0 18px rgba(88,168,255,.25)}
.ax-side.r .ax-por{box-shadow:0 0 0 3px #ff5a4f,0 0 22px rgba(255,90,79,.55),inset 0 0 18px rgba(255,90,79,.25)}
.ax-lv{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);min-width:28px;padding:1px 6px;border-radius:999px;font-style:normal;font-weight:800;font-size:12px;text-align:center;color:#2a1906;background:linear-gradient(#ffe08a,#e0a52a);box-shadow:0 2px 0 #8a5a12}
.ax-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding-top:4px}
.ax-name{display:flex;align-items:baseline;gap:8px;min-width:0}.ax-side.r .ax-name{flex-direction:row-reverse}
.ax-name b{font:800 20px/1 "HF Title",Georgia,serif;color:#fff;text-shadow:0 2px 0 #000,0 0 10px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-name small{color:#cfd8e6;font-size:12px;text-shadow:0 1px 2px #000;white-space:nowrap}
.ax-hp{position:relative;height:24px;background:#0a0f18;overflow:hidden;box-shadow:0 0 0 2px #e6c27a,0 0 0 4px #2a1a08,0 6px 14px rgba(0,0,0,.6);clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.ax-side.r .ax-hp{clip-path:polygon(0 0,100% 0,100% 100%,12px 100%)}
.ax-hp i{position:absolute;top:0;bottom:0;width:100%}.ax-side.l .ax-hp i{left:0}.ax-side.r .ax-hp i{right:0}
.ax-hp .ghost{background:linear-gradient(#fff6cf,#ffb04a);transition:width .6s ease .4s}
.ax-side.l .ax-hp .fill{background:linear-gradient(#bfe2ff 0 15%,#4a9bf0 16% 60%,#1f5bb0 61%);transition:width .12s;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.ax-side.r .ax-hp .fill{background:linear-gradient(#ffc6bd 0 15%,#ef4c40 16% 60%,#9f2320 61%);transition:width .12s;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.ax-hp b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000,0 0 4px #000}
.ax-mp{position:relative;height:7px;width:72%;background:#0a0f18;border-radius:4px;box-shadow:0 0 0 1px #3a4a66;overflow:hidden}.ax-side.r .ax-mp{align-self:flex-end}
.ax-mp i{position:absolute;top:0;bottom:0;width:100%;background:linear-gradient(90deg,#4aa0ff,#9fe0ff);transition:width .2s}.ax-side.r .ax-mp i{right:0}
.ax-call{height:22px;font:800 15px/22px "HF Title",Georgia,serif;letter-spacing:.06em;text-transform:uppercase;color:#ffe08a;text-shadow:0 2px 0 #3a2208,0 0 12px rgba(255,200,90,.8);opacity:0}
.ax-call.on{animation:axCall 1.4s ease-out both}
@keyframes axCall{0%{opacity:0;transform:translateX(-20px) scale(1.3)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}
.ax-side.r .ax-call.on{animation-name:axCallR}@keyframes axCallR{0%{opacity:0;transform:translateX(20px) scale(1.3)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}
.ax-mid{display:flex;flex-direction:column;align-items:center;gap:4px}
.ax-clock{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#2c3b58,#0b1220 70%);box-shadow:0 0 0 3px #e6c27a,0 0 0 6px #2a1a08,0 0 24px rgba(255,200,90,.35)}
.ax-clock b{font:800 34px/1 "HF Title",Georgia,serif;color:#ffe08a;text-shadow:0 2px 0 #3a2208}
.ax-clock.low b{color:#ff6a5a;animation:axLow .5s ease-in-out infinite alternate}@keyframes axLow{to{transform:scale(1.15)}}
.ax-live{font-size:11px;font-weight:800;letter-spacing:.12em;padding:2px 8px;border-radius:999px;color:#cfd8e6;background:rgba(0,0,0,.55)}.ax-live.on{color:#fff;background:#d23a2e}
.ax-combo{position:absolute;top:130px;display:flex;flex-direction:column;align-items:center;opacity:0;pointer-events:none;z-index:2}
.ax-combo.l{left:24px}.ax-combo.r{right:24px}
.ax-combo b{font:800 54px/1 "HF Title",Georgia,serif;color:#fff;text-shadow:0 3px 0 #7a1d12,0 0 18px rgba(255,120,60,.9)}
.ax-combo small{font-weight:800;letter-spacing:.14em;font-size:11px;color:#ffd0a0;text-shadow:0 1px 2px #000}
.ax-combo.on{animation:axCombo 1.2s ease-out both}@keyframes axCombo{0%{opacity:0;transform:scale(1.8)}15%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.ar-pop.axk{background:radial-gradient(circle,rgba(255,40,30,.25),transparent 60%)}
.ax-flash{position:absolute;inset:0;background:#fff;animation:axFlash .45s ease-out both}@keyframes axFlash{from{opacity:.85}to{opacity:0}}
.ax-ko{font-size:150px!important;letter-spacing:.06em;color:#ffe9e2!important;text-shadow:0 6px 0 #5a0d0a,0 0 40px rgba(255,60,40,1)!important;animation:axKo 1.4s cubic-bezier(.2,1.6,.4,1) both!important}
@keyframes axKo{0%{opacity:0;transform:scale(3) rotate(-8deg)}25%{opacity:1;transform:scale(1) rotate(-4deg)}80%{opacity:1}100%{opacity:0;transform:scale(1.1) rotate(-4deg)}}
.ax-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;width:min(560px,92vw)}
.ax-st{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;padding:8px 12px;border-radius:12px;background:rgba(8,12,22,.75);box-shadow:inset 0 0 0 1px #34465f}
.ax-st.l{box-shadow:inset 0 0 0 1px rgba(88,168,255,.6)}.ax-st.r{box-shadow:inset 0 0 0 1px rgba(255,90,79,.6)}.ax-st.win{background:linear-gradient(180deg,rgba(255,215,100,.16),rgba(8,12,22,.8))}
.ax-st>b{grid-column:1/-1;font-size:14px;color:#fff}.ax-st span{display:flex;flex-direction:column;font-size:11px;color:#9aa6b6}.ax-st em{font-style:normal;font-weight:800;font-size:17px;color:#ffe08a}
@media (max-width:700px){.ax-top{left:6px;right:6px;top:6px;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);gap:6px}.ax-por{width:52px;height:52px;border-radius:10px}.ax-por img{width:40px;height:40px}
.ax-name b{font-size:14px}.ax-name small{display:none}.ax-hp{height:16px}.ax-hp b{font-size:11px}.ax-clock{width:52px;height:52px}.ax-clock b{font-size:24px}.ax-call{font-size:11px;height:16px;line-height:16px}.ax-combo{top:96px}.ax-combo b{font-size:36px}.ax-ko{font-size:96px!important}}
@media (prefers-reduced-motion:reduce){.ax-side,.ax-call.on,.ax-combo.on,.ax-ko,.ax-flash,.ax-clock.low b{animation:none!important}}
.ar-f.hurt .ax-por{animation:arHurt .35s ease}.ar-f.sp .ax-por{animation:arSp .5s ease}
.ar-f.hurt .ax-hp{animation:axShake .3s ease}@keyframes axShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* Duelos 19:15 (dono: "badge ruim de ver, quadrado colado na linha... moderno, bonito, game design"). */
.du3-tabs{gap:6px;padding:2px}
.du3-tab{gap:7px;padding:9px 10px;font-size:13.5px}
.du3-tab .du3-pill{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;font-style:normal;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(#ff6a5a,#d23a2e);box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 10px rgba(255,80,60,.55);animation:pillPulse 1.6s ease-in-out infinite}
@keyframes pillPulse{50%{box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 18px rgba(255,80,60,.9)}}
.du3-tab.on .du3-pill{background:#fff;color:#d23a2e}
.du3-friends{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.du3-friends .du3-h{margin:0}
.fc-search{display:flex;gap:8px}
.fc-search .input{flex:1;min-width:0;height:40px;border-radius:10px;padding:0 12px;background:#0a111c;border:1px solid #2b3a52;color:#e8e1d0;box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.fc-search .input:focus{outline:none;border-color:#6aa8ff;box-shadow:0 0 0 3px rgba(106,168,255,.2)}
.fc-sbtn{cursor:pointer;height:40px;padding:0 16px;border:0;border-radius:10px;font:700 14px "HF Sans",sans-serif;color:#fff;background:linear-gradient(#4a8fe0,#2c5fae);box-shadow:0 3px 0 #1c3a6e}
.fc-list{display:flex;flex-direction:column;gap:6px}
.fc-g{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9aa6b6}
.fc-g i{font-style:normal;padding:0 7px;border-radius:999px;background:#1b2840;color:#cfd8e6;letter-spacing:0}
.fc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fc,.ch{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:linear-gradient(180deg,#17243a,#111b2c);border:1px solid #2b3a52;transition:transform .12s,border-color .2s,box-shadow .2s;min-width:0}
.fc:hover,.ch:hover{transform:translateY(-1px);border-color:#4a6a9a;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.fc.live{border-color:rgba(111,211,106,.55)}.fc.on{border-color:#ffcf4a;box-shadow:0 0 0 1px #ffcf4a,0 0 14px rgba(255,190,60,.3)}
.fc-por{position:relative;flex:none;width:42px;height:42px;border-radius:10px;overflow:visible;background:#0a111c;border:1px solid #3a4a66;display:grid;place-items:center}
.fc-por img{width:36px;height:36px;image-rendering:pixelated}
.fc-dot{position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;background:#5fdc6a;box-shadow:0 0 0 2px #111b2c,0 0 8px rgba(95,220,106,.8)}
.fc-t{flex:1;min-width:0;display:flex;flex-direction:column}
.fc-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}.fc-t small{color:#9aa6b6;font-size:12px;white-space:nowrap}.fc-t em{font-style:normal;color:#7dff9a}
.fc-go,.ch-yes,.ch-no{flex:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border:0;border-radius:9px;font:700 13px "HF Sans",sans-serif}
.fc-go img,.ch-yes img{width:18px;height:18px}
.fc-go,.ch-yes{color:#2a1906;background:linear-gradient(#ffe08a,#e0a52a);box-shadow:0 3px 0 #8a5a12}
.ch-no{color:#cfd8e6;background:#1e2b42;box-shadow:inset 0 0 0 1px #3a4a66}
.fc-go:active,.ch-yes:active,.ch-no:active{transform:translateY(2px);box-shadow:none}
.du3-recv{display:flex;flex-direction:column;gap:10px;max-width:720px;width:100%;margin:0 auto}
.ch-list{display:flex;flex-direction:column;gap:8px}.ch{padding:10px 12px}.ch-acts{display:flex;gap:8px}
.ch:not(.out){border-color:rgba(255,207,74,.45)}
.du3-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:30px 20px}.du3-empty img{width:56px;opacity:.8}.du3-empty b{font:800 18px "HF Title",Georgia,serif;color:#ffd96a}.du3-empty p{margin:0;color:#9aa6b6;max-width:380px}
@media (max-width:820px){.fc-grid{grid-template-columns:1fr}.du3-tab span{display:none}.du3-tab{flex:1;justify-content:center}.du3-tab.on span{display:inline}}
.hf.app .fc-grid{grid-template-columns:1fr}
/* 19:30 elo e Honra: o mesmo cartão, mesma largura e altura, alinhados */
.du3-top{gap:10px;align-items:center}
.du3-stat{box-sizing:border-box;display:flex;align-items:center;gap:10px;width:230px;height:60px;flex:none;padding:0 14px 0 10px;border-radius:12px;border:1px solid var(--sb,#2c3b55);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.18));color:inherit;font:inherit;text-align:left;margin:0}
.du3-stat.elo{--sb:rgba(140,170,230,.3);--sc:#cfdcf7;--sf:linear-gradient(90deg,#5b8be0,#9cc0ff);cursor:pointer;transition:border-color .15s,transform .15s}
.du3-stat.elo:hover{border-color:rgba(255,217,106,.6);transform:translateY(-1px)}
.du3-stat.hon{--sb:rgba(255,217,106,.28);--sc:#ffd96a;--sf:linear-gradient(90deg,#e0a63a,#ffd96a)}
.du3-si{width:36px;height:36px;flex:none;display:grid;place-items:center}.du3-si img,.du3-si svg{width:36px;height:36px;object-fit:contain}
.du3-st{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.du3-sv{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.du3-sv b{font-size:16px;line-height:1;color:var(--sc)}.du3-sv em{font-style:normal;font-size:11px;color:#8d9ab0;white-space:nowrap}
.du3-st small{font-size:11px;color:#9aa6b6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.du3-sb{display:block;height:4px;border-radius:3px;background:rgba(0,0,0,.4);overflow:hidden}.du3-sb i{display:block;height:100%;background:var(--sf);border-radius:3px}
@media (max-width:820px){.du3-top{flex-wrap:wrap}.du3-stat{width:calc(50% - 5px)}}
.du3-stat.elo .du3-si{overflow:visible}.du3-stat.elo .du3-si>*{width:46px!important;height:46px!important;flex:none;margin:-5px}
/* GEMA:INI — Comprar Gemas (15/10). Rosa da Gema (#ff7ad9) para não confundir com Cristal (azul) e Diamante (branco). */
.win-gemas{width:900px}
.gm{display:flex;flex-direction:column;gap:12px;padding:4px 2px}
.gz-card{border:1px solid #2a3850;border-radius:14px;background:linear-gradient(180deg,#14203a,#0e1628);padding:14px 16px}
.gz-h{display:block;font-family:var(--font-title,inherit);color:#ffd96a;font-size:14px;letter-spacing:.02em;margin-bottom:8px}
.gz-bal{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,122,217,.35);background:radial-gradient(120% 140% at 0% 0%,rgba(255,122,217,.18),transparent 60%),linear-gradient(180deg,#1a1830,#110f22)}
.gz-ic img{width:44px;height:44px;filter:drop-shadow(0 0 10px rgba(255,122,217,.55));animation:gzFloat 3s ease-in-out infinite}
@keyframes gzFloat{50%{transform:translateY(-3px)}}
.gz-bal small{display:block;color:#a9b3c6;font-size:12px}.gz-bal b{font-size:24px;color:#ffd0f2;line-height:1.1}.gz-bal b em{font-style:normal;font-size:14px;color:#ff9be2}
.gz-usd{margin-left:auto;color:#8fe3b0;font-weight:700}
.gz-tag{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.08em;padding:3px 8px;border-radius:999px;background:#ffd96a;color:#2a1a00}.gz-tag.dev{background:#5b8be0;color:#fff}
.gz-warn{border-radius:14px;border:2px solid #ff5a5a;background:linear-gradient(180deg,#3a0f14,#2a0a0e);padding:12px 16px;text-align:center;box-shadow:0 0 18px rgba(255,70,70,.18) inset}
.gz-warn b{display:block;color:#fff;font-size:17px;letter-spacing:.03em}.gz-warn p{margin:4px 0 0;color:#ffd0d0;font-size:13px}.gz-warn em{font-style:normal;color:#ffd96a;font-weight:800}
.gz-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.gz-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.gz-conv{display:flex;flex-direction:column;align-items:stretch;gap:6px;position:relative}
.gz-row{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:#0b1222;border:1px solid #23314a}
.gz-row small{color:#a9b3c6;font-size:12px}.gz-row>em{font-style:normal;color:#7f8ba0;font-size:11px;text-align:right}
.gz-in{display:flex;align-items:center;gap:10px}
.gz-in input,.gz-in b{flex:1;min-width:0;background:none;border:0;color:#fff;font-size:28px;font-weight:800;padding:0;outline:none;font-family:inherit}
.gz-in input::-webkit-inner-spin-button{opacity:.4}
.gz-coin{font-style:normal;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#3a1736;border:1px solid rgba(255,122,217,.45);color:#ffb7ea;font-weight:800;font-size:13px}.gz-coin img{width:18px;height:18px}
.gz-coin.usdt{background:#0f3328;border-color:#2fbf8a;color:#6ff0bd}
.gz-arrow{align-self:center;width:30px;height:30px;margin:-14px 0;z-index:1;display:grid;place-items:center;border-radius:50%;background:#b34fd6;color:#fff;font-weight:900;border:3px solid #0e1628}
.gz-addr{display:flex;gap:14px;align-items:flex-start}
.gz-qr{flex:none;width:132px;height:132px;border-radius:12px;background:#fff;padding:6px;box-sizing:border-box}.gz-qr svg{width:100%;height:100%;display:block}
.gz-at{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.gz-at small{color:#a9b3c6;font-size:12px}
.gz-at code{display:block;font-size:12.5px;color:#7fd3ff;background:#0b1222;border:1px solid #23314a;border-radius:10px;padding:9px 10px;word-break:break-all;user-select:all}
.gz-at p{margin:0;color:#9aa6b6;font-size:12px;line-height:1.45}
.gz-copy{align-self:flex-start;border:0;border-radius:10px;padding:9px 16px;font:inherit;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(180deg,#c86ae6,#9b3dc0);box-shadow:0 3px 0 #6c2289;transition:transform .12s}
.gz-copy:hover{transform:translateY(-1px)}.gz-copy.ok{background:linear-gradient(180deg,#3fcf8e,#22995f);box-shadow:0 3px 0 #146b41}
.gz-how ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:#cfd7e6;font-size:13px}
.gz-read ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;color:#b8c2d4;font-size:12.5px;line-height:1.45}
.gz-read{background:linear-gradient(180deg,#1d1a14,#14110c);border-color:#4a3a1a}
.gz-h-r{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #1f2a3e}.gz-h-r:first-of-type{border-top:0}
.gz-h-ic img{width:22px;height:22px}.gz-h-r b{display:block;color:#ffc2ee;font-size:14px}.gz-h-r small{color:#8d9ab0;font-size:11.5px}
.gz-wait{text-align:center}.gz-wait b{color:#ffd96a}.gz-wait p{color:#9aa6b6;margin:6px 0 0}
@media (max-width:820px){.gz-grid{grid-template-columns:1fr}.gz-addr{flex-direction:column;align-items:center;text-align:center}.gz-copy{align-self:center}.gz-bal b{font-size:20px}}
@media (prefers-reduced-motion:reduce){.gz-ic img{animation:none}}
/* GEMA:FIM */
/* 15/10 21:10: topo com Gema, Diamantes e Ouro (Cristais escondidos) */
.currencies .pill[hidden]{display:none!important}
.pill.p-gema .v{color:#ffd0f2}.pill.p-gema img{filter:drop-shadow(0 0 6px rgba(255,122,217,.55))}
/* TERMOS:INI — aceite na entrada (15/10) */
.tm-gate{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:16px;background:rgba(4,8,16,.82);backdrop-filter:blur(4px)}
.tm-card{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;border-radius:18px;border:1px solid #3a4a66;background:linear-gradient(180deg,#16223a,#0d1526);box-shadow:0 20px 60px rgba(0,0,0,.6);padding:22px 24px;text-align:center}
.tm-logo{width:200px;max-width:70%;margin:0 auto 6px;display:block}
.tm-h{margin:4px 0 8px;font-family:var(--font-title,inherit);color:#ffd96a;font-size:22px}
.tm-p{margin:0 0 14px;color:#c8d0de;font-size:14px;line-height:1.5}
.tm-ck{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:11px 12px;margin:8px 0;border-radius:12px;border:1px solid #2a3a56;background:#0b1222;cursor:pointer;color:#e6ebf5;font-size:14px;line-height:1.45}
.tm-ck input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:#f2c14e;cursor:pointer}
.tm-ck a{color:#7fd3ff}
.tm-sum{text-align:left;margin:10px 0 14px;padding-left:20px;color:#9aa6b6;font-size:12.5px;line-height:1.5}
.tm-go{width:100%;border:0;border-radius:12px;padding:13px 16px;font:inherit;font-weight:800;font-size:16px;color:#2a1a00;cursor:pointer;background:linear-gradient(180deg,#ffe08a,#f2b33a);box-shadow:0 4px 0 #a86e12}
.tm-go:disabled{filter:grayscale(.8);opacity:.55;cursor:not-allowed}
.tm-no{margin:12px 0 0;color:#7f8ba0;font-size:12px}
/* TERMOS:FIM */
/* 15/10 22:07: Gema, Diamantes, Ouro e Cristais no topo; no app as moedas visíveis dividem a linha (3 ou 4) */
.hf.app .currencies{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
/* 15/10 22:14 (dono: "aqui tirar o scroll"): Comprar Gemas mais compacta, cabe sem rolagem no PC. */
.gz{gap:8px;padding:0}
.gz-bal{padding:8px 14px}.gz-ic img{width:36px;height:36px}.gz-bal b{font-size:21px}
.gz-warn{padding:8px 14px}.gz-warn b{font-size:15px}.gz-warn p{margin-top:2px;font-size:12.5px}
.gz-grid,.gz-col{gap:8px}
.gz-card{padding:10px 14px}
.gz-h{margin-bottom:5px}
.gz-row{padding:7px 12px;gap:3px}.gz-in input,.gz-in b{font-size:24px}
.gz-arrow{width:26px;height:26px;margin:-11px 0}
.gz-addr{gap:12px}.gz-qr{width:112px;height:112px}.gz-at{gap:6px}.gz-at code{padding:7px 9px}.gz-copy{padding:7px 14px}
.gz-how ol,.gz-read ul{gap:3px}.gz-read ul{font-size:12px;line-height:1.4}
.gz-h-r{padding:5px 0}
.win-gemas .win-body{overflow-y:auto}
.gz-hl{display:inline-block;padding:1px 8px;margin:0 2px;border-radius:6px;background:#0f3328;border:1px solid #2fbf8a;color:#6ff0bd;font-weight:800;letter-spacing:.03em;white-space:nowrap}
/* 22:15: com a Gema aparecendo (4 moedas) o topo do PC encosta nos ícones; as 4 ficam um pouco menores e alinhadas à
esquerda dos ícones, sem passar por baixo deles. */
.hf.dock .currencies:has(.p-gema:not([hidden])){left:auto;right:568px;transform:none;gap:8px}
.hf.dock .currencies:has(.p-gema:not([hidden])) .pill{width:128px}
/* 22:20 (dono: "deixe tudo à esquerda para não ficar longe dos ícones"): número e nome da moeda colados no ícone. */
.pill{gap:8px}
.pill .pv{align-items:flex-start;text-align:left;padding-left:2px}
.pill .pv .v{text-align:left}
.pill{gap:6px}.pill .pl{letter-spacing:.3px}
@media (min-width:1340px){.hf.dock .currencies:has(.p-gema:not([hidden])) .pill{width:136px}}
@media (max-width:1339px){.hf.dock .currencies:has(.p-gema:not([hidden])) .pill .pl{font-size:8px;letter-spacing:0}}
/* Gema subindo no topo (15/10 22:26): brilho rosa e "+N" flutuando sobre a pílula. */
.pill.p-gema{position:relative}
.pill.p-gema.gz-up{animation:gzUp 1.6s ease-out;border-color:#ff7ad9}
.pill.p-gema.gz-up .v{color:#fff;text-shadow:0 0 10px #ff7ad9}
@keyframes gzUp{0%{box-shadow:0 0 0 0 rgba(255,122,217,0)}15%{box-shadow:0 0 0 3px rgba(255,122,217,.55),0 0 18px rgba(255,122,217,.7);transform:scale(1.07)}40%{transform:scale(1)}100%{box-shadow:0 0 0 0 rgba(255,122,217,0)}}
.gz-float{position:absolute;left:34px;top:-4px;font-size:13px;font-weight:800;color:#ffd0f2;text-shadow:0 1px 0 #4a0f3a,0 0 8px #ff7ad9;pointer-events:none;animation:gzPlus 1.8s ease-out forwards;z-index:5}
@keyframes gzPlus{0%{opacity:0;transform:translateY(6px)}15%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
/* QR de carteira (Solana Pay, já com USDT) ou só o endereço (corretora), 15/10 22:30. */
.gz-qrb{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px;width:132px}
.gz-qrm{display:flex;width:100%}.gz-qrm button{flex:1;padding:3px 0;font-size:10px}
.gz-qrt{font-size:9.5px;line-height:1.25;text-align:center;opacity:.8}
/* Abas Depositar / Compras / Extrato e depósito com o valor à esquerda e o QR à direita (15/10 22:33). */
.gz-tabs{display:flex;gap:6px}
.gz-tabs button{flex:1;border:1px solid #2a3850;border-radius:10px;background:#0e1628;color:#a9b3c6;font:inherit;font-weight:800;font-size:13px;padding:8px 10px;cursor:pointer}
.gz-tabs button.on{background:linear-gradient(180deg,#3a1736,#26102a);border-color:#ff7ad9;color:#ffd0f2}
.gz-dep{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:stretch}
.gz-dep .gz-l{display:flex;flex-direction:column;gap:10px;min-width:0}
.gz-dep .gz-qrb{width:168px;justify-content:flex-start;padding-left:16px;border-left:1px solid #23314a}
.gz-dep .gz-qr{width:156px;height:156px}
.gz-dep .gz-qrb>small.gz-qh{color:#a9b3c6;font-size:12px;align-self:center}
.gz-dep .gz-qrm button{font-size:11px;padding:4px 0}
.gz-dep .gz-qrt{font-size:10.5px}
.gz-list{display:flex;flex-direction:column}
.gz-x{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #1f2a3e}.gz-x:first-child{border-top:0}
.gz-x img{width:22px;height:22px}
.gz-x b{display:block;color:#e6ecf5;font-size:13.5px}.gz-x small{display:block;color:#8d9ab0;font-size:11.5px}
.gz-x .gz-d{text-align:right;font-weight:800;font-size:14px}.gz-x .gz-d.up{color:#7df0b4}.gz-x .gz-d.dn{color:#ff9b9b}
.gz-x .gz-d small{font-weight:600}
.gz-sum{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.gz-sum span{flex:1;min-width:120px;padding:8px 12px;border-radius:10px;background:#0b1222;border:1px solid #23314a}
.gz-sum small{display:block;color:#8d9ab0;font-size:11px}.gz-sum b{color:#ffd0f2;font-size:16px}
@media (max-width:820px){.gz-dep{grid-template-columns:1fr}.gz-dep .gz-qrb{order:-1;border-left:0;padding-left:0;align-self:center}}
.gz-wals{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.gz-wals button{border:1px solid #2a3850;border-radius:999px;background:#0b1222;color:#b8c2d4;font:inherit;font-size:12px;font-weight:700;padding:5px 11px;cursor:pointer}
.gz-wals button.on{border-color:#2fbf8a;background:#0f3328;color:#6ff0bd}
.gz-qrm{gap:4px}.gz-qrm button{border:1px solid #2a3850;border-radius:8px;background:#0b1222;color:#a9b3c6;font:inherit;font-weight:800;cursor:pointer}
.gz-qrm button.on{border-color:#ff7ad9;background:#3a1736;color:#ffd0f2}
/* Mercado em Gema (15/10): ícone da Gema ao lado do número e preço em rosa. */
.mk-gzi{width:14px;height:14px;vertical-align:-2px;display:inline-block}
.mx-pr.gz{color:#ffb7ea}
.gx-seg .mk-gzi{width:13px;height:13px}
/* 16/10 (dono: "arrumar esse botão"): o ícone da Gema ficava solto no canto do botão; agora fica ao lado da palavra, centralizado. */
.gx-seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;line-height:1}
.gx-seg button .mk-gzi{position:static;display:inline-block;flex:none;margin:0;width:15px;height:15px;vertical-align:middle}
.mk-gz{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
/* Saque da Gema (16/10): campos à esquerda, a conta ao vivo à direita. */
.gz-wd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.gz-wl{display:flex;flex-direction:column;gap:10px;min-width:0}
.gz-wl .gz-row>em .lnk{margin-left:6px}
.gz-wa{display:flex;flex-direction:column;gap:5px}.gz-wa small{color:#a9b3c6;font-size:12px}.gz-wa em{font-style:normal;color:#8d9ab0;font-size:11.5px;line-height:1.4}
.gz-wa .input{font-size:13px;font-family:ui-monospace,monospace;color:#7fd3ff}
.gz-wm{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;background:#0b1222;border:1px solid #23314a}
.gz-wrow{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#cfd7e6}.gz-wrow b{color:#e6ecf5}.gz-wrow em{font-style:normal;color:#8d9ab0}
.gz-wrow.gz-wnet{border-top:1px solid #23314a;padding-top:8px;font-size:15px}.gz-wrow.gz-wnet b{color:#6ff0bd;font-size:20px}
.gz-wn{margin:0;font-size:11.5px;color:#ffd96a;line-height:1.4}.gz-werr{margin:0;font-size:12px;color:#ff9b9b}
.gz-wok{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:#cfd7e6;line-height:1.4;cursor:pointer}.gz-wok input{margin-top:2px}
.gz-wgo{align-self:stretch;font-size:15px}.gz-wgo:disabled{opacity:.45;cursor:not-allowed;transform:none}
.gz-wh{color:#8d9ab0;font-size:11.5px;line-height:1.4}
.gz-ws{font-style:normal;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:#1f2a3e;color:#a9b3c6;white-space:nowrap}
.gz-ws.pending{background:#3a2c0a;color:#ffd96a}.gz-ws.approved{background:#3a1736;color:#ffb7ea}.gz-ws.paid{background:#0f3328;color:#6ff0bd}
.gz-x .gz-d{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
@media (max-width:820px){.gz-wd{grid-template-columns:1fr}}
.gz-x .gz-d .lnk{color:#ffb7ea;font-size:11.5px;text-decoration:none}
/* Transparência da Gema (16/10). */
.gz-tr-h{display:flex;flex-direction:column;gap:8px}
.gz-tr-p{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.gz-tr-p small{color:#a9b3c6;font-size:12px}
.gz-tr-p b{font-size:30px;color:#e6ecf5}.gz-tr-h.ok .gz-tr-p b{color:#6ff0bd}.gz-tr-h.low .gz-tr-p b{color:#ffd96a}.gz-tr-p span{color:#cfd7e6;font-size:13px}
.gz-tr-bar{height:8px;border-radius:999px;background:#0b1222;border:1px solid #23314a;overflow:hidden}.gz-tr-bar i{display:block;height:100%;background:linear-gradient(90deg,#2fbf8a,#6ff0bd)}
.gz-tr-h.low .gz-tr-bar i{background:linear-gradient(90deg,#c9921f,#ffd96a)}
.gz-tr-h p{margin:0;color:#b8c2d4;font-size:12.5px;line-height:1.45}
.gz-tr-go{align-self:flex-start;text-decoration:none}.gz-tr-h code{font-size:11.5px;color:#7fd3ff;word-break:break-all}
.gz-tr-ts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.gz-tr-t{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid #2a3850;background:linear-gradient(180deg,#14203a,#0e1628)}
.gz-tr-t small{color:#a9b3c6;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.gz-tr-t b{color:#e6ecf5;font-size:17px}.gz-tr-t em{font-style:normal;color:#8d9ab0;font-size:11px}
.gz-tr-at{text-align:center;font-size:11.5px}
/* Trocar Gemas por Diamantes (16/10) */
.hf .gz-dia{display:flex;flex-direction:column;gap:8px;margin:10px 0}.hf .gz-diago{margin-top:8px;min-width:180px}
/* Roadmap nas Novidades (16/10, dono: "atualizações futuras, onde estamos mexendo atualmente e o que já foi feito"): aba ao
lado das Atualizações; três blocos com as cores das Novidades (agora em laranja, próximas em azul, feito em verde). */
.nw-tabs{display:flex;gap:6px;margin:0 0 10px}.nw-tabs .du-tab{height:34px;padding:0 16px;font-size:13px}
.nw2.rm{display:block;overflow:auto}.rm-wrap{max-width:760px;margin:0 auto;padding:2px 4px 16px}
.nw3-sec.rm-now{--c:#f2a33a}.nw3-sec.rm-next{--c:#63b3ff}.nw3-sec.rm-done{--c:#4fc27a}
.rm-sub{margin:-2px 0 8px;font-size:12.5px;color:var(--muted)}
.rm-it .nw3-h{display:flex;align-items:baseline;gap:8px;justify-content:space-between}
.rm-date{font-size:11.5px;font-weight:700;color:var(--c);white-space:nowrap}
/* Liga da Rankeada (16/10, liga.ts): cartão com a tabela do elo, zonas de subida e queda e a escada de taxas e prêmios. */
.rkq-card.lga{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.lga-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.lga-t{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px}.lga-t small{color:#c9d3e3}
.lga-cta{display:flex;align-items:center}.lga-join{min-width:200px}.lga-in{color:#7fe0a0;font-weight:700;font-size:13px}.lga-wait{color:#f2c14e;font-size:13px;max-width:260px}
.lga-tw{overflow-x:auto}.lga-tb{width:100%;border-collapse:collapse;font-size:13px}
.lga-tb th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#93a2ba;text-align:right;padding:4px 6px;border-bottom:1px solid rgba(255,255,255,.08)}
.lga-tb th:nth-child(2),.lga-tb td.lga-nm{text-align:left}.lga-tb td{padding:5px 6px;text-align:right;border-bottom:1px solid rgba(255,255,255,.05);color:#dfe6f2}
.lga-nm{display:flex;align-items:center;gap:6px}.lga-nm img{width:22px;height:22px;border-radius:4px;image-rendering:pixelated}
.lga-r.up td:first-child{box-shadow:inset 3px 0 #4fc27a}.lga-r.down td:first-child{box-shadow:inset 3px 0 #e2574c}
.lga-r.me td{background:rgba(255,214,106,.08);font-weight:700}.lga-pts{color:#ffe3a0;font-weight:800}.lga-pz{color:#8fd3ff}
.lga-rule{margin:0;font-size:12.5px;color:#aab6ca;line-height:1.5}.lga-k{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 4px 0 2px;vertical-align:-1px}.lga-k.up{background:#4fc27a}.lga-k.down{background:#e2574c}
.lga-last{margin:0;font-size:12.5px;color:#d5dce8}
.lga-lad{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px}
.lga-step{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 4px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-size:11.5px;color:#aab6ca;text-align:center}
.lga-step b{color:#eef2f8;font-size:12.5px}.lga-step.on{border-color:var(--rkc,#e9c36b);background:rgba(233,195,107,.08)}
/* Diamantes na Solana (16/10): selo mais largo (USDC ou USDT), valor e carteira com copiar, assinatura para confirmar. */
.cg-b.sol{width:118px}.cg-b.sol b{font-size:11.5px;white-space:nowrap;letter-spacing:.02em}
.cg-pick.sol{box-shadow:inset 0 0 0 1px #5b3fa8}.cg-pick.sol:hover{background:rgba(153,69,255,.16);box-shadow:inset 0 0 0 1px #b78bff}
.sol-lead{margin:10px 0 6px;font-weight:700}
.sol-f{display:flex;align-items:center;gap:8px;margin:6px 0;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sol-f small{flex:0 0 44px;opacity:.75;font-size:12px}.sol-f code{flex:1;min-width:0;overflow-wrap:anywhere;font-size:13px;color:#ffe7a8}
.sol-f .buy{flex:none}
.sol-alt{margin-top:2px}
.sol-tx{flex-direction:column;gap:6px;margin-top:10px}.sol-tx label{font-size:12.5px;opacity:.85}
.sol-txr{display:flex;gap:6px}.sol-txr .input{flex:1;min-width:0;font-family:monospace;font-size:12px}.sol-txr .buy{width:110px}
@media (max-width:560px){.sol-f{flex-wrap:wrap}.sol-f code{flex-basis:100%;order:2}.sol-f small{flex:1}}
/* Loja nova (16/10, hud.js Views.loja e LojaNova): contador nas categorias, banner dos Companheiros, cabeçalho com busca, cartões
com selo, quantidade − / +, atalhos de pacote (6 e 24 com desconto) e a seção Pets. */
.lj2-cats .ig-cat .lj3-n{margin-left:auto;font-style:normal;font-size:11px;color:#8fa3bd;background:rgba(255,255,255,.06);border-radius:10px;padding:1px 7px}
.lj2-cats .ig-cat.on .lj3-n{color:#fff;background:rgba(255,255,255,.16)}
.lj3-ban{display:flex;align-items:center;gap:16px;margin:0 0 12px;padding:16px 18px;border-radius:12px;background:linear-gradient(120deg,rgba(54,40,92,.85),rgba(16,24,42,.96) 62%);box-shadow:inset 0 0 0 1px rgba(242,193,78,.35)}
.lj3-bt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.lj3-bt>small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);opacity:.85}
.lj3-bt>b.t-title{font-size:22px;line-height:1.15}
.lj3-bt p{margin:0;color:#c7d3e4;font-size:13px;line-height:1.4;max-width:58ch}
.lj3-bb{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lj3-bb small{color:#9fb0c6;font-size:12px}
.lj3-bw{flex:0 0 auto;display:flex;align-items:flex-end;gap:2px}
.lj3-pw{width:64px;height:64px;background-repeat:no-repeat;background-size:384px 64px;animation:lj3-walk .75s steps(6) infinite}
@keyframes lj3-walk{from{background-position:0 0}to{background-position:-384px 0}}
@media (prefers-reduced-motion:reduce){.lj3-pw{animation:none}}
.lj3-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:2px 0 10px;flex-wrap:wrap}
.lj3-hd h3{margin:0;font-size:20px}
.lj3-hd small{display:block;color:#9fb0c6;font-size:12px;margin-top:2px;max-width:70ch}
.lj3-q{width:220px;max-width:100%}
.lj3-grid{align-items:stretch}
.lj3-card{position:relative;display:flex;flex-direction:column}
.lj3-card[hidden]{display:none!important}
.lj3-card .lj3-tag{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;color:#cfe6ff;background:rgba(40,90,150,.55);border:1px solid rgba(120,180,255,.35);border-radius:6px;padding:1px 7px}
.lj3-card .ic{margin-top:14px}
.lj3-ft{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:6px}
.lj3-bulk{display:flex;gap:6px;justify-content:center}
.lj3-bulk button{all:unset;cursor:pointer;font-size:11.5px;color:#b9c6d8;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:2px 8px}
.lj3-bulk button b{color:#7fe08a}
.lj3-bulk button.on{border-color:var(--gold);color:#fff}
.lj3-save{text-align:center;font-size:12px}
.lj3-buyrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lj3-pr{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.lj3-pr s{font-size:11.5px;color:#8fa3bd}
.lj3-pr b{font-size:17px;display:flex;align-items:center;gap:4px}
.lj3-pr b img{width:18px;height:18px}
.buy.gold{background:linear-gradient(#ffd56a,#e0a52c);color:#3a2408;border-color:#f8d27a}
.lj3-none{color:#9fb0c6;text-align:center}
.lj3-petc .lj3-pets{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;min-height:72px}
.lj3-petc .lj3-pets i{font-style:normal;color:var(--gold)}
.lj3-pet{width:64px;height:64px;object-fit:contain}
.lj3-pacts{gap:6px}
.lj3-pb{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;box-sizing:border-box;text-align:left}
.lj3-pb b{display:flex;align-items:center;gap:4px;white-space:nowrap}
.lj3-pb b img{width:16px;height:16px}
.lj3-max{text-align:center;padding:6px 0}
.lj3-petc.soon{opacity:.8}
@media (max-width:720px){.lj3-ban{flex-direction:column;align-items:flex-start}.lj3-bw{align-self:center}.lj3-q{width:100%}}
/* Cristal de Renovação Protegida (16/10): os dois sorteios lado a lado no Ferreiro e os passos no card da Loja. */
.fg-rr{display:flex;flex-direction:column;gap:10px;width:100%;max-width:400px}
.fg-rr>div{display:flex;flex-direction:column;align-items:center;gap:4px}
.fg-rr small{font-size:12px;color:var(--muted);text-align:center}
.fg3 .fg-rr .fg-go{max-width:none}
.fg-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:520px}
.fg-pk{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:6px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(214,170,90,.18)}
.fg-pk.new{box-shadow:inset 0 0 0 1px rgba(196,120,255,.55);background:rgba(160,80,230,.08)}
.fg-pk>b{font-size:13px}
.fg-pk .fg-opts{flex:1;margin:0}
.fg-pk .buy{width:100%}
.hf.app.is-portrait .fg-pick{grid-template-columns:1fr}
.lj3-how{margin:6px 0 4px;padding-left:18px;font-size:12px;line-height:1.4;color:var(--muted);text-align:left}
.lj3-how li{margin:2px 0}
.lj3-how b{color:var(--gold)}
.lj3-have{display:block;font-size:12px;color:var(--muted);text-align:center}
.fg-pk .fg-opts{display:block;padding-left:16px;text-align:left}
.fg-rr .fg-go.alt{height:40px;font-size:15px}
/* Denúncia de jogador (16/10): formulário no perfil do outro jogador. */
.pf-repb{opacity:.85}
.pf-rep{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding:12px;border-radius:8px;background:rgba(224,87,79,.08);box-shadow:inset 0 0 0 1px rgba(224,87,79,.45);text-align:left}
.pf-rep>b{font-size:14px;color:#ffb0aa}
.pf-rep>small{font-size:12px;color:var(--muted);line-height:1.4}
.pf-rr{display:flex;flex-wrap:wrap;gap:6px}
.pf-rc{padding:6px 10px;border-radius:999px;border:0;font:inherit;font-size:12px;cursor:pointer;color:inherit;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pf-rc.on{background:rgba(224,87,79,.3);box-shadow:inset 0 0 0 1px #e0574f;color:#fff;font-weight:700}
.pf-rep textarea{width:100%;min-height:64px;resize:vertical;box-sizing:border-box}
.pf-rb{display:flex;gap:8px;flex-wrap:wrap}
/* Cartão padrão da Loja (17/10, dono: "layout amador... um maior que o outro... temos que seguir um padrão"): faixas de altura fixa
(ícone, nome, texto, informação, quantidade, pacotes, preço), iguais em todo cartão; o que falta numa oferta fica vazio. */
.lj4-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;gap:10px!important;align-items:stretch}
.lj3-card.lj4{position:relative;display:grid;grid-template-rows:76px 38px 48px 34px 1fr;row-gap:6px;padding:12px!important;min-height:0;border-radius:12px;text-align:center;overflow:hidden;transform:none!important;cursor:default}
.lj3-card.lj4:hover{filter:brightness(1.06)}
.lj4-art{display:flex;align-items:center;justify-content:center;gap:6px;height:76px}
.lj4-im{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 4px rgba(0,0,0,.45))}
.lj4-pet .lj4-im{width:60px;height:60px}
.lj4-to{font-style:normal;color:var(--gold);font-weight:700}
.lj4-nm{font-size:15px;font-weight:700;line-height:19px;color:#eef2f8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;align-self:center}
.lj4-ds{font-size:12px;line-height:16px;color:#a9b7ca;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lj4-info{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#a9b7ca;border-top:1px solid rgba(255,255,255,.07);padding-top:6px;min-width:0}
.lj4-info b{color:#e8eef6}
.lj4-info .lj4-use{padding:3px 12px;min-height:0;height:24px;font-size:12px}
.lj4-odds{font-size:11px;line-height:1.3}
.lj4-hw{font-size:12px}
.lj4-ft{display:grid;grid-template-rows:34px 24px 44px;gap:6px;align-self:end}
.lj4-qty{display:flex;align-items:center;justify-content:center}
.lj4-qty .qty-seg{margin:0!important}
.lj4-one{font-size:12px;color:#8fa3bd}
.lj4-bulk{min-height:24px}
.lj4 .lj3-buyrow{align-self:center}
.lj4.lj4-pet .lj4-ft{grid-template-rows:none;display:flex;flex-direction:column;gap:6px;align-self:end}
.lj4-how{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;gap:8px;padding:14px;text-align:left;background:rgba(10,15,27,.97);border-radius:12px;box-shadow:inset 0 0 0 1px rgba(242,193,78,.5)}
.lj4-how[hidden]{display:none}
.lj4-how>b{color:var(--gold);font-size:14px}
.lj4-how ol{margin:0;padding-left:18px;font-size:12.5px;line-height:1.45;color:#c7d3e4;flex:1}
.lj4-how ol li{margin:0 0 6px}
.lj4-how ol b{color:var(--gold)}
.lj4-how .buy{align-self:stretch}
.hf.app .lj4-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
.hf.app .lj3-card.lj4{padding:10px!important;grid-template-rows:68px 38px 48px 34px 1fr}
.hf.app .lj4-art{height:68px}
.hf.app .lj4-im{width:56px;height:56px}
.lj3-card.lj4{grid-template-columns:minmax(0,1fr);min-width:0}
.lj3-card.lj4>*{min-width:0}
.lj4-bulk{display:flex;flex-wrap:nowrap;justify-content:center;gap:6px}
.lj4-bulk button{white-space:nowrap}
.hf.app .lj4 .qty-max{display:none}
.hf.app .lj4 .qty-seg{max-width:100%}
.hf.app .lj4-bulk{gap:4px}
.hf.app .lj4-bulk button{padding:2px 5px;font-size:10.5px}
.hf.app .lj4 .lj3-buyrow{gap:6px}
.hf.app .lj4 .lj3-buy{padding:0 12px;font-size:14px;min-width:0}
.hf.app .lj4 .lj3-pr b{font-size:15px}
.hf.app .lj4-info{font-size:11px;gap:6px;flex-wrap:wrap;line-height:1.2}
/* Bônus da guild com o próprio ouro (17/10): rótulo de cada fileira (Tesouro / Meu ouro). */
.gd-gbl{flex-basis:100%;text-align:right;font-size:11px;color:#8fa3bd;margin-bottom:-2px}
.gd-gbb .buy.blue b{color:#fff;opacity:.9}
.hf.app .gd-gbl{text-align:left}
/* Radar: item vendido sozinho pela Venda automática (17/10). */
.rd-row.it .rd-sold{color:#f2c14e}
/* Vender ouro (17/10, dono: "por que esse layout está tão horrível?"): formulário em 3 passos à esquerda; o limite de hoje e as
regras à direita. No celular, uma coluna. */
.gx-sellw{max-width:none!important;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:12px;align-items:start}
.gx-sellw .gx-f{gap:12px;padding:16px}
.gx-sellw .gx-h{display:flex;align-items:center;gap:8px}
.gx-sellw .gx-h img{width:28px;height:28px}
.gx-sellw .gx-h b{font-size:16px}
.gx-have{margin-left:auto;font-size:12.5px;color:#a9b7ca}.gx-have b{color:#ffcf4a;font-size:15px}
.gx-st{display:flex;flex-direction:column;gap:6px}
.gx-stt{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#dfe6f0}
.gx-stt i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:rgba(242,193,78,.18);color:#ffcf4a;box-shadow:inset 0 0 0 1px rgba(242,193,78,.5)}
.gx-st .qty-seg{align-self:flex-start;margin:0}
.gx-st .gx-seg{display:flex;gap:6px;max-width:360px}
.gx-st .gx-seg>*{flex:1}
.gx-pin{max-width:240px;width:100%;box-sizing:border-box;font-size:16px}
.gx-sellw .gx-math{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px #2c3c58;font-size:13px}
.gx-pub{width:100%;height:46px;font-size:16px}
.gx-side{padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.gx-side .gx-day{margin:0}
.gx-h2{margin-top:4px}
.gx-rl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.gx-rl li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.4;color:#c7d3e4}
.gx-rl img{width:18px;height:18px;flex:none;margin-top:1px}
@media (max-width:820px){.gx-sellw{grid-template-columns:1fr}}
.hf.app .gx-sellw{grid-template-columns:1fr}
/* Classes, Skins, Asas e Aura embaixo da Mochila (17/10, Inv.looks): 4 caixas iguais, cada uma com uma fileira que desliza
para o lado. No computador ficam 2 por linha; no celular, uma embaixo da outra. */
.ig-looks{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lk-box{min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px 12px 12px;border-radius:12px;background:linear-gradient(180deg,rgba(18,27,46,.96),rgba(10,15,27,.96));box-shadow:inset 0 0 0 1px #2c3d59}
.lk-h{display:flex;align-items:center;gap:8px;min-width:0;padding-bottom:6px;border-bottom:1px solid rgba(110,140,190,.18)}
.lk-h img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated;flex:0 0 auto}
.lk-h b{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#cfe0ff}
.lk-h small{margin-left:auto;font-size:11.5px;color:#8e9bb0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lk-row{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:2px 2px 4px}
.lk-row .mv-cell{flex:0 0 92px;width:92px;min-height:118px;justify-content:flex-start}
.lk-row .mv-art{height:64px}
.lk-row .lk-face{width:56px;height:56px;object-fit:contain;image-rendering:pixelated}
.lk-row .mv-cell.lock{opacity:.45}
.lk-row .mv-cell.lock .lk-face{filter:grayscale(1)}
.lk-row .lk-add .mv-blank{color:#ffcf4a;font-size:26px}
.lk-row .mv-cell .sk-spr{transform:scale(.9)}
.ig.app .ig-looks{grid-template-columns:1fr;gap:10px}
.ig.app .lk-row .mv-cell{flex-basis:80px;width:80px;min-height:106px}
.ig.app .lk-row .mv-art{height:56px}
.ig.app .lk-row .lk-face{width:48px;height:48px}
@media (max-width:900px){.ig-looks{grid-template-columns:1fr}}
/* O quadro do equipamento fica grudado no topo só enquanto a Mochila está na tela (ig-top); a linha Classes vem embaixo sem ser coberta. */
.ig-top{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;min-width:0}
.ig.app .ig-top{display:flex;flex-direction:column;align-items:stretch;gap:10px}
/* 19/10 (jogador, print da Mochila › Espólios com os atributos por cima da lista): na tela deitada ou baixa (app is-landscape, que
inclui janela de PC com menos de 600 px de altura) o quadro do herói fica grudado no topo (sticky, regra .ig.app .ig-eq acima),
mas o ig-top estava numa coluna só, então a lista rolava por baixo dele. Deitado, volta a ser 2 colunas: herói à esquerda, lista à direita. */
.hf.app.is-landscape .ig.app .ig-top{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start}
/* Trocar de classe, versão 2 (17/10 12:40, dono: "esta muito feia"): fichas em cima, cartões com o corpo inteiro e uma barra de ação só. */
.sw2{display:flex;flex-direction:column;gap:12px;padding:16px;margin-bottom:14px;border-radius:14px;background:radial-gradient(120% 90% at 50% 0%,rgba(52,70,110,.35),transparent 60%),linear-gradient(180deg,rgba(17,25,43,.97),rgba(9,13,24,.97));box-shadow:inset 0 0 0 1px rgba(214,170,90,.38),0 8px 24px rgba(0,0,0,.35)}
.sw2-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sw2-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 220px}.sw2-t b{font-size:19px}.sw2-t small{color:#9fb0c8;font-size:12.5px}
.sw2-chips{display:flex;gap:8px;flex-wrap:wrap}
.sw2-chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 12px;border-radius:10px;background:rgba(8,12,22,.7);box-shadow:inset 0 0 0 1px #33445f;min-width:96px}
.sw2-chip small{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#8e9bb0}.sw2-chip b{font-size:16px;color:#f3e6c6;font-variant-numeric:tabular-nums}
.sw2-chip.good b{color:#7be38a}
.sw2-lock{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;background:linear-gradient(90deg,rgba(255,190,60,.14),rgba(255,190,60,.04));box-shadow:inset 0 0 0 1px rgba(255,190,60,.4)}
.sw2-lock img{width:26px;height:26px;image-rendering:pixelated;flex:0 0 auto}
.sw2-lock>div{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.sw2-lock b{color:#ffd77a;font-size:14px}.sw2-lock small{color:#cdbb92;font-size:12px}
.sw2-bar{display:block;height:6px;border-radius:4px;background:rgba(0,0,0,.45);overflow:hidden;margin-top:3px;max-width:340px}.sw2-bar s{display:block;height:100%;background:linear-gradient(90deg,#d49a2a,#ffe07a)}
.sw2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.sw2-card{all:unset;box-sizing:border-box;position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px 10px;border-radius:12px;cursor:pointer;text-align:center;
background:linear-gradient(180deg,rgba(34,48,76,.9),rgba(14,20,35,.95));box-shadow:inset 0 0 0 1px #34465f;transition:transform .12s,box-shadow .12s,filter .12s}
.sw2-card:hover:not(:disabled){transform:translateY(-2px);box-shadow:inset 0 0 0 1px #5d7aa6,0 6px 14px rgba(0,0,0,.35)}
.sw2-card.pick{box-shadow:inset 0 0 0 2px #5fb4ff,0 0 16px rgba(95,180,255,.3)}
.sw2-card.on{cursor:default;background:linear-gradient(180deg,rgba(70,55,18,.95),rgba(28,21,8,.95));box-shadow:inset 0 0 0 2px #ffcf4a,0 0 14px rgba(255,190,60,.22)}
.sw2-card.lock{cursor:default;opacity:.42}.sw2-card.lock .sw2-body{filter:grayscale(1) brightness(.8)}
.sw2-rib{position:absolute;top:6px;left:50%;transform:translateX(-50%);padding:1px 8px;border-radius:999px;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.04em;color:#1d1204;background:linear-gradient(#ffe07a,#d49a2a);white-space:nowrap}
.sw2-rib.soon{color:#cbd5e5;background:#2a3850}
.sw2-art{height:88px;width:100%;display:grid;place-items:end center;overflow:hidden}
.sw2-body{width:96px;height:96px;object-fit:contain;image-rendering:pixelated;margin-bottom:-8px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.5))}
.sw2-body.sk{width:64px;height:64px;margin-bottom:4px}
.sw2-nm{font-size:14px;color:#f1e4c4}
.sw2-role{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#a9b8d0}.sw2-role img{width:14px;height:14px;image-rendering:pixelated}
.sw2-hero{font-size:10.5px;color:#6f7d94}
.sw2-act{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:12px 14px;border-radius:12px;background:rgba(8,12,22,.75);box-shadow:inset 0 0 0 1px #33445f}
.sw2-flow{display:flex;align-items:center;gap:10px;min-width:0;font-size:15px;color:#cdd8ea}.sw2-flow i{font-style:normal;color:#ffcf4a;font-weight:900}.sw2-flow b{color:#fff1c7;font-size:17px}
.sw2-go{min-width:190px}
.sw2-note{grid-column:1/-1;color:#8e9bb0;font-size:12px}
/* 18/10: itens vestidos em cada classe e atalho para tirar sem trocar */
.sw2-gear{font-size:10.5px;color:#7fd4a8;font-weight:700}
.sw2-tip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-radius:10px;background:linear-gradient(90deg,rgba(80,200,140,.14),rgba(80,200,140,.04));box-shadow:inset 0 0 0 1px rgba(80,200,140,.45)}
.sw2-tip>div{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 220px}.sw2-tip b{color:#9ff0c4;font-size:14px}.sw2-tip small{color:#bcd9c8;font-size:12px}
.hf.app .sw2{padding:12px}.hf.app .sw2-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hf.app .sw2-art{height:72px}.hf.app .sw2-body{width:78px;height:78px}
.hf.app .sw2-act{grid-template-columns:1fr}.hf.app .sw2-go{width:100%}
.hf.app .sw2-chip{min-width:0;flex:1 1 30%}
/* Masmorra (18/10): o set, as entradas de hoje e o último baú. */
.dg-set{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:linear-gradient(90deg,rgba(79,224,176,.12),rgba(0,0,0,.2));border:1px solid rgba(79,224,176,.25)}
.dg-set small{display:block;opacity:.8;font-size:12px}.dg-pcs{display:flex;gap:2px}.dg-pcs img{width:38px;height:38px;image-rendering:pixelated}
.dg-today{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;opacity:.9}.dg-today span{display:flex;align-items:center;gap:4px}.dg-today img{width:16px;height:16px}
.dg-pc{margin:0;font-size:13px}.dg-mine{padding:8px 10px;border-radius:9px;background:rgba(255,200,60,.12);border:1px solid rgba(255,200,60,.3);font-size:13px}
.dg-last{padding:8px 10px;border-radius:10px;background:rgba(224,87,79,.12);border:1px solid rgba(224,87,79,.3)}.dg-last.ok{background:rgba(79,224,176,.1);border-color:rgba(79,224,176,.35)}
.dg-got{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.dg-got span{display:flex;align-items:center;gap:4px;padding:2px 8px 2px 2px;border-radius:8px;background:rgba(0,0,0,.25);font-size:12px}.dg-got img{width:26px;height:26px}
.dg-tab span{font-weight:700}.dg-tab small{font-size:11px;opacity:.85}.sm-go.red{background:#c0392b}
.dg-lvl{margin:6px 0 0;font-size:12px;color:var(--muted,#9aa6b2)}
/* Ilha da Masmorra no Mapa do mundo (18/10): a estátua do Lich com o brilho verde do Set da Masmorra. */
.wm-pin.k-dungeon .wm-sh{background:radial-gradient(ellipse,rgba(79,224,176,.7),rgba(79,224,176,0) 70%)}
.wm-pin.k-dungeon:not(.lk) .wm-boss{filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 9px rgba(79,224,176,.85))}
.wm-pop.dg .wm-pth{background-size:contain;background-repeat:no-repeat;background-position:50% 100%;image-rendering:pixelated}
.wm-pop.dg{width:600px}.wm-pop.dg .wm-pi{gap:6px;max-height:none;overflow:visible}
.wm-pop.dg .dg-sub{margin:0;font-size:12px;color:var(--muted)}
.wm-pop.dg .dg-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.wm-pop.dg .dg-col{min-width:0;padding:6px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.wm-pop.dg .dg-col.solo{border-color:rgba(79,224,176,.45)}.wm-pop.dg .dg-col.group{border-color:rgba(255,106,213,.5)}
.wm-pop.dg .dg-ch{display:flex;flex-direction:column;margin-bottom:4px;line-height:1.15}.wm-pop.dg .dg-ch b{font-size:13px}.wm-pop.dg .dg-ch small{font-size:11px;color:var(--muted)}
.wm-pop.dg .dg-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.wm-pop.dg .dg-it{display:flex;align-items:center;gap:4px;font-size:11.5px;line-height:1.15;min-width:0}
.wm-pop.dg .dg-it img{width:20px;height:20px;image-rendering:pixelated;flex:none}.wm-pop.dg .dg-it span{min-width:0;overflow-wrap:anywhere}
.wm-pop.dg .dg-it small{color:var(--muted);font-size:10.5px}.wm-pop.dg .dg-it.set{color:#4fe0b0;font-weight:700}
.hf.app .wm-pop.dg{width:auto}.hf.app .wm-pop.dg .wm-pi{max-height:none;padding:10px}
.hf.app .wm-pop.dg .dg-cols{gap:4px}.hf.app .wm-pop.dg .dg-col{padding:5px 4px}.hf.app .wm-pop.dg .dg-it{font-size:10.5px;gap:3px}.hf.app .wm-pop.dg .dg-it img{width:18px;height:18px}
.quest .bar.dg-gate .fill{background:linear-gradient(90deg,#2fa784,#4fe0b0)}
/* Sala de espera da Masmorra (18/10) */
.dg-q{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-radius:10px;border:1px dashed rgba(255,106,213,.55);background:rgba(255,106,213,.06)}.dg-q.on{border-style:solid;background:rgba(255,106,213,.12)}
.dg-qh{display:flex;flex-direction:column;gap:2px}.dg-qh small{color:var(--muted)}.dg-qn{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}.dg-qn b{font-size:18px;color:#ff6ad5}.dg-qn span{min-width:0;overflow-wrap:anywhere;color:var(--muted)}
/* Cristal da Escolha (19/10): Ferreiro › Bônus. */
.fg-esc{margin-top:12px;padding:10px;border:1px solid rgba(120,200,255,.35);border-radius:8px;background:rgba(60,120,180,.12)}.fg-esc-h{display:flex;gap:10px;align-items:center}.fg-esc-h small{display:block;opacity:.85}
.esc-ic{width:36px;height:36px}.fg-esc-l{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}.fg-esc-l .buy{flex:1 1 45%}
.lj4-save{font-size:.92em}.lj4-save s{opacity:.7}
.sk-lim{display:inline-block;margin:2px 0;padding:0 6px;border-radius:4px;background:#ff7a1e;color:#1a0a02;font-size:.72em;font-weight:800;letter-spacing:.02em}
.sk-hw{margin:6px 0 10px}
/* Lance no drop (19/10, lances.ts): janela do lance e a lista em Mercado › Meus negócios. */
/* Lance (19/10, dono: "tem que aparecer no centro do jogo ... melhore esse modal"): fundo escurecido, janela no meio da tela. */
.bid-modal,.vip-pop{position:fixed;inset:0;z-index:118;display:grid;place-items:center;padding:16px;background:rgba(3,6,12,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:hfPopBg .16s ease-out}
@keyframes hfPopBg{from{opacity:0}to{opacity:1}}
@keyframes hfPopIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.bid-card{--bc:#ffb640;position:relative;width:min(380px,100%);max-height:calc(100vh - 32px);overflow:auto;display:flex;flex-direction:column;gap:12px;padding:18px 18px 16px;border-radius:14px;background:linear-gradient(180deg,#172238 0%,#0c1320 60%);box-shadow:0 0 0 1px rgba(214,170,90,.55),inset 0 1px 0 rgba(255,230,160,.10),0 24px 60px rgba(0,0,0,.7);color:#e8dcc4;animation:hfPopIn .18s ease-out;text-align:left}
.bid-card::before{content:"";position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,transparent,var(--bc),transparent)}
.bid-card.r0{--bc:#c9cfd8}.bid-card.r1{--bc:#6fd36a}.bid-card.r2{--bc:#58a8ff}.bid-card.r3{--bc:#c77dff}.bid-card.r4{--bc:#ffb640}.bid-card.r5{--bc:#ff5a7a}.bid-card.r6{--bc:#7ff6ff}
.bid-x,.vp-x{position:absolute;top:8px;right:8px;width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:8px;background:rgba(255,255,255,.04);color:#e9c36b;font-size:15px;cursor:pointer}
.bid-x:hover,.vp-x:hover{background:rgba(233,195,107,.16)}
.bid-head{display:flex;align-items:center;gap:12px;padding-right:28px}
.bid-art{flex:none;padding:6px;border-radius:12px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--bc) 30%,transparent),transparent 70%),rgba(255,255,255,.04);box-shadow:0 0 0 1px color-mix(in srgb,var(--bc) 55%,transparent)}
.bid-art .ithumb{width:56px;height:56px}
.bid-hd{display:flex;flex-direction:column;min-width:0;gap:1px}
.bid-kick{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#ffd66b}
.bid-hd b{font-size:17px;line-height:1.2;text-wrap:balance}
.bid-rar{font-size:12.5px;opacity:.9}
.bid-cur{display:flex;gap:6px;padding:4px;border-radius:10px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(214,170,90,.18)}
.bid-cur button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 8px;border-radius:7px;border:0;background:transparent;color:#aeb9cb;font:700 14px/1 inherit;cursor:pointer;transition:background .12s,color .12s}
.bid-cur button.on{background:linear-gradient(#3a2c12,#251b0b);color:#ffe7a8;box-shadow:inset 0 0 0 1px #e9c36b,0 2px 8px rgba(0,0,0,.35)}
.bid-cur img{width:18px;height:18px}
.bid-field{display:flex;flex-direction:column;gap:8px}
.bid-lbl{display:flex;justify-content:space-between;align-items:baseline}.bid-lbl span{font-size:13px;font-weight:700;color:#e8dcc4}.bid-lbl small{font-size:12px;color:#aeb9cb}
.bid-in{display:flex;align-items:center;gap:8px;height:52px;padding:0 6px;border-radius:12px;background:#070c16;box-shadow:inset 0 0 0 1px rgba(214,170,90,.45),inset 0 2px 6px rgba(0,0,0,.6);transition:box-shadow .12s}
.bid-in:focus-within{box-shadow:inset 0 0 0 2px #e9c36b,0 0 0 4px rgba(233,195,107,.14)}
.bid-in.bad{box-shadow:inset 0 0 0 2px #c94a4a}
.bid-in img{width:24px;height:24px;flex:none}
.bid-in input{all:unset;box-sizing:border-box;flex:1;min-width:0;height:100%;font:800 24px/1 inherit;color:#ffe9b0;text-align:left;letter-spacing:.02em;font-variant-numeric:tabular-nums;cursor:text}
.bid-step{flex:none;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:9px;background:rgba(233,195,107,.12);color:#ffe7a8;font:800 22px/1 inherit;cursor:pointer;transition:background .12s,transform .08s}
.bid-step:hover{background:rgba(233,195,107,.24)}.bid-step:active{transform:scale(.94)}
.bid-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bid-quick button{height:30px;border:0;border-radius:8px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(214,170,90,.25);color:#e8dcc4;font:700 12.5px/1 inherit;cursor:pointer}
.bid-quick button:hover{background:rgba(233,195,107,.14)}
.bid-bal{font-size:12.5px;color:#aeb9cb}.bid-bal b{color:#ffe9b0}.bid-bal.warn{color:#ffb38a}.bid-bal.warn b{color:#ffd0b8}
.bid-note{display:flex;gap:8px;align-items:flex-start;margin:0;padding:9px 10px;border-radius:10px;background:rgba(88,168,255,.07);box-shadow:inset 0 0 0 1px rgba(88,168,255,.18);font-size:12.5px;line-height:1.4;color:#c4cede}
.bid-note img{width:18px;height:18px;flex:none;margin-top:1px}.bid-note b{color:#e8dcc4}
.bid-acts{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}.bid-acts .buy img{width:18px;height:18px}
.bid-acts .buy[disabled]{filter:grayscale(.6) brightness(.8);pointer-events:none}
.bid-box .q-d{margin:2px 0 6px}.bid-box .bid-sub{margin-top:10px}
.bid-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:9px;background:rgba(255,255,255,.04);margin-bottom:6px;flex-wrap:wrap}
.bid-thumb{flex:none}.bid-t{flex:1 1 160px;min-width:0;display:flex;flex-direction:column}.bid-t small{color:#aeb9cb}
.bid-b{display:flex;gap:6px;flex:none}.bid-st{font-style:normal;font-size:12px;color:#aeb9cb}.bid-st.accepted{color:#7dff9a}.bid-st.declined,.bid-st.nofunds{color:#ff8a8a}
/* VIP no chat (19/10, dono: "nome dourado e selo VIP no chat"). */
.clog .cvip{display:inline-flex;align-items:center;gap:2px;margin-right:4px;padding:0 5px 0 2px;border-radius:7px;background:linear-gradient(#ffd66b,#c98b1c);color:#2a1604;font-style:normal;font-weight:800;font-size:10px;line-height:15px;vertical-align:1px}
.clog .cvip img{width:13px;height:13px}
.clog .who.vipn{color:#ffd24a;text-shadow:0 0 6px rgba(255,190,40,.45)}
.q-ptag.q-vtag{background:linear-gradient(#ffd66b,#c98b1c);color:#2a1604}
.vq-daily{display:flex;align-items:center;gap:10px;margin:8px 0;padding:8px 12px;border-radius:10px;background:linear-gradient(90deg,rgba(255,200,80,.18),rgba(255,200,80,.04));box-shadow:inset 0 0 0 1px rgba(233,195,107,.55)}
.vq-daily img{width:42px;height:42px;flex:none}.vq-daily>div{flex:1;min-width:0;display:flex;flex-direction:column}.vq-daily small{color:#cfc3a8}.vq-daily.done{opacity:.75}
/* VIP fácil de achar (19/10): botão dourado no topo e no Mais, e o card fixo em Novidades. */
.navbtn.nb-vip{background:linear-gradient(#ffd66b,#c98b1c);color:#2a1604;box-shadow:0 0 0 1px #ffe39a inset,0 0 12px rgba(255,200,80,.45)}
.navbtn.nb-vip span{color:#2a1604;font-weight:800}
.more-btn.more-vip{background:linear-gradient(#ffd66b33,#c98b1c33);box-shadow:inset 0 0 0 1px rgba(255,214,107,.7)}
.nw-vip{display:flex;align-items:center;gap:10px;width:100%;margin:8px 0;padding:8px 12px;border:0;border-radius:10px;cursor:pointer;text-align:left;color:#f3e6c8;background:linear-gradient(90deg,rgba(255,200,80,.22),rgba(255,200,80,.05));box-shadow:inset 0 0 0 1px rgba(233,195,107,.6)}
.nw-vip img{width:38px;height:38px;flex:none}.nw-vip span{flex:1;min-width:0;display:flex;flex-direction:column}.nw-vip b{color:#ffd24a}.nw-vip small{color:#cfc3a8}
.nw-vip em{flex:none;font-style:normal;font-weight:800;padding:6px 12px;border-radius:8px;background:linear-gradient(#ffd66b,#c98b1c);color:#2a1604}
/* Janela do VIP (19/10, dono: "quando clicar nele abre um modal com tudo que o VIP tem e um botão comprar"). */
.vp-card{position:relative;width:min(420px,100%);max-height:calc(100vh - 32px);overflow:auto;display:flex;flex-direction:column;gap:12px;padding:0 0 16px;border-radius:16px;background:linear-gradient(180deg,#2a1240 0%,#140b22 34%,#0c1320 100%);box-shadow:0 0 0 1px rgba(242,193,78,.7),inset 0 1px 0 rgba(255,230,160,.14),0 24px 60px rgba(0,0,0,.75);color:#e8dcc4;animation:hfPopIn .18s ease-out;text-align:left}
.vp-hero{display:flex;align-items:center;gap:14px;padding:18px 44px 14px 18px;background:radial-gradient(120% 140% at 0% 0%,rgba(242,193,78,.22),transparent 60%);border-bottom:1px solid rgba(242,193,78,.25)}
.vp-crown{flex:none;width:72px;height:72px;display:grid;place-items:center;border-radius:16px;background:radial-gradient(circle at 50% 38%,#7a3cb8,#2c0f4a 72%);box-shadow:0 0 0 2px #f2c14e,0 0 18px rgba(242,193,78,.45)}
.vp-crown img{width:58px;height:58px;image-rendering:pixelated;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.vp-hero .t-title{font-size:22px;display:block}.vp-hero small{display:block;font-size:13px;color:#cbbfdc;margin-top:2px}
.vp-daily{display:flex;align-items:center;gap:10px;margin:0 16px;padding:8px 10px;border-radius:10px;background:rgba(109,255,154,.07);box-shadow:inset 0 0 0 1px rgba(109,255,154,.25)}
.vp-daily img{width:30px;height:30px}.vp-daily span{flex:1;font-size:13px}.vp-daily .buy{flex:none;padding:0 12px}
.vp-list{list-style:none;margin:0;padding:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vp-list li{display:flex;align-items:flex-start;gap:8px;padding:8px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(242,193,78,.12);font-size:12.5px;line-height:1.35;min-width:0}
.vp-list li img{width:24px;height:24px;flex:none;image-rendering:pixelated}
.vp-list li b{color:#ffe7a8}
.vp-foot{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:4px 16px 0}
.vp-from{margin:0;text-align:center;font-size:13px;color:#cbbfdc}.vp-from b{color:#ffe9b0}.vp-from img{width:15px;height:15px;vertical-align:-2px}
.vp-buy{height:48px;font-size:16px}.vp-buy img{width:20px;height:20px}
.vp-note{text-align:center;font-size:12px;color:#9a91aa}
@media (max-width:440px){.vp-list{grid-template-columns:1fr}.vp-hero{padding:14px 44px 12px 14px}.vp-crown{width:60px;height:60px}.vp-crown img{width:48px;height:48px}}
/* Botão VIP do topo (19/10, dono: "melhorar o ícone do VIP"): coroa sobre fundo roxo real com moldura dourada e um brilho
que passa de tempos em tempos; o dourado sobre dourado de antes deixava a coroa apagada. */
.navbtn.nb-vip{background:radial-gradient(circle at 50% 34%,#8a45cf 0%,#4a1a7a 46%,#22093b 100%)!important;color:#ffe7a8;box-shadow:inset 0 0 0 2px #f2c14e,inset 0 0 0 3px #6b4410,0 0 14px rgba(242,193,78,.55)}
.navbtn.nb-vip img{position:relative;z-index:1;width:46px;height:46px;margin-top:-8px;image-rendering:pixelated;filter:drop-shadow(0 3px 2px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(255,214,107,.55))}
.navbtn.nb-vip span{position:relative;z-index:1;margin-top:-2px;padding:1px 8px 2px;border-radius:6px;background:linear-gradient(#ffe39a,#d99a2b);color:#3a1d02;font-weight:900;letter-spacing:.12em;text-shadow:none;box-shadow:0 1px 0 #6b4410,0 2px 4px rgba(0,0,0,.45)}
@keyframes nbVipShine{0%,70%{background-position:160% 0,0 0}100%{background-position:-60% 0,0 0}}
.navbtn.nb-vip:hover img{transform:translateY(-2px) scale(1.06)}
@media (prefers-reduced-motion:reduce){.navbtn.nb-vip::before{animation:none}}
.hf:not(.app) .navbtn.nb-vip img{width:40px;height:40px}
.hf.dock .topnav .navbtn.nb-vip img{width:28px;height:28px;margin-top:-4px}.hf.dock .topnav .navbtn.nb-vip span{padding:0 5px 1px;font-size:10px}
.vp-from img{display:inline-block}
.vp-list{align-items:start}
.navbtn.nb-vip::before{content:"";position:absolute;inset:-9px;border-radius:5px;background:linear-gradient(105deg,transparent 38%,rgba(255,240,190,.5) 50%,transparent 62%) no-repeat,radial-gradient(circle at 50% 36%,#9a52e0 0%,#55208a 48%,#26093f 100%);background-size:260% 100%,100% 100%;background-position:160% 0,0 0;animation:nbVipShine 4.5s ease-in-out infinite;box-shadow:inset 0 0 0 1px rgba(242,193,78,.55),inset 0 0 10px rgba(0,0,0,.45);pointer-events:none}
.vp-foot{position:sticky;bottom:-16px;margin-bottom:-16px;padding-bottom:16px;background:linear-gradient(180deg,rgba(12,19,32,0),#0c1320 22%)}
@media (max-width:440px){.vp-list li{padding:6px 8px}.vp-foot{padding-top:10px}}
/* Chat (19/10, dono: "melhorar o modo como mostra os nicks no chat... muito ícone e está confuso"): nome em cima com os selos e a
hora à direita, mensagem embaixo; mensagens seguidas da mesma pessoa no mesmo minuto ficam juntas (.cg, sem o nome). */
.clog p.cm{display:block;padding:3px 4px 3px 6px;border-radius:5px}
.clog p.cm.cg{margin-top:-3px;padding-top:0}
.clog p.cm+p.cm:not(.cg){margin-top:3px}
.clog .chd{display:flex;align-items:center;flex-wrap:wrap;gap:2px 5px;min-width:0;line-height:17px}
.clog .chd .who{font-weight:700;font-size:13.5px}
.clog .chd .role-tag{margin-right:0}
.clog .chd .cvip{margin:0}
.clog .chd .gtag{font-size:11px;color:#8fa6c4;font-weight:700;letter-spacing:.02em}
.clog .chd time{margin-left:auto;padding:0 0 0 6px;font-size:10.5px;color:#6f7a8c;font-variant-numeric:tabular-nums}
.clog p.cm .cbd{display:block;color:#e9e4d8;padding-left:1px}
.clog p.cm .crx{margin-top:3px}
.clog p.cm.staff{padding:3px 4px 3px 6px}
.clog p.cm .cdel{top:3px}
/* Selo de streamer no formato do VIP: o nome da plataforma e a bolinha (vermelha fora do ar, verde piscando ao vivo). É o link do canal. */
.cst{display:inline-flex;align-items:center;gap:3px;padding:0 5px 0 3px;border-radius:7px;font-style:normal;font-weight:800;font-size:10px;line-height:15px;letter-spacing:.04em;text-decoration:none;vertical-align:1px;cursor:pointer;white-space:nowrap}
.cst:hover{filter:brightness(1.15)}
.cst-twitch{background:linear-gradient(#a970ff,#7c3aed);color:#fff}
.cst-kick{background:#0b0f0c;color:#53fc18;box-shadow:inset 0 0 0 1px rgba(83,252,24,.75)}
.cst-youtube{background:#fff;color:#0f0f0f}
.cst-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#ff4646;box-shadow:0 0 0 1.5px rgba(0,0,0,.4)}
.cst.on .cst-dot{background:#3dff72;box-shadow:0 0 0 1.5px rgba(0,0,0,.4),0 0 6px #3dff72;animation:cstBlink 1s ease-in-out infinite}
@keyframes cstBlink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.cst.on .cst-dot{animation:none}}
/* Janela do VIP deitada (19/10, dono: "aqui colocar horizontal"): no PC, coluna da esquerda com o VIP, o Baú e o botão; vantagens em
3 colunas à direita. Até 760 px de largura volta a ficar em pé, como antes. */
@media (min-width:761px){
.vp-card.vp-wide{width:min(980px,100%);display:grid;grid-template-columns:300px 1fr;gap:0;padding:0;overflow:hidden}
.vp-wide .vp-side{display:flex;flex-direction:column;gap:12px;padding:0 0 16px;border-right:1px solid rgba(242,193,78,.18);background:linear-gradient(180deg,rgba(122,60,184,.18),rgba(12,19,32,0) 70%)}
.vp-wide .vp-hero{flex-direction:column;align-items:flex-start;padding:22px 18px 14px;border-bottom:1px solid rgba(242,193,78,.2)}
.vp-wide .vp-daily{margin:0 14px}
.vp-wide .vp-foot{position:static;margin:auto 0 0;padding:0 14px;background:none}
.vp-wide .vp-list{grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;padding:52px 18px 18px;overflow:auto;max-height:calc(100vh - 32px)}
}
/* 19/10 20:02 (dono: "melhor a disposição dos itens na direita e na esquerda colocar algo nesse espaço"): ouro, XP e sorte em números
grandes na esquerda; o Baú do VIP mostra se já foi pego; na direita, 2 colunas da mesma altura. */
.vp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 16px}
.vp-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 8px;border-radius:10px;background:radial-gradient(120% 90% at 50% 0%,rgba(242,193,78,.16),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(242,193,78,.22)}
.vp-stat img{width:30px;height:30px;image-rendering:pixelated}
.vp-stat b{font-size:20px;line-height:1.1;color:#ffd76a;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.vp-stat small{font-size:11px;color:#c9bfa8;text-transform:uppercase;letter-spacing:.06em}
.vp-daily.done{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#b9b2a3}
.vp-daily.done img{filter:grayscale(.5);opacity:.75}
.vp-daily.done i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(109,255,154,.16);color:#6dff9a;font-style:normal;font-weight:800;font-size:12px}
@media (min-width:761px){
.vp-wide .vp-stats{margin:0 14px}
.vp-wide .vp-list{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;align-content:start;gap:8px}
.vp-wide .vp-list li{align-items:center;padding:10px 12px;font-size:13px}
.vp-wide .vp-list li img{width:28px;height:28px}
}
@media (max-width:760px){.vp-wide .vp-side{display:contents}.vp-wide{display:flex}.vp-wide .vp-list{order:3}.vp-wide .vp-foot{order:4}}
/* Cartão do jogador streamer (19/10): o canal, a live embutida quando está ao vivo e o botão Torcer. */
.pc2.pc-live{max-width:min(620px,calc(100vw - 24px));width:min(620px,calc(100vw - 24px))}
.pc-stream{display:flex;flex-direction:column;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(145,70,255,.08);box-shadow:inset 0 0 0 1px rgba(169,112,255,.3)}
.pcs-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:13px}
.pcs-h b{color:#f3e7ff}.pcs-n{color:#a99bc4;font-size:12px}
.pcs-open{margin-left:auto;color:#c9a8ff;font-size:12px;font-weight:700;text-decoration:none}.pcs-open:hover{text-decoration:underline}
.pcs-embed{position:relative;width:100%;aspect-ratio:16/9;max-width:100%;border-radius:8px;overflow:hidden;background:#000}
.pcs-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pcs-acts{display:flex;justify-content:flex-start;gap:8px}.pcs-in{color:#8fe39a;font-weight:700;font-size:13px}
.st-draw{display:flex;align-items:center;gap:6px}.st-draw input{width:56px}
/* Card fixo dos streamers em Novidades (19/10), logo abaixo do card do VIP. */
.nw-st{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 8px;padding:8px 12px;border-radius:10px;color:#ece3ff;background:linear-gradient(90deg,rgba(145,70,255,.24),rgba(145,70,255,.05));box-shadow:inset 0 0 0 1px rgba(169,112,255,.6)}
.nw-st>img{width:38px;height:38px;flex:none;image-rendering:pixelated}.nw-st>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nw-st b{color:#dcc4ff;display:inline-flex;align-items:center;gap:6px}.nw-st small{color:#c7bcdc}.nw-st .nw-st-fan{color:#a99bc4}.nw-st .nw-st-fan b{color:#ffd24a}
.nw-st .cst-dot{animation:cstBlink 1s ease-in-out infinite;background:#3dff72;box-shadow:0 0 6px #3dff72}
.nw-st-b{flex:none;display:flex;flex-direction:column;gap:6px;font-style:normal}
.buy.st-btn-twitch{background:linear-gradient(#a970ff,#7c3aed);color:#fff}
@media (max-width:640px){.nw-st{flex-wrap:wrap}.nw-st-b{flex-direction:row;width:100%}}
.st-draw input.input{width:64px!important;flex:none;min-width:0}
/* ==================================================================================================================================
HUD clean (19/10, dono: "versão HUD do jogo mais clean... menu lado esquerdo onde abre e sobe os menus... modais mais cleans
transparentes"; referências em art-src/referencias/hud-clean). Liga com .hf.hud2 (Configurações › Som e imagem › Visual da tela,
só a equipe por enquanto). Tudo aqui fica preso em .hf.hud2: o visual clássico não muda nada.
Fontes: Cinzel (títulos) e Barlow Semi Condensed (texto), SIL OFL, em fonts/.
================================================================================================================================== */
/* hud2-neutro: início */
/* HUD clean: os azuis-marinho do visual clássico viram tons neutros (gerado por tools/hud/hud2_neutral.py; não editar à mão). */
.hf.hud2 .bar{background:#110f0f}
.hf.hud2 .mob.ply{box-shadow:0 0 0 1.5px #211f1d}
.hf.hud2 .minimap .me{box-shadow:0 0 0 2px #282624,0 0 10px 3px rgba(127,227,255,.8)}
.hf.hud2 .skill .k{background:#191716}
.hf.hud2 .skill .lv{background:rgba(13,12,11,.85)}
.hf.hud2 .skill.locked::after{background:rgba(13,12,11,.85)}
.hf.hud2 .msg{background:rgba(16,15,14,.92)}
.hf.hud2 .input{background:#131110}
.hf.hud2 .bm-poi span{background:rgba(13,12,11,.78)}
.hf.hud2 .bm-me{box-shadow:0 0 0 2px #282624,0 0 12px 4px rgba(127,227,255,.8)}
.hf.hud2 .lg-me{box-shadow:0 0 0 2px #282624}
.hf.hud2 .bar.mana > i.fill{background:linear-gradient(#b9a6ff 0 14%,#6a54e8 15% 62%,#3c3936 63%)}
.hf.hud2 .quick .key{background:#191716}
.hf.hud2 .quick b{background:#191716}
.hf.hud2 .cinput{background:rgba(12,11,10,.85)}
.hf.hud2 select.input{background:#131110 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d9b56a'/%3E%3C/svg%3E") right 9px center no-repeat}
.hf.hud2 code{background:#131110}
.hf.hud2 .dn-r{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .dn-card{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .dn-kpi span{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .av-it{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .buy-log{background:#0d0c0b}
.hf.hud2 .fg-pips i{background:#242220}
.hf.hud2.app .app-chat{background:rgba(14,13,12,.82)}
.hf.hud2.app .app-tabs{background:linear-gradient(#252321,#131211)}
.hf.hud2.app .p-chat,.hf.hud2.app .p-missions,.hf.hud2.app .p-loot,.hf.hud2.app .app-more{background:linear-gradient(#242220,#151413 60%)}
.hf.hud2.app .veil{background:#121110}
.hf.hud2.app .win{background:linear-gradient(#211f1e,#121110 220px)}
.hf.hud2 .domchip .dbar{background:#110f0f}
.hf.hud2 .lrow.map .mthumb{background:#23211f center/cover no-repeat}
.hf.hud2 .social-reward .sbar{background:#110f0f}
.hf.hud2 .ar-bar{background:#110f0f}
.hf.hud2 .vs-card .vs-por{background:radial-gradient(#302e2b,#151312)}
.hf.hud2 .it-card{background:radial-gradient(ellipse at 50% 40%,rgba(54,51,49,.95),rgba(16,15,14,.96))}
.hf.hud2 .netbar.click{background:rgba(37,35,34,.94)}
.hf.hud2 .netbar.click:hover{background:rgba(51,49,46,.96)}
.hf.hud2 .chip{background:rgba(14,13,12,.6)}
.hf.hud2 .clang{background:#161514}
.hf.hud2 .clang button{background:#232120}
.hf.hud2 .clang button:hover{background:#312f2c}
.hf.hud2 .p-chat.clear:hover,.hf.hud2 .p-chat.clear:focus-within{background:rgba(14,13,12,.45)}
.hf.hud2 .pf-rank{background:rgba(27,25,24,.7)}
.hf.hud2 .pf-at{background:rgba(27,25,24,.7)}
.hf.hud2 .vip-card .vh{background:rgba(18,16,15,.96)}
.hf.hud2 .fr-row .fr-av img{background:#141211}
.hf.hud2 .fr-row .fr-av .dot{box-shadow:0 0 0 2px #1b1918}
.hf.hud2 .cfr{background:linear-gradient(#181615 80%,rgba(24,22,21,.9))}
.hf.hud2 .cdd-b{background:rgba(29,27,26,.95)}
.hf.hud2 .cdd-p{background:#141211}
.hf.hud2 .cdd-q{background:#1d1b1a}
.hf.hud2 .cfr-b{background:rgba(29,27,26,.9)}
.hf.hud2 .cc-odds i::after{background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(14,13,12,.9) calc(10% - 1px) 10%)}
.hf.hud2 .fg-cell{background:rgba(29,27,26,.9)}
.hf.hud2 .du-tabs{background:#201e1d}
.hf.hud2 .du-tab{background:rgba(14,13,12,.6)}
.hf.hud2.app .du-go{background:#22201f}
.hf.hud2 .md-chip{background:rgba(14,13,12,.55)}
.hf.hud2.app.is-portrait .cx-modal .cx-x{background:rgba(14,13,12,.75)}
.hf.hud2 .is-x{background:rgba(14,13,12,.75)}
.hf.hud2 .fs{background:radial-gradient(ellipse at 50% 108%,rgba(255,130,40,.30),transparent 62%),linear-gradient(#1f1d1c,#12100f)}
.hf.hud2 .saybox{background:rgba(14,13,12,.92)}
.hf.hud2 .saybox .sayin{background:#12100f}
.hf.hud2 .csend .csay{background:rgba(14,13,12,.6)}
.hf.hud2.app .app-say{background:rgba(14,13,12,.82)}
.hf.hud2.app .app-emote{background:rgba(14,13,12,.82)}
.hf.hud2 .emotebar{background:rgba(14,13,12,.92)}
.hf.hud2 .emotebar button{background:#12100f}
.hf.hud2 .emotebar button:hover{background:#1d1b1a}
.hf.hud2 .fb-spot{box-shadow:0 0 0 3px var(--gold),0 0 0 9999px rgba(10,9,8,.62),0 0 24px 6px rgba(255,200,80,.6)}
.hf.hud2 .qty-seg .qty-in{background:#141211}
.hf.hud2 .qty-seg .qty-in:focus{background:#1b1918}
.hf.hud2 .hu-reset{background:rgba(14,13,12,.6)}
.hf.hud2.dock .hf-stage::before{background:linear-gradient(180deg,#201e1c,#161514)}
.hf.hud2.dock .betacd:not([hidden]){background:linear-gradient(100deg,rgba(48,46,43,.96),rgba(26,24,23,.96))}
.hf.hud2 .cment{background:#161514}
.hf.hud2.dock .fr-lg,.hf.hud2.dock .fr-md,.hf.hud2.dock .fr-sm{background-color:#1c1a19;outline:1px solid #363331}
.hf.hud2.dock .fr-slot{background-color:#211f1e;outline:1px solid #363331}
.hf.hud2.dock .fr-pill{background-color:#211f1e}
.hf.hud2.dock .hero-card{background-color:#1c1a19}
.hf.hud2.dock .ctabs button{background:#211f1e;outline:1px solid #363331}
.hf.hud2.dock .mini{background:#211f1e;outline:1px solid #363331}
.hf.hud2 .cemoji{background:#161514}
.hf.hud2 .inv-sel select{background:#161514}
.hf.hud2 .inv-quick .iq-auto select{background:#161514}
.hf.hud2.app .du-tabbed .du-tabs{background:#201e1d}
.hf.hud2 .zoomctl{background:linear-gradient(#292725,#161514)}
.hf.hud2 .zoomctl button{background:linear-gradient(#3e3b38,#262422)}
.hf.hud2 .cpoll{background:rgba(21,20,19,.92)}
.hf.hud2 .cp-o{background:#282624}
.hf.hud2 .crpop{background:#1d1b19}
.hf.hud2 .buy.blue{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #373431,0 3px 8px rgba(0,0,0,.35)}
.hf.hud2 .tab{border:1px solid #393633;background:#1e1c1a}
.hf.hud2 .tab:hover{background:#272523}
.hf.hud2 .ctabs button{border:1px solid #393633;background:#1e1c1a}
.hf.hud2 .role{background:#302d2b}
.hf.hud2 .role.r-tank{background:#3c3a37}
.hf.hud2 .role.r-assassin{background:#373432}
.hf.hud2 .doar-addr{background:#11100f}
.hf.hud2 .doar-chips .chip{border:1px solid #393633;background:#1e1c1a}
.hf.hud2 .hs-sk{border:2px solid #373432;background:#1d1b1a}
.hf.hud2 .cx.r6.opened .cx-bg{background:radial-gradient(circle at 50% 55%,rgba(127,246,255,.8) 0,rgba(255,233,168,.35) 30%,rgba(32,30,28,.5) 45%,transparent 68%)}
.hf.hud2 .votebar{background:rgba(18,16,16,.9)}
.hf.hud2 .renewbar{background:linear-gradient(135deg,rgba(70,48,8,.95),rgba(18,16,16,.94) 70%)}
.hf.hud2 .gm-grid{background:repeating-conic-gradient(#312f2c 0 25%,#262322 0 50%) 0 0/calc(200%/var(--n)) calc(200%/var(--n))}
.hf.hud2 .gm-prev{background:repeating-conic-gradient(#312f2c 0 25%,#262322 0 50%) 0 0/18px 18px}
.hf.hud2 .gm-pal .sw.er{background:repeating-conic-gradient(#39414f 0 25%,#2c2a28 0 50%) 0 0/10px 10px}
.hf.hud2 .powr .key{background:#191716}
.hf.hud2 .ev-none{background:rgba(14,13,12,.55)}
.hf.hud2 .ev-big{background:#1d1b1a}
.hf.hud2 .ev-hero{background:radial-gradient(circle at 72% 60%,color-mix(in srgb,var(--ec) 45%,#1a1817) 0%,color-mix(in srgb,var(--ec) 18%,#1a1817) 45%,#1a1817 80%)}
.hf.hud2 .ev-bar{background:#131110;border:1px solid #32302e}
.hf.hud2 .ev-chip{background:#171614;border:1px solid #353230}
.hf.hud2 .ev-card{background:#1d1b1a}
.hf.hud2 .ev-art{background:radial-gradient(circle,color-mix(in srgb,var(--ec) 35%,#181615) 0%,#161514 75%)}
.hf.hud2 .ev-when{background:#131110;border:1px solid #3a3735}
.hf.hud2 .ev-remind{background:#22201f}
.hf.hud2 .ev-tab{background:#191716}
.hf.hud2 .evc{background:#1d1b1a}
.hf.hud2 .evc-h{background:radial-gradient(circle at 18% 50%,color-mix(in srgb,var(--ec) 38%,#181615) 0%,color-mix(in srgb,var(--ec) 12%,#161514) 70%)}
.hf.hud2 .evc-h .ev-when{background:rgba(12,11,10,.75)}
.hf.hud2 .ar-av.fr-sombra,.hf.hud2 .fr-sombra{box-shadow:0 0 0 2px #c79bff,0 0 0 4px #292725,0 0 14px rgba(150,70,255,.7)}
.hf.hud2 .vz-fr{background:#171614}
.hf.hud2 .st-it{background:rgba(23,22,20,.8);border:1px solid #3a3735}
.hf.hud2 .hc-role{background:color-mix(in srgb,var(--rc) 22%,#141211)}
.hf.hud2 .hc-sk{background:#171614}
.hf.hud2 .hc-sk span{background:#141211}
.hf.hud2 .rf-link code{background:#131110;border:1px solid #3a3735}
.hf.hud2 .rf-por{background:#171614}
.hf.hud2 .cx-for{background:rgba(14,13,12,.75)}
.hf.hud2 .cx-for img{background:#171614}
.hf.hud2 .nw-globe{background:#1b1918}
.hf.hud2 .hpn-key{background:#141211}
.hf.hud2 .grupo .pt-card .fr-av img{background:#141211}
.hf.hud2 .grupo .pt-card .fr-av .dot{box-shadow:0 0 0 2px #1b1918}
.hf.hud2 .pt-chip{background:color-mix(in srgb,var(--cc) 12%,rgba(14,13,12,.6))}
.hf.hud2 .rd-tab{background:radial-gradient(circle,rgba(38,36,34,.92),rgba(20,18,17,.85))}
.hf.hud2 .rd-ping{background:rgba(17,16,15,.8)}
.hf.hud2 .rd-box{background:rgba(16,15,14,.82)}
.hf.hud2 .rd-b{background:rgba(54,52,49,.9)}
.hf.hud2 .rd-seg button{background:rgba(40,38,36,.95)}
.hf.hud2 .al-top{background:linear-gradient(115deg,rgba(138,77,255,.28),rgba(242,193,78,.14) 70%,rgba(21,20,19,.4))}
.hf.hud2 .al-card{background:rgba(18,17,16,.78)}
.hf.hud2 .al-it{background:linear-gradient(180deg,rgba(48,45,43,.85),rgba(21,20,19,.92))}
.hf.hud2 .al-fr{background:#1a1817}
.hf.hud2 .al-skc{background:radial-gradient(circle at 50% 42%,rgba(160,90,255,.34),rgba(19,18,17,.94) 72%)}
.hf.hud2 .hf-altip{background:rgba(17,16,15,.97)}
.hf.hud2 .gd-xp .bar{background:#272523}
.hf.hud2 .gd-ms{background:rgba(20,18,17,.75)}
.hf.hud2 .gd-mt .bar{background:#272523}
.hf.hud2 .gd-wallet,.hf.hud2 .gd-vault{background:linear-gradient(115deg,rgba(138,77,255,.22),rgba(20,18,17,.8))}
.hf.hud2 .gd-vault{background:linear-gradient(115deg,rgba(80,170,255,.2),rgba(20,18,17,.8))}
.hf.hud2 .gd-it{background:linear-gradient(180deg,rgba(40,37,36,.8),rgba(21,19,18,.9))}
.hf.hud2 .gd-bfc{background:rgba(20,18,17,.75)}
.hf.hud2 .gd-bcard{background:radial-gradient(circle at 12% 50%,color-mix(in srgb,var(--bc) 35%,transparent),rgba(18,17,16,.85) 60%)}
.hf.hud2 .gd-bhp .bar{background:#272523}
.hf.hud2 .hf-saver{background:radial-gradient(ellipse at center,#161413,#05070b 75%)}
.hf.hud2 .gmb{background:linear-gradient(100deg,rgba(58,40,10,.94),rgba(28,26,25,.94) 58%)}
.hf.hud2 .gmb-more{background:rgba(22,21,20,.9)}
.hf.hud2 .imm-exit{background:rgba(20,18,17,.55)}
.hf.hud2 .evb-x{background:rgba(16,15,14,.85)}
.hf.hud2 .evb-c{background:linear-gradient(100deg,rgba(24,54,34,.95),rgba(27,25,24,.95))}
.hf.hud2 .evb-shop{background:linear-gradient(100deg,rgba(44,42,40,.96),rgba(33,31,29,.96) 55%,rgba(38,36,34,.96))}
.hf.hud2.app .evb-shop{background:linear-gradient(100deg,rgba(44,42,40,.95),rgba(33,31,29,.95))}
.hf.hud2 .promo-bar{background:linear-gradient(100deg,rgba(52,50,47,.9),rgba(35,33,31,.9))}
.hf.hud2 .evs-b{background:linear-gradient(100deg,rgba(24,54,34,.85),rgba(29,27,26,.9))}
.hf.hud2 .evs-b.t-shop{background:linear-gradient(100deg,rgba(45,43,41,.85),rgba(29,27,26,.9))}
.hf.hud2 .evs-rank{background:#1d1b1a}
.hf.hud2 .evb-c.t-beta{background:linear-gradient(100deg,rgba(43,41,39,.95),rgba(27,25,24,.95))}
.hf.hud2 .evs-beta{background:linear-gradient(135deg,rgba(49,47,45,.9),rgba(29,27,26,.95))}
.hf.hud2.app.is-portrait .inv-tabs{background:#1b1918}
.hf.hud2 .set-box{background:linear-gradient(180deg,color-mix(in srgb,var(--sc) 16%,#151312),#151312)}
.hf.hud2 .set-h em{background:color-mix(in srgb,var(--sc) 35%,#151312)}
.hf.hud2 .cl-tag.lock{background:#33312e}
.hf.hud2 .ar-title[class*=" g-"]{background:linear-gradient(180deg,color-mix(in srgb,var(--tg) 34%,#151312),color-mix(in srgb,var(--tg) 12%,#100f0e))}
.hf.hud2 .vz-show{background:radial-gradient(circle at 50% 58%,color-mix(in srgb,var(--vc,#ffcf4a) 42%,#161514) 0%,color-mix(in srgb,var(--vc,#ffcf4a) 10%,#131211) 52%,#11100f 80%)}
.hf.hud2 .vz-show .vz-fr{background:#171614}
.hf.hud2 .ithumb .set-mk{box-shadow:0 0 0 1.5px #141211,0 0 6px var(--sc)}
.hf.hud2 .set-pop{background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--sc) 40%,#1b1a18) 0%,#161413 72%)}
.hf.hud2 .sp-n em{background:color-mix(in srgb,var(--sc) 35%,#151312)}
.hf.hud2 .hero-card .portrait{background:radial-gradient(circle at 50% 40%,#34507f 0%,#2a2826 52%,#151312 100%)}
.hf.hud2 .inv-pt{background:radial-gradient(ellipse 80% 45% at 50% 0%,rgba(255,214,120,.18),transparent 70%),linear-gradient(180deg,#33312e 0%,#242220 60%,#181615 100%)}
.hf.hud2 .ip-wing{background:rgba(18,16,16,.55)}
.hf.hud2 .ip-wing.has{background:radial-gradient(circle,rgba(255,214,120,.28),rgba(18,16,16,.6) 70%)}
.hf.hud2 .hr-card{background:linear-gradient(180deg,#242220,#1b1918)}
.hf.hud2 .hr-card.field{background:linear-gradient(180deg,#2a2412,#1c1a19 60%)}
.hf.hud2 .hr-stage{background:radial-gradient(ellipse 70% 75% at 50% 100%,color-mix(in srgb,var(--rc) 40%,transparent),transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--rc) 10%,#262422),#1e1c1b)}
.hf.hud2 .hr-role{background:color-mix(in srgb,var(--rc) 30%,#141211)}
.hf.hud2 .hp2{background:#1b1a18}
.hf.hud2 .hp2-head{background:radial-gradient(ellipse 55% 85% at 22% 100%,color-mix(in srgb,var(--rc) 40%,transparent),transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--rc) 14%,#282624),#1b1a18)}
.hf.hud2 .hp2-role{background:color-mix(in srgb,var(--rc) 24%,#141211)}
.hf.hud2 .cu-bg{background:radial-gradient(circle at 50% 46%,rgba(52,49,47,.6),rgba(9,8,7,.92) 65%)}
.hf.hud2 .pc2 .pc-pic{background:radial-gradient(circle at 50% 40%,#34507f 0%,#2a2826 55%,#151312 100%)}
.hf.hud2 .ig-eq{background:linear-gradient(180deg,rgba(31,29,27,.75),rgba(17,16,15,.75))}
.hf.hud2 .ig-hero{background:radial-gradient(ellipse 70% 40% at 50% 88%,rgba(242,193,78,.28),transparent 70%),linear-gradient(180deg,#2c2a27,#1b1918)}
.hf.hud2 .ig-wing{background:rgba(14,13,12,.6)}
.hf.hud2 .ig-slot{background:linear-gradient(180deg,#232120,#181715)}
.hf.hud2 .ig-btn{background:linear-gradient(180deg,#33302e,#242220)}
.hf.hud2 .ig-bag{background:linear-gradient(180deg,rgba(27,26,24,.78),rgba(15,14,13,.78))}
.hf.hud2 .ig-cat{background:rgba(35,33,31,.9)}
.hf.hud2 .ig-sf{background:rgba(35,33,31,.9)}
.hf.hud2 .ig-fil{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .ig-cell{background:linear-gradient(180deg,#23211f,#171615);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc,#33456a) 70%,#282624),inset 0 -10px 16px color-mix(in srgb,var(--rc,#000) 14%,transparent)}
.hf.hud2 .ig-cell.free{background:rgba(22,20,19,.55);box-shadow:inset 0 0 0 1px #2f2d2b}
.hf.hud2 .ig-cell.mine{background:linear-gradient(180deg,#393633,#262422)}
.hf.hud2 .ig-cell.other{background:linear-gradient(180deg,#12100f,#0d0b0b);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc,#33456a) 30%,#1c1b19)}
.hf.hud2 .ig-hsec{background:rgba(24,22,21,.6)}
.hf.hud2 .ig.app .ig-cats{background:#151312}
.hf.hud2 .fab-chat .app-chat-last{background:rgba(14,13,12,.9)}
.hf.hud2 .mv-stage{background:radial-gradient(ellipse 70% 45% at 50% 92%,rgba(255,200,90,.18),transparent 70%),radial-gradient(circle at 50% 35%,#312f2d,#141312 75%)}
.hf.hud2 .mv-slot{background:linear-gradient(180deg,rgba(40,38,36,.95),rgba(22,20,19,.95))}
.hf.hud2 .mv-cell{background:linear-gradient(180deg,rgba(42,40,38,.95),rgba(23,21,20,.95))}
.hf.hud2 .mx .mk-bar{background:linear-gradient(180deg,rgba(31,29,27,.75),rgba(17,16,15,.75))}
.hf.hud2 .mx .wchip,.hf.hud2 .mx .mk-meta{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .mx-card{background:linear-gradient(180deg,rgba(42,40,38,.95),rgba(23,21,20,.95))}
.hf.hud2 .mx-th{background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--rc,#6b7a96) 26%,transparent),rgba(14,13,12,.7) 72%)}
.hf.hud2 .fz-big{background:#151413 center/cover no-repeat}
.hf.hud2 .fz-big::after{background:linear-gradient(180deg,transparent 35%,rgba(11,9,9,.85))}
.hf.hud2 .fz-sum>div{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .fz-card{background:linear-gradient(180deg,rgba(42,40,38,.95),rgba(23,21,20,.95))}
.hf.hud2 .fz-th{background:#151413 center/cover no-repeat;box-shadow:inset 0 -24px 24px -18px rgba(11,9,9,.9)}
.hf.hud2 .fz-drop{background:rgba(14,13,12,.75)}
.hf.hud2 .fz-over{background:rgba(10,8,8,.72)}
.hf.hud2 .fz-pop{background:linear-gradient(180deg,#232120,#171514)}
.hf.hud2 .mk2 .fr-slot,.hf.hud2 .mk2 .fr-slot-on{background:linear-gradient(180deg,rgba(37,35,34,.92),rgba(20,18,17,.92))}
.hf.hud2 .mk2 .lrow{background:linear-gradient(180deg,rgba(42,40,38,.92),rgba(23,21,20,.92))}
.hf.hud2 .mk2 .du-tab,.hf.hud2 .mk2 .ev-tab{background:rgba(35,33,31,.9)}
.hf.hud2 .ev2 .evc{background:linear-gradient(180deg,rgba(42,40,38,.95),rgba(23,21,20,.95));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ec,#34465f) 55%,#383633)}
.hf.hud2 .ev2 .evc-h{background:linear-gradient(135deg,color-mix(in srgb,var(--ec,#4fc3ff) 30%,#1e1c1b),#1e1c1b 75%)}
.hf.hud2 .ev2 .ev-big{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ec,#ffcf4a) 55%,#383633)}
.hf.hud2 .ev2 .ev-none{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .mk2-none{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .rf3-hero{background:radial-gradient(circle at 50% 20%,rgba(255,200,60,.2),rgba(14,13,12,.4) 70%)}
.hf.hud2 .rf3-code{background:#131110;box-shadow:inset 0 0 0 1px #3a3735}
.hf.hud2 .rf3-steps li{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .rf3-f{background:linear-gradient(180deg,rgba(42,40,38,.92),rgba(23,21,20,.92))}
.hf.hud2 .hpx .hp-t{background:rgba(35,33,31,.9)}
.hf.hud2 .nw2-b{background:rgba(35,33,31,.9)}
.hf.hud2 .nw2-it{background:linear-gradient(180deg,rgba(37,35,34,.92),rgba(20,18,17,.92))}
.hf.hud2 .cfg2 .field{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .du2-por{background:#171614}
.hf.hud2 .du2-rec{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .du2 .du-c{background:linear-gradient(180deg,rgba(42,40,38,.95),rgba(23,21,20,.95))}
.hf.hud2 .rk2-p{background:linear-gradient(90deg,color-mix(in srgb,var(--mc) 22%,transparent),rgba(14,13,12,.4));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mc) 55%,#3a3835)}
.hf.hud2 .gd2-id{background:radial-gradient(circle at 50% 30%,rgba(242,193,78,.18),rgba(14,13,12,.4) 70%)}
.hf.hud2 .gd2-notice{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .lj2-dia{background:linear-gradient(135deg,rgba(79,195,255,.2),rgba(14,13,12,.4))}
.hf.hud2 .lj2-vip{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .lj2 .vipc{background:linear-gradient(135deg,rgba(60,57,54,.6),rgba(22,20,19,.96) 62%)}
.hf.hud2 .lj2 .cur-row{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .lj2 .starter{background:linear-gradient(135deg,rgba(255,207,74,.12),rgba(22,20,19,.95) 55%)}
.hf.hud2 .lj2 .pk-banner{background:linear-gradient(135deg,rgba(79,195,255,.2),rgba(22,20,19,.96) 60%)}
.hf.hud2 .lj2 .pk-card{background:linear-gradient(180deg,rgba(42,40,38,.95),rgba(23,21,20,.95))}
.hf.hud2 .lj2 .pk-art{background:radial-gradient(circle at 50% 42%,rgba(127,246,255,.32),rgba(14,13,12,.7) 72%)}
.hf.hud2 .lj2 .pk-get{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .at2-por{background:#171614}
.hf.hud2 .at2-free{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .at2-go{background:linear-gradient(180deg,rgba(21,19,18,0),#151312 30%)}
.hf.hud2 .at2-row{background:linear-gradient(180deg,rgba(42,40,38,.92),rgba(23,21,20,.92))}
.hf.hud2 .fr2-c{background:linear-gradient(180deg,rgba(42,40,38,.92),rgba(23,21,20,.92))}
.hf.hud2 .fr2-c .fr-av img{background:#141211}
.hf.hud2 .fr2-c .fr-av .dot{box-shadow:0 0 0 2px #1b1918}
.hf.hud2 .cimg img{background:#141211}
.hf.hud2 .bw-box{background:linear-gradient(180deg,#2a2826,#1b1918)}
.hf.hud2 .al-it.al-frame .al-art,.hf.hud2 .al-it.al-title .al-art{background:radial-gradient(ellipse at 50% 55%,rgba(150,80,255,.5),rgba(31,29,27,.15) 62%,transparent 75%)}
.hf.hud2 .ar2-card{background:linear-gradient(180deg,rgba(42,40,38,.92),rgba(23,21,20,.92))}
.hf.hud2 .hb2-row{background:linear-gradient(180deg,rgba(42,40,38,.92),rgba(23,21,20,.92))}
.hf.hud2 .hb2-card{background:linear-gradient(180deg,rgba(42,40,38,.92),rgba(23,21,20,.92))}
.hf.hud2 .at2-row .at2-ctl .attr-n,.hf.hud2 .fu-luck>b{background:#141211}
.hf.hud2 .fg3-pick,.hf.hud2 .fg3-act{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .fm-chip{background:rgba(35,33,31,.9)}
.hf.hud2 .fm-card{background:linear-gradient(180deg,rgba(42,40,38,.92),rgba(23,21,20,.92))}
.hf.hud2 .fm-order{background:linear-gradient(180deg,rgba(42,40,38,.92),rgba(23,21,20,.92))}
.hf.hud2.app .bn-chip:not([hidden]){background:#1c1a19}
.hf.hud2.app .bn-chip[aria-expanded="true"]{background:#2a2826}
.hf.hud2.app .hero-card .bonus{background:#1c1a19}
.hf.hud2 .tt-relic{background:linear-gradient(160deg,rgba(59,56,53,.35),rgba(52,49,47,.25))}
.hf.hud2 .pf2-por{background:#171614}
.hf.hud2 .pf2-k{background:linear-gradient(180deg,rgba(42,40,38,.92),rgba(23,21,20,.92))}
.hf.hud2 .pf2-bar{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .pf2-guild.none{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .pf2-right .pf-rank{background:rgba(35,33,31,.9)}
.hf.hud2 .pf2-s{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .gd-vault.gd-gold{background:linear-gradient(115deg,rgba(242,193,78,.22),rgba(20,18,17,.8))}
.hf.hud2 .gd-skc{background:rgba(20,18,17,.75)}
.hf.hud2 .is-seller{background:rgba(14,13,12,.75)}
.hf.hud2 .is-seller>img{background:#171614}
.hf.hud2 .set-line{background:color-mix(in srgb,var(--sc,#b9a4ff) 12%,#151312)}
.hf.hud2 .set-line em{background:color-mix(in srgb,var(--sc,#b9a4ff) 35%,#151312)}
.hf.hud2 .ig-pet{background:rgba(14,13,12,.6)}
.hf.hud2 .ig-pet:hover{background:rgba(42,40,38,.85)}
.hf.hud2 .pt-stage{background:radial-gradient(ellipse 60% 14% at 50% 86%,rgba(0,0,0,.35) 0 60%,transparent 62%),linear-gradient(180deg,#34312f 0,#292725 62%,#3c5a2e 62%,#2f4a24 100%)}
.hf.hud2 .pt-c{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .ps-top{background:linear-gradient(180deg,rgba(51,48,46,.55),rgba(21,20,19,.75))}
.hf.hud2 .ps-opt{background:rgba(35,33,31,.9)}
.hf.hud2 .ps-track{background:linear-gradient(180deg,rgba(27,26,24,.9),rgba(15,14,13,.9))}
.hf.hud2 .ps-lab{background:#181716}
.hf.hud2 .ps-n{background:#211f1d}
.hf.hud2 .ps-col.got .ps-n{background:#3e3b38}
.hf.hud2 .ps-cell{background:rgba(35,33,31,.9)}
.hf.hud2 .ps-buy{background:linear-gradient(180deg,rgba(51,48,46,.5),rgba(19,17,16,.85))}
.hf.hud2 .navbtn.nb-ev .badge.nb-pass{box-shadow:0 0 0 2px #1f1d1c}
.hf.hud2 .ev2-cats .ig-cat.ev-pass.on{background:linear-gradient(180deg,#7b3fd0,#3b3835)}
.hf.hud2 .ps-col.ps-pre .ps-n{background:#211f1d}
.hf.hud2 .ps-col.ps-pre .ps-cell.ready{background:rgba(35,33,31,.9)}
.hf.hud2 .pso-bg{background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--c2) 26%,#100f0e) 0,#05070d 62%)}
.hf.hud2 .pso-it{background:rgba(16,15,14,.78)}
.hf.hud2 .ps-top{background:radial-gradient(120% 140% at 0% 0%,rgba(155,92,255,.35),transparent 55%),linear-gradient(180deg,#211f1d,#151312)}
.hf.hud2 .ps-prog{background:#0d0c0b}
.hf.hud2 .ps-track{background:#131110}
.hf.hud2 .ps-lab{background:#171514}
.hf.hud2 .ps-cell.p{background:linear-gradient(180deg,rgba(90,50,150,.55),rgba(29,27,25,.9))}
.hf.hud2 .ps-cell.f{background:linear-gradient(180deg,rgba(58,56,53,.55),rgba(25,24,23,.9))}
.hf.hud2 .win-head .win-dia{background:linear-gradient(135deg,rgba(79,195,255,.2),rgba(14,13,12,.4))}
.hf.hud2 .ps-task{background:rgba(35,33,31,.85)}
.hf.hud2 .ps-tb{background:#0d0c0b}
.hf.hud2 .q-ptag{box-shadow:0 0 0 1px #2e2b29}
.hf.hud2 .ps-pmi{background:rgba(35,33,31,.85)}
.hf.hud2 .vc-b.ps-chip{box-shadow:0 0 0 1px #2e2b29,0 2px 10px rgba(155,92,255,.45)}
.hf.hud2 .pt-shop{background:rgba(35,33,31,.6)}
.hf.hud2 .pt-fd{background:rgba(18,16,16,.7);box-shadow:inset 0 0 0 1px #3a3735}
.hf.hud2 .pf2-petc{background:rgba(35,33,31,.85)}
.hf.hud2 .gem-need{background:linear-gradient(135deg,rgba(79,195,255,.24),rgba(22,20,19,.96) 62%)}
.hf.hud2 .gem-need.ok{background:linear-gradient(135deg,rgba(95,211,106,.22),rgba(22,20,19,.96) 62%)}
.hf.hud2 .gem-tag{box-shadow:0 2px 0 #3a3734}
.hf.hud2 .pk-free{background:linear-gradient(180deg,rgba(42,40,38,.95),rgba(23,21,20,.95))}
.hf.hud2 .vx-hero{background:linear-gradient(135deg,rgba(255,207,74,.18),rgba(22,20,19,.95) 60%)}
.hf.hud2 .vx-pk{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .vx-plan{background:linear-gradient(180deg,rgba(42,40,38,.95),rgba(23,21,20,.95))}
.hf.hud2 .stpick{background:#161514}
.hf.hud2 .stp-o:hover{background:#232120}
.hf.hud2 .stp-o.on{background:#2c2a28}
.hf.hud2 .wbc{background:linear-gradient(180deg,rgba(42,40,38,.95),rgba(23,21,20,.95));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ec,#34465f) 55%,#383633)}
.hf.hud2 .wbc-h{background:linear-gradient(135deg,color-mix(in srgb,var(--ec,#4fc3ff) 30%,#1e1c1b),#1e1c1b 75%)}
.hf.hud2 .wbc-when{background:rgba(12,11,10,.7);border:1px solid #3a3735}
.hf.hud2 .wbc-req .wbc-c{background:#141211}
.hf.hud2 .wm{background:#292725}
.hf.hud2 .wm-me{background:#242220}
.hf.hud2 .wm-vig{background:linear-gradient(rgba(17,16,15,.7),rgba(17,16,15,0) 12%),radial-gradient(ellipse at 50% 55%,transparent 66%,rgba(10,9,8,.45) 100%)}
.hf.hud2 .wm-sum>div{background:rgba(18,16,15,.82)}
.hf.hud2 .cn-card{background:linear-gradient(#242220,#181615)}
.hf.hud2 .cn-face{background:radial-gradient(#2e4466,#201e1d)}
.hf.hud2 .npc-face{background:radial-gradient(#2e4466,#201e1d)}
.hf.hud2:not(.app) .actions .auto span{background:#191716}
.hf.hud2 .wm-pi{background:rgba(20,18,17,.97)}
.hf.hud2 .pt-t th{background:#1b1918}
.hf.hud2 .pt-t td{border-top:1px solid #302e2b}
.hf.hud2 .pt-st{background:#262422}
.hf.hud2 .ibx>i{background:rgba(12,11,10,.82)}
.hf.hud2 .ibx-tip{background:rgba(17,16,15,.97)}
.hf.hud2 .sp-tk{background:linear-gradient(180deg,rgba(42,40,38,.92),rgba(23,21,20,.92))}
.hf.hud2 .sp-st{background:#292725}
.hf.hud2 .sp-st.off{background:#242220}
.hf.hud2 .sp-ord{background:#191716;box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .sp-oline{background:#191716;box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .sp-msg{background:#232120;box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .sp-msg.me{background:#302d2b}
.hf.hud2 .sp-imgs img{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .sp-rep{background:#151413}
.hf.hud2 .sp-rs{background:#1d1b19}
.hf.hud2 .lj2-sup{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .vq-card{background:linear-gradient(180deg,rgba(47,45,43,.95),rgba(22,20,19,.95))}
.hf.hud2 .vq-pk{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .ds-card{background:linear-gradient(180deg,rgba(47,45,43,.95),rgba(22,20,19,.95))}
.hf.hud2 .ds-start{background:linear-gradient(135deg,rgba(255,207,74,.12),rgba(22,20,19,.95) 55%)}
.hf.hud2 .ds-free{background:linear-gradient(180deg,rgba(47,45,43,.95),rgba(22,20,19,.95))}
.hf.hud2 .ds-qb{background:#312e2c}
.hf.hud2 .mkb{background:linear-gradient(180deg,#2f2d2b,#1c1a18)}
.hf.hud2 .mkb-sel img{background:#171614}
.hf.hud2 .mkok-art{background:radial-gradient(circle,rgba(255,255,255,.08),rgba(14,13,12,.9))}
.hf.hud2 .mkok-art i{box-shadow:0 0 0 2px #181615}
.hf.hud2 .gx-card{background:linear-gradient(180deg,rgba(47,45,43,.95),rgba(22,20,19,.95))}
.hf.hud2 .pt-hw{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .rd-card .rd-art b{background:#141211}
.hf.hud2 .rd-tile{background:rgba(35,33,31,.9)}
.hf.hud2.app.is-portrait .pill{background:rgba(15,14,13,.8)}
.hf.hud2.app.is-portrait .domchip{background:rgba(15,14,13,.8)}
.hf.hud2.app.is-portrait .presence{background:rgba(15,14,13,.8)}
.hf.hud2.app.is-portrait .fab-task b{background:rgba(15,14,13,.9)}
.hf.hud2.app.is-portrait .ft-bar{background:#11100f}
.hf.hud2.app .p-map .mm-x{background:#1d1b1a}
.hf.hud2.app.mm-hide .mm-show{background:#1d1b1a}
.hf.hud2 .pz-card{background:rgba(18,17,16,.94)}
.hf.hud2 .at3-top{background:linear-gradient(180deg,rgba(53,51,48,.92),rgba(27,26,24,.92))}
.hf.hud2 .at3-box{background:rgba(16,15,14,.55);box-shadow:inset 0 0 0 1px #34312f}
.hf.hud2 .at3-bar{background:linear-gradient(180deg,rgba(21,19,18,.9),#151312 40%)}
.hf.hud2 .vq-afk,.hf.hud2 .ofl-afk,.hf.hud2 .pf2-afk{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2.app .p-chat .ctabs button{border:1px solid #393633;background:#1e1c1a}
.hf.hud2.app .p-chat .cinput{background:#141211}
.hf.hud2:not(.app) .p-chat .ctabs button{border:1px solid #393633;background:#1e1c1a}
.hf.hud2:not(.app) .p-chat .ctabs button:hover:not(.on){background:#272523}
.hf.hud2:not(.app) .p-chat.clear .clog p{background:rgba(12,11,10,.35)}
.hf.hud2:not(.app) .p-chat .cinput{background:#141211}
.hf.hud2 .dmr-av img{background:#252321}
.hf.hud2 .dmr-av .dot{box-shadow:0 0 0 2px #181615}
.hf.hud2 .dmh-b{background:rgba(29,27,26,.95)}
.hf.hud2 .mx-q{background:rgba(17,16,15,.85)}
.hf.hud2 .mx-fp{background:rgba(17,16,15,.7)}
.hf.hud2 .mx-catb{background:rgba(17,16,15,.85)}
.hf.hud2 .gx-day{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .pb-face img{background:#252321}
.hf.hud2 .pb-face .dot{box-shadow:0 0 0 1.5px #12100f}
.hf.hud2 .ofl-k{background:linear-gradient(180deg,#282624,#1e1c1b);box-shadow:inset 0 0 0 1px #3c3a37}
.hf.hud2 .ofl-c{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .ofl-it{box-shadow:inset 3px 0 0 currentColor,inset 0 0 0 1px #3a3835}
.hf.hud2 .pr-row img.pr-f{background:#22201f}
.hf.hud2 .mob.ply.pr{box-shadow:0 0 0 1.5px #211f1d}
.hf.hud2 .gm2-cat{background:rgba(30,28,27,.9)}
.hf.hud2 .gm2-q input{background:rgba(14,13,12,.7)}
.hf.hud2 .gm2-t{background:rgba(35,33,31,.9)}
.hf.hud2 .gm2-pick{background:rgba(14,13,12,.6)}
.hf.hud2 .gm2-r{background:rgba(30,28,27,.9)}
.hf.hud2 .dk-hide{background:#1d1b1a}
.hf.hud2 .dk-hide:hover,.hf.hud2 .dk-hide:focus-visible{background:#312f2d}
.hf.hud2.dock.cols-lh .dk-show.l,.hf.hud2.dock.cols-rh .dk-show.r{background:linear-gradient(#292725,#171514)}
.hf.hud2.dock .dk-show:hover,.hf.hud2.dock .dk-show:focus-visible{background:#312f2d}
.hf.hud2.dock.cols-lh .chatfab{background:radial-gradient(circle at 50% 40%,#302e2c,#171514)}
.hf.hud2.dock.cols-lh .chatfab.on{background:radial-gradient(circle at 50% 40%,#3a4f7a,#22201e)}
.hf.hud2.dock .dk-bot{background:#1d1b1a}
.hf.hud2.dock .dk-bot:hover,.hf.hud2.dock .dk-bot:focus-visible{background:#312f2d}
.hf.hud2.dock.cols-bh .dk-botshow{background:linear-gradient(#292725,#171514)}
.hf.hud2.dock.cols-bh .dk-botshow:hover,.hf.hud2.dock.cols-bh .dk-botshow:focus-visible{background:#312f2d}
.hf.hud2.dock .dk-hide{background:radial-gradient(circle at 50% 35%,#393634,#1b1918)}
.hf.hud2.dock .dk-hide:hover,.hf.hud2.dock .dk-hide:focus-visible{background:radial-gradient(circle at 50% 35%,#3c5384,#262422)}
.hf.hud2.dock.cols-lh .dk-show.l,.hf.hud2.dock.cols-rh .dk-show.r{background:linear-gradient(90deg,#34312f,#1c1a19)}
.hf.hud2.dock.cols-rh .dk-show.r{background:linear-gradient(270deg,#34312f,#1c1a19)}
.hf.hud2.dock .dk-bot{background:radial-gradient(circle at 50% 35%,#393634,#1b1918)}
.hf.hud2.dock.cols-lh.chat-float .p-chat .chat-x{background:radial-gradient(circle at 50% 35%,#393634,#1b1918)}
.hf.hud2.dock.cols-lh.chat-float .p-chat .chat-x:hover,.hf.hud2.dock.cols-lh.chat-float .p-chat .chat-x:focus-visible{background:radial-gradient(circle at 50% 35%,#3c5384,#262422)}
.hf.hud2 .pc-tag{background:rgba(16,14,14,.78)}
.hf.hud2 .pc-rar{background:linear-gradient(180deg,rgba(42,40,38,.92),rgba(23,21,20,.92))}
.hf.hud2 .pc-ph{background:linear-gradient(180deg,rgba(42,40,38,.92),rgba(23,21,20,.92))}
.hf.hud2 .pc-buy{background:linear-gradient(180deg,rgba(50,47,45,.95),rgba(25,23,22,.95))}
.hf.hud2 .pc-rw{background:rgba(42,40,38,.9)}
.hf.hud2 .pc-me{background:linear-gradient(180deg,rgba(42,40,38,.92),rgba(23,21,20,.92))}
.hf.hud2 .pss2-lv{background:#171614;border:1px solid #353230}
.hf.hud2 .pss2-tag{background:#272523}
.hf.hud2 .pss2-tag.tr{background:linear-gradient(90deg,#4a2f0a,#2c2a27)}
.hf.hud2 .pss2-soon{background:#171614;border:1px dashed #3d3b38}
.hf.hud2 .pss2-ln{background:#171614;border:1px solid #2d2a28}
.hf.hud2 .pss2-ln .ev-chip{background:#1d1c1a}
.hf.hud2 .ps-buy.ps-free{background:linear-gradient(180deg,rgba(55,53,50,.5),rgba(20,18,17,.85))}
.hf.hud2 .pc2-tab{background:linear-gradient(180deg,rgba(42,40,38,.92),rgba(23,21,20,.92))}
.hf.hud2 .pc2-help{background:rgba(23,21,20,.92)}
.hf.hud2 .pc2-live{background:linear-gradient(180deg,rgba(30,28,27,.95),rgba(19,17,16,.95))}
.hf.hud2 .evh-box,.hf.hud2 .evh-out{background:rgba(22,20,19,.88)}
.hf.hud2 .evh-rows{border:1px solid #393633}
.hf.hud2 .qw-face{background:#201e1d}
.hf.hud2 .qw-b.blue{border-color:#393633}
.hf.hud2 .ccmd{background:rgba(16,15,14,.96)}
.hf.hud2 .qw-b.blue{border-color:#353330}
.hf.hud2 .qw-b[disabled]{background:linear-gradient(#34322f,#2b2927)}
.hf.hud2 .qw-tabs button{background:rgba(16,15,14,.7)}
.hf.hud2 .cfish-modal{background:rgba(10,9,8,.55)}
.hf.hud2 .cfish-card{background:#161514}
.hf.hud2 .nw3-tb thead th{background:#22201e}
.hf.hud2 .gmc{background:rgba(14,13,12,.95)}
.hf.hud2 .fm-order .fm-tag{background:#242221}
.hf.hud2 .cp-card{background:linear-gradient(180deg,rgba(42,40,38,.92),rgba(23,21,20,.92))}
.hf.hud2 .tn-card{background:linear-gradient(180deg,rgba(42,40,38,.92),rgba(23,21,20,.92))}
.hf.hud2 .tn-sb select{background:#171615}
.hf.hud2 .tn-tb th{border-bottom:1px solid #3a3835}
.hf.hud2 .tn-arena{background:radial-gradient(ellipse at 50% 100%,rgba(255,140,40,.18),transparent 60%),linear-gradient(#1d1b1a,#12100f)}
.hf.hud2 .wiki-ov{background:rgba(10,9,8,.72)}
.hf.hud2 .wiki-box{background:#0e0c0c}
.hf.hud2 .wiki-hd{background:#171615;border-bottom:1px solid #393633}
.hf.hud2 .wiki-box iframe{background:#0e0c0c}
.hf.hud2 .dw-ov{background:rgba(10,9,8,.66)}
.hf.hud2 .dw-box{background:#141211}
.hf.hud2 .dw-hd{background:#171615;border-bottom:1px solid #393633}
.hf.hud2 .dw-wheel{background:linear-gradient(180deg,#131110,#1d1b1a 50%,#131110);box-shadow:inset 0 0 0 1px #393633,inset 0 10px 24px rgba(0,0,0,.5)}
.hf.hud2 .dw-t.t0{background:linear-gradient(#322f2d,#242220)}
.hf.hud2 .dw-t.t1{background:linear-gradient(#2e2c2a,#28182f)}
.hf.hud2 .dw-t.t2{background:linear-gradient(#33312e,#242220)}
.hf.hud2 .dw-pc{background:linear-gradient(180deg,#232120,#171615);box-shadow:inset 0 3px 0 var(--rc,#c9cfd8),0 0 0 1px #393633}
.hf.hud2 .dw-side{border-left:1px solid #393633}
.hf.hud2.app .dw-side{border-top:1px solid #393633}
.hf.hud2 .tut-dots i{background:#393633}
.hf.hud2 .at3-si{box-shadow:inset 0 0 0 1px #34312f}
.hf.hud2 .ps-mbox{background:linear-gradient(180deg,#262422,#171514)}
.hf.hud2 .ps-mx{background:rgba(14,13,12,.75)}
.hf.hud2 .dw-g{box-shadow:inset 0 0 0 1px #312f2c}
.hf.hud2 .dw-n{background:#282624}
.hf.hud2 .be-st span{box-shadow:inset 0 0 0 1px #34312f}
.hf.hud2 .be-it{box-shadow:inset 0 0 0 1px #34312f}
.hf.hud2 .cg-ov{background:rgba(10,9,8,.72)}
.hf.hud2 .cg-box{background:linear-gradient(180deg,#1c1a19,#141211)}
.hf.hud2 .cg-pick{box-shadow:inset 0 0 0 1px #393633}
.hf.hud2 .cg-tabs button,.hf.hud2 .cg-via button{box-shadow:inset 0 0 0 1px #393633}
.hf.hud2 .cg-phone{box-shadow:0 0 0 6px #242220,0 10px 26px rgba(0,0,0,.5)}
.hf.hud2 .rk-promo{background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--rkc) 30%,#141211) 0,#05080e 65%)}
.hf.hud2 .rk-promo.down{background:radial-gradient(circle at 50% 42%,#262422 0,#05080e 65%)}
.hf.hud2 .rkq{background:radial-gradient(900px 380px at 50% -80px,color-mix(in srgb,var(--rkc) 26%,transparent),transparent 70%),linear-gradient(180deg,#141211,#0e0c0c)}
.hf.hud2 .rkq-hero{border:1px solid color-mix(in srgb,var(--rkc) 55%,#312e2c);background:linear-gradient(120deg,rgba(255,255,255,.06),rgba(255,255,255,0) 40%),linear-gradient(180deg,#22201e,#181615)}
.hf.hud2 .rkq-bar{background:#121110;border:1px solid #383633}
.hf.hud2 .rkq-card{border:1px solid #312e2c;background:linear-gradient(180deg,#201e1d,#181615)}
.hf.hud2 .rkq-ring{background:conic-gradient(var(--gold) calc(var(--p) * 1%),#262422 0)}
.hf.hud2 .rkq-ring::before{background:#181615}
.hf.hud2 .rkq-ring.ok{background:conic-gradient(#7dff9a calc(var(--p) * 1%),#262422 0)}
.hf.hud2 .rkq-por{background:#121110;border:1px solid #383633}
.hf.hud2 .rkq-search{background:rgba(11,10,9,.86)}
.hf.hud2 .rkq-norm{box-shadow:0 4px 0 #373432,0 10px 24px rgba(74,143,224,.35)}
.hf.hud2 .nm-go{box-shadow:0 3px 0 #373432}
.hf.hud2 .du3-top{border:1px solid #312e2c;background:linear-gradient(180deg,#201e1d,#181615)}
.hf.hud2 .du3-por{background:#121110}
.hf.hud2 .du3-tab{border:1px solid #383633;background:linear-gradient(180deg,#23211f,#191716)}
.hf.hud2 .du3-tab:hover{background:linear-gradient(180deg,#2a2826,#201e1c)}
.hf.hud2 .du3-sec{border:1px solid #312e2c;background:linear-gradient(180deg,#201e1d,#181615)}
.hf.hud2 .nm-hero{background:radial-gradient(500px 200px at 15% 50%,rgba(90,168,255,.25),transparent 70%),linear-gradient(180deg,#282624,#1a1917)}
.hf.hud2 .du3 .du-c{background:linear-gradient(180deg,rgba(42,40,38,.95),rgba(23,21,20,.95))}
.hf.hud2 .ax-por{background:radial-gradient(circle at 50% 35%,#312f2c,#110f0f)}
.hf.hud2 .ax-hp{background:#110f0f}
.hf.hud2 .ax-mp{background:#110f0f}
.hf.hud2 .ax-clock{background:radial-gradient(circle at 50% 35%,#3a3734,#141211 70%)}
.hf.hud2 .ax-st{background:rgba(14,13,12,.75)}
.hf.hud2 .ax-st.win{background:linear-gradient(180deg,rgba(255,215,100,.16),rgba(14,13,12,.8))}
.hf.hud2 .fc-search .input{background:#121110;border:1px solid #383633}
.hf.hud2 .fc-sbtn{box-shadow:0 3px 0 #373432}
.hf.hud2 .fc-g i{background:#282624}
.hf.hud2 .fc,.hf.hud2 .ch{background:linear-gradient(180deg,#242220,#1c1a19);border:1px solid #383633}
.hf.hud2 .fc-por{background:#121110}
.hf.hud2 .fc-dot{box-shadow:0 0 0 2px #1c1a19,0 0 8px rgba(95,220,106,.8)}
.hf.hud2 .ch-no{background:#2b2826}
.hf.hud2 .du3-stat{border:1px solid var(--sb,#393734)}
.hf.hud2 .gz-card{border:1px solid #373431;background:linear-gradient(180deg,#211f1d,#181615)}
.hf.hud2 .gz-bal{background:radial-gradient(120% 140% at 0% 0%,rgba(255,122,217,.18),transparent 60%),linear-gradient(180deg,#1d1b1a,#141211)}
.hf.hud2 .gz-row{background:#141211;border:1px solid #302e2b}
.hf.hud2 .gz-arrow{border:3px solid #181615}
.hf.hud2 .gz-at code{background:#141211;border:1px solid #302e2b}
.hf.hud2 .gz-h-r{border-top:1px solid #2a2826}
.hf.hud2 .tm-gate{background:rgba(10,9,9,.82)}
.hf.hud2 .tm-card{background:linear-gradient(180deg,#22201f,#161514)}
.hf.hud2 .tm-ck{border:1px solid #383633;background:#141211}
.hf.hud2 .gz-tabs button{border:1px solid #373431;background:#181615}
.hf.hud2 .gz-dep .gz-qrb{border-left:1px solid #302e2b}
.hf.hud2 .gz-x{border-top:1px solid #2a2826}
.hf.hud2 .gz-sum span{background:#141211;border:1px solid #302e2b}
.hf.hud2 .gz-wals button{border:1px solid #373431;background:#141211}
.hf.hud2 .gz-qrm button{border:1px solid #373431;background:#141211}
.hf.hud2 .gz-wm{background:#141211;border:1px solid #302e2b}
.hf.hud2 .gz-wrow.gz-wnet{border-top:1px solid #302e2b}
.hf.hud2 .gz-ws{background:#2a2826}
.hf.hud2 .gz-tr-bar{background:#141211;border:1px solid #302e2b}
.hf.hud2 .gz-tr-t{border:1px solid #373431;background:linear-gradient(180deg,#211f1d,#181615)}
.hf.hud2 .lj3-ban{background:linear-gradient(120deg,rgba(50,48,46,.85),rgba(25,24,23,.96) 62%)}
.hf.hud2 .lj4-how{background:rgba(17,16,15,.97)}
.hf.hud2 .gx-sellw .gx-math{box-shadow:inset 0 0 0 1px #3a3835}
.hf.hud2 .lk-box{background:linear-gradient(180deg,rgba(28,26,25,.96),rgba(17,16,15,.96));box-shadow:inset 0 0 0 1px #3b3835}
.hf.hud2 .sw2{background:radial-gradient(120% 90% at 50% 0%,rgba(52,70,110,.35),transparent 60%),linear-gradient(180deg,rgba(26,25,23,.97),rgba(15,14,13,.97))}
.hf.hud2 .sw2-chip{background:rgba(14,13,12,.7)}
.hf.hud2 .sw2-card{background:linear-gradient(180deg,rgba(47,45,43,.9),rgba(22,20,19,.95))}
.hf.hud2 .sw2-rib.soon{background:#373431}
.hf.hud2 .sw2-act{background:rgba(14,13,12,.75)}
.hf.hud2 .bid-card{background:linear-gradient(180deg,#22201f 0%,#141312 60%)}
.hf.hud2 .bid-in{background:#0e0d0c}
.hf.hud2 .vp-card{background:linear-gradient(180deg,#201e1c 0%,#121110 34%,#141312 100%)}
.hf.hud2 .vp-crown{background:radial-gradient(circle at 50% 38%,#7a3cb8,#201e1c 72%)}
.hf.hud2 .navbtn.nb-vip{background:radial-gradient(circle at 50% 34%,#8a45cf 0%,#33312e 46%,#181615 100%)!important}
.hf.hud2 .navbtn.nb-vip::before{background:linear-gradient(105deg,transparent 38%,rgba(255,240,190,.5) 50%,transparent 62%) no-repeat,radial-gradient(circle at 50% 36%,#9a52e0 0%,#3b3936 48%,#191817 100%)}
.hf.hud2 .vp-foot{background:linear-gradient(180deg,rgba(20,19,18,0),#141312 22%)}
@media (min-width:761px){.hf.hud2 .vp-wide .vp-side{background:linear-gradient(180deg,rgba(122,60,184,.18),rgba(20,19,18,0) 70%)}}
/* hud2-neutro: fim */
@font-face{font-family:"HF2 Title";src:url(fonts/cinzel-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"HF2 Title";src:url(fonts/cinzel-latin-700-normal.woff2) format("woff2");font-weight:700 900;font-display:swap}
@font-face{font-family:"HF2 Sans";src:url(fonts/barlow-semi-condensed-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"HF2 Sans";src:url(fonts/barlow-semi-condensed-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"HF2 Sans";src:url(fonts/barlow-semi-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"HF2 Sans";src:url(fonts/barlow-semi-condensed-latin-700-normal.woff2) format("woff2");font-weight:700 900;font-display:swap}
.h2m{display:none}
.hf.hud2{--h2-bg:rgba(13,15,20,.8);--h2-bg2:rgba(22,24,30,.72);--h2-line:rgba(201,163,92,.34);--h2-line2:rgba(201,163,92,.6);--h2-gold:#e3c27a;--h2-ink:#ece6d6;--h2-mut:#a49c8b;
font-family:"HF Sans",system-ui,sans-serif;color:var(--h2-ink)}
.hf.hud2 :is(button,input,select,textarea){font-family:inherit}
.hf.hud2 .t-title{font-family:"HF2 Title",Georgia,serif;font-weight:700;color:var(--h2-gold);letter-spacing:.1em;text-shadow:0 1px 2px rgba(0,0,0,.8)}
/* Molduras: no lugar das bordas desenhadas, um vidro escuro com fio dourado fino. O padding guarda o espaço da borda antiga. */
.hf.hud2 :is(.fr-lg,.fr-md){border:1px solid var(--h2-line);border-image:none;padding:15px;border-radius:3px;background:var(--h2-bg);box-shadow:0 14px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,235,190,.06);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hf.hud2 .fr-sm{border:1px solid var(--h2-line);border-image:none;padding:13px;border-radius:3px;background:var(--h2-bg)}
.hf.hud2 :is(.fr-slot,.fr-slot-on){border:1px solid rgba(201,163,92,.22);border-image:none;padding:13px;border-radius:3px;background:var(--h2-bg2)}
.hf.hud2 .fr-slot-on{border-color:var(--h2-line2);background:rgba(201,163,92,.12)}
.hf.hud2 .fr-pill{border:1px solid rgba(201,163,92,.25);border-image:none;padding:8px 13px;border-radius:3px;background:rgba(10,12,16,.6)}
/* Clássico some: logo, barra de baixo e botões do alto. O Menu novo faz o papel deles. */
.hf.hud2 :is(.bottombar,.topnav,.toplogo){display:none!important}
/* Janelas: vidro escuro, cabeçalho com ◆ e o título em caixa alta, fio dourado embaixo. */
.hf.hud2 .veil{background:radial-gradient(ellipse at center,rgba(4,6,10,.28),rgba(2,3,6,.6))}
.hf.hud2 .win{border-radius:3px;background:linear-gradient(180deg,rgba(18,19,24,.86),rgba(11,12,16,.86))}
.hf.hud2 .win-head{height:40px;margin:-6px 0 12px;padding:0 0 8px;border-bottom:1px solid var(--h2-line);position:relative}
.hf.hud2 .win-head::after{content:"";position:absolute;left:0;bottom:-1px;width:38%;height:1px;background:linear-gradient(90deg,var(--h2-gold),transparent)}
.hf.hud2 .win-head img{width:26px;height:26px;opacity:.95}
.hf.hud2 .win-head .t-title{font-size:19px;text-transform:uppercase}
.hf.hud2 .win-head .t-title::before{content:"◆";font-size:11px;margin-right:10px;vertical-align:3px;color:var(--h2-gold)}
.hf.hud2 :is(.win-head .close,.mini.close){border-image:none;border:1px solid rgba(255,255,255,.14);border-radius:3px;background:rgba(255,255,255,.04);color:#d8cfbd}
.hf.hud2 :is(.win-head .close,.mini.close):hover{border-color:#c0473a;background:rgba(192,71,58,.35);color:#fff}
/* Painéis do lado (chat, missões, mapa, loot): mais leves, para o jogo aparecer. */
.hf.hud2 .panel{background:rgba(10,12,16,.62)}
.hf.hud2 .panel .head{border-bottom-color:var(--h2-line)}
.hf.hud2 .panel .head .t-title{font-size:13.5px;text-transform:uppercase}
.hf.hud2 .panel .head img{width:20px;height:20px}
/* Botões: dourado chapado (principal), escuro com fio (azul) e vermelho escuro. */
.hf.hud2 .buy{border:1px solid #7a5a22;border-image:none;border-radius:3px;background:linear-gradient(180deg,#f0cf7c,#c9973e);color:#22170a;text-shadow:none;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,250,220,.45),0 2px 6px rgba(0,0,0,.35)}
.hf.hud2 .buy:hover{filter:brightness(1.07)}
.hf.hud2 .buy.blue{border-color:rgba(201,163,92,.45);background:rgba(28,30,36,.92);color:#e9e1cf;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.hf.hud2 .buy.blue:hover{border-color:var(--h2-gold);color:#fff}
.hf.hud2 .buy.red{border-color:#8a2c22;background:linear-gradient(180deg,#a8392c,#7a2219);color:#fff}
.hf.hud2 .buy:disabled,.hf.hud2 .buy[disabled]{filter:grayscale(.6) brightness(.7)}
.hf.hud2 .du-tab{border-radius:3px;border-color:rgba(201,163,92,.3);background:rgba(20,22,28,.8);color:#cfc6b2}
.hf.hud2 .du-tab.on{background:linear-gradient(180deg,#e7c574,#c08f37);border-color:#e7c574;color:#22170a}
.hf.hud2 .input{border-radius:3px;border-color:rgba(201,163,92,.35);background:rgba(8,9,12,.75)}
/* Topo: herói e moedas mais finos. */
.hf.hud2 .hero-info .name{font-family:"HF2 Title",Georgia,serif;font-weight:700;letter-spacing:.04em}
.hf.hud2 .bar{border-radius:2px}
/* Barra de habilidades: casas escuras com fio. */
.hf.hud2 .skill{border-radius:3px}
/* Menu novo (canto de baixo, à esquerda): o botão e a lista que sobe. */
.hf.hud2 .h2m{display:block;position:absolute;left:12px;bottom:12px;z-index:40}
.hf.hud2 .h2m-btn{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px 0 10px;border:1px solid var(--h2-line);border-radius:3px;background:rgba(12,14,18,.85);color:var(--h2-ink);font:600 17px "HF2 Title",Georgia,serif;letter-spacing:.06em;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.hf.hud2 .h2m-btn img{width:26px;height:26px}
.hf.hud2 .h2m-btn:hover,.hf.hud2 .h2m-btn.on{border-color:var(--h2-gold);color:#fff}
.hf.hud2 .h2m-car{width:8px;height:8px;margin-left:6px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(-45deg) translate(-1px,1px);transition:transform .15s}
.hf.hud2 .h2m-btn.on .h2m-car{transform:rotate(135deg) translate(-1px,1px)}
.hf.hud2 .h2m-list{position:absolute;left:0;bottom:52px;width:250px;max-height:calc(100vh - 140px);overflow:auto;display:flex;flex-direction:column;padding:8px 6px;border:1px solid var(--h2-line);border-radius:3px;background:linear-gradient(90deg,rgba(10,12,16,.9),rgba(10,12,16,.7));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 14px 40px rgba(0,0,0,.55);transform-origin:bottom left;animation:h2mUp .16s ease-out}
.hf.hud2 .h2m-list[hidden]{display:none}
@keyframes h2mUp{from{opacity:0;transform:translateY(8px) scaleY(.96)}to{opacity:1;transform:none}}
.hf.hud2 .h2m-i{display:flex;align-items:center;gap:12px;height:36px;padding:0 10px;border:0;border-radius:2px;background:none;color:var(--h2-ink);font:600 16px "HF Sans",system-ui,sans-serif;text-align:left;cursor:pointer}
.hf.hud2 .h2m-i img{width:24px;height:24px;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.hf.hud2 .h2m-i:hover{background:linear-gradient(90deg,rgba(227,194,122,.16),transparent);color:#fff}
.hf.hud2 .h2m-sep{display:block;height:1px;margin:6px 18px;background:linear-gradient(90deg,transparent,var(--h2-line2),transparent);position:relative}
.hf.hud2 .h2m-sep::after{content:"";position:absolute;left:50%;top:-2px;width:4px;height:4px;margin-left:-2px;background:var(--h2-gold);transform:rotate(45deg)}
/* No celular o app tem os próprios botões: o Menu novo fica só no computador por enquanto. */
.hf.hud2.app .h2m{display:none}
.hf.dock.hud2 .hf-stage::before{background:linear-gradient(180deg,rgba(12,13,17,.94),rgba(12,13,17,.82));border-bottom:1px solid var(--h2-line);box-shadow:0 2px 10px rgba(0,0,0,.4)}
.hf.hud2 .pill .plus{border-image:none;border:1px solid var(--h2-line);border-radius:3px;background:rgba(201,163,92,.14);color:var(--h2-gold)}
.hf.hud2 .pill .pl{color:var(--h2-mut);letter-spacing:.06em}
/* Tela cheia (19/10 20:04, dono: "não tem nada a ver com a referência; quero a tela do jogo cheia... sem a HUD por cima do jogo;
só um ícone do menu no lado direito inferior e o ícone do chat no lado esquerdo, que abre quando clica"). No computador o jogo
ocupa a janela inteira (sizeCanvas) e a HUD clássica some; as teclas (Espaço, 1, 2, 3, Q, E, R) continuam valendo. */
.hf.hud2:not(.app) .hf-stage::before,.hf.hud2:not(.app) .hf-stage::after{display:none!important}
.hf.hud2:not(.app) .hf-stage > :is(.hero-card,.mapchip,.pvp-bar,.domchip,.topnav,.panel,.mm-show,.bottombar,.app-fabs,.app-tabs,.app-more,.app-scrim,.zoomctl,.radar,.dk-grip,.dk-show,.dk-bot,.dk-botshow,.hf-ver){display:none!important}
.hf.hud2:not(.app) .h2m{left:auto;right:16px;bottom:16px}
.hf.hud2:not(.app) .h2m-btn{width:52px;height:52px;padding:0;justify-content:center;border-radius:50%;background:rgba(12,14,18,.72);box-shadow:0 4px 14px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hf.hud2:not(.app) .h2m-btn img{width:30px;height:30px}
/* Tela baixa: itens mais juntos (a lista rola se ainda não couber). */
@media (max-height:820px){.hf.hud2:not(.app) .h2m-i{height:31px;font-size:15px}.hf.hud2:not(.app) .h2m-sep{margin:3px 18px}}
.hf.hud2:not(.app) .h2m-list{left:auto;right:0;bottom:62px;transform-origin:100% 100%;max-height:calc(var(--sh,100vh) - 100px);overscroll-behavior:contain;background:linear-gradient(270deg,rgba(10,12,16,.9),rgba(10,12,16,.72))}
.hf.hud2:not(.app) .chatfab{display:grid;place-items:center;position:absolute;z-index:40;left:16px;right:auto;top:auto;bottom:16px;width:52px;height:52px;padding:0;border:1px solid var(--h2-line);border-radius:50%;cursor:pointer;pointer-events:auto;background:rgba(12,14,18,.72);box-shadow:0 4px 14px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hf.hud2:not(.app) .chatfab img{width:30px;height:30px}
/* Marcaram você, responderam ou mandaram privado com o chat fechado (19/10 21:06, dono: "ícone do chat fica com badge quando alguém
te marca no chat (1)"): o número em vermelho no canto e o ícone pulsando até abrir o chat (Chat.bump / Chat.pingShow). */
.hf.hud2:not(.app) .chatfab .badge{right:-5px;top:-5px;min-width:21px;height:21px;padding:0 6px;border:2px solid #15130f;font:700 12px/17px "HF Sans",system-ui,sans-serif;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.hf.hud2:not(.app) .chatfab.hot{border-color:#ff6b5e;animation:cfHot 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hf.hud2:not(.app) .chatfab.hot{animation:none}}
.hf.hud2:not(.app) .chatfab:hover,.hf.hud2:not(.app) .chatfab.on{border-color:var(--h2-gold)}
.hf.hud2:not(.app):has(.veil:not([hidden])) .chatfab{display:grid}
.hf.hud2:not(.app).chat-float .hf-stage > .p-chat{display:flex!important;position:absolute;left:16px;right:auto;top:auto;bottom:80px;width:min(380px,calc(100% - 32px));height:min(500px,calc(100% - 110px));z-index:39;overflow:visible;box-shadow:0 12px 34px rgba(0,0,0,.55)}
.hf.hud2:not(.app).chat-float .p-chat .chat-x{display:grid;place-items:center;position:absolute;z-index:9;right:-10px;top:-10px;width:28px;height:28px;padding:0;border-radius:50%;cursor:pointer;border:1px solid var(--h2-line);background:#1b1918;color:#e9e1cf}
/* Janelas no HUD clean (19/10 20:41, dono: "os itens estão em cima da tela... colocar elas transparentes igual às que mostramos na
referência"): a janela fica no meio, acima da barra de habilidades (que continua à vista) e por cima do nome; vidro escuro
transparente com desfoque, fio dourado fino e cantos marcados; os cartões de dentro ficam quase transparentes. */
.hf.dock.hud2 .veil{left:16px;top:16px;right:16px;bottom:96px;z-index:30;background:none;justify-content:center;grid-template-columns:minmax(0,1240px)}
.hf.dock.hud2 .veil:has(.win-nome,.win-votou,.win-renascer,.win-discord,.win-offline,.win-diario,.win-chefe_fim,.win-missoes,.win-feedback,.win-instalar){left:16px;right:16px;grid-template-columns:minmax(0,1fr);background:rgba(4,5,8,.35);border-radius:4px}
.hf.hud2:not(.app):has(.veil:not([hidden])) :is(.h2top,.h2-hint){display:none}
.hf.hud2:not(.app) .win{background:linear-gradient(180deg,rgba(14,15,19,.8),rgba(9,10,13,.74))!important;border:1px solid rgba(201,163,92,.42);outline:0!important;border-radius:2px;-webkit-backdrop-filter:blur(7px) saturate(1.1);backdrop-filter:blur(7px) saturate(1.1);box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,235,190,.06)}
.hf.hud2:not(.app) .win::before{content:"";position:absolute;inset:3px;pointer-events:none;z-index:0;border:1px solid rgba(201,163,92,.12);
background:linear-gradient(#e3c27a,#e3c27a) 0 0/16px 1px,linear-gradient(#e3c27a,#e3c27a) 0 0/1px 16px,linear-gradient(#e3c27a,#e3c27a) 100% 0/16px 1px,linear-gradient(#e3c27a,#e3c27a) 100% 0/1px 16px,
linear-gradient(#e3c27a,#e3c27a) 0 100%/16px 1px,linear-gradient(#e3c27a,#e3c27a) 0 100%/1px 16px,linear-gradient(#e3c27a,#e3c27a) 100% 100%/16px 1px,linear-gradient(#e3c27a,#e3c27a) 100% 100%/1px 16px;background-repeat:no-repeat}
.hf.hud2:not(.app) .win > *{position:relative;z-index:1}
.hf.hud2:not(.app) .win :is(.fr-lg,.fr-md,.fr-sm){background-color:rgba(255,255,255,.028)!important;outline:0!important;border:1px solid rgba(201,163,92,.16);border-radius:2px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hf.hud2:not(.app) .win :is(.fr-slot,.fr-slot-on){background-color:rgba(255,255,255,.035)!important;outline:0!important;border:1px solid rgba(255,255,255,.08);border-radius:2px}
.hf.hud2:not(.app) .win .fr-slot-on{border-color:rgba(227,194,122,.6);background-color:rgba(227,194,122,.1)!important}
.hf.hud2:not(.app) .win .fr-slot:hover{border-color:rgba(227,194,122,.4)}
.hf.hud2:not(.app) .win .t-title{letter-spacing:.14em}
/* Canto de cima à esquerda (19/10 20:12, dono: "na parte superior esquerda vamos deixar assim"): nome em Cinzel, "/" dourado, herói e
nível; vida (vermelho) e mana (azul) em barras finas cortadas na ponta; os números embaixo. Sem fundo: fica em cima do jogo. */
.h2top,.h2-hint{display:none}
.hf.hud2:not(.app) .h2top{display:block;position:absolute;left:28px;top:22px;z-index:20;width:340px;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.6)}
/* 20:31 (dono: "a parte superior esquerda pode colocar algo para aparecer mais"): sombra escura atrás, que some para a direita e
para baixo, e barras um pouco mais grossas. */
.hf.hud2:not(.app) .h2top::before{content:"";position:absolute;z-index:-1;left:-28px;top:-22px;right:-110px;bottom:-26px;background:radial-gradient(ellipse 100% 130% at 0% 35%,rgba(4,5,8,.85),rgba(4,5,8,.62) 50%,transparent 80%);pointer-events:none}
.hf.hud2:not(.app) .h2top::after{content:"";position:absolute;left:0;top:-8px;width:120px;height:1px;background:linear-gradient(90deg,#e3c27a,transparent)}
/* Avisos no topo do meio (19/10 20:59, dono: "coloque as notificações de eventos centralizado na parte superior"): contagem do
Beta, voto, renovação do VIP, prisão, grupo e os botões de aviso (TopIdle, Passe, promoção, plantação) numa linha só, que quebra
se não couber; o painel do evento ao vivo (Ilha) logo abaixo. Sem logo e sem moedas. */
.hf.hud2:not(.app) .hf-stage > .topcenter{display:flex!important;position:absolute;left:50%;top:14px;transform:translateX(-50%);flex-direction:column;align-items:center;gap:8px;z-index:21;width:max-content;max-width:min(820px,calc(100% - 820px));min-width:260px}
.hf.hud2:not(.app) .topcenter > :is(.toplogo,.currencies){display:none!important}
.hf.hud2:not(.app) .topcenter > :is(.betacd,.votebar,.renewbar,.jailbar,.partybox,.votechip){position:static!important;left:auto!important;top:auto!important;transform:none!important;margin:0}
.hf.hud2:not(.app) .topcenter > .votechip:not([hidden]){display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.hf.hud2:not(.app) .vc-b{height:38px;border-radius:3px;padding:0 14px 0 9px;animation:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hf.hud2:not(.app) .vc-b.wait{background:rgba(9,10,13,.72);box-shadow:inset 0 0 0 1px rgba(201,163,92,.35),0 3px 10px rgba(0,0,0,.35);color:#ece6d6}
.hf.hud2:not(.app) .vc-b.wait small{color:#a9a191}
.hf.hud2:not(.app) .vc-b.go{background:linear-gradient(180deg,rgba(64,47,16,.9),rgba(36,27,10,.9));box-shadow:inset 0 0 0 1px #e3c27a,0 0 14px rgba(227,194,122,.3);color:#ffe7a8}
.hf.hud2:not(.app) .vc-b.go small{color:#e9d3a0}
.hf.hud2:not(.app) .vc-b b{font-family:"HF Sans",system-ui,sans-serif;font-size:13.5px;font-weight:700}
.hf.hud2:not(.app) .vc-b small{font-family:"HF Sans",system-ui,sans-serif;font-size:11.5px;font-weight:500}
.hf.hud2:not(.app) .betacd:not([hidden]){border-radius:3px}
.hf.hud2:not(.app) .hf-stage > .evh-hud{top:110px}
.hf.hud2:not(.app):has(.veil:not([hidden])) .hf-stage > .topcenter{display:none!important}
/* Missões no canto de cima à direita, embaixo do online/FPS (19/10 21:00, dono: "na vertical, somente escrito, sem cards, e um
check"): sem fundo, só uma sombra que some para a esquerda; ✓ pega (apagada e riscada), ! pronta para coletar (dourada, clica). */
.h2q{display:none}
.hf.hud2:not(.app) .h2q{display:block;position:absolute;right:18px;top:52px;z-index:20;width:290px;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.6);font-family:"HF Sans",system-ui,sans-serif}
.hf.hud2:not(.app) .h2q:empty{display:none}
.hf.hud2:not(.app) .h2q::before{content:"";position:absolute;z-index:-1;right:-18px;top:-14px;bottom:-16px;left:-70px;background:radial-gradient(ellipse 100% 120% at 100% 30%,rgba(4,5,8,.62),rgba(4,5,8,.35) 55%,transparent 80%);pointer-events:none}
.h2q-h{display:flex;justify-content:flex-end;align-items:baseline;gap:8px;margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid;border-image:linear-gradient(270deg,rgba(227,194,122,.7),transparent) 1;cursor:pointer}
.h2q-h span{font:700 13px/1 "HF2 Title",Georgia,serif;letter-spacing:.16em;text-transform:uppercase;color:#e3c27a}
.h2q-h b{font-size:12px;color:#a9a191}
.h2q-h:hover span{color:#ffe7a8}
.h2q ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.h2q li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:8px;text-align:left;font-size:14px;line-height:1.25;color:#ece6d6}
.h2q li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2q li b{min-width:0;text-align:right;font-size:12.5px;font-weight:600;color:#c9c1b0}
.h2q li i{width:14px;height:14px;display:grid;place-items:center;border:1px solid rgba(227,194,122,.55);border-radius:2px;font:800 10px/1 "HF Sans",system-ui,sans-serif;font-style:normal;color:#e3c27a;transform:rotate(45deg) scale(.82)}
.h2q li i{transform:none}
.h2q li.done{color:#8f897c}
.h2q li.done span{text-decoration:line-through;text-decoration-color:rgba(143,137,124,.6)}
.h2q li.done i{background:rgba(110,200,120,.18);border-color:rgba(110,200,120,.6);color:#7fe08f}
.h2q li.ready{color:#ffe7a8;cursor:pointer}
.h2q li.ready i{background:#e3c27a;border-color:#e3c27a;color:#1d1406;animation:h2qPing 1.4s ease-in-out infinite}
.h2q li.ready:hover span{text-decoration:underline;text-underline-offset:3px}
.h2q li.ready b{color:#e3c27a}
.h2q li.h2q-task{color:#d9d2c3}
.h2q li.h2q-task i{border:0;color:#e3c27a;font-size:9px}
.h2q li.h2q-task.ok{color:#ffd76a}
.h2q li.h2q-task.ok[data-boss]{cursor:pointer}
@keyframes h2qPing{50%{box-shadow:0 0 0 4px rgba(227,194,122,.0),0 0 10px rgba(227,194,122,.8)}}
.hf.hud2:not(.app):has(.veil:not([hidden])) .h2q{display:none}
/* Leitura (19/10 21:05, dono: "nessa HUD clean vamos melhorar a leitura dentro do jogo, está ruim para ler"): o texto volta para a
Signika (a do jogo; a condensada ficava fina demais), com contorno escuro de verdade (stroke por baixo da letra) no que fica em
cima do jogo, um pouco maior; as sombras de fundo mais fortes; janelas um pouco menos transparentes e o texto secundário mais claro. */
.hf.hud2{--muted:#c3bcae}
.hf.hud2:not(.app) :is(.h2top,.h2q,.h2-hint){-webkit-text-stroke:3px rgba(0,0,0,.78);paint-order:stroke fill;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.hf.hud2:not(.app) .h2t-name{-webkit-text-stroke:4px rgba(0,0,0,.8)}
.hf.hud2:not(.app) .h2t-sub{font-size:17px;color:#efe9dc}
.hf.hud2:not(.app) .h2t-nums{font-size:15px;color:#fff}
.hf.hud2:not(.app) .h2q li{font-size:15px;color:#f4efe4}
.hf.hud2:not(.app) .h2q li b{font-size:14px;color:#e6dfcf}
.hf.hud2:not(.app) .h2q li.done{color:#a8a294}
.hf.hud2:not(.app) .h2q-h span{font-size:14px}
.hf.hud2:not(.app) .h2q li i{-webkit-text-stroke:0}
.hf.hud2:not(.app) .h2-hint{font-size:15px;color:#e9e3d6}
.hf.hud2:not(.app) .h2q::before{background:radial-gradient(ellipse 100% 120% at 100% 30%,rgba(4,5,8,.72),rgba(4,5,8,.45) 55%,transparent 82%)}
.hf.hud2:not(.app) .actions :is(.skill .k,.powr .key,.quick .key,.quick b,.auto span){-webkit-text-stroke:3px rgba(0,0,0,.85);paint-order:stroke fill;font-size:13px}
.hf.hud2:not(.app) .win{background:linear-gradient(180deg,rgba(14,15,19,.9),rgba(9,10,13,.86))!important}
.hf.hud2:not(.app) .win :is(.fr-lg,.fr-md,.fr-sm){background-color:rgba(255,255,255,.04)!important}
/* 19/10 22:03–22:06 (dono: "diminuir essa parte também"; "destacar mais essa parte de slots"; "destacar aqui também"):
canto de cima à esquerda menor; barra de habilidades com fundo próprio e casas mais marcadas; avisos do topo mais fortes;
missões com – (minimizar) e × (ocultar, fica a aba "Missões"). */
.hf.hud2:not(.app) .h2top{left:22px;top:16px;width:270px}
.hf.hud2:not(.app) .h2t-name{font-size:20px;max-width:150px}
.hf.hud2:not(.app) .h2t-sub{font-size:14px}
.hf.hud2:not(.app) .h2t-pts{font-size:13px}
.hf.hud2:not(.app) .h2t-row{gap:8px}
.hf.hud2:not(.app) .h2t-bars{margin-top:7px}
.hf.hud2:not(.app) .h2t-bars > i{height:8px}
.hf.hud2:not(.app) .h2t-bars > i.h2t-mp{height:5px;width:calc(100% - 8px)}
.hf.hud2:not(.app) .h2t-nums{font-size:12.5px;margin-top:4px}
.hf.hud2:not(.app) .h2top::before{left:-22px;top:-16px;right:-80px;bottom:-20px}
.hf.hud2:not(.app) .actions{padding:7px 9px 9px;border-radius:4px;background:linear-gradient(180deg,rgba(14,15,18,.62),rgba(8,9,11,.82));box-shadow:0 0 0 1px rgba(227,194,122,.28),0 6px 20px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hf.hud2:not(.app) .actions::after{display:none}
.hf.hud2:not(.app) .actions :is(.skill,.powr,.auto,.quick){border-color:rgba(227,194,122,.38);background:radial-gradient(ellipse at 50% 35%,rgba(48,45,40,.92),rgba(14,14,16,.95));box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 2px 6px rgba(0,0,0,.5)}
.hf.hud2:not(.app) .actions :is(.skill,.powr,.auto,.quick):hover{border-color:#e3c27a;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 8px rgba(227,194,122,.45)}
.hf.hud2:not(.app) .actions .quick.empty{opacity:.75}
.hf.hud2:not(.app) .vc-b{height:40px}
.hf.hud2:not(.app) .vc-b img{width:26px;height:26px}
.hf.hud2:not(.app) .vc-b.wait{background:linear-gradient(180deg,rgba(26,24,20,.92),rgba(10,10,12,.92));box-shadow:inset 0 0 0 1px rgba(227,194,122,.6),0 4px 14px rgba(0,0,0,.55);color:#fff}
.hf.hud2:not(.app) .vc-b.wait img{opacity:1;filter:none}
.hf.hud2:not(.app) .vc-b.wait small{color:#cfc6b2}
.hf.hud2:not(.app) .vc-b.go{box-shadow:inset 0 0 0 1px #ffd76a,0 0 18px rgba(255,200,90,.5),0 4px 14px rgba(0,0,0,.5);animation:vcPulse 2.4s ease-in-out infinite}
.hf.hud2:not(.app) .vc-b b{-webkit-text-stroke:2px rgba(0,0,0,.6);paint-order:stroke fill}
.h2q-h{align-items:center}
.h2q-t{cursor:pointer;pointer-events:auto}
.h2q-b{pointer-events:auto;display:grid;place-items:center;width:20px;height:20px;padding:0;border:1px solid rgba(227,194,122,.4);border-radius:2px;background:rgba(10,11,13,.7);color:#e3c27a;font:700 14px/1 "HF Sans",system-ui,sans-serif;cursor:pointer;-webkit-text-stroke:0}
.h2q-b:hover{border-color:#e3c27a;color:#fff}
.hf.hud2:not(.app) .h2q[data-mode="min"]::before,.hf.hud2:not(.app) .h2q[data-mode="off"]::before{display:none}
.hf.hud2:not(.app) .h2q[data-mode="min"] .h2q-h{margin-bottom:0}
.hf.hud2:not(.app) .h2q[data-mode="off"]{width:auto;left:auto}
.h2q-tab{pointer-events:auto;display:flex;align-items:center;gap:8px;margin-left:auto;padding:5px 10px;border:1px solid rgba(227,194,122,.45);border-radius:3px;background:rgba(10,11,13,.75);color:#e3c27a;cursor:pointer;-webkit-text-stroke:0}
.h2q-tab span{font:700 12px/1 "HF2 Title",Georgia,serif;letter-spacing:.14em;text-transform:uppercase}
.h2q-tab b{font-size:12px;color:#cfc6b2}
.hf.hud2 .citem-card .cic-act{color:#2a1a05;-webkit-text-stroke:0}
/* Online, VIP, ms e FPS no canto de cima à direita. */
.hf.hud2:not(.app) .hf-stage > .presence{position:absolute;left:auto;right:16px;top:16px;margin:0;padding:3px 10px;font-size:12px;z-index:20;border-radius:3px;background:rgba(8,9,12,.62);box-shadow:inset 0 0 0 1px var(--h2-line);font-family:"HF Sans",system-ui,sans-serif}
.hf.hud2:not(.app):has(.veil:not([hidden])) .hf-stage > .presence{display:none}
.h2t-row{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.h2t-name{font:700 26px/1 "HF2 Title",Georgia,serif;font-variant:small-caps;letter-spacing:.03em;color:#fbf3e2;cursor:pointer;pointer-events:auto;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.h2t-sl{align-self:stretch;width:2px;margin:-4px 2px -2px;background:linear-gradient(#f5d58a,#b8862e);transform:skewX(-24deg)}
.h2t-sub{font:600 16px/1 "HF Sans",system-ui,sans-serif;color:#d9d2c3;overflow:hidden;text-overflow:ellipsis}
.h2t-pts{pointer-events:auto;padding:0;border:0;background:none;font:700 15px/1 "HF Sans",system-ui,sans-serif;color:#f2c14e;cursor:pointer}
.h2t-bars{display:flex;flex-direction:column;gap:2px;margin-top:9px}
.h2t-bars > i{position:relative;display:block;height:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);background:rgba(0,0,0,.45);clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%);overflow:hidden}
.h2t-bars > i.h2t-mp{height:6px;width:calc(100% - 10px)}
.h2t-bars > i > i{display:block;height:100%;transition:width .25s ease-out}
.h2t-hp > i{background:linear-gradient(#ff7a6a,#d63a2c 55%,#a8241b)}
.h2t-mp > i{background:linear-gradient(#8fb7ff,#3f6fe0 55%,#2a4fb0)}
.h2t-nums{display:flex;justify-content:space-between;margin-top:5px;font:600 14px/1 "HF Sans",system-ui,sans-serif;color:#e8e2d4}
/* Barra de habilidades e poções (19/10 20:11, dono: "quero as barras com os slots de skills dentro do jogo igual a referência"):
casas escuras e transparentes, a tecla no canto de cima e um fio fino embaixo. */
.hf.hud2:not(.app) .actions{left:50%;right:auto;bottom:20px;transform:translateX(-50%);gap:4px;align-items:flex-end;padding:0 0 8px;z-index:20}
.hf.hud2:not(.app) .actions::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.55) 8%,rgba(0,0,0,.55) 92%,transparent)}
.hf.hud2:not(.app) .actions .skills{gap:4px}
.hf.hud2:not(.app) .actions :is(.skill,.powr,.auto,.quick){width:52px;height:52px;padding:0;border:1px solid rgba(255,255,255,.1);border-image:none;border-radius:2px;background:rgba(20,22,24,.5);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);outline:0;display:grid;place-items:center;overflow:visible;transform:none;filter:none;animation:none}
.hf.hud2:not(.app) .actions :is(.skill,.powr,.auto,.quick):hover{border-color:rgba(227,194,122,.6);background:rgba(30,32,34,.62)}
.hf.hud2:not(.app) .actions .skill img{width:44px;height:44px}
.hf.hud2:not(.app) .actions .skill .cd{inset:1px}
.hf.hud2:not(.app) .actions :is(.skill .k,.powr .key,.quick .key){position:absolute;left:4px;top:2px;right:auto;bottom:auto;width:auto;min-width:0;height:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;font:600 12px/1 "HF Sans",system-ui,sans-serif;color:#e9e3d6;text-shadow:0 1px 2px #000}
.hf.hud2:not(.app) .actions .skill .k.wide{font-size:9.5px;letter-spacing:.02em}
.hf.hud2:not(.app) .actions .powr img{width:32px;height:32px}
.hf.hud2:not(.app) .actions .powr .pw-fill{left:1px;right:1px;bottom:1px;border-radius:0;max-height:calc(100% - 2px);height:calc((100% - 2px) * var(--p) / 100%)}
.hf.hud2:not(.app) .actions .powr b{bottom:2px;font-size:9.5px}
.hf.hud2:not(.app) .actions .powr.full{border-color:#f2c14e;box-shadow:0 0 10px rgba(242,193,78,.55)}
.hf.hud2:not(.app) .actions .auto img{position:static;width:30px;height:30px;inset:auto}
.hf.hud2:not(.app) .actions .auto span{position:absolute;left:0;right:0;bottom:2px;margin:0;transform:none;height:auto;padding:0;border-radius:0;background:none;box-shadow:none;font:700 9.5px/1 "HF Sans",system-ui,sans-serif;letter-spacing:.08em;text-align:center}
.hf.hud2:not(.app) .actions .auto.on{border-color:rgba(242,193,78,.7);box-shadow:inset 0 0 12px rgba(242,193,78,.25)}
.hf.hud2:not(.app) .actions .quick img{width:34px;height:34px}
.hf.hud2:not(.app) .actions .quick b{left:auto;right:3px;top:auto;bottom:2px;min-width:0;height:auto;padding:0;border-radius:0;background:none;box-shadow:none;font:600 11px/1 "HF Sans",system-ui,sans-serif;color:#fff;text-shadow:0 1px 2px #000}
/* Fala de perto: o campo sobe no meio, acima da barra; a dica fica no canto de baixo à esquerda, ao lado do chat. */
.hf.hud2:not(.app) .saybox{bottom:96px;border-radius:3px;border:1px solid var(--h2-line)}
.hf.hud2:not(.app) .h2-hint{display:block;position:absolute;left:80px;bottom:34px;z-index:20;font:600 14px/1 "HF Sans",system-ui,sans-serif;color:#cfc8b9;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.7);pointer-events:none}
.hf.hud2:not(.app):has(.saybox:not([hidden])) .h2-hint,.hf.hud2:not(.app).chat-float .h2-hint{display:none}
/* Item com ação no chat (19/10): cartão único, item à esquerda e a ação (Comprar / Dar lance) encaixada à direita. --cc = cor da raridade. */
.citem-card{--cc:#ffd66b;display:flex;align-items:stretch;width:fit-content;max-width:100%;margin-top:6px;border-radius:10px;overflow:hidden;background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 14%,transparent),rgba(0,0,0,.34) 55%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cc) 45%,transparent)}
.citem-card.r3{--cc:#c77dff}.citem-card.r4{--cc:#ffb640}.citem-card.r5{--cc:#ff5a7a}.citem-card.r6{--cc:#7ff6ff}
.citem-card .cic-main{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.citem-card .cic-main .ithumb{width:42px;height:42px;flex:none}
.citem-card .cic-main:hover b{text-decoration:underline;text-underline-offset:2px}
.citem-card .cic-act{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:66px;padding:4px 10px;border:0;border-left:1px solid color-mix(in srgb,var(--cc) 40%,transparent);background:linear-gradient(180deg,#f6d27a,#c98b1c);color:#2a1604;font:800 11.5px/1.1 inherit;letter-spacing:.02em;cursor:pointer}
.citem-card .cic-act img{width:20px;height:20px;image-rendering:pixelated;filter:drop-shadow(0 1px 0 rgba(255,255,255,.35))}
.citem-card .cic-act:hover{filter:brightness(1.08)}
.citem-card .cic-act:active{filter:brightness(.95)}
/* Botão Streamer (no lugar do Doar) e a janela do programa de streamers (19/10). */
.navbtn img[src*='i_streamer']{image-rendering:pixelated}
.st-pop .sp-card{width:min(560px,100%);background:linear-gradient(180deg,#2a1450 0%,#160b2c 36%,#0c1320 100%);box-shadow:0 0 0 1px rgba(169,112,255,.75),inset 0 1px 0 rgba(220,196,255,.14),0 24px 60px rgba(0,0,0,.75)}
.sp-hero{display:flex;align-items:center;gap:14px;padding:18px 44px 14px 18px;background:radial-gradient(120% 140% at 0% 0%,rgba(145,70,255,.35),transparent 60%);border-bottom:1px solid rgba(169,112,255,.3)}
.sp-ic{flex:none;width:68px;height:68px;display:grid;place-items:center;border-radius:16px;background:radial-gradient(circle at 50% 38%,#5b2aa8,#1d0b3c 72%);box-shadow:0 0 0 2px #a970ff,0 0 18px rgba(145,70,255,.5)}
.sp-ic img{width:52px;height:52px;image-rendering:pixelated}
.sp-tag{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#d9c2ff}
.sp-tag .cst-dot{width:8px;height:8px;border-radius:50%;background:#3dff72;box-shadow:0 0 6px #3dff72;animation:cstBlink 1s ease-in-out infinite}
.sp-hero .t-title{display:block;font-size:21px;margin-top:3px}
.sp-list{list-style:none;margin:0;padding:0 16px;display:grid;gap:6px}
.sp-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(169,112,255,.18);font-size:13px;line-height:1.35}
.sp-list li:first-child{background:rgba(242,193,78,.08);box-shadow:inset 0 0 0 1px rgba(242,193,78,.35)}
.sp-list li img{width:30px;height:30px;flex:none;image-rendering:pixelated}.sp-list li b{color:#ffe7a8}
.sp-foot{display:flex;flex-direction:column;gap:8px;padding:2px 16px 0}
.sp-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.buy.sp-btn{height:44px;font-size:15px;gap:8px}
.st-pop .buy.sp-twitch{border-image:none!important;border:0;border-radius:10px;background:linear-gradient(#a970ff,#7c3aed)!important;color:#fff;text-shadow:none;box-shadow:0 3px 0 #4c1d95}
.st-pop .buy.sp-kick{border-image:none!important;border:0;border-radius:10px;background:#0b0f0c!important;color:#53fc18;text-shadow:none;box-shadow:inset 0 0 0 2px #53fc18,0 3px 0 #1f5c0a}
.sp-note{color:#b8acd0;font-size:12px;text-align:center}
.sp-me{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;background:rgba(145,70,255,.12);box-shadow:inset 0 0 0 1px rgba(169,112,255,.35)}.sp-me b{color:#e2ccff}.sp-me small{color:#c7bcdc}
.buy.sp-go{height:44px;font-size:15px}
.sp-fan{margin:2px 0 0;text-align:center;font-size:12.5px;color:#a99bc4}.sp-fan b{color:#ffd24a}
/* Botões VIP e Streamer iguais aos outros (19/10, dono: "vamos deixar todos iguais... só adicione uma badge 'novo'"). */
.navbtn .nb-new{position:absolute;top:-10px;right:-12px;z-index:2;padding:1px 5px 2px;border-radius:6px;background:linear-gradient(#ff6b6b,#d32f2f);color:#fff;font:800 9.5px/1.1 "HF Sans",system-ui,sans-serif;font-style:normal;letter-spacing:.03em;text-transform:uppercase;box-shadow:0 0 0 1.5px #3a0d0d,0 2px 4px rgba(0,0,0,.45);pointer-events:none}
.hf.dock .topnav .navbtn .nb-new{top:-9px;right:-11px;font-size:7.5px;padding:0 3px 1px;border-radius:4px}
/* Botões de aceitar em verde (19/10 22:08, dono: "botão de aceitar aqui está muito feio, tem que deixar visível, colocar ele verde"):
amizade, grupo, duelo, convite e lance. E no HUD clean os botões dourados (.ig-btn.gold: Buscar, Mensagem…) voltam a ser dourados
(o bloco neutro gerado escurecia todos os .ig-btn). */
.hf.hud2 :is(.ig-btn.gold,.ig-btn.on){color:#1d1204;background:linear-gradient(#ffd66b,#d49a2a)}
.hf.hud2 .ig-btn.red{color:#fff;background:linear-gradient(#e0574f,#a8261f)}
.hf :is([data-cmd="friend.accept"],[data-rq="approve"],[data-party="approve"],[data-bidok],[data-iv="accept"],[data-duacc]){color:#062b10!important;background:linear-gradient(#7dfa9a,#2fbf5b)!important;border-color:#1f8a3e!important;box-shadow:0 0 0 1px #1f8a3e,0 0 12px rgba(80,230,120,.35)!important;text-shadow:none!important;-webkit-text-stroke:0}
.hf :is([data-cmd="friend.accept"],[data-rq="approve"],[data-party="approve"],[data-bidok],[data-iv="accept"],[data-duacc]):hover{filter:brightness(1.08)}
/* Mochila no HUD clean, computador (19/10 22:08, dono: "melhorar o layout da mochila, vamos tentar deixar sem scroll no desktop;
embaixo tem muita coisa legal que, se deixar na mesma tela, fica bem interessante"): três colunas na altura da janela, sem rolar a
página: herói e equipamento | mochila (só a grade rola por dentro, se encher) | Classes, Skins, Asas e Aura empilhadas, cada uma
numa faixa compacta que rola para o lado. */
.hf.dock.hud2 .win-itens{width:min(1240px,100%);height:100%}
.hf.dock.hud2 .win-itens .win-body{display:flex;flex-direction:column;overflow:hidden;min-height:0;flex:1}
.hf.dock.hud2 .win-itens .ig{flex:1;min-height:0;height:100%;grid-template-columns:minmax(0,1fr) 284px;grid-template-rows:minmax(0,1fr);align-items:stretch;gap:12px}
.hf.dock.hud2 .win-itens .ig-top{grid-column:1;grid-row:1;min-height:0;height:100%;align-items:stretch;gap:12px}
.hf.dock.hud2 .win-itens .ig-eq{position:static;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.hf.dock.hud2 .win-itens .ig-bag{min-height:0;overflow:hidden}
.hf.dock.hud2 .win-itens .ig-grid{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:2px}
.hf.dock.hud2 .win-itens .ig-looks{grid-column:2;grid-row:1;grid-template-columns:minmax(0,1fr);grid-auto-rows:min-content;align-content:start;gap:10px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.hf.dock.hud2 .win-itens .lk-box{gap:5px;padding:6px 8px 4px;border-radius:3px;background:rgba(255,255,255,.035);box-shadow:none;border:1px solid rgba(201,163,92,.18)}
.hf.dock.hud2 .win-itens .lk-h{padding-bottom:4px;border-bottom-color:rgba(201,163,92,.2)}
.hf.dock.hud2 .win-itens .lk-h b{font:700 12.5px/1 "HF2 Title",Georgia,serif;letter-spacing:.14em;color:#e3c27a}
.hf.dock.hud2 .win-itens .lk-h small{font-size:10.5px}
.hf.dock.hud2 .win-itens .lk-row{gap:6px;padding:2px 1px 5px}
.hf.dock.hud2 .win-itens .lk-row .mv-cell{flex:0 0 60px!important;width:60px!important;min-height:0!important;height:70px;padding:5px 2px 4px!important;gap:2px!important;border-radius:3px}
.hf.dock.hud2 .win-itens .lk-row .mv-art{height:38px!important}
.hf.dock.hud2 .win-itens .lk-row .lk-face{width:36px!important;height:36px!important}
.hf.dock.hud2 .win-itens .lk-row .mv-art .mv-img{width:42px;height:42px}
.hf.dock.hud2 .win-itens .lk-row .mv-cell .sk-spr{transform:scale(.62)}
.hf.dock.hud2 .win-itens .lk-row .mv-lb{font-size:10.5px!important}
.hf.dock.hud2 .win-itens .lk-row .mv-sub{display:none}
.hf.dock.hud2 .win-itens .lk-row .mv-cell .lb-b{font-size:8.5px;padding:0 4px;left:2px;top:2px}
.hf.dock.hud2 .win-itens .lk-row .mv-blank{font-size:20px}
@media (max-width:1180px){.hf.dock.hud2 .win-itens .ig{grid-template-columns:minmax(0,1fr) 270px}}
.hf.dock.hud2 .win-itens .lk-row .mv-ok{transform:scale(.75);transform-origin:100% 0}
.hf.dock.hud2 .win-itens .ig-cats .tab,.hf.dock.hud2 .win-itens .ig-cats button{min-width:0}
.hf.dock.hud2 .win-itens .ig-cats.n5{flex-wrap:nowrap;gap:4px}
.hf.dock.hud2 .win-itens .ig-cats.n5 .ig-cat{flex:1 1 auto;min-width:0;height:38px;padding:0 6px;gap:4px;font-size:11.5px}
.hf.dock.hud2 .win-itens .ig-cats.n5 .ig-cat b{font-size:10px;padding:0 4px;min-width:0}
.hf.dock.hud2 .win-itens .ig-cats.n5 .ig-cat img{width:18px;height:18px}
.hf.dock.hud2 .win-itens .ig-cats.n5 .ig-cat span{overflow:hidden;text-overflow:ellipsis}
/* Botões VIP e Streamer ao lado dos avisos do topo, só no HUD clean (19/10 22:13). Os outros avisos (Beta, voto, renovação, prisão,
grupo) continuam em linhas próprias; os botões de aviso e estes dois dividem a mesma linha. */
.h2-pops{display:none}
.hf.hud2:not(.app) .hf-stage > .topcenter{flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:min(980px,calc(100% - 680px))}
.hf.hud2:not(.app) .topcenter > :is(.betacd,.votebar,.renewbar,.jailbar,.partybox){flex:1 0 100%;display:flex;justify-content:center}
.hf.hud2:not(.app) .topcenter > :is(.betacd,.votebar,.renewbar,.jailbar,.partybox)[hidden]{display:none!important}
.hf.hud2:not(.app) .topcenter > .votechip{order:1}
.hf.hud2:not(.app) .topcenter > .h2-pops{order:2;display:flex;gap:8px}
.hf.hud2:not(.app) .h2-pops .vc-b img{image-rendering:pixelated}
.hf.hud2:not(.app) .h2p-vip{box-shadow:inset 0 0 0 1px rgba(255,210,90,.75),0 4px 14px rgba(0,0,0,.55)}
.hf.hud2:not(.app) .h2p-vip b{color:#ffd76a}
.hf.hud2:not(.app) .h2p-st{box-shadow:inset 0 0 0 1px rgba(169,112,255,.8),0 4px 14px rgba(0,0,0,.55)}
.hf.hud2:not(.app) .h2p-st b{color:#d9c2ff}
/* Dar lance (19/10 22:14): martelo desenhado e texto preto. */
.citem-card .cic-act{color:#140d02!important;font-weight:800;-webkit-text-stroke:0;text-shadow:0 1px 0 rgba(255,240,200,.35)}
.citem-card .cic-act .cic-svg{width:22px;height:22px;display:block}
.citem-card .cic-act span{color:#140d02!important;-webkit-text-stroke:0!important}
/* Eventos no HUD clean, computador (19/10 22:16, dono: "essa página de eventos tem muita coisa, podemos melhorar"): destaque à
esquerda mais estreito, chefes em 2 colunas com cartões compactos (requisitos e prêmios recolhidos em "Requisitos e prêmios"),
"Depois" e o botão de aviso na mesma linha. */
.hf.dock.hud2 .ev2 .ev2-cols{grid-template-columns:minmax(0,380px) minmax(0,1fr)!important;gap:12px}
.hf.dock.hud2 .ev2 .ev-big .ev-hero{min-height:0;padding:12px 14px}
.hf.dock.hud2 .ev2 .ev-big .ev-hero img{width:96px;height:96px}
.hf.dock.hud2 .ev2 .ev-big .ev-title{font-size:20px}
.hf.dock.hud2 .ev2 .ev-big .ev-body{padding:10px 14px 12px;gap:8px}
.hf.dock.hud2 .ev2 .ev-big .ev-info{font-size:12.5px;margin:0}
.hf.dock.hud2 .ev2 .ev-chips{gap:5px}
.hf.dock.hud2 .ev2 .ev-chip{padding:3px 8px;font-size:11.5px;border-radius:3px;background:rgba(255,255,255,.04);border-color:rgba(201,163,92,.2)}
.hf.dock.hud2 .ev2 .ev-chip img{width:16px;height:16px}
.hf.dock.hud2 .ev2 .wbc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.hf.dock.hud2 .ev2 .wbc{border-radius:3px}
.hf.dock.hud2 .ev2 .wbc-h{padding:8px 10px;gap:10px}
.hf.dock.hud2 .ev2 .wbc-h>img{width:44px;height:44px}
.hf.dock.hud2 .ev2 .wbc-ht .evc-n{font-size:15px}
.hf.dock.hud2 .ev2 .wbc-ht .ev-kind{font-size:10px}
.hf.dock.hud2 .ev2 .wbc-when{padding:4px 8px;border-radius:3px}
.hf.dock.hud2 .ev2 .wbc-t{font-size:14px}
.hf.dock.hud2 .ev2 .wbc-when small{font-size:10px}
.hf.dock.hud2 .ev2 .wbc-b{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;padding:8px 10px 10px}
.hf.dock.hud2 .ev2 .wbc-more{grid-column:1/-1;justify-self:stretch}
.hf.dock.hud2 .ev2 .wbc-next{grid-column:1;font-size:11.5px}
.hf.dock.hud2 .ev2 .wbc .ev-remind,.hf.dock.hud2 .ev2 .wbc .ev-go,.hf.dock.hud2 .ev2 .wbc .ev-low{grid-column:2;grid-row:2;margin:0;height:30px;padding:0 12px;font-size:12px;border-radius:3px;width:auto;white-space:nowrap}
.hf.dock.hud2 .ev2 .wbc-more + :is(.ev-remind,.ev-go,.ev-low){grid-column:1/-1;justify-self:end}
.wbc-more summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#e3c27a;user-select:none}
.wbc-more summary::-webkit-details-marker{display:none}
.wbc-more summary::before{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.wbc-more[open] summary::before{transform:rotate(45deg)}
.wbc-more[open]{display:flex;flex-direction:column;gap:6px}
.wbc-more[open] summary{margin-bottom:2px}
.hf:not(.hud2) .wbc-more summary,.hf.app .wbc-more summary{display:none}
.wbc-more:not([open]) > :not(summary){display:none}
/* Loja no HUD clean, computador (19/10 22:20, dono: "melhorar aqui também a loja no clean"): lateral mais estreita e baixa, banner
numa faixa só, cartões mais compactos (arte menor, texto em 2 linhas) para caber 5 por linha e duas linhas sem rolar, com o
preço e o Comprar sempre à vista. */
.hf.dock.hud2 .lj2{grid-template-columns:230px minmax(0,1fr)!important;gap:12px}
.hf.dock.hud2 .lj2-left{min-width:0;width:auto!important;max-width:230px;padding:10px;box-sizing:border-box}
.hf.dock.hud2 .lj2-right{min-width:0}
.hf.dock.hud2 .lj2-cats{gap:4px}
.hf.dock.hud2 .lj2-cats .ig-cat{height:36px;min-height:0;padding:0 10px;font-size:13px;border-radius:3px}
.hf.dock.hud2 .lj2-cats .ig-cat img{width:20px;height:20px}
.hf.dock.hud2 .lj2-vip{padding:7px 8px;border-radius:3px}
.hf.dock.hud2 .lj2-vip img{width:30px;height:30px}
.hf.dock.hud2 .lj2-vip b{font-size:13px}.hf.dock.hud2 .lj2-vip small{font-size:10.5px}
.hf.dock.hud2 .lj2-sup{padding:6px 8px;border-radius:3px}
.hf.dock.hud2 .lj2-sup small{display:none}
.hf.dock.hud2 .lj3-ban{padding:10px 16px;margin-bottom:10px;border-radius:3px;gap:14px}
.hf.dock.hud2 .lj3-bt{gap:3px}
.hf.dock.hud2 .lj3-bt>b.t-title{font-size:17px}
.hf.dock.hud2 .lj3-bt p{font-size:12px;line-height:1.35;max-width:70ch}
.hf.dock.hud2 .lj3-bb .buy{height:32px;min-height:0;padding:0 14px;font-size:13px}
.hf.dock.hud2 .lj3-hd{margin:0 0 8px}
.hf.dock.hud2 .lj3-hd h3{font-size:16px}
.hf.dock.hud2 .lj3-hd .lj3-q{height:34px;max-width:240px}
.hf.dock.hud2 .lj4-grid{grid-template-columns:repeat(auto-fill,minmax(178px,1fr))!important;gap:8px!important}
.hf.dock.hud2 .lj3-card.lj4{grid-template-rows:50px 36px 32px auto 1fr;row-gap:4px;padding:9px 9px 10px!important;border-radius:3px}
.hf.dock.hud2 .lj4-art{height:50px}
.hf.dock.hud2 .lj4-im{width:46px;height:46px}
.hf.dock.hud2 .lj4-nm{font-size:13.5px;line-height:17px}
.hf.dock.hud2 .lj4-ds{font-size:11px;line-height:15px;-webkit-line-clamp:2}
.hf.dock.hud2 .lj4-info{font-size:11px;padding-top:4px;gap:6px}
.hf.dock.hud2 .lj4-info:empty{display:none}
.hf.dock.hud2 .lj4-ft{grid-template-rows:auto auto auto;gap:5px}
.hf.dock.hud2 .lj4 .qty-seg{transform:scale(.88);transform-origin:center}
.hf.dock.hud2 .lj4-bulk{min-height:0}
.hf.dock.hud2 .lj4-bulk:empty{display:none}
.hf.dock.hud2 .lj4-bulk button{padding:2px 6px;font-size:10.5px}
.hf.dock.hud2 .lj4 .lj3-buy{height:32px;min-height:0;padding:0 12px;font-size:13px}
.hf.dock.hud2 .lj4 .lj3-pr b{font-size:15px}
/* Escolha do visual (19/10 22:20): janela única com as duas prévias lado a lado. */
.hp-pop{position:fixed;inset:0;z-index:118;display:grid;place-items:center;padding:16px;overflow:auto;background:rgba(3,6,12,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:hfPopBg .16s ease-out}
.hp-card{width:min(860px,100%);max-height:calc(100vh - 32px);overflow:auto;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;padding:22px;border-radius:12px;background:linear-gradient(180deg,#1b1a17,#0f0e0d);box-shadow:0 0 0 1px rgba(227,194,122,.55),0 24px 60px rgba(0,0,0,.75);color:#ece6d6}
.hp-h{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.hp-h .t-title{font-size:24px;letter-spacing:.08em;color:#e3c27a}
.hp-h p{margin:0;max-width:56ch;font-size:13.5px;color:#cfc6b2}
.hp-new{padding:2px 8px;border-radius:6px;background:linear-gradient(#ff6b6b,#d32f2f);color:#fff;font:800 11px/1.3 "HF Sans",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.hp-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hp-opt{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;cursor:pointer;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(227,194,122,.25);transition:box-shadow .15s,transform .15s}
.hp-opt:hover,.hp-opt:focus-visible{box-shadow:inset 0 0 0 2px #e3c27a,0 0 18px rgba(227,194,122,.25);transform:translateY(-2px)}
.hp-opt img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.hp-opt b{font:700 18px/1.1 "HF2 Title",Georgia,serif;letter-spacing:.06em;color:#fff}
.hp-opt small{font-size:12.5px;line-height:1.4;color:#bdb5a5;min-height:3.6em}
.hp-opt .buy{display:flex;align-items:center;justify-content:center;height:40px;font-size:14px}
@media (max-width:700px){.hp-opts{grid-template-columns:minmax(0,1fr)}}
.h2-pick .du-tab{padding:0 14px;white-space:nowrap}
/* Slots no card (19/10 22:37, dono: "centralizar dentro do card principal"): a mesma folga dos quatro lados; antes os slots
encostavam no alto e nas laterais e sobravam 8px embaixo. */
.hf.hud2:not(.app) .actions{padding:8px;gap:5px;align-items:center}
.hf.hud2:not(.app) .actions .skills{gap:5px}
.hf.hud2:not(.app) .actions::after{display:none}
/* Zoom em pé em cima do botão do Menu (19/10 22:43, dono: "colocar o zoom na vertical em cima do menu de ajustes, e pode até
diminuir o ícone de ajuste um pouco mais"). */
.hf.hud2:not(.app) .h2m{right:18px;bottom:18px}
.hf.hud2:not(.app) .h2m-btn{width:44px;height:44px}
.hf.hud2:not(.app) .h2m-btn img{width:25px;height:25px}
.hf.hud2:not(.app) .h2m-list{bottom:54px}
.hf.hud2:not(.app) .hf-stage > .zoomctl{display:flex!important;left:auto;right:22px;top:auto;bottom:72px;width:36px;padding:3px;gap:2px;z-index:21;border-radius:18px;background:rgba(12,14,18,.72);box-shadow:inset 0 0 0 1px var(--h2-line,rgba(201,163,92,.4)),0 4px 14px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hf.hud2:not(.app) .zoomctl button{height:30px;border-radius:50%;font:600 21px/1 "HF Sans",system-ui,sans-serif;color:#efe6d2;background:none;box-shadow:none;text-shadow:0 1px 2px #000}
.hf.hud2:not(.app) .zoomctl button:hover:not(:disabled){filter:none;background:rgba(227,194,122,.16);color:#fff}
.hf.hud2:not(.app) .zoomctl .zpct{height:18px;border-radius:0;font:600 10px/1 "HF Sans",system-ui,sans-serif;color:#cfc4ac}
/* Perfil no clean (19/10 22:38, dono: "melhorar aqui também"). O "Trocar" do status pegava a grade .pf-st (outra tela) e caía
numa linha sozinha, empurrando o "joga desde" para baixo: volta a ser um link na mesma linha (vale para os dois visuais).
No clean: quem é em linhas curtas, "Trocar título" como link pequeno ao lado das tags, a coluna da esquerda cabe sem rolar
(sem a dica do mouse), e os títulos viram uma grade de faixas baixas (4 por linha) em vez de cartões de 100 px. */
.pf2-id .lnk.pf-st{display:inline;grid-template-columns:none;gap:0}
.pf2-id small{display:flex;flex-wrap:wrap;align-items:center;column-gap:4px}
.hf.hud2:not(.app) .ig.pf2{gap:16px}
.hf.hud2:not(.app) .pf2-left{display:flex;flex-direction:column;gap:10px;padding:12px}
.hf.hud2:not(.app) .pf2-left > .ig-note{display:none}
.hf.hud2:not(.app) .pf2-who{align-items:flex-start;gap:12px}
.hf.hud2:not(.app) .pf2-por{width:62px;height:62px}
.hf.hud2:not(.app) .pf2-id{gap:4px}
.hf.hud2:not(.app) .pf2-nm{font-size:19px;line-height:1.1}
.hf.hud2:not(.app) .pf2-id small{font-size:12px;color:#b9b2a4}
.hf.hud2:not(.app) .pf2-bd .pf-lk-go{order:9;font-size:11px;padding:2px 7px;border-radius:3px;color:#e3c27a;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(227,194,122,.4)}
.hf.hud2:not(.app) .pf2-bd .pf-lk-go:hover{color:#fff;background:rgba(227,194,122,.14)}
.hf.hud2:not(.app) .pf2-id .lnk.pf-st{font-size:11px;color:#e3c27a}
.hf.hud2:not(.app) .pf2-petc{padding:5px 10px}
.hf.hud2:not(.app) .pf2-acts{margin-top:auto}
.hf.hud2:not(.app) .pf2-afk{margin:0}
.hf.hud2:not(.app) .pf2-look{padding-bottom:12px}
.hf.hud2:not(.app) .pf2-look .mv-grid.k-title{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.hf.hud2:not(.app) .pf2-look .mv-grid.k-title .mv-cell{min-height:44px;flex-direction:row;gap:8px;padding:6px 26px 6px 8px;border-radius:4px}
.hf.hud2:not(.app) .pf2-look .mv-grid.k-title .mv-art{height:auto}
.hf.hud2:not(.app) .pf2-look .mv-grid.k-title .ar-title{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.hf.hud2:not(.app) .pf2-look .mv-grid.k-title .mv-blank{min-width:0;height:24px;padding:0 8px;font-size:12px}
.hf.hud2:not(.app) .pf2-look .mv-grid.k-title .mv-sub{display:none}
.hf.hud2:not(.app) .pf2-look .mv-grid.k-title .mv-lb{font-size:12.5px}
.hf.hud2:not(.app) .pf2-look .mv-grid.k-title .mv-ok{top:50%;right:6px;width:18px;height:18px;margin-top:-9px;font-size:11px}
.hf.hud2:not(.app) .pf2-look .mv-grid.k-title .mv-cell.on{box-shadow:inset 0 0 0 1px #e3c27a,0 0 10px rgba(227,194,122,.25)}
.hf.hud2:not(.app) .pf2-lkk .mv-k{height:34px}
.hf.hud2:not(.app) .pf2-look .mv-grid.k-title .mv-lb{max-width:none;min-width:0;flex:0 1 auto}
.hf.hud2:not(.app) .pf2-look .mv-grid.k-title .mv-cell.blank .mv-art{width:auto;flex:none}
.hf.hud2:not(.app) .pf2-acts [data-open="atributos"]{flex-grow:1.35}
.hf.hud2:not(.app) .ig.pf2{--c:56px;--g:7px}
.hf.hud2:not(.app) .pf2-acts{flex-wrap:nowrap}
.hf.hud2:not(.app) .pf2-acts .ig-btn{flex:1 1 0;min-width:0;height:34px;padding:0 6px}
.hf.hud2:not(.app) .pf2-afk{padding:6px 9px;font-size:12px}
.hf.hud2:not(.app) .pf2-afk small{display:none}
.hf.hud2:not(.app) .pf2-left .pf2-acts:not(:has(.pf-pts,[data-open="herois"])){flex-wrap:wrap}
/* Alvorada no clean (19/10 22:40, dono: "melhorar Alvorada"): o mapa cabe inteiro na altura da janela, sem rolar, com moldura
fina; ao lado, a lista dos moradores (quem tem "!" primeiro). Os botões e a dica numa linha só, em cima. */
.cm-side{display:none}
.cm-top{display:flex;flex-direction:column;gap:8px}
.cm-body{display:block}
.hf.hud2:not(.app) .win-cidade .win-body:has(.cn-city){display:flex;flex-direction:column;overflow:hidden;min-height:0}
.hf.hud2:not(.app) .cn-city{flex:1;min-height:0;gap:10px}
.hf.hud2:not(.app) .cm-top{flex-direction:row;align-items:center;gap:14px}
.hf.hud2:not(.app) .cm-top .cn-note{color:#b9b2a4;font-size:12.5px}
.hf.hud2:not(.app) .cm-seg{border-radius:4px;background:rgba(0,0,0,.35);border-color:rgba(227,194,122,.35)}
.hf.hud2:not(.app) .cm-seg button{border-radius:3px}
.hf.hud2:not(.app) .cm-body{flex:1;min-height:0;display:flex;gap:14px;align-items:stretch}
.hf.hud2:not(.app) .cm-wrap{flex:none;height:100%;max-height:none;aspect-ratio:5/4;overflow:hidden;border:0;border-radius:4px;box-shadow:0 0 0 1px rgba(227,194,122,.55),0 10px 30px rgba(0,0,0,.5)}
.hf.hud2:not(.app) .cm-map{min-width:0;width:100%;height:100%;aspect-ratio:auto}
.hf.hud2:not(.app) .cm-map::after{box-shadow:inset 0 0 50px rgba(0,0,0,.5)}
.hf.hud2:not(.app) .cm-face{width:28px;height:28px;border-width:2px}
.hf.hud2:not(.app) .cm-name{font-size:10px;padding:0 5px;border-radius:3px;background:rgba(8,9,12,.82);border-color:rgba(227,194,122,.45)}
.hf.hud2:not(.app) .cm-mark{width:16px;height:16px;line-height:16px;font-size:11px;top:-7px;right:-5px}
.hf.hud2:not(.app) .cm-pin.hl{z-index:6}
.hf.hud2:not(.app) .cm-pin .cm-name{position:absolute;top:100%;left:50%;margin-top:1px;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .12s}
.hf.hud2:not(.app) .cm-pin:is(:hover,:focus-visible,.hl) .cm-name{opacity:1}
.hf.hud2:not(.app) .cm-pin .cm-tip{display:none!important}
.hf.hud2:not(.app) .cm-pin.hl .cm-face{transform:scale(1.25);border-color:#ffe08a;box-shadow:0 0 0 2px #2a1a0a,0 0 18px rgba(255,208,100,.9)}
.hf.hud2:not(.app) .cm-pin.hl .cm-name{color:#fff;border-color:#ffe08a}
.hf.hud2:not(.app) .cm-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;min-height:0}
.cm-sh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 2px}
.cm-sh small{font-size:12px;color:#b9b2a4}
.cm-rows{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;align-content:start;padding-right:4px;scrollbar-width:thin}
.cm-row{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:9px;min-width:0;padding:4px 10px 4px 5px;border-radius:4px;cursor:pointer;background:rgba(20,21,24,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.cm-row:hover,.cm-row:focus-visible{background:rgba(42,38,30,.85);box-shadow:inset 0 0 0 1px rgba(227,194,122,.6)}
.cm-row.has{box-shadow:inset 0 0 0 1px rgba(255,210,74,.55)}
.cm-rf{flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden;background:radial-gradient(#3b2a14,#120c05);box-shadow:0 0 0 1px #c9a25c}
.cm-rf img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.cm-rt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.cm-rt b{font-size:13.5px;color:#f1e6cc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-rt small{font-size:11.5px;color:#a9a191;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-rm{flex:none;margin-left:auto;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:12px;color:#2a1a06;background:#ffd24a;box-shadow:0 0 8px rgba(255,210,74,.6)}
/* XP/h e ouro/h no canto de cima à direita e o Loot recente embaixo do nome (19/10 22:54). */
.h2rate,.h2l{display:none}
.hf.hud2:not(.app) .h2rate:not(:empty){display:flex;position:absolute;right:18px;top:46px;z-index:20;gap:12px;align-items:center;pointer-events:auto;font-family:"HF Sans",system-ui,sans-serif;-webkit-text-stroke:3px rgba(0,0,0,.78);paint-order:stroke fill;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.h2rate span{display:flex;align-items:center;gap:4px}
.h2rate img{width:16px;height:16px;object-fit:contain;image-rendering:pixelated}
.h2rate b{font-size:14px;font-weight:700;color:#f4efe4}
.h2rate small{font-size:11px;color:#c9c1b0}
.hf.hud2:not(.app):has(.h2rate:not(:empty)) .h2q{top:76px}
.hf.hud2:not(.app):has(.veil:not([hidden])) :is(.h2rate,.h2l){display:none}
.hf.hud2:not(.app) .h2l:not(:empty){display:block;position:absolute;left:18px;top:142px;z-index:20;width:300px;font-family:"HF Sans",system-ui,sans-serif;-webkit-text-stroke:3px rgba(0,0,0,.78);paint-order:stroke fill;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.hf.hud2:not(.app) .h2l[data-mode="open"]::before{content:"";position:absolute;z-index:-1;left:-18px;top:-14px;bottom:-16px;right:-60px;background:radial-gradient(ellipse 100% 120% at 0% 30%,rgba(4,5,8,.68),rgba(4,5,8,.4) 55%,transparent 82%);pointer-events:none}
.h2l-h{display:flex;align-items:center;gap:8px;padding-bottom:5px;border-bottom:1px solid;border-image:linear-gradient(90deg,rgba(227,194,122,.7),transparent) 1}
.h2l[data-mode="open"] .h2l-h{margin-bottom:6px}
.h2l-t{font:700 14px/1 "HF2 Title",Georgia,serif;letter-spacing:.16em;text-transform:uppercase;color:#e3c27a}
.h2l-h b{font-size:13px;font-weight:600;color:#c9c1b0;margin-right:auto}
.h2l .h2q-b{-webkit-text-stroke:0}
.h2l-st{display:flex;gap:16px;margin-bottom:8px}
.h2l-st span{display:grid;grid-template-columns:20px auto;column-gap:5px;align-items:center}
.h2l-st img{grid-row:1/3;width:20px;height:20px;object-fit:contain;image-rendering:pixelated}
.h2l-st b{font-size:15px;font-weight:700;color:#f4efe4;line-height:1.1}
.h2l-st small{font-size:12px;color:#b9b2a4;line-height:1.1}
.h2l ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.h2l li{display:grid;grid-template-columns:20px minmax(0,1fr) auto auto;align-items:center;gap:8px;font-size:15px;line-height:1.25;color:#ece6d6}
.h2l li img{width:20px;height:20px;object-fit:contain;image-rendering:pixelated}
.h2l li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2l li b{font-size:14px;font-weight:600;color:#e3c27a}
.h2l li small{font-size:12px;color:#b9b2a4;min-width:50px;text-align:right}
.h2l li.new{animation:h2lNew 1.2s ease-out}
@keyframes h2lNew{from{color:#ffe7a8;transform:translateX(-6px)}to{transform:none}}
.h2l-e{margin:0;font-size:14px;color:#b9b2a4}
.h2l-tab{margin-left:0}
/* Gema, Diamantes e Cristais embaixo da vida e da mana (19/10 23:00): só ícone e número, sem caixa. */
.h2cur{display:none}
.hf.hud2 .h2cur:not(:empty){display:flex;gap:14px;margin-top:7px;pointer-events:auto}
.h2cur button{all:unset;display:flex;align-items:center;gap:5px;cursor:pointer}
.h2cur img{width:17px;height:17px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
.h2cur b{font-size:14px;font-weight:700;color:#f4efe4}
.h2cur button:hover b{color:#ffe7a8}
.hf.hud2.app .h2cur{gap:10px;margin-top:4px}
.hf.hud2.app .h2cur img{width:14px;height:14px}
.hf.hud2.app .h2cur b{font-size:12px}
/* Item novo na Mochila (19/10 22:59): etiqueta "Novo" no canto até passar o mouse, tocar ou fechar a Mochila. */
.ig-new{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);z-index:4;padding:0 5px;border-radius:3px;font:800 9.5px/1.3 "HF Sans",system-ui,sans-serif;font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:#1d1406;background:linear-gradient(#ffe07a,#e0a52e);box-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none;-webkit-text-stroke:0}
.ig-cell.nw{box-shadow:0 0 0 1px #ffd24a,0 0 10px rgba(255,210,74,.45)}
/* Barra de XP no clean (19/10 23:02). */
.h2t-bars > i.h2t-xp{height:4px;width:calc(100% - 14px)}
.h2t-xp > i{background:linear-gradient(#ffe48a,#e3a92a 60%,#b07a14)}
.h2t-nums .h2t-xpn{color:#ffd76a}
.hf.hud2:not(.app) .h2t-bars > i.h2t-xp{height:4px;width:calc(100% - 14px)}
.hf.hud2.app .h2t-bars > i.h2t-xp{height:3px}
.ig-cell.nw .ig-pw{bottom:10px}
/* HUD clean no celular (19/10 22:32, dono: "vamos ajustar a HUD clean no mobile também"): some o cartão do herói, as moedas, a coluna
de botões da esquerda, o mapa e as abas de baixo; ficam o nome e as barras no alto à esquerda, online e missões (minimizadas) à
direita, os avisos do topo numa linha que rola, as habilidades no lugar de sempre e, embaixo, só o chat e o Menu. */
.h2-mbar{display:none}
.hf.hud2.app{--tab:0px}
.hf.hud2.app .hf-stage > :is(.hero-card,.mapchip,.pvp-bar,.domchip,.topnav,.mm-show,.bottombar,.app-fabs,.app-tabs,.zoomctl,.radar,.dk-grip,.dk-show,.dk-bot,.dk-botshow,.hf-ver,.app-chat,.app-say,.app-emote,.minimap-c,.chatfab){display:none!important}
.hf.hud2.app .p-map{display:none!important}
.hf.hud2.app .h2top{display:block;position:absolute;left:calc(10px + var(--sl));top:calc(8px + var(--st));z-index:20;width:min(230px,52vw);pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.95);-webkit-text-stroke:2.5px rgba(0,0,0,.78);paint-order:stroke fill}
.hf.hud2.app .h2top::before{content:"";position:absolute;z-index:-1;left:-14px;top:-12px;right:-50px;bottom:-14px;background:radial-gradient(ellipse 100% 120% at 0% 30%,rgba(4,5,8,.8),rgba(4,5,8,.5) 50%,transparent 80%);pointer-events:none}
.hf.hud2.app .h2t-name{font-size:16px;max-width:120px}
.hf.hud2.app .h2t-sub{font-size:12px}
.hf.hud2.app .h2t-bars{margin-top:5px}
.hf.hud2.app .h2t-bars > i{height:7px}
.hf.hud2.app .h2t-bars > i.h2t-mp{height:4px;width:calc(100% - 7px)}
.hf.hud2.app .h2t-nums{font-size:11px;margin-top:3px}
.hf.hud2.app .h2t-pts{font-size:12px}
.hf.hud2.app .hf-stage > .presence{position:absolute;left:auto;right:calc(8px + var(--sr));top:calc(8px + var(--st));margin:0;height:auto;padding:2px 8px;font-size:10.5px;z-index:20;border-radius:3px;background:rgba(8,9,12,.62);box-shadow:inset 0 0 0 1px var(--h2-line)}
.hf.hud2.app .h2q{display:block;position:absolute;right:calc(8px + var(--sr));top:calc(36px + var(--st));z-index:20;width:min(250px,60vw);text-shadow:0 1px 2px rgba(0,0,0,.95);font-family:"HF Sans",system-ui,sans-serif}
.hf.hud2.app .h2q:empty{display:none}
.hf.hud2.app .h2q li{font-size:12.5px;-webkit-text-stroke:2px rgba(0,0,0,.78);paint-order:stroke fill}
.hf.hud2.app .h2q li i{-webkit-text-stroke:0}
.hf.hud2.app .h2q-h span{font-size:11px}
.hf.hud2.app .h2q[data-mode="open"]::before{content:"";position:absolute;z-index:-1;right:-8px;top:-8px;bottom:-10px;left:-30px;background:radial-gradient(ellipse 100% 120% at 100% 30%,rgba(4,5,8,.72),rgba(4,5,8,.4) 55%,transparent 82%);pointer-events:none}
/* Avisos do topo: uma linha que rola para o lado, embaixo do nome. */
.hf.hud2.app .hf-stage > .topcenter{display:flex!important;position:absolute;left:calc(8px + var(--sl));right:calc(8px + var(--sr));top:calc(86px + var(--st));transform:none;z-index:19;flex-direction:row;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;pointer-events:auto;width:auto;max-width:none}
.hf.hud2.app .hf-stage > .topcenter::-webkit-scrollbar{display:none}
.hf.hud2.app .topcenter > :is(.toplogo,.currencies,.presence){display:none!important}
.hf.hud2.app .topcenter > :is(.betacd,.votebar,.renewbar,.jailbar,.partybox,.votechip,.h2-pops){position:static!important;transform:none!important;margin:0;flex:none}
.hf.hud2.app .topcenter > .votechip:not([hidden]),.hf.hud2.app .topcenter > .h2-pops{display:flex;flex-wrap:nowrap;gap:6px;flex-direction:row}
.hf.hud2.app .topcenter > .mapchip{display:none!important}
.hf.hud2.app .topcenter .vc-b{height:32px;padding:0 10px 0 6px;border-radius:3px;animation:none}
.hf.hud2.app .topcenter .vc-b img{width:20px;height:20px}
.hf.hud2.app .topcenter .vc-b b{font-size:11.5px}.hf.hud2.app .topcenter .vc-b small{font-size:9.5px}
.hf.hud2.app .topcenter .vc-b.wait{background:rgba(9,10,13,.78);box-shadow:inset 0 0 0 1px rgba(201,163,92,.45);color:#fff}
.hf.hud2.app .h2q[data-mode="open"] ~ .topcenter,.hf.hud2.app:has(.h2q[data-mode="open"]) .hf-stage > .topcenter{right:calc(8px + var(--sr) + min(250px,60vw) + 8px)}
/* Barra de baixo: chat à esquerda e Menu à direita. */
.hf.hud2.app .h2-mbar{display:flex;justify-content:space-between;position:absolute;left:calc(10px + var(--sl));right:calc(10px + var(--sr));bottom:calc(10px + var(--sb));z-index:21;pointer-events:none}
.h2-mb{pointer-events:auto;position:relative;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--h2-line,rgba(201,163,92,.4));border-radius:50%;background:rgba(12,14,18,.75);box-shadow:0 4px 14px rgba(0,0,0,.45);cursor:pointer}
.h2-mb img{width:28px;height:28px}
.h2-mb .badge{right:-4px;top:-4px}
.hf.hud2.app .h2m{display:block;position:absolute;left:auto;right:calc(10px + var(--sr));bottom:calc(66px + var(--sb));z-index:40}
.hf.hud2.app .h2m-btn{display:none}
.hf.hud2.app .h2m-list{position:static;width:min(280px,calc(100vw - 20px));max-height:calc(100% - 140px);max-height:min(70vh,520px)}
.hf.hud2.app .h2m-i{height:38px;font-size:15px}
/* Habilidades: descem para onde ficavam as abas (--tab 0) e deixam espaço para a barra de baixo. */
.hf.hud2.app .actions{bottom:calc(var(--sb) + 64px)}
.hf.hud2.app.is-portrait .actions{bottom:calc(var(--sb) + 64px)}
.hf.hud2.app .actions :is(.skill,.powr,.auto,.quick){filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
/* Janelas e o painel do chat continuam como no clássico do celular, com o fundo escuro do clean. */
.hf.hud2.app .h2-hint,.hf.hud2.app .saybox{display:none!important}
/* Celular deitado no clean (19/10 23:08): com a XP e as moedas o canto do nome ficou mais alto; os avisos do topo saem de baixo
dele e vão para o alto, entre o nome e as missões. */
.hf.hud2.app.is-landscape .hf-stage > .topcenter{left:calc(250px + var(--sl));right:calc(270px + var(--sr));top:calc(8px + var(--st))}
/* Menu do clean no celular (19/10 23:15, dono: "melhorar esse menu no mobile"): em vez da lista comprida, uma folha de vidro em
grade (4 por linha em pé, 7 deitado), com o ícone grande e o nome embaixo, na ordem de sempre e sem buracos. O resto do jogo
escurece um pouco enquanto o Menu está aberto; tocar fora fecha. */
.hf.hud2.app .h2m{left:calc(10px + var(--sl));right:calc(10px + var(--sr));bottom:calc(68px + var(--sb))}
.hf.hud2.app .h2m-list{position:static;width:auto;max-height:min(70vh,600px);overflow:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:12px 10px;border:1px solid rgba(227,194,122,.35);border-radius:8px;background:linear-gradient(180deg,rgba(18,19,23,.95),rgba(10,11,14,.95));box-shadow:0 0 0 100vmax rgba(0,0,0,.4),0 14px 40px rgba(0,0,0,.6);transform-origin:100% 100%}
.hf.hud2.app .h2m-list[hidden]{display:none}
.hf.hud2.app .h2m-i{position:relative;flex-direction:column;justify-content:center;gap:6px;height:auto;min-height:78px;padding:10px 2px 8px;border-radius:6px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);font-size:12.5px;line-height:1.15;text-align:center}
.hf.hud2.app .h2m-i:active{background:rgba(227,194,122,.16);box-shadow:inset 0 0 0 1px rgba(227,194,122,.6)}
.hf.hud2.app .h2m-i img{width:34px;height:34px}
.hf.hud2.app .h2m-i span{white-space:normal;overflow-wrap:anywhere}
.hf.hud2.app .h2m-i .badge{top:4px;right:6px}
.hf.hud2.app .h2m-sep{display:none}
.hf.hud2.app.is-landscape .h2m{left:auto;width:min(620px,calc(100vw - 20px))}
.hf.hud2.app.is-landscape .h2m-list{grid-template-columns:repeat(7,minmax(0,1fr));max-height:calc(100vh - 90px)}
.hf.hud2.app.is-landscape .h2m-i{min-height:66px;padding:7px 2px 6px}
.hf.hud2.app.is-landscape .h2m-i img{width:28px;height:28px}
/* Celular em pé no clean (19/10 23:16, dono: "transferir a missão para baixo e ajustar o texto do Passe que está sendo cortado"):
a faixa de avisos quebra em linhas em vez de rolar para o lado (o Passe aparece inteiro); VIP e Streamer ficam só com o nome;
as missões descem para logo embaixo da faixa, à direita (--tcb, medido no hud.js). */
.hf.hud2.app.is-portrait .hf-stage > .topcenter{flex-wrap:wrap;overflow:visible;right:calc(8px + var(--sr))!important}
.hf.hud2.app.is-portrait .topcenter > .votechip:not([hidden]){flex-wrap:wrap}
.hf.hud2.app.is-portrait .topcenter .h2-pops .vc-b small{display:none}
.hf.hud2.app.is-portrait .topcenter .h2-pops .vc-b{padding-right:12px}
.hf.hud2.app.is-portrait .topcenter .vc-b{max-width:100%}
.hf.hud2.app.is-portrait .topcenter .vc-b span{min-width:0}
.hf.hud2.app.is-portrait .topcenter .vc-b :is(b,small){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf.hud2.app.is-portrait .h2q{top:calc(var(--tcb, 120px) + 10px)}
/* Mercado: Dar lance no anúncio (19/10 23:12), igual ao do Destaque do chat (martelo e texto preto), ao lado do Comprar. */
.mkb-btns{display:flex;gap:8px;flex:none}
.mkb-bid{flex:none;width:auto;height:48px;margin:0;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;color:#1d1406!important}
.mkb-bid .cic-svg{width:20px;height:20px;flex:none}
@media (max-width:520px){.mkb-btns{width:100%}.mkb-btns > *{flex:1 1 0;min-width:0}}
/* Ficha do anúncio no celular (19/10 23:17, dono: "clica no item e abre na tela toda"): sobe de baixo, até 86% da altura, com o
Mercado aparecendo por trás; tocar no escuro fecha. */
.hf.app .mk-sheet{align-items:flex-end;padding:0}
.hf.app .mk-sheet .is-card{max-width:none;max-height:86%;border-radius:14px 14px 0 0;padding-bottom:calc(14px + var(--sb, 0px))!important;animation:mkUp .22s ease-out}
.hf.app .mk-sheet .mkb{top:-16px;padding:10px 12px;gap:10px}
.hf.app .mk-sheet .mkb-go,.hf.app .mk-sheet .mkb-bid{height:44px;font-size:16px}
@keyframes mkUp{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
/* Loja no celular (19/10 23:22, dono: "melhorar a loja no mobile"): as categorias viram uma fileira de pílulas que rola para o
lado (ícone, nome inteiro e o número), sem a caixa em volta; o banner fica mais baixo (os pets numa faixa curta) e o "Problema
com uma compra?" vai para o fim, numa linha. Vale nos dois visuais (no celular os nomes das categorias saíam cortados). */
.hf.app .ig.lj2{display:flex;flex-direction:column;gap:10px}
.hf.app .lj2-left{display:contents}
.hf.app .lj2-cats{order:0;display:flex!important;flex-wrap:nowrap;gap:6px;overflow-x:auto;margin:0 -12px;padding:2px 12px 4px;scrollbar-width:none;grid-template-columns:none}
.hf.app .lj2-cats::-webkit-scrollbar{display:none}
.hf.app .lj2-cats .ig-cat{flex:none;width:auto;height:40px;flex-direction:row;gap:6px;padding:0 12px 0 8px;border-radius:20px;font-size:13px;line-height:1}
.hf.app .lj2-cats .ig-cat img{width:22px;height:22px}
.hf.app .lj2-cats .ig-cat span{white-space:nowrap;overflow:visible;max-width:none}
.hf.app .lj2-cats .lj3-n{position:static;margin:0;transform:none;font-size:11px;min-width:18px;height:18px;line-height:18px;padding:0 5px;border-radius:9px}
.hf.app .lj2-right{order:1;padding:0;background:none;box-shadow:none;border:0}
.hf.app .lj2-sup{order:2;padding:8px 10px}
.hf.app .lj2-sup small{display:none}
.hf.app .lj2-sup img{width:22px;height:22px}
.hf.app .lj3-ban{padding:14px 14px 10px}
.hf.app .lj3-ban .t-title{font-size:20px;line-height:1.15}
.hf.app .lj3-ban p{font-size:13.5px;margin:6px 0 10px}
.hf.app .lj3-bw{height:44px;margin-top:4px}
.hf.app .lj3-bw .lj3-pw{width:44px;height:44px}
.hf.app .lj3-bb{gap:10px}
.hf.app .lj3-bb .buy{height:40px;padding:0 16px}
/* Cabeçalho das janelas no celular estreito (19/10 23:22): com o saldo de diamantes, o ? e o × não cabiam em 390 px e o × saía
da tela. O título encolhe (reticências), o saldo fica menor e os botões não encolhem. */
.hf.app .win-head{gap:6px;min-width:0}
.hf.app .win-head > .t-title{flex:none;white-space:nowrap}
@media (max-width:420px){.hf.app .win-loja .win-head > .help-q{display:none}.hf.app .win-head > .t-title::before{display:none}}
.hf.app .win-head > .mini{flex:none}
.hf.app .win-head > .win-dia{flex:0 1 auto;min-width:0;margin-left:auto}
@media (max-width:420px){.hf.app .win-head > .win-dia{transform:none;padding-left:6px;gap:4px}.hf.app .win-head > .win-dia b{font-size:15px}.hf.app .win-head > .win-dia .buy{padding:0 8px;font-size:12px;height:28px}.hf.hud2.app .win-head > .t-title{letter-spacing:.06em}}
/* Trocar de visual num toque (19/10 23:33): um interruptor no rodapé do Menu do clean, no Mais do celular clássico e um botão
"Clean" no alto do clássico no computador. */
.hud-tg{all:unset;box-sizing:border-box;position:relative;display:inline-block;flex:none;width:44px;height:24px;border-radius:12px;background:#3a3836;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);cursor:pointer;transition:background .15s}
.hud-tg > i{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#d9d2c3;box-shadow:0 1px 3px rgba(0,0,0,.5);transition:transform .15s}
[aria-checked="true"].hud-tg,[aria-checked="true"] > .hud-tg{background:linear-gradient(#f0c96a,#c8902a)}
[aria-checked="true"].hud-tg > i,[aria-checked="true"] > .hud-tg > i{transform:translateX(20px);background:#fff}
.hud-tg.sm{width:30px;height:16px;border-radius:8px}.hud-tg.sm > i{width:12px;height:12px;left:2px;top:2px}
[aria-checked="true"] > .hud-tg.sm > i{transform:translateX(14px)}
.h2m-foot{display:none}
.hf.hud2 .h2m-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 4px 0;padding:10px 6px 2px;border-top:1px solid rgba(227,194,122,.25);font:600 14px "HF Sans",system-ui,sans-serif;color:var(--h2-ink,#ece6d6)}
.hf.hud2.app .h2m-foot{grid-column:1/-1;margin:4px 2px 0;padding:10px 6px 0}
.more-hudtg{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:10px 0 0;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(201,162,92,.35);cursor:pointer}
.more-hudtg span{display:flex;flex-direction:column;gap:2px;min-width:0}
.more-hudtg b{font-size:15px;color:#f3e9d2}.more-hudtg small{font-size:12px;color:#a9b4c6}
.nb-clean .hud-tg{margin:4px 0 2px}
/* Convite de instalar no Android (19/10 23:34): faixa embaixo com o botão Instalar (o convite do próprio navegador). */
.ai-bar{position:fixed;left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:130;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:12px;background:linear-gradient(180deg,rgba(26,26,30,.97),rgba(14,14,17,.97));box-shadow:0 0 0 1px rgba(227,194,122,.45),0 12px 30px rgba(0,0,0,.6);pointer-events:auto;animation:aiUp .25s ease-out}
.ai-bar.out{opacity:0;transform:translateY(12px);transition:opacity .2s,transform .2s}
.ai-bar img{width:40px;height:40px;border-radius:9px;flex:none}
.ai-bar span{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ai-bar b{font-size:14.5px;color:#f3e9d2}.ai-bar small{font-size:12px;color:#b9b2a4}
.ai-bar .buy{flex:none;height:38px;padding:0 16px;font-size:15px}
.ai-x{all:unset;flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:#b9b2a4;cursor:pointer}
@keyframes aiUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* Chefe e tarefa da fase no clean (19/10 23:47, dono: "vida do boss bem minimalista no desk e mobile"): o chip da tarefa vira só
uma linha de texto com um fio embaixo, sem caixa: "12/40 monstros", "Chefe apareceu!", "Chefe!" e, nos chefes de evento e
portal, o nome e a vida em %. Fio vermelho na luta. Tocar abre as missões, como no clássico. */
.hf.hud2:not(.app) .hf-stage > .domchip,.hf.hud2.app .hf-stage > .domchip{display:flex!important;position:absolute;z-index:19;flex-direction:column;align-items:stretch;gap:4px;width:auto;min-width:150px;max-width:260px;height:auto;margin:0;padding:0;border:0;border-image:none;border-radius:0;background:none;box-shadow:none;transform:none;cursor:pointer;font:600 13px/1.1 "HF Sans",system-ui,sans-serif;color:#ece6d6;text-align:center;-webkit-text-stroke:3px rgba(0,0,0,.8);paint-order:stroke fill;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.hf.hud2:not(.app) .hf-stage > .domchip{left:50%;top:78px;transform:translateX(-50%)}
.hf.hud2 .hf-stage > .domchip > img{display:none}
.hf.hud2 .hf-stage > .domchip .dbar{position:relative;display:block;width:100%;height:3px;margin:0;border:0;border-radius:2px;background:rgba(0,0,0,.55);box-shadow:none;overflow:hidden}
.hf.hud2 .hf-stage > .domchip .dbar > i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#e3c27a,#ffd76a);box-shadow:none}
.hf.hud2 .hf-stage > .domchip.full .dbar > i{background:#ffd76a}
.hf.hud2 .hf-stage > .domchip.fight{color:#ffd0c8}
.hf.hud2 .hf-stage > .domchip.fight .dbar{height:4px}
.hf.hud2 .hf-stage > .domchip.fight .dbar > i{background:linear-gradient(90deg,#ff5a4a,#c8281c)}
.hf.hud2 .hf-stage > .domchip.safe{display:none!important}
.hf.hud2:has(.veil:not([hidden])) .hf-stage > .domchip{display:none!important}
.hf.hud2.app.is-portrait .hf-stage > .domchip{left:calc(10px + var(--sl));top:calc(var(--tcb, 120px) + 12px);min-width:140px;max-width:46vw;text-align:left;font-size:12px}
.hf.hud2.app.is-landscape .hf-stage > .domchip{left:50%;top:calc(52px + var(--st));transform:translateX(-50%);font-size:12px}
/* Loot no celular: embaixo da tarefa, à esquerda, só os 3 últimos itens. */
.hf.hud2.app .h2l:not(:empty){display:block;position:absolute;left:calc(10px + var(--sl));top:calc(var(--tcb, 120px) + 40px);z-index:20;width:min(200px,48vw);font-family:"HF Sans",system-ui,sans-serif;-webkit-text-stroke:2px rgba(0,0,0,.8);paint-order:stroke fill;text-shadow:0 1px 2px rgba(0,0,0,.9)}
.hf.hud2.app.is-landscape .h2l:not(:empty){top:calc(118px + var(--st))}
.hf.hud2.app .h2l-t{font-size:11px}
.hf.hud2.app .h2l-h b{font-size:11px}
.hf.hud2.app .h2l-h .h2q-b[data-hunt-reset]{display:none}
.hf.hud2.app .h2l li{grid-template-columns:16px minmax(0,1fr) auto;font-size:12.5px;gap:6px}
.hf.hud2.app .h2l li img{width:16px;height:16px}
.hf.hud2.app .h2l li small{display:none}
.hf.hud2.app .h2l li b{font-size:12px}
.hf.hud2.app .h2l-e{font-size:12px}
.hf.hud2.app:has(.veil:not([hidden])) .h2l,.hf.hud2.app[data-msheet] .h2l{display:none!important}
.hf.hud2 .hf-stage > .domchip::before,.hf.hud2 .hf-stage > .domchip::after{display:none!important}
.hf.hud2 .hf-stage > .domchip{outline:0!important;border-image:none!important}
.hf.hud2.app .h2l-h{flex-wrap:nowrap;white-space:nowrap;gap:6px}
.hf.hud2.app .h2l-h b{display:none}
.hf.hud2.app .h2l-t{letter-spacing:.12em;margin-right:auto}
/* Feira (ouro e recursos): Dar lance embaixo do Comprar (19/10 23:48), com o martelo e o texto preto, como no chat. */
.gx-bid{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:30px;margin-top:6px;border-radius:8px;cursor:pointer;font:800 13px/1 inherit;color:#1d1406;background:linear-gradient(#ffe48a,#e0a52e);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.35)}
.gx-bid:hover{filter:brightness(1.08)}
.gx-bid .cic-svg{width:16px;height:16px;flex:none}
.bid-art img,.bid-thumb img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
/* Mercado: Comprar e Lance em cada cartão (20/10 00:07). */
.mx-cta{display:flex;gap:4px;margin-top:6px}
.mx-cta button{all:unset;box-sizing:border-box;flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;height:28px;border-radius:7px;cursor:pointer;font:800 12px/1 inherit;color:#1d1406;background:linear-gradient(#ffe48a,#e0a52e);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.mx-cta .mx-buy{background:linear-gradient(#8fe39a,#3fae55);color:#082b10}
.mx-cta button:hover{filter:brightness(1.08)}
.mx-cta .cic-svg{width:14px;height:14px;flex:none}
/* Níveis da guild (20/10): o que aumentou no nível em destaque; o que só continua igual, apagado. */
.gd-lvr .gd-up{font-style:normal;color:#7fe08f;font-weight:700}
.gd-lvr .gd-same{color:#8f9aab}
/* Ficha do anúncio no celular (20/10 00:37, dono: "ainda ficou meio quebrado dos lados"): a ficha sai da janela do Mercado e abre
por cima de tudo (hud.js, .mk-modal), com fundo próprio e folga de 8 px dos lados. */
.mk-modal .inv-sheet{z-index:120}
.hf.app .mk-modal .mk-sheet{padding:0 8px}
.hf.app .mk-modal .is-card{width:100%;max-width:100%;overflow-x:hidden;background:linear-gradient(180deg,#1d1c1a,#121110)!important;box-shadow:0 0 0 1px rgba(227,194,122,.45),0 -10px 30px rgba(0,0,0,.6)}
.hf.app .mk-modal .mkb{margin:0;border-radius:12px}
.hf.app .mk-modal .is-x{right:8px;top:8px}
/* Cartão de outro jogador no clean (20/10 00:45, dono: "quando clico em cima de alguém não consigo fechar essa janela"): as
missões, o loot e a tarefa ficavam por cima do cartão e tapavam o ×. Com o cartão aberto eles somem, e o × fica por cima. */
.hf.hud2:has(.plcard) :is(.h2q,.h2l,.h2rate),.hf.hud2:has(.plcard) .hf-stage > .domchip{display:none!important}
.hf.hud2 .plcard .pc-x{z-index:5}
/* Celular no clean (20/10 00:46, dono: "loot recente e missões atrapalhando no mobile; mais clean ou um ícone que abre e fecha"):
Missões e Loot viram dois ícones redondos na coluna da direita, embaixo da faixa de avisos. Tocar abre a lista ao lado do
ícone (um de cada vez); tocar de novo, ou no –, fecha. O número dourado é o que já dá para coletar. */
.hf.hud2.app .h2q,.hf.hud2.app .h2l:not(:empty){position:absolute;left:auto;right:calc(8px + var(--sr));width:40px;z-index:31;-webkit-text-stroke:0}
.hf.hud2.app.is-portrait .h2q{top:calc(var(--tcb, 120px) + 10px)}
.hf.hud2.app.is-portrait .h2l:not(:empty){top:calc(var(--tcb, 120px) + 58px)}
.hf.hud2.app.is-landscape .h2q{top:calc(40px + var(--st))}
.hf.hud2.app.is-landscape .h2l:not(:empty){top:calc(88px + var(--st))}
.hf.hud2.app .h2q[data-mode="open"]::before,.hf.hud2.app .h2l[data-mode="open"]::before{display:none}
.hf.hud2.app .h2q .h2q-tab{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;border-radius:50%;border:1px solid rgba(227,194,122,.55);background:rgba(10,11,13,.8);box-shadow:0 2px 8px rgba(0,0,0,.5)}
.hf.hud2.app .h2l .h2q-tab{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;border-radius:50%;border:1px solid rgba(227,194,122,.55);background:rgba(10,11,13,.8);box-shadow:0 2px 8px rgba(0,0,0,.5)}
.hf.hud2.app :is(.h2q,.h2l) .h2q-tab img{width:24px;height:24px;image-rendering:pixelated}
.hf.hud2.app :is(.h2q,.h2l) .h2q-tab :is(span,b){display:none}
.hf.hud2.app :is(.h2q,.h2l) .h2q-tab.on{border-color:#ffd76a;box-shadow:0 0 0 2px rgba(255,215,106,.35),0 2px 8px rgba(0,0,0,.5)}
.h2-bdg{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#ffd76a;color:#1d1406;font:800 11px/18px "HF Sans",system-ui,sans-serif;font-style:normal;text-align:center;box-shadow:0 0 0 2px #0b0a09}
.hf.hud2.app .h2-pan{position:absolute;right:48px;top:0;width:min(250px,calc(100vw - 76px - var(--sl) - var(--sr)));padding:8px 10px 9px;border:1px solid rgba(227,194,122,.35);border-radius:6px;background:rgba(8,9,12,.86);box-shadow:0 6px 20px rgba(0,0,0,.55);-webkit-text-stroke:0;text-shadow:none;font-family:"HF Sans",system-ui,sans-serif}
.hf.hud2.app .h2-pan :is(li,span,b){-webkit-text-stroke:0}
.hf.hud2.app .h2-pan .h2q-h{justify-content:flex-start}
.hf.hud2.app .h2-pan .h2q-h span{margin-right:auto}
.hf.hud2.app .h2l .h2-pan{display:block}
.hf.hud2.app .h2l .h2-pan .h2l-h b{display:inline}
/* A faixa de cima não precisa mais abrir espaço para a lista de missões: só para a coluna dos ícones (deitado). */
.hf.hud2.app .h2q[data-mode="open"] ~ .topcenter,.hf.hud2.app:has(.h2q[data-mode="open"]) .hf-stage > .topcenter{right:calc(8px + var(--sr) + 48px)}
.hf.hud2.app.is-portrait:has(.h2q[data-mode="open"]) .hf-stage > .topcenter{right:calc(8px + var(--sr))!important}
/* Loot recente: o nome do equipamento na cor da raridade (20/10 01:00, PUNISHER). */
.h2l li span[class^="r"]{font-weight:700}
.h2l li span.r0{color:#e8e8e8}.h2l li span.r1{color:#6fd36a}.h2l li span.r2{color:#58a8ff}.h2l li span.r3{color:#c77dff}.h2l li span.r4{color:#ffb640}.h2l li span.r5{color:#ff5a7a}.h2l li span.r6{color:#7ff6ff}
/* Faixa de eventos (20/10 00:56, dono: "muitos eventos não têm banner no jogo, só no chat; no celular está bem no centro, ache um
lugar melhor; pode ter vários ligados ao mesmo tempo"; "desktop também"): bônus do servidor, promoções da Loja, chefe mundial
e portais. Celular no clean: à esquerda, embaixo da faixa de avisos (e da tarefa, quando caçando), um embaixo do outro; com
mais de 2, uma pílula "Eventos N ▾" que abre a lista ali. Computador no clean: no alto, centralizada, embaixo da faixa. */
.evb-c.t-sale{box-shadow:0 0 0 1px #0b0806,0 0 0 2px #ffd76a,0 3px 10px rgba(0,0,0,.45),0 0 12px -2px #ffd76a}
.evb-c.t-boss{box-shadow:0 0 0 1px #0b0806,0 0 0 2px #ff6a5a,0 3px 10px rgba(0,0,0,.45)}
.evb-c.t-boss em{color:#ffb4a8}
.hf.hud2 .evb-c.t-sale{background:linear-gradient(100deg,rgba(66,50,16,.95),rgba(27,25,24,.95))}
.hf.hud2 .evb-c.t-boss{background:linear-gradient(100deg,rgba(70,24,20,.95),rgba(27,25,24,.95))}
.hf.hud2.app.is-portrait .gmbar{left:calc(10px + var(--sl));right:auto;top:calc(var(--tcb, 120px) + 12px);transform:none;align-items:flex-start;max-width:calc(100vw - 76px - var(--sl) - var(--sr))}
.hf.hud2.app.is-portrait:has(.hf-stage > .domchip:not(.safe)) .gmbar{top:calc(var(--tcb, 120px) + 46px)}
.hf.hud2.app.is-portrait .gmbar .evb{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:5px}
.hf.hud2.app.is-portrait .gmbar .evb-c{max-width:100%}
.hf.hud2.app.is-portrait .gmbar .evb-c b{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hf.hud2.app.is-portrait .gmbar .evb-x{align-self:flex-start;width:26px;height:22px;border-radius:11px}
.hf.hud2.app.is-landscape .gmbar{top:calc(var(--st) + 52px)}
.hf.hud2:not(.app) .gmbar{top:118px}
.hf.hud2:not(.app):has(.hf-stage > .domchip:not(.safe)) .gmbar{top:58px} /* 20/10 20:11: era 134px (a contagem ficava em cima); agora ela desce para baixo dos banners */
.hf.hud2:not(.app) .evb{max-width:min(760px,calc(100vw - 640px))}
.hf.hud2:has(.plcard) .gmbar{display:none!important}
/* Mapa atrás: aviso vermelho na faixa (XP 50% aqui · ir para o mapa certo). */
.vc-b.bh-chip{background:linear-gradient(180deg,rgba(74,22,18,.92),rgba(36,12,10,.92))!important;box-shadow:inset 0 0 0 1px #ff8a6a,0 0 12px rgba(255,110,80,.35)!important;color:#ffe2d8!important}
.vc-b.bh-chip small{color:#ffc0b0!important}
/* Poder especial (R) no celular clean (20/10 01:12, dono: "o ícone do R não está no quadrado todo, ajustar"): a moldura de 14 px do
clássico (transparente aqui) encolhia o ícone num cantinho e jogava a bolinha do R para fora. Agora o ícone ocupa o quadrado,
o 0% fica embaixo dele e o R no canto, como nas habilidades 1, 2 e 3. */
.hf.hud2.app .powr{--bw:0px;border:1px solid rgba(227,194,122,.4);border-image:none;border-radius:4px;padding:0;background:rgba(14,14,16,.82);display:grid;place-items:center;box-sizing:border-box}
.hf.hud2.app .powr img{width:72%;height:72%;object-fit:contain;image-rendering:pixelated}
.hf.hud2.app .powr .pw-fill{left:0;right:0;bottom:0;border-radius:0 0 3px 3px}
.hf.hud2.app .powr b{bottom:1px;font-size:10px;-webkit-text-stroke:2px rgba(0,0,0,.85);paint-order:stroke fill}
.hf.hud2.app .powr .key{right:-6px;bottom:-6px}
.hf.hud2.app .powr.full{border-color:#f2c14e}
/* Zerar o Loot recente (20/10 01:00, PUNISHER: "um botão de redefinição seria útil"; o ↺ de texto não aparecia em alguns Windows):
o ícone agora é desenhado (SVG). */
.h2-rst{width:12px;height:12px;display:block;margin:auto}
/* Missões e Loot (ícones) somem com o chat, o menu ou uma janela aberta no celular (20/10 01:22, dono: print do ícone por cima do chat). */
.hf.hud2.app[data-msheet] :is(.h2q,.h2l),.hf.hud2.app:has(.veil:not([hidden])) :is(.h2q,.h2l){display:none!important}
/* Online com ms e FPS no celular clean (20/10 01:24): "66 · 239 ms · 30 FPS" na pílula de cima, cada número na cor (verde, amarelo,
vermelho). */
.hf.hud2.app .presence .netst:not([hidden]){display:inline-flex!important;align-items:center;gap:3px}
.hf.hud2.app .presence .netst > .sep,.hf.hud2.app .presence .netst > [data-ptip="ping"],.hf.hud2.app .presence .nfps{display:inline-flex!important;align-items:center;gap:3px}
.hf.hud2.app .presence .netst b{font-size:10.5px}
/* Loja › Diamantes no celular (20/10 01:23, dono: "melhorar loja no mobile, está muito ruim o layout"): cada pacote numa linha
(arte, quantidade e a etiqueta) e os pagamentos lado a lado embaixo (PIX, Cartão e USDT, o preço em cima e o nome embaixo), em
vez de dois cartões altos por linha com três botões empilhados. */
.hf.app .ds-cards{grid-template-columns:1fr!important;gap:8px}
.hf.app .ds-card{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"art n" "art u" "pay pay";align-items:center;column-gap:12px;row-gap:0;padding:10px 10px 10px 12px;text-align:left}
.hf.app .ds-card .ds-art{grid-area:art;width:52px;height:42px}
.hf.app .ds-card .ds-n{grid-area:n;align-self:end;font-size:21px}
.hf.app .ds-card .ds-u{grid-area:u;align-self:start;font-size:10px}
.hf.app .ds-card :is(.ds-was,.ds-wasp){display:none}
.hf.app .ds-card :is(.ds-tag,.gem-tag){top:12px;left:auto;right:12px;transform:none;max-width:48%}
.hf.app .ds-card .ds-pay{grid-area:pay;flex-direction:row;align-items:stretch;gap:6px;margin-top:10px}
.hf.app .ds-card .ds-buy{flex:1 1 0;min-width:0;height:46px;margin:0;padding:0 4px;flex-direction:column;justify-content:center;gap:1px;font-size:14px;line-height:1.1}
.hf.app .ds-card .ds-buy > :is(svg,img){display:none}
.hf.app .ds-card .ds-buy small{margin:0;font-size:10px;letter-spacing:.04em}
.hf.app .ds-card .ds-buy span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Mercado › Recursos no celular (20/10 01:27, dono: "em Recursos melhorar esses filtros"): os tipos numa linha que corre para o lado
(chips menores) e Moeda e Ordem em duas caixas lado a lado. */
.hf.app .rd-grps{flex-wrap:nowrap!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;gap:6px;padding-bottom:2px;margin-right:-4px}
.hf.app .rd-grps::-webkit-scrollbar{display:none}
.hf.app .rd-grps .ig-sf{flex:none;height:34px;padding:0 11px 0 7px;gap:6px;font-size:13px;white-space:nowrap}
.hf.app .rd-grps .ig-sf img{width:20px;height:20px}
.rd-fl2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px;margin:8px 0 10px}
.rd-fl2 label{display:flex;flex-direction:column;gap:3px;min-width:0}
.rd-fl2 label > span{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#a9a191}
.rd-fl2 select{width:100%;min-width:0;height:36px;padding:0 8px;font-size:13px}
/* Janelas no celular (20/10 01:37 e 01:39, dono: "vamos colocar todas as telas do mobile como 80%; muitas telas estão quebradas";
"ajustar todas as telas e colocar o X de fechar sempre no lado direito superior"): o conteúdo de toda janela fica em 80% (cabe
mais, os botões e textos param de quebrar) e o título ocupa o espaço livre, então o × fica sempre no canto de cima à direita. */
.hf.app .win > :is(.win-head,.win-body){zoom:.9}
.hf.app .win-head > .t-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf.app .win-head > .close{flex:none;margin-left:6px}
.hf.app .win-head > .win-dia{margin-left:0}
/* Loja no celular (20/10 01:35, dono: "está indo para os lados"): a linha de abas corria para fora e empurrava a janela inteira
para o lado; agora ela tem a largura da janela e corre só por dentro. */
.hf.app .lj2-cats{flex:0 0 auto;width:calc(100% + 24px);min-width:0;max-width:none}
.hf.app .win-body{overflow-x:hidden}
/* Janelas no celular clean saem de baixo (20/10 01:40, dono: "vamos colocar as páginas saindo de baixo, pois em todos os prints tem
espaço embaixo no footer"): a janela vai até a borda de baixo (o espaço da barra do iPhone fica dentro dela) e sobe ao abrir. */
.hf.hud2.app .veil{bottom:0}
.hf.hud2.app .veil:not([data-win="offline"]):not([data-win="nome"]):not([data-win="perfil"]):not([data-win="votar"]):not([data-win="votou"]):not([data-win="instalar"]):not([data-win="renascer"]):not([data-win="diario"]) .win{padding-bottom:var(--sb);animation:h2Up .26s cubic-bezier(.2,.9,.3,1)}
@keyframes h2Up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.hf.hud2.app .win{animation:none!important}}
/* Pacote de Iniciante: os pagamentos lado a lado, como nos pacotes. */
.hf.app .ds-start .ds-pay{flex-direction:row;align-items:stretch;gap:6px}
.hf.app .ds-start .ds-buy{flex:1 1 0;min-width:0;height:46px;margin:0;padding:0 4px;flex-direction:column;justify-content:center;gap:1px;font-size:14px;line-height:1.1}
.hf.app .ds-start .ds-buy > :is(svg,img){display:none}
.hf.app .ds-start .ds-buy small{margin:0;font-size:10px}
/* Janela como folha do celular (20/10 01:50, dono: "não quero a página até lá em cima, 100% de altura; quero mais baixa um pouco, e no
topo aquele item que você pega e arrasta para baixo para fechar, tipo nativo"): no clean, a janela ocupa 80% da altura, presa
embaixo, com cantos arredondados, a alça no topo e o jogo escurecido em cima (tocar ali também fecha). As janelinhas centrais
(perfil, nome, votar…) continuam como estavam. */
.win-grab{display:none}
.hf.hud2.app .veil:not([data-win="offline"]):not([data-win="nome"]):not([data-win="perfil"]):not([data-win="votar"]):not([data-win="votou"]):not([data-win="instalar"]):not([data-win="renascer"]):not([data-win="diario"]){background:rgba(0,0,0,.5)}
.hf.hud2.app .veil:not([data-win="offline"]):not([data-win="nome"]):not([data-win="perfil"]):not([data-win="votar"]):not([data-win="votou"]):not([data-win="instalar"]):not([data-win="renascer"]):not([data-win="diario"]) .win{position:absolute;left:0;right:0;bottom:0;top:auto;height:80%;padding-top:16px;border-radius:16px 16px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.6),inset 0 1px 0 rgba(227,194,122,.35)}
.hf.hud2.app .win-grab{display:block;position:absolute;left:0;right:0;top:0;height:24px;z-index:3;touch-action:none;cursor:grab}
.hf.hud2.app .win-grab::before{content:"";position:absolute;left:50%;top:6px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:rgba(236,230,214,.4)}
.hf.hud2.app .win-head{touch-action:none}
/* Igual ao exemplo do dono (print do app do Claude, 01:51: folha com cantos bem redondos, a alça clara no topo para segurar e
abaixar, e o × redondo): alça maior e mais visível, cantos de 22 px e o × num círculo. */
.hf.hud2.app .veil:not([data-win="offline"]):not([data-win="nome"]):not([data-win="perfil"]):not([data-win="votar"]):not([data-win="votou"]):not([data-win="instalar"]):not([data-win="renascer"]):not([data-win="diario"]) .win{border-radius:22px 22px 0 0;padding-top:22px}
.hf.hud2.app .win-grab{height:30px}
.hf.hud2.app .win-grab::before{top:9px;width:56px;height:5px;margin-left:-28px;background:rgba(236,230,214,.55)}
.hf.hud2.app .win-head > .close{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);box-shadow:none;font-size:18px}
/* VIP, Streamer e Passe com cor (20/10 01:59, dono: "ícone de VIP, Streamer e Passe deixar colorido, mais destaque"): o ícone na cor
de verdade (estava cinza e apagado) e cada botão com a borda e um brilho da sua cor: VIP dourado, Streamer roxo, Passe vermelho. */
.hf.hud2 .topcenter :is(.h2p-vip,.h2p-st,.ps-chip) img{filter:drop-shadow(0 0 4px rgba(0,0,0,.6))!important;opacity:1!important}
.hf.hud2 .topcenter .vc-b.h2p-vip{box-shadow:inset 0 0 0 1px #e8b84a,0 0 10px rgba(232,184,74,.35)!important;background:linear-gradient(180deg,rgba(70,52,18,.9),rgba(24,19,10,.9))!important;color:#ffe7a8!important}
.hf.hud2 .topcenter .vc-b.h2p-st{box-shadow:inset 0 0 0 1px #a970ff,0 0 10px rgba(169,112,255,.35)!important;background:linear-gradient(180deg,rgba(52,30,84,.9),rgba(20,14,30,.9))!important;color:#e6d6ff!important}
.hf.hud2 .topcenter .vc-b.ps-chip{box-shadow:inset 0 0 0 1px #ff6b5e,0 0 10px rgba(255,107,94,.35)!important;background:linear-gradient(180deg,rgba(84,26,22,.9),rgba(30,12,10,.9))!important;color:#ffe2dc!important}
.hf.hud2 .topcenter .vc-b:is(.h2p-vip,.h2p-st,.ps-chip) small{color:inherit!important;opacity:.8}
/* Desktop igual, só que menor (20/10 02:00, dono: "podemos deixar igual no desktop, só que menor"): VIP, Streamer e Passe coloridos
e mais baixos, e o online com ms e FPS (ligado de começo no clean) numa pílula menor. */
.hf.hud2:not(.app) .topcenter .vc-b:is(.h2p-vip,.h2p-st,.ps-chip){height:32px;padding:0 11px 0 7px;gap:6px}
.hf.hud2:not(.app) .topcenter .vc-b:is(.h2p-vip,.h2p-st,.ps-chip) img{width:22px;height:22px}
.hf.hud2:not(.app) .topcenter .vc-b:is(.h2p-vip,.h2p-st,.ps-chip) b{font-size:12.5px}
.hf.hud2:not(.app) .topcenter .vc-b:is(.h2p-vip,.h2p-st,.ps-chip) small{font-size:10.5px}
.hf.hud2:not(.app) .hf-stage > .presence{padding:2px 8px;font-size:11px}
/* Gemas, Diamantes e Cristais com cara de botão (20/10 02:02): no computador continua só ícone e número (o nome e o + ficam
escondidos); no celular, botão com borda na cor de cada moeda, o número, o nome embaixo e um + redondo. */
.h2cur button > span{display:flex;flex-direction:column;line-height:1}
.h2cur small,.h2cur i{display:none}
.hf.hud2.app .h2cur{gap:6px;margin-top:6px}
.hf.hud2.app .h2cur button{gap:5px;height:34px;padding:0 6px 0 6px;border-radius:9px;background:rgba(10,11,13,.78);box-shadow:inset 0 0 0 1px var(--cc,rgba(227,194,122,.5)),0 2px 6px rgba(0,0,0,.45)}
.hf.hud2.app .h2cur .h2c-gz{--cc:#e86fd8}.hf.hud2.app .h2cur .h2c-dm{--cc:#58c8ff}.hf.hud2.app .h2cur .h2c-cr{--cc:#7d8cff}
.hf.hud2.app .h2cur img{width:20px;height:20px}
.hf.hud2.app .h2cur b{font-size:13px;line-height:1.05}
.hf.hud2.app .h2cur small{display:block;font-size:9.5px;font-weight:700;color:#bdb5a4;letter-spacing:.02em;margin-top:1px}
.hf.hud2.app .h2cur i{display:grid;place-items:center;width:16px;height:16px;margin-left:2px;border-radius:50%;background:var(--cc);color:#0b0a09;font:900 12px/1 "HF Sans",system-ui,sans-serif;font-style:normal}
.hf.hud2.app .h2cur button:active{transform:scale(.96)}
.hf.hud2.app.is-portrait .hf-stage > .topcenter{top:calc(110px + var(--st))}
/* Todas as janelas no mesmo padrão (20/10 02:04, dono, print do Perfil: "essa não está padrão igual às outras; deixar todas iguais,
revise todas as páginas"): Perfil, Nome, Votar, Ganho offline, Instalar, Renascer e Diário também viram a folha de baixo (sem
a moldura azul e dourada do meio da tela). As curtas ficam só da altura do conteúdo (até 85%); o Perfil fica com 80%. */
.hf.hud2.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]){display:block;padding:0;background:rgba(0,0,0,.5);animation:none}
.hf.hud2.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .win{position:absolute;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;height:auto;max-height:85%;margin:0;padding:22px var(--sr) var(--sb) var(--sl);border:0;border-image:none;border-radius:22px 22px 0 0;background:linear-gradient(#211f1e,#121110 220px);box-shadow:0 -10px 30px rgba(0,0,0,.6),inset 0 1px 0 rgba(227,194,122,.35);animation:h2Up .26s cubic-bezier(.2,.9,.3,1)}
.hf.hud2.app .veil[data-win="perfil"] .win{height:80%}
.hf.hud2.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .win.still{animation:none}
.hf.hud2.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .win-body{padding-bottom:12px}
.hf.hud2.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .win-head{height:54px;min-height:0;margin:0;padding:0 8px 0 12px;border-bottom:1px solid rgba(214,170,90,.35);background:rgba(0,0,0,.18)}
.hf.hud2.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .win-head img{width:30px;height:30px}
.hf.hud2.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .win-head .t-title{font-size:inherit}
.hf.hud2.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .win-head .close{width:40px;height:40px}
.hf.hud2.app .veil:is([data-win="offline"],[data-win="nome"],[data-win="perfil"],[data-win="votar"],[data-win="votou"],[data-win="instalar"],[data-win="renascer"],[data-win="diario"]) .win-body{padding:12px 12px 20px}
/* 02:05 (dono: "o botão ficou muito grande e ficou com dois ícones; pode ser menor e precisa só do ícone do item"): sem o +, mais baixo. */
.hf.hud2.app .h2cur i{display:none}
.hf.hud2.app .h2cur{gap:5px;margin-top:5px}
.hf.hud2.app .h2cur button{height:28px;padding:0 8px 0 5px;gap:4px;border-radius:7px}
.hf.hud2.app .h2cur img{width:16px;height:16px}
.hf.hud2.app .h2cur b{font-size:11.5px}
.hf.hud2.app .h2cur small{font-size:8.5px;margin-top:0}
.hf.hud2.app.is-portrait .hf-stage > .topcenter{top:calc(102px + var(--st))}
/* Janelas avulsas no mesmo padrão de folha (20/10 02:11, dono, print do "Você é VIP": "ainda tem página errada"): VIP, Dar lance,
Visual da tela, Streamer e o peixe também sobem de baixo, ocupam a largura, cantos redondos em cima, alça para puxar e fechar. */
.hf.hud2.app :is(.vip-pop,.bid-modal,.hp-pop,.cfish-modal){place-items:end stretch;align-content:end;padding:0;background:rgba(0,0,0,.5)}
.hf.hud2.app :is(.vip-pop,.bid-modal,.hp-pop,.cfish-modal) > :first-child{position:relative;width:auto;max-width:none;max-height:85vh;margin:0;border-radius:22px 22px 0 0;padding-top:24px;padding-bottom:calc(16px + var(--sb));box-shadow:0 -10px 30px rgba(0,0,0,.6),inset 0 1px 0 rgba(227,194,122,.35);animation:h2Up .26s cubic-bezier(.2,.9,.3,1)}
.hf.hud2.app :is(.vip-pop,.bid-modal,.hp-pop,.cfish-modal) > :first-child::after{content:"";position:absolute;left:50%;top:9px;width:56px;height:5px;margin-left:-28px;border-radius:3px;background:rgba(236,230,214,.55);pointer-events:none}
.hf.hud2.app :is(.vip-pop,.bid-modal,.hp-pop,.cfish-modal) :is(.vp-x,.bid-x,.cfish-x){top:12px;right:12px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
/* Insígnias no lugar das molduras (20/10, dono: "essas molduras estão horríveis; melhor um símbolo, tipo uma insígnia"): a borda
colorida e o brilho em volta do retrato saem; no canto de baixo do retrato fica a insígnia escolhida (ins_.png, feita por
tools/insignias/gerar.py). Gerado a partir de tools/insignias/lista.json. */
:is(.fr-ouro,.fr-gelo,.fr-sombra,.fr-divina,.fr-alpha,.fr-fundador,.fr-arena,.fr-recrutador,.fr-guilda,.fr-campeao){box-shadow:none!important;animation:none!important;border-radius:inherit}
:is(.fr-ouro,.fr-gelo,.fr-sombra,.fr-divina,.fr-alpha,.fr-fundador,.fr-arena,.fr-recrutador,.fr-guilda,.fr-campeao)::before{display:none!important}
:is(.fr-campeao,.fr-alpha,.fr-fundador,.fr-guilda,.fr-arena,.fr-recrutador,.fr-ouro,.fr-gelo,.fr-sombra,.fr-divina,.fr-caca1,.fr-caca2,.fr-caca3,.fr-caca4,.fr-chefe1,.fr-chefe2,.fr-chefe3,.fr-chefe4,.fr-nivel1,.fr-nivel2,.fr-nivel3,.fr-nivel4,.fr-renasce1,.fr-renasce2,.fr-renasce3,.fr-duelo1,.fr-duelo2,.fr-duelo3,.fr-arena1,.fr-arena2,.fr-arena3,.fr-rank1,.fr-rank2,.fr-mapa1,.fr-mapa2,.fr-mapa3,.fr-pesca1,.fr-pesca2,.fr-pesca3,.fr-pets1,.fr-pets2,.fr-petlv,.fr-amigos1,.fr-amigos2,.fr-guild1,.fr-dias1,.fr-dias2,.fr-dias3,.fr-missao1,.fr-missao2,.fr-masmorra1,.fr-masmorra2,.fr-forja10,.fr-forja15,.fr-reliquia,.fr-vipfund,.fr-colecionador){position:relative;isolation:isolate}
:is(.fr-campeao,.fr-alpha,.fr-fundador,.fr-guilda,.fr-arena,.fr-recrutador,.fr-ouro,.fr-gelo,.fr-sombra,.fr-divina,.fr-caca1,.fr-caca2,.fr-caca3,.fr-caca4,.fr-chefe1,.fr-chefe2,.fr-chefe3,.fr-chefe4,.fr-nivel1,.fr-nivel2,.fr-nivel3,.fr-nivel4,.fr-renasce1,.fr-renasce2,.fr-renasce3,.fr-duelo1,.fr-duelo2,.fr-duelo3,.fr-arena1,.fr-arena2,.fr-arena3,.fr-rank1,.fr-rank2,.fr-mapa1,.fr-mapa2,.fr-mapa3,.fr-pesca1,.fr-pesca2,.fr-pesca3,.fr-pets1,.fr-pets2,.fr-petlv,.fr-amigos1,.fr-amigos2,.fr-guild1,.fr-dias1,.fr-dias2,.fr-dias3,.fr-missao1,.fr-missao2,.fr-masmorra1,.fr-masmorra2,.fr-forja10,.fr-forja15,.fr-reliquia,.fr-vipfund,.fr-colecionador)::after{content:"";position:absolute;inset:auto -7px -7px auto;width:min(46%,30px);height:auto;aspect-ratio:1;padding:0;margin:0;border:0;border-radius:0;background:none center/contain no-repeat;box-shadow:none;mask:none;-webkit-mask:none;animation:none;opacity:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8));image-rendering:pixelated;pointer-events:none;z-index:4}
.fr-campeao::after{background-image:url(assets/ins_campeao.png)}
.fr-alpha::after{background-image:url(assets/ins_alpha.png)}
.fr-fundador::after{background-image:url(assets/ins_fundador.png)}
.fr-guilda::after{background-image:url(assets/ins_guilda.png)}
.fr-arena::after{background-image:url(assets/ins_arena.png)}
.fr-recrutador::after{background-image:url(assets/ins_recrutador.png)}
.fr-ouro::after{background-image:url(assets/ins_ouro.png)}
.fr-gelo::after{background-image:url(assets/ins_gelo.png)}
.fr-sombra::after{background-image:url(assets/ins_sombra.png)}
.fr-divina::after{background-image:url(assets/ins_divina.png)}
.fr-caca1::after{background-image:url(assets/ins_caca1.png)}
.fr-caca2::after{background-image:url(assets/ins_caca2.png)}
.fr-caca3::after{background-image:url(assets/ins_caca3.png)}
.fr-caca4::after{background-image:url(assets/ins_caca4.png)}
.fr-chefe1::after{background-image:url(assets/ins_chefe1.png)}
.fr-chefe2::after{background-image:url(assets/ins_chefe2.png)}
.fr-chefe3::after{background-image:url(assets/ins_chefe3.png)}
.fr-chefe4::after{background-image:url(assets/ins_chefe4.png)}
.fr-nivel1::after{background-image:url(assets/ins_nivel1.png)}
.fr-nivel2::after{background-image:url(assets/ins_nivel2.png)}
.fr-nivel3::after{background-image:url(assets/ins_nivel3.png)}
.fr-nivel4::after{background-image:url(assets/ins_nivel4.png)}
.fr-renasce1::after{background-image:url(assets/ins_renasce1.png)}
.fr-renasce2::after{background-image:url(assets/ins_renasce2.png)}
.fr-renasce3::after{background-image:url(assets/ins_renasce3.png)}
.fr-duelo1::after{background-image:url(assets/ins_duelo1.png)}
.fr-duelo2::after{background-image:url(assets/ins_duelo2.png)}
.fr-duelo3::after{background-image:url(assets/ins_duelo3.png)}
.fr-arena1::after{background-image:url(assets/ins_arena1.png)}
.fr-arena2::after{background-image:url(assets/ins_arena2.png)}
.fr-arena3::after{background-image:url(assets/ins_arena3.png)}
.fr-rank1::after{background-image:url(assets/ins_rank1.png)}
.fr-rank2::after{background-image:url(assets/ins_rank2.png)}
.fr-mapa1::after{background-image:url(assets/ins_mapa1.png)}
.fr-mapa2::after{background-image:url(assets/ins_mapa2.png)}
.fr-mapa3::after{background-image:url(assets/ins_mapa3.png)}
.fr-pesca1::after{background-image:url(assets/ins_pesca1.png)}
.fr-pesca2::after{background-image:url(assets/ins_pesca2.png)}
.fr-pesca3::after{background-image:url(assets/ins_pesca3.png)}
.fr-pets1::after{background-image:url(assets/ins_pets1.png)}
.fr-pets2::after{background-image:url(assets/ins_pets2.png)}
.fr-petlv::after{background-image:url(assets/ins_petlv.png)}
.fr-amigos1::after{background-image:url(assets/ins_amigos1.png)}
.fr-amigos2::after{background-image:url(assets/ins_amigos2.png)}
.fr-guild1::after{background-image:url(assets/ins_guild1.png)}
.fr-dias1::after{background-image:url(assets/ins_dias1.png)}
.fr-dias2::after{background-image:url(assets/ins_dias2.png)}
.fr-dias3::after{background-image:url(assets/ins_dias3.png)}
.fr-missao1::after{background-image:url(assets/ins_missao1.png)}
.fr-missao2::after{background-image:url(assets/ins_missao2.png)}
.fr-masmorra1::after{background-image:url(assets/ins_masmorra1.png)}
.fr-masmorra2::after{background-image:url(assets/ins_masmorra2.png)}
.fr-forja10::after{background-image:url(assets/ins_forja10.png)}
.fr-forja15::after{background-image:url(assets/ins_forja15.png)}
.fr-reliquia::after{background-image:url(assets/ins_reliquia.png)}
.fr-vipfund::after{background-image:url(assets/ins_vipfund.png)}
.fr-colecionador::after{background-image:url(assets/ins_colecionador.png)}
/* Códex de insígnias (20/10): o topo com a insígnia em uso e quantas tem; cada família numa seção, as insígnias numa grade. As que
ainda não tem ficam apagadas e em cinza, com a meta e a barra do progresso. */
.cxi{display:flex;flex-direction:column;gap:14px}
.cxi-top{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px;border-radius:12px;background:linear-gradient(135deg,rgba(255,207,74,.12),rgba(20,19,18,.9) 60%);box-shadow:inset 0 0 0 1px rgba(227,194,122,.35)}
.cxi-big{display:grid;place-items:center;width:72px;height:72px}
.cxi-big img{width:72px;height:72px;image-rendering:pixelated;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.cxi-big i{font-style:normal;font-size:30px;color:#6d665b}
.cxi-now{display:flex;flex-direction:column;gap:2px;min-width:0}
.cxi-now b{font-size:16px;color:#ffe7a8}
.cxi-now small{color:#b9b2a4;font-size:12px}
.cxi-now .lnk{align-self:flex-start;margin-top:4px;font-size:12px}
.cxi-cnt{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:84px}
.cxi-cnt b{font-size:22px;color:#fff}.cxi-cnt b small{font-size:13px;color:#a9a191}
.cxi-cnt span{font-size:11px;color:#a9a191;text-transform:uppercase;letter-spacing:.08em}
.cxi-bar,.cxi-pb{position:relative;display:block;width:84px;height:5px;border-radius:3px;background:rgba(0,0,0,.5);overflow:hidden}
.cxi-bar > i,.cxi-pb > i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#e3c27a,#ffd76a)}
.cxi-fam{display:flex;flex-direction:column;gap:8px}
.cxi-fh{display:flex;align-items:baseline;gap:8px;padding-bottom:4px;border-bottom:1px solid rgba(227,194,122,.25)}
.cxi-fh b{font:700 13px/1 "HF2 Title",Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:#e3c27a}
.cxi-fh span{font-size:12px;color:#a9a191}
.cxi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:8px}
.cxi-it{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px 9px;border-radius:10px;text-align:center;background:rgba(14,13,12,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);cursor:default}
.cxi-it img{width:52px;height:52px;image-rendering:pixelated;filter:grayscale(1) brightness(.45);opacity:.75}
.cxi-it b{font-size:12.5px;line-height:1.15;color:#8f887b}
.cxi-it .cxi-how{font-size:10.5px;line-height:1.2;color:#7d776c}
.cxi-it .cxi-pb{width:80%;margin-top:3px}
.cxi-it .cxi-n{font-size:10px;color:#a9a191}
.cxi-it.have{cursor:pointer;background:rgba(30,28,26,.9);box-shadow:inset 0 0 0 1px rgba(227,194,122,.35)}
.cxi-it.have img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));opacity:1}
.cxi-it.have b{color:#f4efe4}
.cxi-it.have .cxi-how{color:#b9b2a4}
.cxi-it.have:hover{box-shadow:inset 0 0 0 1px #e3c27a}
.cxi-it.on{box-shadow:inset 0 0 0 2px #ffd76a,0 0 14px rgba(255,215,106,.3)}
.cxi-it em{position:absolute;top:6px;right:8px;font-style:normal;font-weight:900;color:#ffd76a}
.hf.app .cxi-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.hf.app .cxi-top{grid-template-columns:56px minmax(0,1fr);gap:10px}
.hf.app .cxi-big,.hf.app .cxi-big img{width:56px;height:56px}
.hf.app .cxi-cnt{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}
.hf.app .cxi-cnt .cxi-bar{flex:1}
/* Insígnia no chat (ao lado do nome) e na Mochila › Visual. */
.cins{width:18px;height:18px;margin:0 3px -4px 0;image-rendering:pixelated;cursor:pointer;vertical-align:baseline}
.vz-art .vz-ins{width:64px;height:64px;image-rendering:pixelated}
.mv-img.mv-ins{image-rendering:pixelated}
.mv-codex{margin-top:10px;width:100%}
.cxi-goal{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:linear-gradient(135deg,rgba(255,150,220,.12),rgba(20,19,18,.9) 60%);box-shadow:inset 0 0 0 1px rgba(255,150,220,.35)}
.cxi-goal img{width:44px;height:44px;image-rendering:pixelated;flex:none}
.cxi-goal:not(.ok) img{filter:grayscale(.6) brightness(.8)}
.cxi-goal b{display:block;font-size:14px;color:#ffd7f2}
.cxi-goal small{font-size:12px;color:#c9b8c4}
.cxi-ft{margin-left:auto;font-size:11px;color:#a9a191}
.cxi-ft.ok{color:#7fe39a;font-weight:700}
.cxi-pz{font-size:10px;color:#d9b86a;margin-top:2px}
/* Insígnia de alguém no chat (20/10 08:55): a insígnia grande, como se ganha e o resumo do jogador. */
.ip-card{width:min(360px,100%);padding:18px 16px 16px;gap:14px;text-align:center}
.ip-top{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px 12px;border-radius:12px;background:radial-gradient(ellipse at 50% 30%,rgba(255,207,74,.18),rgba(20,19,18,.0) 70%)}
.ip-top.t3{background:radial-gradient(ellipse at 50% 30%,rgba(168,96,255,.28),rgba(20,19,18,0) 70%)}
.ip-big{width:96px;height:96px;image-rendering:pixelated;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.ip-top b{font-size:18px;color:#ffe7a8}
.ip-top small{font-size:12px;color:#b9b2a4;text-transform:uppercase;letter-spacing:.08em}
.ip-top p{margin:4px 0 0;font-size:13px;color:#ece6d6}
.ip-have,.ip-not{font-style:normal;font-size:12px;margin-top:4px;padding:2px 10px;border-radius:10px;background:rgba(127,227,154,.15);color:#7fe39a}
.ip-not{background:rgba(255,255,255,.06);color:#cfc6b2}
.ip-pl{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-align:left;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ip-av{width:48px;height:48px;flex:none;border-radius:10px;overflow:hidden;background:#0d0c0b}
.ip-av img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.ip-pl b{display:block;font-size:15px;color:#f4efe4}
.ip-pl small{display:block;font-size:12px;color:#b9b2a4}
.ip-vip{font-style:normal;color:#ffd76a;font-weight:700}.ip-on{font-style:normal;color:#7fe39a}
.ip-btns{display:flex;gap:8px}.ip-btns .buy{flex:1}
.hf.hud2.app .ins-pop > .ip-card{text-align:center}
/* Códex, layout novo (20/10 09:19, dono: "melhorar o layout"): cabeçalho numa linha (insígnia em uso, total e Códex completo),
famílias à esquerda e as insígnias da família à direita, com o filtro Todas, Tenho e Faltam. No celular as famílias viram abas. */
.cx2{display:flex;flex-direction:column;gap:12px;min-height:0}
.cx2-head{display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(0,1.4fr);gap:10px}
.cx2-head > section{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:rgba(20,19,18,.85);box-shadow:inset 0 0 0 1px rgba(227,194,122,.28);min-width:0}
.cx2-now{background:linear-gradient(135deg,rgba(255,207,74,.14),rgba(20,19,18,.9) 65%)!important}
.cx2-big{display:grid;place-items:center;width:58px;height:58px;flex:none}
.cx2-big img{width:58px;height:58px;image-rendering:pixelated;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.cx2-big i{font-style:normal;font-size:26px;color:#6d665b}
.cx2-now > div,.cx2-goal > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.cx2-now small{font-size:11px;color:#a9a191;text-transform:uppercase;letter-spacing:.08em}
.cx2-now b{font-size:16px;color:#ffe7a8}
.cx2-now span,.cx2-goal span{font-size:12px;color:#b9b2a4;line-height:1.3}
.cx2-now .lnk{align-self:flex-start;font-size:12px;margin-top:2px}
.cx2-stat{flex-direction:column;justify-content:center;align-items:center!important;gap:3px!important;min-width:120px}
.cx2-stat b{font-size:26px;color:#fff;line-height:1}.cx2-stat b small{font-size:14px;color:#a9a191}
.cx2-stat span{font-size:11px;color:#a9a191;text-transform:uppercase;letter-spacing:.1em}
.cx2-goal{background:linear-gradient(135deg,rgba(255,150,220,.12),rgba(20,19,18,.9) 60%)!important;box-shadow:inset 0 0 0 1px rgba(255,150,220,.3)!important}
.cx2-goal img{width:44px;height:44px;flex:none;image-rendering:pixelated}
.cx2-goal:not(.ok) img{filter:grayscale(.5) brightness(.85)}
.cx2-goal b{font-size:14px;color:#ffd7f2}
.cx2-goal .cxi-bar{width:100%;margin-top:4px}
.cx2-body{display:grid;grid-template-columns:230px minmax(0,1fr);gap:12px;min-height:0;align-items:start}
.cx2-nav{position:sticky;top:0;display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:12px;background:rgba(14,13,12,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.cx2-f{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;color:#cfc6b2}
.cx2-f img{width:28px;height:28px;flex:none;image-rendering:pixelated}
.cx2-f > span{display:flex;flex-direction:column;min-width:0;flex:1}
.cx2-f b{font-size:13px;font-weight:700;color:#ece6d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx2-f small{font-size:10.5px;color:#8f887b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx2-f.done small{color:#7fe39a}
.cx2-f em{font-style:normal;font-size:11.5px;color:#a9a191;padding:1px 7px;border-radius:9px;background:rgba(255,255,255,.06)}
.cx2-f:hover{background:rgba(255,255,255,.05)}
.cx2-f.on{background:linear-gradient(90deg,rgba(255,207,74,.18),rgba(255,207,74,.04));box-shadow:inset 0 0 0 1px rgba(255,215,106,.45)}
.cx2-f.on b{color:#ffe7a8}
.cx2-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.cx2-mh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cx2-mh .t-title{font-size:16px;color:#e3c27a}
.cx2-ft{font-size:12px;color:#a9a191;padding:2px 10px;border-radius:10px;background:rgba(255,255,255,.05)}
.cx2-ft.ok{color:#7fe39a;background:rgba(127,227,154,.12)}
.cx2-show{display:flex;gap:4px;margin-left:auto}
.cx2-show button{all:unset;cursor:pointer;padding:4px 10px;border-radius:14px;font-size:12px;font-weight:700;color:#b9b2a4;background:rgba(255,255,255,.05)}
.cx2-show button em{font-style:normal;opacity:.7;margin-left:3px}
.cx2-show button.on{color:#1d1406;background:#e3c27a}
.cx2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.cx2-it{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:12px;min-height:92px;padding:10px 12px;border-radius:12px;background:rgba(14,13,12,.75);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.cx2-art{position:relative;flex:none;width:60px;height:60px}
.cx2-art img{width:60px;height:60px;image-rendering:pixelated;filter:grayscale(1) brightness(.5);opacity:.8}
.cx2-lock{position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;background:#1b1918 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23a9a191' d='M5 7V5a3 3 0 0 1 6 0v2h1v7H4V7zm1.5 0h3V5a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center/11px no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.cx2-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.cx2-tier{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7d776c}
.cx2-it.t0 .cx2-tier{color:#c47a3a}.cx2-it.t1 .cx2-tier{color:#b0bccc}.cx2-it.t2 .cx2-tier{color:#f0ba32}.cx2-it.t3 .cx2-tier{color:#b77dff}
.cx2-tx b{font-size:14px;line-height:1.2;color:#a9a191}
.cx2-how{font-size:11.5px;line-height:1.3;color:#8f887b}
.cx2-st{font-size:11.5px;color:#b9b2a4}.cx2-st.on{color:#ffd76a;font-weight:700}
.cx2-pg{display:flex;align-items:center;gap:6px;margin-top:3px}
.cx2-pg .cxi-pb{flex:1;width:auto}
.cx2-pg small{font-size:10.5px;color:#a9a191;white-space:nowrap}
.cx2-pz{font-size:10.5px;color:#d9b86a;margin-top:2px}
.cx2-it.have{cursor:pointer;background:rgba(30,28,26,.95);box-shadow:inset 0 0 0 1px rgba(227,194,122,.32)}
.cx2-it.have .cx2-art img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));opacity:1}
.cx2-it.have b{color:#f4efe4}
.cx2-it.have:hover{box-shadow:inset 0 0 0 1px #e3c27a;background:rgba(38,35,32,.95)}
.cx2-it.on{box-shadow:inset 0 0 0 2px #ffd76a,0 0 14px rgba(255,215,106,.25)}
.cx2-empty{padding:20px;text-align:center}
@media (max-width:1100px){.cx2-head{grid-template-columns:minmax(0,1fr) auto}.cx2-goal{grid-column:1/-1}}
/* Celular: cabeçalho empilhado, famílias numa linha de abas que corre para o lado, insígnias em uma coluna. */
.hf.app .cx2-head{grid-template-columns:minmax(0,1fr) auto;gap:8px}
.hf.app .cx2-goal{grid-column:1/-1}
.hf.app .cx2-head > section{padding:8px 10px;gap:10px}
.hf.app .cx2-big,.hf.app .cx2-big img{width:46px;height:46px}
.hf.app .cx2-now span{display:none}
.hf.app .cx2-stat{min-width:0}
.hf.app .cx2-body{grid-template-columns:minmax(0,1fr)}
.hf.app .cx2-nav{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:4px;gap:4px}
.hf.app .cx2-nav::-webkit-scrollbar{display:none}
.hf.app .cx2-f{flex:none;padding:5px 8px}
.hf.app .cx2-f small{display:none}
.hf.app .cx2-grid{grid-template-columns:minmax(0,1fr)}
.hf.app .cx2-show{margin-left:0}
.hf.app .cx2-it{min-height:0;padding:8px 10px}.hf.app .cx2-art,.hf.app .cx2-art img{width:50px;height:50px}
/* Desenvolvedor (20/10 09:20, dono: "um menu Desenvolvedor para fazer o que faço no GM, numa tela melhor, com as thumbs de todos os
itens certinho"): abas no topo; Itens com quadros maiores e a arte grande; Jogadores com os comandos em cartões; Mapas em grade. */
.dv{display:flex;flex-direction:column;gap:12px;min-height:0}
.dv-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.dv-tabs::-webkit-scrollbar{display:none}
.dv-tab{all:unset;box-sizing:border-box;flex:none;display:flex;align-items:center;gap:7px;height:38px;padding:0 14px 0 9px;border-radius:19px;cursor:pointer;font-weight:700;font-size:13px;color:#cfc6b2;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.dv-tab img{width:22px;height:22px;image-rendering:pixelated}
.dv-tab.on{color:#1d1406;background:linear-gradient(#ffe48a,#e0a52e);box-shadow:none}
.dv-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.dv-card{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:rgba(20,19,18,.85);box-shadow:inset 0 0 0 1px rgba(227,194,122,.25)}
.dv-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.dv-grow{flex:1 1 220px;min-width:0}
.dv-min{width:110px}
.dv-quick{display:flex;gap:6px;flex-wrap:wrap}
.dv-acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.dv-act{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;cursor:pointer;background:rgba(30,28,26,.95);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.dv-act img{width:32px;height:32px;flex:none;image-rendering:pixelated}
.dv-act span{display:flex;flex-direction:column;gap:2px;min-width:0}
.dv-act b{font-size:14px;color:#f4efe4}
.dv-act small{font-size:11.5px;color:#a9a191;line-height:1.3}
.dv-act:hover{box-shadow:inset 0 0 0 1px #e3c27a}
.dv-act.danger{box-shadow:inset 0 0 0 1px rgba(255,107,94,.35)}
.dv-act.danger b{color:#ffb4a8}
.dv-act.sure{background:rgba(90,24,20,.9);box-shadow:inset 0 0 0 2px #ff6b5e}
.dv-act[disabled]{opacity:.5;cursor:default}
.dv-out{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:10px;background:rgba(10,10,12,.85);box-shadow:inset 3px 0 0 #a9a191}
.dv-out.ok{box-shadow:inset 3px 0 0 #7fe39a}.dv-out.bad{box-shadow:inset 3px 0 0 #ff6b5e}
.dv-out code{font-size:11.5px;color:#a9a191}
.dv-out b{font-size:13.5px;color:#f4efe4;font-weight:600}
.dv-out pre{margin:4px 0 0;max-height:220px;overflow:auto;font:12px/1.4 ui-monospace,Consolas,monospace;color:#cfc6b2;white-space:pre-wrap}
.dv-maps{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.dv-map{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:12px;background:rgba(30,28,26,.95);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.dv-map.here{box-shadow:inset 0 0 0 2px #7fe39a}
.dv-mk{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#e3c27a}
.dv-map b{font-size:14px;color:#f4efe4}.dv-map small{font-size:11px;color:#8f887b}
.dv-mb{display:flex;gap:6px;margin-top:6px}.dv-mb em{font-style:normal;font-size:12px;color:#7fe39a}
.dv-cmds{display:flex;flex-direction:column;gap:6px}
.dv-c{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:8px 12px;border-radius:10px;cursor:pointer;background:rgba(30,28,26,.95)}
.dv-c code{font-size:12.5px;color:#ffe7a8}.dv-c small{grid-column:1;font-size:11.5px;color:#a9a191}.dv-c em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-size:10px;font-weight:800;color:#ff8a6a}
.dv-c:hover{box-shadow:inset 0 0 0 1px #e3c27a}
/* Itens: quadros maiores, a arte grande e a grade mais alta. */
.dv .gm2-tiles{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;max-height:min(62vh,640px)}
.dv .gm2-t{padding:10px 6px 8px;gap:4px;border-radius:12px}
.dv .gm2-t img{width:64px;height:64px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.dv .gm2-t b{font-size:12px}
.hf.app .dv-acts,.hf.app .dv-maps{grid-template-columns:minmax(0,1fr)}
.hf.app .dv .gm2-tiles{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none}
.hf.app .dv .gm2-t img{width:52px;height:52px}
.hf.hud2 .gm2-cat.on{color:#2a1604;background:linear-gradient(#ffd66b,#d49a2a)}
/* Insígnia no cartão do jogador (20/10 09:32): antes do nome; tocar mostra a insígnia e o resumo do jogador. */
.pc-ins{width:26px;height:26px;flex:none;margin-right:4px;image-rendering:pixelated;cursor:pointer;vertical-align:middle;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.ins-pop{z-index:130}
/* Chat: o ✕ de apagar (equipe) ficava por cima do horário (20/10 09:33, dono): o cabeçalho abre espaço para ele à direita. */
.clog p.cm:has(.cdel) .chd{padding-right:26px}
.clog p.cm .cdel{top:4px;right:4px;width:20px;height:18px;padding:0;line-height:18px;text-align:center}
.clog p:not(.cm):has(.cdel) > span{padding-right:24px}
/* Botão Mundo na barra (20/10 09:48 e 09:59): mesmo tamanho dos outros, no fim da barra, com "Mundo" e a tecla M; só no clean do PC. */
.h2-wld{display:none}
.hf.hud2:not(.app) .actions .h2-wld{display:grid;place-items:center;cursor:pointer}
.hf.hud2:not(.app) .actions .h2-wld img{width:30px;height:30px;margin-bottom:9px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 2px rgba(0,0,0,.7));transition:transform .15s}
.hf.hud2:not(.app) .actions .h2-wld:hover img{transform:scale(1.08)}
.hf.hud2:not(.app) .actions .h2-wld .wl{position:absolute;left:50%;right:auto;bottom:3px;transform:translateX(-50%);white-space:nowrap;padding-left:.06em;margin:0;font:700 9.5px/1 "HF Sans",system-ui,sans-serif;letter-spacing:.06em;text-align:center;text-transform:uppercase;color:#ffe7a6;-webkit-text-stroke:3px rgba(0,0,0,.85);paint-order:stroke fill;pointer-events:none}
/* Chat fixo no clean do PC (20/10 09:47): alfinete ao lado do ✕; fixo = sempre aberto, mais transparente, atrás das janelas. */
.p-chat .chat-pin{display:none}
.hf.hud2:not(.app).chat-float .p-chat .chat-pin{display:grid;place-items:center;position:absolute;z-index:9;right:24px;top:-10px;width:28px;height:28px;padding:0;border-radius:50%;cursor:pointer;border:1px solid var(--h2-line);background:#1b1918;color:#cfc6b4}
.hf.hud2:not(.app).chat-float .p-chat .chat-pin svg{width:14px;height:14px;transform:rotate(35deg);transition:transform .15s}
.hf.hud2:not(.app).chat-float .p-chat .chat-pin:hover,.hf.hud2:not(.app).chat-float .p-chat .chat-pin:focus-visible{color:#fff3c4;border-color:var(--h2-gold);outline:none}
.hf.hud2:not(.app).chat-pin .p-chat .chat-pin{right:-10px;color:#1b1918;background:var(--h2-gold);border-color:var(--h2-gold)}
.hf.hud2:not(.app).chat-pin .p-chat .chat-pin svg{transform:none}
.hf.hud2:not(.app).chat-pin .p-chat .chat-x,.hf.hud2:not(.app).chat-pin .chatfab{display:none!important}
.hf.hud2:not(.app).chat-pin .hf-stage > .p-chat{bottom:16px;width:clamp(280px,calc(50% - 310px),400px);height:min(330px,calc(100% - 150px));z-index:25;background:rgba(10,11,14,.55);box-shadow:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:background .2s}
.hf.hud2:not(.app).chat-pin .hf-stage > .p-chat:hover,.hf.hud2:not(.app).chat-pin .hf-stage > .p-chat:focus-within{background:rgba(10,11,14,.84)}
.hf.hud2:not(.app).chat-pin .p-chat :is(.ctabs,.cinput,.csend){transition:opacity .2s}
.hf.hud2:not(.app).chat-pin .p-chat:not(:hover):not(:focus-within) :is(.ctabs,.csend){opacity:.6}
/* Voto do TopIdle no celular clean (20/10 12:10): embaixo do card de online/ms/FPS, no canto de cima à direita. */
.h2-vote{display:none}
.hf.hud2.app .hf-stage > .h2-vote:not([hidden]){display:flex;position:absolute;left:auto;right:calc(8px + var(--sr));top:calc(36px + var(--st));z-index:20;pointer-events:auto}
.hf.hud2.app .h2-vote .vc-b{height:30px;padding:0 10px 0 6px;border-radius:3px;animation:none;max-width:none}
.hf.hud2.app .h2-vote .vc-b img{width:18px;height:18px}
.hf.hud2.app .h2-vote .vc-b b{font-size:11px;white-space:nowrap}
.hf.hud2.app .h2-vote .vc-b small{display:none}
/* 20/10 12:20 (dono: "está aparecendo Desenvolvedor para todos os usuários"): o display:flex do item do Menu passava por cima do
atributo hidden; item escondido (Desenvolvedor só para a equipe) some de verdade. */
.hf .h2m-i[hidden],.hf [data-gm][hidden],.hf [data-adm][hidden]{display:none!important}
/* Ouro na fila de moedas do clean (20/10 12:25). */
.hf.hud2.app .h2cur .h2c-au{--cc:#e3c27a}
/* Avisos do topo no clean do PC (20/10 12:41, dono, print: "deixar o botão do TopIdle igual aos outros, mesmo tamanho"): todos os
botões do topo (TopIdle, Passe, plantação, VIP, Streamer...) com a mesma altura, ícone e letra; o TopIdle só brilha, sem crescer. */
.hf.hud2:not(.app) .topcenter .vc-b{height:32px;padding:0 11px 0 7px;gap:6px}
.hf.hud2:not(.app) .topcenter .vc-b img{width:22px;height:22px}
.hf.hud2:not(.app) .topcenter .vc-b b{font-size:12.5px}
.hf.hud2:not(.app) .topcenter .vc-b small{font-size:10.5px}
.hf.hud2:not(.app) .topcenter .vc-b small:empty{display:none}
/* Gemas no clean do PC (20/10 12:42, dono: "essa tela muito grande de largura"; 12:43: "todas as abas"): a janela inteira (Depositar,
Sacar, Trocar, Compras, Extrato e Transparência) fica com no máximo 880 px, no meio. */
.hf.dock.hud2 .veil:has(.win-gemas){grid-template-columns:minmax(0,880px)}
.hf.dock.hud2 .win-gemas{width:100%;max-width:880px;justify-self:center}
/* Menu do clean no PC (20/10 12:45, dono, print: "remover scroll horizontal e no botão escrever Menu junto com o ícone"). */
.h2m-bt{display:none}
.hf.hud2:not(.app) .h2m-list{overflow-x:hidden;overflow-y:auto}
.hf.hud2:not(.app) .h2m-list > *{min-width:0;max-width:100%}
.hf.hud2:not(.app) .h2m-btn{width:auto;height:44px;padding:0 16px 0 8px;gap:8px;border-radius:22px}
.hf.hud2:not(.app) .h2m-btn img{width:30px;height:30px}
.hf.hud2:not(.app) .h2m-bt{display:inline;font:700 15px/1 "HF Sans",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#f1e6cc;-webkit-text-stroke:2px rgba(0,0,0,.6);paint-order:stroke fill}
.hf.hud2:not(.app) .h2m-btn:hover .h2m-bt,.hf.hud2:not(.app) .h2m-btn.on .h2m-bt{color:#ffe7a8}
/* Menu do clean no PC em 2 colunas com títulos de grupo (20/10 12:45, dono: "estão muito juntos"). */
.h2m-gt{display:none}
.hf.hud2:not(.app) .h2m-list:not([hidden]){display:grid;grid-template-columns:1fr 1fr;gap:4px 6px;width:372px;padding:10px 12px 8px;align-content:start}
.hf.hud2:not(.app) .h2m-gt{display:block;grid-column:1/-1;margin:8px 2px 1px;font:700 11px/1 "HF Sans",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--h2-gold,#e3c27a);opacity:.85}
.hf.hud2:not(.app) .h2m-gt:first-child{margin-top:0}
.hf.hud2:not(.app) .h2m-sep{display:none}
.hf.hud2:not(.app) .h2m-i{height:38px;padding:0 10px;gap:10px;border-radius:4px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);font-size:15px;min-width:0}
.hf.hud2:not(.app) .h2m-i span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf.hud2:not(.app) .h2m-i img{width:26px;height:26px}
.hf.hud2:not(.app) .h2m-i:hover{background:rgba(227,194,122,.14);box-shadow:inset 0 0 0 1px rgba(227,194,122,.55)}
.hf.hud2:not(.app) .h2m-foot{grid-column:1/-1;margin:8px 2px 0}
@media (max-height:820px){.hf.hud2:not(.app) .h2m-i{height:33px;font-size:14px}.hf.hud2:not(.app) .h2m-gt{margin-top:6px}}
/* 20/10 13:11 (dono, print: "ainda está com scroll vertical"): 3 colunas, cabe inteiro em tela mais baixa e com o Desenvolvedor. */
.hf.hud2:not(.app) .h2m-list:not([hidden]){grid-template-columns:repeat(3,1fr);width:500px;max-height:none;overflow:visible}
.hf.hud2:not(.app) .h2m-i{height:38px;padding:0 8px;gap:8px;font-size:14.5px}
.hf.hud2:not(.app) .h2m-i img{width:24px;height:24px}
/* 20/10 13:17 (dono, print do canto de cima: "escurecer mais um pouco"): sombra atrás do nome, barras e moedas mais escura e um
pouco maior, para o texto ler bem em cima de qualquer mapa. */
.hf.hud2:not(.app) .h2top::before{left:-30px;top:-24px;right:-130px;bottom:-34px;background:radial-gradient(ellipse 100% 130% at 0% 35%,rgba(3,4,6,.95),rgba(3,4,6,.8) 50%,transparent 82%)}
/* 20/10 13:21 (dono, print do botão MENU: "diminuir um pouco mais"). */
.hf.hud2:not(.app) .h2m-btn{height:36px;padding:0 12px 0 6px;gap:6px;border-radius:18px}
.hf.hud2:not(.app) .h2m-btn img{width:24px;height:24px}
.hf.hud2:not(.app) .h2m-bt{font-size:12.5px}
.hf.hud2:not(.app) .h2m-list{bottom:46px}
.hf.hud2:not(.app) .actions .h2-wld .wl{letter-spacing:.02em;font-size:9px}
/* Chat fixo não encosta na barra (que ganhou Loja e Mercado) em tela de 1280 px. */
.hf.hud2:not(.app).chat-pin .hf-stage > .p-chat{width:clamp(240px,calc(50% - 400px),400px)}
/* Canteiros do VIP na Fazenda (20/10). */
.fm-card.vip{box-shadow:inset 0 0 0 1px rgba(227,194,122,.55)}
.fm-card.lock.vip .fm-pic img{width:34px;height:34px;opacity:.9;image-rendering:pixelated}
/* Perfil de outro jogador no clean (20/10 13:57, dono, print: "os botões tudo mal feitos, melhore isso"): os botões ficam numa
grade de 2 colunas, do mesmo tamanho, sem texto cortado ou um por cima do outro; o último sozinho ocupa a linha toda; Denunciar
vira um link discreto embaixo. */
.hf.hud2 .pf2-acts.other{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex-wrap:initial;margin-top:auto}
.hf.hud2 .pf2-acts.other .ig-btn{width:100%;min-width:0;height:34px;padding:0 8px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-content:center}
.hf.hud2 .pf2-acts.other > .ig-btn:not(.pf-repb):nth-last-child(2):nth-child(odd){grid-column:1/-1}
.hf.hud2 .pf2-acts.other .pf-repb{grid-column:1/-1;height:26px;background:none;border:0;box-shadow:none;color:#e0897e;font-size:12px;font-weight:600;filter:none}
.hf.hud2 .pf2-acts.other .pf-repb:hover{color:#ffb3aa;text-decoration:underline;background:none}
/* Novidades na barra de cima (20/10 14:38, dono: "vamos colocar novidades aqui... não apareceu badge de novo; remova do menu"):
o chip azul ao lado do Streamer, com o número de novidades sem ler e um brilho enquanto houver. */
.hf.hud2 .topcenter .vc-b.h2p-nw{position:relative;box-shadow:inset 0 0 0 1px #5fb4ff,0 0 10px rgba(95,180,255,.3)!important;background:linear-gradient(180deg,rgba(18,44,72,.92),rgba(10,18,30,.92))!important;color:#d8ecff!important}
.hf.hud2 .topcenter .vc-b.h2p-nw img{filter:drop-shadow(0 0 4px rgba(0,0,0,.6))!important;opacity:1!important}
.hf.hud2 .topcenter .vc-b.h2p-nw small{color:inherit!important;opacity:.8}
.hf.hud2:not(.app) .topcenter .vc-b.h2p-nw{height:32px;padding:0 11px 0 7px;gap:6px}
.hf.hud2:not(.app) .topcenter .vc-b.h2p-nw img{width:22px;height:22px}
.hf.hud2:not(.app) .topcenter .vc-b.h2p-nw b{font-size:12.5px}
.hf.hud2:not(.app) .topcenter .vc-b.h2p-nw small{font-size:10.5px}
.h2p-nw .badge{top:-8px;right:-8px}
.h2p-nw:has(.badge:not(:empty)){animation:nwGlow 1.8s ease-in-out infinite}
@keyframes nwGlow{50%{filter:brightness(1.3)}}
/* Canto de cima à direita mais escuro (20/10 14:39, dono: "escurecer mais um pouco"): o online/FPS e o ganho por hora com
fundo escuro, para ler em cima de qualquer mapa. */
.hf.hud2:not(.app) .netbar{background:rgba(6,7,9,.9)!important;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.55)!important}
.hf.hud2:not(.app) .h2rate:not(:empty){padding:3px 11px;border-radius:999px;background:rgba(6,7,9,.86);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.5);-webkit-text-stroke:0;text-shadow:none}
/* Eventos como mini banners no clean do PC (20/10 14:43, dono, print da faixa da Loja: "um banner assim na tela, porém menor, para
ficar mais clean; só a pílula fica muito sem graça"; "escurecer mais um pouco"): cartão escuro com ícone, título, o que se
ganha na segunda linha e o relógio à direita; a cor da borda diz o tipo (chefe vermelho, Loja dourado, ranking azul). */
.evb-s{display:none}
.hf.hud2:not(.app) .evb{gap:8px}
.hf.hud2:not(.app) .evb-c{--evc:#5fd36a;--evt:#bff5c6;display:grid;grid-template-columns:30px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:9px;row-gap:1px;align-items:center;height:auto;min-height:46px;min-width:220px;max-width:310px;padding:6px 10px 6px 9px;border-radius:10px;text-align:left;background:linear-gradient(100deg,rgba(14,13,12,.96),rgba(7,7,8,.94))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--evc) 65%,transparent),inset 3px 0 0 var(--evc),0 6px 16px rgba(0,0,0,.6)!important}
.hf.hud2:not(.app) .evb-c:hover{background:linear-gradient(100deg,rgba(26,24,22,.97),rgba(12,12,13,.95))!important}
.hf.hud2:not(.app) .evb-c > img{grid-row:1/3;width:30px;height:30px}
.hf.hud2:not(.app) .evb-c > b{grid-column:2;grid-row:1;display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:var(--evt)}
.hf.hud2:not(.app) .evb-c > b em{display:none}
.hf.hud2:not(.app) .evb-c > .evb-s{display:block;grid-column:2;grid-row:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:#cfc6b4}
.hf.hud2:not(.app) .evb-c > i{grid-column:3;grid-row:1/3;align-self:center;border:0;padding:3px 7px;border-radius:6px;background:rgba(255,255,255,.07);font-size:12.5px;color:#f1ead8}
.hf.hud2:not(.app) .evb-c.t-boss{--evc:#e0574a;--evt:#ffb4a8}
.hf.hud2:not(.app) .evb-c.t-sale{--evc:#e8b84a;--evt:#ffd98a}
.hf.hud2:not(.app) .evb-c.t-rank{--evc:#6fa8ff;--evt:#cfe0ff}
.hf.hud2:not(.app) .evb-c.t-beta{--evc:#c77dff;--evt:#ead2ff}
.hf.hud2:not(.app) .evb-x{width:28px;height:28px;background:rgba(7,7,8,.92)}
/* Live no cartão do jogador (20/10 14:38, dono: "diminuir um pouco"; o cartão passava por baixo da barra de habilidades). */
.hf .invite.pc2.pc-live{width:min(470px,calc(100vw - 24px));max-width:min(470px,calc(100vw - 24px))}
.pc-stream{padding:6px 8px;gap:6px}
.hf.hud2:not(.app) .invites{top:96px}
.hf.hud2:not(.app) .invites .pc2{max-height:calc(100vh - 220px);overflow:auto}
/* Perfil refeito (20/10 14:38, dono: "tela de perfil ainda não está legal, vamos reorganizar, refazer layout"): faixa de cima
com o retrato, o nome e os botões; embaixo o boneco à esquerda e as conquistas e o status à direita. */
.ig.pf3{grid-template-rows:auto auto auto 1fr}
.ig.pf3 > :is(.pf3-top,.pf3-rep,.pf3-dmn){grid-column:1/-1}
.pf3-dmn{margin:-6px 0 0}
.pf3-top{display:flex;align-items:center;gap:16px;padding:12px 14px;border-radius:12px;background:linear-gradient(90deg,rgba(66,50,16,.42),rgba(16,22,36,.78) 48%,rgba(12,16,26,.78));box-shadow:inset 0 0 0 1px rgba(214,170,90,.38)}
.pf3-top .pf2-who{flex:1 1 auto;min-width:0;gap:12px}
.pf3-top .pf2-por{width:70px;height:70px}
.pf3-top .pf2-nm{font-size:22px}
.pf3-top .pf2-id{gap:3px}
.pf3-top .pf2-id small{font-size:12.5px}
.pf3-acts{flex:0 1 auto;min-width:0;max-width:58%}
.ig.pf3 .pf3-acts .pf2-acts,.hf.hud2 .ig.pf3 .pf3-acts .pf2-acts.other{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;margin:0}
.ig.pf3 .pf3-acts .pf2-acts .ig-btn,.hf.hud2 .ig.pf3 .pf3-acts .pf2-acts.other .ig-btn{flex:0 0 auto;width:auto;height:34px;padding:0 14px;font-size:13px;white-space:nowrap}
.hf.hud2 .ig.pf3 .pf3-acts .pf2-acts.other .pf-repb,.ig.pf3 .pf3-acts .pf-repb{height:34px;padding:0 6px;background:none;border:0;box-shadow:none;filter:none;color:#e0897e;font-size:12px;font-weight:600}
.ig.pf3 .pf2-left{gap:10px}
.ig.pf3 .pf2-left .pf2-afk{margin:0}
.ig.pf3.app .pf3-top{flex-direction:column;align-items:stretch;gap:10px}
.ig.pf3.app .pf3-acts{max-width:none}
.ig.pf3.app .pf3-acts .pf2-acts{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}
.ig.pf3.app .pf3-acts .pf2-acts .ig-btn{width:100%}
@media (max-width:1100px){.ig.pf3:not(.app) .pf3-top{flex-wrap:wrap}.ig.pf3:not(.app) .pf3-acts{max-width:none;flex-basis:100%}.ig.pf3:not(.app) .pf3-acts .pf2-acts{justify-content:flex-start}}
.hf.hud2:not(.app) .evb{max-width:min(880px,calc(100vw - 600px))}
.hf.hud2:not(.app) .evb-c{min-width:200px;max-width:270px}
/* Códex de Itens (20/10, prévia aprovada pelo dono às 13:20): abas Insígnias | Itens; resumo dos bônus com o teto; páginas à
esquerda, os 7 espaços com as estrelas e o que falta, e os bônus da página embaixo. Registrar abre a confirmação por cima. */
.cx-tabs{display:flex;gap:8px;margin:0 0 12px}
.cx-tab{display:flex;align-items:center;gap:8px;padding:8px 18px;border:0;border-radius:6px;cursor:pointer;font:600 14.5px/1 inherit;font-family:inherit;color:#a59c8a;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.cx-tab img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated}
.cx-tab.on{color:#fff;background:rgba(227,194,122,.12);box-shadow:inset 0 0 0 1px #e3c27a}
.cx-new{font-style:normal;font-size:10px;font-weight:800;background:#d64545;color:#fff;border-radius:3px;padding:2px 5px;letter-spacing:.03em}
.cxi{position:relative;display:flex;flex-direction:column;gap:12px;min-height:0}
.cxk-sum{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.1fr);gap:8px}
.cxk-st{padding:9px 12px;border-radius:6px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);min-width:0}
.cxk-st small{display:block;color:#a59c8a;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.cxk-st b{font-size:19px;color:#fff}.cxk-st em{font-style:normal;color:#a59c8a;font-size:12px;margin-left:4px}
.cxk-bar{display:block;height:5px;margin-top:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.cxk-bar>i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#b98b3a,#e3c27a)}
.cxk-st.tot{background:rgba(227,194,122,.08);box-shadow:inset 0 0 0 1px rgba(227,194,122,.3)}
.cxk-body{display:grid;grid-template-columns:250px minmax(0,1fr);gap:14px;min-height:0}
.cxk-pages{display:flex;flex-direction:column;gap:5px}
.cxk-pg{display:flex;align-items:center;gap:10px;padding:7px 10px;border:0;border-radius:6px;cursor:pointer;text-align:left;font-family:inherit;color:#ece6d6;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.cxk-pg:hover{background:rgba(255,255,255,.06)}
.cxk-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;background:#1b1a18;box-shadow:inset 0 0 0 1px rgba(227,194,122,.4);color:#e3c27a}
.cxk-pt{flex:1;min-width:0}.cxk-pt b{display:block;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cxk-pt small{color:#a59c8a;font-size:11.5px}
.cxk-pg em{font-style:normal;font-weight:700;font-size:12px;color:#a59c8a;white-space:nowrap}
.cxk-pg.on{background:rgba(227,194,122,.13);box-shadow:inset 0 0 0 1px #e3c27a}
.cxk-pg.done .cxk-n{background:#e3c27a;color:#1b1408}.cxk-pg.done em{color:#e3c27a}
.cxk-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.cxk-ph{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px}.cxk-ph small{color:#a59c8a}.cxk-tag{margin-left:auto;font-size:12.5px;color:#a59c8a}
.cxk-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cxk-sl{display:flex;flex-direction:column;gap:7px;padding:11px;border-radius:7px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);min-width:0}
.cxk-sl.full{box-shadow:inset 0 0 0 1px #e3c27a,0 0 18px rgba(227,194,122,.14)}
.cxk-top{display:flex;align-items:center;gap:10px}
.cxk-ic{flex:none;width:56px;height:56px;border-radius:6px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 35%,rgba(48,45,40,.92),rgba(14,14,16,.95));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);overflow:hidden}
.cxk-ic img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated}.cxk-ic .ithumb{transform:scale(.86)}
.cxk-ic.empty img{opacity:.5;filter:grayscale(1)}
.cxk-ic.s1{box-shadow:inset 0 0 0 1px #58a8ff}.cxk-ic.s2{box-shadow:inset 0 0 0 1px #c77dff}.cxk-ic.s3{box-shadow:inset 0 0 0 1px #ffb640}
.cxk-tt{min-width:0}.cxk-tt b{display:block;font-size:15px}
.cxk-stars{display:flex;gap:3px;font-size:18px}.cxk-stars i{font-style:normal;color:rgba(255,255,255,.16)}.cxk-stars i.on{color:#e3c27a;text-shadow:0 0 8px rgba(227,194,122,.6)}
.cxk-bon{font-size:12.5px;color:#9fe39a}.cxk-bon.off{color:#8a8274}
.cxk-nx{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding:8px 9px;border-radius:6px;background:rgba(0,0,0,.28);font-size:12.3px;line-height:1.35;color:#d8d0bf}
.cxk-nx b{color:#fff}.cxk-gold{color:#e3c27a;font-weight:700}.cxk-gold img{width:14px;height:14px;vertical-align:-2px}
.cxk-b{margin-top:6px;width:100%;justify-content:center}
.cxk-mk{color:#9cc9ff!important;background:rgba(88,168,255,.12)!important;box-shadow:inset 0 0 0 1px rgba(88,168,255,.5)!important}
.cxk-ok{color:#e3c27a;text-align:center;padding:6px 0}
.cxk-how{justify-content:center;gap:6px}.cxk-how p{margin:0;font-size:12.3px;color:#a59c8a;line-height:1.45}
.cxk-pbon{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cxk-pb{display:flex;gap:12px;align-items:center;padding:10px 13px;border-radius:7px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);min-width:0}
.cxk-pb.ok{box-shadow:inset 0 0 0 1px #e3c27a}
.cxk-pb .k{font-size:20px;color:#e3c27a;white-space:nowrap}.cxk-pb b{display:block;font-size:13.5px}.cxk-pb small{color:#a59c8a;font-size:12px}
.cxk-pb>div:not(.cxk-pbar){flex:1;min-width:0}
.cxk-pbar{flex:none;width:110px;text-align:right;font-weight:700;font-size:13px;color:#a59c8a}
.cxk-ov{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(0,0,0,.6);padding:16px}
.cxk-md{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:20px;border-radius:8px;background:linear-gradient(180deg,#1a1917,#0f0f12);box-shadow:inset 0 0 0 1px #e3c27a,0 20px 60px rgba(0,0,0,.7)}
.cxk-md h3{margin:0 0 4px;font-family:"HF Title",Cinzel,serif;font-size:19px;color:#e3c27a;letter-spacing:.06em}
.cxk-sub{color:#a59c8a;margin-bottom:12px}
.cxk-pick{margin-bottom:10px}.cxk-pick small{display:block;color:#a59c8a;margin-bottom:6px}.cxk-pick>div{display:flex;flex-wrap:wrap;gap:6px}
.cxk-pi{position:relative;width:48px;height:48px;padding:0;border:0;border-radius:6px;cursor:pointer;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);display:grid;place-items:center}
.cxk-pi.on{box-shadow:inset 0 0 0 2px #e3c27a}.cxk-pi .ithumb{transform:scale(.72)}.cxk-pi .up{position:absolute;right:2px;bottom:1px;font-size:10px;color:#fff;text-shadow:0 1px 2px #000}
.cxk-itc{display:flex;gap:14px;align-items:center;padding:12px;border-radius:7px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.cxk-itc .cxk-ic{width:68px;height:68px}.cxk-itc b{font-size:16.5px}.cxk-itc small{display:block;color:#a59c8a;margin-top:2px}
.cxk-rows{margin:12px 0;display:grid;gap:8px}
.cxk-row{display:flex;gap:10px;align-items:center;padding:9px 11px;border-radius:6px;background:rgba(255,255,255,.035)}
.cxk-row img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated}.cxk-row span{flex:1}.cxk-row b{color:#fff}
.cxk-row.warn{background:rgba(255,90,90,.1);box-shadow:inset 0 0 0 1px rgba(255,90,90,.45)}.cxk-row.good b{color:#9fe39a}
.cxk-chk{display:flex;gap:8px;align-items:center;font-size:13.5px;margin:4px 0 14px;cursor:pointer}.cxk-chk input{width:18px;height:18px;accent-color:#e3c27a}
.cxk-mb{display:flex;gap:10px}.cxk-mb>*{flex:1;justify-content:center;height:40px}
/* Selo do Mercado: o item completa um espaço vazio do seu Códex. */
.mx-card.cxfit{box-shadow:inset 0 0 0 1px #6fd36a,0 0 14px rgba(111,211,106,.18)}
.mx-card{position:relative}
.mx-cxb{position:absolute;z-index:2;top:-8px;left:8px;right:8px;width:fit-content;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 7px;border-radius:4px;background:#2c6b2a;color:#d8ffd2;font-style:normal;font-weight:700;font-size:10.5px;letter-spacing:.02em;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.mx-cxf.on{box-shadow:inset 0 0 0 1px #6fd36a!important;color:#c9ffc4}
@media (max-width:1100px){.cxk-sum{grid-template-columns:repeat(3,minmax(0,1fr))}.cxk-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}
.app .cxk-body,.cxi.app .cxk-body{grid-template-columns:1fr}
@media (max-width:760px){.cxk-body{grid-template-columns:1fr}.cxk-pages{flex-direction:row;overflow-x:auto;padding-bottom:4px}.cxk-pg{flex:none}.cxk-pbon{grid-template-columns:1fr}.cxk-sum{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hf.app .cxk-body{grid-template-columns:1fr}.hf.app .cxk-pages{flex-direction:row;overflow-x:auto;padding-bottom:4px}.hf.app .cxk-pg{flex:none}.hf.app .cxk-pbon{grid-template-columns:1fr}.hf.app .cxk-sum{grid-template-columns:repeat(3,minmax(0,1fr))}.hf.app .cxk-slots{grid-template-columns:repeat(2,minmax(0,1fr))}.hf.app .cxk-tag{margin-left:0}
/* Eventos escondidos (20/10 15:41, dono, print da pílula "Eventos ▾": "feio isso"): no PC vira um mini banner do mesmo jeito dos
eventos, com os ícones um por cima do outro, quantos estão ligados e a seta para mostrar. */
.evb-ics{display:inline-flex;align-items:center;gap:2px}
.hf.hud2:not(.app) .evb-c.evb-one{--evc:#5bd67f;--evt:#e9f7ec;min-width:0;max-width:none;grid-template-columns:auto minmax(0,1fr) auto;padding:6px 12px 6px 10px}
.hf.hud2:not(.app) .evb-c.evb-one > .evb-ics{grid-row:1/3;gap:0}
.hf.hud2:not(.app) .evb-c.evb-one > .evb-ics img{width:26px;height:26px;margin-left:-8px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.hf.hud2:not(.app) .evb-c.evb-one > .evb-ics img:first-child{margin-left:0}
.hf.hud2:not(.app) .evb-c.evb-one > b{display:flex;align-items:center;gap:6px}
.hf.hud2:not(.app) .evb-c.evb-one > b em{display:inline-block;min-width:18px;padding:0 5px;border-radius:7px;text-align:center;font-size:11px;line-height:16px;background:#5bd67f;color:#08210f;font-weight:900}
.hf.hud2:not(.app) .evb-c.evb-one > i{background:none;padding:0 0 0 6px;font-size:13px;color:#cfc6b4}
.hf.hud2:not(.app) .evb-c.evb-one:hover > i{color:#fff}
/* Códex de Itens mais claro (20/10 15:49, jogadora Joy): os 3 passos no alto e o pedido de cada espaço com a peça e o mapa. */
.cxk-intro{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:10px 40px 10px 12px;border-radius:8px;background:linear-gradient(90deg,rgba(227,194,122,.14),rgba(227,194,122,.05));box-shadow:inset 0 0 0 1px rgba(227,194,122,.35)}
.cxk-intro>div{display:flex;gap:10px;align-items:flex-start;min-width:0}
.cxk-intro i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px;background:#e3c27a;color:#1b1408}
.cxk-intro span{display:flex;flex-direction:column;gap:2px;min-width:0}.cxk-intro b{font-size:14px;color:#fff}.cxk-intro small{font-size:12.3px;color:#cfc6b4;line-height:1.35}
.cxk-ix{position:absolute;top:8px;right:8px;width:24px;height:24px;border:0;border-radius:50%;cursor:pointer;background:rgba(0,0,0,.35);color:#cfc6b4;font-size:12px}
.cxk-ix:hover{color:#fff}
.cxk-need{color:#a59c8a;font-size:11.8px}
.cxk-what{font-size:13.5px}
.cxk-near{margin-top:3px;font-size:11.5px;color:#ffcf7a;line-height:1.3}
@media (max-width:760px){.cxk-intro{grid-template-columns:1fr}}
.hf.app .cxk-intro{grid-template-columns:1fr}
/* Códex de Itens explicado (20/10 16:00, dono: "explicar direito... até eu não entendi"): faixa curta com o botão Como funciona e o
guia em linguagem simples (páginas, espaços, estrelas, o que ganha, exemplo e o aviso). */
.cxk-intro{display:flex!important;align-items:center;gap:12px;padding:10px 12px!important}
.cxk-intro>img{flex:none;width:34px;height:34px;image-rendering:pixelated}
.cxk-intro>span{flex:1;min-width:0}.cxk-intro>span b{font-size:14.5px}.cxk-intro small b{font-size:inherit;color:#ffe7a8}
.cxk-gbtn{flex:none;white-space:nowrap}
.cxk-ov{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(0,0,0,.65);padding:16px}
.cxk-gd{position:relative;width:min(880px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:22px 24px;border-radius:10px;background:linear-gradient(180deg,#1b1a17,#0f0f12);box-shadow:inset 0 0 0 1px #e3c27a,0 20px 60px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:12px}
.cxk-gd h3{margin:0;font-family:"HF Title",Cinzel,serif;font-size:21px;color:#e3c27a;letter-spacing:.05em;padding-right:36px}
.cxk-gx{position:absolute;top:12px;right:12px;width:30px;height:30px;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.07);color:#ddd}
.cxk-gl{margin:0;font-size:15px;line-height:1.5;color:#ece6d6}
.cxk-gs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cxk-gs section{padding:12px 14px;border-radius:8px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);min-width:0}
.cxk-gs h4{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:15.5px;color:#fff}
.cxk-gs h4 i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800;background:#e3c27a;color:#1b1408}
.cxk-gs p{margin:0 0 6px;font-size:13.5px;line-height:1.5;color:#ddd5c4}.cxk-gs p:last-child{margin-bottom:0}
.cxk-gh{margin:0;font-size:12.8px;line-height:1.45;color:#a59c8a}
.cxk-gst,.cxk-gw{margin:4px 0 8px;padding:0;list-style:none;display:grid;gap:4px;font-size:13.3px;color:#ece6d6}
.cxk-gst li{display:flex;gap:8px;align-items:baseline}.cxk-gst span{flex:none;width:44px;color:#e3c27a;letter-spacing:1px}
.cxk-gw li::before{content:"•";color:#9fe39a;margin-right:6px}
.cxk-gex{padding:12px 14px;border-radius:8px;background:rgba(95,211,106,.08);box-shadow:inset 0 0 0 1px rgba(95,211,106,.4)}
.cxk-gex b:first-child{display:block;color:#9fe39a;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.cxk-gex p{margin:0;font-size:14px;line-height:1.5;color:#ece6d6}
.cxk-gwarn{padding:10px 14px;border-radius:8px;background:rgba(255,90,90,.1);box-shadow:inset 0 0 0 1px rgba(255,90,90,.45);font-size:13.5px;line-height:1.45;color:#f3d8d4}
.cxk-gok{align-self:center;min-width:240px;height:42px;font-size:15px}
.is-cx{color:#e3c27a!important}
@media (max-width:760px){.cxk-gs{grid-template-columns:1fr}.cxk-intro{flex-wrap:wrap}.cxk-gbtn{width:100%}}
.hf.app .cxk-gs{grid-template-columns:1fr}.hf.app .cxk-intro{flex-wrap:wrap}.hf.app .cxk-gbtn{width:100%}
.cxk-gst li{display:block}.cxk-gst span{display:inline-block;width:46px}
.cxk-gex>b{display:block;color:#9fe39a;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.cxk-gex b:first-child{display:inline;text-transform:none;letter-spacing:0;font-size:inherit;margin:0;color:inherit}
.cxk-gex>b:first-child{display:block;color:#9fe39a;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.cxk-gex p b.r2{color:#58a8ff}
.cxk-gd{max-height:calc(100% - 24px)}
.cxk-gold{display:flex;align-items:center;gap:4px}.cxk-gold img{display:inline-block}
.cxk-gcol{padding:10px 14px;border-radius:8px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);display:flex;flex-direction:column;gap:6px}
.cxk-gcol>b{font-size:13.5px;color:#fff}.cxk-gcol>small{font-size:12.5px;color:#a59c8a;line-height:1.4}
.cxk-gcol>div{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-weight:700;font-size:14px}.cxk-gcol>div i{font-style:normal;color:#6b6457}
.cxk-gfaq{display:flex;flex-direction:column;gap:6px}.cxk-gfaq>b{font-size:14px;color:#fff}
.cxk-gfaq details{border-radius:7px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.cxk-gfaq summary{cursor:pointer;padding:9px 12px;font-weight:600;font-size:13.5px;color:#e3c27a}
.cxk-gfaq details p{margin:0;padding:0 12px 10px;font-size:13.3px;line-height:1.5;color:#ddd5c4}
/* Níveis do Códex com o nome da raridade (20/10 16:16, dono: "melhor colocar tipo de itens do que estrelas, raridade igual"). */
.cxk-lvs{display:flex;gap:4px;flex-wrap:wrap}
.cxk-lvs i{font-style:normal;font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:4px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);opacity:.45;color:#a59c8a!important}
.cxk-lvs i.on{opacity:1;color:#fff!important}
.cxk-lvs i.r2.on{background:rgba(88,168,255,.18);box-shadow:inset 0 0 0 1px #58a8ff}
.cxk-lvs i.r3.on{background:rgba(199,125,255,.18);box-shadow:inset 0 0 0 1px #c77dff}
.cxk-lvs i.r4.on{background:rgba(255,182,64,.18);box-shadow:inset 0 0 0 1px #ffb640}
.cxk-cur{display:block;font-size:12px;color:#a59c8a}
.cxk-ic.r2b{box-shadow:inset 0 0 0 2px #58a8ff}.cxk-ic.r3b{box-shadow:inset 0 0 0 2px #c77dff}.cxk-ic.r4b{box-shadow:inset 0 0 0 2px #ffb640}
.cxk-pb .k{font-size:13px!important;font-weight:800;padding:3px 8px;border-radius:5px;background:rgba(255,255,255,.05);letter-spacing:0!important}
.cxk-pb .k.r2{color:#58a8ff}.cxk-pb .k.r4{color:#ffb640}
.cxk-gst span{display:inline-block;width:96px;font-weight:700;letter-spacing:0}
.cxk-tt .cxk-cur b{display:inline;font-size:12.5px}
/* 20/10 18:41: selo do canal (YouTube, Kick, Twitch) no perfil, um pouco maior que no chat. */
.pf2 .cst{font-size:12px;line-height:20px;padding:0 8px 0 6px;border-radius:8px}
/* 20/10 18:55: Equipe GM (menu Desenvolvedor): caixinhas de permissão. */
.gmt-ps{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin:10px 0}
.gmt-p{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(0,0,0,.25);cursor:pointer}
.gmt-p.on{border-color:#f2c14e;background:rgba(242,193,78,.1)}
.gmt-p input{margin-top:3px;accent-color:#f2c14e;width:16px;height:16px;flex:none}
.gmt-p span{display:flex;flex-direction:column;gap:2px;min-width:0}.gmt-p small{opacity:.75;font-size:12px;line-height:1.3}
.gmt-f .dv-row{gap:8px;flex-wrap:wrap;align-items:center}
/* 20/10 19:02: código de parceiro na Loja › Diamantes. */
.ds-code{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0;padding:10px 12px;border-radius:12px;border:1px dashed rgba(242,193,78,.45);background:rgba(242,193,78,.06)}
.ds-code.ok{border-style:solid;border-color:#7dd87d;background:rgba(125,216,125,.08)}
.ds-code>img{width:34px;height:34px;flex:none;image-rendering:pixelated}
.ds-code-t{display:flex;flex-direction:column;gap:2px;flex:1 1 220px;min-width:0}.ds-code-t small{opacity:.85;line-height:1.35}
.ds-code-f{display:flex;gap:6px;flex:0 1 auto}.ds-code-f .input{width:130px;text-transform:uppercase;letter-spacing:.06em}
/* 20/10: Área de caça no balão do AUTO. */
.ap-area{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px}.ap-area .chip{padding:4px 10px}
/* 20/10 (ALPHA: "no clean falta o reset do timer dos loots"): no celular, o ↺ Zerar aparece com o painel do loot aberto. */
.hf.hud2.app .h2l .h2-pan .h2l-h .h2q-b[data-hunt-reset]{display:inline-flex}
/* 20/10 (ALPHA, HUD clean): linha com a tarefa do chefe, as poções de XP e ouro e o botão Alvorada; bolinha da raridade no loot. */
.h2l-tm{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:4px 0 6px;font-size:12px;color:#d9d1bf}
.h2l-tm>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.h2l-tm img{width:16px;height:16px;image-rendering:pixelated}
.h2l-tm .h2l-tb{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.h2l-alv{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;border:1px solid rgba(227,194,122,.55);background:rgba(20,18,16,.75);color:#f2dfae;font-weight:700;font-size:11.5px}
.h2l-alv:hover{background:rgba(60,48,26,.9)}.h2l-alv img{width:15px;height:15px}.h2l-alv[disabled]{opacity:.5}
.h2l .h2l-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:1px;box-shadow:0 0 5px currentColor}
.h2l li.it.r3 img,.h2l li.it.r4 img,.h2l li.it.r5 img,.h2l li.it.r6 img{filter:drop-shadow(0 0 3px currentColor)}
.hf.hud2.app .h2l-tm{font-size:11px;margin:3px 0 4px}
/* 20/10 19:15 (PUNISHER: "o HUD está carregado: botões demais, botões duplos"): computador com janela baixa ou estreita, no visual
clássico: os botões do canto de cima viram só o ícone (o nome aparece ao passar o mouse) e a barra de baixo fica mais baixa,
para o mapa aparecer e o logo não ficar escondido. */
@media (max-height:720px),(max-width:1440px){
.hf:not(.app):not(.hud2) .topnav{gap:4px;top:8px;right:8px}
.hf:not(.app):not(.hud2) .topnav .navbtn{width:44px;height:44px}
.hf:not(.app):not(.hud2) .topnav .navbtn>span:not(.hud-tg){display:none}
.hf:not(.app):not(.hud2) .topnav .navbtn img{width:26px;height:26px}
.hf:not(.app):not(.hud2) .topnav .navbtn .nb-new{transform:scale(.75);top:-6px;right:-6px}
.hf:not(.app):not(.hud2) .topnav .alpha-ico{font-size:20px}
}
@media (max-height:720px){
.hf:not(.app):not(.hud2) .bottombar .navbtn{width:56px;height:52px}
.hf:not(.app):not(.hud2) .bottombar .navbtn img{width:24px;height:24px}
.hf:not(.app):not(.hud2) .bottombar .navbtn span{font-size:10px}
}
/* ---------- Novidades, layout novo (20/10 19:59, dono: "está muito bagunçado, vamos criar uma nova tela, novo layout") ----------
Esquerda: as atualizações por dia (Hoje, Ontem, a data), só o título e um resumo com ícones; no pé, VIP e Streamers pequenos.
Direita: cabeçalho de uma linha (abas e idioma) e a atualização aberta como um artigo: data, título, resumo e as partes
(✨ Novo, ⬆ Melhorado, 🔧 Corrigido) em lista simples, com uma linha fina entre os itens. */
.nw4{--nw-gold:#e3c27a;--nw-fg:#ece4d2;--nw-mut:#9aa3b2;--nw-line:rgba(227,194,122,.16);display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;height:100%;min-height:0;color:var(--nw-fg)}
.nw4-left{display:flex;flex-direction:column;min-height:0;gap:10px}
.nw4-list{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:2px;padding-right:4px}
.nw4-day{padding:12px 12px 4px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--nw-gold)}
.nw4-day:first-child{padding-top:2px}
.nw4-b{all:unset;position:relative;cursor:pointer;display:flex;flex-direction:column;gap:3px;padding:9px 12px 9px 14px;border-radius:10px;border-left:3px solid transparent}
.nw4-b:hover{background:rgba(255,255,255,.04)}
.nw4-b.on{background:rgba(227,194,122,.09);border-left-color:var(--nw-gold)}
.nw4-b b{font-size:14px;line-height:1.3;font-weight:700;color:var(--nw-fg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nw4-b.on b{color:#fff4d6}
.nw4-dot{position:absolute;left:-1px;top:13px;width:7px;height:7px;border-radius:50%;background:#7dff9a;box-shadow:0 0 6px #7dff9a}
.nw4-mini{display:flex;gap:10px;font-size:12px;color:var(--nw-mut)}.nw4-mini i{font-style:normal;white-space:nowrap}
.nw4-promo{display:flex;flex-direction:column;gap:6px}
.nw4-pr{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid rgba(227,194,122,.35);background:rgba(227,194,122,.06);min-width:0}
.nw4-pr.st{border-color:rgba(160,110,255,.45);background:rgba(140,90,255,.08)}
.nw4-pr:hover{filter:brightness(1.15)}.nw4-pr img{width:28px;height:28px;flex:none}
.nw4-pr span{display:flex;flex-direction:column;min-width:0}.nw4-pr b{font-size:13px}.nw4-pr small{font-size:11px;color:var(--nw-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nw4-right{min-height:0;overflow:auto;padding-right:6px}
.nw4-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 0 10px}
.nw4-top .nw-tabs{margin:0;background:none;padding:0}
.nw4-globe{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--nw-line);color:var(--nw-fg);font-size:13px}
.nw4-globe:hover{border-color:var(--nw-gold)}.nw4-globe i{font-style:normal;color:var(--nw-mut)}
.nw4-art{max-width:820px;padding:4px 4px 24px}
.nw4-head{padding:6px 0 14px;border-bottom:1px solid var(--nw-line);margin-bottom:6px}
.nw4-date{display:block;font-size:12px;letter-spacing:.06em;color:var(--nw-mut)}
.nw4-title{margin:6px 0 10px;font:800 26px/1.2 "HF2 Title","HF Title",Georgia,serif;color:var(--nw-gold);text-wrap:balance}
.nw4-sum{display:flex;flex-wrap:wrap;gap:8px}
.nw4-chip{display:inline-flex;gap:5px;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(255,255,255,.05)}
.nw4-chip.add{color:#7dff9a}.nw4-chip.imp{color:#8cc4ff}.nw4-chip.fix{color:#ffcf6e}
.nw4-body{margin:14px 0 4px;font-size:15px;line-height:1.55;color:#d9d1c0}
.nw4-sec{margin-top:18px}
.nw4-sh{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.nw4-sec.add .nw4-sh{color:#7dff9a}.nw4-sec.imp .nw4-sh{color:#8cc4ff}.nw4-sec.fix .nw4-sh{color:#ffcf6e}.nw4-sec.thx .nw4-sh{color:var(--nw-gold)}
.nw4-n{font-style:normal;font-size:12px;opacity:.7}
.nw4-list{list-style:none;margin:0;padding:0}
.nw4-it{padding:10px 0 10px 16px;border-bottom:1px solid rgba(255,255,255,.06);position:relative}
.nw4-it::before{content:"";position:absolute;left:2px;top:17px;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.nw4-sec.add .nw4-it::before{color:#7dff9a}.nw4-sec.imp .nw4-it::before{color:#8cc4ff}.nw4-sec.fix .nw4-it::before{color:#ffcf6e}.nw4-sec.thx .nw4-it::before{color:var(--nw-gold)}
.nw4-it:last-child{border-bottom:0}
.nw4-h{display:block;font-size:15px;font-weight:700;color:#fff1cf;margin-bottom:3px}
.nw4-it p{margin:0;font-size:14px;line-height:1.55;color:#cfc8b8}
.nw4-pts{margin:2px 0 0;padding-left:16px;font-size:14px;line-height:1.55;color:#cfc8b8}.nw4-pts li{margin:2px 0}
.nw4 a.nw-who{color:var(--nw-gold);cursor:pointer}
/* Celular: uma coluna, cada atualização abre no toque. */
.nw4.app{display:flex;flex-direction:column;gap:10px;height:auto}
.nw4.app .nw4-acc{display:flex;flex-direction:column;gap:8px}
.nw4-ai{border:1px solid var(--nw-line);border-radius:12px;background:rgba(255,255,255,.025)}
.nw4-ai>summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:12px 14px}
.nw4-ai>summary::-webkit-details-marker{display:none}
.nw4-at{display:flex;flex-direction:column;gap:2px}.nw4-at b{font-size:15px;line-height:1.3}
.nw4-ai[open]>summary{border-bottom:1px solid var(--nw-line)}
.nw4-ai .nw4-art{padding:4px 14px 14px}
.nw4.app .nw4-top{position:static;background:none}
/* 20/10 19:59 (dono, print do Portal Vermelho: "os eventos podem subir e ficar centralizados, estão muito para baixo, e podem ser
maiores; vamos escurecer a parte de cima para ficar visível todos os botões"): no computador (Clean), os banners de evento ficam
logo embaixo da fila de botões de cima, no centro, e maiores; uma faixa escura atrás da parte de cima da tela. */
.hf.hud2:not(.app) .gmbar{top:58px;left:50%;transform:translateX(-50%);align-items:center;max-width:720px}
.hf.hud2:not(.app) .evb{justify-content:center;gap:8px 10px;max-width:720px}
.hf.hud2:not(.app) .evb-c{grid-template-columns:38px minmax(0,1fr) auto;min-height:56px;min-width:250px;max-width:350px;padding:8px 12px 8px 11px;column-gap:11px;border-radius:12px}
.hf.hud2:not(.app) .evb-c > img{width:38px;height:38px}
.hf.hud2:not(.app) .evb-c > b{font-size:15px}
.hf.hud2:not(.app) .evb-c > .evb-s{font-size:12.5px}
.hf.hud2:not(.app) .evb-c > i{font-size:14px;padding:4px 9px}
.hf.hud2:not(.app) .evb-x{width:32px;height:32px;font-size:14px}
.hf.hud2:not(.app) .hf-stage::before{content:"";display:block!important;position:absolute;left:0;right:0;top:0;height:104px;z-index:-1;pointer-events:none;border:0;box-shadow:none;background:linear-gradient(rgba(6,6,7,.82),rgba(6,6,7,.55) 55%,rgba(6,6,7,0))}
/* 20/10 20:11 (dono: "pode subir mais, e a contagem de monstros embaixo"): os banners logo abaixo dos botões de cima e a contagem da
tarefa (0/40 monstros) desce para baixo deles (1, 2 ou 3 fileiras de banners). */
.hf.hud2:not(.app):has(.gmbar:not([hidden]) .evb-c) .hf-stage > .domchip{top:128px}
.hf.hud2:not(.app):has(.gmbar:not([hidden]) .evb-c ~ .evb-c ~ .evb-c) .hf-stage > .domchip{top:192px}
.hf.hud2:not(.app):has(.gmbar:not([hidden]) .evb-c ~ .evb-c ~ .evb-c ~ .evb-c ~ .evb-c) .hf-stage > .domchip{top:256px}
/* 20/10 20:45: abrir vários baús de uma vez: a lista do que saiu, por raridade. */
.cxm{position:relative;display:flex;flex-direction:column;gap:12px;padding:14px;max-height:100%;overflow:auto}
.cxm-h{display:flex;align-items:center;gap:12px;padding-right:34px}.cxm-h>img{width:56px;height:56px;image-rendering:pixelated;flex:none}
.cxm-h b{display:block;font-size:18px;color:#f6e3b0}.cxm-h small{display:block;color:#b9b2a2;margin:2px 0 6px}
.cxm-chips{display:flex;flex-wrap:wrap;gap:6px}.cxm-chip{padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.06);font-size:12px;font-weight:700}
.cxm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.cxm-it{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);text-align:center;min-width:0}
.cxm-it small{font-size:11px;line-height:1.2;color:currentColor;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cxm-it.r3,.cxm-it.r4,.cxm-it.r5,.cxm-it.r6{border-color:currentColor;box-shadow:0 0 10px -4px currentColor}
.cxm-it.sold{opacity:.6}.cxm-it em{font-style:normal;font-size:11px;color:#ffd76a}
.cxm .cx-acts{position:static!important;inset:auto;transform:none;opacity:1;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:4px}
.cxm-chip{display:inline-flex;align-items:baseline;gap:4px}.cxm-chip b{display:inline}
/* 20/10 20:45: streamers ao vivo agora: o número verde nos botões Streamer e a lista no balão do Streamer. */
.st-live-b.badge{background:radial-gradient(#5dff8a,#139c45);color:#062010;border-color:#e9ffe9}
[data-streampop].st-on{box-shadow:0 0 0 1px #3ddc6e,0 0 12px -2px #3ddc6e}
/* 20/10 21:36 (dono: "está colado nas bordas"): a mesma margem dos cartões de baixo (16px dos lados). */
.sp-live{display:flex;flex-direction:column;gap:6px;margin:0 16px 10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(61,220,110,.45);background:rgba(61,220,110,.07)}
.sp-live-t{display:flex;align-items:center;gap:6px;color:#8dffb0;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.sp-live-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.sp-live-r small{flex:1 1 140px;min-width:0;color:#c9c3b4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-live-r em{font-style:normal;font-size:12px;color:#c9c3b4}.sp-live-r .buy{margin-left:auto;text-decoration:none}
/* 20/10 21:07 (dono: "botão de lance deixar padrão pra todas as vezes, fica muito grande e feio"): item do chat em duas linhas:
o item com a largura toda em cima, e os botões Comprar / Dar lance pequenos e sempre do mesmo tamanho embaixo. */
.citem-card{flex-direction:column;align-items:stretch;width:min(100%,300px)}
.citem-card .cic-main{flex:none;width:100%;padding:4px 8px 2px 4px}
.citem-card .citem-t b{overflow-wrap:anywhere;word-break:normal}
.citem-card .cic-acts{display:flex;flex-wrap:wrap;gap:6px;padding:2px 8px 6px 54px}
.citem-card .cic-act{flex:none;flex-direction:row;gap:5px;min-width:0;height:24px;padding:0 10px 0 8px;border:0;border-radius:6px;font-size:11px;line-height:1;letter-spacing:.01em;white-space:nowrap;box-shadow:0 1px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35)}
.citem-card .cic-act img,.citem-card .cic-act .cic-svg{width:14px;height:14px;flex:none}
.citem-card .cic-act[data-cbid]{background:linear-gradient(180deg,#f2e3b8,#c9a560)}
/* 20/10 21:07 (dono: print das moedas em cima dos botões do topo): no visual clássico as moedas começam logo depois da coluna
da esquerda (não no meio nem presas na direita), assim não batem nos botões do topo, que ficam encostados na direita. */
.hf.dock .currencies,.hf.dock .currencies:has(.p-gema:not([hidden])){left:calc(var(--dl) + 12px);right:auto;transform:none;gap:8px}
@media (max-width:1399px){.hf.dock .currencies:has(.p-gema:not([hidden])) .pill{width:118px}.hf.dock .currencies{gap:6px}}
/* Topo apertado (o JS liga tt1, tt2 e tt3 só quando as moedas encostam nos botões do topo). */
.hf.dock.tt1 .currencies .pill,.hf.dock.tt1 .currencies:has(.p-gema:not([hidden])) .pill{width:auto;min-width:0;padding:0 6px 0 8px}
.hf.dock.tt1 .currencies .pill .pl{display:none}
.hf.dock.tt1 .currencies .pill .pv{min-width:48px}
.hf.dock.tt2 .topnav{gap:3px}
.hf.dock.tt2 .topnav .navbtn{width:38px!important;height:40px}
.hf.dock.tt2 .topnav .navbtn span{display:none}
.hf.dock.tt2 .topnav .navbtn img{width:22px;height:22px}
.hf.dock.tt2 .topnav .navbtn .nb-new{transform:scale(.7);top:-7px;right:-9px}
.hf.dock.tt3 .currencies .pill .plus{display:none}
.hf.dock.tt3 .currencies{gap:5px}
/* Registro da equipe (Desenvolvedor › Equipe GM, 20/10 21:30). */
.gmt-ls{display:flex;flex-direction:column;gap:4px;max-height:360px;overflow:auto;margin-top:8px}
.gmt-l{display:flex;gap:10px;align-items:flex-start;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.04);font-size:12.5px;line-height:1.35}
.gmt-l time{flex:none;width:78px;color:#a99f88;font-variant-numeric:tabular-nums;font-size:11.5px;padding-top:1px}
.gmt-l span{min-width:0;overflow-wrap:anywhere}.gmt-l b{color:#ffe7a8}
.gmt-l code{font:600 12px/1.3 ui-monospace,Consolas,monospace;color:#cfe3ff;background:rgba(0,0,0,.3);padding:1px 5px;border-radius:4px}
.gmt-l small{display:block;color:#b7ad97;font-size:11.5px;margin-top:2px}
.gmt-l.bad{background:rgba(255,80,80,.08);box-shadow:inset 3px 0 0 #e25555}.gmt-l.bad small{color:#ff9b9b}
/* 20/10 22:35 (dono, print do celular no clean: o "+3" verde dos streamers ao vivo solto no canto direito da tela): o número fica
preso no canto do botão Streamer (a pílula do topo não tinha posição, então o selo ia para a borda da tela). */
.h2p-st,.vc-b[data-streampop]{position:relative}
.h2p-st .st-live-b{position:absolute;top:-8px;right:-8px;left:auto;bottom:auto;z-index:2}
/* ===== Topo do celular clean (20/10 22:52, dono aprovou o protótipo "A compacta + menu ☰ da B") =====
Card do herói com retrato e nível, 3 barras (vida, mana, XP) com o número ao lado, moedas numa linha sem o nome, e VIP, Streamer,
Novidades e TopIdle dentro do ☰ (QuickMenu em hud.js). Só no celular em pé com o clean. */
.h2t-av{display:none}
.hf.hud2.app.is-portrait .h2top{width:auto;min-width:236px;max-width:calc(100% - 74px - var(--sl) - var(--sr));display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:7px;row-gap:3px;align-items:center;padding:8px 10px 9px 64px;box-sizing:border-box;min-height:66px;border-radius:16px;background:rgba(10,14,22,.76);box-shadow:inset 0 0 0 1px rgba(242,193,78,.30),0 4px 14px rgba(0,0,0,.35);-webkit-text-stroke:0;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.hf.hud2.app.is-portrait .h2top::before{display:none}
.hf.hud2.app.is-portrait .h2top .h2t-av{display:grid;place-items:center;position:absolute;left:8px;top:8px;width:46px;height:46px;padding:0;margin:0;border:0;border-radius:50%;background:radial-gradient(circle at 50% 35%,#3a2a55,#161020);box-shadow:inset 0 0 0 2px #f2c14e;pointer-events:auto;cursor:pointer;overflow:visible}
.hf.hud2.app.is-portrait .h2top .h2t-av img{width:40px;height:40px;border-radius:50%;object-fit:cover;image-rendering:pixelated}
.hf.hud2.app.is-portrait .h2t-lv{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);padding:0 6px;border-radius:8px;background:#f2c14e;color:#2a1a05;font:700 11px/14px "HF Sans",system-ui,sans-serif;font-style:normal;-webkit-text-stroke:0;text-shadow:none;white-space:nowrap}
.hf.hud2.app.is-portrait .h2t-row{grid-column:1/-1;grid-row:1;margin:0 0 1px;min-width:0}
.hf.hud2.app.is-portrait .h2t-sl{display:none}
.hf.hud2.app.is-portrait .h2t-sub{font-size:11.5px;color:#cfc6b0}
.hf.hud2.app.is-portrait .h2t-bars,.hf.hud2.app.is-portrait .h2t-nums{display:contents}
.hf.hud2.app.is-portrait .h2t-bars > i{grid-column:1;width:100%!important;margin:0!important;border-radius:4px;clip-path:none!important;transform:none!important;overflow:hidden;background:rgba(255,255,255,.10)}
.hf.hud2.app.is-portrait .h2t-bars > i > i{border-radius:inherit}
.hf.hud2.app.is-portrait .h2t-bars > i.h2t-hp{grid-row:2;height:8px}
.hf.hud2.app.is-portrait .h2t-bars > i.h2t-mp{grid-row:3;height:6px}
.hf.hud2.app.is-portrait .h2t-bars > i.h2t-xp{grid-row:4;height:4px}
.hf.hud2.app.is-portrait .h2t-nums > span{grid-column:2;font-size:10.5px;line-height:1;text-align:right;white-space:nowrap;-webkit-text-stroke:0;margin:0}
.hf.hud2.app.is-portrait .h2t-nums > [data-k="h2hpn"]{grid-row:2;color:#ffb3a8}
.hf.hud2.app.is-portrait .h2t-nums > [data-k="h2mpn"]{grid-row:3;color:#a9c6ff}
.hf.hud2.app.is-portrait .h2t-nums > [data-k="h2xpn"]{grid-row:4;color:#ffd76a}
.hf.hud2.app.is-portrait .h2cur{position:absolute;left:0;top:calc(100% + 8px);margin:0!important;display:flex;flex-wrap:nowrap;gap:6px;pointer-events:auto}
.hf.hud2.app.is-portrait .h2cur button{height:28px;padding:0 9px 0 5px;gap:5px;border-radius:14px;background:rgba(10,14,22,.72)}
.hf.hud2.app.is-portrait .h2cur small{display:none}
.hf.hud2.app.is-portrait .h2cur img{width:18px;height:18px}
.hf.hud2.app.is-portrait .h2cur b{font-size:13px}
.hf.hud2.app.is-portrait .hf-stage > .topcenter{top:calc(120px + var(--st))}
/* O ☰ e a coluna dos atalhos. */
.h2qm{display:none}
.hf.hud2.app.is-portrait .hf-stage > .h2qm:not([hidden]){display:flex;flex-direction:column;align-items:center;gap:6px;position:absolute;right:calc(8px + var(--sr));top:calc(34px + var(--st));z-index:25}
.h2qm-b{position:relative;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:rgba(10,14,22,.78);box-shadow:inset 0 0 0 1px rgba(242,193,78,.45),0 3px 10px rgba(0,0,0,.4);color:#f3ecd9;cursor:pointer}
.h2qm.open .h2qm-b{background:rgba(60,46,14,.95)}
.h2qm-live{position:absolute;top:-5px;right:-7px;padding:0 5px;border-radius:9px;background:#2fbf5a;color:#062010;font:700 11px/17px "HF Sans",system-ui,sans-serif;font-style:normal;box-shadow:0 0 0 2px #0a0e16}
.h2qm-live[hidden]{display:none}
.h2qm:has([data-b="news"]:not([data-n="0"]):not(:empty)) .h2qm-b::after{content:"";position:absolute;top:1px;left:1px;width:10px;height:10px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 2px #0a0e16}
.h2qm-tray{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;border-radius:24px;background:rgba(10,14,22,.88);box-shadow:inset 0 0 0 1px rgba(242,193,78,.25),0 6px 16px rgba(0,0,0,.45);animation:h2qmIn .18s ease-out}
.h2qm-tray[hidden]{display:none}
.h2qm-tray .h2-pops{display:flex!important;flex-direction:column;gap:6px;position:static!important;transform:none!important;margin:0}
.h2qm-tray .h2-vote{display:flex;position:static}
.h2qm-tray .h2-vote[hidden]{display:none}
.h2qm-tray .vc-b{position:relative;display:grid!important;place-items:center;width:40px!important;height:40px!important;min-width:0;max-width:none;padding:0!important;margin:0;border-radius:50%!important;animation:none!important;background:rgba(255,255,255,.07)!important;box-shadow:inset 0 0 0 1px rgba(242,193,78,.3)!important}
.h2qm-tray .vc-b > span{display:none!important}
.h2qm-tray .vc-b img{width:24px!important;height:24px!important;margin:0!important}
.h2qm-tray .vc-b .badge{position:absolute;top:-4px;right:-4px}
.h2qm-tray .h2p-st .st-live-b{top:-6px;right:-8px}
.hf.hud2.app.is-portrait.h2qm-on .hf-stage > :is(.h2q,.h2l){transform:translateY(var(--h2qm-push,200px));transition:transform .18s ease-out}
@keyframes h2qmIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}