/* =====================================================
   バラバラひらがなパズル v2 CSS
   デザイン方針: 「ひらがな書き方アプリ」と共通のビジュアル言語に統一
   スコープ: .hp-root 以下すべて（Cocoonテーマ対策で !important 徹底）
   ===================================================== */

.hp-root {
  --hp-main:    #1e3a5f !important;
  --hp-main-l:  #2d5a8f !important;
  --hp-main-d:  #0f1e3a !important;
  --hp-gold:    #d4af37 !important;
  --hp-gold-l:  #f4cf5f !important;
  --hp-gold-d:  #a07d10 !important;
  --hp-bg:      #f4f6f9 !important;
  --hp-border:  #dde3ec !important;
  --hp-text:    #2c3e50 !important;
  --hp-gray:    #8899aa !important;
  --hp-wrong:   #e74c3c !important;
  --hp-easy:    #16a34a !important;
  --hp-normal:  #2563eb !important;
  --hp-hard:    #f59e0b !important;
  --hp-header:  52px   !important;

  all: unset;
  display: block !important;
  box-sizing: border-box !important;
  font-family: 'M PLUS Rounded 1c', 'BIZ UDGothic', system-ui, sans-serif !important;
  color: var(--hp-text) !important;
  background: var(--hp-main-d) !important;
  height: 100vh !important;
  overflow: hidden !important;
  position: relative !important;
}
.hp-root *, .hp-root *::before, .hp-root *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hp-root .hp-hidden { display: none !important; }

/* ---------- 共通ボタン ---------- */
.hp-root .hp-btn {
  all: unset !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important;
  width: 100% !important; box-sizing: border-box !important;
  border-radius: 10px !important; padding: 10px 14px !important;
  font-family: 'BIZ UDGothic', sans-serif !important; font-weight: 700 !important; font-size: .88rem !important;
  cursor: pointer !important; transition: all .16s !important; text-align: center !important;
}
.hp-root .hp-btn:disabled { opacity: .4 !important; cursor: not-allowed !important; transform: none !important; }
.hp-root .hp-btn-gold {
  background: linear-gradient(135deg, var(--hp-gold-l), var(--hp-gold)) !important;
  color: var(--hp-main-d) !important;
  box-shadow: 0 3px 8px rgba(212,175,55,.35) !important;
  font-size: 1rem !important;
}
.hp-root .hp-btn-gold:hover:not(:disabled) { filter: brightness(1.08) !important; transform: translateY(-2px) !important; }

/* ---------- アイコン ---------- */
.hp-root .hp-icon {
  width: 20px !important; height: 20px !important; flex-shrink: 0 !important;
  fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important;
  stroke-linecap: round !important; stroke-linejoin: round !important;
}
.hp-root .hp-icon-sm {
  width: 15px !important; height: 15px !important; flex-shrink: 0 !important;
  fill: none !important; stroke: currentColor !important; stroke-width: 2 !important;
  stroke-linecap: round !important; stroke-linejoin: round !important;
}

/* =====================================================
   設定画面
   ===================================================== */
.hp-root .hp-setup {
  position: absolute !important; inset: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--hp-main-d) !important;
  padding: 16px !important; z-index: 200 !important;
}
.hp-root .hp-setup-modal {
  background: #fff !important; border-radius: 20px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.45) !important;
  width: 100% !important; max-width: 800px !important;
  height: calc(100vh - 32px) !important; max-height: 760px !important;
  display: flex !important; flex-direction: column !important;
  overflow: hidden !important;
}

/* タイトル（固定） */
.hp-root .hp-setup-title-row {
  text-align: center !important; padding: 18px 24px 12px !important;
  flex-shrink: 0 !important; border-bottom: 1.5px solid var(--hp-border) !important;
}
.hp-root .hp-setup-title {
  font-family: 'Dela Gothic One', sans-serif !important;
  font-size: clamp(1.2rem, 3.5vw, 1.6rem) !important;
  color: var(--hp-main) !important; letter-spacing: .04em !important;
}
.hp-root .hp-setup-title em { font-style: normal !important; color: var(--hp-gold-d) !important; }

/* スクロールエリア（ローディング／エラー／五十音表） */
.hp-root .hp-setup-body { flex: 1 !important; overflow-y: auto !important; min-height: 0 !important; }

