/* =========================================================
   言葉探し v3.0.0（シンプルUI版）
   固定ヘッダー＋全画面キャンバス＋右下縦型ツールバー＋モーダル
   「円を描こう」アプリのUI骨格を踏襲
   全て .ks-root 配下にスコープ
   ========================================================= */

.ks-root{
  --main:#1e3a5f; --main-light:#2d5a8f; --main-dark:#0f1e3a;
  --accent:#d4af37; --accent-light:#f4cf5f; --accent-dark:#b8941f;
  --text:#2C3E50; --text-light:#7F8C8D; --border:#E8E8E8;
  --warn:#f59e0b; --danger:#ef4444;
  --success:#dcfce7; --warning:#fef3c7; --error:#fee2e2;
  --font: 'Noto Sans JP', system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.ks-root, .ks-root *{ box-sizing:border-box; }

.ks-root{
  font-family:var(--font);
  color:var(--text);
  background:linear-gradient(135deg,#0ea5e9,#6366f1,#8b5cf6);
  min-height:100vh; /* ブランクページ等、単独ページ運用を想定 */
  position:relative;
  overflow:hidden;
}

/* ---------- 全体レイアウト ---------- */
.ks-root .ks-app{
  height:100vh; display:flex; flex-direction:column;
}

/* ---------- 固定ヘッダー ---------- */
.ks-root .ks-header{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px 20px;
  background:var(--main);
  color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
  z-index:10;
}
.ks-root .ks-title{
  margin:0; font-size:18px; font-weight:900; letter-spacing:.02em;
  white-space:nowrap;
}
.ks-root .ks-instruction{
  flex:1; text-align:center; font-size:14px; font-weight:600;
  opacity:.92; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ks-root .ks-status{ flex-shrink:0; }
.ks-root .ks-progress-pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:64px; padding:6px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  font-size:18px; font-weight:900;
  line-height:1;
  transition:background .2s, color .2s;
}
.ks-root .ks-progress-pill.ks-p-excellent{ background:var(--accent); color:var(--main-dark); }
.ks-root .ks-progress-pill.ks-p-good{ background:var(--success); color:#166534; }
.ks-root .ks-progress-pill.ks-p-average{ background:var(--warning); color:#92400e; }

/* ---------- メインエリア ---------- */
.ks-root .ks-canvas-area{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  position:relative;
}
.ks-root .ks-canvas-card{
  width:100%; height:100%;
  max-width:1000px;
  background:#fff; border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  position:relative;
  overflow:hidden;
  display:flex; flex-direction:column;
  padding:20px;
  gap:16px;
}

/* ---------- 入力バー ---------- */
.ks-root .ks-input-bar{
  flex-shrink:0;
  display:flex; align-items:center; gap:10px;
  background:#f8fafc; border:2px solid var(--border); border-radius:14px;
  padding:10px 10px 10px 16px;
}
.ks-root .ks-input{
  flex:1; height:48px; resize:none;
  border:none; background:transparent;
  font-family:var(--font);
  font-size:20px; font-weight:700; color:var(--text);
  text-align:center;
  line-height:48px; padding:0;
  overflow:hidden;
  outline:none;
}
.ks-root .ks-confirm-btn{
  flex-shrink:0;
  height:48px; padding:0 22px;
  border:none; border-radius:10px;
  background:var(--accent); color:var(--main-dark);
  font-family:var(--font); font-size:16px; font-weight:900;
  cursor:pointer;
  transition:background .15s, transform .15s;
}
.ks-root .ks-confirm-btn:hover{ background:var(--accent-light); transform:translateY(-1px); }
.ks-root .ks-confirm-btn:disabled{ background:#cbd5e1; color:#64748b; cursor:not-allowed; transform:none; }

.ks-root .ks-error-message{
  flex-shrink:0;
  margin:0; padding:8px 14px;
  font-size:13px; font-weight:700; color:#991b1b;
  background:var(--error); border:1px solid #fca5a5; border-radius:10px;
  text-align:center;
}
.ks-root .ks-error-message.ks-hidden{ display:none; }

/* ---------- 50音表グリッド（縦書き：行＝列で表示） ---------- */
.ks-root .ks-grid-scroll{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  overflow:auto;
}
.ks-root .ks-char-grid{
  display:grid;
  grid-template-columns:repeat(13, 56px);
  grid-template-rows:26px repeat(5, 56px);
  gap:6px 8px;
  justify-content:center;
  padding:4px;
}
.ks-root .ks-col-header{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font);
  font-size:13px; font-weight:900;
  color:var(--accent-dark);
  letter-spacing:.02em;
}
.ks-root .ks-char{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font);
  font-size:22px; font-weight:900;
  color:var(--main);
  background:#fff;
  border:2px solid var(--border);
  border-radius:12px;
  cursor:pointer;
  user-select:none;
  transition:transform .12s, box-shadow .12s, background .2s, color .2s, border-color .2s;
  line-height:1; padding:0; margin:0;
}
.ks-root .ks-char:hover{
  border-color:var(--main-light);
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  transform:translateY(-2px);
}
.ks-root .ks-char:active{ transform:translateY(0) scale(.94); }

/* 特殊文字（゛゜ー）：カウント対象外、いつでもタップ可能 */
.ks-root .ks-char.ks-char-special{
  color:var(--text-light);
  background:#f8fafc;
}

/* 確定前・選択中（タップで解除できる） */
.ks-root .ks-char.ks-draft{
  background:var(--main); color:#fff; border-color:var(--main-dark);
  box-shadow:0 4px 10px rgba(30,58,95,.3);
}
.ks-root .ks-char.ks-draft:hover{ background:var(--main-light); }

/* 確定済み（もう使えない） */
.ks-root .ks-char.ks-confirmed{
  background:var(--accent); color:var(--main-dark); border-color:var(--accent-dark);
  cursor:not-allowed;
}
.ks-root .ks-char.ks-confirmed:hover{ transform:none; box-shadow:none; }

/* 使用済み文字をタップしたときの拒否フィードバック */
.ks-root .ks-char.ks-denied{
  animation:ks-shake .4s ease-in-out;
}
@keyframes ks-shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-4px); }
  75%{ transform:translateX(4px); }
}

