/* 寸法は Godot 版の 720x1280 キャンバス単位で書き、--u（1 単位あたりの px）で拡縮する */
:root {
  --u: 0.5px;
  --bg: rgb(191, 217, 184);           /* 薄緑 Color(0.75, 0.85, 0.72) */
  --btn: rgba(26, 26, 26, 0.6);
  --btn-hover: rgba(57, 57, 57, 0.6);
  --btn-press: rgba(0, 0, 0, 0.6);
  --btn-text: rgb(223, 223, 223);
  --panel: rgba(26, 26, 26, 0.6);
  --ctrl: rgba(26, 26, 26, 0.6);
  --inset-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  user-select: none; -webkit-user-select: none;
  overscroll-behavior: none;
}

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { position: absolute; }

/* ---- 反転数ラベル（Label3D 相当） ---- */
.count-label {
  position: absolute; left: 0; top: 0;
  color: #fff; font-weight: 400; line-height: 1;
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.85);
  paint-order: stroke fill;
  white-space: nowrap; will-change: transform;
}
.count-label.best { color: rgb(255, 224, 102); }
.count-label.focus { color: rgb(255, 242, 217); }

/* ---- 文字（白・黒縁） ---- */
.lbl {
  font-size: calc(var(--u) * var(--fs, 20));
  color: rgb(247, 252, 247);
  text-shadow:
    calc(var(--u) * 2) 0 calc(var(--u) * 2) rgba(0,0,0,.85), calc(var(--u) * -2) 0 calc(var(--u) * 2) rgba(0,0,0,.85),
    0 calc(var(--u) * 2) calc(var(--u) * 2) rgba(0,0,0,.85), 0 calc(var(--u) * -2) calc(var(--u) * 2) rgba(0,0,0,.85),
    0 0 calc(var(--u) * 3) rgba(0,0,0,.85);
  white-space: pre-wrap;
  line-height: 1.35;
}

/* ---- 手番色の枠 ---- */
.frame { background: transparent; }
.frame.top { left: 0; right: 0; top: 0; height: calc(var(--u) * 10); }
.frame.bottom { left: 0; right: 0; bottom: 0; height: calc(var(--u) * 10); }
.frame.left { top: 0; bottom: 0; left: 0; width: calc(var(--u) * 10); }
.frame.right { top: 0; bottom: 0; right: 0; width: calc(var(--u) * 10); }

#top-strip { left: 0; right: 0; top: 0; height: calc(var(--u) * 168); background: rgba(13, 23, 15, 0.42); }

/* ---- HUD ---- */
#hud { inset: 0; }
#hud-top { position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); top: calc(var(--u) * 14); }
#hud-top .lbl { white-space: pre; line-height: 1.3; }

.center-top {
  left: 50%; width: calc(var(--u) * 520); margin-left: calc(var(--u) * -260);
  text-align: center; white-space: pre;
}
#cpu-banner { top: calc(var(--u) * 178); }
#toast { top: calc(var(--u) * 220); opacity: 0; visibility: hidden; }

#bottom-bar {
  position: absolute; left: calc(var(--u) * 8); right: calc(var(--u) * 8);
  bottom: calc(var(--u) * 18 + var(--inset-bottom));
  display: flex; flex-direction: column; gap: calc(var(--u) * 8);
}
.hud-row { display: flex; gap: calc(var(--u) * 8); }
.hud-row .btn { flex: 1 1 0; min-width: 0; }

