/**
 * 表示密度（UIデンシティ）スタイル
 * assets/css/ui-density.css
 *
 * 標準（comfort）は年配の方向けにゆったりした余白。
 * 若年者向けに情報量を増やす2段階を用意する。
 *
 *   comfort … クラスなし（既存デザインそのまま／デフォルト）
 *   compact … html.ui-compact
 *   dense   … html.ui-compact.ui-dense（compact の上にさらに詰める）
 *
 * 切り替えは includes/ui-density.php のリストボックスから行い、
 * 選択値は Cookie `ui_density` に保存する。
 *
 * 【設計方針】
 * - セレクタは `.ui-compact 〜` の形（詳細度 0,2,0）にして、
 *   モジュール側のインライン `<style>`（詳細度 0,1,0）を読み込み順に依存せず上書きする。
 * - 変更するのは padding / margin / gap / font-size / grid の列幅のみ。
 *   display や flex-direction は触らない（モバイル用メディアクエリを壊さないため）。
 * - タイピング実行画面（#game-screen / #typing-overlay）は可読性優先で密度変更しない。
 *
 * @version 1.0.0
 */

/* ================================================
   1. デザイントークンの上書き
   variables.css の :root（詳細度 0,1,0）より強い
   html.ui-compact（詳細度 0,1,1）で確実に勝たせる
   ================================================ */

html.ui-compact {
    font-size: 15px;

    --spacing-xs: 0.2rem;
    --spacing-sm: 0.35rem;
    --spacing-md: 0.7rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.3rem;
    --spacing-2xl: 1.8rem;
    --spacing-3xl: 2.4rem;

    --line-height-normal: 1.45;
    --line-height-relaxed: 1.6;

    --border-radius-lg: 10px;
    --border-radius-xl: 12px;

    --header-height: 48px;
    --footer-height: 40px;
}

html.ui-compact.ui-dense {
    font-size: 14px;

    --spacing-xs: 0.15rem;
    --spacing-sm: 0.25rem;
    --spacing-md: 0.5rem;
    --spacing-lg: 0.75rem;
    --spacing-xl: 1rem;
    --spacing-2xl: 1.4rem;
    --spacing-3xl: 1.8rem;

    --line-height-normal: 1.35;
    --line-height-relaxed: 1.5;

    --border-radius-lg: 8px;
    --border-radius-xl: 10px;
}

/* タイピング実行画面は密度変更の対象外（em の基準を 16px に戻す） */
html.ui-compact #game-screen,
html.ui-compact #typing-overlay,
html.ui-compact .typing-area {
    font-size: 16px;
}

/* ================================================
   2. 共通コンポーネント（base.css / common.css）
   ================================================ */

.ui-compact .card {
    padding: 14px 16px;
    margin-bottom: 12px;
}

.ui-dense .card {
    padding: 10px 12px;
    margin-bottom: 8px;
}

.ui-compact .card-header,
.ui-compact .card-footer {
    margin-bottom: 10px;
    padding-bottom: 8px;
}

.ui-compact .btn {
    padding: 6px 14px;
}

.ui-compact .btn-lg {
    padding: 9px 20px;
    font-size: 1em;
}

.ui-compact .btn-sm {
    padding: 3px 9px;
}

.ui-compact .form-group {
    margin-bottom: 12px;
}

.ui-dense .form-group {
    margin-bottom: 8px;
}

.ui-compact .form-input,
.ui-compact .form-textarea,
.ui-compact .form-select {
    padding: 6px 10px;
}

.ui-compact .module-loading,
.ui-compact .module-error {
    padding: 24px 16px;
}

.ui-compact .message-box {
    padding: 9px 14px;
    margin: 10px 0;
}

/* ================================================
   3. ヘッダー / モードナビゲーション
   ================================================ */

.ui-compact #maintitle {
    padding: 8px 16px;
}

.ui-compact #maintitle h1,
.ui-compact #maintitle .site-title {
    font-size: 1.25em;
}

.ui-dense #maintitle {
    padding: 5px 12px;
}

.ui-dense #maintitle h1,
.ui-dense #maintitle .site-title {
    font-size: 1.1em;
}

.ui-compact #user-area {
    gap: 8px;
}

.ui-compact .header-button,
.ui-compact .header-login-button,
.ui-compact .header-register-button {
    padding: 5px 13px;
    font-size: 0.88em;
    border-radius: 14px;
}

