*{box-sizing:border-box} :root{--bg:#05070c;--card:#11141d;--card2:#171b27;--line:rgba(255,255,255,.09);--text:#f7f8fc;--muted:#aab3c6;--red:#9d111e;--red2:#e58ca0;--green:#23d26a;--gold:#d29b25;--danger:#ef4f55;--radius:24px;--font:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} body{margin:0;min-height:100vh;font-family:var(--font);color:var(--text);background:radial-gradient(circle at 12% 0%,rgba(157,17,30,.24),transparent 28%),linear-gradient(180deg,#080b13,#03050a)} button,select{font-family:inherit}.page{width:min(1500px,calc(100% - 28px));margin:0 auto;padding:18px 0 36px}.card,.top-hero{background:linear-gradient(180deg,rgba(18,21,31,.97),rgba(9,12,19,.97));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 22px 60px rgba(0,0,0,.35)}.top-hero{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 26px;margin-bottom:14px;overflow:hidden}.top-hero h1{font-size:clamp(2rem,4vw,4rem);line-height:.95;margin:6px 0 10px}.top-hero p{max-width:740px;color:var(--muted);line-height:1.55;margin:0}.eyebrow{color:#ff9bac;font-size:.78rem;letter-spacing:.22em;font-weight:900}.hero-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}.btn{border:1px solid var(--line);border-radius:999px;padding:12px 18px;color:#fff;text-decoration:none;font-weight:900;background:#191d29;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.48;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(90deg,#9a121c,#c72c39 56%,#df8ea2);box-shadow:0 12px 28px rgba(157,17,30,.25)}.btn-ghost{background:linear-gradient(180deg,#1b1f2c,#111520)}.btn-mini{border:1px solid rgba(255,255,255,.16);background:#1b1f2c;color:#fff;border-radius:999px;font-weight:800;padding:9px 13px;cursor:pointer}.full{width:100%;justify-content:center}.setup-card{padding:16px 18px;margin-bottom:14px}.setup-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}.setup-grid label span{display:block;color:#ff9bac;font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:.76rem;margin-bottom:8px}.setup-grid select,.select-list select{width:100%;background:#0d1018;color:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 14px;font-weight:800}.muted{color:var(--muted);line-height:1.55}.setup-card .muted{margin:10px 0 0}.game-card{display:grid;grid-template-columns:340px 1fr;min-height:720px;overflow:hidden}.shot-panel{padding:18px;background:linear-gradient(180deg,rgba(17,20,31,.98),rgba(11,14,23,.98));border-right:1px solid var(--line);max-height:720px;overflow:auto}.shot-panel.minimized{width:82px;overflow:hidden}.shot-panel.minimized > *:not(.shot-head){display:none}.shot-panel.minimized .shot-head{writing-mode:vertical-rl;gap:10px}.shot-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.shot-head h2{margin:3px 0 0;font-size:1.35rem}.current-box{display:grid;grid-template-columns:1fr;gap:9px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:18px;padding:13px;margin-bottom:15px}.current-box span{display:block;color:#ff9bac;font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em}.current-box strong{display:block;font-size:1rem;margin-top:4px}.choice-block{margin:14px 0}.choice-block h3{font-size:1rem;margin:0 0 8px}.choice-row{display:grid;grid-template-columns:1fr;gap:7px}.choice{border:1px solid var(--line);border-radius:13px;background:#171b26;color:#fff;font-weight:900;padding:11px 10px;cursor:pointer;transition:.2s}.choice.active{background:linear-gradient(90deg,#89111a,#a92733);border-color:rgba(255,155,172,.45);box-shadow:0 12px 24px rgba(157,17,30,.25)}.shot-panel .btn{margin-top:10px}.match-stage{position:relative;min-width:0;background:radial-gradient(circle at 80% 0%,rgba(18,91,49,.22),transparent 30%),linear-gradient(180deg,#060911,#02060a)}.score-hud{height:118px;display:grid;grid-template-columns:1fr 260px 1fr;align-items:center;gap:12px;padding:16px 20px;background:linear-gradient(90deg,rgba(148,18,28,.44),rgba(0,0,0,.18),rgba(15,96,50,.34));border-bottom:1px solid var(--line)}.team-hud span,.score-main span{color:#ff9bac;font-weight:900;font-size:.72rem;letter-spacing:.17em;text-transform:uppercase}.team-hud strong{display:block;font-size:1.55rem;margin:5px 0}.team-hud.away{text-align:right}.dots{display:flex;gap:8px}.team-hud.away .dots{justify-content:flex-end}.dot{width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.14)}.dot.goal{background:#2dd16f}.dot.miss{background:#ed575d}.dot.save{background:#d39b25}.score-main{text-align:center;background:rgba(0,0,0,.42);border:1px solid var(--line);border-radius:18px;padding:11px 10px}.score-main strong{display:block;font-size:2.6rem;line-height:1}.score-main small{color:#d8dfef}.result-toast{position:absolute;left:50%;top:98px;transform:translateX(-50%);z-index:20;padding:12px 46px;border-radius:999px;font-weight:1000;letter-spacing:.08em;border:1px solid rgba(255,255,255,.12);background:#222633;box-shadow:0 15px 34px rgba(0,0,0,.24)}.result-toast.goal{background:#08733b}.result-toast.save{background:#a27111}.result-toast.post{background:#955d0f}.result-toast.miss{background:#8e1520}.field-scene{position:relative;min-height:602px;overflow:hidden;background:radial-gradient(ellipse at center 30%,rgba(255,255,255,.08),transparent 20%),linear-gradient(180deg,#060912 0%,#02100c 70%,#062d1d 100%)}.stadium-bg{position:absolute;inset:0 0 auto;height:245px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 22px),linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.45));opacity:.72}.light-beam{position:absolute;top:0;width:44%;height:280px;background:radial-gradient(ellipse at top,rgba(255,255,255,.16),transparent 60%);filter:blur(2px);opacity:.7}.beam-left{left:-8%;transform:skewX(-14deg)}.beam-right{right:-8%;transform:skewX(14deg)}.goal-3d{position:absolute;left:50%;top:76px;width:min(760px,72%);height:230px;transform:translateX(-50%);perspective:800px;z-index:4}.post{position:absolute;background:linear-gradient(90deg,#f8fbff,#cfd8e8,#fff);box-shadow:0 0 12px rgba(255,255,255,.38);z-index:10}.post-left,.post-right{top:0;width:8px;height:228px;border-radius:5px}.post-left{left:0}.post-right{right:0}.crossbar{left:0;right:0;top:0;height:8px;border-radius:5px}.goal-depth{position:absolute;border:2px solid rgba(225,234,245,.36);z-index:1}.depth-left{left:-38px;top:28px;width:40px;height:198px;transform:skewY(-20deg)}.depth-right{right:-38px;top:28px;width:40px;height:198px;transform:skewY(20deg)}.depth-top{left:-36px;right:-36px;top:26px;height:36px;transform:skewX(-18deg)}.net-layer{position:absolute;left:8px;right:8px;top:8px;bottom:0;background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);background-size:25px 25px;opacity:.55;z-index:2;box-shadow:inset 0 0 50px rgba(255,255,255,.04)}.target{position:absolute;z-index:14;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.018);border-radius:10px;cursor:pointer}.target:hover{background:rgba(255,255,255,.085)}.t1,.t2,.t3,.t4,.t5,.t6,.t7,.t8,.t9{width:calc(33.33% - 12px);height:calc(33.33% - 12px)}.t1{left:12px;top:14px}.t2{left:calc(33.33% + 6px);top:14px}.t3{right:12px;top:14px}.t4{left:12px;top:calc(33.33% + 9px)}.t5{left:calc(33.33% + 6px);top:calc(33.33% + 9px)}.t6{right:12px;top:calc(33.33% + 9px)}.t7{left:12px;bottom:12px}.t8{left:calc(33.33% + 6px);bottom:12px}.t9{right:12px;bottom:12px}.perspective-grass{position:absolute;left:18%;right:18%;bottom:-8px;height:170px;background:repeating-linear-gradient(105deg,rgba(255,255,255,.045) 0 36px,rgba(0,0,0,.04) 36px 72px),linear-gradient(180deg,rgba(37,118,73,.16),rgba(25,112,66,.28));clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);border-top:1px solid rgba(255,255,255,.09);z-index:1}.penalty-mark{position:absolute;left:50%;bottom:148px;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.8);z-index:2}.ball{position:absolute;left:calc(50% - 11px);bottom:144px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 28%,#dbe2ed 29% 100%);box-shadow:0 0 0 2px rgba(0,0,0,.38),0 10px 25px rgba(0,0,0,.28);z-index:18}.sprite{position:absolute;z-index:16;transform-origin:center}.sprite .shadow{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:70px;height:16px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(3px)}.kicker{left:calc(50% - 36px);bottom:48px;width:72px;height:132px}.keeper{left:calc(50% - 48px);top:183px;width:96px;height:106px}.head{position:absolute;border-radius:50%;background:#d8ab82}.kicker .head{width:25px;height:25px;left:24px;top:0}.keeper .head{width:22px;height:22px;left:37px;top:0}.torso{position:absolute;border-radius:18px 18px 12px 12px;background:var(--kit,#b51220);box-shadow:inset -9px -12px 18px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.25)}.kicker .torso{width:42px;height:58px;left:15px;top:23px}.keeper .torso{width:48px;height:45px;left:24px;top:22px;background:var(--keeperKit,#087e45)}.torso em{font-style:normal;display:grid;place-items:center;height:100%;font-size:1.35rem;font-weight:1000;color:#fff}.arm,.leg{position:absolute;border-radius:999px;background:#eef3fb;box-shadow:0 2px 7px rgba(0,0,0,.22)}.kicker .arm{width:13px;height:43px;top:28px}.kicker .arm-l{left:4px;transform:rotate(28deg);background:#d8ab82}.kicker .arm-r{right:3px;transform:rotate(-28deg);background:#eef3fb}.kicker .leg{width:14px;height:55px;top:75px}.kicker .leg-l{left:17px;transform:rotate(7deg)}.kicker .leg-r{right:7px;transform:rotate(-54deg);transform-origin:top center}.keeper .arm{width:14px;height:66px;top:20px}.keeper .arm-l{left:16px;transform:rotate(55deg)}.keeper .arm-r{right:16px;transform:rotate(-55deg)}.keeper .leg{width:14px;height:48px;top:64px;background:var(--keeperSocks,#06361f)}.keeper .leg-l{left:31px;transform:rotate(22deg)}.keeper .leg-r{right:31px;transform:rotate(-22deg)}.kicker.away .torso{background:var(--awayKit,#15803d)}.kicker.home .torso{background:var(--homeKit,#b51220)}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.history-card,.order-card,.final-card{padding:20px}.history-card h2,.order-card h2,.final-card h2{margin:0 0 8px}.history-list{display:flex;flex-direction:column;gap:9px;max-height:340px;overflow:auto}.empty,.history-item,.order-list li{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:14px;padding:12px}.history-item{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.history-item strong{display:block}.history-item span{color:var(--muted)}.history-item .r{font-weight:1000}.r.goal{color:#55ec92}.r.save{color:#ffc756}.r.post{color:#ffcc66}.r.miss{color:#ff8585}.order-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.toggle{display:flex;align-items:center;gap:8px;font-weight:800;color:#d7deee}.order-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.select-list{display:grid;gap:8px}.order-list{padding-left:20px}.final-card{margin-top:14px}.final-card.win{background:linear-gradient(180deg,rgba(14,63,35,.95),rgba(9,14,20,.96))}.final-card.lose{background:linear-gradient(180deg,rgba(87,16,24,.95),rgba(9,14,20,.96))}@media(max-width:1180px){.game-card{grid-template-columns:300px 1fr}.goal-3d{width:82%}.score-hud{grid-template-columns:1fr 200px 1fr}.field-scene{min-height:560px}}@media(max-width:900px){.top-hero{display:block}.hero-actions{justify-content:flex-start;margin-top:14px}.setup-grid{grid-template-columns:1fr}.game-card{display:block}.shot-panel{max-height:none;border-right:0;border-bottom:1px solid var(--line)}.choice-row{grid-template-columns:repeat(3,1fr)}.score-hud{height:auto;grid-template-columns:1fr;gap:8px}.team-hud.away{text-align:left}.team-hud.away .dots{justify-content:flex-start}.result-toast{top:154px}.field-scene{min-height:520px}.goal-3d{top:62px;width:88%;height:190px}.post-left,.post-right{height:190px}.info-grid,.order-columns{grid-template-columns:1fr}}@media(max-width:620px){.page{width:min(100% - 16px,100%)}.top-hero,.setup-card,.history-card,.order-card,.final-card{padding:16px}.game-card{border-radius:18px}.shot-panel{padding:15px}.choice-row{grid-template-columns:1fr}.field-scene{min-height:440px}.goal-3d{height:160px}.post-left,.post-right{height:160px}.keeper{top:144px;transform:scale(.82)}.kicker{bottom:38px;transform:scale(.86)}.ball{bottom:132px}.result-toast{top:142px;padding:10px 26px}.score-main strong{font-size:2rem}}

/* ===== V7 COMPACTO DESKTOP — evita precisar rolar para jogar ===== */
@media (min-width: 901px){
  .page{
    width:min(1500px,calc(100% - 24px));
    padding:10px 0 24px;
  }

  .top-hero{
    padding:14px 20px;
    margin-bottom:10px;
    border-radius:20px;
  }

  .top-hero h1{
    font-size:clamp(1.8rem,3vw,3rem);
    margin:4px 0 6px;
  }

  .top-hero p{
    font-size:.98rem;
    line-height:1.45;
    max-width:680px;
  }

  .hero-actions{
    gap:8px;
  }

  .btn{
    padding:10px 15px;
    font-size:.92rem;
  }

  .setup-card{
    padding:12px 16px;
    margin-bottom:10px;
    border-radius:20px;
  }

  .setup-grid{
    gap:10px;
  }

  .setup-grid label span{
    margin-bottom:5px;
    font-size:.7rem;
  }

  .setup-grid select,
  .select-list select{
    padding:10px 12px;
    border-radius:12px;
    font-size:.92rem;
  }

  .setup-card .muted{
    margin:8px 0 0;
    font-size:.92rem;
  }

  .game-card{
    grid-template-columns:330px 1fr;
    min-height:560px;
    max-height:calc(100vh - 235px);
    border-radius:20px;
  }

  .shot-panel{
    padding:14px 16px;
    max-height:calc(100vh - 235px);
    overflow:auto;
  }

  .shot-head{
    margin-bottom:10px;
  }

  .shot-head h2{
    font-size:1.08rem;
    margin:2px 0 0;
  }

  .btn-mini{
    padding:7px 11px;
    font-size:.86rem;
  }

  .current-box{
    padding:10px 12px;
    border-radius:15px;
    margin-bottom:10px;
    gap:6px;
  }

  .current-box span{
    font-size:.66rem;
    letter-spacing:.1em;
  }

  .current-box strong{
    font-size:.9rem;
    margin-top:2px;
  }

  .choice-block{
    margin:10px 0;
  }

  .choice-block h3{
    font-size:.88rem;
    margin:0 0 6px;
  }

  .choice-row{
    grid-template-columns:repeat(3,1fr);
    gap:6px;
  }

  .choice{
    padding:9px 6px;
    border-radius:11px;
    font-size:.78rem;
    min-height:38px;
  }

  .shot-panel .btn{
    margin-top:7px;
    padding:10px 12px;
  }

  .score-hud{
    height:86px;
    grid-template-columns:1fr 220px 1fr;
    padding:10px 18px;
  }

  .team-hud strong{
    font-size:1.25rem;
    margin:3px 0;
  }

  .team-hud span,
  .score-main span{
    font-size:.62rem;
  }

  .dot{
    width:12px;
    height:12px;
  }

  .score-main{
    padding:8px 8px;
    border-radius:15px;
  }

  .score-main strong{
    font-size:2.05rem;
  }

  .score-main small{
    font-size:.78rem;
  }

  .result-toast{
    top:73px;
    padding:9px 34px;
    font-size:.86rem;
  }

  .field-scene{
    min-height:474px;
  }

  .goal-3d{
    top:58px;
    width:min(680px,70%);
    height:190px;
  }

  .post-left,.post-right{
    height:190px;
  }

  .goal-depth.depth-left,
  .goal-depth.depth-right{
    height:160px;
  }

  .stadium-bg{
    height:190px;
  }

  .keeper{
    top:152px;
    transform:scale(.84);
  }

  .kicker{
    bottom:25px;
    transform:scale(.82);
  }

  .ball{
    bottom:116px;
    width:20px;
    height:20px;
  }

  .penalty-mark{
    bottom:120px;
  }

  .perspective-grass{
    height:130px;
    left:20%;
    right:20%;
  }

  .history-card,.order-card,.final-card{
    padding:16px 18px;
    border-radius:20px;
  }

  .info-grid{
    margin-top:10px;
  }

  .history-card h2,.order-card h2,.final-card h2{
    font-size:1.3rem;
  }

  .history-list{
    max-height:240px;
  }
}

@media (min-width: 901px) and (max-height: 780px){
  .top-hero{display:grid;grid-template-columns:1fr auto;}
  .top-hero h1{font-size:2.2rem;}
  .top-hero p{display:none;}
  .setup-card{display:none;}
  .game-card{max-height:calc(100vh - 125px);min-height:520px;}
  .shot-panel{max-height:calc(100vh - 125px);}
  .field-scene{min-height:432px;}
  .goal-3d{top:48px;height:170px;width:min(620px,68%);}
  .post-left,.post-right{height:170px;}
  .keeper{top:132px;transform:scale(.78);}
  .kicker{bottom:18px;transform:scale(.76);}
  .ball{bottom:102px;width:19px;height:19px;}
  .perspective-grass{height:112px;}
}

/* =========================================================
   V8 - ajuste de tela: sem rolagem no painel Sua Cobrança
   Mantém a lógica do jogo e apenas compacta o layout desktop.
========================================================= */
@media (min-width: 901px){
  .page{
    width:min(1520px,calc(100% - 24px));
    padding:12px 0 24px;
  }

  .top-hero{
    padding:16px 20px;
    margin-bottom:10px;
  }

  .top-hero h1{
    font-size:clamp(1.9rem,3.2vw,3.2rem);
    margin:4px 0 6px;
  }

  .top-hero p{
    max-width:620px;
    font-size:.96rem;
    line-height:1.35;
  }

  .hero-actions{
    gap:8px;
  }

  .hero-actions .btn{
    padding:10px 14px;
    font-size:.9rem;
  }

  .setup-card{
    padding:12px 16px;
    margin-bottom:10px;
  }

  .setup-grid{
    gap:10px;
  }

  .setup-grid label span{
    margin-bottom:5px;
    font-size:.68rem;
  }

  .setup-grid select,
  .select-list select{
    padding:10px 12px;
    border-radius:12px;
    font-size:.9rem;
  }

  .setup-card .muted{
    display:none;
  }

  .game-card{
    grid-template-columns:305px 1fr;
    min-height:560px;
    max-height:none;
    border-radius:20px;
  }

  .shot-panel{
    padding:12px 14px;
    max-height:none;
    overflow:visible;
  }

  .shot-head{
    margin-bottom:8px;
  }

  .shot-head h2{
    font-size:1rem;
    margin:2px 0 0;
  }

  .shot-panel .eyebrow{
    font-size:.62rem;
    letter-spacing:.16em;
  }

  .btn-mini{
    padding:7px 10px;
    font-size:.78rem;
  }

  .current-box{
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:9px 10px;
    border-radius:14px;
    margin-bottom:9px;
  }

  .current-box span{
    font-size:.58rem;
    letter-spacing:.08em;
  }

  .current-box strong{
    font-size:.78rem;
    margin-top:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .choice-block{
    margin:8px 0;
  }

  .choice-block h3{
    font-size:.78rem;
    margin:0 0 5px;
  }

  .choice-row{
    grid-template-columns:repeat(3,1fr);
    gap:5px;
  }

  .choice{
    min-height:34px;
    padding:7px 4px;
    border-radius:10px;
    font-size:.70rem;
    line-height:1;
  }

  .shot-panel .btn{
    margin-top:7px;
    padding:9px 10px;
    min-height:36px;
    font-size:.80rem;
  }

  .score-hud{
    height:86px;
    grid-template-columns:1fr 210px 1fr;
    padding:10px 18px;
  }

  .team-hud strong{
    font-size:1.22rem;
    margin:3px 0;
  }

  .team-hud span,
  .score-main span{
    font-size:.60rem;
  }

  .dot{
    width:12px;
    height:12px;
  }

  .score-main{
    padding:7px 8px;
    border-radius:15px;
  }

  .score-main strong{
    font-size:2rem;
  }

  .score-main small{
    font-size:.75rem;
  }

  .result-toast{
    top:72px;
    padding:9px 32px;
    font-size:.82rem;
  }

  .field-scene{
    min-height:474px;
  }

  .goal-3d{
    top:58px;
    width:min(660px,70%);
    height:188px;
  }

  .post-left,.post-right{
    height:188px;
  }

  .depth-left,.depth-right{
    height:158px;
  }

  .stadium-bg{
    height:190px;
  }

  .keeper{
    top:152px;
    transform:scale(.82);
  }

  .kicker{
    bottom:25px;
    transform:scale(.78);
  }

  .ball{
    bottom:115px;
    width:20px;
    height:20px;
  }

  .penalty-mark{
    bottom:119px;
  }

  .perspective-grass{
    height:130px;
    left:20%;
    right:20%;
  }

  .info-grid{
    margin-top:10px;
    gap:10px;
  }

  .history-card,.order-card,.final-card{
    padding:14px 16px;
    border-radius:18px;
  }

  .history-card h2,.order-card h2,.final-card h2{
    font-size:1.25rem;
    margin-bottom:5px;
  }

  .history-card .muted,.order-card .muted,.final-card .muted{
    font-size:.9rem;
    margin:.25rem 0 .6rem;
  }

  .history-list{
    max-height:210px;
  }
}

/* Em telas de notebook ou monitor com pouca altura, escondemos o topo grande e priorizamos o jogo. */
@media (min-width: 901px) and (max-height: 860px){
  .top-hero{
    display:none;
  }
  .page{
    padding-top:8px;
  }
  .setup-card{
    padding:10px 14px;
    margin-bottom:8px;
  }
  .game-card{
    min-height:545px;
    grid-template-columns:295px 1fr;
  }
  .field-scene{
    min-height:459px;
  }
  .shot-panel{
    padding:10px 12px;
  }
  .choice-block{
    margin:7px 0;
  }
  .choice{
    min-height:31px;
    padding:6px 4px;
    font-size:.66rem;
  }
  .current-box{
    padding:8px 9px;
    margin-bottom:7px;
  }
}

@media (min-width: 901px) and (max-height: 740px){
  .setup-card{
    display:none;
  }
  .game-card{
    min-height:calc(100vh - 18px);
    grid-template-columns:282px 1fr;
  }
  .score-hud{
    height:74px;
  }
  .field-scene{
    min-height:calc(100vh - 92px);
  }
  .shot-head h2{
    display:none;
  }
  .current-box{
    grid-template-columns:1fr;
    gap:4px;
  }
  .choice-block h3{
    font-size:.70rem;
  }
  .choice{
    min-height:28px;
    font-size:.62rem;
  }
  .shot-panel .btn{
    min-height:31px;
    padding:7px 8px;
  }
}


/* =========================================================
   V9 - ajustes pedidos
   - removeu "falso 3D" do título via HTML
   - placar/dots com prioridade visual
   - toast não cobre o 0 x 0
   - goleiro mais encorpado/menos "palito"
========================================================= */
.score-hud{
  position:relative;
  z-index:40;
  overflow:visible;
}
.team-hud,.score-main,.dots{position:relative;z-index:42;}
.result-toast{
  z-index:45;
  pointer-events:none;
}
.field-scene{position:relative;z-index:1;}

/* Goleiro com mais volume e proporção */
.keeper{
  width:104px;
  height:116px;
}
.keeper .shadow{
  width:82px;
  height:18px;
  bottom:-6px;
  opacity:.7;
}
.keeper .head{
  width:24px;
  height:24px;
  left:40px;
  top:0;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.keeper .torso{
  width:56px;
  height:50px;
  left:24px;
  top:22px;
  border-radius:20px 20px 16px 16px;
  background:linear-gradient(180deg,var(--keeperKit,#087e45),color-mix(in srgb,var(--keeperKit,#087e45) 72%,#000 28%));
  box-shadow:inset -10px -12px 18px rgba(0,0,0,.22),0 7px 15px rgba(0,0,0,.26);
}
.keeper .torso::after{
  content:"";
  position:absolute;
  left:50%;
  top:8px;
  width:28px;
  height:34px;
  transform:translateX(-50%);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.02));
  opacity:.45;
}
.keeper .arm{
  width:18px;
  height:58px;
  top:31px;
  border-radius:18px;
  transform-origin:50% 4px;
  background:linear-gradient(180deg,#f5f8ff,#dfe7f5 70%,#cbd5e1);
}
.keeper .arm::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:24px;
  height:16px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#f8fafc;
  box-shadow:0 2px 7px rgba(0,0,0,.25);
}
.keeper .arm-l{left:16px;transform:rotate(48deg);}
.keeper .arm-r{right:16px;transform:rotate(-48deg);}
.keeper .leg{
  width:18px;
  height:44px;
  top:70px;
  border-radius:13px;
  background:linear-gradient(180deg,#082f25,#061b28);
  transform-origin:50% 4px;
}
.keeper .leg::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  width:25px;
  height:10px;
  border-radius:999px;
  transform:translateX(-50%);
  background:#07111c;
}
.keeper .leg-l{left:33px;transform:rotate(13deg);}
.keeper .leg-r{right:33px;transform:rotate(-13deg);}

/* Jogador um pouco mais natural, sem alterar lógica */
.kicker .torso{
  border-radius:20px 20px 14px 14px;
}
.kicker .arm-l{
  width:15px;
  border-radius:16px;
}
.kicker .arm-r{
  width:15px;
  border-radius:16px;
}
.kicker .leg{
  width:16px;
  border-radius:15px;
}

@media (min-width:901px){
  .score-hud{
    height:94px;
    padding-bottom:14px;
  }
  .result-toast{
    top:96px; /* desce o aviso para não ficar em cima do placar */
  }
  .field-scene{
    min-height:455px;
  }
  .goal-3d{
    top:62px;
  }
  .keeper{
    top:153px;
  }
}

/* V19 - corrige selo do histórico e dá acabamento final às bolinhas */
.history-item{
  grid-template-columns:minmax(0,1fr) auto !important;
  column-gap:16px !important;
  align-items:center !important;
}

.history-item > div:first-child{
  min-width:0;
}

.history-item > div:first-child strong,
.history-item > div:first-child span{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.history-item .r{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:102px;
  min-height:30px;
  padding:7px 12px;
  border-radius:999px;
  font-size:.72rem;
  line-height:1;
  letter-spacing:.04em;
  white-space:nowrap;
  text-align:center;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
}

.history-item .r.goal{
  color:#dfffea;
  background:linear-gradient(180deg,rgba(28,142,70,.9),rgba(8,82,42,.88));
}

.history-item .r.save{
  color:#fff0bc;
  background:linear-gradient(180deg,rgba(171,115,24,.92),rgba(92,58,11,.9));
}

.history-item .r.post{
  color:#ffe1a8;
  background:linear-gradient(180deg,rgba(186,93,22,.92),rgba(92,43,10,.9));
}

.history-item .r.miss{
  color:#ffd7db;
  background:linear-gradient(180deg,rgba(156,31,43,.92),rgba(83,15,23,.9));
}

.dots{
  gap:7px !important;
  align-items:center !important;
}

.dot{
  position:relative !important;
  display:inline-grid !important;
  place-items:center !important;
  width:15px !important;
  height:15px !important;
  border-radius:50% !important;
  border:1px solid rgba(185,204,194,.55) !important;
  background:#20322b !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12) !important;
  opacity:.85 !important;
}

.dot.goal,
.dot.save,
.dot.miss{
  opacity:1 !important;
  border-color:rgba(255,255,255,.62) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 4px rgba(0,0,0,.3) !important;
}

.dot.goal{
  background:#23b35f !important;
}

.dot.miss{
  background:#d6424d !important;
}

.dot.save{
  background:#d7a72d !important;
}

.dot.goal::after,
.dot.miss::after,
.dot.save::after{
  display:block !important;
  width:auto !important;
  height:auto !important;
  color:#fff !important;
  font-family:Arial,Helvetica,sans-serif !important;
  line-height:1 !important;
  font-weight:900 !important;
  text-shadow:none !important;
  transform:none !important;
  background:transparent !important;
  box-shadow:none !important;
}

.dot.goal::after{
  content:"+" !important;
  font-size:.62rem !important;
}

.dot.miss::after{
  content:"x" !important;
  font-size:.62rem !important;
}

.dot.save::after{
  content:"-" !important;
  font-size:.68rem !important;
}

@media (min-width:901px) and (max-height:860px){
  .score-hud{height:88px;}
  .result-toast{top:90px;}
  .field-scene{min-height:445px;}
  .goal-3d{top:58px;}
}

@media (min-width:901px) and (max-height:740px){
  .score-hud{height:82px;}
  .result-toast{top:84px;}
  .field-scene{min-height:calc(100vh - 96px);}
}

/* =========================================================
   V10 - acabamento profissional Mente Tatica
   Camada visual: palco mais realista, bola no chão, mobile limpo.
   Não altera IDs, alvos clicáveis nem a regra do jogo.
========================================================= */
:root{
  --panel:#0e121b;
  --panel2:#151a26;
  --pitch1:#092f20;
  --pitch2:#11623e;
  --chalk:rgba(235,255,244,.68);
  --keeperBaseScale:1;
}

body{
  background:
    radial-gradient(circle at 18% -10%,rgba(183,32,48,.28),transparent 24%),
    radial-gradient(circle at 88% 4%,rgba(22,126,73,.18),transparent 22%),
    linear-gradient(180deg,#070a11 0%,#020409 100%);
}

.card,.top-hero{
  border-color:rgba(255,255,255,.08);
  box-shadow:0 22px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.045);
}

.top-hero{
  background:
    linear-gradient(100deg,rgba(16,19,29,.98),rgba(10,13,20,.96)),
    radial-gradient(circle at 76% 0%,rgba(255,255,255,.08),transparent 30%);
}

.setup-card,.shot-panel{
  background:linear-gradient(180deg,rgba(17,21,32,.98),rgba(8,11,18,.98));
}

.game-card{
  border-radius:18px;
  background:#080b12;
}

.shot-panel{
  border-right-color:rgba(255,255,255,.075);
}

.choice,.setup-grid select,.select-list select,.current-box,.empty,.history-item,.order-list li{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
}

.choice{
  min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.choice:hover,.target:hover{
  border-color:rgba(255,255,255,.22);
}

.choice.active{
  background:linear-gradient(180deg,#bd2230,#83101a);
  box-shadow:0 10px 24px rgba(157,17,30,.26), inset 0 1px 0 rgba(255,255,255,.16);
}

.btn-primary{
  background:linear-gradient(180deg,#d93442,#8e111b);
  box-shadow:0 14px 30px rgba(156,18,31,.28), inset 0 1px 0 rgba(255,255,255,.18);
}

.btn-ghost,.btn-mini{
  background:linear-gradient(180deg,#202638,#111621);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.match-stage{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.08),transparent 22%),
    linear-gradient(180deg,#050912 0%,#07100d 54%,#06190f 100%);
}

.score-hud{
  background:
    linear-gradient(90deg,rgba(128,15,25,.58),rgba(6,8,12,.82) 48%,rgba(13,88,50,.5)),
    linear-gradient(180deg,rgba(255,255,255,.065),transparent);
  backdrop-filter:blur(10px);
}

.score-main{
  background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.34));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.24);
}

.dot{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 2px rgba(0,0,0,.22);
}

.dot.goal{background:radial-gradient(circle at 35% 30%,#b8ffd1,#23d26a 62%,#0b7a3b);}
.dot.save{background:radial-gradient(circle at 35% 30%,#ffe5a1,#d29b25 62%,#7a4d0b);}
.dot.miss{background:radial-gradient(circle at 35% 30%,#ffb5b5,#ef4f55 62%,#881620);}

.result-toast{
  top:108px;
  min-width:150px;
  padding:9px 24px;
  text-align:center;
  font-size:.86rem;
  border-color:rgba(255,255,255,.18);
  background:rgba(12,16,24,.82);
  backdrop-filter:blur(12px);
  box-shadow:0 16px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12);
  animation:toastIn .32s ease both;
}

.result-toast.goal{background:linear-gradient(180deg,rgba(22,156,82,.92),rgba(8,91,48,.88));}
.result-toast.save{background:linear-gradient(180deg,rgba(208,151,35,.92),rgba(117,76,13,.9));}
.result-toast.post{background:linear-gradient(180deg,rgba(210,120,34,.92),rgba(119,58,12,.9));}
.result-toast.miss{background:linear-gradient(180deg,rgba(178,31,43,.94),rgba(105,15,24,.9));}

@keyframes toastIn{
  from{opacity:0;transform:translate(-50%,-8px) scale(.96);}
  to{opacity:1;transform:translate(-50%,0) scale(1);}
}

.field-scene{
  isolation:isolate;
  background:
    radial-gradient(ellipse at 50% 26%,rgba(255,255,255,.12),transparent 24%),
    linear-gradient(180deg,#050914 0%,#07110f 42%,#09351f 100%);
}

.field-scene::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-56px;
  width:118%;
  height:74%;
  transform:translateX(-50%);
  background:
    linear-gradient(90deg,transparent 49.75%,rgba(255,255,255,.18) 50%,transparent 50.25%),
    repeating-linear-gradient(95deg,rgba(255,255,255,.045) 0 42px,rgba(0,0,0,.055) 42px 84px),
    linear-gradient(180deg,var(--pitch1),var(--pitch2) 58%,#0a4b2b);
  clip-path:polygon(37% 0,63% 0,100% 100%,0 100%);
  z-index:0;
}

.field-scene::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:64px;
  width:min(520px,62%);
  height:120px;
  transform:translateX(-50%) perspective(340px) rotateX(64deg);
  border:2px solid var(--chalk);
  border-bottom-color:rgba(255,255,255,.18);
  border-radius:50%;
  opacity:.42;
  z-index:1;
}

.stadium-bg{
  height:260px;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.16),transparent 45%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 20px),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.6));
}

.light-beam{
  opacity:.52;
  mix-blend-mode:screen;
}

.goal-3d{
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.32));
}

.post{
  background:linear-gradient(90deg,#d6deeb 0%,#fff 28%,#b8c2d2 62%,#f8fbff 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.42),0 8px 20px rgba(0,0,0,.26),0 0 18px rgba(255,255,255,.22);
}

.post-left,.post-right{width:10px;}
.crossbar{height:10px;}

.goal-depth{
  border-color:rgba(221,232,245,.32);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.net-layer{
  left:10px;
  right:10px;
  top:10px;
  background-image:
    linear-gradient(105deg,rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(75deg,rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:28px 24px,28px 24px,100% 28px;
  background-position:center top;
  opacity:.68;
  box-shadow:inset 0 -34px 58px rgba(0,0,0,.2),inset 0 0 45px rgba(255,255,255,.055);
}

.target{
  background:rgba(255,255,255,.01);
  border-radius:6px;
}

.target::after{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:6px;
  opacity:0;
  transition:.18s;
}

.target:hover::after{opacity:1;}

.perspective-grass{
  display:none;
}

.penalty-mark{
  bottom:86px;
  width:9px;
  height:9px;
  background:rgba(255,255,255,.85);
  box-shadow:0 0 12px rgba(255,255,255,.28);
  z-index:3;
}

.ball-shadow{
  position:absolute;
  left:calc(50% + 11px);
  bottom:74px;
  width:42px;
  height:15px;
  border-radius:50%;
  background:rgba(0,0,0,.42);
  filter:blur(4px);
  transform-origin:center;
  z-index:11;
  pointer-events:none;
}

.ball{
  left:calc(50% + 20px);
  bottom:80px;
  width:26px;
  height:26px;
  background:
    radial-gradient(circle at 31% 26%,#fff 0 19%,transparent 20%),
    radial-gradient(circle at 70% 68%,rgba(0,0,0,.18),transparent 34%),
    conic-gradient(from 25deg,#ffffff 0 13%,#1d2633 13% 20%,#f5f7fb 20% 38%,#1d2633 38% 45%,#f7fafc 45% 67%,#1d2633 67% 75%,#f4f7fb 75% 100%);
  box-shadow:inset -6px -7px 9px rgba(0,0,0,.22),inset 4px 4px 8px rgba(255,255,255,.62),0 2px 2px rgba(0,0,0,.28);
  z-index:22;
}

.ball.flying{
  box-shadow:inset -5px -6px 8px rgba(0,0,0,.2),0 8px 18px rgba(0,0,0,.26);
}

.sprite{
  filter:drop-shadow(0 9px 12px rgba(0,0,0,.25));
}

.sprite .shadow{
  background:rgba(0,0,0,.5);
}

.kicker{
  left:calc(50% - 50px);
  bottom:34px;
  width:92px;
  height:150px;
  z-index:18;
  transform:scale(var(--kickerBaseScale,1));
}

.kicker .shadow{
  width:96px;
  height:20px;
  bottom:-4px;
}

.kicker .head{
  width:28px;
  height:30px;
  left:32px;
  top:0;
  background:radial-gradient(circle at 35% 25%,#f2c7a0,#c88d64 74%);
  box-shadow:inset -4px -5px 7px rgba(0,0,0,.16);
}

.kicker .head::before,.keeper .head::before{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  top:-2px;
  height:11px;
  border-radius:14px 14px 7px 7px;
  background:#1e2430;
}

.kicker .torso{
  width:50px;
  height:64px;
  left:21px;
  top:29px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.16),transparent 28%,rgba(0,0,0,.12) 82%),
    var(--kit,#b51220);
  border:1px solid rgba(255,255,255,.12);
}

.kicker .torso::before{
  content:"";
  position:absolute;
  left:50%;
  top:8px;
  width:22px;
  height:42px;
  transform:translateX(-50%);
  border-left:2px solid rgba(255,255,255,.2);
  border-right:2px solid rgba(255,255,255,.09);
  opacity:.7;
}

.kicker .arm{
  width:16px;
  height:50px;
  top:35px;
  transform-origin:50% 6px;
}

.kicker .arm-l{left:9px;transform:rotate(24deg);background:linear-gradient(180deg,#d7a27a,#f4f7fb 48%);}
.kicker .arm-r{right:8px;transform:rotate(-34deg);background:linear-gradient(180deg,#f4f7fb,#dbe3ef);}

.kicker .leg{
  width:17px;
  height:58px;
  top:88px;
  background:linear-gradient(180deg,#f4f7fb 0 65%,#101722 66%);
  transform-origin:50% 4px;
}

.kicker .leg::after{
  content:"";
  position:absolute;
  bottom:-5px;
  left:50%;
  width:26px;
  height:10px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#111827;
}

.kicker .leg-l{left:27px;transform:rotate(5deg);}
.kicker .leg-r{right:17px;transform:rotate(-34deg);}

.kicker.shooting .leg-r{
  animation:kickLeg .42s ease-out both;
}

.kicker.shooting .torso{
  animation:kickBody .42s ease-out both;
}

@keyframes kickLeg{
  0%{transform:rotate(-38deg);}
  42%{transform:rotate(18deg) translateY(-2px);}
  100%{transform:rotate(-10deg);}
}

@keyframes kickBody{
  0%{transform:translateX(0) rotate(0);}
  45%{transform:translateX(4px) rotate(3deg);}
  100%{transform:translateX(1px) rotate(1deg);}
}

.keeper{
  left:calc(50% - 55px);
  top:178px;
  width:110px;
  height:124px;
  z-index:15;
}

.keeper .head{
  background:radial-gradient(circle at 35% 25%,#f2c7a0,#bf865e 76%);
}

.keeper .torso{
  background:
    linear-gradient(90deg,rgba(255,255,255,.2),transparent 34%,rgba(0,0,0,.18) 84%),
    linear-gradient(180deg,var(--keeperKit,#087e45),#071521);
  border:1px solid rgba(255,255,255,.13);
}

.keeper .arm{
  background:linear-gradient(180deg,#eef4ff 0 68%,#f8fafc 69%);
}

.keeper .arm::after{
  border:1px solid rgba(0,0,0,.12);
}

.keeper .leg{
  background:linear-gradient(180deg,var(--keeperSocks,#0b1720),#06101a 72%);
}

.history-card,.order-card,.final-card{
  background:linear-gradient(180deg,rgba(17,21,32,.98),rgba(8,11,18,.98));
}

@media (min-width:901px){
  .game-card{
    grid-template-columns:300px 1fr;
    min-height:548px;
  }

  .field-scene{
    min-height:454px;
  }

  .goal-3d{
    top:54px;
    width:min(690px,72%);
    height:192px;
  }

  .post-left,.post-right{height:192px;}
  .depth-left,.depth-right{height:166px;}

  .result-toast{
    top:94px;
  }

  .keeper{
    top:150px;
    --keeperBaseScale:.86;
  }

  .kicker{
    --kickerBaseScale:.82;
    bottom:20px;
  }

  .ball{
    bottom:72px;
    width:23px;
    height:23px;
  }

  .ball-shadow{
    bottom:67px;
    width:38px;
    height:13px;
  }

  .penalty-mark{
    bottom:77px;
  }
}

/* V18 - bolinhas do placar mais limpas e consistentes */
@media (min-width:901px){
  .dots{
    gap:8px;
    align-items:center;
  }

  .dot{
    width:15px;
    height:15px;
    border:1px solid rgba(210,225,218,.5);
    background:
      radial-gradient(circle at 34% 26%,rgba(255,255,255,.18),transparent 28%),
      linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
    box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 1px 4px rgba(0,0,0,.28);
    opacity:.82;
  }

  .dot.goal,
  .dot.save,
  .dot.miss{
    border-color:rgba(255,255,255,.52);
    opacity:1;
  }

  .dot.goal{
    background:linear-gradient(180deg,#47e183,#109346);
  }

  .dot.miss{
    background:linear-gradient(180deg,#f05f67,#a91b27);
  }

  .dot.save{
    background:linear-gradient(180deg,#f3ca55,#a66f13);
  }

  .dot.goal::after,
  .dot.miss::after,
  .dot.save::after{
    display:block;
    width:auto;
    height:auto;
    font-family:Arial,Helvetica,sans-serif;
    color:#fff;
    line-height:1;
    text-shadow:0 1px 2px rgba(0,0,0,.55);
    transform:translateY(-.5px);
  }

  .dot.goal::after{
    content:"✓";
    font-size:.58rem;
    font-weight:900;
  }

  .dot.miss::after{
    content:"×";
    font-size:.66rem;
    font-weight:900;
  }

  .dot.save::after{
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 2px rgba(0,0,0,.38);
    transform:none;
  }
}

/* =========================================================
   V17 - acabamento desktop final: remove texto cortado no
   estádio, refina bolinhas e enquadra melhor o hero.
========================================================= */
@media (min-width:901px){
  .top-hero{
    min-height:252px;
    background-position:center 48%;
  }

  .hero-bg-img{
    object-position:center 48%;
    transform:scale(.96);
  }

  .stadium-bg::after,
  .field-scene .stadium-bg + .light-beam::after,
  .beam-right::after{
    display:none !important;
    content:none !important;
  }

  .dot{
    position:relative;
    display:inline-grid;
    place-items:center;
    width:16px;
    height:16px;
    border:1px solid rgba(255,255,255,.42);
    background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 8px rgba(0,0,0,.28);
  }

  .dot.goal{
    border-color:rgba(159,255,194,.82);
    background:radial-gradient(circle at 34% 28%,#d8ffe5 0 12%,#36d875 42%,#0d863f 100%);
    box-shadow:0 0 10px rgba(42,218,112,.32),inset 0 1px 0 rgba(255,255,255,.5);
  }

  .dot.goal::after{
    content:"✓";
    color:#fff;
    font-size:.66rem;
    font-weight:1000;
    line-height:1;
    text-shadow:0 1px 2px rgba(0,0,0,.45);
  }

  .dot.miss{
    border-color:rgba(255,154,154,.8);
    background:radial-gradient(circle at 34% 28%,#ffd3d3 0 12%,#e54854 42%,#8d1420 100%);
    box-shadow:0 0 10px rgba(229,72,84,.28),inset 0 1px 0 rgba(255,255,255,.42);
  }

  .dot.miss::after{
    content:"×";
    color:#fff;
    font-size:.78rem;
    font-weight:1000;
    line-height:1;
    text-shadow:0 1px 2px rgba(0,0,0,.45);
  }

  .dot.save{
    border-color:rgba(255,223,136,.88);
    background:radial-gradient(circle at 34% 28%,#fff3c4 0 12%,#e5b83e 42%,#91640f 100%);
    box-shadow:0 0 10px rgba(229,184,62,.3),inset 0 1px 0 rgba(255,255,255,.48);
  }

  .dot.save::after{
    content:"●";
    color:#fff;
    font-size:.45rem;
    font-weight:1000;
    line-height:1;
    text-shadow:0 1px 2px rgba(0,0,0,.45);
  }
}

@media (min-width:901px) and (max-height:860px){
  .top-hero{
    min-height:172px;
    background-position:center 48%;
  }

  .hero-bg-img{
    object-position:center 48%;
  }
}

@media (max-width:900px){
  .page{
    width:min(100% - 14px,100%);
    padding-top:8px;
  }

  .top-hero p,.setup-card .muted{
    display:none;
  }

  .top-hero{
    padding:14px;
    margin-bottom:10px;
  }

  .top-hero h1{
    font-size:1.9rem;
  }

  .hero-actions .btn{
    padding:10px 12px;
  }

  .game-card{
    display:flex;
    flex-direction:column;
  }

  .match-stage{
    order:1;
  }

  .shot-panel{
    order:2;
    padding:13px;
  }

  .shot-head{
    margin-bottom:10px;
  }

  .choice-row{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .choice{
    min-height:42px;
    padding:9px 6px;
    font-size:.8rem;
  }

  .shot-panel .btn{
    min-height:44px;
  }

  .score-hud{
    grid-template-columns:1fr;
    padding:10px 12px;
  }

  .team-hud{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:4px 10px;
    align-items:center;
  }

  .team-hud strong{
    font-size:1rem;
    margin:0;
    text-align:right;
  }

  .team-hud .dots{
    grid-column:1 / -1;
  }

  .score-main{
    order:-1;
  }

  .result-toast{
    top:118px;
    font-size:.76rem;
    padding:8px 16px;
  }

  .field-scene{
    min-height:430px;
  }

  .goal-3d{
    top:48px;
    width:88%;
    height:168px;
  }

  .post-left,.post-right{height:168px;}
  .depth-left,.depth-right{height:140px;}

  .keeper{
    top:130px;
    --keeperBaseScale:.72;
  }

  .kicker{
    left:calc(50% - 54px);
    bottom:24px;
    --kickerBaseScale:.74;
  }

  .ball{
    left:calc(50% + 10px);
    bottom:70px;
    width:22px;
    height:22px;
  }

  .ball-shadow{
    left:calc(50% + 1px);
    bottom:65px;
    width:34px;
    height:12px;
  }

  .penalty-mark{
    bottom:74px;
  }

  .info-grid{
    margin-top:10px;
  }
}

@media (max-width:620px){
  .top-hero{
    display:none;
  }

  .setup-card{
    padding:12px;
  }

  .setup-grid{
    gap:8px;
  }

  .setup-grid label span{
    font-size:.66rem;
    margin-bottom:5px;
  }

  .setup-grid select{
    padding:10px 11px;
  }

  .game-card{
    border-radius:16px;
  }

  .score-main strong{
    font-size:1.9rem;
  }

  .score-main small{
    font-size:.74rem;
  }

  .field-scene{
    min-height:388px;
  }

  .goal-3d{
    top:44px;
    height:146px;
  }

  .post-left,.post-right{height:146px;}
  .depth-left,.depth-right{height:120px;}

  .keeper{
    top:112px;
    --keeperBaseScale:.64;
  }

  .kicker{
    --kickerBaseScale:.66;
    bottom:18px;
  }

  .ball{
    bottom:62px;
    width:20px;
    height:20px;
  }

  .ball-shadow{
    bottom:58px;
  }

  .penalty-mark{
    bottom:66px;
  }

  .choice-block{
    margin:9px 0;
  }

  .current-box{
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:10px;
  }

  .current-box strong{
    font-size:.78rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .history-card .muted,.order-card .muted{
    display:none;
  }

  .order-head{
    display:block;
  }
}

/* V21 - erro vermelho mais limpo nas bolinhas do placar */
.dot.miss{
  background:#d84a54 !important;
}

.dot.miss::before{
  width:6px !important;
  height:6px !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  border:2px solid #fff !important;
  border-radius:50% !important;
  background:transparent !important;
}

.dot.miss::after{
  content:"" !important;
  width:2px !important;
  height:8px !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) rotate(-45deg) !important;
  border:0 !important;
  border-radius:2px !important;
  background:#fff !important;
}

/* V22 - definitivo: bolinha vermelha com X real */
.dot.miss{
  background:#d9444f !important;
  border-color:rgba(255,205,208,.78) !important;
}

.dot.miss::before,
.dot.miss::after{
  content:"" !important;
  position:absolute !important;
  display:block !important;
  left:50% !important;
  top:50% !important;
  width:8px !important;
  height:2px !important;
  border:0 !important;
  border-radius:2px !important;
  background:#fff !important;
  box-shadow:0 1px 1px rgba(0,0,0,.28) !important;
}

.dot.miss::before{
  transform:translate(-50%,-50%) rotate(45deg) !important;
}

.dot.miss::after{
  transform:translate(-50%,-50%) rotate(-45deg) !important;
}

/* V20 - override final: histórico alinhado e bolinhas desenhadas por CSS */
.history-list .history-item{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  grid-template-columns:none !important;
}

.history-list .history-item > div:first-child{
  flex:1 1 auto !important;
  min-width:0 !important;
  padding-right:10px !important;
}

.history-list .history-item > div:first-child strong,
.history-list .history-item > div:first-child span{
  display:block !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.history-list .history-item .r{
  position:static !important;
  flex:0 0 104px !important;
  width:104px !important;
  min-width:104px !important;
  height:30px !important;
  min-height:30px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-left:auto !important;
  padding:0 12px !important;
  transform:none !important;
  border-radius:999px !important;
  font-size:.68rem !important;
  line-height:1 !important;
  letter-spacing:.04em !important;
  text-align:center !important;
  white-space:nowrap !important;
}

.history-list .history-item .r.post{
  flex-basis:104px !important;
}

.dots{
  gap:8px !important;
}

.dot{
  position:relative !important;
  width:14px !important;
  height:14px !important;
  display:inline-block !important;
  border-radius:50% !important;
  border:1px solid rgba(190,208,200,.48) !important;
  background:rgba(255,255,255,.08) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 3px rgba(0,0,0,.32) !important;
  opacity:.86 !important;
}

.dot::before,
.dot::after{
  content:"" !important;
  position:absolute !important;
  display:block !important;
  background:#fff !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

.dot.goal{
  background:#22b760 !important;
  border-color:rgba(191,255,215,.7) !important;
}

.dot.goal::before{
  width:6px !important;
  height:3px !important;
  left:3px !important;
  top:4px !important;
  border-left:2px solid #fff !important;
  border-bottom:2px solid #fff !important;
  background:transparent !important;
  transform:rotate(-45deg) !important;
}

.dot.goal::after{
  display:none !important;
}

.dot.miss{
  background:#d9444f !important;
  border-color:rgba(255,190,194,.7) !important;
}

.dot.miss::before,
.dot.miss::after{
  width:7px !important;
  height:2px !important;
  left:3px !important;
  top:6px !important;
  border:0 !important;
  border-radius:2px !important;
}

.dot.miss::before{
  transform:rotate(45deg) !important;
}

.dot.miss::after{
  transform:rotate(-45deg) !important;
}

.dot.save{
  background:#d6a72c !important;
  border-color:rgba(255,232,153,.72) !important;
}

.dot.save::before{
  width:6px !important;
  height:2px !important;
  left:4px !important;
  top:6px !important;
  border:0 !important;
  border-radius:2px !important;
}

.dot.save::after{
  display:none !important;
}

/* =========================================================
   V16 - HUD limpo e estável: corrige desalinhamento do topo
   do jogo e deixa o banner de resultado mais discreto.
========================================================= */
@media (min-width:901px){
  .score-hud{
    height:94px;
    grid-template-columns:1fr 230px 1fr;
    gap:18px;
    padding:12px 18px;
    align-items:center;
    background:
      linear-gradient(90deg,rgba(112,16,28,.72),rgba(8,10,15,.9) 48%,rgba(8,82,44,.68)),
      linear-gradient(180deg,rgba(255,255,255,.05),transparent);
    border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 12px 30px rgba(0,0,0,.34);
    overflow:hidden;
  }

  .team-hud,
  .team-hud.home,
  .team-hud.away{
    min-height:68px;
    height:68px;
    clip-path:none;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    padding:10px 16px;
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  }

  .team-hud.home{
    align-items:flex-start;
    border-left:2px solid rgba(227,57,70,.8);
  }

  .team-hud.away{
    align-items:flex-end;
    border-right:2px solid rgba(67,212,119,.8);
  }

  .team-hud::before{
    display:none;
  }

  .team-hud span{
    font-size:.62rem;
    line-height:1;
    margin-bottom:5px;
  }

  .team-hud strong{
    font-size:1.22rem;
    line-height:1.05;
    max-width:100%;
  }

  .dots{
    gap:7px;
    margin-top:7px;
  }

  .dot{
    width:13px;
    height:13px;
    border-width:1px;
  }

  .score-main{
    min-height:76px;
    height:76px;
    margin:0;
    padding:8px 16px 10px;
    clip-path:none;
    border-radius:12px;
    background:linear-gradient(180deg,rgba(6,7,11,.98),rgba(0,0,0,.82));
    border:1px solid rgba(255,255,255,.14);
  }

  .score-main span{
    font-size:.62rem;
    line-height:1;
    margin-bottom:4px;
  }

  .score-main strong{
    font-size:2.25rem;
    line-height:.95;
  }

  .score-main small{
    font-size:.74rem;
    margin-top:4px;
  }

  .match-stage .result-toast{
    top:112px;
    width:auto;
    min-width:230px;
    max-width:330px;
    padding:8px 18px;
    font-size:.74rem;
    letter-spacing:.07em;
    transform:translate(-50%,-100%);
    clip-path:none;
    border-radius:999px;
  }

  .result-toast.goal,
  .result-toast.save,
  .result-toast.post,
  .result-toast.miss{
    top:148px;
    width:min(340px,38%);
    min-width:280px;
    padding:11px 26px 10px;
    font-size:1.85rem;
    line-height:.95;
    clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);
    border-radius:0;
    transform:translate(-50%,-100%);
  }

  .result-toast.goal::after,
  .result-toast.save::after,
  .result-toast.post::after,
  .result-toast.miss::after{
    margin-top:6px;
    font-size:.55rem;
    letter-spacing:.14em;
  }

  .goal-3d{
    top:108px;
  }
}

@media (min-width:901px) and (max-height:860px){
  .score-hud{
    height:90px;
    padding:10px 16px;
  }

  .team-hud,
  .team-hud.home,
  .team-hud.away{
    height:64px;
    min-height:64px;
  }

  .score-main{
    height:72px;
    min-height:72px;
  }

  .match-stage .result-toast{
    top:106px;
  }

  .result-toast.goal,
  .result-toast.save,
  .result-toast.post,
  .result-toast.miss{
    top:138px;
    font-size:1.72rem;
  }

  .goal-3d{
    top:100px;
  }
}

/* =========================================================
   V15 - correções desktop: HUD sem sobreposição, resultado
   menor e hero sem cortar a palavra principal.
========================================================= */
@media (min-width:901px){
  .top-hero{
    min-height:236px;
    background-position:center 58%;
  }

  .hero-bg-img{
    object-position:center 58%;
  }

  .top-hero::before{
    background:
      linear-gradient(90deg,rgba(2,4,8,.9) 0%,rgba(2,4,8,.76) 34%,rgba(2,4,8,.18) 76%,rgba(2,4,8,.72) 100%),
      radial-gradient(circle at 22% 70%,rgba(218,36,50,.24),transparent 28%);
  }

  .hero-copy{
    max-width:720px;
  }

  .top-hero h1{
    font-size:clamp(2.15rem,3.4vw,3.35rem);
    max-width:680px;
  }

  .score-hud{
    grid-template-columns:minmax(360px,1fr) 250px minmax(360px,1fr);
    padding:16px clamp(18px,3vw,56px) 18px;
  }

  .score-hud::before{
    display:none;
  }

  .team-hud{
    overflow:hidden;
  }

  .team-hud.home{
    padding-left:28px;
    padding-right:86px;
  }

  .team-hud.away{
    padding-left:86px;
    padding-right:28px;
  }

  .team-hud::before{
    width:42px;
    height:50px;
    opacity:.48;
    z-index:0;
  }

  .team-hud.home::before{
    left:auto;
    right:24px;
  }

  .team-hud.away::before{
    right:auto;
    left:24px;
  }

  .team-hud span,
  .team-hud strong,
  .team-hud .dots{
    position:relative;
    z-index:2;
  }

  .team-hud strong{
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .score-main{
    margin:0 -8px;
  }

  .match-stage .result-toast{
    top:120px;
    min-width:245px;
    max-width:360px;
    padding:8px 20px;
    font-size:.78rem;
  }

  .result-toast.goal,
  .result-toast.save,
  .result-toast.post,
  .result-toast.miss{
    top:142px;
    min-width:0;
    width:min(380px,46%);
    padding:12px 28px 10px;
    font-size:2.2rem;
    transform:translate(-50%,-100%);
  }

  .result-toast.goal::after,
  .result-toast.save::after,
  .result-toast.post::after,
  .result-toast.miss::after{
    margin-top:7px;
    font-size:.62rem;
    letter-spacing:.16em;
  }

  .goal-3d{
    top:104px;
  }
}

@media (min-width:901px) and (max-height:860px){
  .top-hero{
    min-height:150px;
    background-position:center 58%;
  }

  .hero-bg-img{
    object-position:center 58%;
  }

  .top-hero h1{
    font-size:2.45rem;
  }

  .match-stage .result-toast{
    top:112px;
  }

  .result-toast.goal,
  .result-toast.save,
  .result-toast.post,
  .result-toast.miss{
    top:132px;
    width:min(350px,44%);
    font-size:2rem;
  }

  .goal-3d{
    top:94px;
  }
}

/* =========================================================
   V14 - skin mais realista estilo transmissão esportiva.
========================================================= */
.match-stage{
  background:#04070b;
}

.score-hud{
  position:relative;
  height:118px;
  grid-template-columns:minmax(320px,1fr) 250px minmax(320px,1fr);
  padding:18px clamp(18px,4vw,72px) 20px;
  gap:0;
  background:
    linear-gradient(90deg,rgba(105,12,22,.8),rgba(7,9,13,.94) 48%,rgba(8,76,39,.78)),
    radial-gradient(circle at 50% 0,rgba(255,255,255,.12),transparent 45%);
  border-bottom:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 42px rgba(0,0,0,.45),inset 0 -2px 0 rgba(227,57,70,.22);
  overflow:visible;
}

.score-hud::before{
  content:"";
  position:absolute;
  inset:12px clamp(10px,3vw,44px) 18px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(90deg,rgba(255,255,255,.07),transparent 38%,rgba(255,255,255,.06));
  clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);
  pointer-events:none;
}

.team-hud{
  position:relative;
  z-index:2;
  min-height:82px;
  padding:14px 24px 14px 94px;
  border:0;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.08);
}

.team-hud.home{
  clip-path:polygon(0 0,100% 0,94% 100%,0 100%);
  border-left:2px solid #e33946;
  align-items:flex-start;
}

.team-hud.away{
  padding:14px 94px 14px 24px;
  clip-path:polygon(6% 0,100% 0,100% 100%,0 100%);
  border-right:2px solid #43d477;
  align-items:flex-end;
}

.team-hud::before{
  content:"";
  position:absolute;
  top:50%;
  width:52px;
  height:62px;
  transform:translateY(-50%);
  border:2px solid rgba(255,255,255,.5);
  background:
    linear-gradient(135deg,rgba(255,255,255,.22),transparent 42%),
    linear-gradient(180deg,#c52332,#571018);
  clip-path:polygon(50% 0,92% 15%,84% 78%,50% 100%,16% 78%,8% 15%);
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.32));
}

.team-hud.home::before{
  left:24px;
}

.team-hud.away::before{
  right:24px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.22),transparent 42%),
    linear-gradient(180deg,#49a95f,#123f24);
}

.team-hud strong{
  font-size:1.35rem;
  text-transform:none;
}

.team-hud span,
.score-main span{
  letter-spacing:.16em;
}

.dots{
  gap:10px;
  margin-top:7px;
}

.dot{
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.07);
}

.dot.goal::after,
.dot.save::after,
.dot.miss::after{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:#fff;
  font-size:.62rem;
  font-weight:1000;
}

.dot.goal::after{content:"✓";}
.dot.save::after{content:"•";}
.dot.miss::after{content:"×";}

.score-main{
  position:relative;
  z-index:3;
  min-height:98px;
  margin:0 -18px;
  background:linear-gradient(180deg,rgba(11,12,16,.98),rgba(0,0,0,.78));
  border:1px solid rgba(255,255,255,.2);
  clip-path:polygon(14% 0,86% 0,100% 50%,86% 100%,14% 100%,0 50%);
  box-shadow:0 16px 36px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.12);
}

.score-main strong{
  font-size:2.65rem;
  letter-spacing:.04em;
  text-shadow:0 2px 12px rgba(255,255,255,.18);
}

.field-scene{
  min-height:520px;
  background:
    linear-gradient(180deg,rgba(3,5,9,.18),rgba(3,5,9,.25)),
    radial-gradient(ellipse at 50% 38%,rgba(255,255,255,.14),transparent 28%),
    linear-gradient(180deg,#101722 0,#10161d 28%,#092715 64%,#0a401f 100%);
}

.field-scene::before{
  bottom:-80px;
  height:66%;
  background:
    linear-gradient(90deg,transparent 49.84%,rgba(255,255,255,.22) 50%,transparent 50.16%),
    repeating-linear-gradient(94deg,rgba(26,132,72,.64) 0 48px,rgba(11,92,48,.72) 48px 96px),
    radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.12),transparent 28%),
    linear-gradient(180deg,#0d5d32,#073d22);
  clip-path:polygon(29% 0,71% 0,100% 100%,0 100%);
}

.stadium-bg{
  height:282px;
  opacity:1;
  background:
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.62)),
    radial-gradient(circle at 18% 8%,rgba(255,255,255,.23),transparent 11%),
    radial-gradient(circle at 82% 8%,rgba(255,255,255,.2),transparent 12%),
    repeating-radial-gradient(circle at 50% 100%,rgba(255,255,255,.22) 0 1px,transparent 2px 7px),
    linear-gradient(90deg,rgba(144,19,32,.55),rgba(14,18,24,.9) 48%,rgba(18,96,49,.48));
}

.stadium-bg::before{
  inset:24px 0 54px;
  background:
    radial-gradient(circle,rgba(255,255,255,.42) 0 1px,transparent 2px) 0 0/16px 14px,
    linear-gradient(90deg,rgba(205,38,49,.28),transparent 42%,rgba(65,190,102,.22));
  opacity:.55;
}

.stadium-bg::after{
  left:0;
  right:0;
  bottom:48px;
  height:44px;
  background:
    linear-gradient(90deg,transparent 0 7%,rgba(10,12,16,.9) 7% 42%,transparent 42% 58%,rgba(10,12,16,.9) 58% 93%,transparent 93%),
    linear-gradient(90deg,transparent,#e33946 20%,transparent 45%,transparent 55%,#e33946 80%,transparent);
  filter:none;
  opacity:.78;
  animation:none;
}

.field-scene .stadium-bg{
  color:transparent;
}

.field-scene .stadium-bg + .light-beam::after{
  content:"FAÇA HISTÓRIA";
  position:absolute;
  left:18px;
  top:224px;
  color:rgba(255,255,255,.75);
  font-size:1.45rem;
  font-weight:1000;
  font-style:italic;
  letter-spacing:.02em;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
  white-space:nowrap;
}

.beam-right::after{
  content:"FAÇA HISTÓRIA";
  position:absolute;
  right:18px;
  top:224px;
  color:rgba(255,255,255,.75);
  font-size:1.45rem;
  font-weight:1000;
  font-style:italic;
  letter-spacing:.02em;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
  white-space:nowrap;
}

.goal-3d{
  top:92px;
  width:min(820px,68%);
  height:250px;
  filter:drop-shadow(0 24px 26px rgba(0,0,0,.46));
}

.post-left,
.post-right{
  height:250px;
  width:12px;
}

.crossbar{
  height:12px;
}

.depth-left,
.depth-right{
  height:220px;
}

.net-layer{
  background-image:
    linear-gradient(105deg,rgba(255,255,255,.26) 1px,transparent 1px),
    linear-gradient(75deg,rgba(255,255,255,.18) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);
  background-size:24px 22px,24px 22px,100% 24px,24px 100%;
  opacity:.86;
}

.match-stage .result-toast{
  top:calc(100% - 104px);
  min-width:360px;
  padding:14px 34px 12px;
  transform:translate(-50%,-100%);
  font-size:.88rem;
  background:linear-gradient(180deg,rgba(22,25,32,.98),rgba(5,7,11,.94));
  border-color:rgba(255,255,255,.22);
  box-shadow:0 0 26px rgba(227,57,70,.18),0 18px 36px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.12);
}

.result-toast.goal,
.result-toast.save,
.result-toast.post,
.result-toast.miss{
  top:calc(100% - 44px);
  min-width:min(560px,72%);
  padding:18px 44px 15px;
  font-size:3rem;
  line-height:.9;
  letter-spacing:.08em;
  text-shadow:0 4px 18px rgba(0,0,0,.58);
  transform:translate(-50%,-100%);
}

.result-toast.goal::after,
.result-toast.save::after,
.result-toast.post::after,
.result-toast.miss::after{
  display:block;
  margin-top:9px;
  font-size:.82rem;
  line-height:1;
  letter-spacing:.18em;
  font-weight:900;
  color:rgba(255,255,255,.86);
}

.result-toast.goal::after{content:"BOLA NO FUNDO DA REDE!";}
.result-toast.save::after{content:"O GOLEIRO CRESCEU NO LANCE!";}
.result-toast.post::after{content:"A TRAVE SALVOU O GOLEIRO!";}
.result-toast.miss::after{content:"PASSOU LONGE DO ALVO!";}

.result-toast.goal{
  background:linear-gradient(180deg,rgba(151,9,18,.96),rgba(29,8,10,.96));
  border-color:rgba(255,83,83,.56);
  box-shadow:0 0 34px rgba(255,34,34,.42),0 18px 36px rgba(0,0,0,.5);
}

.result-toast.save{
  background:linear-gradient(180deg,rgba(31,126,61,.96),rgba(9,34,24,.96));
}

.result-toast.post{
  background:linear-gradient(180deg,rgba(196,100,20,.96),rgba(57,24,8,.96));
}

.result-toast.miss{
  background:linear-gradient(180deg,rgba(75,83,96,.96),rgba(9,11,16,.96));
}

@media (min-width:901px){
  .field-scene{
    min-height:520px;
  }

  .keeper{
    top:206px;
    --keeperBaseScale:.9;
  }

  .kicker{
    bottom:42px;
    --kickerBaseScale:.86;
  }

  .ball{
    bottom:94px;
  }

  .ball-shadow{
    bottom:88px;
  }

  .penalty-mark{
    bottom:100px;
  }
}

@media (min-width:901px) and (max-height:860px){
  .score-hud{
    height:104px;
  }

  .goal-3d{
    top:82px;
    height:230px;
  }

  .post-left,
  .post-right{
    height:230px;
  }

  .field-scene{
    min-height:500px;
  }

  .keeper{
    top:190px;
  }
}

@media (max-width:900px){
  .score-hud{
    grid-template-columns:1fr;
    padding:10px 12px 14px;
  }

  .team-hud,
  .team-hud.away{
    clip-path:none;
    padding:10px 68px 10px 14px;
  }

  .team-hud::before{
    width:38px;
    height:46px;
    right:14px;
    left:auto;
  }

  .team-hud.home::before{
    left:auto;
    right:14px;
  }

  .goal-3d{
    top:70px;
    width:88%;
    height:170px;
  }

  .post-left,
  .post-right{
    height:170px;
  }

  .match-stage .result-toast{
    top:150px;
    min-width:220px;
    transform:translate(-50%,0);
  }

  .result-toast.goal,
  .result-toast.save,
  .result-toast.post,
  .result-toast.miss{
    top:calc(100% - 28px);
    min-width:min(420px,84%);
    font-size:2rem;
    transform:translate(-50%,-100%);
  }
}

@media (max-width:620px){
  .score-main strong{
    font-size:2rem;
  }

  .goal-3d{
    top:62px;
    height:150px;
  }

  .post-left,
  .post-right{
    height:150px;
  }

  .field-scene{
    min-height:410px;
  }

  .match-stage .result-toast{
    top:138px;
    font-size:.68rem;
  }

  .result-toast.goal,
  .result-toast.save,
  .result-toast.post,
  .result-toast.miss{
    top:calc(100% - 24px);
    font-size:1.55rem;
    padding:13px 22px 11px;
  }

  .result-toast.goal::after,
  .result-toast.save::after,
  .result-toast.post::after,
  .result-toast.miss::after{
    font-size:.62rem;
  }
}

/* =========================================================
   V13 - alinhamento fino do HUD e aviso da cobrança.
========================================================= */
.score-hud{
  height:104px;
  grid-template-columns:minmax(260px,1fr) 240px minmax(260px,1fr);
  align-items:stretch;
  padding:14px 18px 18px;
  gap:18px;
}

.team-hud{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:12px 18px;
  border-radius:0;
}

.team-hud.home{
  align-items:flex-start;
}

.team-hud.away{
  align-items:flex-end;
}

.team-hud strong{
  line-height:1.05;
}

.score-main{
  align-self:center;
  min-height:88px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px 18px 12px;
}

.match-stage .result-toast{
  top:106px;
  min-width:270px;
  padding:8px 22px;
  transform:translate(-50%,-100%);
  clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%);
}

.goal-3d{
  top:74px;
}

@media (min-width:901px){
  .score-hud{
    height:104px;
    grid-template-columns:minmax(280px,1fr) 240px minmax(280px,1fr);
  }

  .match-stage .result-toast{
    top:116px;
  }

  .goal-3d{
    top:82px;
  }
}

@media (min-width:901px) and (max-height:860px){
  .score-hud{
    height:96px;
    padding:12px 16px 16px;
  }

  .score-main{
    min-height:78px;
  }

  .match-stage .result-toast{
    top:108px;
  }

  .goal-3d{
    top:74px;
  }
}

@media (max-width:900px){
  .score-hud{
    height:auto;
    grid-template-columns:1fr;
    align-items:initial;
    gap:8px;
    padding:10px 12px 14px;
  }

  .team-hud{
    min-height:54px;
  }

  .score-main{
    min-height:72px;
  }

  .match-stage .result-toast{
    top:144px;
    min-width:220px;
    transform:translate(-50%,0);
  }

  .goal-3d{
    top:58px;
  }
}

@media (max-width:620px){
  .match-stage .result-toast{
    top:136px;
    min-width:200px;
    padding:7px 16px;
    font-size:.72rem;
  }

  .goal-3d{
    top:54px;
  }
}

/* =========================================================
   V11 - refinamento final: dropdown escuro, hero com imagem,
   ordem dos batedores limpa e efeitos de jogo.
========================================================= */
.top-hero{
  position:relative;
  min-height:230px;
  isolation:isolate;
  background-image:
    linear-gradient(90deg,rgba(4,5,10,.94) 0%,rgba(9,10,17,.82) 38%,rgba(9,10,17,.28) 78%,rgba(4,5,10,.8) 100%),
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.76)),
    url("assets/images/disputa-penaltis-hero.jpg");
  background-size:cover;
  background-position:center;
  border-radius:18px;
  overflow:hidden;
}

.hero-bg-img{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.92;
  filter:saturate(1.08) contrast(1.05);
}

.top-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 22% 70%,rgba(218,36,50,.32),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.06),transparent 30%);
  pointer-events:none;
}

.top-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:linear-gradient(90deg,transparent,#e33946 18%,rgba(255,255,255,.8) 48%,#2ac66d 82%,transparent);
  opacity:.74;
}

.hero-copy{
  max-width:670px;
  text-shadow:0 3px 18px rgba(0,0,0,.82);
}

.top-hero h1{
  text-transform:uppercase;
  letter-spacing:.01em;
}

.top-hero p{
  color:#dce4f2;
}

select{
  color-scheme:dark;
  appearance:auto;
  background-color:#0b1019;
  color:#f7f9ff;
  text-shadow:none;
}

select option,
select optgroup{
  background-color:#0b1019;
  color:#f7f9ff;
  font-weight:800;
}

select option:checked{
  background:linear-gradient(180deg,#b52231,#7d1019);
  color:#fff;
}

select:focus{
  outline:2px solid rgba(238,66,83,.72);
  outline-offset:2px;
  border-color:rgba(238,66,83,.72);
  box-shadow:0 0 0 4px rgba(238,66,83,.14),inset 0 1px 0 rgba(255,255,255,.06);
}

.setup-grid label,
.order-columns > div{
  position:relative;
}

.setup-grid select,
.select-list select{
  min-height:46px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),
    #0b1019;
  color:#f8fbff;
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 22px rgba(0,0,0,.18);
}

.setup-grid select:hover,
.select-list select:hover{
  border-color:rgba(255,255,255,.24);
}

.select-list select:disabled{
  opacity:1;
  color:#d7deec;
  cursor:not-allowed;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
    #0a0f18;
}

.order-card{
  overflow:hidden;
}

.order-card h2{
  letter-spacing:.01em;
}

.order-head{
  padding-bottom:16px;
  margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.toggle{
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(255,255,255,.035);
}

.toggle input{
  accent-color:#e33946;
}

.order-columns{
  gap:22px;
  align-items:start;
}

.order-columns > div{
  min-width:0;
  padding:14px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}

.order-columns h3{
  margin:0 0 14px;
  font-size:1.05rem;
  color:#fff;
}

.select-list{
  gap:10px;
}

.select-list select{
  width:100%;
  border-radius:13px;
  padding:0 42px 0 14px;
}

.order-list{
  display:grid;
  gap:10px;
  padding:0;
  margin:0;
  list-style:none;
  counter-reset:kickerOrder;
}

.order-list li{
  position:relative;
  display:flex;
  align-items:center;
  min-height:46px;
  padding:12px 14px 12px 46px;
  border-radius:13px;
  color:#f7f9ff;
}

.order-list li::before{
  counter-increment:kickerOrder;
  content:counter(kickerOrder) ".";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:#ff7280;
  font-weight:1000;
}

.score-hud{
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 40px rgba(0,0,0,.3),inset 0 -1px 0 rgba(255,255,255,.05);
}

.score-main{
  position:relative;
  clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);
  border-radius:0;
  border-color:rgba(255,255,255,.16);
}

.score-main::before{
  content:"";
  position:absolute;
  inset:0;
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(227,57,70,.34);
  pointer-events:none;
}

.team-hud{
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
}

.team-hud.home{
  border-left:2px solid rgba(227,57,70,.72);
}

.team-hud.away{
  border-right:2px solid rgba(42,198,109,.72);
}

.field-scene{
  transition:filter .28s ease,transform .32s ease;
}

.field-scene.charging{
  animation:cameraCharge .76s cubic-bezier(.18,.82,.28,1);
}

.field-scene.result-goal{
  animation:goalPulse .75s ease;
}

.field-scene.result-save{
  animation:saveSnap .62s ease;
}

.field-scene.result-post{
  animation:postShake .58s ease;
}

.field-scene.result-miss{
  filter:saturate(.82) brightness(.88);
}

.stadium-flash{
  position:absolute;
  inset:0;
  z-index:35;
  opacity:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 28% 8%,rgba(255,255,255,.42),transparent 18%),
    radial-gradient(circle at 78% 10%,rgba(255,255,255,.34),transparent 20%);
  mix-blend-mode:screen;
}

.result-goal .stadium-flash,
.result-save .stadium-flash,
.result-post .stadium-flash{
  animation:stadiumFlash .7s ease;
}

.result-save .stadium-flash{
  background:radial-gradient(circle at 50% 34%,rgba(255,202,88,.42),transparent 22%);
}

.result-post .stadium-flash{
  background:radial-gradient(circle at 50% 16%,rgba(255,108,44,.45),transparent 18%);
}

.stadium-bg::before{
  content:"";
  position:absolute;
  inset:44px 0 0;
  background:
    radial-gradient(circle,rgba(255,255,255,.18) 0 1px,transparent 2px) 0 0/18px 16px,
    linear-gradient(180deg,rgba(227,57,70,.12),rgba(42,198,109,.08));
  opacity:.46;
  mask-image:linear-gradient(180deg,transparent 0%,#000 25%,#000 68%,transparent 100%);
  animation:crowdLife 4.8s ease-in-out infinite alternate;
}

.stadium-bg::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:24px;
  height:18px;
  background:linear-gradient(90deg,transparent,rgba(227,57,70,.75),rgba(255,255,255,.58),rgba(42,198,109,.72),transparent);
  filter:blur(10px);
  opacity:.34;
  animation:ledSweep 5.2s linear infinite;
}

.goal-3d{
  transform:translateX(-50%) perspective(900px) rotateX(1deg);
}

.net-layer{
  transform:perspective(720px) rotateX(3deg);
}

.keeper{
  transition:filter .2s ease;
}

.keeper.saving{
  filter:drop-shadow(0 0 16px rgba(255,215,112,.45)) drop-shadow(0 9px 12px rgba(0,0,0,.25));
}

.ball.flying{
  animation:ballSpin .35s linear infinite;
}

.result-toast{
  text-transform:uppercase;
  clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);
  border-radius:0;
}

.result-toast.goal{
  box-shadow:0 0 32px rgba(38,214,113,.34),0 16px 34px rgba(0,0,0,.32);
}

.result-toast.save,
.result-toast.post{
  box-shadow:0 0 30px rgba(255,193,75,.3),0 16px 34px rgba(0,0,0,.32);
}

@keyframes cameraCharge{
  0%{transform:scale(1);filter:saturate(1);}
  45%{transform:scale(1.018);filter:saturate(1.14) contrast(1.04);}
  100%{transform:scale(1);filter:saturate(1);}
}

@keyframes goalPulse{
  0%{filter:saturate(1) brightness(1);}
  30%{filter:saturate(1.3) brightness(1.16);}
  100%{filter:saturate(1) brightness(1);}
}

@keyframes saveSnap{
  0%,100%{transform:translateX(0);}
  28%{transform:translateX(-3px);}
  56%{transform:translateX(3px);}
}

@keyframes postShake{
  0%,100%{transform:translateX(0);}
  18%{transform:translateX(-5px);}
  36%{transform:translateX(5px);}
  54%{transform:translateX(-3px);}
  72%{transform:translateX(3px);}
}

@keyframes stadiumFlash{
  0%,100%{opacity:0;}
  18%{opacity:.78;}
  42%{opacity:.22;}
  60%{opacity:.48;}
}

@keyframes crowdLife{
  from{opacity:.34;transform:translateY(0);}
  to{opacity:.52;transform:translateY(-2px);}
}

@keyframes ledSweep{
  from{transform:translateX(-10%);}
  to{transform:translateX(10%);}
}

@keyframes ballSpin{
  from{background-position:0 0;}
  to{background-position:22px 0;}
}

@media (min-width:901px) and (max-height:860px){
  .top-hero{
    display:grid;
    grid-template-columns:1fr auto;
    min-height:136px;
    padding:14px 18px;
    background-position:center 42%;
  }

  .top-hero p{
    display:none;
  }
}

@media (max-width:900px){
  .top-hero{
    min-height:190px;
    display:block;
    background-position:center;
  }

  .hero-copy{
    max-width:540px;
  }

  .setup-grid select,
  .select-list select{
    min-height:44px;
  }

  .order-head{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .order-columns{
    grid-template-columns:1fr;
    gap:12px;
  }

  .order-columns > div{
    padding:12px;
  }

  .team-hud{
    padding:7px 9px;
  }

  .score-main{
    clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%);
  }
}

@media (max-width:620px){
  .top-hero{
    display:block;
    min-height:148px;
    padding:12px;
    margin-bottom:8px;
    background-position:center top;
  }

  .top-hero .eyebrow,
  .top-hero p{
    display:none;
  }

  .top-hero h1{
    margin:0;
    max-width:280px;
    font-size:1.55rem;
    line-height:1;
  }

  .hero-actions{
    margin-top:78px;
    gap:6px;
  }

  .hero-actions .btn{
    padding:8px 9px;
    font-size:.74rem;
  }

  .hero-actions #testSoundBtn,
  .hero-actions a{
    display:none;
  }

  .setup-card{
    margin-bottom:8px;
  }

  .setup-grid{
    grid-template-columns:1fr;
  }

  .order-head{
    display:block;
    padding-bottom:12px;
    margin-bottom:12px;
  }

  .toggle{
    display:inline-flex;
    margin-top:8px;
  }

  .order-columns > div{
    border-radius:13px;
  }

  .select-list{
    gap:8px;
  }

  .order-list{
    gap:8px;
  }
}

@media (prefers-reduced-motion:reduce){
  .field-scene,
  .field-scene.charging,
  .field-scene.result-goal,
  .field-scene.result-save,
  .field-scene.result-post,
  .stadium-bg::before,
  .stadium-bg::after,
  .stadium-flash,
  .ball.flying{
    animation:none !important;
  }
}

/* =========================================================
   V12 - correções dos prints: dropdown branco, toast colado
   no placar e lista do visitante muito apertada.
========================================================= */
.setup-card{
  position:relative;
  z-index:80;
  overflow:visible;
}

.setup-grid label{
  overflow:visible;
}

.native-team-select{
  position:absolute !important;
  inset:auto;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.team-picker{
  position:relative;
  z-index:90;
}

.team-picker-trigger{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 14px 0 16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  color:#fff;
  background:
    linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.018)),
    #0b1019;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 26px rgba(0,0,0,.22);
  font:inherit;
  font-weight:950;
  text-align:left;
  cursor:pointer;
}

.team-picker-trigger:hover,
.team-picker.open .team-picker-trigger{
  border-color:rgba(238,66,83,.66);
  box-shadow:0 0 0 4px rgba(238,66,83,.13),inset 0 1px 0 rgba(255,255,255,.08);
}

.team-picker-chevron{
  flex:0 0 auto;
  color:#e8eef8;
  font-size:1.1rem;
  transform:translateY(-1px);
}

.team-picker-list{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  z-index:120;
  display:none;
  max-height:min(360px,52vh);
  overflow:auto;
  padding:8px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(24,29,42,.98),rgba(8,11,18,.98)),
    #0b1019;
  box-shadow:0 28px 55px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.06);
}

.team-picker.open .team-picker-list{
  display:grid;
  gap:4px;
}

.team-picker-option{
  width:100%;
  min-height:38px;
  padding:9px 12px;
  border:0;
  border-radius:10px;
  color:#eef4ff;
  background:transparent;
  font:inherit;
  font-weight:850;
  text-align:left;
  cursor:pointer;
}

.team-picker-option:hover,
.team-picker-option.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(204,39,51,.92),rgba(111,15,25,.82));
}

.team-picker-list::-webkit-scrollbar{
  width:10px;
}

.team-picker-list::-webkit-scrollbar-track{
  background:#080c14;
  border-radius:999px;
}

.team-picker-list::-webkit-scrollbar-thumb{
  background:#8f1722;
  border-radius:999px;
  border:2px solid #080c14;
}

.match-stage .result-toast{
  top:122px;
  z-index:55;
}

.score-hud{
  padding-bottom:18px;
}

.order-card .order-columns{
  gap:28px;
}

.order-card .order-list{
  display:grid !important;
  grid-template-columns:1fr;
  gap:12px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  counter-reset:kickerOrder;
}

.order-card .order-list li{
  position:relative;
  display:flex;
  align-items:center;
  min-height:50px;
  margin:0 !important;
  padding:13px 16px 13px 52px !important;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.018)),
    #0b1019;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.order-card .order-list li::marker{
  content:"";
}

.order-card .order-list li::before{
  counter-increment:kickerOrder;
  content:counter(kickerOrder) ".";
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  color:#ff7280;
  font-weight:1000;
}

.order-card .select-list{
  gap:12px !important;
}

.order-card .select-list select{
  min-height:50px;
  padding-left:16px;
}

@media (min-width:901px){
  .top-hero{
    display:flex;
    min-height:230px;
  }
}

@media (min-width:901px) and (max-height:860px){
  .match-stage .result-toast{
    top:112px;
  }
}

@media (max-width:900px){
  .team-picker-list{
    max-height:300px;
  }

  .match-stage .result-toast{
    top:136px;
  }

  .order-card .order-columns{
    gap:14px;
  }
}

@media (max-width:620px){
  .team-picker-trigger{
    min-height:44px;
  }

  .team-picker-list{
    position:fixed;
    left:14px;
    right:14px;
    top:88px;
    max-height:68vh;
  }

  .match-stage .result-toast{
    top:128px;
  }

  .order-card .order-list{
    gap:9px !important;
  }

  .order-card .order-list li,
  .order-card .select-list select{
    min-height:46px;
  }
}

/* V22 FINAL - X vermelho definitivo, no fim do arquivo */
.dots .dot.miss{
  background:#d9444f !important;
  border-color:rgba(255,205,208,.78) !important;
}

.dots .dot.miss::before,
.dots .dot.miss::after{
  content:"" !important;
  position:absolute !important;
  display:block !important;
  left:50% !important;
  top:50% !important;
  width:8px !important;
  height:2px !important;
  border:0 !important;
  border-radius:2px !important;
  background:#fff !important;
  box-shadow:0 1px 1px rgba(0,0,0,.28) !important;
}

.dots .dot.miss::before{
  transform:translate(-50%,-50%) rotate(45deg) !important;
}

.dots .dot.miss::after{
  transform:translate(-50%,-50%) rotate(-45deg) !important;
}

/* V28 - mobile: trava a largura do app inteiro contra recuo/reflow do Safari */
@media (max-width:900px){
  html,
  body{
    width:100% !important;
    min-width:320px !important;
    overflow-x:hidden !important;
    -webkit-text-size-adjust:100% !important;
  }

  body{
    display:block !important;
  }

  .page{
    width:min(100%,430px) !important;
    min-width:320px !important;
    max-width:430px !important;
    margin:0 auto !important;
    padding-left:8px !important;
    padding-right:8px !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
  }

  .top-hero,
  .setup-card,
  .game-card,
  .info-grid,
  .history-card,
  .order-card,
  .final-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
    overflow-anchor:none !important;
  }

  .setup-grid,
  .score-hud,
  .field-scene,
  .shot-panel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  button,
  select,
  .btn,
  .choice,
  .team-picker-trigger{
    touch-action:manipulation !important;
  }

  .game-card{
    transform:none !important;
  }
}

@media (max-width:430px){
  .page{
    width:100% !important;
    max-width:100% !important;
  }
}

/* V27 - mobile: trava definitivo dos cards apos resultado */
@media (max-width:900px){
  .game-card,
  .match-stage,
  .score-hud,
  .field-scene,
  .shot-panel{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .game-card{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    align-items:stretch !important;
    overflow:hidden !important;
  }

  .match-stage{
    position:relative !important;
    display:block !important;
    overflow:hidden !important;
  }

  .score-hud{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:62px 66px !important;
    height:150px !important;
    min-height:150px !important;
    max-height:150px !important;
    padding:8px !important;
    gap:7px !important;
    align-items:stretch !important;
    overflow:hidden !important;
  }

  .score-main{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    width:100% !important;
    height:62px !important;
    min-height:62px !important;
    max-height:62px !important;
    margin:0 !important;
    padding:6px 10px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .team-hud.home,
  .team-hud.away{
    grid-row:2 !important;
    width:100% !important;
    height:66px !important;
    min-height:66px !important;
    max-height:66px !important;
    margin:0 !important;
    padding:8px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .team-hud.home{
    grid-column:1 !important;
  }

  .team-hud.away{
    grid-column:2 !important;
  }

  .team-hud span{
    height:12px !important;
    line-height:12px !important;
    margin:0 !important;
  }

  .team-hud strong{
    height:18px !important;
    line-height:18px !important;
    margin:2px 0 3px !important;
    font-size:.9rem !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .team-hud .dots{
    height:16px !important;
    min-height:16px !important;
    max-height:16px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
  }

  .score-main span,
  .score-main strong,
  .score-main small{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
  }

  .score-main span{
    height:13px !important;
    line-height:13px !important;
  }

  .score-main strong{
    height:30px !important;
    line-height:30px !important;
  }

  .score-main small{
    height:14px !important;
    line-height:14px !important;
  }

  .field-scene{
    display:block !important;
    position:relative !important;
    height:405px !important;
    min-height:405px !important;
    max-height:405px !important;
    overflow:hidden !important;
    transform:none !important;
  }

  .field-scene.charging,
  .field-scene.result-goal,
  .field-scene.result-save,
  .field-scene.result-post{
    animation:none !important;
    transform:none !important;
  }

  .match-stage .result-toast{
    position:absolute !important;
    left:50% !important;
    top:132px !important;
    transform:translateX(-50%) !important;
    margin:0 !important;
  }

  .result-toast.goal,
  .result-toast.save,
  .result-toast.post,
  .result-toast.miss{
    top:132px !important;
    width:min(320px,84%) !important;
    max-width:84% !important;
    min-width:0 !important;
  }

  .shot-panel{
    height:188px !important;
    min-height:188px !important;
    max-height:188px !important;
    overflow:hidden !important;
    padding:12px !important;
    display:block !important;
  }

  .shot-panel .choice-row{
    height:40px !important;
  }

  .shot-panel .btn{
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
  }
}

@media (max-width:620px){
  .score-hud{
    grid-template-rows:60px 64px !important;
    height:146px !important;
    min-height:146px !important;
    max-height:146px !important;
  }

  .score-main{
    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;
  }

  .team-hud.home,
  .team-hud.away{
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
  }

  .field-scene{
    height:372px !important;
    min-height:372px !important;
    max-height:372px !important;
  }

  .shot-panel{
    height:184px !important;
    min-height:184px !important;
    max-height:184px !important;
  }
}

/* V26 - mobile: palco não muda de altura depois da cobrança */
@media (max-width:900px){
  .game-card{
    contain:layout paint;
  }

  .match-stage{
    min-height:0 !important;
  }

  .field-scene{
    height:405px !important;
    min-height:405px !important;
    max-height:405px !important;
  }

  .score-hud{
    height:154px !important;
    min-height:154px !important;
    max-height:154px !important;
  }

  .match-stage .result-toast{
    pointer-events:none !important;
  }

  .result-toast.goal,
  .result-toast.save,
  .result-toast.post,
  .result-toast.miss{
    position:absolute !important;
    top:132px !important;
    left:50% !important;
    z-index:70 !important;
  }

  .shot-panel{
    min-height:184px !important;
  }
}

@media (max-width:620px){
  .field-scene{
    height:372px !important;
    min-height:372px !important;
    max-height:372px !important;
  }

  .score-hud{
    height:150px !important;
    min-height:150px !important;
    max-height:150px !important;
  }

  .shot-panel{
    min-height:178px !important;
  }
}

/* V24 - mobile final clean */
@media (max-width:900px){
  .top-hero{
    min-height:150px !important;
    padding:12px !important;
    background-position:center !important;
  }

  .hero-bg-img{
    object-position:center !important;
  }

  .hero-copy{
    display:none !important;
  }

  .hero-actions{
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
    grid-template-columns:1fr 1fr !important;
  }

  .setup-card,
  .game-card,
  .history-card,
  .order-card,
  .final-card{
    border-radius:16px !important;
  }

  .score-hud{
    padding:8px !important;
    gap:7px !important;
  }

  .score-main{
    min-height:62px !important;
    padding:7px 10px !important;
  }

  .score-main span{
    font-size:.58rem !important;
  }

  .score-main strong{
    font-size:1.75rem !important;
  }

  .score-main small{
    font-size:.68rem !important;
  }

  .team-hud,
  .team-hud.home,
  .team-hud.away{
    min-height:52px !important;
    padding:8px !important;
  }

  .team-hud span{
    font-size:.52rem !important;
  }

  .team-hud strong{
    font-size:.86rem !important;
  }

  .stadium-bg::after,
  .field-scene .stadium-bg + .light-beam::after,
  .beam-right::after{
    display:none !important;
    content:none !important;
  }

  .field-scene{
    min-height:405px !important;
  }

  .goal-3d{
    top:52px !important;
    width:92% !important;
    height:145px !important;
  }

  .post-left,
  .post-right{
    height:145px !important;
  }

  .target{
    border:1px solid rgba(255,255,255,.26) !important;
    background:rgba(255,255,255,.065) !important;
    box-shadow:inset 0 0 18px rgba(255,255,255,.035) !important;
  }

  .target::after{
    opacity:.9 !important;
    inset:6px !important;
    border-color:rgba(255,255,255,.16) !important;
  }

  .target:hover,
  .target:focus,
  .target:active{
    background:rgba(227,57,70,.22) !important;
    border-color:rgba(255,255,255,.48) !important;
  }

  .keeper{
    top:112px !important;
    --keeperBaseScale:.58;
  }

  .kicker{
    bottom:20px !important;
    --kickerBaseScale:.62;
  }

  .shot-panel{
    padding:12px !important;
  }

  .shot-head{
    display:none !important;
  }

  .current-box{
    display:none !important;
  }

  .shot-panel .choice-block{
    margin:0 !important;
  }

  .shot-panel .choice-block:nth-of-type(3),
  .shot-panel .choice-block:nth-of-type(4){
    display:none !important;
  }

  .shot-panel .choice-block:nth-of-type(5){
    display:block !important;
  }

  .shot-panel .choice-block:nth-of-type(5) h3{
    margin:0 0 8px !important;
    font-size:.82rem !important;
    color:#ff9bac !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
  }

  .shot-panel .choice-row{
    gap:7px !important;
  }

  .shot-panel .choice{
    min-height:38px !important;
    font-size:.72rem !important;
    border-radius:11px !important;
  }

  .shot-panel .btn{
    min-height:44px !important;
    margin-top:8px !important;
    font-size:.82rem !important;
  }

  .info-grid{
    gap:10px !important;
  }

  .history-card,
  .order-card,
  .final-card{
    padding:16px !important;
  }

  .history-card h2,
  .order-card h2,
  .final-card h2{
    font-size:1.6rem !important;
  }

  .order-card:has(#autoOrderCheck:checked) .order-columns{
    display:none !important;
  }

  .order-card:has(#autoOrderCheck:checked){
    padding-bottom:18px !important;
  }

  .order-head{
    border-bottom:0 !important;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  .order-card:not(:has(#autoOrderCheck:checked)) .order-head{
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    margin-bottom:12px !important;
    padding-bottom:12px !important;
  }
}

@media (max-width:620px){
  .top-hero{
    min-height:132px !important;
  }

  .field-scene{
    min-height:372px !important;
  }

  .goal-3d{
    top:48px !important;
    height:132px !important;
  }

  .post-left,
  .post-right{
    height:132px !important;
  }

  .keeper{
    top:98px !important;
    --keeperBaseScale:.52;
  }

  .kicker{
    bottom:18px !important;
    --kickerBaseScale:.57;
  }
}

/* V23 - mobile: placar compacto, campo limpo e controles úteis */
@media (max-width:900px){
  body{
    background:#03050a;
  }

  .page{
    width:100%;
    padding:8px 8px 22px;
  }

  .top-hero{
    min-height:176px;
    border-radius:16px;
    margin-bottom:10px;
  }

  .hero-bg-img{
    object-position:center;
  }

  .top-hero h1{
    max-width:92%;
    font-size:clamp(1.72rem,8vw,2.55rem);
    line-height:.98;
  }

  .top-hero p,
  .top-hero .eyebrow,
  .hero-actions #testSoundBtn,
  .hero-actions a{
    display:none !important;
  }

  .hero-actions{
    position:absolute;
    left:16px;
    right:16px;
    bottom:16px;
    margin:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .hero-actions .btn{
    min-height:42px;
    padding:8px 10px;
    font-size:.82rem;
  }

  .setup-card{
    margin-bottom:10px;
    border-radius:16px;
  }

  .setup-grid{
    gap:10px;
  }

  .game-card{
    border-radius:16px;
    overflow:hidden;
  }

  .match-stage{
    order:1;
  }

  .score-hud{
    height:auto !important;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:10px;
    background:linear-gradient(90deg,rgba(111,16,27,.72),rgba(7,70,38,.68));
    overflow:visible;
  }

  .score-main{
    grid-column:1 / -1;
    order:1;
    min-height:70px !important;
    height:auto !important;
    margin:0 !important;
    padding:8px 12px;
    border-radius:14px;
    clip-path:none;
  }

  .team-hud,
  .team-hud.home,
  .team-hud.away{
    order:2;
    min-height:58px !important;
    height:auto !important;
    padding:9px 10px !important;
    clip-path:none !important;
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    background:rgba(0,0,0,.22);
  }

  .team-hud::before,
  .team-hud.home::before,
  .team-hud.away::before{
    display:none !important;
  }

  .team-hud.home{
    align-items:flex-start;
  }

  .team-hud.away{
    align-items:flex-end;
    text-align:right;
  }

  .team-hud span{
    font-size:.56rem;
    margin-bottom:4px;
  }

  .team-hud strong{
    max-width:100%;
    font-size:1rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .team-hud.away .dots{
    justify-content:flex-end;
  }

  .dots{
    gap:6px !important;
    margin-top:6px;
  }

  .dot{
    width:13px !important;
    height:13px !important;
  }

  .result-toast.neutral{
    display:none !important;
  }

  .match-stage .result-toast{
    top:132px;
    z-index:35;
    min-width:210px;
    max-width:82%;
    padding:7px 14px;
    font-size:.7rem;
    transform:translate(-50%,0);
    border-radius:999px;
    clip-path:none;
  }

  .result-toast.goal,
  .result-toast.save,
  .result-toast.post,
  .result-toast.miss{
    top:138px;
    width:min(320px,84%);
    min-width:0;
    padding:10px 18px 9px;
    font-size:1.55rem;
    clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);
  }

  .result-toast.goal::after,
  .result-toast.save::after,
  .result-toast.post::after,
  .result-toast.miss::after{
    font-size:.56rem;
    margin-top:5px;
  }

  .field-scene{
    min-height:430px !important;
  }

  .stadium-bg{
    height:180px;
  }

  .goal-3d{
    top:56px !important;
    width:92% !important;
    height:150px !important;
  }

  .post-left,
  .post-right{
    height:150px !important;
  }

  .depth-left,
  .depth-right{
    height:124px !important;
  }

  .keeper{
    top:122px !important;
    --keeperBaseScale:.62;
  }

  .kicker{
    bottom:26px !important;
    --kickerBaseScale:.66;
  }

  .ball{
    left:calc(50% + 8px);
    bottom:70px !important;
    width:20px;
    height:20px;
  }

  .ball-shadow{
    left:calc(50% + 0px);
    bottom:64px !important;
  }

  .penalty-mark{
    bottom:74px !important;
  }

  .target{
    background:rgba(255,255,255,.018);
  }

  .target:hover,
  .target:focus{
    background:rgba(227,57,70,.14);
  }

  .shot-panel{
    order:2;
    padding:14px;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:0;
    background:linear-gradient(180deg,#101522,#090d15);
  }

  .shot-head{
    margin-bottom:10px;
  }

  .shot-panel .eyebrow{
    font-size:.66rem;
  }

  .shot-head h2{
    font-size:1.38rem;
  }

  .btn-mini{
    display:none;
  }

  .current-box{
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:10px;
    padding:10px;
    border-radius:13px;
  }

  .current-box span{
    font-size:.58rem;
  }

  .current-box strong{
    font-size:.82rem;
  }

  .choice-block{
    margin:10px 0;
  }

  .choice-block h3{
    margin-bottom:7px;
    font-size:.9rem;
  }

  .choice-block:nth-of-type(2),
  .choice-block:nth-of-type(3){
    display:none;
  }

  .choice-row{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }

  .choice{
    min-height:42px;
    padding:9px 5px;
    font-size:.78rem;
    border-radius:12px;
  }

  .shot-panel .btn{
    min-height:48px;
    margin-top:8px;
    border-radius:999px;
    font-size:.9rem;
  }
}

@media (max-width:620px){
  .page{
    padding:6px 6px 18px;
  }

  .top-hero{
    min-height:150px;
  }

  .hero-actions{
    left:12px;
    right:12px;
    bottom:12px;
  }

  .setup-card{
    padding:12px;
  }

  .team-picker-trigger{
    min-height:44px;
  }

  .field-scene{
    min-height:390px !important;
  }

  .score-main strong{
    font-size:1.9rem;
  }

  .team-hud strong{
    font-size:.92rem;
  }

  .goal-3d{
    top:50px !important;
    height:135px !important;
  }

  .post-left,
  .post-right{
    height:135px !important;
  }

  .keeper{
    top:105px !important;
    --keeperBaseScale:.56;
  }

  .kicker{
    bottom:20px !important;
    --kickerBaseScale:.6;
  }

  .choice-block:nth-of-type(2),
  .choice-block:nth-of-type(3){
    display:none;
  }

  .choice{
    min-height:40px;
    font-size:.74rem;
  }
}

/* V25 - mobile final: hero com respiro e cards travados ao mudar placar/time */
@media (max-width:900px){
  .top-hero{
    min-height:190px !important;
    background-size:cover !important;
    background-position:center 46% !important;
  }

  .hero-bg-img{
    object-position:center 46% !important;
    transform:scale(1) !important;
  }

  .hero-actions{
    left:14px !important;
    right:14px !important;
    bottom:10px !important;
    max-width:420px;
  }

  .hero-actions .btn{
    min-height:40px !important;
    padding:8px 10px !important;
    font-size:.76rem !important;
  }

  .score-hud{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    align-items:stretch !important;
    min-height:154px !important;
  }

  .score-main{
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
    align-self:stretch !important;
  }

  .team-hud,
  .team-hud.home,
  .team-hud.away{
    height:66px !important;
    min-height:66px !important;
    max-height:66px !important;
    display:grid !important;
    grid-template-rows:auto auto 18px !important;
    align-content:center !important;
    gap:3px !important;
    overflow:hidden !important;
  }

  .team-hud span,
  .team-hud strong,
  .team-hud .dots{
    min-width:0 !important;
  }

  .team-hud strong{
    display:block !important;
    height:18px !important;
    line-height:18px !important;
  }

  .team-hud .dots{
    height:16px !important;
    margin-top:0 !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
  }

  .match-stage .result-toast.goal,
  .match-stage .result-toast.save,
  .match-stage .result-toast.post,
  .match-stage .result-toast.miss{
    top:132px !important;
    z-index:60 !important;
  }
}

@media (max-width:620px){
  .top-hero{
    min-height:174px !important;
    background-position:center 45% !important;
  }

  .hero-actions{
    grid-template-columns:1fr 1fr !important;
    bottom:9px !important;
  }

  .hero-actions .btn{
    min-height:38px !important;
    font-size:.72rem !important;
  }

  .score-hud{
    min-height:150px !important;
  }

  .score-main{
    height:62px !important;
    min-height:62px !important;
    max-height:62px !important;
  }

  .team-hud,
  .team-hud.home,
  .team-hud.away{
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
  }
}