/* ---------- 右下 縦型アイコンツールバー ---------- */
.ks-root .ks-toolbar{
  position:fixed; right:20px; bottom:20px;
  display:flex; flex-direction:column; gap:14px;
  z-index:50;
}
.ks-root .ks-toolbar button{
  width:54px; height:54px; border-radius:50%;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  background:#fff; color:var(--main);
  box-shadow:0 4px 14px rgba(0,0,0,.2);
  transition:transform .15s, box-shadow .15s, background .15s, color .15s;
}
.ks-root .ks-toolbar button:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.28); }
.ks-root .ks-toolbar button:active{ transform:translateY(0); }
.ks-root .ks-toolbar button.ks-primary{ background:var(--accent); color:var(--main-dark); }

/* ---------- モーダル共通 ---------- */
.ks-root .ks-modal-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:100;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.ks-root .ks-modal-overlay.ks-open{ opacity:1; pointer-events:auto; }
.ks-root .ks-modal{
  background:#fff; border-radius:16px; padding:24px;
  width:min(420px, 90vw);
  max-height:80vh;
  display:flex; flex-direction:column;
  box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.ks-root .ks-modal h2{
  margin:0 0 16px 0; font-size:18px; font-weight:900; color:var(--main);
  flex-shrink:0;
}

/* あそびかたモーダル本文 */
.ks-root .ks-modal-body{
  overflow-y:auto;
  text-align:left; color:var(--text); line-height:1.8; font-size:14px;
}
.ks-root .ks-modal-body p{ margin:8px 0; }
.ks-root .ks-modal-body ol,
.ks-root .ks-modal-body ul{ margin:8px 0 8px 22px; padding:0; }
.ks-root .ks-modal-body li{ margin:6px 0; font-size:14px; }
.ks-root .ks-modal-note{
  font-size:12px; color:var(--text-light); text-align:center; margin-top:14px;
}

/* とうろくした言葉モーダル */
.ks-root .ks-words-list{
  flex:1; overflow-y:auto;
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:16px;
}
.ks-root .ks-empty-message{
  text-align:center; color:var(--text-light); font-size:14px; padding:24px 0; margin:0;
}
.ks-root .ks-word-item{
  background:#f8fafc; border:1px solid var(--border); border-radius:10px;
  padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  transition:box-shadow .15s, transform .15s;
}
.ks-root .ks-word-item:hover{ box-shadow:0 4px 10px rgba(0,0,0,.1); transform:translateY(-1px); }
.ks-root .ks-word-text{
  font-size:15px; font-weight:800; color:var(--text);
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.ks-root .ks-word-count{
  font-size:11px; color:var(--text-light); flex-shrink:0; white-space:nowrap;
}
.ks-root .ks-word-delete{
  flex-shrink:0;
  width:24px; height:24px; border-radius:50%;
  border:none; background:var(--danger); color:#fff;
  font-size:14px; font-weight:900; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .15s;
}
.ks-root .ks-word-delete:hover{ background:#dc2626; transform:scale(1.1); }

.ks-root .ks-modal-actions{ flex-shrink:0; margin-top:4px; }
.ks-root .ks-modal-actions button{
  width:100%; border:none; border-radius:10px; padding:12px; font-weight:800;
  font-size:14px; cursor:pointer; background:#f1f5f9; color:var(--main);
  transition:background .15s;
}
.ks-root .ks-modal-actions button:hover{ background:#e2e8f0; }
.ks-root .ks-modal-actions.ks-danger button{
  background:var(--danger); color:#fff;
}
.ks-root .ks-modal-actions.ks-danger button:hover{ background:#dc2626; }

/* ---------- 背景色えらびモーダル ---------- */
.ks-root .ks-swatch-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
  margin-bottom:16px;
}
.ks-root .ks-swatch{
  width:100%; aspect-ratio:1; border-radius:14px;
  border:3px solid transparent; cursor:pointer; padding:0;
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
.ks-root .ks-swatch:hover{ transform:scale(1.06); }
.ks-root .ks-swatch.ks-swatch-active{
  border-color:var(--main);
  box-shadow:0 0 0 3px rgba(30,58,95,.18);
}
.ks-root .ks-swatch-1{ background:linear-gradient(135deg,#0ea5e9,#6366f1,#8b5cf6); }
.ks-root .ks-swatch-2{ background:linear-gradient(135deg,#f472b6,#fb923c); }
.ks-root .ks-swatch-3{ background:linear-gradient(135deg,#34d399,#0ea5e9); }
.ks-root .ks-swatch-4{ background:linear-gradient(135deg,#f59e0b,#ef4444); }
.ks-root .ks-swatch-5{ background:linear-gradient(135deg,#1e3a5f,#0f1e3a); }
.ks-root .ks-swatch-6{ background:linear-gradient(135deg,#e0f2fe,#ede9fe); }

/* 背景プリセット（.ks-root に適用） */
.ks-root.ks-bg-1{ background:linear-gradient(135deg,#0ea5e9,#6366f1,#8b5cf6) !important; }
.ks-root.ks-bg-2{ background:linear-gradient(135deg,#f472b6,#fb923c) !important; }
.ks-root.ks-bg-3{ background:linear-gradient(135deg,#34d399,#0ea5e9) !important; }
.ks-root.ks-bg-4{ background:linear-gradient(135deg,#f59e0b,#ef4444) !important; }
.ks-root.ks-bg-5{ background:linear-gradient(135deg,#1e3a5f,#0f1e3a) !important; }
.ks-root.ks-bg-6{ background:linear-gradient(135deg,#e0f2fe,#ede9fe) !important; }

/* ---------- 実績通知 ---------- */
.ks-root .ks-achievement{
  position:fixed; top:20px; right:20px;
  background:linear-gradient(135deg, var(--main), var(--main-dark));
  border-top:3px solid var(--accent);
  border-bottom:3px solid var(--accent);
  color:#fff;
  padding:14px 18px;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(30,58,95,0.25);
  transform:translateX(420px);
  transition:transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index:1000;
  pointer-events:none;
  max-width:320px;
  font-size:14px; font-weight:700;
}
.ks-root .ks-achievement.ks-show{ transform:translateX(0); }

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
  .ks-root .ks-char-grid{
    grid-template-columns:repeat(13, 44px);
    grid-template-rows:22px repeat(5, 44px);
    gap:5px 6px;
  }
  .ks-root .ks-char{ font-size:17px; border-radius:10px; }
  .ks-root .ks-col-header{ font-size:11px; }
}

@media (max-width:640px){
  .ks-root .ks-instruction{ display:none; }
  .ks-root .ks-title{ font-size:15px; }
  .ks-root .ks-toolbar{ right:12px; bottom:12px; gap:10px; }
  .ks-root .ks-toolbar button{ width:46px; height:46px; font-size:19px; }
  .ks-root .ks-char-grid{
    grid-template-columns:repeat(13, 40px);
    grid-template-rows:20px repeat(5, 40px);
  }
  .ks-root .ks-char{ font-size:15px; }
}