/* =========================================================
   BATTLE 50 v1.0.0（シンプルUI版）
   固定ヘッダー＋全画面カード＋右下縦型ツールバー＋モーダル
   「言葉探し」「円を描こう」と同じUI骨格・ブランドカラーに統一
   全て .b50-root 配下にスコープ
   ========================================================= */

.b50-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;
}
.b50-root, .b50-root *{ box-sizing:border-box; }

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

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

/* ---------- 固定ヘッダー ---------- */
.b50-root .b50-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;
}
.b50-root .b50-title{
  margin:0; font-size:18px; font-weight:900; letter-spacing:.02em;
  white-space:nowrap;
}
.b50-root .b50-instruction{
  flex:1; text-align:center; font-size:14px; font-weight:600;
  opacity:.92; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.b50-root .b50-status{ flex-shrink:0; }
.b50-root .b50-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;
}
.b50-root .b50-progress-pill.b50-p-excellent{ background:var(--accent); color:var(--main-dark); }
.b50-root .b50-progress-pill.b50-p-good{ background:var(--success); color:#166534; }
.b50-root .b50-progress-pill.b50-p-average{ background:var(--warning); color:#92400e; }

/* ---------- メインエリア ---------- */
.b50-root .b50-canvas-area{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  position:relative;
}
.b50-root .b50-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:14px;
}

/* ---------- 入力エリア（自由に文章を入力） ---------- */
.b50-root .b50-input{
  flex-shrink:0;
  width:100%; height:96px; resize:none;
  border:2px solid var(--border); border-radius:14px;
  background:#f8fafc;
  font-family:var(--font);
  font-size:19px; font-weight:700; color:var(--text);
  text-align:center;
  padding:14px;
  line-height:1.5;
  outline:none;
  transition:border-color .15s;
}
.b50-root .b50-input:focus{ border-color:var(--main-light); }

.b50-root .b50-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;
}
.b50-root .b50-error-message.b50-hidden{ display:none; }

/* ---------- 50音表グリッド（縦書き・右から左） ---------- */
.b50-root .b50-grid-scroll{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  overflow:auto;
}
.b50-root .b50-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;
}
.b50-root .b50-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;
}
.b50-root .b50-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;
}
.b50-root .b50-char:hover{
  border-color:var(--main-light);
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  transform:translateY(-2px);
}
.b50-root .b50-char:active{ transform:translateY(0) scale(.94); }

/* 特殊文字（゛゜）：カウント対象外 */
.b50-root .b50-char.b50-char-special{
  color:var(--text-light);
  background:#f8fafc;
}

/* 1回使用 */
.b50-root .b50-char.b50-used{
  background:var(--accent); color:var(--main-dark); border-color:var(--accent-dark);
}

/* 2回以上使用（重複） */
.b50-root .b50-char.b50-duplicate{
  background:var(--danger); color:#fff; border-color:#dc2626;
}

/* ---------- 右下 縦型アイコンツールバー ---------- */
.b50-root .b50-toolbar{
  position:fixed; right:20px; bottom:20px;
  display:flex; flex-direction:column; gap:14px;
  z-index:50;
}
.b50-root .b50-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;
}
.b50-root .b50-toolbar button:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.28); }
.b50-root .b50-toolbar button:active{ transform:translateY(0); }
.b50-root .b50-toolbar button.b50-primary{ background:var(--accent); color:var(--main-dark); }

/* ---------- モーダル共通 ---------- */
.b50-root .b50-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;
}
.b50-root .b50-modal-overlay.b50-open{ opacity:1; pointer-events:auto; }
.b50-root .b50-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);
}
.b50-root .b50-modal h2{
  margin:0 0 16px 0; font-size:18px; font-weight:900; color:var(--main);
  flex-shrink:0;
}

.b50-root .b50-modal-body{
  overflow-y:auto;
  text-align:left; color:var(--text); line-height:1.8; font-size:14px;
}
.b50-root .b50-modal-body p{ margin:8px 0; }
.b50-root .b50-modal-body ol,
.b50-root .b50-modal-body ul{ margin:8px 0 8px 22px; padding:0; }
.b50-root .b50-modal-body li{ margin:6px 0; font-size:14px; }
.b50-root .b50-modal-note{
  font-size:12px; color:var(--text-light); text-align:center; margin-top:14px;
}

.b50-root .b50-modal-actions{ flex-shrink:0; margin-top:4px; }
.b50-root .b50-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;
}
.b50-root .b50-modal-actions button:hover{ background:#e2e8f0; }

/* ---------- 背景色えらびモーダル ---------- */
.b50-root .b50-swatch-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
  margin-bottom:16px;
}
.b50-root .b50-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;
}
.b50-root .b50-swatch:hover{ transform:scale(1.06); }
.b50-root .b50-swatch.b50-swatch-active{
  border-color:var(--main);
  box-shadow:0 0 0 3px rgba(30,58,95,.18);
}
.b50-root .b50-swatch-1{ background:linear-gradient(135deg,#0ea5e9,#6366f1,#8b5cf6); }
.b50-root .b50-swatch-2{ background:linear-gradient(135deg,#f472b6,#fb923c); }
.b50-root .b50-swatch-3{ background:linear-gradient(135deg,#34d399,#0ea5e9); }
.b50-root .b50-swatch-4{ background:linear-gradient(135deg,#f59e0b,#ef4444); }
.b50-root .b50-swatch-5{ background:linear-gradient(135deg,#1e3a5f,#0f1e3a); }
.b50-root .b50-swatch-6{ background:linear-gradient(135deg,#e0f2fe,#ede9fe); }

.b50-root.b50-bg-1{ background:linear-gradient(135deg,#0ea5e9,#6366f1,#8b5cf6) !important; }
.b50-root.b50-bg-2{ background:linear-gradient(135deg,#f472b6,#fb923c) !important; }
.b50-root.b50-bg-3{ background:linear-gradient(135deg,#34d399,#0ea5e9) !important; }
.b50-root.b50-bg-4{ background:linear-gradient(135deg,#f59e0b,#ef4444) !important; }
.b50-root.b50-bg-5{ background:linear-gradient(135deg,#1e3a5f,#0f1e3a) !important; }
.b50-root.b50-bg-6{ background:linear-gradient(135deg,#e0f2fe,#ede9fe) !important; }

/* ---------- 実績通知 ---------- */
.b50-root .b50-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;
}
.b50-root .b50-achievement.b50-show{ transform:translateX(0); }

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

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