:root {
  --bg: #0b0f1a;
  --panel: rgba(18, 24, 40, 0.82);
  --border: rgba(140, 170, 255, 0.18);
  --text: #e8ecf8;
  --muted: #8b95b2;
  --accent: #5ad1ff;
  --accent-2: #ffcf5a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(ellipse at 50% 30%, #1b2440 0%, var(--bg) 70%);
  color: var(--text);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; touch-action: none; cursor: grab; }
#stage:active { cursor: grabbing; }
#stage canvas { display: block; }

.panel {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  backdrop-filter: blur(6px);
}

#hud { left: calc(16px + env(safe-area-inset-left)); width: 180px; }
#board { right: calc(16px + env(safe-area-inset-right)); width: 260px; max-height: calc(100% - 32px - env(safe-area-inset-top)); overflow: auto; }

h1, h2 { margin: 0 0 10px; letter-spacing: 0.08em; }
#hud h1 { font-size: 18px; color: var(--accent); }
h2 { font-size: 15px; }

.stats { margin: 0; display: grid; gap: 6px; }
.stats div { display: flex; justify-content: space-between; align-items: baseline; }
.stats dt { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }
.stats dd { margin: 0; font-size: 20px; font-variant-numeric: tabular-nums; font-weight: 700; }

.label { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; margin: 12px 0 4px; }
#next { width: 148px; height: 110px; }

#topmap { display: block; width: 148px; height: 148px; }
#depth { display: flex; flex-direction: column-reverse; gap: 2px; width: 100%; }
#depth span { position: relative; height: 9px; border-radius: 2px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
#depth i { display: block; height: 100%; width: 0; transition: width 0.2s; }
#depth span.near { outline: 1px solid #fff; animation: near 0.8s ease-in-out infinite alternate; }
#depth span[data-left]::after {
  content: attr(data-left);
  position: absolute; right: 3px; top: -1px;
  font-size: 9px; line-height: 11px; color: rgba(255, 255, 255, 0.7);
}
@keyframes near { from { opacity: 0.6; } to { opacity: 1; } }