/* ---- ボタン（Godot 既定テーマ風） ---- */
.btn {
  pointer-events: auto;
  font: inherit; color: var(--btn-text);
  background: var(--btn); border: none; border-radius: 3px;
  font-size: calc(var(--u) * 20);
  min-height: calc(var(--u) * 48); padding: 0 calc(var(--u) * 8);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: clip;
  touch-action: manipulation;
}
@media (hover: hover) { .btn:hover:not(:disabled) { background: var(--btn-hover); color: #f0f0f0; } }
.btn:active:not(:disabled) { background: var(--btn-press); }
.btn:disabled { color: rgba(223, 223, 223, 0.5); cursor: default; }

.hud-btn { height: calc(var(--u) * 78); min-height: 0; font-size: calc(var(--u) * 24); }
#confirm-btn { height: calc(var(--u) * 104); font-size: calc(var(--u) * 30); }

/* ---- 手番受け渡し ---- */
#handoff { inset: 0; background: rgba(15, 26, 18, 0.98); pointer-events: auto; cursor: pointer; }
#handoff-accent {
  position: absolute; left: 50%; width: calc(var(--u) * 140); margin-left: calc(var(--u) * -70);
  top: calc(var(--u) * 200); height: calc(var(--u) * 14);
}
#handoff-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; }

/* ---- パネル ---- */
.panel { background: var(--panel); border-radius: 3px; }

#menu { inset: 0; pointer-events: auto; }
.menu-scroll {
  position: absolute; inset: calc(var(--u) * 12) calc(var(--u) * 16);
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
}
.menu-panel {
  /* 横長の画面で間延びしないよう幅に上限を設けて中央寄せ */
  margin: auto;
  width: 100%; max-width: calc(var(--u) * 640);
  box-sizing: border-box;
  padding: calc(var(--u) * 28);
  display: flex; flex-direction: column; gap: calc(var(--u) * 14);
}
.title { --fs: 44; text-align: center; }
.menu-btn { height: calc(var(--u) * 72); font-size: calc(var(--u) * 30); }
.start-btn { height: calc(var(--u) * 84); font-size: calc(var(--u) * 34); }

.row { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.row > .lbl { --fs: 27; min-width: calc(var(--u) * 150); white-space: nowrap; }
#seat-box { display: flex; flex-direction: column; gap: calc(var(--u) * 10); }

select {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: calc(var(--u) * 26);
  height: calc(var(--u) * 52);
  color: var(--btn-text); background: var(--ctrl);
  border: none; border-radius: 3px;
  padding: 0 calc(var(--u) * 36) 0 calc(var(--u) * 10);
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #bbb 50%), linear-gradient(135deg, #bbb 50%, transparent 50%);
  background-position: calc(100% - calc(var(--u) * 20)) 55%, calc(100% - calc(var(--u) * 13)) 55%;
  background-size: calc(var(--u) * 7) calc(var(--u) * 7);
  background-repeat: no-repeat;
  cursor: pointer;
}
select:disabled { color: rgba(223, 223, 223, 0.4); background-color: rgba(60, 60, 60, 0.5); cursor: default; }
select option { background: #2b2f2b; color: #eee; }

/* CheckButton 風スイッチ */
.checks { display: flex; flex-direction: column; gap: calc(var(--u) * 6); }
.check {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--u) * 6); min-height: calc(var(--u) * 62);
  padding: 0 calc(var(--u) * 8); cursor: pointer;
}
.check .lbl { --fs: 26; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check i {
  position: relative; flex: none;
  width: calc(var(--u) * 78); height: calc(var(--u) * 44);
  border-radius: calc(var(--u) * 22);
  background: rgb(200, 200, 200); transition: background .15s;
}
.check i::after {
  content: ""; position: absolute; top: calc(var(--u) * 6); left: calc(var(--u) * 6);
  width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-radius: 50%;
  background: rgb(110, 110, 110); transition: left .15s, background .15s;
}
.check input:checked + i { background: rgb(225, 225, 225); }
.check input:checked + i::after { left: calc(var(--u) * 40); background: rgb(26, 26, 26); }
.sound-row { display: flex; gap: calc(var(--u) * 24); }
.sound-row .check { justify-content: flex-start; }

/* ---- ダイアログ（降参確認・結果） ---- */
.dialog {
  inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 18, 13, 0.85); pointer-events: auto;
}
.panel.small {
  min-width: calc(var(--u) * 380); max-width: calc(100% - 24px);
  padding: calc(var(--u) * 20);
  display: flex; flex-direction: column; gap: calc(var(--u) * 10);
}
.dlg-btn { height: calc(var(--u) * 64); font-size: calc(var(--u) * 22); }
.res-btn { font-size: calc(var(--u) * 20); }

/* 対局中にトップへ戻るボタン（右上） */
#back-btn {
  position: absolute; right: calc(var(--u) * 16); top: calc(var(--u) * 14);
  width: calc(var(--u) * 134); height: calc(var(--u) * 78);
  min-height: 0; font-size: calc(var(--u) * 24);
}

/* 音量スライダー */
input[type="range"] {
  flex: 1 1 auto; min-width: 0; height: calc(var(--u) * 52); margin: 0;
  accent-color: rgb(225, 225, 225); cursor: pointer;
}