.ui-compact .header-login-button,
.ui-compact .header-register-button {
    border-width: 1px;
}

.ui-compact .header-register-note {
    font-size: 0.66em;
    max-width: 200px;
}

.ui-compact .user-info-display {
    gap: 8px;
}

.ui-compact .username-display {
    font-size: 0.95em;
}

/* モード切り替えナビ */
.ui-compact .mode-navigation {
    padding: 5px 0;
}

.ui-compact .mode-nav-content {
    gap: 6px;
    padding: 0 16px;
}

.ui-compact .mode-button {
    min-width: 120px;
    padding: 6px 12px;
    gap: 6px;
    border-width: 1px;
    border-radius: 8px;
}

.ui-compact .mode-icon {
    font-size: 1.05em;
}

.ui-compact .mode-label {
    font-size: 0.9em;
}

.ui-dense .mode-navigation {
    padding: 3px 0;
}

.ui-dense .mode-button {
    min-width: 96px;
    padding: 4px 9px;
}

.ui-dense .mode-label {
    font-size: 0.85em;
}

/* ホバー時の浮き上がりはレイアウトが揺れるので抑える */
.ui-dense .mode-button:hover {
    transform: none;
}

/* ================================================
   4. タブナビゲーション / タブコンテナ
   ================================================ */

.ui-compact .tab-nav-content {
    padding: 4px 16px;
    gap: 2px;
}

.ui-compact .tab-button {
    padding: 7px 14px;
    gap: 5px;
    font-size: 0.92em;
}

.ui-compact .tab-icon {
    font-size: 1.05em;
}

.ui-compact .tab-content-container {
    margin: 10px auto;
    padding: 0 12px;
}

.ui-compact .tab-content {
    min-height: 320px;
}

.ui-dense .tab-nav-content {
    padding: 2px 12px;
}

.ui-dense .tab-button {
    padding: 5px 10px;
    font-size: 0.88em;
}

.ui-dense .tab-content-container {
    margin: 6px auto;
    padding: 0 8px;
}

.ui-dense .tab-content {
    min-height: 240px;
}

/* ================================================
   5. ホームタブ
   ================================================ */

.ui-compact .home-container {
    padding: 12px;
}

.ui-compact .stats-card,
.ui-compact .quick-start-card,
.ui-compact .new-titles-card {
    padding: 14px 16px;
    margin-bottom: 12px;
}

.ui-compact .stats-title,
.ui-compact .card-title {
    margin: 0 0 10px 0;
    font-size: 1.15em;
    padding-bottom: 6px;
}

.ui-compact .stats-content {
    gap: 10px;
}

.ui-compact .stat-value {
    font-size: 2em;
    margin-bottom: 2px;
}

.ui-compact .stat-label {
    font-size: 0.9em;
}

.ui-compact .quick-start-message {
    padding: 16px;
    font-size: 1em;
}

.ui-compact .quick-start-section {
    margin-bottom: 14px;
}

.ui-compact .quick-start-section-title {
    font-size: 1em;
    margin-bottom: 8px;
    padding-bottom: 5px;
}

.ui-compact .quick-start-items {
    gap: 5px;
}

.ui-compact .quick-start-item {
    padding: 7px 10px;
    gap: 10px;
}

.ui-compact .quick-start-item-title {
    font-size: 0.98em;
}

.ui-compact .quick-start-item-badge {
    padding: 2px 8px;
    font-size: 0.8em;
}

.ui-compact .quick-start-start-btn {
    padding: 4px 12px;
}

.ui-dense .home-container {
    padding: 8px;
}

.ui-dense .stats-card,
.ui-dense .quick-start-card,
.ui-dense .new-titles-card {
    padding: 10px 12px;
    margin-bottom: 8px;
}

.ui-dense .stat-value {
    font-size: 1.7em;
}

.ui-dense .quick-start-item {
    padding: 5px 8px;
}

/* ================================================
   6. タイトル一覧タブ / リスト系
   ================================================ */

.ui-compact .titles-container {
    padding: 12px;
}

.ui-compact .search-filter-bar {
    gap: 6px;
    margin-bottom: 10px;
}

.ui-compact .search-input,
.ui-compact .filter-select {
    padding: 6px 10px;
    font-size: 0.92em;
    border-width: 1px;
}

