/* ==========================================================================
   BLOCKS — スタイル
   色は「むらさき(先手) / オレンジ(後手)」の 2 色だけに絞り、
   それ以外は無彩色で組み立てて盤面が主役になるようにしている。
   ========================================================================== */

:root {
  --bg: #FAFAFB;
  --surface: #FFFFFF;
  --surface-2: #F3F4F7;
  --ink: #1B1D22;
  --mist: #868C97;
  --line: #E4E6EB;
  --cell: #EDEEF2;

  /* 席ごとの色。実際の値は palette.js が対局開始時に入れる（ここは初期値） */
  --p1: 124 58 237;  --p1-hi: 167 139 250;  --p1-dp: 91 33 182;
  --p2: 234 88 12;   --p2-hi: 251 146 60;   --p2-dp: 154 52 18;
  --p3: 37 99 235;   --p3-hi: 96 165 250;   --p3-dp: 30 64 175;
  --p4: 22 163 74;   --p4-hi: 74 222 128;   --p4-dp: 21 105 47;
  --bad: 217 65 65;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .05);
  --shadow-2: 0 8px 28px rgb(0 0 0 / .12);
  --tap: 44px;
  --panel-pad: 4px;
  --near-min: 18px;
  --far-min: 4px;
  --near-safe-pad: 8px;
  --far-safe-pad: 4px;
  --trackpad-min: 34px;
  --ctl-w: 66px;       /* ✕ と「置く」の幅。左右で同じ大きさに見せる */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1114;
    --surface: #191C21;
    --surface-2: #23272E;
    --ink: #E9EAEE;
    --mist: #8B919C;
    --line: #2A2F37;
    --cell: #23272E;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-2: 0 8px 28px rgb(0 0 0 / .5);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; height: 100dvh; overscroll-behavior: none; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* --------------------------------------------------------------------------
   駒の色。
   席番号のクラスが「その席の色」を --c に写し、実際に塗るのは共通の 1 か所だけ。
   こうしておくと人数が増えても塗り方の記述は増えない。
   -------------------------------------------------------------------------- */
.seat-1, .cell.p1 { --c: var(--p1); --c-hi: var(--p1-hi); --c-dp: var(--p1-dp); }
.seat-2, .cell.p2 { --c: var(--p2); --c-hi: var(--p2-hi); --c-dp: var(--p2-dp); }
.seat-3, .cell.p3 { --c: var(--p3); --c-hi: var(--p3-hi); --c-dp: var(--p3-dp); }
.seat-4, .cell.p4 { --c: var(--p4); --c-hi: var(--p4-hi); --c-dp: var(--p4-dp); }

.fill {
  background: linear-gradient(158deg, rgb(var(--c-hi) / .95), rgb(var(--c) / .95) 58%, rgb(var(--c-dp) / .97));
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .5);
}

.chip {
  display: block; width: 12px; height: 12px; border-radius: 3px; flex: none;
  background: linear-gradient(158deg, rgb(var(--c-hi)), rgb(var(--c-dp)));
}

/* --------------------------------------------------------------------------
   画面切り替え
   -------------------------------------------------------------------------- */
.screen { display: none; flex: 1; min-height: 0; flex-direction: column; }
.screen.is-active { display: flex; }

/* --------------------------------------------------------------------------
   共通パーツ
   -------------------------------------------------------------------------- */
.btn {
  width: min(320px, 84vw);
  min-height: var(--tap);
  padding: 14px 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--shadow-1);
  transition: transform .08s ease, opacity .12s ease;
}
.btn:active { transform: scale(.985); opacity: .8; }
.btn:disabled { opacity: .4; cursor: default; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.link-btn {
  min-height: var(--tap);
  padding: 10px 16px;
  color: var(--mist);
  font-size: 13px;
  font-weight: 500;
}
.link-btn:active { opacity: .6; }

.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface-2);
}
.segmented button {
  flex: 1;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mist);
  transition: background .12s ease, color .12s ease;
}
.segmented button.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

.error { color: rgb(var(--bad)); font-size: 13px; min-height: 20px; text-align: center; }


/* --------------------------------------------------------------------------
   ホーム
   -------------------------------------------------------------------------- */
.home-inner, .setup-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  text-align: center;
}

.logo { display: flex; gap: 3px; margin-bottom: 20px; }
.logo .chip { width: 18px; height: 18px; border-radius: 4px; }
.logo .chip:last-child { transform: translate(-3px, 15px); }

.wordmark {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .38em;
  text-indent: .38em;
}
.tagline { font-size: 12px; color: var(--mist); margin-bottom: 28px; }

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

