@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Montserrat:wght@300;400;600&display=swap');

/* ============================================================
   グローバル設定 (Corporate & High-end Game Style)
============================================================ */
:root {
  --navy-base: rgba(4, 14, 25, 0.65);       
  --navy-dark: rgba(2, 8, 15, 0.85);        
  --accent-cyan: #00d4ff;                   
  --text-main: #ffffff;
  --text-sub: #a6c3d9;                      
  --glass-border: 1px solid rgba(255, 255, 255, 0.15);
  --glass-blur: blur(16px);
}

body, html {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background-color: #000;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  color: var(--text-main);
  user-select: none;
  -webkit-user-select: none;
}

canvas { display: block; width: 100%; height: 100%; }
.h { display: none !important; }

/* ============================================================
   1. ゲーム画面 UI 
============================================================ */
#gauges-container { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 100; }
.gauge-unit canvas { width: 130px; height: 130px; }

#telegraph-panel {
  position: absolute; top: 10px; left: 10px;
  background-color: #222; border-radius: 6px; padding: 6px 10px;
  display: flex; flex-direction: column; gap: 2px; z-index: 100;
  box-shadow: 0 3px 8px rgba(0,0,0,0.6);
}
#telegraph-panel div { font-family: sans-serif; font-size: 10px; font-weight: bold; text-align: center; color: #444; padding: 2px 0; }
#telegraph-panel div.on { text-shadow: 0 0 4px rgba(255,255,255,0.5); }
#tg-fwd-full.on, #tg-fwd-half.on, #tg-fwd-slow.on, #tg-fwd-dead.on { color: #28a745; }
#tg-stop { margin: 2px 0; border-radius: 2px; }
#tg-stop.on { color: #fff; background-color: #777; }
#tg-rev-dead.on, #tg-rev-slow.on, #tg-rev-half.on, #tg-rev-full.on { color: #dc3545; }

#time-scale-btn {
  position: absolute; top: 15px; right: 15px;
  background-color: #455a64; color: #fff; font-family: sans-serif;
  font-size: 14px; border: 1px solid #222; padding: 6px 12px;
  border-radius: 4px; cursor: pointer; z-index: 100;
}

#comp-c { display: none !important; }
#night-ov, #wx-ov, #rain-cv { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
#ptst { position: absolute; top: 160px; left: 50%; transform: translateX(-50%); background: rgba(200, 20, 20, 0.85); color: #fff; padding: 10px 20px; border-radius: 4px; opacity: 0; transition: opacity 0.3s; z-index: 200;}
#ptst.on { opacity: 1; }

