/* しろになるまで — style.css
 * 家の作法（vanilla-pwa-house-style / ui-layout / visual-design）を最初から入れてある。
 * - 色・余白・字の大きさ・影・角丸は :root のトークンから使う（直値を散らさない）
 * - 文字が入る箱に height / width を固定しない（min- と padding で）
 * - [hidden] と .hidden は !important で確実に消す（display 指定に負けない）
 */

:root {
  /* 方向性: 明るい・陶器・つややか（盤面＝白い陶器の絵の具皿） */
  /* 色: 墨 ＋ 雫の色だけ。画面の部品（ボタン等）には色を使わない */
  --c-bg: #ffffff;           /* 画面（白い紙） */
  --c-dish: #f3f1ee;         /* 皿・ボタンの面 */
  --c-dish-press: #e7e3dd;   /* ボタンを押している間 */
  --c-well: #ffffff;         /* くぼみ */
  --c-well-shade: #dcd8d2;   /* くぼみの内側の影 */
  --c-dry: #e2d5bf;          /* 空きマスが2つ以下の時の皿のふち（乾いた色） */
  --c-text: #1a1a1a;         /* 墨 */
  --c-muted: #5b6166;
  --c-line: #e3e0db;
  --c-gold: #d1ad4f;         /* 白い光のふち */
  --c-scrim: rgba(26, 26, 26, 0.32);
  --c-notice-bg: #fff4e5;
  --c-notice-line: #ffd8a8;
  --c-ring: rgba(255, 255, 255, 0.7);       /* 雫の内側の光の輪 */
  --c-gloss: rgba(255, 255, 255, 0.75);     /* 雫のつや */

  /* 雫の色（測って決めた。HANDOFF.md「雫の色」） */
  --drop-1: #a8dcef;   /* 水 */
  --drop-2: #f7c9d4;   /* 薄桃 */
  --drop-3: #f095b4;   /* 桃 */
  --drop-4: #f6a66a;   /* 橙 */
  --drop-5: #f3d264;   /* 黄 */
  --drop-6: #b9da7c;   /* 若草 */
  --drop-7: #74c493;   /* 緑 */
  --drop-8: #52bdb8;   /* 青緑 */
  --drop-9: #5a86d6;   /* 青 */
  --drop-10: #c9a8ee;  /* 紫 */
  --drop-11: #ffffff;  /* 白い光（ふちは金） */

  /* 余白は 4 の倍数だけ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;

  --fs-small: 12px;
  --fs-body: 14px;
  --fs-button: 16px;
  --fs-title: 20px;
  --fs-hero: 36px;
  --fw-body: 400;
  --fw-head: 800;

  /* 影はくぼみの内側の影だけ。段差影・ふわっと影は使わない */
  --shadow-well: inset 0 2px 0 var(--c-well-shade);

  --radius: 22px;
  --radius-pill: 999px;
  --rim: 6px;          /* 皿のふちの幅（乾いた色に変わる所） */
  --tap-min: 44px;

  /* 動き（「うごきをへらす」で 0 になる） */
  --t-slide: 100ms;
  --t-pop: 120ms;

  --font: "Yu Gothic UI", "Meiryo UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Noto Sans CJK JP", "Noto Sans JP", "Segoe UI", sans-serif;
  --font-title: "Zen Maru Gothic", var(--font);   /* 題字だけ（2026-11-11 決定） */
}

html.reduce {
  --t-slide: 0ms;
  --t-pop: 0ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: 1.7;
  line-break: strict;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;     /* 引っ張って再読み込みを防ぐ */
  -webkit-tap-highlight-color: transparent;
}

/* 消す指定は display 指定に負けないように */
[hidden] { display: none !important; }
.hidden { display: none !important; }

.notice {
  margin: var(--sp-3) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  background: var(--c-notice-bg);
  border: 1px solid var(--c-notice-line);
}

#app {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

.screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: max(var(--sp-4), env(safe-area-inset-top));
  padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
}