/* --------------------------------------------------------------------------
   設定・待機
   -------------------------------------------------------------------------- */
.setup-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.setup-note {
  font-size: 12.5px;
  color: var(--mist);
  line-height: 1.9;
  max-width: 300px;
}
.field { width: min(320px, 84vw); text-align: left; margin-bottom: 8px; }
.field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--mist);
  margin-bottom: 8px;
  padding-left: 2px;
}
.setup-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 16px; }

.seat-count { font-size: 13px; font-weight: 600; color: var(--ink); }
.seat-count[hidden] { display: none; }

.waiting-dots { display: flex; gap: 7px; margin: 8px 0 20px; }
/* クラス側で display を指定しているので、hidden も明示しないと効かない */
.waiting-dots[hidden] { display: none; }
.waiting-dots i {
  width: 9px; height: 9px; border-radius: 2.5px;
  background: var(--mist);
  animation: blink 1.5s infinite;
}
.waiting-dots i:nth-child(2) { animation-delay: .22s; }
.waiting-dots i:nth-child(3) { animation-delay: .44s; }
@keyframes blink { 0%, 100% { opacity: .22; } 50% { opacity: 1; } }

.url-field {
  width: min(320px, 84vw);
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  text-align: center;
}
.url-field[hidden] { display: none; }

/* --------------------------------------------------------------------------
   対局画面
   -------------------------------------------------------------------------- */
/* 盤面をできるだけ大きく取りたいので、周りの余白はぎりぎりまで削っている */
.screen-game { gap: 2px; padding: 0 4px; overflow: hidden; }

.board-area {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 残りマスの数字は置いていない。手元のカルーセルに残っているピースそのものが
   そのまま「残り」を表しているので、数で言い直す必要がない。
   手番も、明るいほうのパネルと下の一文で分かる。 */
/* 盤とひとことは画面の高さに応じて上下し、対面では盤を中央に置く。 */
.board-area { padding-top: calc(2px + env(safe-area-inset-top)); }
.board-area::before { content: ''; flex: 0 100 12px; min-height: 0; }
body.mode-local .board-area { padding-top: 0; }
body.mode-local .board-area::before { display: none; }

/* 盤面は縦横のうち狭いほうに合わせて正方形にする */
.board-frame {
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}
/* 枠も台紙も持たせず、マスの並びだけで盤に見せる。
   囲いが無いぶん同じ画面幅でも盤を大きく取れる。 */
.board {
  width: min(92vw, 58vh);          /* コンテナクエリ非対応時の保険 */
  width: min(100cqw, 100cqh);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 2px;
  touch-action: none;
  user-select: none;
}
/* 20×20 はマスが細かいので、隙間と角丸を控えめにして 1 マスを大きく見せる */
.board[data-size="20"] { gap: 1.5px; }
.board[data-size="20"] .cell { border-radius: 2px; }

.cell { background: var(--cell); border-radius: 2.5px; position: relative; }

/* 開始点の印 */
.cell.start::after {
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: rgb(var(--c) / .38);
}

/* 置かれた駒 */
.cell.p1, .cell.p2, .cell.p3, .cell.p4 {
  background: linear-gradient(158deg, rgb(var(--c-hi)), rgb(var(--c)) 58%, rgb(var(--c-dp)));
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .45);
}

/* 直前の一手 */
.cell.last::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  opacity: .55;
}

/* 仮置きのプレビュー */
.cell.ghost { background: rgb(var(--c) / .42); outline: 1.5px dashed rgb(var(--c)); outline-offset: -1.5px; }
.cell.ghost-bad {
  background: repeating-linear-gradient(45deg,
    rgb(var(--bad) / .34) 0 3px, rgb(var(--bad) / .12) 3px 6px);
}

.status {
  flex: none;
  min-height: 17px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--mist);
}
.status b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   プレイヤーのパネル（操作列 + 持ちピース）
   対面対戦では向かい側のパネルを 180° 回して、相手から正しく見えるようにする。
   盤面そのものは実物のブロックス同様、回さない。
   -------------------------------------------------------------------------- */
/* ✕と「置く」はトラックパッド行に置き、カルーセルは横幅いっぱいの別行にする。
   縦方向の高さは増やさず、盤面を縮めない。
   回転と反転はボタンを置かず、駒へのタップと長押しで行う。 */
