:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0; min-width: 320px; min-height: 100vh; display: grid; place-items: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #fff9e9;
  background: radial-gradient(circle at 50% 0%, #a7def4, #5a85bb 68%, #344678);
}
#game-shell {
  width: min(1066px, calc((100vh - 92px) * 1.333333), 100vw);
  padding: 18px 12px 12px;
  position: relative;
}
#game { overflow: hidden; border: 5px solid #fff5d9; border-radius: 17px; box-shadow: 0 16px 0 #6e5380, 0 27px 55px #25325699; }
canvas { display: block; width: 100% !important; height: auto !important; image-rendering: pixelated; image-rendering: crisp-edges; }
.instructions { display:flex; justify-content:center; flex-wrap:wrap; gap: 15px 26px; margin-top: 20px; font: 700 12px Arial, sans-serif; letter-spacing:.7px; color: #f2f8ff; text-shadow: 0 1px #395379; }
kbd { display:inline-grid; min-width: 21px; height: 21px; place-items:center; padding: 0 5px; margin-right: 3px; border: 1px solid #fff9e3; border-radius:5px; background:#5f6294; box-shadow: 0 2px #30385f; font: 700 11px Arial; }
.mobile-controls{display:none;user-select:none;-webkit-user-select:none;touch-action:none}.touch-button,.touch-menus button{border:2px solid #fff0bd;color:#fff9e9;background:linear-gradient(#68719e,#454d7d);box-shadow:0 4px 0 #283052,0 7px 14px #1b254477;font:900 18px system-ui;touch-action:none}.touch-button small{display:block;margin-top:1px;font-size:8px;letter-spacing:.6px}.touch-button.pressed,.touch-menus button.pressed{transform:translateY(3px);box-shadow:0 1px 0 #283052;background:linear-gradient(#828ab3,#59638f)}
.welcome{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:linear-gradient(#10233cdd,#24365ddd),url('./public/assets/runtime-800/environments/sprout-camp-back.png') center/cover;}
.welcome[hidden]{display:none}.welcome-card{width:min(620px,calc(100vw - 32px));padding:26px 38px 32px;border:4px solid #fff0bd;border-radius:18px;background:#14243eef;box-shadow:0 18px 60px #07101dcc;text-align:center}.welcome-logo{display:block;width:min(100%,520px);height:auto;margin:-2px auto 6px;image-rendering:pixelated;filter:drop-shadow(0 8px 0 #07101d66)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.welcome p{line-height:1.55;color:#dbeeff}.welcome .eyebrow{margin:0 0 2px;font-weight:900;letter-spacing:3px;color:#8fe1d5}.welcome label{display:block;margin:16px 0 8px;font-weight:800;text-align:left}.welcome input{width:100%;padding:13px 15px;border:2px solid #8fc9d2;border-radius:8px;background:#eefaff;color:#17243d;font:700 18px system-ui}.welcome button{width:100%;margin-top:14px;padding:14px;border:0;border-radius:8px;background:#e9b85f;color:#1d2940;font:900 17px system-ui;cursor:pointer}.welcome button:hover{background:#ffd47d}
@media (hover:none), (pointer:coarse), (max-width:700px) {
  body{display:block;min-height:100dvh;overflow-x:hidden;background:#344678}
  #game-shell{width:100vw;padding:4px 4px calc(8px + env(safe-area-inset-bottom));}
  #game{border-width:3px;border-radius:10px;box-shadow:0 7px 0 #6e5380,0 12px 28px #25325699}
  .instructions{display:none}
  .mobile-controls{display:grid;grid-template-columns:minmax(132px,1fr) minmax(174px,1.25fr);gap:10px 14px;align-items:end;max-width:620px;margin:12px auto 0;padding:0 8px}
  .touch-cluster{position:relative;height:132px}
  .touch-button{position:absolute;width:58px;height:58px;border-radius:50%;padding:0}
  .touch-movement .touch-left{left:0;bottom:7px}.touch-movement .touch-right{left:76px;bottom:7px}.touch-movement .touch-portal{left:38px;top:0}
  .touch-actions .touch-interact{left:0;bottom:0}.touch-actions .touch-skill{left:50px;top:0}.touch-actions .touch-attack{right:0;bottom:2px;width:70px;height:70px;background:linear-gradient(#d06a73,#974b66)}.touch-actions .touch-jump{right:66px;bottom:0;width:64px;height:64px;background:linear-gradient(#6da5a5,#4d7183)}.touch-actions .touch-potion{right:2px;top:0;width:48px;height:48px;color:#ffd8de}
  .touch-menus{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .touch-menus button{min-height:38px;border-radius:10px;font-size:11px;letter-spacing:.8px}
  .welcome{min-height:100dvh;padding:10px}.welcome-card{max-height:calc(100dvh - 20px);overflow:auto;padding:18px 22px 22px}.welcome-logo{width:min(100%,420px)}
}