:root {
  color-scheme: dark;
  --bg: #080b17;
  --panel: rgba(8, 12, 28, 0.88);
  --line: rgba(137, 230, 255, 0.28);
  --cyan: #72e7ff;
  --cyan-strong: #16c9ef;
  --text: #f4fbff;
  --muted: #a7bac5;
  --danger: #ff5478;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
body { font-family: Inter, "Noto Sans JP", system-ui, -apple-system, sans-serif; color: var(--text); }
button, summary { font: inherit; }
button { color: inherit; }

#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.panel {
  position: fixed;
  z-index: 20;
  left: 50%;
  top: 50%;
  width: min(92vw, 680px);
  max-height: 92vh;
  overflow: auto;
  transform: translate(-50%, -46%) scale(.97);
  opacity: 0;
  pointer-events: none;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(12, 18, 43, .94), rgba(5, 8, 20, .94));
  box-shadow: 0 30px 100px rgba(0, 0, 0, .55), inset 0 0 60px rgba(54, 210, 255, .05);
  backdrop-filter: blur(20px);
  transition: opacity .25s ease, transform .25s ease;
}
.panel.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

.eyebrow { margin: 0 0 8px; color: var(--cyan); font-size: .78rem; font-weight: 800; letter-spacing: .24em; }
h1, h2 { margin: 0; letter-spacing: -.04em; }
h1 { font-size: clamp(2.7rem, 8vw, 5rem); line-height: .95; }
h2 { font-size: clamp(2rem, 6vw, 3.5rem); }
.lead { max-width: 560px; margin: 18px 0 26px; color: #d6e7ef; line-height: 1.75; }

.difficulty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.difficulty-button {
  min-height: 78px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.difficulty-button:hover { transform: translateY(-2px); border-color: rgba(114,231,255,.5); }
.difficulty-button.selected { border-color: var(--cyan); background: rgba(22,201,239,.13); box-shadow: inset 0 0 26px rgba(22,201,239,.08); }
.difficulty-button strong, .difficulty-button span { display: block; }
.difficulty-button span { margin-top: 4px; color: var(--muted); font-size: .77rem; }

.actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.primary, #VRButton {
  min-height: 48px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--cyan-strong) !important;
  color: #001319 !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  cursor: pointer !important;
  opacity: 1 !important;
}
#VRButton {
  position: static !important;
  width: auto !important;
  margin: 20px 0 0 !important;
  font-family: inherit !important;
  z-index: 25 !important;
}
.primary:hover, #VRButton:hover { filter: brightness(1.1); }
.status { color: var(--muted); font-size: .83rem; }
details { border-top: 1px solid rgba(255,255,255,.1); margin-top: 20px; padding-top: 16px; }
summary { cursor: pointer; color: #d9f7ff; }
.instructions { color: var(--muted); font-size: .86rem; line-height: 1.65; }

.hud-panel {
  position: fixed;
  z-index: 8;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(12px, 3vw, 34px);
  padding: 10px 18px;
  border: 1px solid rgba(114,231,255,.18);
  border-radius: 999px;
  background: rgba(4,8,20,.68);
  backdrop-filter: blur(14px);
  pointer-events: none;
}
.hud-panel div { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.hud-panel .label { color: var(--muted); font-size: .62rem; letter-spacing: .14em; }
.hud-panel strong { font-variant-numeric: tabular-nums; font-size: .94rem; }

.message-panel {
  position: fixed;
  z-index: 9;
  left: 50%;
  bottom: 68px;
  min-width: min(88vw, 440px);
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
#state-label { display: inline-block; margin-bottom: 6px; padding: 4px 10px; border: 1px solid rgba(114,231,255,.45); border-radius: 999px; color: var(--cyan); font-size: .68rem; font-weight: 800; letter-spacing: .18em; }
#state-message { display: block; font-size: clamp(1.2rem, 3.6vw, 2rem); }
#state-submessage { display: block; margin-top: 5px; color: #c2d5dd; font-size: .83rem; }

#desktop-help {
  position: fixed;
  z-index: 8;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: none;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
  width: min(94vw, 720px);
  pointer-events: none;
}
#desktop-help.visible { display: flex; }
#desktop-help span { padding: 5px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(4,8,20,.7); color: var(--muted); font-size: .7rem; }

.result-score { display: flex; align-items: end; justify-content: space-between; margin: 30px 0 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.result-score span { color: var(--muted); }
.result-score strong { color: var(--cyan); font-size: clamp(2.5rem, 8vw, 5rem); line-height: .8; }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
.result-grid div { padding: 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(255,255,255,.025); }
.result-grid span, .result-grid strong { display: block; }
.result-grid span { color: var(--muted); font-size: .75rem; }
.result-grid strong { margin-top: 6px; font-size: 1.5rem; }

body.warning { animation: dangerPulse .75s infinite alternate; }
@keyframes dangerPulse { from { box-shadow: inset 0 0 0 rgba(255,84,120,0); } to { box-shadow: inset 0 0 100px rgba(255,84,120,.13); } }

@media (max-width: 600px) {
  .difficulty { grid-template-columns: 1fr; }
  .difficulty-button { min-height: 58px; }
  .hud-panel { width: calc(100% - 16px); justify-content: space-around; gap: 3px; padding: 8px 7px; }
  .hud-panel .label { display: none; }
  .hud-panel strong { font-size: .78rem; }
  .result-grid { grid-template-columns: 1fr; }
}