.panel {
  /* パネル自体は縮まず、余った高さは .panel-row が受け持って伸びる。 */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--panel-pad) 0;
  transition: opacity .2s ease;
}
.panel-row {
  display: flex;
  flex-direction: row;
  gap: 6px;
  flex: 1 0 var(--trackpad-min);   /* .trackpad にあった伸長分をこの行が受け持つ */
}

/* 対局をやめるボタン。使う頻度が低いので薄く置き、押した間だけはっきりさせる。
   対面ではパネルごと回るので、どちらの側からも自分の手元に来る。
   見えているのは字だけなので、縦に伸びても見た目は重くならない。 */
.btn-quit {
  flex: 0 0 auto;
  width: var(--ctl-w);
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--mist);
  font-size: 14px;
  opacity: .5;
}
.btn-quit:active { opacity: 1; }

.panel[hidden] { display: none; }
/* 180° 回すので、画面の上端に空けたい余白は要素側では下に指定する */
.panel-far {
  transform: rotate(180deg);
  padding-bottom: max(var(--far-min), calc(var(--far-safe-pad) + env(safe-area-inset-top)));
}
.panel-near { padding-bottom: max(var(--near-min), calc(var(--near-safe-pad) + env(safe-area-inset-bottom))); }

/* ホーム画面から起動したときは、下端の指の届きにくさが増すので余白を厚くする。
   env() が 0 を返す端末でも詰まらないよう max() で最低限を保証している。 */
@media (display-mode: standalone), (display-mode: fullscreen) {
  :root {
    --near-min: 30px; --far-min: 14px;
    --near-safe-pad: 18px; --far-safe-pad: 6px;
  }
}
.panel.is-idle { opacity: .3; pointer-events: none; }

/* 盤の上の駒を、指で駒を隠さずに動かすための帯。
   余っている縦のスペースは .panel-row に流れて、そこが伸びる。 */
.trackpad {
  --pad-ink: var(--line);
  flex: 1;
  border-radius: 12px;
  border: 1px solid var(--pad-ink);
  background-color: var(--surface-2);
  background-image: radial-gradient(circle, var(--pad-ink) .9px, transparent 1.1px);
  background-size: 9px 9px;
  touch-action: none;
  user-select: none;
}
/* 触れているのが分かる程度でよいので、枠線とドットを少し濃くするだけ。地色は変えない */
.trackpad.is-active { --pad-ink: color-mix(in srgb, var(--mist) 20%, var(--line)); }

.ctl {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--mist);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-1);
  transition: transform .08s ease, opacity .12s ease;
}
.ctl:active { transform: scale(.97); }
.ctl:disabled { opacity: .42; cursor: default; }

/* なぞり終わった指のすぐ右に置く確定ボタン。高さは指定せず、
   ✕・帯とまとめて行いっぱいに伸ばす。3 つの高さがそろうと操作の帯がひとつの塊に見える。 */
.ctl-place {
  flex: 0 0 auto;
  width: var(--ctl-w);
  font-size: 14px;
}
.ctl-place:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* --------------------------------------------------------------------------
   持ちピースのカルーセル
   横に流して、中央に来たものがそのまま「選んでいるピース」になる。
   大きさと濃さは中央からの距離で連続的に変えるので、指の動きに図がそのまま追従する。
   -------------------------------------------------------------------------- */
:root { --tile: 66px; }

.tray {
  /* view.js が tile.offsetLeft を scrollLeft と同じ座標系で使うので、
     offsetParent をこの要素自身にしておく。外すと中央の判定がずれる。 */
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
  height: calc(var(--tile) + 8px);
}
.tray::-webkit-scrollbar { display: none; }

/* 端のピースも中央まで送れるようにする余白。
   実際のタイル幅から view.js が測って入れる（計算値とずれると端まで送れなくなる）。 */
.tray::before,
.tray::after {
  content: "";
  flex: 0 0 var(--spacer, 0px);
}

.tile {
  flex: 0 0 var(--tile);
  height: var(--tile);
  scroll-snap-align: center;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1.5px solid transparent;
  will-change: transform, opacity;
}
/* 中央に来たものだけ枠を出す */
.tile.is-selected { border-color: var(--ink); background: var(--surface); }
/* いま置ける場所が無いピース */
.tile.is-dead .tile-grid { filter: grayscale(1); }

.tile-grid { display: grid; gap: 1px; }
.tile-grid i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.tile-grid i.fill { box-shadow: inset 0 .5px 1px rgb(255 255 255 / .5); }

/* 対面対戦は上下 2 つのパネルが入るぶん高さで頭打ちになる。
   付属物をひとまわり小さくして、その差をまるごと盤面に回す。 */
