@font-face { font-family: 'Baloo 2'; src: url('/potato/fonts/baloo2.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
.tn-botao { position: fixed; right: 12px; bottom: 12px; z-index: 9000; padding: 8px 14px; border-radius: 10px; border: 2px solid #120b05; box-shadow: inset 0 0 0 1px rgb(201 154 76 / .5); background: linear-gradient(#3a2412, #24160a); color: #ffe1a8; font: 700 13px 'Baloo 2', system-ui, sans-serif; cursor: pointer; }
.tn-janela { position: fixed; inset: 3% 3%; z-index: 9100; display: flex; flex-direction: column; background: linear-gradient(rgb(16 10 5 / .3), rgb(16 10 5 / .5)), var(--tn-fundo, linear-gradient(#0000, #0000)) center / cover no-repeat, radial-gradient(120% 55% at 50% -6%, rgb(255 140 40 / .1), transparent 60%), linear-gradient(180deg, #241609, #170e07 46%, #100a05); border: 2px solid #120b05; box-shadow: inset 0 0 0 1px rgb(201 154 76 / .25), 0 24px 60px rgb(0 0 0 / .6); border-radius: 14px; color: #ede1c8; font: 500 14px 'Baloo 2', system-ui, sans-serif; overflow: hidden; }
.tn-topo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 14px; background: linear-gradient(#3a2412, #2a1a0c); border-bottom: 1px solid rgb(201 154 76 / .35); }
.tn-topo b { margin-right: auto; color: #ffe1a8; font-size: 16px; }
.tn-info { color: #d8bfa1; }
.tn-topo button, .tn-topo select, .tn-topo input { font: 600 13px 'Baloo 2', system-ui, sans-serif; color: #2a1200; background: linear-gradient(#f0cf8a, #c99a4c); border: 1px solid #2a1200; border-radius: 8px; padding: 3px 10px; cursor: pointer; }
.tn-topo input { width: 84px; background: #f4e3bf; cursor: text; }
.tn-arena { position: relative; flex: 1; min-height: 0; display: flex; justify-content: space-between; align-items: center; padding: 34px 4% 8px; gap: 12px; }
.tn-col { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; min-width: 0; }
.tn-col.esq { flex-direction: row; flex-wrap: wrap-reverse; justify-content: flex-start; }
.tn-col.dir { align-items: flex-end; }
.tn-grupo { display: flex; flex-direction: column; gap: 10px; }
.tn-ator { position: relative; width: 132px; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: transform .28s ease-in-out; }
.tn-ator.companion { width: 92px; }
.tn-nome { font-size: 12px; font-weight: 700; color: #ffe1a8; text-shadow: 0 1px 2px #000; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-retrato { width: 100%; aspect-ratio: 1; border-radius: 12px; border: 2px solid #120b05; box-shadow: inset 0 0 0 1px rgb(201 154 76 / .4); background: radial-gradient(circle at 50% 35%, #4a3019, #1d1209); display: grid; place-items: center; overflow: hidden; }
.tn-retrato img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px #000a); }
.tn-retrato span { font-size: 28px; font-weight: 800; color: #c99a4c; }
.tn-ator.inimigo .tn-retrato img { transform: scaleX(-1); }
.tn-ator.heroi .tn-retrato { border-color: #c99a4c; }
.tn-barra { position: relative; width: 100%; height: 11px; background: #120b05; border: 1px solid #000; border-radius: 6px; overflow: hidden; }
.tn-barra i { position: absolute; inset: 0 auto 0 0; width: 100%; transition: width .35s ease-out; }
.tn-hp i { background: linear-gradient(#e0624a, #a8321e); }
.tn-ator.heroi .tn-hp i { background: linear-gradient(#7fd05a, #3f8f2a); }
.tn-mp { height: 8px; }
.tn-mp i { background: linear-gradient(#6bb7ff, #2a63c9); transition-duration: .6s; }
.tn-barra em { position: absolute; inset: 0; font: 700 9px/9px 'Baloo 2', sans-serif; font-style: normal; text-align: center; color: #fff; text-shadow: 0 0 2px #000; }
.tn-status { display: flex; gap: 2px; min-height: 18px; flex-wrap: wrap; justify-content: center; }
.tn-st { font-size: 13px; line-height: 16px; width: 18px; height: 18px; text-align: center; border-radius: 50%; background: #120b05cc; border: 1px solid #c99a4c88; }
.tn-ator.morto .tn-retrato { filter: grayscale(1) brightness(.5); }
.tn-ator.bate .tn-retrato { filter: brightness(1.6); }
.tn-ator.golpeado .tn-retrato { animation: tn-treme .22s linear; }
.tn-ator.buffado .tn-retrato { box-shadow: 0 0 14px 3px #ffd75aaa; }
.tn-ator.debuffado .tn-retrato { box-shadow: 0 0 14px 3px #a15cffaa; }
.tn-ator.escudo .tn-retrato { box-shadow: 0 0 0 3px #6bb7ffaa, 0 0 18px 4px #6bb7ff88, inset 0 0 14px #6bb7ff88; }
.tn-ator.atordoado .tn-retrato { filter: saturate(.5); }
.tn-ator.taunt .tn-retrato { box-shadow: 0 0 0 3px #e0624a99; }
.tn-ator.conjura .tn-retrato { box-shadow: 0 0 22px 6px #fff2b0cc; }
@keyframes tn-treme { 0%,100% { translate: 0 } 25% { translate: -5px 0 } 75% { translate: 5px 0 } }
.tn-skill { position: absolute; top: -22px; left: 50%; translate: -50% 0; white-space: nowrap; z-index: 8; padding: 1px 10px; border-radius: 10px; font-weight: 800; font-size: 14px; color: #2a1200; background: linear-gradient(#ffe9b0, #e5b258); border: 1px solid #2a1200; animation: tn-skill 1s ease-out forwards; pointer-events: none; }
.tn-skill.cura { background: linear-gradient(#d7ffc4, #7fd05a); } .tn-skill.debuff, .tn-skill.dot { background: linear-gradient(#e6d0ff, #a15cff); } .tn-skill.stun { background: linear-gradient(#fff6a8, #f2cc22); } .tn-skill.escudo { background: linear-gradient(#d6ecff, #6bb7ff); }
@keyframes tn-skill { 0% { opacity: 0; transform: translateY(8px) scale(.7) } 15% { opacity: 1; transform: scale(1.15) } 75% { opacity: 1 } 100% { opacity: 0; transform: translateY(-10px) } }
.tn-num { position: absolute; top: 20%; left: 50%; translate: -50% 0; z-index: 9; font-weight: 800; font-size: 20px; color: #fff; text-shadow: 0 0 3px #000, 0 2px 0 #000; pointer-events: none; animation: tn-sobe 1s ease-out forwards; white-space: nowrap; }
.tn-num.crit { color: #ffd75a; font-size: 30px; }
.tn-num.falha { color: #bbb; font-size: 14px; }
.tn-num.cura { color: #7fe35a; }
.tn-num.escudo { color: #8ccaff; }
.tn-num.buff { color: #ffd75a; }
.tn-num.debuff, .tn-num.dot { color: #c79bff; }
.tn-num.dano-heroi { color: #ff7a66; }
.tn-num.stun { color: #ffe84a; font-size: 30px; animation: tn-sobe 1s ease-out forwards, tn-gira 1s linear; }
.tn-num.cura::before { content: '+'; }
@keyframes tn-sobe { 0% { opacity: 0; transform: translateY(10px) scale(.6) } 15% { opacity: 1; transform: translateY(0) scale(1.15) } 100% { opacity: 0; transform: translateY(-48px) } }
@keyframes tn-gira { to { rotate: 360deg } }
.tn-cura-fx { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.tn-cura-fx i { position: absolute; bottom: 10%; color: #7fe35a; font-style: normal; font-weight: 800; text-shadow: 0 0 6px #4c0; animation: tn-sobe 1.1s ease-out forwards; }
.tn-barra-skills { display: flex; gap: 8px; justify-content: center; padding: 8px 12px 12px; flex-wrap: wrap; border-top: 1px solid rgb(201 154 76 / .25); background: #0e0804aa; }
.tn-chip { position: relative; width: 112px; padding: 3px 8px 6px; border-radius: 8px; border: 1px solid #c99a4c88; background: #24160a; overflow: hidden; }
.tn-chip b { display: block; font-size: 12px; color: #ffe1a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-chip small { font-size: 10px; color: #6bb7ff; }
.tn-chip > * { position: relative; z-index: 1; }
.tn-chip i { position: absolute; z-index: 0; inset: 0 auto 0 0; width: 0; background: #000b; transition-property: width; transition-timing-function: linear; }
.tn-chip.pronta { border-color: #ffd75a; }
.tn-chip.cast { animation: tn-skill-chip .4s; }
@keyframes tn-skill-chip { 50% { transform: scale(1.1); background: #5a3a14 } }
@media (max-width: 760px) { .tn-ator { width: 92px; } .tn-ator.companion { width: 66px; } .tn-janela { inset: 0; border-radius: 0; } .tn-chip { width: 88px; } }

.tn-retrato canvas { width: 100%; height: 100%; object-fit: contain; display: block; }