* {
    font-family: 'Orbitron', sans-serif;
}
body{
  margin:0;
  background:linear-gradient(180deg,#111,#1e1e2f);
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  gap:18px;
  font-family:monospace;
}
/* プレイ画面 */
#game{
  background:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(180deg, #1d1633, #2a1f4d);
  background-size: 30px 30px, 30px 30px, cover;
  border:3px solid #333;
}

/* HOLD */
#hold{
  width:100px;
  height:100px;

  background:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(180deg, #1d1633, #2a1f4d);

  background-size:20px 20px,20px 20px,cover;

  border:3px solid #333;
}

/* NEXT */
.nextBox{
  width:140px;
  height:60px;
  border:3px solid #333;
  background:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(180deg, #1d1633, #2a1f4d);
  background-size: 20px 20px, 20px 20px, cover;
  display:flex;
  justify-content:center;
  align-items:center;
}

.nextBox canvas{
  background:transparent;
  border:none;
}
#leftPanel,#rightPanel{
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
#leftPanel{
  align-self:flex-start;
  margin-top:0px;

  position:relative;

  margin-right:-8px;
}
#rightPanel{width:150px;}
.nextBox{
  width:140px;height:60px;border:3px solid #333;
  display:flex;justify-content:center;align-items:center;
}
.nextBox canvas{background:transparent;border:none;}
#score{
  font-family:monospace;  /* 等幅フォント */
  font-size:40px;
  width:300px;
  text-align:center;
  color:white;
  letter-spacing:4px;
}
#overlay{
  position:fixed;inset:0;
  background:rgba(255,255,255,0.92);
  display:none;justify-content:center;align-items:center;
  flex-direction:column;
  z-index:1000;
}
#gameoverText{
  font-family:'Orbitron',sans-serif;
  font-weight:900;font-size:80px;margin-bottom:40px;
}
#retryBtn{
  font-family:'Orbitron',sans-serif;
  font-weight:700;font-size:24px;
  padding:15px 50px;border:4px solid black;
  background:white;cursor:pointer;
}
#retryBtn:hover{background:black;color:white;}

#backText{
  font-family:'Audiowide',cursive;
  font-size:20px;
  height:28px;
  display:none;
  background:linear-gradient(90deg,#0066ff,#00ccff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 8px rgba(0,150,255,0.6);
}

#renText{
  font-family:'Audiowide',cursive;
  font-size:20px;
  height:28px;

  background:linear-gradient(90deg,#0066ff,#00ccff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 8px rgba(0,150,255,0.6);

  display:none;
}
#attackText{
  font-family:'Orbitron',sans-serif;
  font-size:28px;
  font-weight:900;

  color:#00ccff;

  text-align:center;
  white-space:pre-line;  

  visibility:hidden;
}
 #centerArea{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* お邪魔メーターのスタイル */
#garbageMeterContainer {
  position: absolute;
  left: -20px;
  top: 3px;
  width: 12px;
  height: 600px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid #333;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 4px;
  overflow: hidden;
}

#garbageMeter {
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #ff4c4c, #ff0000);
  box-shadow: 0 0 8px #ff3333;
  transition: height 0.15s ease-out;
}

/* ===== MENU ===== */

#menuScreen{
  position:fixed;
  inset:0;

  display:flex;
  justify-content:center;
  align-items:center;

  background:
    radial-gradient(circle at top,#1d2a55,#090912);

  z-index:5000;

 overflow:hidden;

}

.menuGrid{
  width:900px;
  height:500px;

  display:grid;

  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;

  gap:20px;
}

.menuCard{
  border:none;
  cursor:pointer;

  font-size:70px;
  font-family:'Audiowide',cursive;

  color:white;

  border-radius:20px;

  transition:
    transform 0.2s,
    box-shadow 0.2s,
    filter 0.2s;

  position:relative;
  overflow:hidden;
}

/* 光エフェクト */
.menuCard::before{
  content:"";

  position:absolute;
  top:-50%;
  left:-50%;

  width:200%;
  height:200%;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,0.25),
      transparent
    );

  transform:rotate(25deg);

  transition:0.5s;
}

.menuCard:hover::before{
  left:100%;
}

.menuCard:hover{
  transform:scale(1.03);

  box-shadow:
    0 0 20px rgba(255,255,255,0.4),
    0 0 60px rgba(255,255,255,0.2);

  filter:brightness(1.15);
}

/* 色 */
.playBtn{
  background:#4cc96b;
}

.onlineBtn{
  background:#5d8fff;
}

.scoreBtn{
  background:#e5c14a;
}

.optionBtn{
  background:#b36cff;
}

/* ゲーム画面 */
#gameScreen{
  display:none;
  gap:30px;
  align-items:center;

  position:relative;
}
#menuBg{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  z-index:-1;
}

#optionBg{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  z-index:-1;
}
    
/* ===== OPTION ===== */

#optionScreen{
  position:fixed;
  inset:0;

  display:none;
  justify-content:center;
  align-items:center;

  overflow:hidden;

  background:
    radial-gradient(circle at center,#08111f 0%,#02040a 70%);

  z-index:9999;

  font-family:'Audiowide',cursive;
}

.optionWindow{

  width:1050px;

  padding:45px 50px 35px;

  border-radius:34px;

  background:
    rgba(0,0,0,0.72);

  border:2px solid #00bfff;

  box-shadow:
    0 0 10px rgba(0,191,255,0.9),
    0 0 30px rgba(0,191,255,0.35),
    inset 0 0 30px rgba(0,150,255,0.08);

  backdrop-filter:blur(3px);

  position:relative;
}

.optionTabs{
  display:flex;
  gap:20px;

  margin-bottom:40px;
}

