/* ==========================================================
   V36 · BOSCO TAPA MOBILE-FIRST
   Geometría real, vertical jugable y controles proporcionados
   ========================================================== */
:root{
  --g36-night:#020b14;
  --g36-deep:#06382d;
  --g36-green:#087657;
  --g36-green-2:#11a173;
  --g36-gold:#ffd75f;
  --g36-paper:#f6fbf8;
  --g36-goal-left:29.426%;
  --g36-goal-top:40.914%;
  --g36-goal-width:41.148%;
  --g36-goal-height:25.505%;
}

/* Portería lógica = portería dibujada. JS recalcula estas variables al recortar la escena. */
body.playing .db-real-goal{
  left:var(--db-goal-left,var(--g36-goal-left))!important;
  top:var(--db-goal-top,var(--g36-goal-top))!important;
  width:var(--db-goal-width,var(--g36-goal-width))!important;
  height:var(--db-goal-height,var(--g36-goal-height))!important;
}
.db-target-zones,.db-goal-scan,.db-goal-flash{
  clip-path:polygon(0 0,100% 0,94.48% 100%,5.52% 100%);
}
.db-goal-scan{
  border:0!important;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,215,95,.03));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.22),inset 0 -14px 30px rgba(4,55,42,.12)!important;
}
.db-target-zones{opacity:.13!important}
.db-scene-photo,.db-court-overlay{object-fit:cover!important;object-position:50% 50%!important}
.db-orientation-gate{display:none!important}