.ui-compact .title-count-info {
    margin-bottom: 8px;
    font-size: 0.9em;
}

.ui-compact .title-list {
    margin: 0 0 12px 0;
}

.ui-compact .title-item {
    padding: 6px 12px;
}

.ui-compact .title-link {
    font-size: 0.95em;
}

.ui-compact .start-button {
    padding: 4px 13px;
    font-size: 0.88em;
    border-radius: 13px;
}

.ui-compact .start-button:hover {
    transform: none;
}

.ui-compact .new-badge {
    padding: 1px 6px;
    font-size: 0.65em;
    margin-left: 6px;
}

.ui-compact .play-count-badge {
    padding: 1px 8px;
    font-size: 0.76em;
    margin-right: 6px;
}

.ui-compact .pagination {
    gap: 6px;
    padding: 8px;
}

.ui-compact .page-link,
.ui-compact .category-page-link,
.ui-compact .page-info {
    padding: 4px 10px;
    font-size: 0.9em;
}

.ui-compact .page-link:hover,
.ui-compact .category-page-link:hover {
    transform: none;
}

.ui-dense .titles-container {
    padding: 8px;
}

.ui-dense .title-item {
    padding: 3px 9px;
}

.ui-dense .title-link {
    font-size: 0.92em;
}

.ui-dense .start-button {
    padding: 2px 10px;
    font-size: 0.84em;
}

.ui-dense .pagination {
    padding: 5px;
}

/* ================================================
   7. カテゴリタブ
   ================================================ */

.ui-compact .categories-container {
    padding: 12px;
}

.ui-compact .category-selector-card,
.ui-compact .category-titles-card {
    padding: 14px 16px;
    margin-bottom: 12px;
}

.ui-compact .category-titles-card {
    min-height: 200px;
}

/* 1画面に並ぶカテゴリ数を増やす */
.ui-compact .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
}

.ui-compact .category-button {
    padding: 9px 6px;
    border-width: 1px;
    border-radius: 8px;
}

.ui-compact .category-button:hover {
    transform: none;
}

.ui-compact .category-icon {
    font-size: 1.6em;
    margin-bottom: 3px;
}

.ui-compact .category-name {
    font-size: 0.92em;
    margin-bottom: 1px;
}

.ui-compact .category-count {
    font-size: 0.78em;
}

.ui-compact .current-category-bar {
    padding: 7px 12px;
    margin-bottom: 10px;
}

.ui-compact .current-category-info {
    font-size: 0.95em;
}

.ui-compact .category-sort-selector {
    gap: 6px;
}

.ui-compact .loading-message,
.ui-compact .no-titles-message,
.ui-compact .error-message {
    padding: 28px 12px;
    font-size: 1em;
}

.ui-dense .categories-container {
    padding: 8px;
}

.ui-dense .category-selector-card,
.ui-dense .category-titles-card {
    padding: 10px 12px;
    margin-bottom: 8px;
}

.ui-dense .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px;
}

.ui-dense .category-button {
    padding: 6px 4px;
}

.ui-dense .category-icon {
    font-size: 1.3em;
    margin-bottom: 2px;
}

.ui-dense .category-name {
    font-size: 0.86em;
}

.ui-dense .category-count {
    font-size: 0.74em;
}

/* ================================================
   8. 成績タブ
   ================================================ */

.ui-compact .results-container {
    padding: 12px;
}

.ui-compact .stats-summary-card,
.ui-compact .progress-chart-card,
.ui-compact .weak-keys-card,
.ui-compact .recent-results-card {
    padding: 14px 16px;
    margin-bottom: 12px;
}

.ui-compact .summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.ui-compact .summary-item {
    padding: 10px 8px;
}

.ui-compact .summary-label {
    margin-bottom: 4px;
    font-size: 0.88em;
}

.ui-compact .summary-value {
    font-size: 1.6em;
}

.ui-compact .chart-period-selector,
.ui-compact .weak-keys-period-selector {
    gap: 6px;
    margin-bottom: 10px;
}

.ui-compact .period-btn,
.ui-compact .weak-period-btn {
    padding: 4px 13px;
    font-size: 0.88em;
    border-width: 1px;
    border-radius: 13px;
}

.ui-compact .chart-container {
    margin-bottom: 14px;
}

.ui-compact .weak-keys-grid {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
}