.hp-root .hp-gojuon-toolbar { display: flex !important; justify-content: flex-end !important; padding: 10px 16px 0 !important; }
.hp-root .hp-gojuon-allbtn {
  all: unset !important; cursor: pointer !important; box-sizing: border-box !important;
  font-size: .78rem !important; font-weight: 700 !important;
  color: var(--hp-main-l) !important; border: 1.5px solid var(--hp-main-l) !important;
  border-radius: 7px !important; padding: 5px 12px !important;
  transition: all .13s !important; font-family: 'BIZ UDGothic', sans-serif !important;
}
.hp-root .hp-gojuon-allbtn:hover { background: var(--hp-main-l) !important; color: #fff !important; }

.hp-root .hp-gojuon-section-label {
  font-size: .78rem !important; font-weight: 700 !important; color: #999 !important;
  padding: 12px 16px 2px !important; letter-spacing: .05em !important;
}

/* 五十音表：列＝行、あ行が右端に来るよう row-reverse で配置 */
.hp-root .hp-gojuon-table {
  display: flex !important; flex-direction: row-reverse !important; gap: 5px !important;
  justify-content: center !important; flex-wrap: wrap !important;
  padding: 4px 12px 18px !important; overflow-x: auto !important;
}
.hp-root .hp-goju-col { display: flex !important; flex-direction: column !important; gap: 5px !important; align-items: center !important; flex-shrink: 0 !important; }
.hp-root .hp-goju-col-label { font-size: .68rem !important; color: #bbb !important; font-weight: 700 !important; margin-bottom: 1px !important; }
.hp-root .hp-goju-cell {
  all: unset !important; box-sizing: border-box !important; cursor: pointer !important;
  width: 40px !important; height: 40px !important; border-radius: 8px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 1.2rem !important; color: var(--hp-main) !important;
  background: #fff !important; border: 1.5px solid var(--hp-border) !important;
  transition: all .12s !important; font-family: 'BIZ UDGothic', sans-serif !important;
}
.hp-root .hp-goju-cell:hover { background: #e4edf8 !important; }
.hp-root .hp-goju-cell.checked { background: var(--hp-main) !important; color: #fff !important; border-color: var(--hp-main) !important; transform: scale(1.05) !important; }
@media (max-width: 640px) {
  .hp-root .hp-goju-cell { width: 32px !important; height: 32px !important; font-size: 1rem !important; }
}

/* フッター（固定：難易度＋アニメーション＋カウンター＋スタート） */
.hp-root .hp-setup-footer {
  flex-shrink: 0 !important;
  border-top: 2px solid var(--hp-border) !important;
  background: #fff !important;
  padding: 12px 20px 16px !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
}
.hp-root .hp-footer-row { display: flex !important; align-items: center !important; gap: 10px !important; }
.hp-root .hp-opt-label {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  font-size: .75rem !important; font-weight: 700 !important; color: #888 !important;
  letter-spacing: .05em !important; white-space: nowrap !important; flex-shrink: 0 !important;
}
.hp-root .hp-level-row { display: flex !important; gap: 5px !important; flex: 1 !important; }
.hp-root .hp-level-btn {
  all: unset !important; box-sizing: border-box !important;
  flex: 1 !important; padding: 7px 4px !important;
  border: 2px solid var(--hp-border) !important; border-radius: 8px !important;
  background: var(--hp-bg) !important; color: var(--hp-main) !important;
  font-weight: 700 !important; font-size: .74rem !important; cursor: pointer !important;
  text-align: center !important; transition: all .13s !important;
  font-family: 'BIZ UDGothic', sans-serif !important; line-height: 1.35 !important;
}
.hp-root .hp-level-btn.hp-active { background: var(--hp-main) !important; color: #fff !important; border-color: var(--hp-main) !important; }

.hp-root .hp-check-row {
  display: flex !important; align-items: center !important; gap: 8px !important;
  cursor: pointer !important; font-size: .82rem !important; font-weight: 700 !important; color: var(--hp-main) !important;
}
.hp-root .hp-check-row input[type="checkbox"] {
  width: 17px !important; height: 17px !important; accent-color: var(--hp-main) !important;
  cursor: pointer !important; margin: 0 !important;
}

.hp-root .hp-footer-bottom { display: flex !important; align-items: center !important; gap: 10px !important; }
.hp-root .hp-sel-count-bar { font-size: .85rem !important; color: #888 !important; white-space: nowrap !important; flex-shrink: 0 !important; }
.hp-root .hp-sel-count-bar strong { color: var(--hp-main) !important; font-size: 1rem !important; }
.hp-root .hp-footer-bottom .hp-btn { flex: 1 !important; font-size: 1rem !important; padding: 13px !important; }

/* =====================================================
   ゲーム画面
   ===================================================== */
.hp-root .hp-game { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; background: var(--hp-main-d) !important; z-index: 190 !important; }
.hp-root .hp-app-frame {
  width: 100% !important; max-width: 1200px !important; height: 100% !important;
  display: flex !important; flex-direction: column !important; overflow: hidden !important;
  background: linear-gradient(135deg, #fff 0%, var(--hp-bg) 100%) !important;
  box-shadow: 0 0 60px rgba(0,0,0,.35) !important;
}
.hp-root .hp-game-header {
  background: var(--hp-main) !important; border-bottom: 3px solid var(--hp-gold) !important;
  height: var(--hp-header) !important; display: flex !important; align-items: center !important;
  justify-content: space-between !important; padding: 0 16px !important; flex-shrink: 0 !important;
}
.hp-root .hp-game-header h1 {
  all: unset !important; display: inline-flex !important; align-items: center !important; gap: 7px !important;
  font-family: 'Dela Gothic One', sans-serif !important; color: var(--hp-gold) !important;
  font-size: 1.05rem !important; letter-spacing: .05em !important;
}
.hp-root .hp-pill-row { display: flex !important; gap: 7px !important; align-items: center !important; }
.hp-root .hp-pill {
  display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 4px 11px !important;
  border-radius: 999px !important; background: rgba(255,255,255,.13) !important;
  color: #fff !important; font-size: .84rem !important; font-weight: 700 !important;
  font-family: 'BIZ UDGothic', sans-serif !important;
}
.hp-root .hp-pill strong { color: var(--hp-gold-l) !important; font-size: .94rem !important; }

.hp-root .hp-game-body { flex: 1 !important; position: relative !important; overflow: hidden !important; min-height: 0 !important; }
.hp-root .hp-stage { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; }
.hp-root .hp-stage-wrap {
  width: min(calc(100vh - var(--hp-header) - 40px), calc(100% - 40px)) !important;
  height: min(calc(100vh - var(--hp-header) - 40px), calc(100% - 40px)) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.hp-root #hp-cv {
  width: 100% !important; height: 100% !important;
  border-radius: 16px !important; box-shadow: 0 8px 40px rgba(30,58,95,.25) !important;
  display: block !important; background: #fff !important;
}

/* 出題履歴パネル（フロート・右上カード） */
.hp-root .hp-history-panel {
  position: absolute !important; top: 16px !important; right: 16px !important;
  width: 168px !important; max-height: calc(100% - 32px) !important;
  background: rgba(255,255,255,.96) !important; border-radius: 14px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.18) !important;
  display: flex !important; flex-direction: column !important; overflow: hidden !important;
  z-index: 40 !important;
}
.hp-root .hp-history-title {
  font-size: .74rem !important; font-weight: 700 !important; color: var(--hp-gray) !important;
  letter-spacing: .04em !important; padding: 10px 12px 6px !important; flex-shrink: 0 !important;
}
.hp-root #hp-history-list { flex: 1 !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 5px !important; padding: 0 10px 10px !important; }
.hp-root .hp-hist-item { background: var(--hp-bg) !important; border-radius: 8px !important; padding: 6px 9px !important; display: flex !important; align-items: center !important; gap: 6px !important; }
.hp-root .hp-hi-no    { font-size: .68rem !important; color: var(--hp-gray) !important; min-width: 18px !important; }
.hp-root .hp-hi-char  { font-family: 'BIZ UDGothic', sans-serif !important; font-size: 1.25rem !important; color: var(--hp-main) !important; line-height: 1 !important; font-weight: 700 !important; }
.hp-root .hp-hi-level { font-size: .64rem !important; color: var(--hp-gray) !important; margin-left: auto !important; }
.hp-root .hp-hist-empty { font-size: .76rem !important; color: var(--hp-gray) !important; text-align: center !important; padding: 14px 0 !important; }

/* フローティング操作ドック（左下：主操作） */
.hp-root .hp-tool-dock {
  position: absolute !important; left: 20px !important; bottom: 20px !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important; z-index: 50 !important;
}
.hp-root .hp-toolbar {
  position: absolute !important; right: 20px !important; bottom: 20px !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important; z-index: 50 !important;
}
.hp-root .hp-dbtn {
  all: unset !important; box-sizing: border-box !important;
  width: 48px !important; height: 48px !important; border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: #fff !important; color: var(--hp-main) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.2) !important;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s !important;
  flex-shrink: 0 !important;
}
.hp-root .hp-dbtn:hover:not(:disabled) { transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(0,0,0,.28) !important; }
.hp-root .hp-dbtn:active:not(:disabled) { transform: translateY(0) !important; }
.hp-root .hp-dbtn.hp-dbtn-primary { background: var(--hp-gold) !important; color: var(--hp-main-d) !important; box-shadow: 0 4px 14px rgba(212,175,55,.5) !important; }
.hp-root .hp-dbtn:disabled { opacity: .35 !important; cursor: not-allowed !important; transform: none !important; }

.hp-root .hp-tbtn {
  all: unset !important; box-sizing: border-box !important;
  width: 54px !important; height: 54px !important; border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: #fff !important; color: var(--hp-main) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.2) !important;
  transition: transform .15s, box-shadow .15s !important; flex-shrink: 0 !important;
}
.hp-root .hp-tbtn:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(0,0,0,.28) !important; }

@media (max-width: 700px) {
  .hp-root .hp-history-panel { width: 128px !important; }
  .hp-root .hp-tool-dock, .hp-root .hp-toolbar { left: 12px !important; right: 12px !important; bottom: 12px !important; gap: 8px !important; }
  .hp-root .hp-dbtn { width: 42px !important; height: 42px !important; }
  .hp-root .hp-tbtn { width: 46px !important; height: 46px !important; }
}