#tcu { position: absolute; bottom: 20px; left: 0; width: 100%; display: flex; justify-content: space-between; padding: 0 20px; box-sizing: border-box; z-index: 100; pointer-events: none; }
#tcl, #tcr { pointer-events: auto; }
#joy { width: 120px; height: 120px; background: rgba(255,255,255,0.1); border-radius: 50%; position: relative; border: 2px solid rgba(255,255,255,0.3); }
#jknob { width: 40px; height: 40px; background: rgba(255,255,255,0.5); border-radius: 50%; position: absolute; top: 40px; left: 40px; }
.teb { display: block; margin: 8px 0; padding: 12px; background: rgba(0,0,0,0.5); color: #fff; border: 1px solid #555; border-radius: 4px; font-weight: bold;}
@media (hover: hover) and (pointer: fine) { #tcu { display: none; } }

/* ============================================================
   2. メニュー・リザルト画面 (★ローディングの背景を透明グラスに変更)
============================================================ */
#loading {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 5, 10, 0.4);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  z-index: 9999; transition: opacity 0.8s ease;
}
#loading.h { opacity: 0; pointer-events: none; }
.ld-t { font-size: 24px; letter-spacing: 10px; margin-bottom: 5px; color: var(--accent-cyan); }
.ld-s { font-size: 14px; letter-spacing: 4px; margin-bottom: 30px; color: var(--text-sub); }
.ld-bw { width: 300px; height: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
#ldb { width: 0%; height: 100%; background: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan); transition: width 0.3s ease; }

#ms-sel {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 5, 10, 0.4);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; flex-direction: column; padding: 40px 60px; box-sizing: border-box; z-index: 1000;
  transition: opacity 0.5s ease;
}
#ms-sel.h { opacity: 0; pointer-events: none; }

.menu-header { font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 300; letter-spacing: 8px; color: #fff; margin-bottom: 5px; }
.ms-t { display: none; } 
.ms-s { font-size: 12px; color: var(--accent-cyan); letter-spacing: 4px; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 20px; margin-bottom: 20px; }

#ms-stat { display: flex; gap: 40px; margin-bottom: 30px; font-size: 12px; letter-spacing: 2px; color: var(--text-sub); }
.ss-v { font-weight: 500; color: #fff; font-size: 18px; margin-right: 10px; color: var(--accent-cyan);}

.ms-body { overflow-y: auto; padding-right: 10px; }
.ms-body::-webkit-scrollbar { width: 6px; }
.ms-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
.ms-rank { font-size: 14px; font-weight: bold; margin: 30px 0 15px 0; color: #fff; border-left: 3px solid var(--accent-cyan); padding-left: 10px; }
.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

.mc {
  background: var(--navy-base); border: var(--glass-border); padding: 20px; border-radius: 4px;
  cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.mc:hover {
  background: var(--navy-dark); border: 1px solid var(--accent-cyan); transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 212, 255, 0.2);
}
.mc-n { font-family: 'Montserrat', sans-serif; font-size: 11px; color: var(--accent-cyan); letter-spacing: 2px; margin-bottom: 8px; }
.mc-ti { font-size: 18px; font-weight: 500; margin-bottom: 6px; }
.mc-ar { font-size: 11px; color: var(--text-sub); margin-bottom: 15px; }
.mc-df { font-size: 10px; letter-spacing: 3px; margin-bottom: 8px; }
.mc-ds { font-size: 12px; color: #ddd; line-height: 1.5; }
.mc-st { position: absolute; top: 20px; right: 20px; color: #ffcc00; font-size: 14px; letter-spacing: 2px; }
.mc-sc { position: absolute; bottom: 20px; right: 20px; font-family: 'Montserrat', sans-serif; font-size: 10px; color: var(--accent-cyan); }

#dr, #go {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 5, 10, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  z-index: 8000; opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
#dr.v, #go.v { opacity: 1; pointer-events: auto; }

#drh, #drb, #gob {
  background: var(--navy-dark); border: var(--glass-border); border-top: 4px solid var(--accent-cyan);
  padding: 30px 40px; border-radius: 8px; width: 400px; box-shadow: 0 20px 50px rgba(0,0,0,0.8); margin-bottom: 15px;
}
#drh { display: flex; justify-content: space-between; align-items: center; }

.drt, .got { font-family: 'Montserrat', sans-serif; font-size: 12px; color: var(--text-sub); letter-spacing: 3px; margin-bottom: 10px; }
.drm, .gos { font-size: 26px; font-weight: 700; letter-spacing: 4px; margin-bottom: 10px; }
#drm.col, .gos { color: #ff3333; }
.drs { color: #ffcc00; font-size: 20px; letter-spacing: 4px; }
#drsn { font-family: 'Montserrat', sans-serif; font-size: 36px; font-weight: 300; color: var(--accent-cyan); text-align: right; }
.drsl { font-size: 9px; color: var(--text-sub); text-align: right; }

#drrc { display: flex; justify-content: center; margin-bottom: 20px; }
.drih { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; color: #ddd; }
.dribw { width: 100%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; margin-bottom: 15px;}
.drib { height: 100%; width: 0%; transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1); }

#drf, .gobt { display: flex; gap: 20px; width: 480px; }
.drb, .gbtn {
  flex: 1; padding: 15px 0; background: var(--navy-base); border: var(--glass-border);
  color: #fff; font-size: 12px; letter-spacing: 2px; cursor: pointer; border-radius: 4px; transition: all 0.3s;
}
.drb:hover, .gbtn:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.drb:last-child, .gbtn.p { background: var(--accent-cyan); border-color: var(--accent-cyan); color: #000; font-weight: bold; }
.drb:last-child:hover, .gbtn.p:hover { background: #33e0ff; box-shadow: 0 0 15px rgba(0, 212, 255, 0.4); }
/* ============================================================
   モード選択ボタンのデザイン追加
============================================================ */
.mode-container {
  display: flex; gap: 40px; margin-top: 40px; justify-content: center;
  transition: opacity 0.4s ease;
}
.mode-btn {
  flex: 1; max-width: 400px; padding: 50px 20px;
  background: var(--navy-base); border: var(--glass-border);
  border-radius: 8px; cursor: pointer; transition: all 0.3s;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.mode-btn:hover {
  background: var(--navy-dark); border-color: var(--accent-cyan);
  transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 212, 255, 0.2);
}
.mode-title {
  font-family: 'Montserrat', sans-serif; font-size: 36px; font-weight: 300;
  color: #fff; letter-spacing: 10px; margin-bottom: 15px;
}
.mode-desc { font-size: 12px; color: var(--text-sub); letter-spacing: 2px;}

.back-btn {
  background: transparent; border: 1px solid var(--text-sub); color: #fff;
  padding: 8px 20px; cursor: pointer; margin-bottom: 20px; transition: 0.3s;
  border-radius: 4px; font-family: 'Montserrat', sans-serif; letter-spacing: 2px;
}
.back-btn:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

#mission-list-container {
  margin-top: 20px; transition: opacity 0.4s ease;
}