.ui-compact .weak-key-item {
    padding: 9px 4px;
}

.ui-compact .weak-key-char {
    font-size: 1.5em;
    margin-bottom: 3px;
}

.ui-compact .weak-key-count {
    font-size: 0.82em;
}

.ui-compact .results-table th,
.ui-compact .results-table td {
    padding: 5px 8px;
    font-size: 0.9em;
}

.ui-dense .results-container {
    padding: 8px;
}

.ui-dense .stats-summary-card,
.ui-dense .progress-chart-card,
.ui-dense .weak-keys-card,
.ui-dense .recent-results-card {
    padding: 10px 12px;
    margin-bottom: 8px;
}

.ui-dense .summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 6px;
}

.ui-dense .summary-item {
    padding: 7px 5px;
}

.ui-dense .summary-value {
    font-size: 1.35em;
}

.ui-dense .weak-keys-grid {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 5px;
}

.ui-dense .weak-key-item {
    padding: 6px 3px;
}

.ui-dense .weak-key-char {
    font-size: 1.25em;
}

.ui-dense .results-table th,
.ui-dense .results-table td {
    padding: 3px 6px;
    font-size: 0.86em;
}

/* ================================================
   9. 文章タイピング（問題カード / フィルター）
   ================================================ */

.ui-compact .filter-section {
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
}

.ui-compact .filter-group {
    gap: 6px;
}

.ui-compact .filter-group select {
    padding: 4px 8px;
    font-size: 0.86em;
    border-width: 1px;
}

.ui-compact .question-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.ui-compact .question-card {
    padding: 11px 13px;
    border-width: 1px;
    border-radius: 9px;
}

.ui-compact .question-card:hover {
    transform: translateY(-2px);
}

.ui-compact .question-header {
    margin-bottom: 7px;
    gap: 7px;
}

.ui-compact .question-title {
    font-size: 1em;
}

.ui-compact .difficulty-badge {
    padding: 2px 9px;
    font-size: 0.78em;
}

.ui-compact .question-preview {
    font-size: 0.85em;
    line-height: 1.45;
    margin: 6px 0;
    min-height: 0;
}

.ui-compact .question-meta {
    gap: 9px;
    margin-top: 7px;
    padding-top: 7px;
}

.ui-compact .meta-item {
    font-size: 0.79em;
}

.ui-dense .question-grid {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 7px;
}

.ui-dense .question-card {
    padding: 8px 10px;
}

.ui-dense .question-card:hover {
    transform: none;
}

.ui-dense .question-preview {
    font-size: 0.82em;
    margin: 4px 0;
}

.ui-dense .filter-section {
    padding: 7px 9px;
    margin-bottom: 8px;
    gap: 8px;
}

/* ================================================
   10. チュートリアルタブ
   ================================================ */

.ui-compact .tutorial-container {
    padding: 12px;
}

.ui-compact .tutorial-header {
    padding: 14px 16px;
}

.ui-compact .tutorial-basics-card,
.ui-compact .tutorial-keyboard-card {
    padding: 14px 16px;
}

.ui-compact .basics-grid {
    gap: 10px;
}

.ui-compact .basics-item {
    padding: 10px;
}

.ui-compact .basics-icon {
    font-size: 1.7em;
}

.ui-dense .tutorial-container {
    padding: 8px;
}

.ui-dense .tutorial-basics-card,
.ui-dense .tutorial-keyboard-card,
.ui-dense .tutorial-header {
    padding: 10px 12px;
}

/* ================================================
   10b. モード選択画面（index.php）
   ================================================ */

.ui-compact .header {
    padding: 10px 16px;
}

.ui-compact .header h1 {
    font-size: 1.3em;
}

.ui-compact .user-area {
    gap: 10px;
}

.ui-compact .main-content {
    padding: 16px 12px;
}

.ui-compact .mode-selection-container {
    padding: 20px 18px;
}

.ui-compact .welcome-section {
    margin-bottom: 18px;
}

.ui-compact .welcome-section h2 {
    font-size: 1.7em;
    margin-bottom: 6px;
}

.ui-compact .welcome-section p {
    font-size: 1em;
}