/* ---- ボタン（皿と同じ面に墨の文字・錠剤形） ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: var(--sp-2) var(--sp-6);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-dish);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-button);
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}
.btn:active { background: var(--c-dish-press); }
.btn:focus-visible { outline: 3px solid var(--c-text); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: default; }

/* ---- タイトル ---- */
#screen-title {
  justify-content: center;
  align-items: center;
  gap: var(--sp-12);
  padding-bottom: max(var(--sp-12), env(safe-area-inset-bottom));
}
.title {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
  font-feature-settings: "palt";
  text-align: center;
}
.title-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  min-width: 200px;
}
/* ?debug の時だけ出る調べ用の記録（ふつうは出ない） */
.debug-log {
  max-width: 100%;
  margin: 0;
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: var(--c-dish);
  font-size: var(--fs-small);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  text-align: left;
}
.debug-sample { display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; }
/* SUKIMIX のゲーム一覧へのリンク。ボタンより控えめに（色は使わず薄い墨＋下線） */
.hublink {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--sp-2);
  color: var(--c-muted);
  font-size: var(--fs-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- 盤面の画面 ---- */
#screen-game {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  touch-action: none;            /* スワイプでスクロール・拡大させない */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.scores {
  display: flex;
  gap: var(--sp-6);
  padding: var(--sp-2) var(--sp-1);
}
.score {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.score-label { font-size: var(--fs-small); color: var(--c-muted); font-weight: 700; }
.score-num {
  font-size: var(--fs-title);
  font-weight: var(--fw-head);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.board-area {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.board {
  position: relative;
  flex: none;            /* 親の flex に縮められて正方形が崩れないように */
  /* 幅・高さは main.js が場所に合わせて px で入れる（正方形を保つため） */
  background: var(--c-dish);
  border: var(--rim) solid var(--c-dish);
  border-radius: var(--radius);
  transition: border-color 600ms ease;
}
.board.dry { border-color: var(--c-dry); }

.wells, .tiles, .fx { position: absolute; inset: 0; }
.well {
  position: absolute;
  border-radius: 50%;
  background: var(--c-well);
  box-shadow: var(--shadow-well);
}

.stain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius) - var(--rim));
  mix-blend-mode: multiply;      /* 絵の具が皿に染みた色になる */
  pointer-events: none;
}

.tiles { transition: opacity 150ms ease; }
.board.peek .tiles { opacity: .12; }   /* 長押しの間だけ、途中のパレットをのぞく */

.tile {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-slide) ease-out;
  will-change: transform;
}
.tile.no-anim { transition: none; }

/* 雫。段ごとの色と大きさは [data-lv] で */
.drop {
  position: relative;
  width: var(--ds);
  height: var(--ds);
  border-radius: 50%;
  background: var(--dc);
  border: 1.5px solid color-mix(in srgb, var(--dc) 80%, var(--c-text));
  display: flex;
  align-items: center;
  justify-content: center;
}
.drop::after {             /* つや */
  content: "";
  position: absolute;
  top: 13%;
  left: 20%;
  width: 30%;
  height: 18%;
  border-radius: 50%;
  background: var(--c-gloss);
  transform: rotate(-28deg);
}
.drop .rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.drop .rings circle {
  fill: none;
  stroke: var(--c-ring);
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
}
.drop[data-lv="1"]  { --dc: var(--drop-1);  --ds: 45%; }
.drop[data-lv="2"]  { --dc: var(--drop-2);  --ds: 50%; }
.drop[data-lv="3"]  { --dc: var(--drop-3);  --ds: 55%; }
.drop[data-lv="4"]  { --dc: var(--drop-4);  --ds: 60%; }
.drop[data-lv="5"]  { --dc: var(--drop-5);  --ds: 65%; }
.drop[data-lv="6"]  { --dc: var(--drop-6);  --ds: 70%; }
.drop[data-lv="7"]  { --dc: var(--drop-7);  --ds: 75%; }
.drop[data-lv="8"]  { --dc: var(--drop-8);  --ds: 80%; }
.drop[data-lv="9"]  { --dc: var(--drop-9);  --ds: 85%; }
.drop[data-lv="10"] { --dc: var(--drop-10); --ds: 90%; }
.drop[data-lv="11"] { --dc: var(--drop-11); --ds: 95%; border: 2px solid var(--c-gold); }
.drop[data-lv="11"] .rings circle { stroke: var(--c-gold); stroke-opacity: .45; }
/* 虹（隠し段）: グラデーションはここだけ。色の段を一周する円錐グラデ */
.drop[data-lv="12"] {
  --ds: 95%;
  border: 2px solid var(--c-bg);
  background: conic-gradient(var(--drop-1), var(--drop-2), var(--drop-3), var(--drop-4), var(--drop-5),
    var(--drop-6), var(--drop-7), var(--drop-8), var(--drop-9), var(--drop-10), var(--drop-1));
}

