html,body{
  margin:0;width:100%;height:100%;overflow:hidden;
  font-family:Arial,Helvetica,sans-serif;background:#F5F7FA;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
}
*{box-sizing:border-box}
#app{display:flex;width:100vw;height:100dvh;min-width:0}
aside{
  width:260px;background:#003B71;color:#fff;padding:20px 15px;
  display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex-shrink:0;
}
h1{font-size:24px;text-align:center;margin:0;font-weight:800}
h2{font-size:22px;text-align:center;margin:0 0 12px;color:#F7941D}
button{
  min-height:52px;border:2px solid white;border-radius:10px;background:#005CA9;color:white;
  font-size:16px;font-weight:700;text-align:left;padding-left:14px;cursor:pointer;
}
button:hover,button.active{background:#F7941D;color:#003B71;border-width:3px}
footer{margin-top:auto;text-align:center;font-size:13px;line-height:1.4}
main{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}
canvas{display:block;width:100%;height:100%;background:#F5F7FA;flex:1;min-height:0}
.typing-controls{
  position:relative;z-index:5;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:10px 14px;background:#F5F7FA;box-shadow:0 2px 8px rgba(0,0,0,.08);flex-shrink:0;
}
.typing-controls.hidden{display:none}
.typing-controls select,.typing-controls button{
  height:44px;border:3px solid #fff;border-radius:8px;background:#e9edf5;color:#333;
  font-size:18px;font-weight:600;padding:0 14px;box-shadow:0 4px 10px rgba(0,0,0,.18);
  max-width:100%;
}
.typing-controls button{background:#005CA9;color:#fff;cursor:pointer;text-align:center;min-width:170px}
@media(max-width:1100px){
  aside{width:220px;padding:14px 10px;gap:9px}
  h1{font-size:20px} h2{font-size:19px;margin-bottom:8px}
  button{min-height:44px;font-size:14px;padding-left:10px}
  footer{font-size:11px}
  .typing-controls{gap:8px;padding:8px 10px}
  .typing-controls select,.typing-controls button{height:40px;font-size:15px;padding:0 10px}
  .typing-controls button{min-width:140px}
}
@media(max-width:820px){
  html,body{overflow:hidden}
  #app{width:100%;height:100dvh;min-height:100dvh;flex-direction:column}
  aside{
    width:100%;max-height:34dvh;overflow:auto;padding:10px;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  }
  aside h1,aside h2,aside footer{display:none}
  aside button{min-height:42px;font-size:14px;padding:6px 8px;text-align:center;border-radius:8px}
  main{flex:1;min-height:0}
  .typing-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px}
  .typing-controls.hidden{display:none}
  .typing-controls select,.typing-controls button{
    width:100%;height:38px;font-size:14px;padding:0 8px;border-width:2px;min-width:0;
  }
  .typing-controls button{grid-column:1/-1;min-width:0;text-align:center}
}
@media(max-width:480px){
  aside{max-height:38dvh;grid-template-columns:1fr}
  main{min-height:0}
  .typing-controls{grid-template-columns:1fr}
}


@media(max-width:820px){
  .maze-controls{left:8px;right:8px;top:8px}
  .maze-controls button{width:100%;min-height:38px;font-size:14px}
}

/* Ajustes de botões e controles */
.typing-controls button,
.maze-controls button{
  background:#F7941D !important;
  color:#003B71 !important;
  border:3px solid #fff !important;
  font-weight:800 !important;
  text-align:center !important;
}
.maze-controls{
  position:relative;
  z-index:6;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:#F5F7FA;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  flex-shrink:0;
}
.maze-controls.hidden{display:none}
.maze-controls button{
  min-height:44px;
  border-radius:10px;
  font-size:16px;
  padding:0 16px;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}
@media(max-width:820px){
  .maze-controls{padding:8px;justify-content:stretch}
  .maze-controls button{width:100%;min-height:38px;font-size:14px}
}


/* Ajustes finais de responsividade */
html,body{overflow:hidden!important}
#app{height:100vh;height:100dvh;max-height:100dvh;overflow:hidden}
aside{height:100dvh;max-height:100dvh;overflow-y:auto}
main{height:100dvh;max-height:100dvh;overflow:hidden}
canvas{width:100%!important;height:auto!important;flex:1 1 auto;min-height:0!important}
.typing-controls{width:100%;max-width:100%}
@media(max-height:760px){
  aside{padding-top:10px;gap:8px}
  h1{font-size:20px}
  h2{font-size:18px;margin-bottom:4px}
  aside button{min-height:42px;font-size:14px}
  .typing-controls{padding:6px 10px}
  .typing-controls select,.typing-controls button{height:36px;min-height:36px;font-size:14px}
}
@media(max-height:660px){
  h1,h2,footer{display:none}
  aside{gap:6px}
  aside button{min-height:36px;font-size:13px}
}

/* Ajustes solicitados */
aside h1{
  line-height:1.22;
}
#mobileWarning{
  display:none;
}
@media (hover:none) and (pointer:coarse), (max-width:700px){
  #app{
    display:none !important;
  }
  #mobileWarning{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#F5F7FA;
    color:#003B71;
    padding:24px;
    z-index:99999;
    font-family:Arial,Helvetica,sans-serif;
  }
  .mobile-warning-box{
    max-width:520px;
    border:4px solid #005CA9;
    border-radius:18px;
    background:white;
    padding:28px;
    text-align:center;
    box-shadow:0 6px 22px rgba(0,0,0,.18);
  }
  .mobile-warning-box h1{
    margin:0 0 14px 0;
    color:#F7941D;
    font-size:34px;
  }
  .mobile-warning-box p{
    font-size:21px;
    line-height:1.45;
    margin:10px 0;
    font-weight:700;
  }
}

/* Labirinto responsivo */
.maze-controls button{
  min-width:180px;
}