@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  --sky-a:#FFE8B0;
  --sky-b:#CDEAD6;
  --sky-c:#E9DFC2;
  --grass:#5B8C51;
  --grass-dark:#3A5A40;
  --soil:#7A5230;
  --soil-dark:#54371D;
  --wood:#9C6B3E;
  --wood-dark:#6B4423;
  --barn-red:#B5423F;
  --gold:#E8A93A;
  --gold-bright:#FFD166;
  --ink:#2E2418;
  --ink-soft:#5A4A38;
  --paper:#FBF2DE;
  --paper-2:#F3E6C8;
  --line:#D8C39F;
  --good:#4C8B5C;
  --bad:#B5423F;
  --crystal:#66C6D9;
  --shadow: rgba(46,36,24,.28);
  --radius: 16px;
  --font-display:'Baloo 2', sans-serif;
  --font-body:'Nunito', sans-serif;
  --font-mono:'Space Mono', monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 8%, #fff7de 0%, transparent 45%),
    linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 55%, var(--sky-c) 100%);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
#app{max-width:980px;margin:0 auto;padding:14px 14px 60px;}

/* ---------- TOPBAR ---------- */
.topbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border:3px solid var(--wood-dark);
  border-radius:var(--radius);
  padding:10px 14px;
  box-shadow:0 6px 0 var(--shadow);
  position:sticky; top:8px; z-index:50;
}
.brand{
  font-family:var(--font-display); font-weight:800; font-size:1.25rem;
  color:var(--soil-dark); display:flex; align-items:center; gap:6px;
  white-space:nowrap;
}
.resources{display:flex;gap:8px;flex-wrap:wrap;flex:1;justify-content:center;}
.res{
  font-family:var(--font-mono); font-weight:700; font-size:.92rem;
  background:var(--paper); border:2px solid var(--line); border-radius:12px;
  padding:5px 10px; display:flex; align-items:center; gap:6px;
  min-width:88px; justify-content:center;
}
.res .cap{font-family:var(--font-body); font-weight:600; color:var(--ink-soft); font-size:.72rem;}
.tier-badge{
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  background:var(--soil-dark); color:var(--gold-bright);
  border-radius:12px; padding:6px 12px; white-space:nowrap;
  border:2px solid var(--wood-dark);
}
.activity-badge{
  font-family:var(--font-mono); font-weight:700; font-size:.8rem;
  background:var(--gold-bright); color:var(--ink);
  border-radius:12px; padding:6px 10px; white-space:nowrap;
  border:2px solid var(--wood-dark); cursor:help;
}

/* ---------- SCENE (signature element) ---------- */
.scene-wrap{
  margin-top:12px; border-radius:var(--radius); overflow:hidden;
  border:3px solid var(--wood-dark); box-shadow:0 6px 0 var(--shadow);
  position:relative; height:240px;
}
.scene{position:absolute; inset:0; transition:filter .8s ease;}
/* Pixel nítido no canvas iso (antialias:false + NEAREST já no código; evita
   suavização extra do browser na upscale de HiDPI) */
