:root {
  --bg: #f3f6f8;
  --panel: #ffffff;
  --ink: #1f2b33;
  --muted: #5c6b75;
  --brand: #1f7a8c;
  --brand-ink: #ffffff;
  --line: #d7e0e6;
  --danger: #c0392b;
  --radius: 18px;
  --gap: 12px;
  --cols: 4; /* JSで上書き */
  --shadow: 0 2px 8px rgba(0,0,0,.08);
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ===== ヘッダー ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--brand);
  color: var(--brand-ink);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar__title { font-size: 1.15rem; margin: 0; font-weight: 700; }
.topbar__right { display: flex; gap: 8px; }

/* ===== ボタン ===== */
.btn {
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform .05s ease, filter .15s ease;
}
.btn:active { transform: scale(.96); }
.btn--primary { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.btn--ghost { background: rgba(255,255,255,.18); color: var(--brand-ink); border-color: rgba(255,255,255,.35); }
.btn--danger { background: var(--danger); color: #fff; border-color: transparent; }
.btn[aria-pressed="true"] { background: #ffd166; color: #1f2b33; border-color: transparent; }

/* ===== 文ストリップ ===== */
[hidden] { display: none !important; }
.sentence {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 10px 14px;
  background: #fff7e6;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 60px;
  z-index: 9;
}
.sentence__items {
  flex: 1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 52px;
  align-items: center;
}
.sentence__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 1.05rem;
}
.sentence__chip .emoji { font-size: 1.3rem; }
.sentence__actions { display: flex; gap: 8px; }
.sentence__empty { color: var(--muted); }

/* ===== カテゴリのタブ ===== */
.tabs {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  border: 2px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
}
.tab[aria-selected="true"] { background: var(--brand); color: #fff; border-color: transparent; }
.tab--add { color: var(--muted); }

/* ===== カードのグリッド ===== */
.grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
  padding: 14px;
  align-content: start;
}
.card {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 3px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  background: var(--card-bg, #fff);
  color: #1f2b33;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: var(--shadow);
  user-select: none;
  padding: 8px;
  transition: transform .08s ease, box-shadow .12s ease;
}
.card:active { transform: scale(.95); }
.card.is-speaking { outline: 4px solid #ffd166; outline-offset: 2px; }
.card__emoji { font-size: clamp(2rem, 9vw, 3.4rem); line-height: 1; }
.card__label { font-size: clamp(.95rem, 3.4vw, 1.25rem); font-weight: 800; text-align: center; word-break: break-word; }

/* 編集モードのカード操作ボタン */
.card__edit, .card__move {
  position: absolute;
  border: none;
  border-radius: 999px;
  width: 34px; height: 34px;
  font-size: 1rem;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.card__edit { top: 6px; right: 6px; background: #1f7a8c; color: #fff; }
.card__move--left { top: 50%; left: 4px; transform: translateY(-50%); background: rgba(255,255,255,.92); }
.card__move--right { top: 50%; right: 4px; transform: translateY(-50%); background: rgba(255,255,255,.92); }
body.edit .card__edit, body.edit .card__move { display: inline-flex; }

/* 「+ ついか」カード */
.card--add {
  border-style: dashed;
  background: #fff;
  color: var(--muted);
  display: none;
}
body.edit .card--add { display: flex; }

/* 編集モードの帯 */
body.edit .topbar { background: #b85c00; }
body.edit .tab[aria-selected="true"] { background: #b85c00; }
body.edit .card { border-color: #b85c0044; }

/* ===== ダイアログ ===== */
.dialog {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  width: min(440px, 92vw);
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.dialog::backdrop { background: rgba(0,0,0,.45); }
.dialog__body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.dialog h2 { margin: 0; }
.dialog h3 { margin: 0; font-size: 1rem; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.field input[type="text"], .field select {
  font: inherit; padding: 12px; border: 2px solid var(--line); border-radius: 12px; min-height: 48px;
}
.field input[type="range"] { min-height: 44px; }
.field input[type="color"] { width: 60px; height: 44px; border: 2px solid var(--line); border-radius: 12px; padding: 2px; }
.dialog__row { display: flex; gap: 10px; flex-wrap: wrap; }
.dialog__footer { display: flex; justify-content: flex-end; gap: 10px; margin: 6px 0 0; padding: 0; }
.dialog hr { border: none; border-top: 1px solid var(--line); width: 100%; }
.hint { color: var(--muted); font-size: .85rem; margin: 0; }

@media (prefers-color-scheme: dark) {
  :root { --bg:#14202a; --panel:#1d2c38; --ink:#eaf2f6; --muted:#9fb2bd; --line:#33495a; }
  .sentence { background:#2a2417; }
  .sentence__chip { background:#1d2c38; color:#eaf2f6; }
  .card { color:#1f2b33; }
}