*{margin:0;padding:0;box-sizing:border-box}
html,body{
  width:100%;height:100%;
  overflow:hidden;
  background:#1a1a2e;
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
#game-shell{
  position:relative;
  aspect-ratio:390/844;
  max-width:100vw;
  max-height:100vh;
  margin:0 auto;
  overflow:hidden;
  background:#2a2a3e;
  display:flex;
  flex-direction:column;
}
#game-stage{
  flex:1;
  position:relative;
  overflow:hidden;
}
#screen-wrap{
  width:100%;height:100%;
  position:relative;
  overflow:hidden;
  background:#87CEEB;
}
#screen-wrap canvas{
  display:block;
  width:100%;height:100%;
}
#btn-pause{
  position:absolute;
  top:max(8px,env(safe-area-inset-top));
  right:8px;
  width:44px;height:44px;
  border:none;border-radius:50%;
  background:rgba(0,0,0,.35);
  color:#fff;font-size:18px;
  z-index:30;cursor:pointer;
  touch-action:manipulation;
  display:none;
}
#btn-mute{
  position:absolute;
  top:max(8px,env(safe-area-inset-top));
  right:58px;
  width:44px;height:44px;
  border:none;border-radius:50%;
  background:rgba(0,0,0,.35);
  color:#fff;font-size:18px;
  z-index:30;cursor:pointer;
  touch-action:manipulation;
  display:none;
}
#control-deck{
  flex:0 0 25%;
  display:flex;
  gap:4px;
  padding:8px 4px max(8px,env(safe-area-inset-bottom));
  background:#2c2c44;
}
#control-deck.inactive .ctrl-btn{
  opacity:.3;
  pointer-events:none;
}
.ctrl-btn{
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  min-height:44px;
  border:2px solid rgba(255,255,255,.15);
  border-radius:10px;
  font-size:16px;font-weight:bold;
  color:#fff;
  background:#4a4a6e;
  touch-action:none;
  cursor:pointer;
  transition:background .08s;
}
.ctrl-btn:active,.ctrl-btn.pressed{
  background:#6a6a9e;
}
.ctrl-arrow{font-size:28px;line-height:1}
.ctrl-icon{font-size:24px;line-height:1}
.ctrl-label{font-size:12px;margin-top:2px;opacity:.8}
.start-btn{
  position:absolute;
  bottom:30%;left:50%;
  transform:translateX(-50%);
  min-width:200px;
  padding:16px 32px;
  border:none;border-radius:12px;
  font-size:20px;font-weight:bold;
  color:#fff;background:#e67e22;
  z-index:25;cursor:pointer;
  touch-action:manipulation;
}
.start-btn:active{background:#cf6d17}
.start-btn.hidden{display:none}
#overlay{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.72);
  color:#fff;
  z-index:20;
  padding:24px;
  text-align:center;
}
#overlay.hidden{display:none}
.ov-title{
  font-size:22px;font-weight:bold;
  margin-bottom:8px;line-height:1.4;
}
.ov-sub{
  font-size:14px;margin-bottom:20px;
  opacity:.8;line-height:1.5;
}
.ov-btn{
  display:block;
  min-width:200px;
  padding:14px 24px;
  border:none;border-radius:10px;
  font-size:18px;font-weight:bold;
  color:#fff;
  background:#e67e22;
  margin:6px auto;
  cursor:pointer;
  touch-action:manipulation;
}
.ov-btn:active{background:#cf6d17}
.ov-btn.secondary{
  background:rgba(255,255,255,.15);
  font-size:15px;
}
.ov-btn.secondary:active{background:rgba(255,255,255,.25)}
.ov-score{
  font-size:28px;font-weight:bold;
  margin:12px 0 4px;
}
.ov-detail{
  font-size:13px;opacity:.7;
  margin-bottom:16px;line-height:1.6;
}
.ov-hint{
  font-size:12px;opacity:.5;
  margin-top:12px;
}
.ov-cats{
  font-size:48px;
  margin:16px 0;
  letter-spacing:12px;
}
.ov-table{
  width:100%;max-width:280px;
  margin:12px auto;
  font-size:14px;
  text-align:left;
}
.ov-table td{padding:4px 8px}
.ov-table td:last-child{text-align:right;font-weight:bold}
.ov-total{
  font-size:24px;font-weight:bold;
  margin:8px 0;
  color:#f1c40f;
}
.ov-best{font-size:13px;opacity:.6;margin-bottom:12px}
.rescue-gauge{
  width:80%;max-width:260px;
  height:20px;
  background:rgba(255,255,255,.15);
  border-radius:10px;
  margin:12px auto;
  overflow:hidden;
}
.rescue-gauge-fill{
  height:100%;
  background:linear-gradient(90deg,#e74c3c,#e67e22,#f1c40f);
  border-radius:10px;
  transition:width .1s;
}

@media (max-height:500px){
  #overlay{padding:12px;overflow-y:auto}
  .ov-title{font-size:18px;margin-bottom:4px}
  .ov-sub{margin-bottom:8px}
  .ov-cats{font-size:32px;margin:8px 0}
  .ov-btn{padding:10px 20px;min-height:44px}
}