/* MiniGenios Studio · estilos comunes de los juegos */
:root{--bg:#dff3ff;--card:#ffffff;--ink:#1d2b53;--sun:#ffb703;--good:#2fbf71;--bad:#ff7a59;--btn:#4c8dff;--btn-ink:#ffffff;
  --bubble:#fff4cf;--bar:#ffffff;--line:#dde4ee;--petrol:#0E5C63;color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#14203f;--card:#22335f;--ink:#f3f6ff;--bubble:#3a3a63;--bar:#16204a;--line:#26326a;--petrol:#5FB7BD;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#14203f;--card:#22335f;--ink:#f3f6ff;--bubble:#3a3a63;--bar:#16204a;--line:#26326a;--petrol:#5FB7BD;color-scheme:dark}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:"Baloo 2","Trebuchet MS",system-ui,sans-serif;font-weight:600;
  display:flex;flex-direction:column;min-height:100dvh;overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%;display:block}

/* Barra superior */
.gbar{background:var(--bar);border-bottom:1px solid var(--line);padding:8px max(16px,env(safe-area-inset-left,0px));padding-top:max(8px,env(safe-area-inset-top,0px))}
.gbar .in{max-width:720px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.gbar a{color:var(--ink);text-decoration:none}
.gbar .back{font-weight:800;font-size:1.15rem;background:var(--sun);color:#1d2b53;border-radius:20px;padding:6px 16px;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.gbar .logo img{height:34px;width:auto}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .gbar .logo{background:#fff;border-radius:8px;padding:3px 6px}}

main{width:100%;max-width:720px;margin:0 auto;padding:12px 16px;display:flex;flex-direction:column;gap:12px;flex:1}
.top{display:flex;justify-content:space-between;align-items:center;font-size:1.5rem}
.guide{display:flex;align-items:center;gap:10px}
.capi{width:64px;height:64px;flex:none}
.bubble{background:var(--bubble);border-radius:22px;padding:10px 16px;font-size:clamp(1.2rem,4.5vw,1.7rem);flex:1;min-height:3.2rem;display:flex;align-items:center}
.say{border:0;background:var(--sun);border-radius:50%;width:56px;height:56px;font-size:1.6rem;cursor:pointer;flex:none}
.say:focus-visible,.big:focus-visible,button:focus-visible,a:focus-visible{outline:4px solid var(--sun);outline-offset:3px}

.center{text-align:center;justify-content:center;align-items:center;flex:1;display:flex;flex-direction:column;gap:16px;padding:24px 0}
.center h1{font-size:clamp(2.4rem,10vw,3.6rem);margin:0;font-weight:800;line-height:1.05}
.center p{font-size:1.4rem;margin:0;max-width:30ch}
.hero{display:flex;align-items:center;justify-content:center;gap:8px;font-size:4.4rem;line-height:1}
.hero img{width:120px;height:120px}
.big{border:0;border-radius:32px;background:var(--good);color:#fff;font:inherit;font-weight:800;font-size:2.2rem;padding:14px 44px;cursor:pointer;box-shadow:0 7px 0 rgba(0,0,0,.25)}
.big:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(0,0,0,.25)}
.hidden{display:none!important}

/* Recomendación para familias al terminar */
.plug{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:14px;margin-top:8px;max-width:460px;width:100%}
.plug img{border-radius:4px;box-shadow:0 8px 16px -10px rgba(19,41,75,.6)}
.plug small{display:block;font-size:.85rem;opacity:.75;text-transform:uppercase;letter-spacing:.04em}
.plug strong{display:block;font-size:1.15rem;line-height:1.2;margin:2px 0 8px}
.plug a{display:inline-block;font-size:1rem;font-weight:800;color:var(--petrol);text-decoration:none;margin-right:12px}
.plug a:hover{text-decoration:underline}
.more-games{font-size:1.15rem;color:var(--petrol);font-weight:800;text-decoration:none}

@keyframes pop{50%{transform:scale(1.35)}}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}