/* Controls are outside the canvas, with stable touch targets on phones. */
.lola-play-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 10px;width:100%;box-sizing:border-box;background:#12152a;border:1px solid #454963;border-radius:16px;margin-bottom:10px}
.lola-play-tools button{min-height:46px;min-width:88px;border:1px solid #8185ab;border-radius:12px;background:#292d4d;color:#fff;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;padding:10px 14px;touch-action:manipulation}
.lola-play-tools .lola-launch{background:#bcff68;color:#172113;border-color:#d6ffa8}
.lola-play-tools span{font-size:14px;color:#dde1f5;line-height:1.3;flex:1;min-width:100px}
.lola-paused .section.active .lola-pause{background:#bfff74;color:#151c12}
.section.game-page canvas{touch-action:none}
#ladrillos #lad-canvas{background:#101731;border-radius:16px}
@media(max-width:760px){
 body[data-page="game"] .section.game-page.active{height:auto!important;min-height:calc(100dvh - 80px)!important;overflow:visible!important;padding:calc(var(--mobile-bar-h,64px) + env(safe-area-inset-top) + 8px) 8px 24px!important}
 body[data-page="game"] .section.game-page.active .game-wrap{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;box-sizing:border-box;width:100%!important;padding:8px!important}
 .lola-play-tools{padding:6px;margin-bottom:6px;gap:6px}.lola-play-tools button{min-height:48px}.lola-play-tools span{font-size:14px}
 #ladrillos #lad-canvas,#gloton #gloton-canvas,#avion #avion-canvas{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain}
 .lad-btn,.adv-btn,.bici-btn,.gloton-btn,.gal-btn{min-width:54px!important;min-height:52px!important;touch-action:none;font-size:22px!important}
 #lad-controls,#adv-controls,#bici-controls{position:relative!important;bottom:auto!important;gap:12px!important;padding:10px 0!important}
 #ladrillos .box-canvas-wrap,#ladrillos .lad-canvas-wrap{max-height:none!important;height:auto!important}
 .game-page .game-hint,.game-page .game-help{font-size:14px!important;line-height:1.5!important}
}
@media(prefers-reduced-motion:reduce){.lola-play-tools *{animation:none!important}}

#mascota .mascota-stage{background-image:url('fondos-atlas.png')!important;background-size:300% 200%!important;background-position:0 0!important}
#mascota .mascota-stage.night{background-position:50% 0!important}
#vestir .vestir-stage{background-image:linear-gradient(#181a3766,#181a3799),url('fondos-atlas.png')!important;background-size:100% 100%,300% 200%!important;background-position:center,0 100%!important}
#piano .piano-key{border-radius:16px 16px 28px 28px!important;border-color:#ffffff77!important;box-shadow:inset 0 -9px 0 #0002,0 9px 0 #090d23,0 16px 26px #0004!important;transition:transform .09s,filter .09s}
#piano .piano-key.active,#piano .piano-key:active{transform:translateY(7px)!important;filter:brightness(1.15);box-shadow:inset 0 -3px 0 #0002,0 2px 0 #090d23!important}
#sopa .sopa-cell{border-radius:7px;transition:background .1s,box-shadow .1s}
#sopa .sopa-cell.selected{box-shadow:inset 0 0 0 2px #fff!important}
#colorear .colorear-stage{background:#fff!important;border:7px solid #ced4ff!important;border-radius:24px!important}
#colorear .colorear-swatches button{box-shadow:inset 0 3px 6px #ffffff70,0 3px 0 #0005!important}
#bloques .bloques-tool-btn,#bloques .bloques-pal-btn{border-radius:13px!important}
@media(max-width:760px){
 body[data-page="game"] .section.game-page.active:not(.lola-fs) .game-wrap{display:flex!important;flex-direction:column!important;align-items:stretch!important}
 body[data-page="game"] .section.game-page.active:not(.lola-fs) :is(.lad-wrap,.adv-wrap,.bici-wrap,.gloton-wrap,.avion-wrap,.galaxia-wrap,.box-wrap,.tiro-wrap,.manejar-wrap,.penales-wrap){display:flex!important;flex-direction:column!important;width:100%!important;height:auto!important;gap:8px!important;padding:0!important}
 body[data-page="game"] .section.game-page.active:not(.lola-fs) :is(.lad-stage,.adv-stage,.bici-stage,.gloton-stage,.avion-board-wrap,.galaxia-board-wrap,.box-board-wrap,.tiro-canvas-outer,.manejar-canvas-outer,.penales-canvas-outer){width:100%!important;height:auto!important;max-height:none!important;min-height:0!important;aspect-ratio:auto!important;flex:none!important}
 body[data-page="game"] .section.game-page.active:not(.lola-fs) canvas{display:block;width:100%!important;height:auto!important;max-height:none!important}
 body[data-page="game"] :is(.lad-hud,.adv-hud,.bici-hud,.gloton-hud){position:static!important;transform:none!important;white-space:normal!important;flex-wrap:wrap!important;justify-content:center!important;gap:6px 12px!important;font-size:14px!important;min-height:36px!important;background:transparent!important}
 #aventura .adv-controls,#bici .bici-controls{position:static!important;width:100%!important;pointer-events:auto!important}
 #aventura .adv-btn,#bici .bici-btn,#gloton .gloton-arrow{min-height:54px!important;min-width:54px!important}
 #galaxia .galaxia-hud-label,#avion .avion-hud-label,.tiro-stat-label,.penales-stat-label{font-size:12px!important;letter-spacing:0!important}
 #galaxia .galaxia-hud-value,#avion .avion-hud-value{font-size:18px!important}
 #tiro .tiro-info{display:flex!important;flex-wrap:wrap!important;overflow:visible!important;gap:5px!important}
 #tiro .tiro-stat{flex:1 1 25%!important;min-width:72px!important;padding:6px!important}
 #tetris .tetris-wrap{display:grid!important;grid-template-columns:minmax(140px,1fr) minmax(115px,.7fr)!important;align-items:start!important;gap:8px!important;height:auto!important;padding:0!important}
 #tetris .tetris-board-outer{width:100%!important;min-width:0!important;height:auto!important;max-height:none!important;padding:3px!important}
 #tetris .tetris-info{min-width:0!important;width:100%!important}.tetris-next-wrap{display:block!important}
 #tetris .tetris-side{flex-direction:column!important;gap:5px!important}
 #tetris .tetris-btn{min-width:42px!important;min-height:48px!important;padding:4px!important}
 #tetris .tetris-controls{gap:4px!important}
 #sopa .sopa-grid-wrap{width:100%!important;max-width:100%!important;height:auto!important}
 #sopa .sopa-cell{font-size:clamp(12px,3.8vw,17px)!important;min-width:0!important;min-height:0!important}
 #piano .piano-keys{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px 7px!important}
 #piano .piano-key{height:140px!important;min-height:110px!important;aspect-ratio:auto!important}
 #vestir .vestir-wrap,#colorear .colorear-wrap,#mascota .mascota-wrap{display:flex!important;flex-direction:column!important;height:auto!important;gap:12px!important;width:100%!important}
 #vestir .vestir-stage,#colorear .colorear-stage,#mascota .mascota-stage{width:100%!important;height:auto!important;min-height:0!important;max-width:100%!important;box-sizing:border-box!important}
 #mascota .mascota-stage{aspect-ratio:1!important}.mascota-actions{width:100%}
 #vestir .vestir-stage svg,#colorear .colorear-stage svg{width:100%!important;height:auto!important;max-height:none!important}
 #vestir .vestir-panel,#colorear .colorear-side{width:100%!important;max-height:none!important}
 #bloques .bloques-wrap{display:flex!important;flex-direction:column!important;height:auto!important}
 #bloques .bloques-toolbar,#bloques .bloques-cat-tabs{display:flex!important;flex-wrap:wrap!important;gap:6px!important}
 #bloques .bloques-pal-row{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;overflow:visible!important}
 #bloques .bloques-pal-btn{min-width:0!important;min-height:58px!important}
 #ladrillos .lad-controls{flex-direction:row!important}
 .lola-play-tools{flex:none;max-width:760px;margin-left:auto;margin-right:auto}
 body[data-page="game"] .game-page.active .box-overlay-content{max-height:100%!important}
}

@media(max-width:760px){
 #tetris .tetris-wrap{position:relative!important}
 #tetris .tetris-board-outer{position:static!important}
 #tetris .tetris-overlay{inset:0!important;width:100%!important;min-height:320px!important;z-index:10!important;padding:12px!important;box-sizing:border-box}
 #tetris .tetris-overlay-content{width:100%!important;max-height:100%!important;padding:18px!important;box-sizing:border-box}
 #tetris .tetris-key-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto!important;gap:6px!important;width:100%!important}
 #tetris .tetris-key-grid>div{display:none!important}
 #tetris .tetris-btn{grid-column:auto!important;grid-row:auto!important;width:100%!important;min-width:0!important;height:48px!important}
 #tetris .tetris-btn-drop{grid-column:1/-1!important}
 #tetris .tetris-next{display:block!important;align-self:center!important;width:64px!important;padding:0!important}
 #tetris #tetris-next-canvas{width:64px!important;height:64px!important;max-width:100%!important}
 #tetris .tetris-stat-block{min-width:0!important;padding:5px!important;width:100%!important;box-sizing:border-box}
 #tetris .tetris-stat-label{font-size:12px!important}
}
@media(max-width:760px){
 #tetris .tetris-side{min-width:0!important;width:100%!important;box-sizing:border-box}
 #tetris .tetris-next{background:#1b1d35!important;border-radius:12px!important}
 #manejar .manejar-info{width:100%!important;min-width:0!important;flex-wrap:wrap!important;overflow:visible!important;box-sizing:border-box}
 #manejar .tiro-stat{flex:1 1 27%!important;min-width:65px!important}
 #colorear .colorear-swatches{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important}
 #colorear .colorear-sw{width:100%!important;min-width:0!important;min-height:44px!important;box-sizing:border-box}
}
/* Landscape: put pause beside the game and keep the controls below it. */
@media(max-width:950px) and (max-height:500px) and (orientation:landscape){
 body[data-page="game"] .game-page.active:not(.lola-fs){height:auto!important;min-height:100dvh!important;overflow:visible!important}
 body[data-page="game"] .game-page.active:not(.lola-fs)>.game-wrap{display:flex!important;flex-direction:row!important;align-items:flex-start!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;padding:6px!important;gap:10px!important}
 .lola-play-tools{flex:0 0 108px!important;width:108px!important;flex-direction:column!important;margin:0!important;padding:6px!important;align-items:stretch!important}
 .lola-play-tools span{min-width:0!important;font-size:13px!important}.lola-play-tools button{min-width:0!important;min-height:44px!important;font-size:14px!important;padding:8px!important}
 #aventura .adv-wrap,#bici .bici-wrap,#galaxia .galaxia-wrap,#box .box-wrap{display:flex!important;flex-direction:column!important;height:auto!important;flex:1!important;gap:5px!important;padding:0!important;min-width:0!important}
 #aventura .adv-stage,#bici .bici-stage,#galaxia .galaxia-board-wrap,#box .box-board-wrap{height:calc(100dvh - 146px)!important;width:auto!important;max-width:100%!important;flex:none!important}
 #aventura .adv-hud,#bici .bici-hud{position:static!important;transform:none!important;min-height:22px!important;padding:2px 8px!important;font-size:13px!important}
 #aventura .adv-controls,#bici .bici-controls{position:static!important;width:100%!important;height:46px!important;margin:0!important;padding:0!important;pointer-events:auto!important}
 #aventura .adv-btn,#bici .bici-btn{min-height:46px!important;height:46px!important}
 .game-page:not(.lola-fs) .box-overlay{padding:7px!important;box-sizing:border-box!important}
 .game-page:not(.lola-fs) .box-overlay-content{padding:12px!important;max-height:100%!important;overflow:auto!important;box-sizing:border-box!important}
 .game-page:not(.lola-fs) .box-overlay-title{font-size:22px!important;margin:0 0 5px!important}
 .game-page:not(.lola-fs) .box-overlay-text{font-size:14px!important;margin:0 0 8px!important;line-height:1.35!important}
 .game-page:not(.lola-fs) .box-overlay-content .btn{min-height:44px!important;padding:10px!important;font-size:15px!important}
}

#box .box-touch-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 0}#box .box-touch-actions button{min-height:48px;background:#24354b;color:#e6f8ff;border:1px solid #6a869e;border-radius:13px;font:700 13px system-ui;touch-action:manipulation}#box .box-touch-actions button[data-box="jab"]{background:#ffd1a8;color:#413022;border-color:#ffe2b4}#box .box-touch-actions button[aria-pressed="true"]{background:#a9eeef;color:#123d49}#box .box-health-track{border-radius:20px;border:1px solid #40516b;background:#0f1829;height:18px}#box .box-health-fill{background:linear-gradient(90deg,#5dbab6,#bfffa1);border-radius:20px}#box .box-health-rival{background:linear-gradient(90deg,#8569dd,#fbbada)}#box .box-board-wrap{border:1px solid #526c8a;border-radius:20px;overflow:hidden}@media(max-width:500px){#box .box-touch-actions{grid-template-columns:1fr 1fr}#box .box-touch-actions button{min-height:48px;font-size:13px}}
body:has(#penales.active) #mobile-game-tip,body:has(#handball.active) #mobile-game-tip{display:none!important}
#box .box-fighter-name{color:#ebf3ff!important}#box .box-round,#box .box-score{background:#1d2b43!important;color:#e7ffc2!important;border:1px solid #49607d!important;box-shadow:none!important}#box .box-vs{color:#ffb6b0!important}