.tab{

  width:190px;
  height:72px;

  border-radius:18px;

  border:2px solid #8a2eff;

  background:rgba(20,0,35,0.9);

  color:#d07dff;

  font-size:34px;

  cursor:pointer;

  font-family:'Audiowide',cursive;

  transition:0.2s;

  box-shadow:
    0 0 10px rgba(177,0,255,0.45);

}

.activeTab{

  border-color:#00bfff;

  color:#b8ecff;

  background:rgba(0,40,70,0.8);

  box-shadow:
    0 0 10px #00bfff,
    0 0 25px rgba(0,191,255,0.7);

}

.settingRow{

  display:flex;
  align-items:center;

  gap:40px;
}

.settingLabel{

  width:220px;
  height:66px;

  display:flex;
  justify-content:center;
  align-items:center;

  border-radius:16px;

  border:2px solid #b100ff;

  background:rgba(25,0,35,0.75);

  color:#df8cff;

  font-size:30px;

  box-shadow:
    0 0 12px rgba(177,0,255,0.5);

}

.sliderArea{

  flex:1;

  position:relative;
}

.sliderValue{

  position:absolute;

  top:-48px;
  left:50%;

  transform:translateX(-50%);

  color:#7fdfff;

  font-size:26px;

  text-shadow:
    0 0 10px #00bfff;
}

input[type="range"]{

  width:100%;

  appearance:none;

  height:8px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #59d8ff 0%,
      #59d8ff 35%,
      #1d2435 35%,
      #1d2435 100%
    );

  outline:none;
}

input[type="range"]::-webkit-slider-thumb{

  appearance:none;

  width:28px;
  height:28px;

  border-radius:50%;

  background:#ffffff;

  border:3px solid #59d8ff;

  box-shadow:
    0 0 12px #59d8ff,
    0 0 25px rgba(89,216,255,0.8);

  cursor:pointer;
}

.toggleWrap{
  flex:1;
}

.toggleBtn{

  width:220px;
  height:65px;

  border:none;

  border-radius:999px;

  font-size:32px;

  font-family:'Audiowide',cursive;

  cursor:pointer;

  transition:0.2s;
}

.toggleBtn.on{

  background:#00bfff;
  color:white;

  box-shadow:
    0 0 20px #00bfff;
}

.toggleBtn.off{

  background:#222;
  color:#777;
}

#closeOption{

  width:310px;
  height:78px;

  margin:10px auto 0;

  border-radius:20px;

  border:2px solid #b100ff;

  background:rgba(25,0,35,0.9);

  color:#df8cff;

  font-size:40px;

  font-family:'Audiowide',cursive;

  cursor:pointer;

  transition:0.2s;

  box-shadow:
    0 0 12px rgba(177,0,255,0.55);
}

#closeOption:hover{

  transform:scale(1.03);

  box-shadow:
    0 0 25px rgba(177,0,255,1);
}

#pauseMenuBtn{
  position:absolute;

  top:15px;
  right:30px;

  width:90px;
  height:90px;

  border-radius:50%;

  background:#8d98a8;

  display:flex;
  justify-content:center;
  align-items:center;

  cursor:pointer;

  box-shadow:
    inset 0 5px 10px rgba(255,255,255,0.2),
    inset 0 -5px 10px rgba(0,0,0,0.25);

  transition:0.2s;
}


#pauseMenuBtn:hover{
  transform:scale(1.05);
}



.pauseLines{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.pauseLines span{
  width:46px;
  height:6px;

  border-radius:999px;

  background:#667385;
}

#pausePanel{
  position:fixed;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);

  width:320px;

  display:none;
  flex-direction:column;
  gap:18px;

  z-index:99999;
}

#pauseCover{
  position:absolute;
  inset:0;

  background:rgba(0,0,0,0.88);

  display:none;

  z-index:1000;
  pointer-events:none;
}

.pauseTitle{
  font-family:'Orbitron',sans-serif;
  font-size:56px;
  font-weight:900;

  color:#7fe7ff;

  text-align:center;

  text-shadow:
    0 0 10px #00bfff,
    0 0 25px #00bfff;
}

.pauseAction{
  height:68px;

  border:2px solid #00bfff;
  border-radius:12px;

  background:rgba(0,30,60,0.85);

  color:#9fefff;

  font-size:28px;
  font-family:'Orbitron',sans-serif;
  font-weight:700;

  cursor:pointer;

  box-shadow:
    0 0 15px rgba(0,191,255,0.4),
    inset 0 0 20px rgba(0,191,255,0.1);

  transition:0.2s;
}

.pauseAction:hover{
  transform:scale(1.03);

  box-shadow:
    0 0 25px rgba(0,191,255,0.9);
}

.resumeBtn{
  background:
    linear-gradient(
      90deg,
      rgba(0,191,255,0.5),
      rgba(0,191,255,0.15)
    );
}

/* ===== ONLINE / ENEMY AREA ===== */
#onlineScreen {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at center,#08111f 0%,#02040a 70%);
  z-index: 9999;
  font-family: 'Audiowide', cursive;
}

#onlineBg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#enemyArea {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: white;
  font-family: 'Audiowide', cursive;
  font-size: 20px;
}

#enemyGame {
  background:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(180deg, #1d1633, #2a1f4d);
  background-size: 15px 15px, 15px 15px, cover;
  border: 3px solid #555;
}

/* オンライン対戦専用 結果画面スタイル */
#onlineResultOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 2000;
}

#onlineResultText {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 72px;
  margin-bottom: 10px;
  text-shadow: 0 0 20px rgba(0, 191, 255, 0.8);
}

#onlineStatusMsg {
  font-family: 'Audiowide', cursive;
  font-size: 20px;
  color: #df8cff;
  height: 30px;
  margin-bottom: 30px;
}