:root{
  --bg:#f7fbff;
  --fg:#0b2b3b;
  --accent:#63C5DA;
  --accent-2:#7EE081;
  --danger:#ff6b6b;
  --muted:#9bb3bf;
}
*{box-sizing:border-box}
html,body,#app{height:100%}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,#e6f6ff 0%, #f7fbff 60%, #ffffff 100%);color:var(--fg)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:rgba(255,255,255,.6);backdrop-filter:blur(8px);border-bottom:1px solid #e5f0f6;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:800;color:#073047}
.brand-emoji{font-size:1.4rem}
.brand-title{letter-spacing:.5px}
.hud{display:flex;align-items:center;gap:.5rem}
.hud-item{padding:.25rem .5rem;border-radius:.5rem;background:#fff;border:1px solid #e5f0f6;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.btn{appearance:none;border:1px solid #d7e7ef;background:#fff;color:var(--fg);padding:.55rem .8rem;border-radius:.7rem;cursor:pointer;font-weight:700;transition:transform .08s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(7,48,71,.08)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(180deg, #78e6f6, #63C5DA);color:#083041;border-color:#5bb4c8}
.btn.icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px}
.divider{height:1px;background:#e5f0f6;margin:1rem 0}
.layout{display:grid;grid-template-columns:280px 1fr;gap:0;height:calc(100% - 56px)}
.sidebar{padding:1rem;border-right:1px solid #e5f0f6;background:rgba(255,255,255,.5)}
.levels{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:.5rem}
.levels button{width:100%}
/* debug UI eliminado */

.cmd-panel{
  font: 12px/1.4 system-ui, sans-serif;
  background: #f3f7f9;
  border: 1px solid #cfe3ea;
  border-radius: 8px;
  padding: .5rem .6rem;
  color: #083041;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) inset;
}
.cmd-panel code{background: #e7f1f5; padding: 0 .25rem; border-radius: 4px}
.cmd-panel .muted{color:#5b7b87}
.stage-wrap{position:relative;height:100%;overflow:hidden;background:
    radial-gradient(600px 60% at 80% 0%, rgba(99,197,218,.25), transparent 60%),
    radial-gradient(600px 60% at 20% 0%, rgba(126,224,129,.25), transparent 60%);
}
#stage{position:absolute;inset:0;display:block;width:100%;height:100%}
.goal-tag{position:absolute;top:.5rem;left:50%;transform:translateX(-50%);background:#fff;border:1px solid #e5f0f6;border-radius:999px;padding:.2rem .7rem;font-weight:800;color:#0b2b3b;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.help-btn{position:absolute;bottom:1rem;left:1rem;background:#fff;border:2px solid var(--accent);border-radius:50%;width:56px;height:56px;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(7,48,71,.08)}
.help-btn .bubble{display:block;width:36px;height:36px;border-radius:14px;background:linear-gradient(180deg,#fff,#eafdff);border:2px solid var(--accent);color:var(--accent);font-weight:900;font-size:26px;line-height:30px;text-align:center}

/* SVG Stage */
.game-svg{width:100%;height:100%;display:block;background:rgba(255,255,255,0.1);border:2px solid #63C5DA}
.sprite{will-change:transform;transform-origin:center center}
.walk-bob{animation:walkBob .5s infinite alternate ease-in-out}
@keyframes walkBob{from{transform:translateY(0)}to{transform:translateY(-1.5px)}}
.spin{animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}

/* Animaciones de patas/cola simples */
.leg-swing-a{animation:legA .4s infinite ease-in-out alternate}
.leg-swing-b{animation:legB .4s infinite ease-in-out alternate}
@keyframes legA{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
@keyframes legB{from{transform:rotate(10deg)}to{transform:rotate(-8deg)}}
.tail-wag{animation:wag .35s infinite ease-in-out alternate; transform-origin: left center}
@keyframes wag{from{transform:rotate(-15deg)}to{transform:rotate(20deg)}}

/* Tags */
.tag{font-size:12px;fill:#083041}

/* Responsive */
@media (max-width: 880px){
  .layout{grid-template-columns:1fr}
  .sidebar{order:2}
  .stage-wrap{order:1;height:60vh}
}