.drop.pop { animation: pop var(--t-pop) ease-out; }
.drop.appear { animation: appear var(--t-pop) ease-out; }
@keyframes pop { 50% { transform: scale(1.16); } }
@keyframes appear { from { transform: scale(0); } }
html.reduce .drop.pop, html.reduce .drop.appear { animation: none; }

/* 白い光に届いた時の短い演出 */
.light-ring {
  position: absolute;
  border: 3px solid var(--c-gold);
  border-radius: 50%;
  pointer-events: none;
  animation: light-ring 800ms ease-out forwards;
}
@keyframes light-ring {
  from { transform: scale(.6); opacity: 1; }
  to { transform: scale(2.6); opacity: 0; }
}

/* 1手で2つ以上くっついた時の光（--rc＝できた雫の色、--k＝同時にくっついた数。main.js が入れる）
   グラデーションは使わない。淡い面と、雫のふちと同じ濃さの輪が広がって消える */
.combo-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  /* 2026-11-11「控えめに」で弱めた（面 30→15%、輪 2+0.5×数→1.5+0.25×数px、広がり 1.15+0.08×数→1.05+0.05×数、最初の濃さ .9→.6） */
  background: color-mix(in srgb, var(--rc) 15%, transparent);
  border: calc(1.5px + var(--k) * 0.25px) solid color-mix(in srgb, var(--rc) 80%, var(--c-text));
  opacity: 0;
  animation: combo-ring 600ms ease-out forwards;
}
@keyframes combo-ring {
  from { transform: scale(.7); opacity: .6; }
  to { transform: scale(calc(1.05 + var(--k) * 0.05)); opacity: 0; }
}
html.reduce .combo-ring { display: none; }

/* 虹のにじみが広がる */
.rainbow-spread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius) - var(--rim));
  mix-blend-mode: multiply;
  pointer-events: none;
  animation: spread 900ms ease-out forwards;
}
@keyframes spread {
  from { transform: scale(.2); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ひとこと（きょうはここまで 等） */
.word {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  font-size: var(--fs-title);
  font-weight: var(--fw-head);
  white-space: nowrap;
  pointer-events: none;
  animation: word-in 240ms ease-out;
}
@keyframes word-in { from { opacity: 0; } }
html.reduce .word { animation: none; }

/* 最初の見本（指の絵） */
.guide { position: absolute; inset: 0; pointer-events: none; }
.finger {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--c-text);
  opacity: 0;
}
.guide-text {
  position: absolute;
  left: 50%;
  bottom: var(--sp-4);
  transform: translateX(-50%);
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  font-size: var(--fs-button);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.actions {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
}

/* ---- 終わりのパレット ---- */
#screen-end { gap: var(--sp-6); }
.end-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  min-height: 0;
}
.palette-img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  aspect-ratio: 1;
}
.end-actions { flex-wrap: wrap; justify-content: flex-start; }
.end-actions #btn-next { margin-left: auto; }

/* ---- 確認・せってい ---- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--c-scrim);
}
.sheet {
  width: 100%;
  max-width: 360px;
  padding: var(--sp-6);
  border-radius: var(--radius);
  background: var(--c-bg);
}
.sheet-title { margin: 0 0 var(--sp-3); font-size: var(--fs-title); font-weight: var(--fw-head); line-height: 1.4; }
.sheet-text { margin: 0 0 var(--sp-6); font-size: var(--fs-button); line-height: 1.8; }
.sheet-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.sheet-text + .sheet-actions { margin-top: 0; }

.toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap-min);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-line);
  cursor: pointer;
}
.toggle-label { flex: 1; min-width: 0; font-size: var(--fs-button); font-weight: 700; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch {
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--c-dish);
  border: 1px solid var(--c-line);
  transition: background-color 150ms ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  transition: transform 150ms ease;
}
.toggle input:checked + .switch { background: var(--c-text); border-color: var(--c-text); }
.toggle input:checked + .switch::after { transform: translateX(20px); border-color: var(--c-text); }
.toggle input:focus-visible + .switch { outline: 3px solid var(--c-text); outline-offset: 2px; }
html.reduce .switch, html.reduce .switch::after { transition: none; }