.ranking-list { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.ranking-list li {
  display: grid;
  grid-template-columns: 26px 1fr auto 26px;
  align-items: center;
  gap: 6px;
  padding: 5px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 14px;
}
.ranking-list li .r { color: var(--muted); font-variant-numeric: tabular-nums; }
.ranking-list li.rank-1 .r { color: #ffd65a; }
.ranking-list li.rank-2 .r { color: #cfd8e8; }
.ranking-list li.rank-3 .r { color: #e3a26b; }
.ranking-list li .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.ranking-list li .s { font-variant-numeric: tabular-nums; font-weight: 600; }
.ranking-list li.me { background: rgba(90, 209, 255, 0.15); border-radius: 6px; }
.ranking-list li.muted { display: block; }
.entry-btn { padding: 0; height: 22px; line-height: 1; color: var(--muted); background: none; border: none; }
.entry-btn:hover { color: var(--text); }

/* 文中のリンク風ボタン */
.link-btn { padding: 0; border: none; background: none; color: var(--accent); text-decoration: underline; font-size: inherit; }
.link-btn:hover { background: none; }

/* ランキングの全体表示と通報メニュー（ゲームのカードより手前に出す） */
.dialog { z-index: 20; background: rgba(5, 8, 16, 0.88); }
.dialog .card { background: #121828; }
#entry-menu { z-index: 30; }
#ranking-dialog .ranking-list { margin: 12px 0 10px; }
#ranking-dialog .ranking-list li { padding: 8px 4px; font-size: 15px; }
#ranking-dialog .entry-btn { height: 32px; font-size: 18px; }
#entry-name { overflow-wrap: anywhere; }

.agree { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; }
.agree input { flex: none; width: auto; margin: 0; }
.card .agree a { color: var(--accent); }

.help { margin-top: 14px; font-size: 12px; color: var(--muted); }
.help summary { cursor: pointer; margin-bottom: 6px; }
.help table { border-collapse: collapse; width: 100%; }
.help td { padding: 3px 0; vertical-align: middle; }
.help td:first-child { white-space: nowrap; padding-right: 8px; }
kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  margin-right: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom-width: 2px;
  border-radius: 4px;
  font: 11px ui-monospace, monospace;
  color: var(--text);
  text-align: center;
}

.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 8, 16, 0.6);
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow: auto;
}
.overlay.hidden { display: none; }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 28px 22px;
  text-align: center;
  width: min(380px, 100%);
  margin: auto;
}
.card h1 { font-size: 30px; color: var(--accent); }
.card p { line-height: 1.6; }
.card a { color: var(--muted); }
.final { font-size: 36px; font-weight: 800; color: var(--accent-2); margin: 4px 0; }

.share { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.share-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 96px;
  padding: 8px 4px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
}
.card a.share-btn { color: #fff; text-decoration: none; border-radius: 8px; border: 1px solid transparent; }
.share-btn.line { background: #06c755; }
.share-btn.x { background: #000; border-color: rgba(255, 255, 255, 0.35); }
#share-msg { min-height: 1.6em; margin: 6px 0 0; }
#share-msg.ok { color: #69db7c; }
.yt { margin: 14px 0 0; }
.yt-mark { color: #ff4e45; }
.card .yt a { color: var(--accent); }

button {
  font: inherit;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
}
button:hover { background: rgba(255, 255, 255, 0.14); }
button:disabled { opacity: 0.5; cursor: default; }
button.primary { background: var(--accent); color: #04121c; border: none; font-weight: 700; }
button.primary:hover { filter: brightness(1.1); }
#start-btn { font-size: 18px; padding: 12px 40px; }

.tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.tabs button { flex: 1; padding: 4px 0; font-size: 12px; }
.tabs button.active { background: var(--accent); color: #04121c; border-color: transparent; font-weight: 700; }

.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.modes button { display: grid; gap: 2px; padding: 10px 0; }
.modes b { font-size: 18px; }
.modes span { font-size: 11px; color: var(--muted); }
.modes button.active { border-color: var(--accent); background: rgba(90, 209, 255, 0.18); box-shadow: 0 0 0 1px var(--accent) inset; }
.card .label { margin-top: 0; }
.row.center { justify-content: center; }

#submit-form { margin: 16px 0; text-align: left; }
#submit-form label { font-size: 12px; color: var(--muted); }
.row { display: flex; gap: 8px; margin-top: 6px; }
input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--text);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  -webkit-user-select: text;
  user-select: text;
}
#submit-msg { min-height: 1.2em; margin: 6px 0 0; }
#submit-msg.ok { color: #7be08a; }
#submit-msg.err, .err { color: #ff7b7b; }

/* 広い画面ではゲームオーバー中もランキングのタブを操作できるようにする */
/* 操作チュートリアル */
#tutorial {
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, calc(100% - 32px));
  z-index: 3;
  border-color: rgba(90, 209, 255, 0.5);
}
#tutorial h2 { color: var(--accent); margin-bottom: 6px; }
#tutorial p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; }
.tut-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }
.tut-head .link-btn { color: var(--muted); }
#tut-goals { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
#tut-goals li {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: background 0.2s, color 0.2s;
}
#tut-goals li::before { content: "○ "; }
#tut-goals li.done { background: rgba(123, 224, 138, 0.18); border-color: #7be08a; color: #7be08a; }
#tut-goals li.done::before { content: "✓ "; }
#tut-next { margin-top: 10px; width: 100%; }
#tutorial.complete { animation: tut-pop 0.3s ease-out; }
@keyframes tut-pop { from { transform: translateX(-50%) scale(0.95); } to { transform: translateX(-50%) scale(1); } }
/* そのステップで使うパッドを光らせる */
.tut-hint { box-shadow: 0 0 0 3px var(--accent); animation: near 0.8s ease-in-out infinite alternate; }

@media (min-width: 761px) {
  #board { z-index: 2; }
}

/* タッチ操作 */
#touch, .touch-only { display: none; }

/* 表示の切り替えは .touch-only / .key-help の側で行う（ここで display を指定すると PC でもタッチの説明が出てしまう） */
.touch-help {
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 0 0 14px;
  text-align: left;
  font-size: 12px;
  line-height: 1.45;
}
.touch-help dt { font-weight: 700; color: var(--accent); white-space: nowrap; }
.touch-help dd { margin: 0; color: var(--text); }
.key-help { display: grid; }
.key-help dt { color: var(--text); font-weight: 400; }

@media (pointer: coarse), (max-width: 760px) {
  .mouse-only { display: none; }
  .touch-only { display: grid; }
  #touch {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px calc(12px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none;
  }
  #touch button, .pad-circle {
    pointer-events: auto;
    touch-action: none;
  }
  #touch button {
    padding: 0;
    border-radius: 50%;
    background: rgba(30, 40, 70, 0.75);
  }
  #touch button:active { background: rgba(90, 209, 255, 0.45); }
  .side { display: flex; flex-direction: column; gap: 8px; }
  .side.left { align-items: flex-start; }
  .side.right { align-items: flex-end; }
  #touch .small-btn { width: 44px; height: 44px; font-size: 18px; }

  /* 移動パッド（左）と回転パッド（右） */
  .pad-circle {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: rgba(232, 236, 248, 0.55);
    text-align: center;
  }
  /* 左右のパッドは同じ大きさ */
  .pad-circle { width: min(176px, 44vw); height: min(176px, 44vw); }
  #movepad {
    background: radial-gradient(circle, rgba(90, 209, 255, 0.16), rgba(90, 209, 255, 0.06) 70%);
    border-color: rgba(90, 209, 255, 0.35);
  }
  /* 回転パッド: 外周リングの左右半分が水平回転のボタン、内側の円がスワイプ */
  #rotpad {
    background: rgba(199, 125, 255, 0.10);
    border-color: rgba(199, 125, 255, 0.45);
    overflow: hidden;
  }
  #rotpad .ring-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    display: flex;
    align-items: center;
    font-size: 26px;
    color: #e3c6ff;
    pointer-events: none;
  }
  #rotpad .ring-btn.l { left: 0; justify-content: flex-start; padding-left: 7%; border-right: 1px solid rgba(199, 125, 255, 0.35); }
  #rotpad .ring-btn.r { right: 0; justify-content: flex-end; padding-right: 7%; }
  #rotpad .ring-btn.on { background: rgba(199, 125, 255, 0.35); }
  #rotpad .core {
    position: absolute;
    inset: 22%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, #2a2346, #1d1a35 75%);
    border: 1px solid rgba(199, 125, 255, 0.5);
    pointer-events: none;
  }
  #rotpad .core.kick { animation: kick 0.18s ease-out; }
  .pad-icon { font-size: 22px; line-height: 1.1; pointer-events: none; }
  .pad-label { font-size: 10px; line-height: 1.35; letter-spacing: 0.04em; margin-top: 2px; pointer-events: none; }
  .pad-circle.kick { animation: kick 0.18s ease-out; }
  @keyframes kick {
    from { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 18px rgba(90, 209, 255, 0.5); }
    to { box-shadow: none; }
  }
}

