/* ── Modais: prevenir scroll do fundo em iOS ── */
.modal-overlay, [class*="modal"], [class*="overlay"] {
  overscroll-behavior: contain;
}
.res-flash {
  animation: coin-flash .5s ease-out;
}
@keyframes coin-flash {
  0%   { color: #e8a030; transform: scale(1.3); }
  40%  { color: #e03030; transform: scale(1.1); }
  100% { color: inherit;  transform: scale(1); }
}
.coin-spend {
  position: fixed;
  font-size: 13px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #e03030;
  pointer-events: none;
  z-index: 9999;
  animation: coin-spend-fly .9s cubic-bezier(.2,.8,.4,1) forwards;
}
@keyframes coin-spend-fly {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  60%  { opacity: 1; transform: translateY(-28px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-48px) scale(.8); }
}
.coin-earn {
  position: fixed;
  font-size: 13px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #e8c030;
  pointer-events: none;
  z-index: 9999;
  animation: coin-spend-fly .9s cubic-bezier(.2,.8,.4,1) forwards;
}

/* ── GAME SELECTOR ── */
#gameSelector {
  position:fixed; inset:0; z-index:150;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  background:rgba(4,3,10,.95);
  opacity:0; pointer-events:none; transition:opacity .3s;
  padding:12px;
  overflow-y:auto;
}
#gameSelector.open { opacity:1; pointer-events:all; }
#gameSelector > *:not(.gs-x-btn) { width:100%; max-width:460px; flex-shrink:0; }
.gs-x-btn {
  position:absolute; top:10px; right:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
  color:#ccc; font-size:13px; width:28px; height:28px;
  border-radius:50%; cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:all .15s; z-index:1; line-height:1;
}
.gs-x-btn:hover { background:rgba(231,76,60,.2); border-color:#e74c3c; color:#e74c3c; }
.gs-title { font-family:'Cinzel',serif; font-size:8px; letter-spacing:4px; color:var(--muted); margin-bottom:4px; }
.diff-pills-row {
  display: flex; gap: 6px; margin-bottom: 12px;
  justify-content: center;
}
.diff-pill {
  flex: 1;
  padding: 7px 4px 6px;
  border-radius: 8px;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 6.5px; letter-spacing: 1.5px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  transition: all .18s ease;
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  position: relative; overflow: hidden;
}
.diff-pill::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; opacity: 0; transition: opacity .18s;
}
.diff-pill .dp-icon { font-size: 13px; line-height: 1; }
.diff-pill .dp-lock { font-size: 11px; line-height: 1; }

/* FÁCIL — verde */
.diff-pill[data-tier="0"] { border-color: rgba(74,222,128,.2); }
.diff-pill[data-tier="0"]::after { background: #22c55e; }
.diff-pill[data-tier="0"]:hover:not(.locked) { border-color: rgba(74,222,128,.6); color: #4ade80; background: rgba(34,197,94,.08); }
.diff-pill[data-tier="0"].active {
  border-color: #22c55e; color: #4ade80;
  background: linear-gradient(160deg, rgba(34,197,94,.2) 0%, rgba(11,9,22,.5) 100%);
  box-shadow: 0 0 12px rgba(34,197,94,.2);
}
.diff-pill[data-tier="0"].active::after { opacity: 1; }

/* MÉDIO — azul */
.diff-pill[data-tier="1"] { border-color: rgba(96,165,250,.2); }
.diff-pill[data-tier="1"]::after { background: #3b82f6; }
.diff-pill[data-tier="1"]:hover:not(.locked) { border-color: rgba(96,165,250,.6); color: #60a5fa; background: rgba(59,130,246,.08); }
.diff-pill[data-tier="1"].active {
  border-color: #3b82f6; color: #60a5fa;
  background: linear-gradient(160deg, rgba(59,130,246,.2) 0%, rgba(11,9,22,.5) 100%);
  box-shadow: 0 0 12px rgba(59,130,246,.2);
}
.diff-pill[data-tier="1"].active::after { opacity: 1; }

/* DIFÍCIL — laranja */
.diff-pill[data-tier="2"] { border-color: rgba(251,146,60,.2); }
.diff-pill[data-tier="2"]::after { background: #f97316; }
.diff-pill[data-tier="2"]:hover:not(.locked) { border-color: rgba(251,146,60,.6); color: #fb923c; background: rgba(249,115,22,.08); }
.diff-pill[data-tier="2"].active {
  border-color: #f97316; color: #fb923c;
  background: linear-gradient(160deg, rgba(249,115,22,.2) 0%, rgba(11,9,22,.5) 100%);
  box-shadow: 0 0 12px rgba(249,115,22,.2);
}
.diff-pill[data-tier="2"].active::after { opacity: 1; }

/* MESTRE — dourado */
.diff-pill[data-tier="3"] { border-color: rgba(201,168,76,.2); }
.diff-pill[data-tier="3"]::after { background: linear-gradient(90deg, var(--gold), #ffe066); }
.diff-pill[data-tier="3"]:hover:not(.locked) { border-color: rgba(201,168,76,.6); color: var(--gold); background: rgba(201,168,76,.08); }
.diff-pill[data-tier="3"].active {
  border-color: var(--gold); color: var(--gold);
  background: linear-gradient(160deg, rgba(201,168,76,.2) 0%, rgba(11,9,22,.5) 100%);
  box-shadow: 0 0 12px rgba(201,168,76,.2);
}
.diff-pill[data-tier="3"].active::after { opacity: 1; }

.diff-pill.locked { opacity: .4; cursor: default; }
.gs-grid  { display:flex; flex-direction:column; gap:7px; width:100%; }
.gs-btn {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; padding:10px 12px; cursor:pointer;
  transition:all .2s; font-family:'Cinzel',serif;
}
.gs-btn:hover { background:rgba(255,255,255,.07); border-color:var(--gold); }
.gs-btn-icon { font-size:22px; flex-shrink:0; }
.gs-btn-info { text-align:left; }
.gs-btn-name { font-size:9px; font-weight:700; color:var(--gold-light); letter-spacing:1px; }
.gs-btn-desc { font-size:7px; color:var(--muted); margin-top:2px; }
.gs-btn-reward { font-size:7px; color:#7ab87a; margin-top:2px; }
.gs-close { font-size:7px; color:var(--muted); cursor:pointer; margin-top:6px; letter-spacing:2px; font-family:'Cinzel',serif; }
.gs-close:hover { color:var(--gold); }

/* ── SHARED MINI MODAL ── */
.mini-modal {
  position:fixed; inset:0; z-index:150;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(4,3,10,.95);
  opacity:0; pointer-events:none;
  transition:opacity .3s;
  padding:12px;
  overflow-y:auto;
  box-sizing:border-box;
}
.mini-modal.open { opacity:1; pointer-events:all; }

/* Card interno — injectado por JS em main.js */
.modal-card {
  background:var(--surface);
  border:1px solid rgba(201,168,76,.15);
  border-radius:14px;
  width:100%; max-width:460px;
  max-height:100%; /* % do backdrop (inset:0 + padding:12px) — zoom-safe */
  display:flex; flex-direction:column; align-items:center;
  padding:14px; gap:0;
  overflow:hidden;
  flex-shrink:0;
}
.mini-modal .modal-card .mini-title { text-align:center; }
/* Modais com scroll interno já têm modal-scroll-body */
.modal-card.has-scroll { padding:0; }
.modal-card.has-scroll .modal-scroll-body { padding:10px 16px 16px; }
.mini-title {
  font-family:'Cinzel',serif; font-size:9px; letter-spacing:3px;
  color:var(--gold); margin-bottom:4px; text-align:center;
}
.mini-sub {
  font-size:7px; color:var(--muted); text-align:center; margin-bottom:12px; letter-spacing:1px;
}
.mini-result-box {
  text-align:center; margin:10px 0 6px;
  font-family:'Cinzel',serif; font-size:12px; font-weight:900; letter-spacing:3px;
  min-height:20px;
}
.mini-result-box.win  { color:#7ab87a; text-shadow:0 0 12px rgba(122,184,122,.5); }
.mini-result-box.lose { color:#e74c3c; text-shadow:0 0 12px rgba(231,76,60,.4); }
.mini-reward-txt { font-size:8px; color:#7ab87a; text-align:center; min-height:14px; margin-bottom:8px; }
.mini-btns { display:flex; gap:8px; margin-top:4px; }
.mini-btn {
  font-family:'Cinzel',serif; font-size:7px; font-weight:700; letter-spacing:1px;
  padding:6px 14px; border-radius:4px; cursor:pointer; border:1px solid;
  transition:all .15s;
}
.mini-btn.primary { border-color:var(--gold); color:var(--gold); background:rgba(201,168,76,.1); }
.mini-btn.primary:hover { background:rgba(201,168,76,.25); }
.mini-btn.close   { border-color:var(--muted); color:var(--muted); background:transparent; }
.mini-btn.close:hover { border-color:var(--gold-light); color:var(--gold-light); }

/* ── MEMÓRIA ELEMENTAL ── */
/* Modal com scroll para acomodar grades grandes (tier Mestre = 20 cartas) */
#memoriaModal { padding:12px; }
#memoriaModal .modal-card {
  justify-content: flex-start;
  overflow-y: auto;
  padding: 14px 14px 12px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  max-height: 100%; /* zoom-safe */
  box-sizing: border-box;
}
#memoriaModal .mini-title   { margin-bottom: 2px; flex-shrink: 0; }
#memoriaModal .mini-sub     { margin-bottom: 8px; flex-shrink: 0; }
#memoriaModal .mem-info     { flex-shrink: 0; }
#memoriaModal .mem-grid     { flex-shrink: 0; }
#memoriaModal .mini-result-box { flex-shrink: 0; }
#memoriaModal .mini-reward-txt { flex-shrink: 0; }
#memoriaModal .mini-btns    {
  flex-shrink: 0;
  /* Garante que os botões ficam sempre visíveis — sticky no fundo */
  position: sticky;
  bottom: 0;
  background: rgba(4,3,10,.97);
  padding: 8px 0 2px;
  margin-top: 6px;
  width: 100%;
  justify-content: center;
}

.mem-grid {
  display:grid; gap:5px; margin-bottom:8px;
}
.mem-card {
  width:38px; height:38px; border-radius:6px;
  background:#0a0816; border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer;
  transition:all .2s cubic-bezier(.34,1.4,.64,1);
  user-select:none;
}
.mem-card.flipped {
  background:rgba(255,255,255,.06);
  border-color:var(--gold);
  transform:scale(1.06);
}
.mem-card.matched {
  background:rgba(122,184,122,.12);
  border-color:#7ab87a;
  cursor:default;
  animation:mem-match-pop .4s ease;
}
.mem-card.wrong {
  background:rgba(231,76,60,.12);
  border-color:#e74c3c;
  animation:mem-wrong-shake .3s ease;
}
@keyframes mem-match-pop  { 0%{transform:scale(1.15)} 100%{transform:scale(1)} }
@keyframes mem-wrong-shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.mem-info { font-size:7px; color:var(--muted); text-align:center; margin-bottom:8px; letter-spacing:1px; }

/* ── SIMON SAYS ── */
.simon-grid {
  display:grid; grid-template-columns:repeat(4,44px);
  gap:6px; margin-bottom:10px;
}
.simon-btn {
  width:44px; height:44px; border-radius:8px;
  border:2px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; cursor:pointer; transition:all .15s;
  background:rgba(255,255,255,.03);
  user-select:none;
}
.simon-btn.active {
  transform:scale(1.15);
  border-color:var(--gold);
  background:rgba(201,168,76,.15);
  box-shadow:0 0 14px rgba(201,168,76,.35);
}
.simon-btn.player-hit {
  transform:scale(1.1);
  background:rgba(90,180,232,.15);
  border-color:var(--raro);
}
.simon-btn:disabled { cursor:default; opacity:.7; }
.simon-info { font-size:8px; color:var(--muted); text-align:center; margin-bottom:8px; letter-spacing:1px; }
.simon-seq-display {
  font-size:7px; color:var(--gold); text-align:center;
  margin-bottom:6px; min-height:14px; letter-spacing:1px; font-family:'Cinzel',serif;
}

/* ── COIN SHOP ── */
.coin-pkg {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:6px; padding:8px 10px; cursor:pointer; transition:all .2s;
}
.coin-pkg:hover  { border-color:var(--gold); background:rgba(201,168,76,.06); }
.coin-pkg.disabled { opacity:.4; cursor:default; pointer-events:none; }
.coin-pkg-icon   { font-size:18px; flex-shrink:0; }
.coin-pkg-info   { flex:1; }
.coin-pkg-name   { font-size:8px; font-weight:700; color:var(--gold-light); font-family:'Cinzel',serif; }
.coin-pkg-desc   { font-size:7px; color:var(--muted); margin-top:1px; }
.coin-pkg-bonus  { font-size:7px; color:#7ab87a; }
.coin-pkg-price  { font-size:8px; color:var(--gold); font-family:'Cinzel',serif; font-weight:700; white-space:nowrap; }

/* ── WALLET BUTTON ── */
.btn-wallet {
  font-family:'Cinzel',serif; font-size:7px; font-weight:700; letter-spacing:1px;
  padding:4px 8px; border-radius:4px; cursor:pointer;
  border:1px solid rgba(255,255,255,.2); color:var(--muted);
  background:rgba(255,255,255,.04); transition:border-color .2s, background .2s;
  white-space:nowrap;
}
.btn-wallet:hover { border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.08); }
.btn-wallet.connected { border-color:#7ab87a; color:#7ab87a; background:rgba(122,184,122,.08); }
.btn-wallet.connected:hover { background:rgba(122,184,122,.15); }
#btnMarket { border-color:rgba(90,180,232,.4); color:#5ab4e8; }
#btnMarket:hover { border-color:#5ab4e8; background:rgba(90,180,232,.1); }

/* ── SHOP ── */
.shop-item {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:6px; padding:9px 11px; cursor:pointer; transition:all .2s;
  position:relative;
}
.shop-item:hover  { border-color:var(--gold); background:rgba(201,168,76,.06); }
.shop-item.disabled { opacity:.4; cursor:default; pointer-events:none; }
.shop-item-icon  { font-size:22px; flex-shrink:0; }
.shop-item-info  { flex:1; }
.shop-item-name  { font-size:9px; font-weight:700; color:var(--gold-light); font-family:'Cinzel',serif; }
.shop-item-desc  { font-size:7px; color:var(--muted); margin-top:2px; }
.shop-item-effect { font-size:7px; color:#7ab87a; margin-top:1px; }
.shop-item-price {
  font-size:9px; font-weight:700; color:var(--gold);
  font-family:'Cinzel',serif; text-align:right; white-space:nowrap;
}
.shop-item-discount { font-size:6px; color:#7ab87a; text-align:right; }

/* ── PHASE UP OVERLAY ── */
#phaseUpOverlay {
  position:fixed; inset:0; z-index:10000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none; opacity:0;
}
.pu-bg {
  position:absolute; inset:0;
  background:radial-gradient(circle at center, rgba(90,180,232,.18) 0%, transparent 70%);
  animation: pu-bg-flash .6s ease-out forwards;
}
@keyframes pu-bg-flash { 0%{opacity:0} 30%{opacity:1} 100%{opacity:0} }
.pu-text {
  font-family:'Cinzel',serif; font-size:11px; font-weight:900; letter-spacing:4px;
  color:#fff; text-shadow:0 0 20px rgba(90,180,232,.9), 0 0 40px rgba(90,180,232,.5);
  opacity:0; transform:scale(.5);
  animation: pu-text-pop .5s cubic-bezier(.34,1.7,.64,1) .15s forwards;
  z-index:1;
}
@keyframes pu-text-pop { to { opacity:1; transform:scale(1); } }
.pu-fase {
  font-family:'Cinzel',serif; font-size:8px; letter-spacing:3px;
  color:var(--raro); opacity:0;
  animation: pu-sub-in .4s ease .4s forwards;
  z-index:1; margin-top:4px;
}
@keyframes pu-sub-in { to { opacity:1; } }
.pu-ring {
  position:absolute; width:120px; height:120px; border-radius:50%;
  border:2px solid rgba(90,180,232,.6);
  animation: pu-ring-expand .8s ease-out forwards;
}
@keyframes pu-ring-expand { 0%{transform:scale(0);opacity:.8} 100%{transform:scale(2.5);opacity:0} }
.pu-ring:nth-child(3) { animation-delay:.15s; border-color:rgba(90,180,232,.4); }
.pu-ring:nth-child(4) { animation-delay:.3s;  border-color:rgba(90,180,232,.2); }

@keyframes evolve-flash {
  0%   { opacity:0; transform:scale(.5); }
  30%  { opacity:1; transform:scale(1.1); }
  100% { opacity:0; transform:scale(1.4); }
}
@keyframes evolve-particle {
  0%   { opacity:1; transform:translate(-50%,-50%) translate(0,0) scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) translate(var(--ex),var(--ey)) scale(0); }
}

/* ── MARKET ── */
.mkt-item {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:6px; padding:8px 10px; transition:all .2s;
}
.mkt-item:hover { border-color:var(--gold); }
.mkt-item-icon  { font-size:18px; flex-shrink:0; }
.mkt-item-info  { flex:1; }
.mkt-item-name  { font-size:8px; font-weight:700; font-family:'Cinzel',serif; }
.mkt-item-sub   { font-size:6px; color:var(--muted); margin-top:1px; }
.mkt-item-price { font-size:9px; color:var(--gold); font-family:'Cinzel',serif; font-weight:700; }
.mkt-buy-btn {
  font-family:'Cinzel',serif; font-size:6px; font-weight:700; letter-spacing:1px;
  padding:4px 8px; border-radius:3px; cursor:pointer;
  border:1px solid var(--gold); color:var(--gold);
  background:rgba(201,168,76,.08); transition:all .2s; white-space:nowrap;
}
.mkt-buy-btn:hover { background:rgba(201,168,76,.2); }
.mkt-buy-btn:disabled { opacity:.4; cursor:default; pointer-events:none; }

/* ── CONNECT WALLET BUTTON ── */
.btn-connect-wallet {
  font-family:'Cinzel',serif; font-size:7px; font-weight:700; letter-spacing:1px;
  padding:8px 18px; border-radius:4px; cursor:pointer; position:relative; overflow:hidden;
  border:1px solid #5ab4e8; color:#5ab4e8;
  background:rgba(90,180,232,.08); transition:all .2s;
  white-space:nowrap;
}
.btn-connect-wallet:hover { background:rgba(90,180,232,.2); box-shadow:0 0 14px rgba(90,180,232,.25); color:#7ecfff; border-color:#7ecfff; }
.btn-connect-wallet:active { transform:scale(.97); }

/* ── EQUIPPED ITEM DISPLAY ── */
#equippedItemsDisplay {
  position:absolute; right:-14px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:6px;
  z-index:12; pointer-events:none;
}
.equipped-item-badge {
  width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.2), rgba(0,0,0,.5));
  border:1px solid rgba(201,168,76,.5);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  box-shadow:0 0 10px rgba(201,168,76,.35), inset 0 0 6px rgba(0,0,0,.5);
  animation:orb-pulse 3s ease-in-out infinite;
}
.equipped-item-badge:nth-child(2) { animation-delay:1s; }
.equipped-item-badge:nth-child(3) { animation-delay:2s; }
@keyframes orb-pulse {
  0%,100% { box-shadow:0 0 10px rgba(201,168,76,.35),inset 0 0 6px rgba(0,0,0,.5); transform:scale(1); }
  50%      { box-shadow:0 0 20px rgba(201,168,76,.7), inset 0 0 6px rgba(0,0,0,.5); transform:scale(1.08); }
}
.item-expiry-warn { color:#e8a030; font-size:6px; text-align:center; margin-top:2px; }

/* ── MODAIS COM SCROLL (market, coinshop, itemInv, eggInv) ──
   height explícito no card é OBRIGATÓRIO para flex:1; min-height:0
   funcionar no scroll body interno. max-height sozinho não chega. */
#marketModal, #coinShopModal, #itemInvModal, #eggInvModal {
  padding:12px; justify-content:center; align-items:center; overflow:hidden;
}
#marketModal .modal-card,
#coinShopModal .modal-card,
#itemInvModal .modal-card,
#eggInvModal .modal-card {
  padding:0;
  height:100%;      /* % do backdrop — zoom-safe */
  max-height:100%;
  overflow:hidden;
  justify-content:flex-start;
}
#marketModal .modal-header,
#coinShopModal .modal-header,
#itemInvModal .modal-header,
#eggInvModal .modal-header { flex-shrink:0; }
#marketModal .modal-scroll-body,
#coinShopModal .modal-scroll-body,
#itemInvModal .modal-scroll-body,
#eggInvModal .modal-scroll-body {
  flex:1; min-height:0; overflow-y:auto;
  width:100%; padding:10px 16px 16px; box-sizing:border-box;
}

.mkt-header { width:100%; padding:12px 14px 10px; border-bottom:1px solid rgba(201,168,76,.18); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; background:rgba(201,168,76,.03); }
.mkt-header .mini-title { margin:0; font-size:10px; }
.mkt-body { flex:1; min-height:0; overflow-y:auto; width:100%; padding:10px 14px 14px; box-sizing:border-box; display:flex; flex-direction:column; gap:8px; }

/* hatchConfirmModal e simonModal — conteúdo fixo */
#hatchConfirmModal, #simonModal, #jkpModal { overflow:hidden; }

/* ── MODAL HEADER FIXO ── */
.modal-header { width:100%; padding:12px 16px 10px; border-bottom:1px solid rgba(201,168,76,.15); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; background:rgba(4,3,10,.97); }
.modal-header .mini-title { margin:0; }

/* ── JOGO DA VELHA ── */
#velhaModal { padding:12px; }
#velhaModal .modal-card { justify-content:flex-start; overflow-y:auto; max-height:100%; box-sizing:border-box; }
#velhaModal .mini-title   { margin-bottom:2px; }
#velhaModal .mini-sub     { margin-bottom:6px; }
#velhaModal .mini-result-box { margin-top:6px; }
#velhaModal .mini-btns    { margin-top:8px; }
.velha-grid { display:grid; grid-template-columns:repeat(3,44px); gap:5px; margin:6px auto 8px; width:fit-content; }
.velha-cell { width:44px; height:44px; border-radius:8px; border:1px solid rgba(255,255,255,.15); background:#0a0816; font-family:'Cinzel',serif; font-size:20px; font-weight:900; cursor:pointer; transition:all .15s ease; display:flex; align-items:center; justify-content:center; color:var(--text); }
.velha-cell:not(:disabled):hover { border-color:var(--gold); background:rgba(201,168,76,.08); transform:scale(1.06); }
.velha-cell.velha-x { color:var(--raro);  border-color:rgba(90,180,232,.3); }
.velha-cell.velha-o { color:#e8a03a;      border-color:rgba(232,160,58,.3); }
.velha-cell.velha-win { border-color:var(--gold) !important; background:rgba(201,168,76,.15) !important; box-shadow:0 0 14px rgba(201,168,76,.35); animation:velha-win-pulse .5s ease infinite alternate; }
@keyframes velha-win-pulse { from{box-shadow:0 0 8px rgba(201,168,76,.3)} to{box-shadow:0 0 20px rgba(201,168,76,.6)} }
.velha-cell:disabled { cursor:default; }

/* ── CATALOG ITEMS ── */
.mkt-sell-form { border:1px solid rgba(201,168,76,.2); border-radius:8px; padding:12px; background:rgba(201,168,76,.03); margin-top:4px; }
.mkt-sell-form-label { font-family:'Cinzel',serif; font-size:6px; color:var(--muted); letter-spacing:1.5px; margin-bottom:6px; display:block; }
.mkt-price-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.mkt-price-input { flex:1; max-width:90px; background:#0d0a1a; border:1px solid var(--border); border-radius:6px; color:var(--gold); font-family:'Cinzel',serif; font-size:10px; padding:5px 8px; outline:none; }
.mkt-price-input:focus { border-color:var(--gold); }
.mkt-action-row { display:flex; gap:6px; }
.mkt-btn-confirm { flex:1; padding:7px; cursor:pointer; font-family:'Cinzel',serif; font-size:7px; letter-spacing:1px; border:1px solid #7ab87a; border-radius:6px; background:rgba(122,184,122,.12); color:#7ab87a; transition:all .2s; font-weight:700; }
.mkt-btn-confirm:hover { background:rgba(122,184,122,.25); }
.mkt-btn-cancel { flex:1; padding:7px; cursor:pointer; font-family:'Cinzel',serif; font-size:7px; letter-spacing:1px; border:1px solid rgba(255,255,255,.1); border-radius:6px; background:transparent; color:var(--muted); transition:all .2s; }
.mkt-btn-cancel:hover { border-color:#e74c3c; color:#e74c3c; }
.mkt-catalog-card { border-radius:10px; padding:14px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.07); transition:border-color .2s; }
.mkt-catalog-card:hover { border-color:rgba(201,168,76,.25); background:rgba(201,168,76,.03); }
.mkt-catalog-top { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.mkt-catalog-emoji { font-size:24px; flex-shrink:0; }
.mkt-catalog-info { flex:1; }
.mkt-catalog-name { font-family:'Cinzel',serif; font-size:8.5px; font-weight:700; letter-spacing:1px; }
.mkt-catalog-type { font-size:6.5px; color:var(--muted); margin-top:3px; }
.mkt-catalog-price { font-family:'Cinzel',serif; font-size:12px; color:var(--gold); font-weight:700; text-align:right; flex-shrink:0; }
.mkt-catalog-desc { font-size:7px; color:#887799; margin-bottom:7px; line-height:1.6; }
.mkt-catalog-effect { font-size:7px; color:#5ab4e8; margin-bottom:12px; padding:6px 10px; border-left:2px solid #1a6080; background:rgba(90,180,232,.05); border-radius:0 4px 4px 0; line-height:1.5; }
.mkt-catalog-footer { display:flex; align-items:center; gap:8px; }
.mkt-owned-badge { flex:1; text-align:center; padding:6px; font-size:6px; font-family:'Cinzel',serif; letter-spacing:1px; color:#7ab87a; border:1px solid rgba(122,184,122,.3); border-radius:6px; background:rgba(122,184,122,.05); }
.mkt-duration-note { font-size:5.5px; color:var(--muted); }
.mkt-catalog-buy { flex:1; padding:7px; cursor:pointer; font-family:'Cinzel',serif; font-size:7px; letter-spacing:1px; font-weight:700; border:1px solid var(--gold); border-radius:6px; background:rgba(201,168,76,.1); color:var(--gold); transition:all .2s; }
.mkt-catalog-buy:hover { background:rgba(201,168,76,.25); }
.mkt-catalog-buy:disabled { opacity:.35; cursor:not-allowed; }

/* ── MODAIS PVP (Arena, Rouba Monte, Batalha Naval) ── */
#arenaModal,
#roubaMontModal,
#batalhaNavalModal {
  position:fixed; inset:0; z-index:150;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  background:rgba(4,3,10,.95);
  opacity:0; pointer-events:none; transition:opacity .3s;
  padding:12px; overflow-y:auto;
  overflow-y:auto; overflow-x:hidden;
}
#arenaModal.open,
#roubaMontModal.open,
#batalhaNavalModal.open { opacity:1; pointer-events:all; }
/* Conteúdo interno centrado e com largura limitada */
#arenaModal > *,
#roubaMontModal > *,
#batalhaNavalModal > *,
#jkpModal > *,
#minaModal > * { width:100%; max-width:480px; }