.scene-wrap canvas{image-rendering:pixelated;}
.scene-sky{position:absolute; inset:0;}
.scene-sun{
  position:absolute; width:46px; height:46px; border-radius:50%;
  top:14px; left:20px; background:radial-gradient(circle, #fff2c4, var(--gold-bright));
  box-shadow:0 0 26px 8px rgba(255,209,102,.55);
  animation: float 6s ease-in-out infinite;
}
.cloud{
  position:absolute; background:#fff; border-radius:50px; opacity:.85;
  animation: drift linear infinite;
}
.cloud:before,.cloud:after{content:'';position:absolute;background:#fff;border-radius:50%;}
@keyframes drift{ from{transform:translateX(-120px);} to{transform:translateX(1000px);} }
@keyframes float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

.scene-hill{position:absolute; bottom:0; left:0; width:100%; height:64%; background:var(--grass); border-radius:50% 50% 0 0 / 22% 22% 0 0;}
.scene-hill.back{background:var(--grass-dark); height:74%; opacity:.9;}
.scene-ground{position:absolute; bottom:0; left:0; width:100%; height:26%; background:var(--soil);}

.barn{position:absolute; bottom:24%; left:36px;}
.barn .body{width:86px;height:64px;background:var(--barn-red);border-radius:4px 4px 0 0;position:relative;}
.barn .roof{width:0;height:0;border-left:52px solid transparent;border-right:52px solid transparent;border-bottom:34px solid var(--wood-dark);position:absolute;top:-32px;left:-9px;}
.barn .door{position:absolute;bottom:0;left:30px;width:26px;height:38px;background:var(--wood-dark);border-radius:3px 3px 0 0;}
.silo{position:absolute; bottom:24%; left:150px; width:26px; height:76px; background:linear-gradient(180deg,#dfe6e8,#b9c3c7); border-radius:13px 13px 4px 4px; border:2px solid #8b979b;}
.silo:before{content:'';position:absolute;top:-14px;left:-2px;width:26px;height:16px;background:#c94f4f;border-radius:50% 50% 0 0;}

.chick-walk{position:absolute; bottom:20%; font-size:20px; animation:walk 9s linear infinite;}
@keyframes walk{ 0%{transform:translateX(-20px) scaleX(1);} 45%{transform:translateX(220px) scaleX(1);} 50%{transform:translateX(220px) scaleX(-1);} 95%{transform:translateX(-20px) scaleX(-1);} 100%{transform:translateX(-20px) scaleX(1);} }

.stage-label{
  position:absolute; bottom:8px; right:12px; font-family:var(--font-display);
  background:rgba(46,36,24,.55); color:#fff; padding:4px 10px; border-radius:10px; font-size:.78rem;
}
.sparkle{position:absolute; font-size:14px; animation:sparkle 2.4s ease-in-out infinite;}
@keyframes sparkle{ 0%,100%{opacity:.2; transform:scale(.8);} 50%{opacity:1; transform:scale(1.2);} }

/* stage variants */
.stage-0 .scene-sky{background:linear-gradient(180deg,#e9dfc2,#cbd6b0);}
.stage-0 .barn .body{background:#8a5a4d; filter:saturate(.6);}
.stage-1 .scene-sky{background:linear-gradient(180deg,#ffe8b0,#cdead6);}
.stage-2 .scene-sky{background:linear-gradient(180deg,#ffe0a3,#bfe7f0);}
.stage-2 .barn .body{background:linear-gradient(180deg,#d1524d,#B5423F);}
.stage-3 .scene-sky{background:linear-gradient(180deg,#ffd98a,#a9e6cf);}
.stage-3 .barn .body{background:linear-gradient(180deg, var(--gold-bright), var(--gold)); box-shadow:0 0 24px rgba(255,209,102,.6);}
.stage-3 .silo{box-shadow:0 0 18px rgba(255,209,102,.5);}

/* ---------- TABS ---------- */
.tabs{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;}
.tab{
  font-family:var(--font-display); font-weight:600; font-size:.88rem;
  background:var(--paper); border:2px solid var(--line); color:var(--ink-soft);
  border-radius:12px; padding:9px 14px; cursor:pointer; transition:.15s;
}
.tab:hover{transform:translateY(-1px); border-color:var(--gold);}
.tab.active{background:var(--soil-dark); color:var(--gold-bright); border-color:var(--soil-dark);}

/* ---------- MAIN CARD AREA ---------- */
main{margin-top:12px;}
/* Perspectiva para o hover 3D dos cards (#main-content é persistente — só o
   innerHTML muda a cada 1s, a classe/estilo do container sobrevive) */
#main-content{perspective:1200px;}
.panel{
  background:var(--paper); border:3px solid var(--wood-dark); border-radius:var(--radius);
  padding:16px; box-shadow:0 6px 0 var(--shadow);
}
.panel h2{font-family:var(--font-display); margin:0 0 4px; font-size:1.15rem; color:var(--soil-dark);}
.panel .sub{font-size:.85rem; color:var(--ink-soft); margin-bottom:14px;}
.grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}

.card{
  background:#fff; border:2px solid var(--line); border-radius:14px; padding:12px;
  display:flex; flex-direction:column; gap:8px; position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px) rotateX(3deg); box-shadow:0 10px 0 var(--shadow);}
.card.locked{filter:grayscale(.7); opacity:.6;}
.card h3{margin:0; font-family:var(--font-display); font-size:1rem; color:var(--ink);}
.card .desc{font-size:.78rem; color:var(--ink-soft); line-height:1.3;}
.badge-emoji{font-size:2rem; text-align:center;}
.stat-row{display:flex; justify-content:space-between; font-size:.76rem; color:var(--ink-soft); font-family:var(--font-mono);}
.progress{height:8px; background:var(--paper-2); border-radius:6px; overflow:hidden; border:1px solid var(--line);}
.progress > div{height:100%; background:linear-gradient(90deg, var(--gold), var(--gold-bright)); transition:width .9s linear;}

button.action{
  font-family:var(--font-display); font-weight:600; font-size:.85rem;
  background:var(--good); color:#fff; border:none; border-radius:10px;
  padding:9px 10px; cursor:pointer; transition:.15s;
}
button.action:hover{filter:brightness(1.08); transform:translateY(-1px);}
button.action:disabled{background:#a9a9a9; cursor:not-allowed; transform:none;}
button.action:active{transform:translateY(2px) scale(.98); filter:brightness(.96);}
button.action.buy{background:var(--gold); color:var(--ink);}
button.action.danger{background:var(--bad);}
button.action.ghost{background:transparent; border:2px solid var(--soil-dark); color:var(--soil-dark);}

.plot{
  background:linear-gradient(180deg,#8a5a34,#6b4423); border-radius:12px; border:2px solid var(--wood-dark);
  min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; cursor:pointer; color:#fff; text-align:center; padding:8px;
}
.plot.empty{background:linear-gradient(180deg,#a97b4f,#7a5230);}
.plot.ready{background:linear-gradient(180deg,#7fae5c,#5B8C51); animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 rgba(255,209,102,0);} 50%{box-shadow:0 0 0 6px rgba(255,209,102,.35);}}
.plot .emoji{font-size:1.8rem;}
.plot small{font-size:.7rem; opacity:.9; font-family:var(--font-mono);}

.plot.growing .emoji{ animation: grow-plant 2s ease-in-out infinite; }
@keyframes grow-plant{ 0%,100%{ transform:scale(1) rotate(0deg); } 50%{ transform:scale(1.15) rotate(5deg); } }
.plot.ready .emoji{ animation: ready-plant 1s ease-in-out infinite; }
@keyframes ready-plant{ 0%,100%{ transform:scale(1) translateY(0); } 50%{ transform:scale(1.2) translateY(-6px); } }

.slot{
  background:var(--paper-2); border:2px dashed var(--line); border-radius:14px; min-height:120px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; padding:8px; text-align:center;
}
.slot.filled{border-style:solid; border-color:var(--gold);}
.slot.ready{border-color:var(--good); animation:pulse 1.4s ease-in-out infinite;}
.slot .emoji{font-size:1.7rem;}
.slot.filled .emoji{ animation: incubate 3s ease-in-out infinite; }
@keyframes incubate{ 0%,100%{ transform:scale(1) rotate(0deg); } 25%{ transform:scale(1.05) rotate(-5deg); } 75%{ transform:scale(1.05) rotate(5deg); } }
.slot.ready .emoji{ animation: hatch 0.6s ease-in-out infinite alternate; }
@keyframes hatch{ from{ transform:scale(1) translateY(0); } to{ transform:scale(1.3) translateY(-8px); } }

.pen{
  background:#fff; border:2px solid var(--line); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:8px;
}

.cage{
  background:linear-gradient(180deg,#e9dfc2,#d8c39f); border:2px solid var(--wood-dark); border-radius:14px;
  min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:10px; text-align:center; cursor:default;
}
.cage.empty{cursor:pointer; background:linear-gradient(180deg,#f3e6c8,#e9dfc2);}
.cage.empty:hover{filter:brightness(1.04);}
.cage.ready{background:linear-gradient(180deg,#a9d99a,#7fae5c); animation:pulse 1.4s ease-in-out infinite; cursor:pointer;}
.cage .emoji{font-size:1.9rem;}

/* stat-line antiga: ainda usada fora do card de galo (ex: comparativo de
   raças na loja do aviário), mantida como está. */
.stat-line{display:flex; align-items:center; gap:8px; font-size:.72rem; font-family:var(--font-mono); margin:2px 0;}
.stat-line span:first-child{width:74px; flex-shrink:0; font-family:var(--font-body); font-weight:700; text-align:left;}
.stat-track{flex:1; min-width:0; height:8px; background:var(--paper-2); border-radius:5px; overflow:hidden; border:1px solid var(--line); position:relative;}
.stat-fill{height:100%; background:linear-gradient(90deg, var(--barn-red), var(--gold-bright)); position:relative; z-index:1;}
.stat-cap{position:absolute; top:-1px; bottom:-1px; width:2px; background:var(--soil-dark); z-index:2;}
.stat-num{width:26px; text-align:right; flex-shrink:0;}

/* =========================================================
   CARD DE GALO DE COMBATE — estilo "card de batalha" (TCG)
   ---------------------------------------------------------
   Proporção fixa (~5:7, como uma carta física) em vez de esticar pra
   preencher a linha da grade — é isso que fazia o card antigo ficar
   comprido e estreito. Zonas bem definidas: faixa de linhagem no topo,
   medalhão de retrato, placa de nome, grade 2×2 de atributos na frente;
   metadados + cartel + ações em grade de ícones no verso.
========================================================= */
:root{
  --ln-comum:#8a7a5c; --ln-selecionada:#5B8C51; --ln-elite:#66C6D9;
  --ln-imperial:#E8A93A; --ln-mitica:#FF7CD1;
}
.grid-fighters{
  grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
  align-items:start; justify-items:center;
}
.fighter-card.chosen{border-color:var(--gold); background:#FFF6DE;}
.fighter-card.phenomenal{border-color:#b8860b; border-width:3px; background:linear-gradient(135deg,#FFF9E6,#FFE9B0); box-shadow:0 0 14px rgba(184,134,11,.4);}

.fc-flip{
  perspective:1600px; cursor:pointer; user-select:none; -webkit-user-select:none;
  transition:transform .18s ease, box-shadow .3s ease;
  width:100%; max-width:240px; aspect-ratio:5/7.4;
  --ln-color: var(--ln-comum);
}
.fc-flip:hover{transform:translateY(-3px); box-shadow:0 14px 26px rgba(46,36,24,.32);}
.fc-flip:active{transform:translateY(-1px) scale(.985);}
.fc-flip.fc-ln-selecionada{--ln-color: var(--ln-selecionada);}
.fc-flip.fc-ln-elite{--ln-color: var(--ln-elite);}
.fc-flip.fc-ln-imperial{--ln-color: var(--ln-imperial);}
.fc-flip.fc-ln-mitica{--ln-color: var(--ln-mitica);}

.fc-flip .fc-inner{
  display:grid; grid-template-areas:"face"; transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.4,.05,.25,1); position:relative;
  will-change:transform; width:100%; height:100%;
}
.fc-flip .fc-front, .fc-flip .fc-back{
  grid-area:face; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; border-radius:16px; height:100%;
  box-sizing:border-box; overflow:hidden;
}
.fc-flip .fc-back{transform:rotateY(180deg);}
.fc-flip.flipped .fc-inner{transform:rotateY(180deg);}
.fc-hint{font-size:.6rem; color:var(--ink-soft); text-align:center; padding:3px 0 6px; opacity:.7; flex-shrink:0;}

/* ---- moldura ornamentada (dupla borda: ouro fino por fora, cor da
   linhagem por dentro) ---- */
.fc-front, .fc-back{
  border:2px solid var(--ln-color);
  box-shadow:
    inset 0 0 0 3px #fff8e8,
    inset 0 0 0 5px var(--ln-color);
}

/* ---- FRENTE ---- */
.fc-front{
  position:relative;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--ln-color) 28%, transparent), transparent 62%),
    linear-gradient(180deg, #FFFBF0, #FBF2DE 70%, #F3E6C8);
  padding:8px 8px 10px;
  gap:4px;
}
.fc-front::after{
  content:''; position:absolute; top:-20%; left:-80%; width:45%; height:140%; transform:rotate(12deg);
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  animation:fc-shine 5s ease-in-out infinite; pointer-events:none;
}
@keyframes fc-shine{0%,55%{left:-80%;} 80%,100%{left:135%;}}

/* faixa de linhagem — canto superior esquerdo, estilo galhardete */
.fc-ribbon{
  position:absolute; top:10px; left:-6px; z-index:3;
  background:var(--ln-color); color:#fff; font-family:var(--font-display); font-weight:700;
  font-size:.62rem; letter-spacing:.02em; padding:3px 10px 3px 12px;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
  clip-path:polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%);
}
.fc-phenomenal-tag{
  position:absolute; top:10px; right:8px; z-index:3;
  background:linear-gradient(135deg,#b8860b,#e8c23a); color:#fff;
  font-size:.6rem; font-weight:800; padding:3px 7px; border-radius:20px;
  box-shadow:0 2px 5px rgba(184,134,11,.5);
}

/* medalhão de retrato */
.fc-portrait{display:flex; justify-content:center; align-items:center; margin-top:20px; flex-shrink:0;}
.fc-portrait-ring{
  width:74px; height:74px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 35%, #fff, #FFF3D6 70%);
  border:3px solid var(--ln-color);
  box-shadow:0 0 0 3px #fff, 0 0 14px color-mix(in srgb, var(--ln-color) 55%, transparent), inset 0 2px 4px rgba(255,255,255,.8);
}
.fc-portrait-emoji{font-size:2.5rem; filter:drop-shadow(0 3px 3px rgba(46,36,24,.3)); animation:fc-bob 2.6s ease-in-out infinite;}
@keyframes fc-bob{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-3px) rotate(-3deg);}}

/* placa de nome */
.fc-nameplate{text-align:center; flex-shrink:0; margin:2px 0 4px;}
.fc-nameplate h3{
  margin:0; font-family:var(--font-display); font-size:.92rem; line-height:1.15;
  color:var(--soil-dark); text-shadow:0 1px 0 rgba(255,255,255,.7);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 4px;
}
.fc-subrow{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:2px; flex-wrap:wrap;}
.fc-gender-tag{font-size:.6rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em;}
.fc-stars{font-size:.78rem; color:var(--gold); letter-spacing:1px; text-shadow:0 0 5px rgba(232,169,58,.5);}
.fc-breeder-tag{font-size:.78rem;}

/* grade 2×2 de atributos — o coração da reorganização: em vez de 4 barras
   full-width empilhadas (o que deixava o card comprido), cada atributo vira
   uma "gema" compacta com ícone, valor e uma barrinha fina embaixo. */
.fc-stat-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:5px;
  margin-top:auto; padding-top:6px; flex-shrink:0;
}
.fc-stat-gem{
  background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:8px;
  padding:4px 6px 5px;
}
.fc-gem-head{display:flex; align-items:center; gap:3px; font-size:.6rem; margin-bottom:3px;}
.fc-gem-icon{font-size:.72rem; flex-shrink:0;}
.fc-gem-label{flex:1; font-weight:700; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fc-gem-val{font-family:var(--font-mono); font-weight:700; color:var(--ink);}
.fc-gem-track{height:5px; background:var(--paper-2); border-radius:4px; overflow:hidden; border:1px solid var(--line); position:relative;}
.fc-gem-fill{height:100%; background:linear-gradient(90deg, var(--barn-red), var(--gold-bright)); transition:width .8s cubic-bezier(.3,.8,.3,1);}
.fc-gem-cap{position:absolute; top:-1px; bottom:-1px; width:2px; background:var(--soil-dark); z-index:2;}

/* ---- VERSO ---- */
.fc-back{
  background:linear-gradient(180deg, #F6ECD4, #EBDFC0);
  padding:10px 10px 8px;
  gap:6px; overflow-y:auto;
}
.fc-back > *{flex-shrink:0;}
.fc-meta{display:flex; gap:5px; text-align:center; flex-wrap:wrap;}
.fc-meta-item{flex:1; min-width:56px; background:#FFFBF2; border:1px solid var(--ln-color); border-radius:7px; padding:4px 2px;}
.fc-meta-label{display:block; font-size:.58rem; text-transform:uppercase; letter-spacing:.02em; color:var(--ink-soft);}
.fc-meta-value{display:block; font-weight:800; font-size:.76rem; margin-top:1px;}

.fc-record{
  text-align:center; font-family:var(--font-mono); font-size:.72rem; font-weight:700;
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:5px 4px;
  color:var(--ink-soft);
}
.fc-power{margin-left:6px; color:var(--wood-dark);}
.fc-status{text-align:center; font-size:.68rem; color:var(--ink-soft); font-style:italic;}
.fc-sell-hint{text-align:center; font-size:.62rem; color:var(--ink-soft); margin-top:-2px;}

.fc-section-label{
  font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  color:var(--ink-soft); text-align:center; margin-top:2px;
}

.fc-back button.action{width:100%; font-size:.78rem; padding:8px 6px;}

/* grade de ações em ícone — substitui a lista de 5 botões full-width
   empilhados por uma grade compacta 4-por-linha. */
.fc-icon-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:4px;}
.fc-icon-btn{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  background:#fff; border:1.5px solid var(--wood-dark); border-radius:8px;
  padding:5px 2px; cursor:pointer; transition:.15s; font-family:var(--font-body);
}
.fc-icon-btn:hover{background:var(--paper-2); transform:translateY(-1px);}
.fc-icon-btn:active{transform:translateY(1px) scale(.96);}
.fc-icon-btn:disabled{opacity:.4; cursor:not-allowed; transform:none;}
.fc-icon-btn-ico{font-size:.9rem; line-height:1;}
.fc-icon-btn-txt{font-size:.52rem; font-weight:700; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}

@media (max-width:520px){
  .fc-flip{max-width:100%;}
}
.select-chip{
  border:2px solid var(--line); border-radius:10px; padding:7px 10px; cursor:pointer; font-size:.82rem;
  font-family:var(--font-body); font-weight:700; background:#fff;
}
.select-chip.chosen{border-color:var(--gold); background:#FFF6DE;}
.select-chip:disabled{opacity:.4; cursor:not-allowed;}

.tier-list{display:flex; flex-direction:column; gap:4px; margin-top:8px;}
.tier-row{display:flex; align-items:center; gap:8px; font-size:.8rem; padding:4px 8px; border-radius:8px;}
.tier-row.current{background:var(--paper-2); font-weight:800;}
.tier-row .dot{width:9px;height:9px;border-radius:50%; background:var(--line);}
.tier-row.done .dot{background:var(--good);}
.tier-row.current .dot{background:var(--gold);}

.section-title{font-family:var(--font-display); font-size:.95rem; color:var(--soil-dark); margin:18px 0 8px; border-bottom:2px solid var(--line); padding-bottom:4px;}
.section-title:first-of-type{margin-top:0;}

/* --- Mural de Recordes + Títulos (Arena) --- */
.grid-titles{grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); align-items:stretch;}
.feat-card{text-align:center; justify-content:center;}
.feat-card .feat-value{font-family:var(--font-mono); font-size:1.5rem; font-weight:700; color:var(--soil-dark);}
.feat-card h3{margin:0 auto;}
.feat-card .feat-reward{font-size:.72rem; font-weight:700; padding:4px 8px; border-radius:8px; align-self:center;}
.feat-card .feat-reward.won{background:rgba(74,164,96,.14); color:var(--good);}
.feat-card .feat-reward.pending{background:var(--paper-2); color:var(--ink-soft);}
.feat-card.unlocked{border-color:var(--gold); background:linear-gradient(180deg,#fffdf5,#fff8e1);}
.feat-card.unlocked h3{color:var(--soil-dark);}
.feat-card.locked{opacity:.55; filter:grayscale(.7);}
.feat-card.locked h3{color:var(--ink-soft);}

/* ---------- TOASTS ---------- */
#toast-container{position:fixed; bottom:16px; right:16px; display:flex; flex-direction:column; gap:8px; z-index:200;}
.toast{
  font-family:var(--font-body); font-weight:700; font-size:.85rem;
  background:var(--soil-dark); color:#fff; padding:10px 16px; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.25); animation: toast-in .25s ease, toast-out .4s ease 2.6s forwards;
  max-width:280px;
}
.toast.tierup{background:linear-gradient(90deg, var(--gold), var(--gold-bright)); color:var(--ink); font-family:var(--font-display);}
@keyframes toast-in{from{opacity:0; transform:translateX(30px);} to{opacity:1; transform:translateX(0);}}
@keyframes toast-out{to{opacity:0; transform:translateY(8px);}}

.footer-note{text-align:center; color:var(--ink-soft); font-size:.72rem; margin-top:14px;}

/* ---------- MODAL DE CONFIRMAÇÃO ---------- */
#confirm-overlay{
  position:fixed; inset:0; background:rgba(46,36,24,.55); z-index:300;
  display:none; align-items:center; justify-content:center; padding:20px;
}
#confirm-overlay.open{display:flex;}
.confirm-box{
  background:var(--paper); border:3px solid var(--wood-dark); border-radius:var(--radius);
  box-shadow:0 8px 0 var(--shadow); max-width:340px; width:100%; padding:18px; text-align:center;
  animation:toast-in .2s ease;
}
.confirm-box .icon{font-size:2rem; margin-bottom:6px;}
.confirm-box h3{font-family:var(--font-display); margin:0 0 6px; color:var(--soil-dark);}
.confirm-box p{font-size:.86rem; color:var(--ink-soft); margin:0 0 16px; line-height:1.4;}
.confirm-actions{display:flex; gap:10px; justify-content:center;}
.confirm-actions button{flex:1; padding:10px; border-radius:10px; font-family:var(--font-display); font-weight:700; border:none; cursor:pointer; font-size:.85rem;}
.confirm-actions .yes{background:var(--good); color:#fff;}
.confirm-actions .no{background:var(--paper-2); color:var(--ink-soft); border:2px solid var(--line);}

/* ---------- ARENA OVERLAY (tela grande) ---------- */
#arena-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:400;
  display:none; align-items:center; justify-content:center; padding:20px;
}
#arena-overlay.open{display:flex;}
.arena-box{
  background:var(--paper); border:3px solid var(--wood-dark); border-radius:var(--radius);
  box-shadow:0 8px 0 var(--shadow); max-width:400px; width:100%; padding:30px; text-align:center;
}
.arena-box h3{font-family:var(--font-display); margin:0; color:var(--soil-dark);}
.arena-box-big{
  max-width:860px; width:92vw; min-height:460px; padding:0;
  background:#1c1a16; border-color:var(--wood-dark);
  box-shadow:0 8px 0 var(--shadow); overflow:hidden;
}
.arena-scene{ position:relative; width:100%; height:460px; }
/* Fallback de emoji (PIXI indisponível): fighters posicionados na cena */
.arena-scene .arena-fallback{
  position:absolute; transform:translateX(-50%); font-size:4rem;
  text-shadow:0 3px 0 rgba(0,0,0,.4); z-index:2;
  transition:transform .15s ease, filter .1s ease;
}
.arena-scene .arena-fallback.hit{ filter:brightness(1.35) saturate(1.3); }
@media (max-width:700px){
  .arena-box-big{ min-height:320px; }
  .arena-scene{ height:320px; }
}

/* HUD da cena: nomes + barras de vida (DOM absolutos sobre o canvas) */
.arena-hud-label{
  position:absolute; font-family:var(--font-display); font-weight:800;
  font-size:.95rem; letter-spacing:.02em; text-shadow:0 1px 2px rgba(0,0,0,.8);
  pointer-events:none; white-space:nowrap;
}
.arena-bar{
  position:absolute; background:rgba(0,0,0,.55); border:2px solid rgba(255,255,255,.28);
  border-radius:6px; overflow:hidden; pointer-events:none;
}
.arena-bar-fill{
  height:100%; width:100%; border-radius:3px;
  transition:width .25s ease; background:#6FBF73;
}

/* Dano flutuante (sobe e some) */
.arena-float{
  position:absolute; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-weight:800; font-size:1.3rem;
  color:#FFE9A8; text-shadow:0 2px 0 rgba(0,0,0,.8);
  pointer-events:none; z-index:5; animation: float-up .65s ease-out forwards;
}
.arena-float-crit{ color:#FFD166; font-size:1.6rem; }
.arena-float-evade{ color:#9BD3F5; font-size:1.1rem; }
@keyframes float-up{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.6);} 15%{opacity:1; transform:translate(-50%,-50%) scale(1.1);} 100%{opacity:0; transform:translate(-50%,-110%) scale(1);} }

/* Banner VS */
.arena-vs{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%) scale(.4);
  font-family:var(--font-display); font-weight:900; font-size:4.2rem;
  color:#FFD166; text-shadow:0 4px 0 #b8860b, 0 0 24px rgba(255,209,102,.55);
  pointer-events:none; z-index:4;
}

/* K.O. */
.arena-ko{
  position:absolute; left:50%; top:40%; transform:translate(-50%,-50%) scale(.5);
  font-family:var(--font-display); font-weight:900; font-size:5rem;
  color:#FF6B5E; text-shadow:0 4px 0 #8E332F, 0 0 30px rgba(255,107,94,.6);
  pointer-events:none; z-index:4;
}

/* Banner de resultado + botão Continuar */
.arena-result-banner{
  position:absolute; left:50%; top:36%; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-weight:900; font-size:3rem;
  letter-spacing:.04em; padding:14px 34px; border-radius:16px;
  border:3px solid rgba(255,255,255,.25); box-shadow:0 6px 0 rgba(0,0,0,.4);
  pointer-events:none; z-index:6; white-space:nowrap;
}
.arena-result-win{ background:linear-gradient(180deg,#6FBF73,#3E8E4A); color:#FFF8DC; }
.arena-result-lose{ background:linear-gradient(180deg,#C0574E,#8E332F); color:#FFE9E4; }
.arena-result-banner.pop{ animation: result-pop .4s ease; }
.arena-continue-btn{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  padding:12px 34px; border:none; border-radius:12px; cursor:pointer;
  background:linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
  color:var(--soil-dark); font-family:var(--font-display); font-weight:800; font-size:1.05rem;
  box-shadow:0 4px 0 #b8860b; z-index:6;
}
.arena-continue-btn:active{ transform:translateX(-50%) translateY(2px); box-shadow:0 2px 0 #b8860b; }

#genealogy-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:400;
  display:none; align-items:center; justify-content:center; padding:20px;
}
#genealogy-overlay.open{display:flex;}
.genealogy-box{
  background:var(--paper); border:3px solid var(--wood-dark); border-radius:var(--radius);
  box-shadow:0 8px 0 var(--shadow); max-width:640px; width:100%; padding:24px;
  max-height:85vh; overflow-y:auto; text-align:left;
}
.genealogy-box h3{font-family:var(--font-display); margin:0 0 14px; color:var(--soil-dark); clear:both;}
.gen-branches{display:flex; gap:20px; flex-wrap:wrap;}
.gen-branch{flex:1; min-width:220px;}
.gen-branch h4{margin:0 0 8px; font-size:.85rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em;}
.gen-node{
  border:2px solid var(--wood-dark); border-radius:10px; padding:8px 10px; margin-bottom:8px;
  background:#FFFBF2; font-size:.82rem;
}
.gen-node.gen-empty{opacity:.55; font-style:italic; border-style:dashed;}
.gen-node .gen-tag{display:block; font-weight:800; font-size:.72rem; color:var(--gold-dark,#a67c00); text-transform:uppercase;}
.gen-node .gen-name{display:block; margin-top:2px;}
.gen-node.phenomenal-node{border-color:#b8860b; background:linear-gradient(135deg,#FFF9E6,#FFE9B0);}
.arena-stage{
  display:flex; align-items:center; justify-content:center; gap:30px;
  font-size:4rem; margin:20px 0; min-height:120px;
}
.fighter{transition:transform 0.15s ease;}
.vs{font-size:2rem; color:var(--bad);}
.arena-result{font-size:1.2rem; font-weight:700; margin-top:10px; color:var(--soil-dark);}

@media (max-width:520px){
  .scene-wrap{height:190px;}
  .brand span{display:none;}
}

/* ---------- AUTH OVERLAY (login/registro) ---------- */
.auth-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:500;
  display:none; align-items:center; justify-content:center; padding:20px;
  overflow-y:auto;
}
.auth-overlay:not(.hidden){display:flex;}
.auth-box{
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border:3px solid var(--wood-dark); border-radius:var(--radius);
  box-shadow:0 10px 0 var(--shadow); max-width:360px; width:100%;
  padding:24px 22px; text-align:center;
}
.auth-box h2{font-family:var(--font-display); margin:0 0 4px; color:var(--soil-dark);}
.auth-box .sub{font-size:.85rem; color:var(--ink-soft); margin:0 0 16px; line-height:1.4;}
.auth-box label{display:block; text-align:left; font-size:.78rem; font-weight:800; color:var(--ink-soft); margin:10px 0 4px; text-transform:uppercase; letter-spacing:.04em;}
.auth-input{
  width:100%; padding:11px 12px; border-radius:10px;
  border:2px solid var(--line); background:#FFFDF6;
  font-family:var(--font-body); font-size:.95rem; color:var(--ink);
  outline:none;
}
.auth-input:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,169,58,.25);}
.auth-error{color:var(--bad); font-size:.82rem; min-height:1.1em; margin:8px 0 2px; font-weight:700;}
.auth-btn{
  width:100%; margin-top:14px; padding:12px; border:none; border-radius:10px;
  background:linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
  color:var(--soil-dark); font-family:var(--font-display); font-weight:800; font-size:1rem;
  cursor:pointer; box-shadow:0 4px 0 #b8860b; transition:transform .06s ease;
}
.auth-btn:active{transform:translateY(2px); box-shadow:0 2px 0 #b8860b;}
.auth-toggle{
  margin-top:12px; background:none; border:none; cursor:pointer;
  color:var(--good); font-family:var(--font-body); font-weight:800; font-size:.85rem;
  text-decoration:underline;
}
.auth-hint{font-size:.75rem; color:var(--ink-soft); text-align:left; margin-top:6px; line-height:1.35;}
.auth-hint code{font-family:var(--font-mono); background:var(--paper-2); padding:1px 4px; border-radius:4px; font-size:.72rem;}

/* Botão Sair na topbar */
.logout-btn{
  background:var(--paper-2); border:2px solid var(--wood-dark); border-radius:10px;
  color:var(--barn-red); font-family:var(--font-body); font-weight:800; font-size:.8rem;
  padding:6px 10px; cursor:pointer;
}
.logout-btn:hover{background:#f6dcd8;}
#sfx-toggle{font-size:.85rem; padding:6px 8px;}

/* ---------- OVERLAY DE RENOMEAR GALO ---------- */
#rename-overlay{
  position:fixed; inset:0; background:rgba(46,36,24,.55); z-index:300;
  display:none; align-items:center; justify-content:center; padding:20px;
}
#rename-overlay.open{display:flex;}
.rename-box{
  background:var(--paper); border:3px solid var(--wood-dark); border-radius:var(--radius);
  box-shadow:0 8px 0 var(--shadow); max-width:340px; width:100%; padding:18px; text-align:center;
  animation:toast-in .2s ease;
}
.rename-box h3{font-family:var(--font-display); margin:0 0 4px; color:var(--soil-dark);}
.rename-box .sub{font-size:.78rem; color:var(--ink-soft); margin:0 0 12px;}
.rename-input{
  width:100%; box-sizing:border-box; padding:10px; margin-bottom:14px;
  border:2px solid var(--wood-dark); border-radius:10px;
  font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--soil-dark);
  background:#fff; outline:none; text-align:center;
}
.rename-input:focus{border-color:var(--good);}

/* =========================================================
   ANIMAÇÕES DE FEEDBACK
   Classes adicionadas por JS: .tab-enter, .hit, .pop, .closing, .bump
========================================================= */
/* Transição de abas: só roda na troca real (JS compara aba anterior) */
#main-content.tab-enter{ animation: tab-in .28s ease-out; }
@keyframes tab-in{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.tab.active{ animation: tab-pop .3s ease; }
@keyframes tab-pop{ 0%{transform:scale(.94);} 60%{transform:scale(1.05);} 100%{transform:scale(1);} }

/* Overlays: entrada com pop, saída com .closing (JS remove .open depois) */
#arena-overlay.open .arena-box,
#confirm-overlay.open .confirm-box,
#genealogy-overlay.open .genealogy-box,
#auth-overlay:not(.hidden) .auth-box{ animation: pop-in .25s ease; }
#arena-overlay.closing .arena-box,
#confirm-overlay.closing .confirm-box,
#genealogy-overlay.closing .genealogy-box{ animation: pop-out .18s ease forwards; }
@keyframes pop-in{ from{transform:scale(.85) translateY(10px); opacity:0;} to{transform:none; opacity:1;} }
@keyframes pop-out{ to{transform:scale(.9); opacity:0;} }

/* Arena: flash de acerto por round + pop no resultado */
.fighter{ transition:transform .15s ease, filter .1s ease; }
.fighter.hit{ filter:brightness(1.35) saturate(1.3); }
#arena-result.pop{ animation: result-pop .4s ease; }
@keyframes result-pop{ 0%{transform:scale(.5); opacity:0;} 60%{transform:scale(1.15);} 100%{transform:scale(1); opacity:1;} }

/* Topbar: pulso quando o valor de um recurso muda */
.res.bump{ animation: res-bump .35s ease; }
@keyframes res-bump{ 0%{transform:scale(1);} 40%{transform:scale(1.16);} 100%{transform:scale(1);} }