:root {
  color-scheme: dark;
  --gold: #d8b66a;
  --gold-2: #f0d38a;
  --blue: #2f6da1;
  --blue-2: #56a0d6;
  --ink: #0b151b;
  --panel: rgba(10, 22, 29, .82);
  --line: rgba(216, 182, 106, .35);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#081015;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#f7f2e6}
button{font:inherit;color:inherit}
#game-shell{position:relative;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 30%,#355844,#0c1717 70%)}
#game{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.glass{background:linear-gradient(180deg,rgba(19,38,48,.88),rgba(8,17,23,.84));border:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.025);backdrop-filter:blur(8px)}
.hud-top{position:absolute;left:10px;right:10px;top:calc(8px + env(safe-area-inset-top));height:92px;border-radius:16px;display:grid;grid-template-columns:minmax(210px,1fr) auto auto;gap:10px;padding:8px 12px;align-items:center;z-index:5}
.player-card{display:flex;gap:10px;min-width:0}.portrait{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#457db1,#19354e 70%);border:2px solid var(--gold);font-weight:900;font-size:22px;box-shadow:0 0 0 3px rgba(216,182,106,.12)}
.player-info{width:min(330px,47vw)}.name-row{display:flex;align-items:center;gap:8px}.name-row strong{font-size:16px}.badge{font-size:11px;background:#233745;border:1px solid rgba(255,255,255,.1);padding:2px 6px;border-radius:8px}.class-row{font-size:11px;color:#bcd0da;margin:1px 0 4px}.bar{height:10px;border-radius:8px;background:#12191d;position:relative;overflow:hidden;margin:3px 0;border:1px solid rgba(255,255,255,.08)}.bar span{position:absolute;inset:0 auto 0 0;width:100%;transition:width .2s}.bar em{position:absolute;inset:-1px 0 auto 0;text-align:center;font-size:8px;font-style:normal;line-height:10px;text-shadow:0 1px 2px #000}.bar.hp span{background:linear-gradient(90deg,#8f2424,#da4949)}.bar.mp span{background:linear-gradient(90deg,#245684,#3f86c2)}
.bar.universe span{background:linear-gradient(90deg,#6a3fa0,#a35fe0)}.bar.universe{cursor:default;position:relative}.bar.universe.ready{border-color:#ffd76a;box-shadow:0 0 6px rgba(255,215,106,.6);cursor:pointer}.bar.universe.active{border-color:#ffb347;box-shadow:0 0 8px rgba(255,179,71,.8)}
/* V0.2-P9: a barra visual tem só 10px de altura — fino demais para tocar com precisão no
   celular (unico jeito de ativar o especial sem teclado). Pseudo-elemento invisivel
   estende a area clicavel/tocavel sem mudar a aparencia da barra. */
.bar.universe:before{content:'';position:absolute;inset:-12px 0;z-index:1}
.settings-panel{display:flex;flex-direction:column;gap:10px}.settings-row{display:grid;grid-template-columns:120px 1fr 44px;align-items:center;gap:10px;font-size:12px;color:#cdd9dd}.settings-row input[type="range"]{width:100%}.settings-row b{text-align:right;color:#f0d38a;font-size:11px}.settings-mute{grid-template-columns:120px auto}.settings-mute input{width:18px;height:18px}
.settings-btn{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.28);color:#e9f3f5;font-size:14px;line-height:1;cursor:pointer;z-index:6;display:grid;place-items:center;padding:0}
.currencies{display:flex;gap:8px}.currencies div{padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.2);font-size:13px;white-space:nowrap}.location-box{text-align:right;padding-right:4px}.location-box strong{display:block;color:var(--gold-2);font-family:Georgia,serif}.location-box span{font-size:11px;color:#c6d1d5}
.quest-panel{position:absolute;left:12px;top:100px;width:min(265px,43vw);border-radius:14px;padding:10px 12px;z-index:5}.panel-title{font-family:Georgia,serif;color:var(--gold-2);font-weight:700;margin-bottom:6px}.quest{padding:7px 0;border-top:1px solid rgba(255,255,255,.06)}.quest:first-of-type{border-top:0}.quest strong{display:block;font-size:12px}.quest span{display:block;color:#b9c9cf;font-size:10px;margin-top:2px;line-height:1.3}.quest.done{opacity:.55}.quest.done strong:before{content:'✓ ';color:#7fdf99}
.minimap{position:absolute;right:12px;top:100px;width:150px;height:170px;border-radius:18px;padding:8px;z-index:5;text-align:center}.minimap canvas{width:132px;height:132px;border-radius:50%;background:#203f34;border:2px solid rgba(216,182,106,.5)}.minimap span{font-size:10px;color:#d0dde1}
.toast{position:absolute;left:50%;top:20%;transform:translate(-50%,-20px);background:rgba(5,12,16,.9);border:1px solid var(--line);border-radius:12px;padding:10px 16px;opacity:0;pointer-events:none;transition:.25s;z-index:20;font-weight:700}.toast.show{opacity:1;transform:translate(-50%,0)}
.dialog{position:absolute;left:50%;bottom:130px;transform:translateX(-50%);width:min(540px,88vw);border-radius:16px;padding:15px 16px;z-index:22}.dialog.hidden{display:none}.dialog-title{font-weight:900;color:var(--gold-2);margin-bottom:5px}.dialog #dialog-text{font-size:13px;line-height:1.45;color:#e3e8e9}.dialog button{margin-top:12px;background:#244e6c;border:1px solid #4d81a5;border-radius:10px;padding:8px 12px}
.controls-left{position:absolute;left:18px;bottom:92px;z-index:8}.joystick{width:122px;height:122px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:radial-gradient(circle,rgba(32,58,69,.42),rgba(8,18,23,.25));position:relative;touch-action:none}.joystick:before{content:'';position:absolute;inset:18px;border-radius:50%;border:1px solid rgba(255,255,255,.08)}.stick{width:50px;height:50px;border-radius:50%;position:absolute;left:36px;top:36px;background:radial-gradient(circle at 35% 30%,#5c8297,#1c3441);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.controls-right{position:absolute;right:18px;bottom:88px;width:205px;height:178px;z-index:8}.skill,.attack{position:absolute;border:1px solid rgba(216,182,106,.45);background:radial-gradient(circle at 35% 30%,#355e77,#162a35 70%);border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.35)}.skill{width:58px;height:58px;font-size:24px}.skill span{position:absolute;font-size:9px;white-space:nowrap;left:50%;top:100%;transform:translate(-50%,2px);text-shadow:0 2px 3px #000}.skill.small{width:48px;height:48px;font-size:19px;right:78px;top:0}.skill.small span{font-size:8px}.skill:nth-of-type(2){left:14px;top:60px}.skill:nth-of-type(3){left:70px;top:95px}.skill:nth-of-type(4){left:130px;top:48px}.attack{width:76px;height:76px;right:0;bottom:0;font-size:34px;background:radial-gradient(circle at 35% 30%,#8f6f2c,#2b2314 72%)}
.bottom-nav{position:absolute;left:50%;bottom:calc(8px + env(safe-area-inset-bottom));transform:translateX(-50%);height:64px;width:min(760px,96vw);border-radius:18px;display:grid;grid-template-columns:repeat(7,1fr);z-index:9;overflow:hidden}.bottom-nav button{background:transparent;border:0;border-right:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:18px;position:relative}.bottom-nav button span{font-size:9px;color:#cfd9dc}.bottom-nav button small{font-size:7px;color:#927d60}.bottom-nav button.active{background:linear-gradient(180deg,rgba(51,101,131,.5),rgba(13,30,38,.2));color:var(--gold-2)}
.sheet{position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:30;display:grid;place-items:center;padding:18px}.sheet.hidden{display:none}.sheet-card{width:min(620px,94vw);max-height:75vh;border-radius:18px;padding:16px;overflow:auto}.sheet-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:8px;margin-bottom:12px}.sheet-head h2{font-family:Georgia,serif;color:var(--gold-2);margin:0}.sheet-head button{border:0;background:transparent;font-size:28px}.inventory-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.slot{aspect-ratio:1;border:1px solid rgba(216,182,106,.2);border-radius:10px;background:rgba(0,0,0,.2);display:grid;place-items:center;text-align:center;font-size:10px;padding:4px}.sheet-copy{font-size:13px;line-height:1.55;color:#d9e1e3}
#hit-flash{position:absolute;inset:0;background:radial-gradient(circle,rgba(200,20,20,0) 55%,rgba(200,20,20,.4) 100%);opacity:0;pointer-events:none;transition:opacity .12s ease-out;z-index:15}
#hit-flash.show{opacity:1}
.quest.heart-ally strong{color:#8fd0ff}
.quest.heart-enemy strong{color:#ff8f86}
#sheet-colecao-btn,#arena-result-restart,#arena-result-exit{margin-top:10px;margin-right:8px;background:#244e6c;border:1px solid #4d81a5;border-radius:10px;padding:8px 12px;cursor:pointer}
#arena-result-restart{background:#5c4318;border-color:#d8b66a}
.cdfx{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(4,10,12,.72) calc(var(--cd,0)*360deg), transparent 0);pointer-events:none;z-index:1}
.card-bar{position:absolute;left:50%;top:250px;transform:translateX(-50%);display:none;flex-wrap:wrap;gap:6px;max-width:94vw;z-index:6;align-items:center;padding:7px 10px;border-radius:14px}
#game-shell[data-mode="arena"] .card-bar{display:flex}
.card-bar .mana-readout{font-size:11px;font-weight:700;color:#7bc4ff;padding:4px 8px;background:rgba(0,0,0,.25);border-radius:8px;white-space:nowrap}
.card-chip{font-size:11px;font-weight:700;padding:6px 10px;border-radius:10px;border:1px solid rgba(216,182,106,.4);background:rgba(19,38,48,.85);color:#f7f2e6;cursor:pointer;display:flex;align-items:center;gap:6px}
.card-chip b{background:rgba(123,196,255,.25);border-radius:6px;padding:1px 5px;font-size:10px}
.card-chip.disabled{opacity:.4;cursor:not-allowed}
.card-chip.selected{outline:2px solid #f0d38a}
@media (max-width:720px){.hud-top{grid-template-columns:1fr auto;height:88px}.location-box{display:none}.quest-panel{top:104px;width:54vw;max-height:128px;overflow:hidden}.quest:nth-child(n+4){display:none}.minimap{top:104px;width:120px;height:137px}.minimap canvas{width:102px;height:102px}.controls-left{left:14px;bottom:83px}.joystick{width:108px;height:108px}.stick{left:31px;top:31px;width:46px;height:46px}.controls-right{right:10px;bottom:78px;transform:scale(.9);transform-origin:bottom right}.bottom-nav{height:58px}.currencies{gap:3px}.currencies div{padding:6px;font-size:11px}.card-bar{top:250px;padding:5px 8px}.card-chip{font-size:10px;padding:9px 9px}}
/* V0.2-P9: celular em PAISAGEM (largura maior que 720px, mas altura curta — a orientação
   principal da Arena). O breakpoint acima só olha largura e não pega esse caso: um
   iPhone/Android em paisagem tem 650-930px de largura (não ativa max-width:720px) mas só
   360-430px de altura, e o HUD dimensionado para desktop colide com joystick/botões.
   Descoberto nesta etapa simulando #game-shell em 812x375 e medindo getBoundingClientRect
   dos elementos — painel de missões sobre o joystick, minimapa sobre os botões de habilidade. */
@media (max-height:430px){
  .hud-top{height:60px;top:4px;padding:5px 10px}
  .hud-top .bar{height:6px;margin:2px 0}
  .portrait{width:34px;height:34px;font-size:15px}
  .name-row strong{font-size:12px}
  .class-row{display:none}
  .currencies div{padding:4px 6px;font-size:10px}
  .quest-panel{top:66px;max-height:64px;width:34vw;padding:5px 7px;overflow:hidden}
  .quest-panel .quest{padding:2px 0}
  .panel-title{margin-bottom:2px;font-size:11px}
  .minimap{top:66px;width:60px;height:70px;padding:3px}
  .minimap canvas{width:50px;height:50px}
  .minimap span{display:none}
  .card-bar{top:134px;padding:4px 7px;gap:4px}
  .card-chip{font-size:9px;padding:6px 7px}
  .mana-readout{font-size:9px;padding:3px 6px}
  .controls-left{bottom:56px;left:8px}
  .joystick{width:72px;height:72px}
  .stick{width:32px;height:32px;left:19px;top:19px}
  .controls-right{bottom:56px;right:8px;transform:scale(.6);transform-origin:bottom right}
  .bottom-nav{height:44px}
  .bottom-nav button span{font-size:6px}
}


/* ===== V0.3 — Cartas, Coleção, Deck e Raridades ===== */
.card-chip{position:relative;max-width:160px}
.card-chip .card-icon{font-size:15px;line-height:1}
.card-chip .card-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px}
.card-chip small{font-size:8px;color:#bcd0da;font-weight:600}
.card-chip.rarity-common{border-color:rgba(207,217,220,.35)}
.card-chip.rarity-rare{border-color:rgba(105,180,255,.65)}
.card-chip.rarity-epic{border-color:rgba(184,111,255,.72)}
.card-chip.rarity-legendary{border-color:rgba(255,190,75,.85);box-shadow:0 0 10px rgba(255,190,75,.12)}
.collection-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.collection-summary>div{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px}
.collection-summary strong,.collection-summary span{display:block}.collection-summary span{font-size:11px;color:#b9c9cf;margin-top:3px}
.collection-milestone{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(216,182,106,.08);border:1px solid rgba(216,182,106,.18);border-radius:10px;padding:8px 10px;margin:6px 0;font-size:11px}
.collection-milestone.claimed{opacity:.58}.collection-milestone button,.card-actions button{background:#244e6c;border:1px solid #4d81a5;border-radius:8px;padding:6px 9px;cursor:pointer;color:#f7f2e6;font-weight:700;font-size:10px}
.collection-milestone button:disabled,.card-actions button:disabled{opacity:.38;cursor:not-allowed}
.collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.collection-card{position:relative;background:rgba(8,18,23,.55);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:11px;min-width:0}
.collection-card.rarity-common{border-color:rgba(207,217,220,.28)}
.collection-card.rarity-rare{border-color:rgba(105,180,255,.5)}
.collection-card.rarity-epic{border-color:rgba(184,111,255,.58);background:linear-gradient(145deg,rgba(91,45,122,.16),rgba(8,18,23,.55))}
.collection-card.rarity-legendary{border-color:rgba(255,190,75,.72);background:linear-gradient(145deg,rgba(122,78,17,.18),rgba(8,18,23,.55));box-shadow:inset 0 0 18px rgba(255,190,75,.05)}
.collection-card.locked{filter:grayscale(.8);opacity:.45}
.collection-card-head{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}.collection-card-head strong{display:block;font-size:12px}.collection-card-head small{display:block;font-size:9px;color:#b9c9cf;margin-top:2px}.collection-card-icon{font-size:24px}.mana-badge{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:rgba(123,196,255,.22);border:1px solid rgba(123,196,255,.5);font-size:11px}
.collection-card p{font-size:10px;line-height:1.35;color:#c6d1d5;min-height:27px;margin:8px 0}
.card-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.card-stats span{background:rgba(0,0,0,.22);border-radius:6px;padding:4px 3px;font-size:9px;text-align:center}
.card-progress{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}.card-progress span{font-size:8px;background:rgba(255,255,255,.05);padding:3px 5px;border-radius:6px;color:#c9d6da}
.card-actions{display:flex;gap:6px}.card-actions button{flex:1}
@media(max-width:720px){.collection-grid{grid-template-columns:1fr}.collection-summary{grid-template-columns:1fr}.collection-card p{min-height:0}.card-chip .card-name{max-width:64px}}
@media(max-height:430px){.card-chip .card-name{display:none}.card-chip small{display:none}.card-chip{padding:6px 6px}.card-chip .card-icon{font-size:13px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* V0.3-P8: em celular paisagem curto, o painel de coleção reserva espaço real para a
   navegação inferior. Isso evita que o fim do sheet pareça ficar atrás da barra, mesmo
   com o overlay bloqueando interação por z-index. */
@media(max-height:430px){
  .sheet{padding:4px 8px 54px}
  .sheet-card{max-height:calc(100dvh - 62px);padding:12px}
  .sheet-head{margin-bottom:8px}
}


/* ===== V0.4 — Portal Universe / Planetas ===== */
.portal-intro{display:flex;flex-direction:column;gap:5px;padding:12px 14px;margin-bottom:12px;border:1px solid rgba(120,217,255,.25);border-radius:14px;background:linear-gradient(135deg,rgba(48,98,126,.25),rgba(83,49,112,.2))}.portal-intro strong{color:#dff5ff}.portal-intro span{font-size:12px;color:#b9cfd7}.party-foundation{padding:12px 14px;margin-bottom:12px;border:1px solid rgba(218,182,106,.22);border-radius:14px;background:rgba(16,29,34,.72)}.party-foundation>div:first-child{display:flex;justify-content:space-between;gap:10px}.party-foundation>div:first-child span{font-size:11px;color:#9eb6bd}.party-slots{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.party-slots span{padding:10px;border-radius:10px;background:rgba(61,96,100,.3);border:1px solid rgba(143,195,194,.2);text-align:center}.party-slots .empty{opacity:.58;border-style:dashed}.party-slots small{color:#a8c3c6}.party-foundation p{margin:0;color:#91aab0;font-size:11px}.planet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.planet-card{display:flex;flex-direction:column;gap:9px;padding:14px;border-radius:15px;border:1px solid rgba(122,183,173,.22);background:linear-gradient(150deg,rgba(18,38,44,.96),rgba(25,33,47,.94));min-height:218px}.planet-card.locked{filter:saturate(.55);opacity:.72}.planet-card.home{border-color:rgba(94,177,255,.38);box-shadow:inset 0 0 24px rgba(67,143,206,.08)}.planet-head{display:flex;align-items:center;gap:10px}.planet-icon{font-size:30px;filter:drop-shadow(0 0 8px rgba(126,217,255,.25))}.planet-head>div{display:flex;flex-direction:column}.planet-head strong{font-family:Georgia,serif;font-size:16px;color:#e6f5ef}.planet-head small{color:#91acaa}.planet-card p{margin:0;color:#a8bdbe;font-size:12px;line-height:1.45;flex:1}.planet-meta,.planet-progress{display:flex;flex-wrap:wrap;gap:6px}.planet-meta span,.planet-progress span{font-size:10px;padding:4px 7px;border-radius:999px;background:rgba(77,119,112,.2);color:#b9d4d0}.planet-progress span{background:rgba(76,111,139,.22)}.planet-card button{min-height:38px;border-radius:10px;border:1px solid rgba(116,209,176,.35);background:linear-gradient(#2d7460,#225448);color:#effff8;font-weight:800}.planet-card button:disabled{background:#29373b;color:#77888b;border-color:#3a484a}.sheet-card:has(.planet-grid){max-width:920px}
@media(max-width:720px){.planet-grid{grid-template-columns:1fr}.party-foundation>div:first-child{flex-direction:column}.party-slots{gap:5px}.party-slots span{padding:8px 4px;font-size:11px}.planet-card{min-height:0}.portal-intro{padding:10px}.sheet-card:has(.planet-grid){width:min(96vw,680px)}}
@media(max-height:430px) and (orientation:landscape){.planet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.planet-card{padding:9px;gap:5px;min-height:0}.planet-card p{font-size:10px}.planet-meta span,.planet-progress span{font-size:9px;padding:3px 5px}.party-foundation{padding:8px;margin-bottom:8px}.party-slots{margin:6px 0}.portal-intro{margin-bottom:8px}.planet-card button{min-height:32px}}


/* V0.4-P5 — Classes, afinidades e Livro de Fusões */
.fusion-intro{display:flex;flex-direction:column;gap:5px;padding:12px 14px;margin-bottom:14px;border:1px solid rgba(183,121,255,.28);border-radius:14px;background:linear-gradient(135deg,rgba(64,38,102,.42),rgba(25,72,87,.26))}.fusion-intro strong{color:#f2ddff}.fusion-intro span{font-size:12px;color:#bfcbd7}.sheet-section-title{font-family:Georgia,serif;color:#e8c878;margin:16px 0 8px}.affinity-grid,.fusion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.affinity-card,.fusion-card{padding:12px;border-radius:14px;border:1px solid rgba(216,182,106,.18);background:linear-gradient(150deg,rgba(16,29,36,.95),rgba(27,27,49,.94))}.affinity-card>div{display:flex;flex-direction:column;gap:2px}.affinity-card b{color:#f0d991}.affinity-card small{color:#8fa9b5}.affinity-card p{font-size:11px;color:#c1ccd0;line-height:1.5;margin:8px 0 0}.fusion-card{border-color:rgba(151,112,196,.25)}.fusion-card.active{border-color:rgba(255,160,74,.42);box-shadow:inset 0 0 22px rgba(255,112,44,.06)}.fusion-card.discovered{border-color:rgba(113,215,177,.42)}.fusion-card.planned{opacity:.78}.fusion-head{display:flex;align-items:center;gap:9px}.fusion-head>span{font-size:26px}.fusion-head>div{display:flex;flex-direction:column}.fusion-head strong{color:#f4e7bf}.fusion-head small{color:#a89cb8}.fusion-formula{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:5px;align-items:center;margin:10px 0}.fusion-formula span{padding:6px;border-radius:8px;background:rgba(91,73,119,.22);font-size:10px;text-align:center;color:#d8d1e5}.fusion-formula b{color:#e5bd5c}.fusion-card p{font-size:11px;color:#b9c5ca;line-height:1.45;margin:7px 0}.fusion-card>small{color:#87a9a8}.sheet-card:has(.fusion-grid){max-width:940px}
@media(max-width:720px){.affinity-grid,.fusion-grid{grid-template-columns:1fr}.fusion-formula{grid-template-columns:1fr auto 1fr;}.fusion-formula b:nth-of-type(2),.fusion-formula span:last-child{grid-column:auto}.sheet-card:has(.fusion-grid){width:min(96vw,700px)}}


/* ===== V0.4-P6 — Equipe local e Poder de Aliança ===== */
.hidden{display:none!important}
.alliance-hud{position:absolute;left:50%;top:108px;transform:translateX(-50%);z-index:7;width:min(390px,46vw);padding:8px 10px;border-radius:13px;display:grid;grid-template-columns:minmax(120px,1fr) 1.4fr auto;gap:8px;align-items:center;border:1px solid rgba(196,132,255,.34)}
.alliance-hud>div:first-child{display:flex;flex-direction:column}.alliance-hud strong{color:#eedaff;font-size:11px}.alliance-hud small{color:#9eb6c3;font-size:8px}.alliance-meter{position:relative;height:13px;border-radius:999px;background:rgba(10,15,28,.7);overflow:hidden;border:1px solid rgba(203,145,255,.22)}.alliance-meter span{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#7141ad,#b96cff,#73d9f6)}.alliance-meter em{position:absolute;inset:0;display:grid;place-items:center;font-size:8px;font-style:normal;color:white;text-shadow:0 1px 2px #000}.alliance-hud button{border-radius:8px;border:1px solid rgba(222,169,255,.42);background:#56317d;color:#fff;padding:6px 8px;font-size:9px;font-weight:900}.alliance-hud button:disabled{opacity:.42}
.party-slots span{position:relative}.party-remove{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,130,130,.35);background:rgba(96,30,35,.7);font-size:11px}.party-picker{display:flex!important;flex-wrap:wrap;gap:6px;margin:8px 0}.party-picker button{border:1px solid rgba(111,189,183,.28);background:#244d52;border-radius:8px;padding:6px 8px;font-size:10px}.party-picker button:disabled{opacity:.35}.party-combo{display:flex!important;flex-direction:column;gap:2px;padding:8px 10px;border-radius:9px;background:linear-gradient(120deg,rgba(103,56,151,.25),rgba(38,96,112,.2));border:1px solid rgba(178,124,236,.22)}.party-combo b{color:#e7caff;font-size:11px}.party-combo small{color:#b5c7ce;font-size:9px;line-height:1.35}
@media(max-width:720px){.alliance-hud{top:198px;width:min(76vw,430px);grid-template-columns:1fr 1fr auto;padding:6px 8px}.alliance-hud strong{font-size:9px}.alliance-hud small{font-size:7px}}
@media(max-height:430px) and (orientation:landscape){.alliance-hud{top:68px;width:44vw;min-width:300px;padding:4px 6px}.alliance-hud strong{font-size:8px}.alliance-hud small{display:none}.alliance-hud button{padding:4px 6px}.party-picker{margin:4px 0}.party-combo{padding:5px 7px}}


/* ===== V0.5-P1 — Seletor e identidade das 6 classes ===== */
.classes-intro{display:flex;flex-direction:column;gap:5px;padding:12px 14px;margin-bottom:12px;border:1px solid rgba(216,182,106,.24);border-radius:14px;background:linear-gradient(135deg,rgba(77,57,36,.34),rgba(55,39,86,.25))}.classes-intro strong{color:#f5e5b5}.classes-intro span{color:#b9c8ce;font-size:11px}.class-select-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.class-select-card{display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:13px;border:1px solid rgba(141,161,172,.18);background:linear-gradient(150deg,rgba(18,31,38,.96),rgba(31,28,48,.94))}.class-select-card.selected{border-color:rgba(234,197,106,.55);box-shadow:inset 0 0 24px rgba(216,182,106,.06)}.class-select-card>div{display:flex;align-items:center;gap:8px}.class-select-card>div span{font-size:23px}.class-select-card strong{color:#f2e0a7}.class-select-card p{margin:0;color:#afbec4;font-size:11px;line-height:1.4}.class-select-card small{color:#82b8ca;font-size:9px}.class-select-card em{font-style:normal;color:#c7a8ed;font-size:10px}.class-select-card button{margin-top:auto;border-radius:8px;border:1px solid rgba(216,182,106,.28);background:#315465;padding:7px;color:#fff;font-size:10px;font-weight:800}.class-select-card button:disabled{background:#3d3b32;color:#c9bb8d}.sheet-card:has(.class-select-grid){max-width:800px}
#sheet-classes-btn{margin-top:10px;margin-right:8px;background:#4c3764;border:1px solid #8062a2;border-radius:10px;padding:8px 12px;cursor:pointer}
@media(max-width:720px){.class-select-grid{grid-template-columns:1fr}.sheet-card:has(.class-select-grid){width:min(96vw,650px)}}
@media(max-height:430px) and (orientation:landscape){.class-select-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.class-select-card{padding:8px;gap:4px}.class-select-card p{font-size:9px}.class-select-card small,.class-select-card em{font-size:8px}.classes-intro{padding:8px;margin-bottom:8px}}


/* ===== V0.5-P2 — Identidade real de combate por classe ===== */
.class-effects{display:flex;flex-direction:column;gap:3px;padding:7px 8px;border-radius:8px;background:rgba(64,80,98,.18);border:1px solid rgba(126,181,202,.12)}.class-effects span{font-size:9px;color:#bcd4df}.class-effects span:before{content:'✦ ';color:#d8b66a}.class-select-card.selected .class-effects{background:rgba(105,81,45,.18);border-color:rgba(216,182,106,.18)}


/* ===== V0.5-P3 — Maestria e cartas oficiais ===== */
.mastery-row{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:7px 8px;border-radius:8px;background:rgba(216,182,106,.08);border:1px solid rgba(216,182,106,.15)}.mastery-row b{font-size:9px;color:#f2d68a}.mastery-row span{font-size:8px;color:#b7c8cc}.affinity-chip{display:inline-block;margin-top:3px;font-style:normal!important;font-size:8px!important;color:#e2ca8d!important;padding:2px 5px;border-radius:999px;background:rgba(216,182,106,.09);border:1px solid rgba(216,182,106,.13)}
/* ===== V0.6-P1: fusões permanentes + feedback de recursos ===== */
.fusion-intro>small{color:#e6c97d;font-size:11px;margin-top:3px}
.fusion-craft{display:flex;flex-direction:column;gap:5px;margin-top:10px;padding:9px;border-radius:10px;background:rgba(83,54,109,.2);border:1px solid rgba(170,126,219,.18)}
.fusion-craft>span{font-size:10px;color:#f0d38a;font-weight:800}.fusion-craft>small{font-size:9px;color:#9eb2ba;line-height:1.35}
.fusion-craft button{min-height:34px;border-radius:9px;border:1px solid rgba(111,215,177,.35);background:linear-gradient(#2d7460,#225448);color:#effff8;font-weight:800;cursor:pointer}
.fusion-craft button:disabled{opacity:.4;cursor:not-allowed;background:#303940;border-color:#46545a;color:#85969a}
/* ===== V0.8-P1 — ARENA UNIVERSE ===== */
#game-shell[data-mode="arena"]{background:radial-gradient(circle at 50% 42%,#2a1749 0,#0a1029 42%,#030612 100%)}
#game-shell[data-mode="arena"] .minimap{display:none}
#game-shell[data-mode="arena"] .quest-panel{left:50%;right:auto;top:106px;transform:translateX(-50%);width:min(650px,70vw);padding:7px 10px;border-radius:14px;background:linear-gradient(180deg,rgba(14,15,43,.9),rgba(7,9,28,.86));border-color:rgba(160,117,255,.34)}
#game-shell[data-mode="arena"] .quest-panel .panel-title{display:none}
#game-shell[data-mode="arena"] #quest-list{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
#game-shell[data-mode="arena"] .quest{border:0;padding:2px 5px;text-align:center}
#game-shell[data-mode="arena"] .quest strong{font-size:10px;letter-spacing:.08em}
#game-shell[data-mode="arena"] .quest span{font-size:9px;margin-top:2px}
#game-shell[data-mode="arena"] .arena-team.ally strong{color:#8ddaff}
#game-shell[data-mode="arena"] .arena-team.enemy strong{color:#e09bff}
#game-shell[data-mode="arena"] .arena-clock{min-width:120px;border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08)}
#game-shell[data-mode="arena"] .arena-clock strong{color:#f0d38a;font-family:Georgia,serif}
#game-shell[data-mode="arena"] .arena-clock span{font-size:14px;color:#fff;font-weight:900}
#game-shell[data-mode="arena"] .card-bar{display:flex;top:auto;bottom:80px;flex-wrap:nowrap;max-width:min(820px,72vw);overflow-x:auto;scrollbar-width:none;padding:6px 8px;background:linear-gradient(180deg,rgba(16,19,50,.92),rgba(6,8,24,.9));border-color:rgba(139,94,255,.38)}
#game-shell[data-mode="arena"] .card-bar::-webkit-scrollbar{display:none}
#game-shell[data-mode="arena"] .card-bar .mana-readout{position:sticky;left:0;z-index:2;background:linear-gradient(180deg,#5724a0,#2a135f);color:#f7eaff;border:1px solid rgba(209,169,255,.55);font-size:10px}
#game-shell[data-mode="arena"] .card-chip{min-width:92px;max-width:118px;justify-content:center;gap:4px;background:linear-gradient(180deg,rgba(36,29,69,.96),rgba(14,13,38,.96));border-radius:12px;padding:7px 7px;box-shadow:0 4px 12px rgba(0,0,0,.32)}
#game-shell[data-mode="arena"] .card-chip .card-icon{font-size:18px}
#game-shell[data-mode="arena"] .card-chip .card-name{max-width:62px;font-size:9px}
#game-shell[data-mode="arena"] .card-chip.selected{outline:2px solid #c692ff;box-shadow:0 0 18px rgba(167,91,255,.48)}
#game-shell[data-mode="arena"] .hud-top{background:linear-gradient(180deg,rgba(9,13,37,.92),rgba(7,10,28,.85));border-color:rgba(133,102,230,.30)}
#game-shell[data-mode="arena"] .controls-left{bottom:94px}
#game-shell[data-mode="arena"] .controls-right{bottom:90px}
#game-shell[data-mode="arena"] .bottom-nav{background:linear-gradient(180deg,rgba(12,15,40,.94),rgba(5,7,20,.95));border-color:rgba(128,93,220,.25)}
@media(max-width:720px){
  #game-shell[data-mode="arena"] .quest-panel{top:96px;width:calc(100vw - 14px);max-height:none;padding:5px 6px}
  #game-shell[data-mode="arena"] #quest-list{gap:3px}
  #game-shell[data-mode="arena"] .arena-clock{min-width:90px}
  #game-shell[data-mode="arena"] .quest strong{font-size:8px}
  #game-shell[data-mode="arena"] .quest span{font-size:7px}
  #game-shell[data-mode="arena"] .arena-clock span{font-size:12px}
  #game-shell[data-mode="arena"] .card-bar{bottom:61px;max-width:94vw;padding:4px 5px;gap:4px}
  #game-shell[data-mode="arena"] .card-chip{min-width:72px;max-width:82px;padding:5px 5px}
  #game-shell[data-mode="arena"] .card-chip .card-name{display:none}
  #game-shell[data-mode="arena"] .controls-left{bottom:118px}
  #game-shell[data-mode="arena"] .controls-right{bottom:112px}
}
@media(max-height:430px){
  #game-shell[data-mode="arena"] .quest-panel{top:64px;width:min(520px,64vw);padding:3px 5px}
  #game-shell[data-mode="arena"] .card-bar{top:auto;bottom:45px;max-width:68vw;padding:3px 4px}
  #game-shell[data-mode="arena"] .card-chip{min-width:50px;max-width:58px;padding:3px 4px}
  #game-shell[data-mode="arena"] .card-chip .card-icon{font-size:13px}
  #game-shell[data-mode="arena"] .card-bar .mana-readout{font-size:8px;padding:3px 5px}
  #game-shell[data-mode="arena"] .controls-left{bottom:52px}
  #game-shell[data-mode="arena"] .controls-right{bottom:48px}
}


/* ===== V0.8-P3 — Arena Universe: identidade visual, leitura e HUD ===== */
#game-shell[data-mode="arena"] .currencies{display:none}
#game-shell[data-mode="arena"] .hud-top{
  height:78px;grid-template-columns:minmax(250px,1fr) auto;max-width:min(900px,calc(100vw - 20px));
  right:auto;width:calc(100% - 20px);padding:7px 10px;border-radius:15px
}
#game-shell[data-mode="arena"] .player-info{width:min(390px,55vw)}
#game-shell[data-mode="arena"] .portrait{font-size:24px}
#game-shell[data-mode="arena"] .class-row{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:380px;color:#d8e7ed}
#game-shell[data-mode="arena"] .location-box strong{letter-spacing:.05em}
#game-shell[data-mode="arena"] .quest-panel{top:90px}
#game-shell[data-mode="arena"] .bottom-nav{
  left:auto;right:12px;transform:none;width:82px;height:50px;grid-template-columns:1fr;bottom:10px;border-radius:14px
}
#game-shell[data-mode="arena"] .bottom-nav button:not(#btn-arena){display:none}
#game-shell[data-mode="arena"] .bottom-nav #btn-arena{display:flex;font-size:18px;border:0;background:linear-gradient(180deg,rgba(78,42,126,.85),rgba(26,18,58,.88))}
#game-shell[data-mode="arena"] .bottom-nav #btn-arena span{font-size:8px}
#game-shell[data-mode="arena"] .card-bar{
  bottom:14px;max-width:min(760px,calc(100vw - 250px));min-height:54px;
  box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 18px rgba(132,79,255,.16)
}
#game-shell[data-mode="arena"] .card-chip{min-height:40px;border-width:1px;transition:transform .12s ease,box-shadow .12s ease}
#game-shell[data-mode="arena"] .card-chip:hover{transform:translateY(-1px)}
#game-shell[data-mode="arena"] .controls-left{bottom:72px}
#game-shell[data-mode="arena"] .controls-right{bottom:66px}
@media(max-width:720px){
  #game-shell[data-mode="arena"] .hud-top{height:76px;grid-template-columns:1fr;width:calc(100vw - 14px);left:7px;right:7px;max-width:none}
  #game-shell[data-mode="arena"] .location-box{display:none}
  #game-shell[data-mode="arena"] .player-info{width:calc(100vw - 92px)}
  #game-shell[data-mode="arena"] .class-row{max-width:calc(100vw - 105px);font-size:9px}
  #game-shell[data-mode="arena"] .quest-panel{top:82px}
  #game-shell[data-mode="arena"] .card-bar{bottom:8px;left:8px;transform:none;max-width:calc(100vw - 102px);width:calc(100vw - 102px)}
  #game-shell[data-mode="arena"] .bottom-nav{right:7px;bottom:8px;width:82px;height:50px}
  #game-shell[data-mode="arena"] .controls-left{bottom:76px}
  #game-shell[data-mode="arena"] .controls-right{bottom:72px}
}
@media(max-height:430px){
  #game-shell[data-mode="arena"] .hud-top{height:55px;top:4px;padding:3px 7px}
  #game-shell[data-mode="arena"] .portrait{width:42px;height:42px;font-size:19px}
  #game-shell[data-mode="arena"] .class-row{font-size:7px}
  #game-shell[data-mode="arena"] .quest-panel{top:60px}
  #game-shell[data-mode="arena"] .card-bar{bottom:4px;left:86px;width:auto;max-width:calc(100vw - 176px)}
  #game-shell[data-mode="arena"] .bottom-nav{height:42px;width:72px;bottom:4px}
  #game-shell[data-mode="arena"] .controls-left{bottom:48px}
  #game-shell[data-mode="arena"] .controls-right{bottom:44px}
}

/* ===== V0.8-P4 — telemetria, dificuldade e ritmo de partida ===== */
#game-shell[data-mode="arena"] #arena-difficulty-inline{
  display:block;margin:3px auto 0;max-width:94px;height:19px;padding:0 5px;border-radius:7px;
  border:1px solid rgba(192,155,255,.35);background:rgba(18,13,45,.9);color:#dcc9ff;
  font-size:8px;font-weight:800;text-align:center;outline:none
}
#game-shell[data-mode="arena"] .arena-clock.surge{border-color:rgba(224,126,255,.35);box-shadow:inset 0 0 18px rgba(163,72,255,.12)}
#game-shell[data-mode="arena"] .arena-clock.surge strong{color:#e2a6ff;text-shadow:0 0 10px rgba(196,107,255,.45)}
#game-shell[data-mode="arena"] .mana-readout.surge{background:linear-gradient(180deg,#812fc1,#3a176f);border-color:#dc8cff;box-shadow:0 0 12px rgba(191,92,255,.32)}
#arena-result .sheet-card{width:min(680px,94vw)}
.arena-grade{display:flex;align-items:center;gap:12px;margin:12px 0;padding:10px 12px;border-radius:12px;background:linear-gradient(90deg,rgba(104,56,166,.28),rgba(25,60,91,.16));border:1px solid rgba(184,135,255,.22)}
.arena-grade b{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;font:900 27px/1 Georgia,serif;color:#f4d98d;border:2px solid rgba(240,211,138,.55);background:rgba(7,10,31,.8);box-shadow:0 0 18px rgba(195,133,255,.18)}
.arena-grade span{font-size:11px;color:#c9d5df;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.arena-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.arena-stats-grid div{padding:10px 8px;border-radius:10px;text-align:center;background:rgba(13,24,43,.68);border:1px solid rgba(110,146,190,.16)}
.arena-stats-grid b{display:block;font-size:17px;color:#f3e5bd}.arena-stats-grid span{display:block;margin-top:3px;font-size:8px;color:#93a8b4;text-transform:uppercase;letter-spacing:.05em}
.arena-mvp{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:center;margin-top:10px;padding:10px 12px;border-radius:11px;background:rgba(91,61,33,.18);border:1px solid rgba(216,182,106,.20)}
.arena-mvp span{grid-row:1/3;font-size:10px;color:#dfc27c;font-weight:900}.arena-mvp strong{font-size:13px}.arena-mvp small{font-size:9px;color:#aebcc4}
.arena-result-foot{margin-top:9px;font-size:9px;color:#889da9;text-align:center}
@media(max-width:720px){
  #game-shell[data-mode="arena"] #arena-difficulty-inline{max-width:78px;height:16px;font-size:7px;margin-top:1px}
  .arena-stats-grid{grid-template-columns:repeat(2,1fr)}
  .arena-stats-grid div{padding:8px 6px}.arena-grade{padding:8px}.arena-grade b{width:42px;height:42px;font-size:23px}
}
@media(max-height:430px) and (orientation:landscape){
  #game-shell[data-mode="arena"] #arena-difficulty-inline{display:none}
  #arena-result .sheet-card{max-height:92vh;padding:10px}.arena-stats-grid{grid-template-columns:repeat(6,1fr);gap:4px}.arena-stats-grid div{padding:6px 3px}.arena-stats-grid b{font-size:12px}.arena-mvp{padding:6px 8px}.arena-grade{margin:6px 0;padding:5px}.arena-grade b{width:34px;height:34px;font-size:19px}
}

/* ===== V0.8-P6 — HUD premium, cartas e assinatura das classes ===== */
#game-shell[data-mode="arena"] .card-bar{
  gap:7px;padding:7px 9px;border-radius:18px;
  background:linear-gradient(180deg,rgba(15,18,48,.96),rgba(6,7,23,.96));
  box-shadow:0 10px 34px rgba(0,0,0,.58),0 0 28px rgba(122,77,255,.16);
}
#game-shell[data-mode="arena"] .mana-readout{
  min-width:66px;height:56px;padding:5px 8px;display:grid;grid-template-columns:auto auto;grid-template-rows:1fr 1fr;
  place-content:center;align-items:center;justify-items:center;column-gap:4px;border-radius:14px;
  box-shadow:inset 0 0 18px rgba(174,112,255,.18),0 0 16px rgba(111,69,222,.15)
}
#game-shell[data-mode="arena"] .mana-readout span{grid-row:1 / 3;font-size:18px;color:#cf92ff;text-shadow:0 0 10px rgba(197,121,255,.55)}
#game-shell[data-mode="arena"] .mana-readout strong{font:900 18px/1 Georgia,serif;color:#fff}
#game-shell[data-mode="arena"] .mana-readout small{font-size:8px;color:#cbbbe2}
#game-shell[data-mode="arena"] .card-chip{
  position:relative;display:grid;grid-template-columns:42px minmax(46px,1fr);grid-template-rows:1fr;
  align-items:center;justify-content:stretch;gap:6px;min-width:126px;max-width:144px;min-height:58px;padding:5px 7px 5px 6px;
  overflow:hidden;border:1px solid color-mix(in srgb,var(--rarity-accent) 75%,transparent);border-radius:14px;
  background:
    radial-gradient(circle at 20% 35%,color-mix(in srgb,var(--card-primary) 45%,transparent),transparent 38%),
    linear-gradient(180deg,rgba(32,29,69,.98),rgba(10,10,31,.98));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 5px 14px rgba(0,0,0,.38);
}
#game-shell[data-mode="arena"] .card-chip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rarity-accent);opacity:.8}
#game-shell[data-mode="arena"] .card-chip .card-art{
  position:relative;width:40px;height:46px;display:grid;place-items:center;border-radius:10px;
  background:radial-gradient(circle at 45% 35%,color-mix(in srgb,var(--card-accent) 48%,#fff 6%),color-mix(in srgb,var(--card-primary) 65%,#101326 35%));
  border:1px solid color-mix(in srgb,var(--card-accent) 58%,transparent);box-shadow:inset 0 0 12px rgba(255,255,255,.05)
}
#game-shell[data-mode="arena"] .card-chip .card-art i{font-style:normal;font-size:22px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
#game-shell[data-mode="arena"] .card-chip .card-art em{position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;font-size:9px;font-style:normal;background:#11152d;border:1px solid var(--card-accent)}
#game-shell[data-mode="arena"] .card-chip .card-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;gap:3px}
#game-shell[data-mode="arena"] .card-chip .card-name{display:block;max-width:84px;font-size:9px;line-height:1.05;color:#fff;white-space:normal;text-align:left}
#game-shell[data-mode="arena"] .card-chip .card-info small{display:block;max-width:84px;font-size:7px;color:#aebbd1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#game-shell[data-mode="arena"] .card-chip .card-cost{position:absolute;left:1px;top:1px;z-index:2;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;font:900 9px/1 system-ui;color:#fff;background:linear-gradient(180deg,#8e52dd,#442084);border:1px solid #d4a5ff;box-shadow:0 2px 5px rgba(0,0,0,.4)}
#game-shell[data-mode="arena"] .card-chip .card-rarity-dot{position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--rarity-accent);box-shadow:0 0 8px var(--rarity-accent)}
#game-shell[data-mode="arena"] .card-chip.disabled{filter:grayscale(.5) brightness(.65);opacity:.55}
#game-shell[data-mode="arena"] .card-chip.selected{outline:2px solid var(--card-accent);transform:translateY(-4px);box-shadow:0 0 22px color-mix(in srgb,var(--card-accent) 48%,transparent),0 8px 18px rgba(0,0,0,.45)}
#game-shell[data-mode="arena"] .skill,#game-shell[data-mode="arena"] .attack{
  border-color:color-mix(in srgb,var(--skill-accent,#d8b66a) 60%,transparent);
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--skill-primary,#355e77) 74%,#ffffff 5%),#121c2c 72%);
  box-shadow:0 4px 12px rgba(0,0,0,.4),0 0 14px color-mix(in srgb,var(--skill-aura,#78c9ff) 20%,transparent)
}
#game-shell[data-mode="arena"] .attack{box-shadow:0 6px 18px rgba(0,0,0,.52),0 0 22px color-mix(in srgb,var(--skill-aura,#ffd56c) 32%,transparent)}
#game-shell[data-mode="arena"][data-hero-class="feiticeiro"] .portrait,
#game-shell[data-mode="arena"][data-hero-class="bruxo"] .portrait{border-radius:42% 58% 50% 50%}
#game-shell[data-mode="arena"][data-hero-class="arqueiro"] .portrait{clip-path:polygon(50% 0,92% 23%,85% 82%,50% 100%,15% 82%,8% 23%)}
#game-shell[data-mode="arena"] .portrait{transition:filter .2s ease,transform .2s ease}
#game-shell[data-mode="arena"] #universe-bar-wrap.active + *{filter:none}
@media(max-width:720px){
  #game-shell[data-mode="arena"] .card-bar{gap:4px;padding:4px 5px;border-radius:13px}
  #game-shell[data-mode="arena"] .mana-readout{min-width:48px;height:46px;padding:3px 4px}
  #game-shell[data-mode="arena"] .mana-readout span{font-size:14px}#game-shell[data-mode="arena"] .mana-readout strong{font-size:14px}
  #game-shell[data-mode="arena"] .card-chip{grid-template-columns:34px 1fr;min-width:86px;max-width:98px;min-height:48px;padding:4px 5px;gap:4px}
  #game-shell[data-mode="arena"] .card-chip .card-art{width:32px;height:38px;border-radius:8px}
  #game-shell[data-mode="arena"] .card-chip .card-art i{font-size:18px}
  #game-shell[data-mode="arena"] .card-chip .card-name{display:block;max-width:52px;font-size:7px}
  #game-shell[data-mode="arena"] .card-chip .card-info small{display:none}
  #game-shell[data-mode="arena"] .card-chip .card-cost{width:16px;height:16px;font-size:8px}
}
@media(max-height:430px){
  #game-shell[data-mode="arena"] .card-chip{grid-template-columns:28px 1fr;min-width:70px;max-width:78px;min-height:38px;padding:2px 3px}
  #game-shell[data-mode="arena"] .card-chip .card-art{width:27px;height:31px}.card-chip .card-art i{font-size:15px}
  #game-shell[data-mode="arena"] .card-chip .card-name{font-size:6px;max-width:40px}
  #game-shell[data-mode="arena"] .mana-readout{height:36px;min-width:42px}
}


/* ===== V0.8-P7 — leitura dos objetivos ===== */
#game-shell[data-mode="arena"] .quest-panel{
  background:linear-gradient(180deg,rgba(10,12,39,.96),rgba(9,11,31,.90));
  border-color:rgba(157,112,239,.34);box-shadow:0 8px 24px rgba(0,0,0,.42),0 0 18px rgba(112,74,208,.10)
}
#game-shell[data-mode="arena"] .quest.arena-team{position:relative;overflow:hidden}
#game-shell[data-mode="arena"] .quest.arena-team:after{content:"";position:absolute;left:7px;right:7px;bottom:2px;height:2px;border-radius:2px;opacity:.75}
#game-shell[data-mode="arena"] .quest.arena-team.ally:after{background:linear-gradient(90deg,transparent,#56c9ff,transparent)}
#game-shell[data-mode="arena"] .quest.arena-team.enemy:after{background:linear-gradient(90deg,transparent,#d877ff,transparent)}
#game-shell[data-mode="arena"] .quest.arena-clock{background:radial-gradient(circle at 50% 20%,rgba(121,75,190,.22),transparent 65%)}


/* ===== V0.8-P9 — salto gráfico: atmosfera, vidro e profundidade ===== */
#game-shell[data-mode="arena"]{background:
  radial-gradient(circle at 50% 12%,rgba(89,47,147,.18),transparent 34%),
  radial-gradient(circle at 50% 85%,rgba(28,108,148,.15),transparent 38%),#050914}
#game-shell[data-mode="arena"]::before{content:"";pointer-events:none;position:absolute;inset:0;z-index:2;background:
  linear-gradient(90deg,rgba(0,0,0,.28),transparent 18%,transparent 82%,rgba(0,0,0,.28)),
  linear-gradient(180deg,rgba(0,0,0,.10),transparent 25%,transparent 76%,rgba(0,0,0,.20));box-shadow:inset 0 0 90px rgba(0,0,0,.36)}
#game-shell[data-mode="arena"] canvas{filter:saturate(1.08) contrast(1.035)}
#game-shell[data-mode="arena"] .hud-top{backdrop-filter:blur(12px);background:linear-gradient(180deg,rgba(8,12,35,.88),rgba(6,10,28,.78));box-shadow:0 12px 32px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.05)}
#game-shell[data-mode="arena"] .portrait{box-shadow:0 0 0 2px rgba(235,199,103,.60),0 0 18px var(--skill-aura,#65c9ff),inset 0 0 18px rgba(255,255,255,.06)}
#game-shell[data-mode="arena"] .card-bar{backdrop-filter:blur(13px);border-color:rgba(178,128,255,.34);box-shadow:0 16px 38px rgba(0,0,0,.62),0 0 32px rgba(113,65,220,.18),inset 0 1px 0 rgba(255,255,255,.055)}
#game-shell[data-mode="arena"] .card-chip{box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),0 8px 19px rgba(0,0,0,.46)}
#game-shell[data-mode="arena"] .card-chip:hover{filter:brightness(1.08);transform:translateY(-3px)}
#game-shell[data-mode="arena"] .controls-right .skill,#game-shell[data-mode="arena"] .controls-right .attack{backdrop-filter:blur(8px)}
#game-shell[data-mode="arena"] .quest-panel{backdrop-filter:blur(11px)}
@media(max-width:720px){#game-shell[data-mode="arena"]::before{box-shadow:inset 0 0 44px rgba(0,0,0,.28)}#game-shell[data-mode="arena"] canvas{filter:saturate(1.04) contrast(1.02)}}


/* ===== V0.8-P10 — consolidação visual "parece um jogo" ===== */
#game-shell[data-mode="arena"] .hud-top{border:1px solid rgba(153,115,255,.28)}
#game-shell[data-mode="arena"] .name-row strong{font-size:15px;letter-spacing:.01em;text-shadow:0 2px 8px rgba(0,0,0,.55)}
#game-shell[data-mode="arena"] .location-box strong{font-family:Georgia,serif;color:#f4d88b;text-shadow:0 0 14px rgba(230,187,88,.18)}
#game-shell[data-mode="arena"] .card-chip .card-art{overflow:hidden;background:radial-gradient(circle at 48% 32%,color-mix(in srgb,var(--card-accent) 55%,white 6%),color-mix(in srgb,var(--card-primary) 78%,#080b1b 22%));box-shadow:inset 0 0 18px rgba(255,255,255,.08),0 0 12px color-mix(in srgb,var(--card-accent) 17%,transparent)}
#game-shell[data-mode="arena"] .card-chip.selected{animation:ufCardReady 1.15s ease-in-out infinite alternate}
@keyframes ufCardReady{to{box-shadow:0 0 28px color-mix(in srgb,var(--card-accent) 60%,transparent),0 10px 22px rgba(0,0,0,.55)}}
#game-shell[data-mode="arena"] .skill span{font-weight:800;letter-spacing:.01em}
#game-shell[data-mode="arena"] .attack{border-width:1.5px}
#game-shell[data-mode="arena"] .joystick{background:radial-gradient(circle,rgba(63,116,147,.24),rgba(7,15,25,.12) 60%,rgba(0,0,0,.08));border-color:rgba(137,209,242,.22)}
@media(max-width:720px){#game-shell[data-mode="arena"] .name-row strong{font-size:13px}#game-shell[data-mode="arena"] .card-chip{box-shadow:0 6px 12px rgba(0,0,0,.44)}}


/* ===== V0.8-P11/P12 — cards ilustrados, intro e integração ===== */
#game-shell[data-mode="arena"] .card-chip .card-art img{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);object-fit:contain;object-position:center 58%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.55));z-index:1;pointer-events:none}
#game-shell[data-mode="arena"] .card-chip .card-art i{position:absolute;right:2px;top:2px;z-index:2;font-size:10px;opacity:.8;background:rgba(5,8,22,.55);width:17px;height:17px;display:grid;place-items:center;border-radius:50%}
#game-shell[data-mode="arena"] .card-chip .card-art em{z-index:3}
.arena-intro{position:absolute;inset:0;z-index:30;display:grid;place-content:center;justify-items:center;pointer-events:none;background:radial-gradient(circle at center,rgba(32,21,67,.34),rgba(2,4,12,.08) 42%,transparent 68%);opacity:0}
.arena-intro.play{animation:ufArenaIntro 1.8s ease both}
.arena-intro-mark{width:74px;height:74px;display:grid;place-items:center;border:1px solid rgba(242,210,116,.68);border-radius:50%;font:900 34px/1 Georgia,serif;color:#f4d77e;background:radial-gradient(circle,#44267c 0,#0b1029 68%);box-shadow:0 0 35px rgba(171,94,255,.42),inset 0 0 24px rgba(255,226,148,.08)}
.arena-intro strong{margin-top:12px;font:900 25px/1.1 Georgia,serif;letter-spacing:.14em;color:#f7dd8e;text-shadow:0 0 18px rgba(237,191,87,.24),0 4px 12px #000}
.arena-intro span{margin-top:8px;font-size:9px;font-weight:900;letter-spacing:.19em;color:#d7cdf7;text-shadow:0 2px 8px #000}
@keyframes ufArenaIntro{0%{opacity:0;transform:scale(.92)}18%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0;transform:scale(1.04)}}
@media(max-width:720px){.arena-intro-mark{width:58px;height:58px;font-size:27px}.arena-intro strong{font-size:18px}.arena-intro span{font-size:7px;letter-spacing:.12em}}

/* ===== V0.8-P26 — MOBILE FIRST + POLIMENTO DE CONTROLES ===== */
html,body,#game-shell{height:100%;height:100dvh;overscroll-behavior:none}
#game-shell{min-height:100svh}
.controls-left,.controls-right,.bottom-nav,.card-bar,.hud-top,.quest-panel,.minimap{user-select:none;-webkit-user-select:none}
.skill,.attack,.bottom-nav button,.card-chip,.joystick{touch-action:manipulation}
.joystick{touch-action:none}

/* alvos de toque e leitura */
@media (pointer:coarse){
  .skill{min-width:54px;min-height:54px}.skill.small{min-width:48px;min-height:48px}.attack{min-width:72px;min-height:72px}
  .bottom-nav button{min-height:48px}.card-chip{min-height:46px}
  .sheet-head button{min-width:44px;min-height:44px}
}

/* CELULAR EM PÉ — hub / expedições */
@media (max-width:600px) and (orientation:portrait){
  .hud-top{left:6px;right:6px;top:calc(5px + env(safe-area-inset-top));height:72px;padding:6px 8px;border-radius:13px;grid-template-columns:minmax(0,1fr) auto;gap:6px}
  .portrait{width:44px;height:44px;font-size:18px}.player-card{gap:7px}.player-info{width:auto;min-width:0}
  .name-row strong{font-size:13px}.badge{font-size:9px;padding:1px 5px}.class-row{font-size:9px;margin:0 0 2px}
  .bar{height:8px;margin:2px 0}.bar em{font-size:7px;line-height:8px}.currencies div{font-size:10px;padding:5px 6px}.location-box{display:none}
  .quest-panel{left:6px;top:calc(82px + env(safe-area-inset-top));width:min(54vw,220px);max-height:124px;padding:7px 9px;border-radius:12px;overflow:hidden}
  .panel-title{font-size:13px;margin-bottom:3px}.quest{padding:4px 0}.quest strong{font-size:10px}.quest span{font-size:8px}.quest:nth-child(n+4){display:none}
  .minimap{right:6px;top:calc(82px + env(safe-area-inset-top));width:104px;height:118px;padding:6px;border-radius:14px}.minimap canvas{width:90px;height:90px}.minimap span{font-size:8px}
  .controls-left{left:8px;bottom:calc(66px + env(safe-area-inset-bottom))}.joystick{width:96px;height:96px}.joystick:before{inset:14px}.stick{width:42px;height:42px;left:27px;top:27px}
  .controls-right{right:6px;bottom:calc(62px + env(safe-area-inset-bottom));width:184px;height:160px;transform:scale(.86);transform-origin:bottom right}
  .bottom-nav{left:6px;right:6px;bottom:calc(5px + env(safe-area-inset-bottom));transform:none;width:auto;height:54px;border-radius:14px}
  .bottom-nav button{font-size:17px;min-width:0}.bottom-nav button span{font-size:7px;max-width:45px;overflow:hidden;text-overflow:ellipsis}.bottom-nav button small{display:none}
  .dialog{bottom:calc(72px + env(safe-area-inset-bottom));width:94vw;max-height:52dvh;overflow:auto}.sheet{padding:8px}.sheet-card{width:96vw;max-height:88dvh;padding:12px}
}

/* ARENA EM PÉ — campo vertical, cartas e objetivos sem colisão */
@media (max-width:600px) and (orientation:portrait){
  #game-shell[data-mode="arena"] .hud-top{left:5px;right:5px;top:calc(4px + env(safe-area-inset-top));height:64px;width:auto;max-width:none;padding:4px 7px}
  #game-shell[data-mode="arena"] .portrait{width:40px;height:40px;font-size:17px}
  #game-shell[data-mode="arena"] .player-info{width:calc(100vw - 62px)}
  #game-shell[data-mode="arena"] .name-row strong{font-size:12px}#game-shell[data-mode="arena"] .class-row{font-size:7px;max-width:calc(100vw - 80px)}
  #game-shell[data-mode="arena"] .quest-panel{left:5px;right:5px;transform:none;top:calc(72px + env(safe-area-inset-top));width:auto;max-height:none;padding:4px 5px}
  #game-shell[data-mode="arena"] #quest-list{grid-template-columns:1fr 82px 1fr;gap:2px}
  #game-shell[data-mode="arena"] .quest{display:block!important;padding:1px 3px}#game-shell[data-mode="arena"] .quest strong{font-size:7px}#game-shell[data-mode="arena"] .quest span{font-size:6px}
  #game-shell[data-mode="arena"] .arena-clock{min-width:78px}#game-shell[data-mode="arena"] .arena-clock span{font-size:11px}
  #game-shell[data-mode="arena"] .card-bar{left:6px;right:92px;bottom:calc(5px + env(safe-area-inset-bottom));transform:none;width:auto;max-width:none;min-height:52px;padding:4px;gap:4px;border-radius:13px}
  #game-shell[data-mode="arena"] .mana-readout{min-width:44px;height:44px}
  #game-shell[data-mode="arena"] .card-chip{min-width:78px;max-width:90px;min-height:44px;padding:3px 4px}
  #game-shell[data-mode="arena"] .card-chip .card-art{width:30px;height:34px}#game-shell[data-mode="arena"] .card-chip .card-name{font-size:7px;max-width:47px}
  #game-shell[data-mode="arena"] .bottom-nav{right:5px;left:auto;bottom:calc(5px + env(safe-area-inset-bottom));width:80px;height:50px}
  #game-shell[data-mode="arena"] .controls-left{left:7px;bottom:calc(65px + env(safe-area-inset-bottom))}
  #game-shell[data-mode="arena"] .controls-right{right:5px;bottom:calc(61px + env(safe-area-inset-bottom));transform:scale(.78)}
}

/* CELULAR DEITADO — maximiza o campo e reduz HUD */
@media (max-height:520px) and (orientation:landscape){
  .hud-top{left:5px;right:5px;top:calc(3px + env(safe-area-inset-top));height:56px;padding:3px 7px;border-radius:11px}.portrait{width:40px;height:40px;font-size:17px}.name-row strong{font-size:12px}.class-row{font-size:8px}.bar{height:7px;margin:1px 0}.bar em{font-size:6px;line-height:7px}
  .quest-panel{top:62px;left:6px;width:190px;max-height:94px;padding:5px 7px}.panel-title{font-size:11px}.quest{padding:2px 0}.quest strong{font-size:8px}.quest span{font-size:7px}.quest:nth-child(n+4){display:none}
  .minimap{top:62px;right:6px;width:92px;height:104px;padding:5px}.minimap canvas{width:78px;height:78px}.minimap span{font-size:7px}
  .controls-left{left:8px;bottom:48px}.joystick{width:82px;height:82px}.joystick:before{inset:12px}.stick{width:38px;height:38px;left:22px;top:22px}
  .controls-right{right:5px;bottom:43px;transform:scale(.70);transform-origin:bottom right}
  .bottom-nav{height:42px;bottom:calc(3px + env(safe-area-inset-bottom));width:min(640px,76vw)}.bottom-nav button{font-size:14px}.bottom-nav button span{font-size:6px}
  .dialog{bottom:48px;max-height:65dvh}.sheet-card{max-height:90dvh}
  #game-shell[data-mode="arena"] .hud-top{height:52px;top:3px}
  #game-shell[data-mode="arena"] .quest-panel{top:58px;left:50%;transform:translateX(-50%);width:min(540px,63vw);max-height:none;padding:3px 5px}
  #game-shell[data-mode="arena"] #quest-list{grid-template-columns:1fr 76px 1fr}.quest strong{font-size:7px!important}.quest span{font-size:6px!important}
  #game-shell[data-mode="arena"] .card-bar{left:92px;right:86px;bottom:3px;width:auto;max-width:none;min-height:40px;padding:2px 3px}
  #game-shell[data-mode="arena"] .card-chip{min-width:64px;max-width:74px;min-height:36px;padding:2px 3px}.card-chip .card-art{width:26px!important;height:30px!important}.card-chip .card-name{font-size:6px!important;max-width:36px!important}
  #game-shell[data-mode="arena"] .mana-readout{height:35px;min-width:40px}
  #game-shell[data-mode="arena"] .bottom-nav{right:4px;left:auto;width:72px;height:40px;bottom:3px}
  #game-shell[data-mode="arena"] .controls-left{bottom:45px}#game-shell[data-mode="arena"] .controls-right{bottom:40px}
}

/* telas pequenas / notch */
@media (max-width:380px) and (orientation:portrait){
  .quest-panel{width:50vw}.minimap{width:92px;height:106px}.minimap canvas{width:78px;height:78px}
  .bottom-nav button span{display:none}.bottom-nav button{font-size:20px}
  #game-shell[data-mode="arena"] .card-chip{min-width:70px;max-width:78px}.card-chip .card-name{display:none!important}
}


/* ===== V0.8-P27 — Arena: 5 cartas fixas com arte nova ===== */
#game-shell[data-mode="arena"] .card-bar{
  display:grid;
  grid-template-columns:68px repeat(5,minmax(0,1fr));
  align-items:stretch;
  gap:6px;
  overflow:hidden;
}
#game-shell[data-mode="arena"] .card-bar .mana-readout{
  position:relative;
  left:auto;
  min-width:0;
  width:68px;
}
#game-shell[data-mode="arena"] .card-chip{
  min-width:0;
  max-width:none;
  width:100%;
  grid-template-columns:42px minmax(0,1fr);
}
#game-shell[data-mode="arena"] .card-chip .card-art{
  width:42px;
  height:50px;
}
#game-shell[data-mode="arena"] .card-chip .card-art img{
  object-fit:contain;
  object-position:center 62%;
  transform:scale(1.06);
}
#game-shell[data-mode="arena"] .card-chip .card-info small{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:720px){
  #game-shell[data-mode="arena"] .card-bar{
    grid-template-columns:44px repeat(5,minmax(0,1fr));
    gap:4px;
  }
  #game-shell[data-mode="arena"] .card-bar .mana-readout{width:44px;padding:3px 2px}
  #game-shell[data-mode="arena"] .card-chip{grid-template-columns:30px minmax(0,1fr);padding:3px 4px;min-height:46px}
  #game-shell[data-mode="arena"] .card-chip .card-art{width:30px;height:36px}
  #game-shell[data-mode="arena"] .card-chip .card-name{display:block;max-width:none;font-size:7px;line-height:1.05}
  #game-shell[data-mode="arena"] .card-chip .card-info small{display:none}
}
@media(max-height:520px) and (orientation:landscape){
  #game-shell[data-mode="arena"] .card-bar{grid-template-columns:40px repeat(5,minmax(0,1fr));gap:3px}
  #game-shell[data-mode="arena"] .card-bar .mana-readout{width:40px;height:35px}
  #game-shell[data-mode="arena"] .card-chip{grid-template-columns:24px minmax(0,1fr);min-height:36px;padding:2px 3px}
  #game-shell[data-mode="arena"] .card-chip .card-art{width:24px;height:29px}
  #game-shell[data-mode="arena"] .card-chip .card-name{font-size:6px;max-width:none}
}


/* ===== V0.8-P28 — Cartas padronizadas ===== */
.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.collection-card{overflow:hidden;padding:10px;background:linear-gradient(180deg,rgba(10,20,28,.96),rgba(8,16,23,.92));box-shadow:0 8px 24px rgba(0,0,0,.22)}
.collection-card.locked .collection-card-hero img{filter:grayscale(1) brightness(.72)!important;opacity:.7}
.collection-card-hero{position:relative;height:148px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:
 radial-gradient(circle at 75% 22%, color-mix(in srgb, var(--card-accent) 34%, transparent), transparent 34%),
 linear-gradient(145deg, color-mix(in srgb, var(--card-primary) 46%, #0a1621), #0d1a24 70%);margin-bottom:10px}
.collection-card-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(180deg,transparent,rgba(4,10,14,.72))}
.collection-card-hero img{position:absolute;left:50%;bottom:0;transform:translateX(-50%) scale(1.18);height:118%;width:auto;object-fit:contain;object-position:center bottom;image-rendering:auto;z-index:1;pointer-events:none}
.collection-card-glyph{position:absolute;left:10px;bottom:10px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(8,18,23,.55);border:1px solid rgba(255,255,255,.16);font-size:18px;z-index:2}
.collection-rarity-label{position:absolute;left:10px;top:10px;padding:4px 8px;border-radius:999px;background:rgba(6,14,20,.72);border:1px solid color-mix(in srgb, var(--rarity-accent) 56%, rgba(255,255,255,.2));color:#f7f2e6;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;z-index:2}
.collection-card .mana-badge{position:absolute;top:10px;right:10px;width:30px;height:30px;background:rgba(9,22,31,.82);border-color:color-mix(in srgb, var(--card-accent) 65%, white);box-shadow:0 0 0 2px rgba(0,0,0,.18);z-index:2}
.collection-card-head{display:block}
.collection-card-head strong{font-size:13px}
.collection-card-head small{font-size:10px}
.collection-card p{min-height:40px;margin:8px 0 10px}
.card-progress .tag-deck{background:rgba(93,197,255,.14);color:#d9f5ff;border:1px solid rgba(93,197,255,.28)}
.collection-card.rarity-common{border-color:color-mix(in srgb, var(--rarity-accent) 38%, rgba(255,255,255,.12))}
.collection-card.rarity-rare{border-color:color-mix(in srgb, var(--rarity-accent) 55%, rgba(255,255,255,.15))}
.collection-card.rarity-epic{border-color:color-mix(in srgb, var(--rarity-accent) 64%, rgba(255,255,255,.16))}
.collection-card.rarity-legendary{border-color:color-mix(in srgb, var(--rarity-accent) 75%, rgba(255,255,255,.2));box-shadow:0 10px 28px rgba(255,190,75,.08)}
@media(max-width:980px){.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.collection-grid{grid-template-columns:1fr}.collection-card-hero{height:136px}.collection-card p{min-height:0}}


/* ===== V0.8-P29 — Identidade individual dos personagens ===== */
#game-shell[data-mode="arena"] .card-chip .card-art .card-variant-mark{
  position:absolute;left:2px;bottom:2px;z-index:4;width:16px;height:16px;display:grid;place-items:center;
  border-radius:50%;font:900 8px/1 system-ui;color:#fff;background:rgba(6,12,26,.78);
  border:1px solid var(--card-accent);box-shadow:0 0 8px color-mix(in srgb,var(--card-accent) 45%,transparent)
}
.collection-variant-mark{
  position:absolute;right:10px;bottom:10px;z-index:3;width:30px;height:30px;display:grid;place-items:center;
  border-radius:9px;font:900 15px/1 system-ui;color:#fff;background:rgba(6,13,22,.72);
  border:1px solid color-mix(in srgb,var(--card-accent) 62%,white);box-shadow:0 0 12px color-mix(in srgb,var(--card-accent) 28%,transparent)
}
.collection-card-hero img{transition:filter .15s ease,transform .15s ease}
.collection-card:nth-child(3n+1) .collection-card-hero img{transform:translateX(-50%) scale(1.12)}
.collection-card:nth-child(3n+2) .collection-card-hero img{transform:translateX(-48%) scale(1.20)}
.collection-card:nth-child(3n) .collection-card-hero img{transform:translateX(-52%) scale(1.16)}


@media(max-width:720px){.bottom-nav{overflow-x:auto;justify-content:flex-start}.bottom-nav button{min-width:70px}}

/* ===== Layout de carta colecionável (Cartas — Coleção & Deck) ===== */
.collection-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.collection-item{display:flex;flex-direction:column;gap:6px;min-width:0}
.collection-item .card-progress{margin:2px 0 0}
.uf-card{
  --frame:#4b3f63;--frame-hi:#8f79c2;--title:#eadcb8;--title-ink:#1d1408;--art-bg:#2a1d44;--gem:#a7b4c2;
  position:relative;display:flex;flex-direction:column;gap:5px;aspect-ratio:59/86;padding:8px 8px 6px;border-radius:10px;
  background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--frame-hi) 35%,transparent),transparent 60%),linear-gradient(160deg,var(--frame),#16121f 70%,var(--frame));
  border:2px solid color-mix(in srgb,var(--frame-hi) 70%,#000);box-shadow:inset 0 0 0 2px rgba(0,0,0,.45),inset 0 0 14px rgba(0,0,0,.6),0 8px 22px rgba(0,0,0,.35);
  color:var(--title-ink);font-family:Georgia,"Times New Roman",serif;overflow:hidden;min-width:0
}
.uf-card.element-fire{--frame:#6a2a1c;--frame-hi:#e0704a;--art-bg:#4a1a10;}
.uf-card.element-nature{--frame:#2c4d2c;--frame-hi:#73c27a;--art-bg:#163222;}
.uf-card.element-light{--frame:#6b5a2a;--frame-hi:#f0d47a;--art-bg:#4a4020;}
.uf-card.element-earth{--frame:#56402a;--frame-hi:#c79a68;--art-bg:#35281a;}
.uf-card.element-shadow{--frame:#3b2a55;--frame-hi:#a678e8;--art-bg:#241736;}
.uf-card.element-ice{--frame:#24485a;--frame-hi:#8fdcff;--art-bg:#143040;}
.uf-card.element-arcane{--frame:#41305f;--frame-hi:#c58cff;--art-bg:#28193f;}
.uf-card.element-steel{--frame:#36434d;--frame-hi:#9cc6dc;--art-bg:#1d2a33;}
.uf-card.element-none{--frame:#3e464e;--frame-hi:#b9c3cc;--art-bg:#232a31;}
.uf-card.rarity-common{--gem:#a7b4c2}.uf-card.rarity-rare{--gem:#59b7ff}.uf-card.rarity-epic{--gem:#bb78ff}
.uf-card.rarity-legendary{--gem:#f0c45d;border-color:#d8a845;box-shadow:inset 0 0 0 2px rgba(0,0,0,.45),inset 0 0 14px rgba(0,0,0,.6),0 0 18px rgba(240,196,93,.25),0 8px 22px rgba(0,0,0,.35)}
.uf-card-title{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:4px 4px 4px 8px;border-radius:4px;
  background:linear-gradient(180deg,#f3e8c8,var(--title) 55%,#cdbb8c);border:1px solid #6d5a33;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.5)}
.uf-card-title strong{font-family:"Cinzel",Georgia,serif;font-variant:small-caps;font-size:clamp(12px,1.25vw,15px);font-weight:700;letter-spacing:.02em;line-height:1.05;color:var(--title-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uf-card-element{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--frame-hi),var(--frame) 70%);border:2px solid #d9c38c;box-shadow:0 0 6px color-mix(in srgb,var(--frame-hi) 70%,transparent);color:#fff;line-height:1}
.uf-card-element b{font-size:12px;font-weight:400;margin-top:2px}.uf-card-element small{font:700 5px/1 system-ui,sans-serif;letter-spacing:.02em;margin-top:-4px}
.uf-card-stars{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 2px;min-height:15px}
.uf-card-cost{font:800 9px/1 system-ui,sans-serif;color:#cfe6ff;background:rgba(0,0,0,.35);border:1px solid rgba(160,200,255,.35);border-radius:999px;padding:2px 5px}
.uf-card-star-row{display:flex;gap:1px;flex-wrap:nowrap}
.uf-card-star-row i{display:grid;place-items:center;width:13px;height:13px;border-radius:50%;font-style:normal;font-size:9px;line-height:1;color:#ffe9a0;
  background:radial-gradient(circle at 40% 35%,#ff7a3a,#b5260f 75%);border:1px solid #f3c35c;box-shadow:0 0 3px rgba(255,140,60,.6)}
.uf-card-art{position:relative;flex:1 1 auto;min-height:0;border:3px solid #b8964f;outline:1px solid #3a2a12;border-radius:2px;overflow:hidden;
  background:radial-gradient(70% 60% at 50% 35%,color-mix(in srgb,var(--frame-hi) 45%,transparent),transparent 70%),linear-gradient(180deg,var(--art-bg),#0b0910)}
.uf-card-art img{position:absolute;left:50%;bottom:0;height:112%;width:auto;transform:translateX(-50%);object-fit:contain;pointer-events:none}
.uf-card-glyph{position:absolute;left:5px;top:5px;font-size:13px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.uf-card-text{display:flex;flex-direction:column;gap:3px;padding:5px 7px 4px;border-radius:2px;
  background:linear-gradient(180deg,#f4ecd6,#e6d8b5);border:2px solid #b8964f;box-shadow:inset 0 0 8px rgba(120,90,40,.25)}
.uf-card-text b{font-size:10px;font-weight:700;color:var(--title-ink)}
.uf-card-text p{margin:0;font-size:9.5px;line-height:1.3;color:#2a2116;min-height:3.9em}
.uf-card-stats{display:flex;align-items:baseline;justify-content:space-between;gap:4px;border-top:1px solid #8c7444;padding-top:3px}
.uf-card-stats span{font:600 8px/1.2 system-ui,sans-serif;color:#5a4a30}
.uf-card-stats strong{font-size:10.5px;font-weight:700;color:#1d1408;white-space:nowrap}
.uf-card-foot{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 2px;font:600 7.5px/1 system-ui,sans-serif;color:#d8cba8;letter-spacing:.03em}
.uf-card-gem{width:9px;height:9px;transform:rotate(45deg);background:var(--gem);border:1px solid #f3e3b5;box-shadow:0 0 5px var(--gem)}
.uf-card.locked{filter:grayscale(.9) brightness(.7)}
.collection-item.locked .card-progress{opacity:.5}
@media(max-width:560px){.collection-grid{grid-template-columns:1fr;gap:16px}.collection-item{width:100%;max-width:320px;margin:0 auto}.uf-card-title strong{font-size:15px}}

/* ===== Mão de batalha (Arena): cartas em pé no layout de carta colecionável ===== */
#game-shell[data-mode="arena"] .card-bar.hand-bar{
  display:grid;grid-template-columns:auto repeat(5,minmax(0,1fr));align-items:end;gap:8px;
  width:min(760px,calc(100vw - 330px));max-width:none;padding:8px 10px;overflow:visible;
  background:linear-gradient(180deg,rgba(22,16,52,.94),rgba(8,6,24,.96));border:1px solid rgba(214,176,92,.55);
  box-shadow:0 14px 34px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,230,170,.18);border-radius:14px
}
.hand-mana{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 4px}
.hand-mana-orb{position:relative;display:grid;place-items:center;align-content:center;width:72px;height:72px;border-radius:50%;
  background:radial-gradient(circle at 40% 32%,#b783ff,#5a22b4 55%,#24104f 100%);border:3px solid #d8b35a;
  box-shadow:0 0 0 2px #2b1a08,0 0 18px rgba(170,100,255,.55),inset 0 -6px 14px rgba(0,0,0,.45)}
.hand-mana-orb::before,.hand-mana-orb::after{content:"◆";position:absolute;left:50%;transform:translateX(-50%);color:#e8c66d;font-size:10px;text-shadow:0 0 4px rgba(0,0,0,.8)}
.hand-mana-orb::before{top:-9px}.hand-mana-orb::after{bottom:-9px}
.hand-mana-orb strong{font:700 30px/1 "Cinzel",Georgia,serif;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.hand-mana-orb small{font:700 10px/1 system-ui,sans-serif;color:#e4d4ff;margin-top:1px}
.hand-mana-pips{display:grid;grid-template-columns:repeat(5,8px);gap:3px}
.hand-mana-pips i{width:8px;height:8px;border-radius:50%;border:1px solid #9a7cd0;background:rgba(0,0,0,.4)}
.hand-mana-pips i.on{background:radial-gradient(circle at 40% 35%,#f0d3ff,#a659ff);border-color:#e3c6ff;box-shadow:0 0 5px rgba(190,120,255,.8)}
.hand-mana.surge .hand-mana-orb{animation:ufHandSurge .8s ease-in-out infinite alternate}
@keyframes ufHandSurge{to{box-shadow:0 0 0 2px #2b1a08,0 0 28px rgba(220,140,255,.95),inset 0 -6px 14px rgba(0,0,0,.45)}}

.hand-card{
  --frame:#3e464e;--frame-hi:#b9c3cc;--art-bg:#232a31;--gem:#a7b4c2;
  position:relative;display:flex;flex-direction:column;align-items:stretch;gap:3px;min-width:0;aspect-ratio:5/7;max-height:178px;padding:5px 5px 6px;
  border-radius:9px;cursor:pointer;color:#f7f2e6;font:inherit;text-align:center;
  background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--frame-hi) 30%,transparent),transparent 60%),linear-gradient(160deg,var(--frame),#120f1c 72%,var(--frame));
  border:2px solid #c9a24e;box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),inset 0 0 12px rgba(0,0,0,.55),0 8px 18px rgba(0,0,0,.5);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;touch-action:manipulation
}
.hand-card.element-fire{--frame:#6a2a1c;--frame-hi:#e0704a;--art-bg:#4a1a10}
.hand-card.element-nature{--frame:#2c4d2c;--frame-hi:#73c27a;--art-bg:#163222}
.hand-card.element-light{--frame:#6b5a2a;--frame-hi:#f0d47a;--art-bg:#4a4020}
.hand-card.element-earth{--frame:#56402a;--frame-hi:#c79a68;--art-bg:#35281a}
.hand-card.element-shadow{--frame:#3b2a55;--frame-hi:#a678e8;--art-bg:#241736}
.hand-card.element-ice{--frame:#24485a;--frame-hi:#8fdcff;--art-bg:#143040}
.hand-card.element-arcane{--frame:#41305f;--frame-hi:#c58cff;--art-bg:#28193f}
.hand-card.element-steel{--frame:#36434d;--frame-hi:#9cc6dc;--art-bg:#1d2a33}
.hand-card.rarity-rare{border-color:#d4b25c}.hand-card.rarity-epic{border-color:#c9a0ff}
.hand-card.rarity-legendary{border-color:#f0c45d;box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),inset 0 0 12px rgba(0,0,0,.55),0 0 14px rgba(240,196,93,.35),0 8px 18px rgba(0,0,0,.5)}
.hand-card:hover{transform:translateY(-4px);filter:brightness(1.08)}
.hand-card.selected{transform:translateY(-10px);box-shadow:0 0 0 2px #fff3c4,0 0 22px color-mix(in srgb,var(--frame-hi) 80%,transparent),0 12px 22px rgba(0,0,0,.6)}
.hand-card.disabled{filter:grayscale(.65) brightness(.6);cursor:not-allowed}
.hand-card.disabled:hover{transform:none}
.hand-card-top{display:flex;align-items:center;justify-content:space-between;gap:2px;min-height:20px}
.hand-card-cost{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;font:900 12px/1 "Cinzel",Georgia,serif;color:#fff;
  background:radial-gradient(circle at 40% 32%,#b783ff,#5a22b4 65%);border:2px solid #e2c06a;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.hand-card-stars{flex:1;min-width:0;overflow:hidden;white-space:nowrap;font-size:9px;letter-spacing:-.5px;color:#ffd35a;text-shadow:0 0 3px rgba(255,150,40,.8),0 1px 1px #000}
.hand-card-elem{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;font-style:normal;font-size:10px;color:#fff;
  background:radial-gradient(circle at 35% 30%,var(--frame-hi),var(--frame) 75%);border:1.5px solid #d9c38c}
.hand-card-art{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;border:2px solid #b8964f;border-radius:3px;
  background:radial-gradient(70% 60% at 50% 35%,color-mix(in srgb,var(--frame-hi) 45%,transparent),transparent 72%),linear-gradient(180deg,var(--art-bg),#0b0910)}
.hand-card-art img{position:absolute;left:50%;bottom:0;height:108%;width:auto;transform:translateX(-50%);object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.hand-card-name{position:relative;z-index:1;margin:-12px 2px 0;padding:3px 4px;border-radius:3px;font:700 11px/1.05 "Cinzel",Georgia,serif;font-variant:small-caps;color:#1d1408;
  background:linear-gradient(180deg,#f3e8c8,#dcc898);border:1px solid #6d5a33;box-shadow:0 2px 4px rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hand-card-sub{font:600 8px/1.1 system-ui,sans-serif;color:#d8cfe6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hand-card-stats{display:flex;justify-content:space-around;gap:2px;padding:2px 0 0;border-top:1px solid rgba(201,162,78,.45);font:800 10px/1.1 system-ui,sans-serif;color:#fff}

/* Telas pequenas: carta compacta (custo, elemento, arte e nome) para não cobrir joystick/botões */
@media(max-width:720px),(max-height:520px){
  #game-shell[data-mode="arena"] .card-bar.hand-bar{transform:none;width:auto;max-width:none;gap:4px;padding:3px 4px;align-items:stretch}
  .hand-mana{gap:2px;padding:0 1px}
  .hand-mana-orb{width:40px;height:40px;border-width:2px}.hand-mana-orb::before,.hand-mana-orb::after{display:none}
  .hand-mana-orb strong{font-size:17px}.hand-mana-orb small{font-size:7px}
  .hand-mana-pips{display:none}
  .hand-card{aspect-ratio:auto;height:56px;max-height:none;padding:2px 2px 3px;gap:1px;border-width:1.5px;border-radius:7px}
  .hand-card-top{position:absolute;left:2px;right:2px;top:2px;z-index:2;min-height:0}
  .hand-card-cost{width:15px;height:15px;font-size:8px;border-width:1.5px}
  .hand-card-stars,.hand-card-sub,.hand-card-stats{display:none}
  .hand-card-elem{width:13px;height:13px;font-size:7px;border-width:1px}
  .hand-card-art{border-width:1.5px}
  .hand-card-name{margin:-7px 1px 0;font-size:7px;padding:1px 2px}
  .hand-card.selected{transform:translateY(-5px)}
}
@media(max-width:720px) and (orientation:portrait){
  #game-shell[data-mode="arena"] .card-bar.hand-bar{left:6px;right:96px;bottom:calc(5px + env(safe-area-inset-bottom))}
}
@media(max-height:520px) and (orientation:landscape){
  #game-shell[data-mode="arena"] .card-bar.hand-bar{left:170px;right:170px;bottom:3px;min-height:0}
  .hand-card{height:60px}
}