/* Inicio más claro y compacto */
.db-game-shell{background:
  radial-gradient(circle at 12% 10%,rgba(17,161,115,.11),transparent 32rem),
  linear-gradient(180deg,#f7fbf9,#edf5f1)!important;
}
#gameHome.active{align-items:start!important}
.db-hero-v72{isolation:isolate}
.db-hero-v72:after{
  content:"∞  SIN LÍMITE DE GOLES";
  position:absolute;right:24px;top:22px;z-index:6;
  padding:8px 11px;border:1px solid rgba(255,255,255,.18);border-radius:999px;
  background:rgba(2,25,20,.45);backdrop-filter:blur(10px);
  color:#fff;font-size:9px;font-weight:1000;letter-spacing:.08em;
}
.db-player-card,.db-home-actions,.db-live-ranking-preview{
  box-shadow:0 18px 42px rgba(7,64,47,.09)!important;
}
.db-play-main{min-height:76px!important;border-radius:18px!important}
.db-play-main b{font-size:20px!important;letter-spacing:-.025em}
.db-home-action-grid button{min-height:82px!important;border-radius:16px!important}

/* Selector de juego y dificultad */
.db-mode-sheet-v72{width:min(760px,calc(100vw - 24px))!important}
.db-difficulty-selector{grid-template-columns:repeat(4,1fr)!important;gap:8px!important}
.db-difficulty-selector button{min-height:92px!important;border-radius:16px!important;padding:10px 7px!important}
.db-difficulty-selector button i{font-size:23px!important}
.db-difficulty-selector button b{font-size:11px!important}
.db-difficulty-selector button span{font-size:8px!important;line-height:1.25!important}
.db-difficulty-selector button[data-difficulty="maestro"]{background:linear-gradient(145deg,#f9f6ff,#edf0ff)!important}
.db-difficulty-selector button[data-difficulty="maestro"].active{border-color:#6f59cc!important;box-shadow:0 0 0 2px rgba(111,89,204,.13)!important}
.db-mode-list{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important}
.db-mode-card{min-height:84px!important;border-radius:17px!important;text-align:left!important}
.db-mode-card[data-mode="free"]{
  grid-column:1/-1;background:linear-gradient(135deg,#073c2f,#0b7959)!important;color:#fff!important;
  border-color:transparent!important;box-shadow:0 14px 30px rgba(5,91,65,.20)!important;
}
.db-mode-card[data-mode="free"] i{color:var(--g36-gold)!important;font-size:32px!important}
.db-mode-card[data-mode="free"] span{color:#d6ece4!important}

/* Juego: proporción estable y escena centrada */
body.playing,body.playing.is-fullscreen{background:var(--g36-night)!important;overscroll-behavior:none}
body.playing #gamePlay.active,body.playing.is-fullscreen #gamePlay.active{
  display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;
  width:100vw!important;height:100dvh!important;padding:6px!important;gap:6px!important;
  background:
    radial-gradient(circle at 50% 100%,rgba(13,121,88,.24),transparent 44%),
    linear-gradient(180deg,#020b14,#061924)!important;
}
body.playing .db-game-hud{
  width:min(1180px,100%)!important;height:58px!important;margin:0 auto!important;
  grid-template-columns:42px repeat(5,minmax(0,1fr)) 42px!important;
  gap:5px!important;padding:5px!important;border-radius:17px!important;
  background:linear-gradient(135deg,rgba(4,57,44,.97),rgba(7,103,76,.96))!important;
  box-shadow:0 12px 30px rgba(0,0,0,.28)!important;
}
body.playing .db-hud-item{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.10)!important}
body.playing .db-hud-item.accent{background:rgba(255,215,95,.20)!important}
body.playing .db-hud-item small{font-size:7px!important;color:#d2e9e0!important}
body.playing .db-hud-item b{font-size:14px!important;color:#fff!important}
body.playing .db-hud-close,body.playing .db-fullscreen-btn{min-width:42px!important;min-height:42px!important}
body.playing .db-stage-wrap{min-height:0!important;padding:0!important;overflow:hidden!important}
body.playing .db-stage,body.playing.is-fullscreen .db-stage{
  width:min(calc(100vw - 12px),calc((100dvh - 76px)*1.7777778))!important;
  height:min(calc(100dvh - 76px),calc((100vw - 12px)/1.7777778))!important;
  aspect-ratio:auto!important;border-radius:22px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.42)!important;
}
body.playing .db-keeper{height:94%!important;max-height:none!important}
body.playing .db-ball{width:62px!important;height:62px!important}
body.playing .db-ball-zone{bottom:2.8%!important}
body.playing .db-ball-zone small{font-size:8px!important;padding:5px 8px!important}
body.playing .db-shot-message{bottom:78px!important;min-width:230px!important;max-width:min(78vw,440px)!important}
body.playing .db-shot-message b{font-size:14px!important}
body.playing .db-shot-message span{font-size:9px!important}
body.playing .db-salesian-phrase{max-width:min(76vw,560px)!important;font-size:9px!important}
body.playing .db-keeper-speed{
  max-width:46%;display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;
  font-size:8px!important;border-color:rgba(255,215,95,.28)!important;
}
body.playing .db-keeper-speed[hidden]{display:none!important}
body.playing .db-keeper-speed span{display:block!important;width:100%;font-size:7px!important;margin-top:1px}
.db-stage.db-tap-ready:after{content:"TOCA DENTRO DEL ARCO O DESLIZA EL BALÓN"!important}

/* Dificultad también se reconoce visualmente durante la partida. */
body[data-difficulty="amistoso"] .db-game-hud{--difficulty-color:#9ce2c4}
body[data-difficulty="pro"] .db-game-hud{--difficulty-color:#ffd75f}
body[data-difficulty="leyenda"] .db-game-hud{--difficulty-color:#ff9c72}
body[data-difficulty="maestro"] .db-game-hud{--difficulty-color:#c5b6ff}
body.playing .db-fullscreen-btn:after{border-color:var(--difficulty-color,var(--g36-gold))!important}

/* Celular vertical: zoom proporcional de la misma imagen, sin deformar ni bloquear. */
@media(orientation:portrait) and (max-width:760px){
  body.playing #gamePlay.active,body.playing.is-fullscreen #gamePlay.active{
    padding:calc(4px + env(safe-area-inset-top)) 4px calc(4px + env(safe-area-inset-bottom))!important;
    gap:4px!important;
  }
  body.playing .db-game-hud{
    height:62px!important;grid-template-columns:40px repeat(5,minmax(0,1fr)) 40px!important;
    gap:3px!important;padding:4px!important;border-radius:14px!important;
  }
  body.playing .db-hud-close,body.playing .db-fullscreen-btn{width:40px!important;min-width:40px!important;min-height:50px!important;border-radius:11px!important}
  body.playing .db-hud-item{padding:4px 2px!important;border-radius:10px!important}
  body.playing .db-hud-item small{font-size:6.5px!important;letter-spacing:.02em!important}
  body.playing .db-hud-item b{font-size:12px!important}
  body.playing .lives-hud b{font-size:11px!important}
  body.playing .db-stage,body.playing.is-fullscreen .db-stage{
    width:min(calc(100vw - 8px),calc((100dvh - 74px)*.82))!important;
    height:min(calc(100dvh - 74px),calc((100vw - 8px)/.82))!important;
    border-radius:18px!important;
  }
  body.playing .db-keeper{height:93%!important}
  body.playing .db-ball{width:70px!important;height:70px!important}
  body.playing .db-ball-zone{bottom:3.2%!important}
  body.playing .db-ball-zone small{font-size:8px!important;max-width:210px;text-align:center}
  body.playing .db-shot-message{bottom:19%!important;min-width:210px!important;max-width:86%!important;padding:8px 10px!important}
  body.playing .db-shot-message b{font-size:14px!important}
  body.playing .db-shot-message span{font-size:9px!important}
  body.playing .db-salesian-phrase{top:2%!important;max-width:88%!important;font-size:8px!important;text-align:center}
  body.playing .db-keeper-speed{left:2%!important;top:11%!important;max-width:55%!important}
  body.playing .db-combo{right:2%!important;top:11%!important}
  .db-stage.db-tap-ready:after{display:none!important}
}

/* Celulares bajos en horizontal: toda la cancha cabe y los controles siguen tocables. */
@media(orientation:landscape) and (max-height:560px){
  body.playing #gamePlay.active,body.playing.is-fullscreen #gamePlay.active{padding:3px!important;gap:3px!important}
  body.playing .db-game-hud{height:48px!important;grid-template-columns:38px repeat(5,minmax(0,1fr)) 38px!important;padding:3px!important}
  body.playing .db-hud-close,body.playing .db-fullscreen-btn{width:38px!important;min-width:38px!important;min-height:40px!important}
  body.playing .db-stage,body.playing.is-fullscreen .db-stage{
    width:min(calc(100vw - 6px),calc((100dvh - 57px)*1.7777778))!important;
    height:min(calc(100dvh - 57px),calc((100vw - 6px)/1.7777778))!important;
    border-radius:14px!important;
  }
  body.playing .db-ball{width:52px!important;height:52px!important}
  body.playing .db-shot-message{bottom:54px!important;padding:5px 8px!important}
  body.playing .db-shot-message b{font-size:11px!important}
  body.playing .db-shot-message span{font-size:8px!important}
  body.playing .db-keeper-speed{top:9%!important}
}

/* Inicio y modales en pantallas pequeñas */
@media(max-width:620px){
  .db-hero-v72{min-height:405px!important;border-radius:22px!important}
  .db-hero-v72:after{right:14px;top:14px;font-size:7px;padding:6px 8px}
  .db-hero-copy-v72{left:18px!important;top:48px!important;max-width:66%!important}
  .db-hero-copy-v72 h1{font-size:38px!important;line-height:.88!important;margin:13px 0 12px!important}
  .db-hero-copy-v72 p{font-size:12px!important;line-height:1.45!important}
  .db-hero-badges{display:grid!important;grid-template-columns:max-content!important;gap:5px!important}
  .db-hero-badges span{font-size:8px!important;width:max-content}
  .db-hero-keeper-v72{height:57%!important;right:-7%!important;bottom:3%!important}
  .db-independence-note{left:16px!important;bottom:13px!important;max-width:67%!important}
  .db-player-card,.db-home-actions,.db-live-ranking-preview{padding:16px!important;border-radius:19px!important}
  .db-mode-sheet-v72{width:100%!important}
  .db-difficulty-selector{grid-template-columns:1fr 1fr!important}
  .db-difficulty-selector button{min-height:80px!important}
  .db-mode-list{grid-template-columns:1fr!important}
  .db-mode-card[data-mode="free"]{grid-column:auto}
  .db-mode-card{min-height:76px!important}
  .db-sheet-head h2{font-size:24px!important}
}

@media(max-width:380px){
  body.playing .db-game-hud{grid-template-columns:36px repeat(5,minmax(0,1fr)) 36px!important}
  body.playing .db-hud-close,body.playing .db-fullscreen-btn{width:36px!important;min-width:36px!important}
  body.playing .db-hud-item small{font-size:5.8px!important}
  body.playing .db-hud-item b{font-size:11px!important}
}

@media(prefers-reduced-motion:reduce){
  .db-goal-scan,.db-ball,.db-hero-v72:before{animation:none!important}
}