:root{
  --bg:#0f1b24;
  --game:#152431;
  --panel:#1a2c38;
  --input:#0f212e;
  --tile:#2f4553;
  --tile-hover:#3a5161;
  --border:#2a4254;
  --blue:#1475e1;
  --blue-hover:#1267c7;
  --text:#fff;
  --muted:#b1bcca;
  --muted-2:#7a8a99;
  --green:#2bd47d;
  --red:#e9415f;
  --gold:#f5b301;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
a{color:inherit;text-decoration:none}

/* ---- topbar ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;border-bottom:1px solid var(--border);background:#11202b}
.back{color:var(--muted);font-size:14px;font-weight:500;transition:.15s}
.back:hover{color:var(--text)}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.5px}
.logo .dot{color:var(--green)}
.balance{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;background:var(--input);border:1px solid var(--border);border-radius:9px;padding:6px 13px}
.balance small{color:var(--muted-2);font-size:10px;text-transform:uppercase;letter-spacing:.5px}
.balance b{font-size:15px;color:var(--green);font-family:'Space Grotesk',sans-serif}

/* ---- layout ---- */
.game{display:flex;gap:0;max-width:1180px;margin:22px auto;background:var(--game);border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.03);min-height:560px}
.panel{width:300px;flex:0 0 300px;background:var(--panel);padding:16px;display:flex;flex-direction:column;gap:14px}
.board-wrap{flex:1;padding:22px;display:flex;flex-direction:column;gap:16px}

/* ---- campos ---- */
.field{display:flex;flex-direction:column;gap:7px}
.field-label{font-size:13px;color:var(--muted);font-weight:500;display:flex;justify-content:space-between;align-items:center}
.field-label .usd{color:var(--muted-2);font-size:12px}
.bet-row{display:flex;gap:8px}
.input-wrap{position:relative;flex:1;display:flex;align-items:center;background:var(--input);border:1px solid var(--border);border-radius:8px;transition:.15s}
.input-wrap:focus-within{border-color:var(--blue)}
.input-wrap .prefix{padding-left:12px;color:var(--muted-2);font-size:14px}
.input-wrap input{width:100%;background:transparent;border:none;outline:none;color:var(--text);font-family:inherit;font-size:14px;font-weight:600;padding:11px 12px}
.input-wrap input[readonly]{color:var(--muted)}
.chip{background:var(--input);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:0 14px;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;transition:.15s}
.chip:hover{background:var(--tile)}
.chip:disabled{opacity:.5;cursor:not-allowed}