@media (max-width: 760px) {
  .panel { padding: 8px 10px; border-radius: 10px; }
  #hud { top: calc(8px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); width: auto; display: flex; gap: 6px; align-items: flex-start; }
  #hud h1, .depth, .next .label, .map .label { display: none; }
  #topmap { width: 56px; height: 56px; }
  .stats { gap: 2px; }
  .stats dt { font-size: 9px; }
  .stats dd { font-size: 13px; }
  .stats div { gap: 6px; }
  #next { width: 50px; height: 50px; }
  #board { top: calc(8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); width: 140px; max-height: 40%; }
  .tabs button { font-size: 10px; padding: 3px 0; }
  #board h2 { font-size: 12px; }
  #ranking li { font-size: 11px; grid-template-columns: 18px 1fr auto; padding: 3px 2px; }
  /* プレイ中に右上の小さなランキングを誤って押さないよう、通報・非表示は全体表示からだけ行う */
  #ranking .entry-btn, #ranking li > span:last-child:empty, #board .blocked-note { display: none; }
  .help { display: none; }
  /* 上は HUD・ランキング、下はパッドがあるので、その間に置く（パッド + ↓/Ⅱ ボタン + 余白の高さ分だけ上げる） */
  #tutorial { top: auto; bottom: calc(min(176px, 44vw) + 76px + env(safe-area-inset-bottom)); }
}

/* 一時停止メニュー */
.menu { display: grid; gap: 10px; margin-top: 6px; }
.menu button { padding: 12px 16px; }