/* Penalty 2.4 — jogo permanente, painéis laterais e responsividade fluida. */
:root{
  color-scheme:dark;
  --app-w:480px;
  --header-h:60px;
  --score-h:74px;
  --nav-h:82px;
  --header-h:clamp(48px,7.4svh,60px);
  --score-h:clamp(56px,8.8svh,74px);
  --nav-h:clamp(62px,9.6svh,80px);
  --safe-top:0px;
  --safe-bottom:0px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --bg:#071119;
  --surface:#0d1b24;
  --surface-2:#12232d;
  --surface-3:#172c36;
  --line:#2a3d47;
  --line-soft:#20333d;
  --text:#f5f8fa;
  --muted:#aebbc2;
  --muted-2:#788a94;
  --green:#3edc8b;
  --green-2:#2fc779;
  --green-dark:#0b2b1d;
  --red-1:#5a151b;
  --red-2:#921f29;
  --danger:#ff9c8e;
  --radius:12px;
}

*{box-sizing:border-box}
html{min-width:0;background:#02070b;text-size-adjust:100%;-webkit-text-size-adjust:100%}
html,body{margin:0;min-height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:#02070b;color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{min-height:100vh;min-height:100svh;min-height:100dvh;overflow-x:hidden;overscroll-behavior-y:none}
body.drawer-open{overflow:hidden}
body.admin-bar{padding-top:0!important}
button,input{font:inherit}
button,a,input{-webkit-tap-highlight-color:transparent}
button{color:inherit;cursor:pointer}
button:disabled{cursor:default;opacity:.48}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.penalty-app{
  position:relative;
  width:100%;
  max-width:var(--app-w);
  width:min(100%,var(--app-w));
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  margin:0 auto;
  padding-bottom:calc(var(--nav-h) + var(--safe-bottom));
  background:
    radial-gradient(600px 220px at 50% -40px,rgba(47,199,121,.14),transparent 68%),
    linear-gradient(180deg,#09151d 0%,#071119 100%);
  box-shadow:0 0 80px rgba(0,0,0,.6);
  overflow:hidden;
}

/* ---------- Header ---------- */
.topbar{
  position:relative;
  z-index:30;
  height:calc(var(--header-h) + var(--safe-top));
  min-height:calc(var(--header-h) + var(--safe-top));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:var(--safe-top) 15px 0;
  border-bottom:1px solid #263942;
  background:linear-gradient(180deg,#10232c 0%,#0a1720 100%);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;font-weight:900;letter-spacing:.4px;color:#fff}
.brand-mark{
  width:36px;height:36px;flex:0 0 36px;
  display:grid;place-items:center;
  padding-right:3px;
  border-radius:9px;
  background:linear-gradient(145deg,#52e69d,#25c977);
  color:#062116;
  font-size:27px;font-style:italic;letter-spacing:-5px;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 5px 14px rgba(0,0,0,.3);
}
.brand-mark span{font-size:17px}
.brand-word{font-size:17px;line-height:1;white-space:nowrap}
.account-cluster{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0}
.sound-button{
  display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;padding:0;
  border:1px solid #2d424c;border-radius:50%;background:#0d2028;color:#dce8ec;
  font-size:15px;line-height:1;touch-action:manipulation
}
.account-button{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;padding:0;border:0;background:transparent;color:#dbe3e7}
.account-name{display:block;max-width:185px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:450}
.account-avatar{position:relative;width:32px;height:32px;flex:0 0 32px;border:2px solid #c4d1d8;border-radius:50%;background:#152731}
.account-avatar::before{content:"";position:absolute;left:50%;top:5px;width:8px;height:8px;transform:translateX(-50%);border-radius:50%;background:#a7b5bc}
.account-avatar::after{content:"";position:absolute;left:50%;bottom:4px;width:17px;height:9px;transform:translateX(-50%);border-radius:10px 10px 5px 5px;background:#a7b5bc}

/* ---------- Views / drawers laterais ---------- */
.app-main{position:relative;width:100%;min-height:0}
.app-view{width:100%}
.game-view{display:block!important;position:relative;z-index:1}
.drawer-view{
  position:fixed;
  z-index:920;
  top:0;
  right:0;
  right:max(0px,calc((100vw - var(--app-w))/2));
  bottom:calc(var(--nav-h) + var(--safe-bottom));
  width:92vw;
  max-width:420px;
  width:min(92vw,420px);
  min-height:0;
  padding:calc(64px + var(--safe-top)) 16px 30px;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:linear-gradient(180deg,#0d2029 0%,#08131a 100%);
  border-left:1px solid #314750;
  box-shadow:-20px 0 55px rgba(0,0,0,.5);
  transform:translateX(calc(100% + 24px));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:transform .24s cubic-bezier(.22,.8,.25,1),opacity .18s ease,visibility 0s linear .24s;
}
body[data-drawer="duel"] .duel-view,
body[data-drawer="comps"] .events-view{
  transform:translateX(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}
.drawer-backdrop{
  position:fixed;
  z-index:910;
  top:0;
  bottom:calc(var(--nav-h) + var(--safe-bottom));
  left:0;
  right:0;
  left:max(0px,calc((100vw - var(--app-w))/2));
  right:max(0px,calc((100vw - var(--app-w))/2));
  display:block;
  padding:0;
  border:0;
  background:rgba(1,7,10,.58);
  backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,visibility 0s linear .18s;
}
body.drawer-open .drawer-backdrop{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.drawer-close{
  position:absolute;
  z-index:2;
  top:calc(14px + var(--safe-top));
  right:14px;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid #344a54;
  border-radius:50%;
  background:#10232c;
  color:#e7eef1;
  font-size:25px;
  line-height:1;
  box-shadow:0 5px 18px rgba(0,0,0,.22);
}
.drawer-close:active{transform:scale(.96)}
.drawer-heading{margin-bottom:18px;padding-right:42px}
.drawer-heading .eyebrow{display:block;margin-bottom:7px;color:var(--green);font-size:11px;font-weight:800;letter-spacing:1.5px}
.drawer-heading h2{font-size:26px;line-height:1.08;letter-spacing:-.7px}
.drawer-heading p{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.5}

/* ---------- Placar ---------- */
.scoreboard{
  --ad-url:none;
  position:relative;
  isolation:isolate;
  width:100%;
  height:var(--score-h);
  min-height:var(--score-h);
  overflow:hidden;
  border-top:4px solid #0d171e;
  border-bottom:1px solid #39171d;
  background:
    radial-gradient(ellipse at center,rgba(255,255,255,.055),transparent 55%),
    linear-gradient(90deg,var(--red-1) 0%,var(--red-2) 50%,#60171e 100%);
}
.scoreboard::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.3),transparent 31%,transparent 69%,rgba(0,0,0,.3))}
.score-content{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) clamp(70px,25vw,112px) minmax(0,1fr);align-items:center;width:100%;height:100%;padding:0 14px;gap:6px}
.player{display:flex;align-items:center;gap:7px;min-width:0}
.player-right{justify-content:flex-end;text-align:right}
.player-meta{min-width:0;overflow:hidden}
.player b{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.1;font-weight:650;text-shadow:0 2px 7px rgba(0,0,0,.75)}
.score-num{flex:0 0 auto;font-size:31px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums;text-shadow:0 2px 8px rgba(0,0,0,.75)}
.avatar,.attempts{display:none!important}
.sponsor-placeholder{overflow:hidden;text-align:center;white-space:nowrap;text-overflow:ellipsis;color:rgba(255,255,255,.9);font-family:Georgia,"Times New Roman",serif;font-size:11px;font-style:italic;font-weight:700;letter-spacing:.1px;text-shadow:0 2px 7px #000}
.ad-bg{position:absolute;z-index:2;left:50%;top:50%;width:clamp(72px,27%,118px);height:70%;transform:translate(-50%,-50%);object-fit:contain;object-position:center;pointer-events:none;background:transparent}
.scoreboard.has-ad .sponsor-placeholder{visibility:hidden}

/* ---------- Campo ---------- */
.pitch-stage{position:relative;width:100%;height:clamp(172px,58vw,270px);
  height:clamp(172px,min(31dvh,58vw),270px);min-height:0;background:#14291f}
.canvas-wrap{position:absolute;inset:0;overflow:hidden;background:#173426}
#pitch{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.live-label{position:absolute;z-index:4;left:50%;top:17px;transform:translateX(-50%);max-width:calc(100% - 112px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:#e0e7e4;font-size:9px;line-height:1;font-weight:750;letter-spacing:1.1px;text-shadow:0 2px 5px #000;pointer-events:none}
.turn-clock{position:absolute;z-index:5;right:13px;top:12px;padding:5px 8px;border:1px solid rgba(214,234,217,.42);border-radius:999px;background:rgba(7,23,17,.75);color:#eef7ef;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.turn-clock.urgent{border-color:#ffab8b;color:#ffc0a5}
.shot-banner{position:absolute;z-index:6;left:50%;top:42%;transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;white-space:nowrap;color:#fff;font-size:36px;font-weight:950;letter-spacing:.5px;text-shadow:0 4px 26px rgba(0,0,0,.85);transition:opacity .16s,transform .16s}
.shot-banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---------- Controles ---------- */
.game-controls{
  position:relative;
  z-index:10;
  width:100%;
  padding:15px 13px 16px;
  padding:clamp(9px,1.8dvh,15px) clamp(8px,3vw,13px) clamp(11px,2dvh,16px);
  border-top:1px solid #214231;
  background:
    radial-gradient(ellipse at 8% 4%,rgba(75,140,80,.22),transparent 26%),
    radial-gradient(ellipse at 82% 48%,rgba(48,108,64,.17),transparent 36%),
    linear-gradient(180deg,#17392a 0%,#102a20 39%,#0a1b18 100%);
  box-shadow:inset 0 18px 30px rgba(4,13,9,.24);
}
.role-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:54px}
.role-copy{min-width:0}
.role-label{display:block;color:#55e799;font-size:12px;line-height:1.1;font-weight:900;letter-spacing:.65px}
.role-row p{margin-top:8px;color:#c4ced1;font-size:11px;line-height:1.35}
.role-symbol{flex:0 0 auto;color:#55e799;font-size:27px;line-height:1}
.zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,52px);grid-template-rows:repeat(2,clamp(38px,6.2dvh,52px));gap:9px;gap:clamp(6px,1.1dvh,9px);width:100%;margin:10px 0 14px;margin:clamp(5px,1.1dvh,10px) 0 clamp(8px,1.6dvh,14px)}
.zones button{position:relative;display:grid;place-items:center;width:100%;height:52px;height:clamp(38px,6.2dvh,52px);padding:0 8px;border:1px solid #344955;border-radius:11px;background:rgba(20,35,45,.94);box-shadow:inset 0 1px 0 rgba(255,255,255,.025);color:#f4f7f8}
.zones button strong{font-size:27px;line-height:1;font-weight:450}
.zones button span{position:absolute;right:9px;bottom:6px;color:#81939d;font-size:10px;line-height:1;font-weight:600}
.zones button.selected{border-color:#5ceca1;background:linear-gradient(145deg,#51e99b,#2dca79);color:#082018;box-shadow:0 6px 18px rgba(31,211,125,.12)}
.zones button.selected span{color:#175039}
.kick-row{display:flex;flex-direction:column;gap:9px;width:100%}
.power-control{display:block;width:100%}
.power-head{display:flex;align-items:center;justify-content:space-between;color:#d9e1e1;font-size:10px;line-height:1;font-weight:500;letter-spacing:.35px}
.power-head b{color:#fff;font-size:13px;font-weight:850}
.power-control small{display:none}
input[type="range"]{appearance:none;-webkit-appearance:none;display:block;width:100%;height:20px;margin:5px 0 0;background:transparent;cursor:pointer}
input[type="range"]::-webkit-slider-runnable-track{height:7px;border-radius:999px;background:linear-gradient(90deg,#41dc8b 0 var(--power,70%),#2a3d46 var(--power,70%) 100%);box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:23px;height:23px;margin-top:-8px;border:1px solid #76e7af;border-radius:50%;background:#4ebc86;box-shadow:0 2px 8px rgba(0,0,0,.45)}
input[type="range"]::-moz-range-track{height:7px;border:0;border-radius:999px;background:#2a3d46}
input[type="range"]::-moz-range-progress{height:7px;border-radius:999px;background:#41dc8b}
input[type="range"]::-moz-range-thumb{width:23px;height:23px;border:1px solid #76e7af;border-radius:50%;background:#4ebc86;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.button{min-height:46px;border:0;border-radius:9px;padding:12px 16px;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--surface-2);color:#fff;font-size:14px;font-weight:800;transition:transform .15s,filter .15s,background .15s}
.button:active:not(:disabled){transform:translateY(1px)}
.button.primary,.primary{background:linear-gradient(180deg,#45dd8d 0%,#2abb70 100%);color:#f7fff9;border:1px solid #67eaa7;box-shadow:0 8px 20px rgba(0,0,0,.22)}
.button.secondary,.secondary{border:1px solid #344a55;background:#14252f;color:#e8eef1}
.button.wide,.wide{width:100%}
.button.small{min-height:40px;padding:9px 13px;font-size:12px}
.kick{width:100%;height:52px;height:clamp(44px,6.2dvh,52px);min-height:44px;scroll-margin-bottom:calc(var(--nav-h) + var(--safe-bottom) + 12px);padding:0 18px;font-size:15px;font-weight:850}
.kick span{margin-left:auto;font-size:22px;line-height:1}
.game-tools{height:16px;margin-top:6px;text-align:right}
.game-tools .text-button{font-size:10px;opacity:.72}

/* ---------- Navegação inferior ---------- */
.mobile-nav{
  position:fixed;
  z-index:1000;
  left:50%;bottom:0;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:stretch;
  width:100%;
  max-width:var(--app-w);
  width:min(100%,var(--app-w));
  height:calc(var(--nav-h) + var(--safe-bottom));
  padding:6px 20px var(--safe-bottom);
  border-top:1px solid #263a44;
  background:rgba(9,22,30,.97);
  box-shadow:0 -9px 28px rgba(0,0,0,.32);
  backdrop-filter:blur(14px);
}
.mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;padding:2px 5px;border:0;background:transparent;color:#8998a1;font-size:10px}
.mobile-nav .nav-icon{font-size:24px;line-height:1}
.mobile-nav .nav-main{color:#e1e9ec}
.ball-icon{display:grid!important;place-items:center;width:37px;height:37px;border:1px solid rgba(104,238,168,.6);border-radius:50%;background:#3ddd8a;color:#061d13;font-size:20px!important;line-height:1;box-shadow:0 5px 16px rgba(31,211,125,.22)}
.mobile-nav .nav-main>span:last-child{font-weight:750;color:#f5f8f9}
.mobile-nav button.active{color:#52e69a}
.mobile-nav .nav-side.active .nav-icon{filter:drop-shadow(0 0 6px rgba(61,221,138,.2))}

/* ---------- Painéis / eventos / perfil ---------- */
.panel{padding:17px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#10212a,#0c1a22);box-shadow:0 14px 40px rgba(0,0,0,.18)}
.panel+.panel{margin-top:14px}
.panel h2{font-size:20px;line-height:1.16}
.panel p,.muted{color:var(--muted);font-size:12px;line-height:1.5}
.panel-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.eyebrow{color:var(--green);font-size:10px;font-weight:800;letter-spacing:1.35px}
.pill{padding:5px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;font-weight:700}
.split{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
.practice{display:block;margin:12px auto 0}
.text-button{padding:7px 0;border:0;background:transparent;color:#a9b7bd;font-size:12px}
.text-button.danger,.danger{color:var(--danger)}
.room-info{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);text-align:center}
.room-code{display:block;margin:10px auto 12px;padding:9px 13px;border:1px dashed var(--green);border-radius:8px;background:#081b13;color:var(--green);font-size:25px;font-weight:900;letter-spacing:4px}
.admin-link{display:block;margin-top:18px;text-align:center}
.profile-panel h2{margin-top:14px}
.profile-panel p{margin-top:7px}
.xp-track{height:5px;margin-top:15px;border-radius:999px;overflow:hidden;background:#273b45}
.xp-track i{display:block;width:0;height:100%;background:var(--green)}
.xp-label{display:flex;justify-content:space-between;margin-top:5px;color:var(--muted-2);font-size:9px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:15px}
.stats>div{text-align:center;border-right:1px solid var(--line)}
.stats>div:last-child{border-right:0}
.stats strong{display:block;font-size:20px;line-height:1.1}
.stats span{font-size:9px;color:var(--muted)}
.online-dot{font-size:9px;color:var(--green);letter-spacing:.8px}
.rank-heading,.rank-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.rank-heading{margin-top:15px;padding-bottom:8px;border-bottom:1px solid var(--line);color:var(--muted-2);font-size:9px;letter-spacing:1px}
#ranking{margin:0;padding:0;list-style:none}
#ranking li{display:flex;gap:9px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:12px}
#ranking li.empty-state{display:block;color:var(--muted)}
#ranking small{display:block;margin-top:5px;color:var(--muted-2)}
.comps-panel{padding:0;border:0;background:transparent;box-shadow:none}
.comps-group{margin:18px 0 8px;color:#e6edf0;font-size:11px;letter-spacing:.8px;text-transform:uppercase}
.comp-card{overflow:hidden;margin-bottom:12px;border:1px solid var(--line);border-radius:12px;background:#0f2029}
.comp-media{position:relative;min-height:54px;background:linear-gradient(135deg,#173c2b,#122a34)}
.comp-media:empty{display:none}
.comp-media img{display:block;width:100%;max-height:160px;object-fit:cover}
.comp-badge{position:absolute;left:10px;top:10px;padding:5px 7px;border-radius:999px;background:rgba(4,15,20,.82);color:#d8e2e6;font-size:9px;font-weight:750;text-transform:uppercase}
.comp-badge.live{color:#67eeaa}.comp-badge.soon{color:#e6d18f}
.comp-body{padding:14px}.comp-body h3{font-size:17px}.comp-prize{margin-top:6px!important;color:#f3f7f8!important}.comp-meta{margin-top:5px!important;color:var(--muted-2)!important;font-size:10px!important}.comp-actions{display:grid;gap:8px;margin-top:12px}.comp-joined{color:var(--green);font-size:11px;font-weight:750}.comp-rank{margin-top:11px}.rank-row{grid-template-columns:25px 1fr auto;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:11px}.rank-row.me{color:var(--green)}.rank-number{color:var(--muted-2)}.rank-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-points{font-weight:850;color:var(--green)}.comps-empty{padding:18px;text-align:center;color:var(--muted);font-size:12px}

/* ---------- Dialogs ---------- */
dialog:not([open]){display:none}dialog{width:calc(100% - 28px);max-width:430px;width:min(430px,calc(100% - 28px));max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);padding:25px;border:1px solid #314853;border-radius:16px;background:#0d1c24;color:var(--text);box-shadow:0 25px 100px rgba(0,0,0,.72);overflow:auto}
dialog::backdrop{background:rgba(1,7,10,.82);backdrop-filter:blur(7px)}
dialog h2{margin:10px 0 16px;font-size:26px;line-height:1.1}
dialog p{margin:10px 0;color:var(--muted);font-size:13px;line-height:1.5}
dialog form{display:grid;gap:15px}
dialog label{display:grid;gap:7px;color:#d9e1e5;font-size:12px}
dialog input:not([type="range"]){width:100%;min-height:48px;padding:12px 13px;font-size:16px;border:1px solid #34505d;border-radius:9px;background:#08151c;color:#fff}
.close-dialog{position:absolute;right:10px;top:8px;width:38px;height:38px;border:0;background:transparent;color:#91a1aa;font-size:27px}
.rules{padding-left:19px;color:#c9d4d9;font-size:12px;line-height:1.55}.rules li{margin-bottom:10px}
.handle-status{min-height:17px;margin:-5px 0 0!important}.handle-status.ok{color:var(--green)}.handle-status.bad{color:var(--danger)}
.result-icon{text-align:center;font-size:55px}.result-score{text-align:center;color:#fff!important;font-size:44px!important;font-weight:900;letter-spacing:5px}.result-ad{display:block;margin:12px 0;color:var(--green);font-size:12px}.loss-taunt{padding:10px;border-radius:9px;background:#351b1c;color:#ffc0b7!important;text-align:center}
.dialog-feedback{color:#fff!important}
#toast{position:fixed;z-index:2000;left:50%;bottom:calc(var(--nav-h) + var(--safe-bottom) + 12px);transform:translate(-50%,14px);max-width:min(420px,calc(100% - 28px));padding:10px 14px;border-radius:9px;background:#3ddd8a;color:#062116;font-size:12px;font-weight:750;opacity:0;pointer-events:none;transition:.18s;box-shadow:0 8px 30px rgba(0,0,0,.35)}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Login ---------- */
.login-page{min-height:100vh;min-height:100svh;min-height:100dvh;display:grid;place-items:center;padding:22px;background:radial-gradient(520px 300px at 50% 0,rgba(52,213,137,.12),transparent 70%),#071119}
.login-card{width:min(100%,420px);padding:26px;border:1px solid var(--line);border-radius:16px;background:#0c1a22;box-shadow:0 20px 70px rgba(0,0,0,.35)}
.login-card .brand{margin-bottom:28px}.login-card .eyebrow{display:block;margin-bottom:8px}.login-card h1{font-size:28px}.login-card>p{margin-top:8px;color:var(--muted);font-size:13px}.login-form{display:grid;gap:14px;margin-top:20px}.login-form label{display:grid;gap:7px;color:#d5dfe3;font-size:12px}.login-form input:not([type="checkbox"]){width:100%;min-height:48px;padding:12px;font-size:16px;border:1px solid #334a56;border-radius:9px;background:#07141a;color:#fff}.login-form .remember{display:flex;grid-template-columns:auto 1fr;align-items:center;gap:8px}.form-status{color:var(--danger)!important}

/* ---------- Acessibilidade / foco ---------- */
button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #65efa7;outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* ---------- Convites ---------- */
.invites-panel{margin-top:14px}
.invite-panel-top{align-items:flex-start}.invite-panel-top h2{margin-top:6px;font-size:18px}
.invite-quota{flex:0 0 auto;padding:6px 8px;border:1px solid rgba(82,230,154,.36);border-radius:999px;background:rgba(62,220,139,.08);color:var(--green);font-size:9px;font-weight:800;white-space:nowrap}
.invite-explainer{margin-top:9px!important}.invite-explainer strong{color:#fff}
.invite-link-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:14px}
.invite-link-box input{min-width:0;height:46px;padding:0 12px;border:1px solid #344b56;border-radius:9px;background:#08151c;color:#dce7eb;font-size:13px;outline:0;text-overflow:ellipsis}
.invite-link-box input:disabled{opacity:.55;color:#83949d}.invite-link-box .button{min-height:46px;padding-inline:14px;white-space:nowrap}.invite-link-box .button:disabled{opacity:.48;cursor:not-allowed}
.invite-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:14px}
.invite-form input{min-width:0;height:46px;font-size:16px;padding:0 12px;border:1px solid #344b56;border-radius:9px;background:#08151c;color:#fff;outline:0}
.invite-form input:focus{border-color:#62e9a3;box-shadow:0 0 0 2px rgba(62,220,139,.12)}
.invite-form .button{min-height:46px;padding-inline:13px;white-space:nowrap}
.invite-feedback{min-height:17px;margin-top:8px!important;color:#8fdcb7!important;font-size:10px!important}
.invite-list{display:grid;gap:7px;margin-top:8px}.invite-summary{margin:2px 0 4px!important;color:#d7e2e6!important;font-size:10px!important}
.invite-empty{padding:12px 0!important;color:var(--muted-2)!important;text-align:center}
.invite-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px;border:1px solid var(--line-soft);border-radius:9px;background:#0a1820}
.invite-item-copy{min-width:0}.invite-item-copy strong,.invite-item-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.invite-item-copy strong{font-size:11px}.invite-item-copy span{margin-top:3px;color:var(--muted-2);font-size:9px}
.invite-status{font-size:9px;font-weight:800;color:#d1dbe0}.invite-item.accepted .invite-status{color:var(--green)}
.invite-copy{grid-column:1/-1;justify-self:start;padding:0;border:0;background:transparent;color:#8fdcb7;font-size:9px}

/* ---------- Responsive architecture 2.4 ----------
   One layout, progressively compressed by available width/height. No alternate
   desktop DOM and no fixed element may cover the primary action. ---------- */
@supports not (height:100dvh){
  body,.penalty-app,.login-page{min-height:100vh}
  dialog{max-height:calc(100vh - 28px)}
}


@media (max-width:300px){
  .brand-word,.account-name{display:none}
  .topbar{padding-left:8px;padding-right:8px}.account-cluster{gap:3px}.sound-button{width:29px;height:29px;flex-basis:29px;font-size:13px}
  .score-content{grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);padding-inline:6px}.player b{font-size:8px}.score-num{font-size:22px}.sponsor-placeholder{font-size:7px}
  .game-controls{padding-left:6px;padding-right:6px}.zones{gap:4px}.zones button{padding-inline:4px}
  .mobile-nav{padding-left:4px;padding-right:4px}
}

@media (max-width:380px){
  .topbar{padding-left:10px;padding-right:10px}.brand{gap:7px}.brand-word{font-size:14px}.account-name{max-width:116px;font-size:11px}
  .score-content{grid-template-columns:minmax(0,1fr) clamp(58px,21vw,76px) minmax(0,1fr);padding-inline:8px;gap:4px}.player b{font-size:9px}.score-num{font-size:26px}.sponsor-placeholder{font-size:8px}.ad-bg{width:clamp(58px,22vw,78px)}
  .zones button strong{font-size:22px}.zones button span{right:6px;bottom:4px}
  .invite-form{grid-template-columns:1fr}.invite-form .button{width:100%}.invite-link-box{grid-template-columns:1fr}.invite-link-box .button{width:100%}
}

@media (max-height:760px){
  :root{--header-h:54px;--score-h:64px;--nav-h:70px}
  .brand-mark{width:33px;height:33px;flex-basis:33px;font-size:25px}.brand-word{font-size:15px}.account-avatar{width:29px;height:29px;flex-basis:29px}.account-name{font-size:11px}
  .pitch-stage{height:clamp(168px,27dvh,218px)}
  .role-row{min-height:40px}.role-label{font-size:10px}.role-row p{margin-top:5px;font-size:9px}.role-symbol{font-size:22px}
  .zones button strong{font-size:21px}.kick-row{gap:6px}.power-head{font-size:9px}.power-head b{font-size:11px}input[type="range"]{height:17px;margin-top:2px}.game-tools{height:9px;margin-top:3px}.game-tools .text-button{display:none}
  .ball-icon{width:33px;height:33px;font-size:18px!important}.mobile-nav .nav-icon{font-size:21px}
}

@media (max-height:620px){
  :root{--header-h:46px;--score-h:52px;--nav-h:58px}
  .topbar{padding-left:9px;padding-right:9px}.brand-mark{width:28px;height:28px;flex-basis:28px;border-radius:7px;font-size:21px}.brand-mark span{font-size:13px}.brand-word{font-size:12px}.account-name{max-width:106px;font-size:9px}.account-avatar{width:25px;height:25px;flex-basis:25px}
  .score-content{padding-inline:8px}.score-num{font-size:23px}.player b{font-size:8px}.sponsor-placeholder{font-size:7px}.ad-bg{height:62%}
  .pitch-stage{height:clamp(138px,25dvh,158px)}.live-label{left:50%;top:8px;font-size:7px}.turn-clock{top:7px;right:8px;padding:4px 6px;font-size:9px}
  .game-controls{padding:6px 8px 8px}.role-row{min-height:28px}.role-label{font-size:8px}.role-row p{display:none}.role-symbol{font-size:18px}
  .zones{grid-template-rows:repeat(2,40px);gap:5px;margin:4px 0 6px}.zones button{height:40px;border-radius:7px}.zones button strong{font-size:17px}.zones button span{font-size:7px}
  .kick-row{gap:4px}.power-head{font-size:8px}.power-head b{font-size:9px}input[type="range"]{height:13px;margin-top:0}input[type="range"]::-webkit-slider-thumb{width:18px;height:18px;margin-top:-6px}.kick{height:44px;min-height:44px;font-size:11px}.kick span{font-size:17px}.game-tools{display:none}
  .mobile-nav{padding:3px 8px var(--safe-bottom)}.mobile-nav button{gap:1px;font-size:8px}.mobile-nav .nav-icon{font-size:18px}.ball-icon{width:28px;height:28px;font-size:15px!important}
}

@media (orientation:landscape) and (max-height:520px){
  :root{--header-h:42px;--score-h:48px;--nav-h:54px}
  .brand-mark{width:26px;height:26px;flex-basis:26px}.account-avatar{width:24px;height:24px;flex-basis:24px}.pitch-stage{height:132px}
  .game-controls{padding-top:5px}.role-row{min-height:24px}.zones{grid-template-rows:repeat(2,38px);margin-block:3px 5px}.zones button{height:38px}.kick{height:42px;min-height:42px}.power-control{margin-top:-2px}
}

@media (min-width:481px){
  body{background:radial-gradient(circle at 50% 0,#13232b 0,#03090d 46%,#010406 100%)}
  .penalty-app{border-left:1px solid #1b303a;border-right:1px solid #1b303a}
}

/* Login remains responsive independently of the game viewport. */
.login-card .brand>span:last-child{display:flex;flex-direction:column;line-height:1;font-size:16px;font-weight:900}.login-card .brand em{display:block;margin-top:3px;color:#8fa0a8;font-size:9px;font-style:normal;font-weight:650;letter-spacing:3.5px}
.login-card .form-status{margin:16px 0 0;padding:11px 12px;border:1px solid rgba(255,90,90,.3);border-radius:9px;background:rgba(255,70,70,.08);color:#ffb0b0!important;line-height:1.45}
.login-card .form-status.success{border-color:rgba(62,225,139,.28);background:rgba(62,225,139,.08);color:#8cf1ba!important}
.login-email-chip{display:inline-flex;max-width:100%;margin:17px 0 0;padding:7px 10px;border:1px solid #2f4853;border-radius:999px;background:#09161c;color:#c7d5db;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-form .otp-code-input{font-size:26px!important;font-weight:850;letter-spacing:.28em;text-align:center;font-variant-numeric:tabular-nums}
.login-secondary-form{margin-top:14px;text-align:center}.login-secondary-form .text-button{appearance:none;border:0;background:transparent;color:#8fdcb7;cursor:pointer;font:inherit;padding:5px}.login-card .login-back{display:block;margin-top:7px;text-align:center;color:#8fa0a8}.login-card .login-note{margin:17px 0 0!important;color:#778993!important;font-size:11px!important;line-height:1.5}
@media(max-width:460px){.login-page{place-items:stretch;padding:0}.login-card{width:100%;min-height:100vh;min-height:100dvh;border:0;border-radius:0;padding:calc(22px + var(--safe-top)) 18px calc(22px + var(--safe-bottom));box-shadow:none}.login-card h1{font-size:clamp(25px,8vw,30px)}}

/* 2.6.0 — registration gate / waitlist */
.registration-closed-note{display:grid;gap:4px;margin:18px 0 4px;padding:13px 14px;border:1px solid rgba(255,194,92,.28);border-radius:10px;background:rgba(255,179,59,.08);color:#f5d99c;font-size:12px;line-height:1.45}
.registration-closed-note strong{color:#ffd98a;font-size:13px}.registration-closed-note span{color:#c8b98e}.waitlist-divider{display:flex;align-items:center;gap:10px;margin:22px 0 4px;color:#71838d;font-size:9px;font-weight:800;letter-spacing:1.4px}.waitlist-divider:before,.waitlist-divider:after{content:"";height:1px;flex:1;background:#243842}.waitlist-form{margin-top:12px}.button.secondary.wide{width:100%;justify-content:center}

/* ================================================================
   2.7.1 — desktop scrolling/sidebar fixes + mobile sound
   Mobile keeps the game-first UI. Desktop becomes a two-column club
   experience based on the supplied reference, without duplicating IDs.
   ================================================================ */
.topbar-inner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.desktop-game-intro,.desktop-comps-heading{display:none}
.desktop-side{display:contents}
.profile-panel{display:none}
.end-actions,.result-actions{display:grid;gap:9px;width:100%}
.end-actions[hidden]{display:none!important}
.danger-button{border:1px solid #ff766f!important;background:linear-gradient(180deg,#da4a44 0%,#a82f2d 100%)!important;color:#fff!important;box-shadow:0 8px 22px rgba(115,21,20,.24)!important}
.danger-button:hover:not(:disabled){filter:brightness(1.06)}

/* Mobile/tablet: the game owns the viewport; no centered phone mockup. */
@media (max-width:899px){
  html,body{width:100%;height:100%;overflow:hidden;background:#071119}
  .penalty-app{
    width:100%;max-width:none;height:100vh;height:100svh;height:100dvh;min-height:0;margin:0;
    padding-bottom:calc(var(--nav-h) + var(--safe-bottom));border:0;box-shadow:none;overflow:hidden;
  }
  .topbar{flex:0 0 auto}
  .topbar-inner{width:100%}
  .sound-button{display:grid;width:32px;height:32px;flex-basis:32px}
  .app-main{
    height:calc(100vh - var(--header-h) - var(--safe-top) - var(--nav-h) - var(--safe-bottom));
    height:calc(100dvh - var(--header-h) - var(--safe-top) - var(--nav-h) - var(--safe-bottom));
    min-height:0;overflow:hidden;
  }
  .game-view{
    height:100%;min-height:0;display:grid!important;
    grid-template-rows:var(--score-h) minmax(150px,31dvh) minmax(0,1fr);
    overflow:hidden;
  }
  .scoreboard{height:100%;min-height:0}
  .pitch-stage{height:auto!important;min-height:0!important;max-height:none!important}
  .game-controls{
    height:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  }
  .role-row{flex:0 0 auto}
  .zones{flex:1 1 auto;min-height:82px;max-height:116px;grid-template-rows:repeat(2,minmax(36px,1fr))}
  .zones button{height:100%;min-height:0}
  .kick-row{flex:0 0 auto}
  .game-tools{flex:0 0 auto}
  .mobile-nav{width:100%;max-width:none}
  .drawer-view{right:0}
  .drawer-backdrop{left:0;right:0}
  .profile-panel{display:none!important}
}

@media (max-width:899px) and (max-height:760px){
  .game-view{grid-template-rows:var(--score-h) minmax(138px,27dvh) minmax(0,1fr)}
  .zones{min-height:76px;max-height:96px}
}

@media (max-width:899px) and (max-height:620px){
  .game-view{grid-template-rows:var(--score-h) minmax(112px,24dvh) minmax(0,1fr)}
  .zones{min-height:70px;max-height:82px}
  .end-actions{grid-template-columns:1fr 1fr;gap:6px}
  .end-actions .kick{padding-inline:8px;font-size:10px}
}

@media (max-width:899px) and (orientation:landscape) and (max-height:520px){
  .game-view{grid-template-rows:var(--score-h) minmax(104px,30dvh) minmax(0,1fr)}
  .role-row p{display:none}
  .zones{min-height:66px;max-height:76px}
}

/* Desktop: persistent club sidebar, generous stadium, compact controls. */
@media (min-width:900px){
  :root{--desktop-max:1180px;--header-h:72px;--score-h:74px}
  html,body{width:100%;height:100%;min-height:100%;overflow:hidden;background:#08150f}
  body.drawer-open{overflow:hidden}
  .penalty-app{
    width:100%;max-width:none;height:100vh;height:100dvh;min-height:0;margin:0;padding:0;overflow:hidden;box-shadow:none;
    background:
      radial-gradient(900px 520px at 50% -160px,rgba(72,124,61,.08),transparent 72%),
      #08150f;
  }
  .topbar{
    height:72px;min-height:72px;padding:0 28px;border-bottom:1px solid #2b3c30;background:#08150f;
  }
  .topbar-inner{width:min(var(--desktop-max),calc(100vw - 48px));margin:0 auto}
  .brand{gap:10px}.brand-mark{width:38px;height:38px;flex-basis:38px;border-radius:10px;font-size:28px;background:#b9f66b;color:#10200d}
  .brand-word{position:relative;font-size:18px;letter-spacing:-.2px;padding-bottom:12px}
  .brand-word::after{content:"CLUB";position:absolute;left:1px;bottom:0;color:#e8f2e5;font-size:8px;font-weight:700;letter-spacing:4.2px}
  .account-cluster{gap:10px}
  #connection.sr-only{position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;clip:auto!important;white-space:nowrap!important;border:0!important;color:#a7bda9;font-size:10px}
  .sound-button{display:grid;place-items:center;width:34px;height:34px;border:1px solid #2d4434;border-radius:50%;background:#0b1b13;color:#d8e7d8;font-size:16px}
  .account-button{min-height:36px;padding:0 13px;border:1px solid #2d4434;border-radius:9px;background:#0d1d15;color:#eef6ec}
  .account-name{max-width:160px;font-size:11px;font-weight:700}.account-avatar{display:none}

  .app-main{
    width:min(var(--desktop-max),calc(100vw - 48px));height:calc(100vh - 72px);height:calc(100dvh - 72px);
    margin:0 auto;padding:28px 0 22px;display:grid;
    grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start;overflow:hidden;min-height:0;
  }
  .game-view{grid-column:1;grid-row:1;min-width:0;max-height:100%;overflow:visible}
  .desktop-game-intro{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:14px}
  .desktop-eyebrow{display:block;margin-bottom:7px;color:#91b896;font-size:10px;font-weight:850;letter-spacing:1.2px}
  .desktop-game-intro h1{font-size:27px;line-height:1;letter-spacing:-1px;color:#fff}
  .desktop-round-pill{flex:0 0 auto;padding:7px 10px;border:1px solid #314b36;border-radius:999px;color:#edf5e9;background:#0b1a12;font-size:10px;font-weight:750}

  .scoreboard{height:74px;min-height:74px;border:1px solid #a81f2f;border-bottom:0;border-radius:14px 14px 0 0;background:linear-gradient(90deg,#8d1224,#c02035 50%,#8c1323);box-shadow:none}
  .score-content{grid-template-columns:minmax(0,1fr) 160px minmax(0,1fr);padding:0 20px;gap:10px}
  .player{gap:10px}.player b{font-size:11px}.score-num{font-size:29px}
  .avatar{display:grid!important;place-items:center;width:34px;height:34px;flex:0 0 34px;border:1px solid currentColor;border-radius:50%;font-size:9px;font-weight:850}
  .avatar.lime{color:#c4fa77;background:#5a651633}.avatar.coral{color:#ff9a8d;background:#6e1d1f66}
  .attempts{display:flex!important;gap:4px;margin-top:4px}.attempts i{width:5px;height:5px;border-radius:50%;background:#d9ef72}.attempts i.goal{background:#bdfa63}.attempts i.miss{background:#ef706e}
  .sponsor-placeholder{font-size:17px}.ad-bg{width:140px;height:74%}

  .pitch-stage{height:clamp(220px,calc(100dvh - 440px),360px)!important;min-height:220px;aspect-ratio:auto;border-left:1px solid #314a38;border-right:1px solid #314a38;background:#173426}
  .live-label{left:50%;top:17px;transform:translateX(-50%);font-size:9px;letter-spacing:1px;text-align:center}
  .turn-clock{right:16px;top:14px}

  .game-controls{
    padding:16px 20px 15px;border:1px solid #314a38;border-top:0;border-radius:0 0 14px 14px;
    background:#1a3324;box-shadow:none;
  }
  .role-row{min-height:46px;align-items:flex-start}.role-label{font-size:10px;letter-spacing:.8px;color:#bff66b}.role-row p{margin-top:5px;font-size:11px;color:#c4d4c5}.role-symbol{font-size:22px;color:#bff66b}
  .zones{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:46px;gap:8px;margin:10px 0 12px}
  .zones button{height:46px;border-radius:8px;border-color:#425b45;background:#213c2a}.zones button strong{font-size:18px}.zones button span{right:6px;bottom:4px;font-size:8px}.zones button.selected{border-color:#b8f56d;background:#789c4e;color:#fff}
  .kick-row{gap:10px}.power-head{font-size:9px}.power-control{padding:0 1px}.kick{height:48px;min-height:48px;border-radius:8px;font-size:12px}
  .end-actions{grid-template-columns:1fr 1fr;gap:12px}.end-actions .kick{height:48px}
  .game-tools{height:auto;margin-top:11px;display:flex;justify-content:flex-end}.game-tools .text-button{display:block;font-size:10px;color:#b6cbb8;opacity:1}

  .desktop-side{
    grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0;height:100%;
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:7px;padding-bottom:16px;
    scrollbar-width:thin;scrollbar-color:#46614b transparent
  }
  .desktop-side::-webkit-scrollbar{width:7px}.desktop-side::-webkit-scrollbar-track{background:transparent}.desktop-side::-webkit-scrollbar-thumb{background:#405a45;border-radius:999px}
  .desktop-side > .drawer-view{flex:0 0 auto}
  .drawer-view{
    position:static!important;z-index:auto;inset:auto!important;width:100%!important;max-width:none!important;min-height:0;padding:0!important;overflow:visible;
    border:0;background:transparent;box-shadow:none;transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transition:none!important;
  }
  .drawer-close,.drawer-heading,.drawer-backdrop{display:none!important}
  .duel-view{display:flex;flex-direction:column;gap:14px}
  .duel-view .panel+.panel{margin-top:0}
  .profile-panel{display:block!important;order:1}.duel-panel{order:2}.ranking-panel{order:3}.invites-panel{order:4}.admin-link{order:5;margin-top:0}
  .events-view{display:block}.events-view .comps-panel{display:block}
  .panel{padding:18px;border:1px solid #2d4834;border-radius:13px;background:#10231a;box-shadow:none}
  .panel h2{font-size:18px}.panel p,.muted{font-size:11px;color:#a9c1ad}.eyebrow{color:#baf46c;font-size:9px}.pill{border-color:#43633d;color:#c9f77a;background:#22371c}
  .profile-panel h2{margin-top:17px;font-size:18px}.stats strong{font-size:20px}.stats span{font-size:8px}.xp-track{background:#304532}.xp-track i{background:#b8f36c}
  .duel-panel{border-color:#59713d;background:#102016}.duel-panel::before{content:"DUAS PESSOAS. UMA DISPUTA.";display:block;margin-bottom:9px;color:#c8f274;font-size:9px;font-weight:850;letter-spacing:.9px}.duel-panel .primary{background:#b8f56c!important;border-color:#c8ff83!important;color:#10210e!important;box-shadow:none!important}
  .ranking-panel .online-dot{color:#c2f66f}.rank-heading{border-color:#294331}.rank-points{color:#bff56c}
  .invites-panel{margin-top:0}.invite-quota{color:#bdf46b;border-color:#526f3d;background:#1f351a}.invite-link-box input{background:#0a1911;border-color:#324c36}.invite-feedback{color:#acd6ae!important}
  .events-view .comps-panel{padding:18px;border:1px solid #5f5030;border-radius:13px;background:#101b14}
  .desktop-comps-heading{display:block;margin-bottom:8px}.desktop-comps-heading .panel-top{margin-bottom:8px}.desktop-comps-heading h2{font-size:18px}.desktop-comps-heading p{color:#a9c1ad;font-size:11px;line-height:1.5}.desktop-event-dot{color:#f09a70;font-size:8px;font-weight:850;letter-spacing:1px}
  .comp-card{border-color:#3a513d;background:#0c1b13}.comp-media{background:linear-gradient(135deg,#1a3c26,#183125)}
  .mobile-nav{display:none!important}
  #toast{bottom:20px}

  dialog{max-width:440px}
  .result-actions{grid-template-columns:1fr 1fr}
}

@media (min-width:900px) and (max-height:820px){
  .app-main{padding-top:18px;padding-bottom:14px}
  .desktop-game-intro{margin-bottom:9px}.desktop-game-intro h1{font-size:24px}.desktop-eyebrow{margin-bottom:5px}
  .scoreboard{height:66px;min-height:66px}.score-num{font-size:26px}
  .pitch-stage{height:clamp(190px,calc(100dvh - 405px),310px)!important;min-height:190px}
  .game-controls{padding:11px 15px 10px}.role-row{min-height:38px}.zones{grid-template-rows:40px;margin:7px 0 8px}.zones button{height:40px}.kick{height:43px;min-height:43px}.game-tools{margin-top:7px}
}

@media (min-width:900px) and (max-height:680px){
  .app-main{padding-top:10px;padding-bottom:10px}
  .desktop-game-intro{margin-bottom:6px}.desktop-game-intro h1{font-size:21px}.desktop-round-pill{padding:5px 8px}
  .scoreboard{height:58px;min-height:58px}.avatar{width:29px;height:29px;flex-basis:29px}.score-num{font-size:23px}
  .pitch-stage{height:clamp(165px,calc(100dvh - 360px),245px)!important;min-height:165px}
  .game-controls{padding:8px 12px}.role-row{min-height:31px}.role-row p{display:none}.zones{grid-template-rows:35px;gap:6px;margin:5px 0 6px}.zones button{height:35px}.kick{height:39px;min-height:39px}.game-tools{display:none}
}

@media (min-width:900px) and (max-width:1080px){
  .app-main{grid-template-columns:minmax(0,1fr) 290px;gap:22px;width:calc(100vw - 36px)}
  .topbar-inner{width:calc(100vw - 36px)}
  .score-content{grid-template-columns:minmax(0,1fr) 125px minmax(0,1fr);padding-inline:14px}
  .pitch-stage{min-height:300px}
}

@media (min-width:1400px){
  :root{--desktop-max:1240px}
  .app-main{grid-template-columns:minmax(0,1fr) 330px;gap:38px}
  .pitch-stage{min-height:360px}
}

/* 2.8.0 — força do chute + impulso do goleiro */