body.mode-local { --tile: 52px; --panel-pad: 3px; --trackpad-min: 26px; --ctl-w: 58px; }
body.mode-local .tile-grid i { width: 6.5px; height: 6.5px; }
body.mode-local .ctl-place { font-size: 13px; }
body.mode-local .status { min-height: 15px; font-size: 11px; }
body.mode-local .score { padding: 3px 9px; }

/* 縦の狭い端末ではさらに詰める */
@media (max-height: 700px) {
  body.mode-local { --tile: 46px; --trackpad-min: 22px; --ctl-w: 54px; }
  body.mode-local .tile-grid i { width: 5.5px; height: 5.5px; }
  body.mode-local .ctl-place { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   ひとこと
   送信という区切りを作らず、打っている文字がそのまま相手に流れていく。
   残るのは「いま言っていること」だけで、履歴はどこにも持たない。
   -------------------------------------------------------------------------- */
.chat {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#chat-them-rows { display: flex; flex-direction: column; gap: 3px; }
.chat[hidden] { display: none; }

.chat-line {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.3;
}
.chat-line .chip { width: 8px; height: 8px; border-radius: 2px; }

.chat-them {
  background: var(--surface-2);
  color: var(--ink);
}
.chat-them span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* まだ何も来ていない状態。行の高さは保ったまま、控えめに見せる */
.chat-them.is-empty { background: none; }
.chat-them.is-empty span { color: var(--mist); font-size: 12px; }
.chat-them.is-empty .chip { opacity: .3; }

.chat-mine {
  border: 1px solid var(--line);
  background: var(--surface);
}
.chat-mine input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  padding: 5px 0;
}
.chat-mine input:focus { outline: none; }
.chat-mine input::placeholder { color: var(--mist); font-size: 12px; }

/* --------------------------------------------------------------------------
   シート（遊び方・結果）
   -------------------------------------------------------------------------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(0 0 0 / .35);
  backdrop-filter: blur(6px);
  animation: fade .2s ease;
}
.sheet[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }

.sheet-card {
  width: min(340px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 26px 24px calc(22px + env(safe-area-inset-bottom));
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  animation: rise .24s cubic-bezier(.2, .8, .3, 1);
}
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }

.sheet-title { font-size: 19px; font-weight: 600; }
.sheet-subtitle {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--mist);
  margin-top: 4px;
}

.rules-list {
  text-align: left;
  font-size: 13px;
  line-height: 1.95;
  color: var(--mist);
  padding-left: 20px;
  margin: 4px 0 8px;
}
.rules-list li { margin-bottom: 8px; }
.rules-list b { color: var(--ink); font-weight: 600; }

.result-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--mist);
}
.result-badge.is-win { color: rgb(var(--p1)); }
.result-rows { width: 100%; margin: 4px 0; }
.result-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--mist);
}
.result-row .result-name { flex: 1; text-align: left; }
.result-row b { font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.result-row.is-winner { color: var(--ink); font-weight: 600; }
.result-hint { font-size: 11px; color: var(--mist); margin-bottom: 6px; }

/* --------------------------------------------------------------------------
   トースト
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  /* 盤とパネルの境目に出す。駒もボタンも隠さない位置。上端の座標は render.js が渡す */
  top: var(--toast-y, 88%);
  transform: translate(-50%, calc(-50% + 12px));
  z-index: 80;
  max-width: 88vw;
  padding: 11px 18px;
  border-radius: 11px;
  background: var(--ink);
  color: var(--bg);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: var(--shadow-2);
}
.toast.is-shown { opacity: 1; transform: translate(-50%, -50%); }

/* --------------------------------------------------------------------------
   広い画面：盤面を大きくしすぎず中央に置く
   -------------------------------------------------------------------------- */
/* タブレットや PC。盤は正方形なので、横に広い画面では結局高さで頭打ちになる。
   その頭打ちの値に合わせて全体の幅を決めると、持ちピースの帯も盤とだいたい揃う。
   縦長の端末では 100% のままなので、iPad の縦持ちでも画面幅いっぱいに使える。 */
@media (min-width: 700px) {
  .screen-game { width: 100%; max-width: min(100%, 96vh); margin: 0 auto; }
  :root { --tile: 76px; --trackpad-min: 44px; --ctl-w: 84px; }
  .tile-grid i { width: 11px; height: 11px; }
  .ctl-place { font-size: 16px; }
  .status { font-size: 14px; }
  .chat-line { min-height: 34px; font-size: 15px; }
  .chat-mine input { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}