/* FONTS — self-host（同梱woff2 / 外部リクエストなし）。Rajdhani 300/400/600・Share Tech Mono 400（latin）。 */
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/rajdhani-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/rajdhani-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/rajdhani-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/share-tech-mono-latin-400-normal.woff2') format('woff2');}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}

html,body{
  width:100%;height:100%;overflow:hidden;
  background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  font-family:'Share Tech Mono',monospace;
  touch-action:none;user-select:none;
}

#app{
  width:100%;max-width:440px;
  display:flex;flex-direction:column;height:100%;
  border-left:1px solid rgba(255,255,255,0.2);
  border-right:1px solid rgba(255,255,255,0.2);
  position:relative;
}

#canvas-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#000;
}

#header{
  width:100%;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 8px;
  height:42px;
  background:#000;
  border-bottom:1px solid rgba(255,255,255,0.15);
  position:relative;
}
#menu-btn{
  background:transparent;
  border:none;
  color:rgba(255,255,255,0.8);
  font-family:'Share Tech Mono',monospace;
  font-size:16px;
  padding:4px 10px;
  cursor:pointer;
  transition:background 0.15s;
  opacity:0.7;
  margin-left:auto;
}
#menu-btn:hover{ background:rgba(255,255,255,0.08); }
#header-wave{
  position:absolute;
  left:50%;transform:translateX(-50%);
  font-family:'Share Tech Mono',monospace;
  font-size:12px;
  color:rgba(255,255,255,0.9);
  letter-spacing:3px;
  pointer-events:none;
}

#settings-panel{
  display:none;
  position:absolute;
  top:42px; right:0;
  background:#0a0a0a;
  border:1px solid rgba(255,255,255,0.2);
  border-top:none;
  padding:12px 16px;
  z-index:100;
  min-width:140px;
}
#settings-panel.show{ display:block; }
.settings-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 0;
  gap:24px;
}
.settings-label{
  font-family:'Share Tech Mono',monospace;
  font-size:12px;
  color:rgba(255,255,255,0.7);
  letter-spacing:2px;
}
.toggle-btn{
  font-family:'Share Tech Mono',monospace;
  font-size:11px;
  letter-spacing:1px;
  padding:4px 12px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.4);
  background:transparent;
  color:rgba(255,255,255,0.5);
  transition:all 0.15s;
  min-width:48px;
}
.toggle-btn.on{
  background:rgba(255,255,255,0.12);
  color:#fff;
  border-color:rgba(255,255,255,0.8);
}
canvas{display:block;}

#debug-panel{
  display:flex;
  gap:4px;
  position:absolute;
  left:50%; transform:translateX(-50%);
}
#debug-panel.hidden{ display:none; }
#debug-panel button{
  font-family:'Share Tech Mono',monospace;
  font-size:9px;
  letter-spacing:1px;
  padding:3px 8px;
  cursor:pointer;
  background:transparent;
  border:1px solid;
  transition:background 0.1s;
}
#btn-barusu{
  border-color:rgba(255,80,80,0.9);
  color:rgba(255,80,80,1);
  box-shadow:0 0 5px rgba(255,80,80,0.6);
}
#btn-barusu:active{ background:rgba(255,80,80,0.25); }
#btn-ruin{
  border-color:rgba(255,160,0,0.9);
  color:rgba(255,160,0,1);
  box-shadow:0 0 5px rgba(255,160,0,0.6);
}
#btn-ruin:active{ background:rgba(255,160,0,0.25); }
#btn-boss-jump{
  font-family:'Share Tech Mono',monospace;
  font-size:9px;
  letter-spacing:1px;
  padding:3px 6px;
  cursor:pointer;
  background:transparent;
  border:1px solid rgba(180,100,255,0.9);
  color:rgba(180,100,255,1);
  box-shadow:0 0 5px rgba(180,100,255,0.4);
  appearance:none;
  -webkit-appearance:none;
}

#title-bar{
  width:100%;flex-shrink:0;
  text-align:center;
  padding:6px 0 5px;
  background:#000;
  border-bottom:1px solid rgba(255,255,255,0.2);
}
#title{
  font-family:'Rajdhani',sans-serif;
  font-size:18px;font-weight:600;letter-spacing:8px;
  color:#fff;opacity:0.9;
}
#title-sub{
  font-size:7px;color:rgba(255,255,255,0.4);
  letter-spacing:4px;margin-top:1px;
  font-family:'Share Tech Mono',monospace;
}

/* ===== デバッグトースト ===== */
#debug-toast{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.82);
  border:1px solid rgba(255,255,255,0.35);
  color:#fff;
  font-family:'Share Tech Mono',monospace;
  font-size:13px;
  letter-spacing:3px;
  padding:10px 22px;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.2s;
  z-index:999;
}
#debug-toast.show{ opacity:1; }
#debug-toast.hide{ opacity:0; }