.ui-compact .mode-cards {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.ui-compact .mode-card {
    padding: 16px 14px;
}

.ui-compact .mode-card .mode-icon {
    font-size: 2.4em;
    margin-bottom: 8px;
}

.ui-compact .mode-title {
    font-size: 1.25em;
    margin-bottom: 6px;
}

.ui-compact .mode-description {
    font-size: 0.9em;
}

.ui-compact .explore-links {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.ui-compact .explore-link {
    padding: 9px 12px;
    gap: 10px;
}

.ui-compact .explore-icon {
    font-size: 1.35em;
}

.ui-compact .explore-desc {
    font-size: 0.78em;
    margin-top: 1px;
}

.ui-compact .news-section {
    padding: 12px 14px;
    margin-bottom: 16px;
}

.ui-compact .news-heading {
    margin: 0 0 8px;
}

.ui-compact .news-list a {
    padding: 5px 3px;
    gap: 10px;
}

.ui-compact .news-more {
    margin-top: 7px;
}

.ui-compact .notification {
    padding: 8px 14px;
    margin-bottom: 12px;
    font-size: 0.92em;
}

.ui-dense .main-content {
    padding: 10px 8px;
}

.ui-dense .mode-selection-container {
    padding: 14px 12px;
}

.ui-dense .welcome-section {
    margin-bottom: 12px;
}

.ui-dense .welcome-section h2 {
    font-size: 1.45em;
}

.ui-dense .mode-cards {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.ui-dense .mode-card {
    padding: 11px 10px;
}

.ui-dense .mode-card:hover {
    transform: none;
}

.ui-dense .mode-card .mode-icon {
    font-size: 1.9em;
    margin-bottom: 5px;
}

.ui-dense .mode-title {
    font-size: 1.1em;
}

.ui-dense .explore-links {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 7px;
    margin-bottom: 12px;
}

.ui-dense .explore-link {
    padding: 6px 9px;
}

.ui-dense .news-section {
    padding: 9px 11px;
    margin-bottom: 12px;
}

.ui-dense .news-list a {
    padding: 3px 2px;
}

/* ================================================
   11. フッター
   ================================================ */

.ui-compact .common-footer {
    padding: 20px 16px 12px;
    margin-top: 24px;
}

.ui-compact .footer-content {
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.ui-compact .footer-section h4 {
    margin-bottom: 8px;
    font-size: 1em;
    padding-bottom: 5px;
}

.ui-compact .footer-section p {
    margin: 4px 0;
    font-size: 0.88em;
}

.ui-compact .footer-section ul li {
    margin: 4px 0;
    font-size: 0.88em;
}

.ui-dense .common-footer {
    padding: 14px 12px 10px;
    margin-top: 16px;
}

.ui-dense .footer-content {
    gap: 12px;
}

/* ================================================
   12. 表示密度セレクタ（リストボックス）本体
   ================================================ */

.ui-density-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.ui-density-switch .ui-density-label {
    font-size: 0.8em;
    opacity: 0.9;
    cursor: pointer;
}

.ui-density-switch .ui-density-select {
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.85em;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.ui-density-switch .ui-density-select:hover,
.ui-density-switch .ui-density-select:focus {
    background: #fff;
    color: #FF8C00;
    outline: none;
}

/* option はネイティブ描画のため配色を明示 */
.ui-density-switch .ui-density-select option {
    color: #333;
    background: #fff;
}

/* 明るい背景（モードナビ内など）に置く場合のバリエーション */
.ui-density-switch--light .ui-density-select {
    border-color: #ddd;
    background: #fff;
    color: #555;
}

.ui-density-switch--light .ui-density-label {
    color: #666;
}

/* ================================================
   13. モバイル調整
   base.css の @media 内 html { font-size } を上書きする
   ================================================ */

@media (max-width: 768px) {
    html.ui-compact {
        font-size: 14px;
    }

    html.ui-compact.ui-dense {
        font-size: 13px;
    }

    .ui-compact #maintitle {
        padding: 8px 12px;
    }

    .ui-compact .mode-nav-content,
    .ui-compact .tab-nav-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .ui-compact .ui-density-switch .ui-density-label {
        display: none;
    }
}

@media (max-width: 480px) {
    html.ui-compact {
        font-size: 13px;
    }

    html.ui-compact.ui-dense {
        font-size: 12px;
    }
}

/* ================================================
   14. 印刷時は密度指定を無効化
   ================================================ */

@media print {
    .ui-density-switch {
        display: none !important;
    }
}