/* ---- botões ---- */
.btn-primary{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:14px;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit;transition:.15s;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.btn-primary:hover{background:var(--blue-hover)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-secondary{background:var(--tile);color:var(--muted);border:none;border-radius:8px;padding:12px;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;transition:.15s}
.btn-secondary:enabled{color:var(--text)}
.btn-secondary:enabled:hover{background:var(--tile-hover)}
.btn-secondary:disabled{opacity:.6;cursor:not-allowed}

.moles-legend{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--muted-2)}
.moles-legend span{display:flex;align-items:center;gap:8px}
.moles-legend .mark{width:13px;height:13px;border-radius:50%;flex:0 0 13px}
.moles-legend .mark.mole{background:linear-gradient(#ffd23f,#ff9420)}
.moles-legend .mark.empty{background:var(--gold);border-radius:50%/35%}

.rules{font-size:12px;line-height:1.55;color:var(--muted-2);border-top:1px solid var(--border);padding-top:14px;margin-top:2px}
.rules b{color:var(--muted)}

/* ---- versus / estado ---- */
.versus{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel);border-radius:10px;padding:12px 18px}
.vs-player{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;transition:.2s}
.vs-player .avatar{font-size:20px}
.vs-player .found{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;color:var(--gold);background:var(--input);border:1px solid var(--border);border-radius:7px;padding:2px 8px}
.vs-sep{font-size:13px;color:var(--muted);text-align:center;flex:1}
.vs-player.win{color:var(--green);text-shadow:0 0 12px rgba(43,212,125,.5)}
.vs-player.win .avatar{transform:scale(1.18)}
.vs-player.lost{color:var(--red);opacity:.75}

/* ---- arena ---- */
.arena{flex:1;display:flex;align-items:center;justify-content:center;gap:18px;background:var(--game);border-radius:12px;padding:26px 14px}
.field-col{display:flex;flex-direction:column;align-items:center;gap:14px;flex:1;max-width:430px}
.field-cap{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted-2);font-weight:600}
.field-col.opp{flex:0 0 auto;max-width:none;opacity:.92}
.arena-mid{display:flex;flex-direction:column;align-items:center;gap:8px}
.arena-mid .rnd{font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.6px;white-space:nowrap}
.arena-mid .vs-badge{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;color:var(--muted);background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:6px 11px}

/* ---- tabuleiro de buracos (2-3-2) ---- */
.board{display:flex;flex-direction:column;align-items:center;gap:6px;transition:filter .2s}
.board .row{display:flex;gap:18px;justify-content:center}
.board.small{gap:4px}
.board.small .row{gap:11px}
.board.thinking{filter:brightness(1.04)}

.cell{position:relative;width:94px;height:104px;display:flex;align-items:flex-end;justify-content:center}
.board.small .cell{width:58px;height:64px}

.hole{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:90px;height:78px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%,#0b151c 0%,#15252e 52%,#273c4a 100%);
  box-shadow:inset 0 11px 18px rgba(0,0,0,.66),inset 0 -3px 6px rgba(255,255,255,.05),0 0 0 8px #1b2b35,0 7px 14px rgba(0,0,0,.4);
  transition:box-shadow .15s,transform .12s;
}
.board.small .hole{width:54px;height:46px;box-shadow:inset 0 7px 12px rgba(0,0,0,.66),inset 0 -2px 4px rgba(255,255,255,.05),0 0 0 5px #1b2b35,0 4px 9px rgba(0,0,0,.4)}

/* turno do jogador: buracos por revelar ficam clicáveis */
.board.live .cell:not(.revealed){cursor:pointer}
.board.live .cell:not(.revealed):hover .hole{box-shadow:inset 0 11px 18px rgba(0,0,0,.6),0 0 0 8px #1b2b35,0 0 0 11px var(--blue),0 0 16px rgba(20,117,225,.45);transform:translateX(-50%) translateY(-2px)}
.cell.chosen .hole{box-shadow:inset 0 11px 18px rgba(0,0,0,.6),0 0 0 8px #1b2b35,0 0 0 11px var(--blue),0 0 18px rgba(20,117,225,.6)}
.cell.revealed.miss .hole{box-shadow:inset 0 11px 18px rgba(0,0,0,.6),0 0 0 8px #2a1c22,0 0 0 11px rgba(233,65,95,.6),0 0 18px rgba(233,65,95,.4)}
.cell.revealed.hit .hole{box-shadow:inset 0 11px 18px rgba(0,0,0,.55),0 0 0 8px #1b2b35,0 0 0 11px rgba(43,212,125,.4)}

/* profundidade interior dos buracos */
.hole::before{
  content:"";position:absolute;inset:12px 9px 9px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 34%,#08131a 0%,#0d1c25 58%,#182d39 100%);
  box-shadow:inset 0 9px 13px rgba(0,0,0,.62),0 1px 0 rgba(255,255,255,.05);
}
.board.small .hole::before{inset:7px 5px 5px;box-shadow:inset 0 5px 8px rgba(0,0,0,.62)}

/* ---- a mole (SVG vetorial) ---- */
.mole{
  position:absolute;left:50%;bottom:6px;width:86px;height:92px;
  transform-origin:50% 100%;transform:translateX(-50%) translateY(58%) scale(.72);opacity:0;
  z-index:2;pointer-events:none;will-change:transform,opacity;
}
.board.small .mole{width:54px;height:59px;bottom:3px}
.mole-art{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 7px 5px rgba(0,0,0,.34))}
.mole-body{fill:#ffc400}
.mole-body-shade{fill:#f19a00;opacity:.62}
.mole-highlight{fill:#fff6cf}
.mole-eye{fill:#172b37;transform-box:fill-box;transform-origin:center}
.mole-snout{fill:#ff7400}
.mole-snout-light{fill:#ff9b21;opacity:.85}
.mole-smile{fill:none;stroke:#8a351e;stroke-width:4;stroke-linecap:round}
.mole-tooth{fill:#fffdf4}
.mole-belly{fill:#ff8500}
.mole-belly-light{fill:#ffac27;opacity:.55}
.cell.revealed.hit .mole{animation:molePop .72s cubic-bezier(.18,1.25,.35,1) forwards}
.cell.revealed.hit .mole-art{animation:moleWobble .78s .12s ease-in-out both}
@keyframes molePop{
  0%{opacity:0;transform:translateX(-50%) translateY(62%) scale(.68,.78)}
  42%{opacity:1;transform:translateX(-50%) translateY(-31%) scale(1.08,.94)}
  63%{opacity:1;transform:translateX(-50%) translateY(-14%) scale(.96,1.05)}
  80%{opacity:1;transform:translateX(-50%) translateY(-23%) scale(1.02,.99)}
  100%{opacity:1;transform:translateX(-50%) translateY(-19%) scale(1)}
}
@keyframes moleWobble{
  0%,100%{transform:rotate(0)}
  32%{transform:rotate(-3deg)}
  62%{transform:rotate(2.5deg)}
}

/* moeda revelada num buraco vazio (falha) */
.coin{
  position:absolute;left:50%;bottom:16px;width:38px;height:18px;border-radius:50%;
  background:radial-gradient(ellipse at 45% 28%,#fff0b2 0%,#ffc91c 32%,#f5a900 70%,#b97800 100%);
  border:2px solid #e5a300;box-shadow:0 3px 5px rgba(0,0,0,.48),inset 0 1px 2px rgba(255,255,255,.75);
  transform:translateX(-50%) translateY(8px) scale(.2);opacity:0;z-index:1;pointer-events:none;
}
.coin::after{content:"";position:absolute;inset:3px 8px;border-radius:50%;border:1px solid rgba(128,79,0,.38)}
.board.small .coin{width:25px;height:12px;bottom:9px;border-width:1px}
.board.small .coin::after{inset:2px 5px}
.cell.revealed.miss .coin{animation:coinUp .48s cubic-bezier(.2,1.25,.4,1) forwards}
@keyframes coinUp{
  0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.2)}
  70%{opacity:1;transform:translateX(-50%) translateY(-4px) scale(1.08)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}

/* moles reveladas no fim (onde estavam mas não foram escolhidas) */
.cell.ghost .mole{opacity:.38;transform:translateX(-50%) translateY(-14%) scale(.82);filter:grayscale(.12) saturate(.75)}
.cell.ghost .mole-art{filter:drop-shadow(0 5px 4px rgba(0,0,0,.25))}

/* ---- o martelo (SVG vetorial) ---- */
.mallet{
  position:absolute;left:50%;top:-23px;width:88px;height:88px;margin-left:-7px;
  transform-origin:76% 82%;transform:translate(-18px,-12px) rotate(-54deg);opacity:0;
  z-index:4;pointer-events:none;overflow:visible;filter:drop-shadow(0 7px 4px rgba(0,0,0,.4));will-change:transform,opacity;
}
.board.small .mallet{width:54px;height:54px;top:-13px;margin-left:-4px}
.mallet-head-shadow{fill:#778795;opacity:.48}
.mallet-head-main{fill:#e9f0f4}
.mallet-head-light{fill:#fff;opacity:.85}
.mallet-cap-left{fill:#b8c5ce}
.mallet-cap-right{fill:#c8d3db}
.mallet-mark{fill:#e34d68}
.mallet-mark-light{fill:#ff9aad;opacity:.75}
.mallet-handle-shadow{fill:#607482;opacity:.65}
.mallet-handle-main{fill:#e6eef2}
.mallet-handle-light{fill:#fff;opacity:.7}
.mallet-grip{fill:#cbd7de}
.cell.striking .mallet{animation:malletHit .52s cubic-bezier(.28,.04,.28,1) both}
.cell.striking .hole{animation:holeImpact .52s ease-out both}
@keyframes malletHit{
  0%{opacity:0;transform:translate(-25px,-18px) rotate(-48deg) scale(.94)}
  15%{opacity:1;transform:translate(-29px,-22px) rotate(-60deg) scale(1)}
  53%{opacity:1;transform:translate(-27px,-22px) rotate(-60deg) scale(1)}
  66%{opacity:1;transform:translate(-4px,20px) rotate(10deg) scale(1.03,.97)}
  75%{opacity:1;transform:translate(-8px,13px) rotate(-4deg) scale(.98,1.02)}
  100%{opacity:0;transform:translate(-18px,-6px) rotate(-27deg) scale(.96)}
}
@keyframes holeImpact{
  0%,55%,100%{transform:translateX(-50%) scale(1)}
  66%{transform:translateX(-50%) scale(.94,.9)}
  76%{transform:translateX(-50%) scale(1.03,1.04)}
}

@media(prefers-reduced-motion:reduce){
  .cell.striking .mallet,.cell.striking .hole,.cell.revealed.hit .mole,.cell.revealed.hit .mole-art,.cell.revealed.hit .mole-eye,.cell.revealed.miss .coin{animation-duration:.01ms;animation-iteration-count:1}
}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 22px;font-weight:600;font-size:15px;opacity:0;pointer-events:none;transition:.3s;box-shadow:0 14px 40px rgba(0,0,0,.5);z-index:20}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.win{border-color:var(--green);color:var(--green)}
.toast.lose{border-color:var(--red);color:var(--red)}
.toast.push{border-color:var(--blue);color:#69b4ff}

@media(max-width:860px){
  .game{flex-direction:column;margin:14px;min-height:auto}
  .panel{width:100%;flex:none}
  .arena{flex-direction:column;gap:14px}
  .arena-mid{flex-direction:row;gap:12px}
  .field-col,.field-col.opp{max-width:none;width:100%}
  .board.small .cell{width:62px;height:68px}
  .board.small .hole{width:58px;height:50px}
  .board.small .mole{width:50px;height:50px}
}