/**
 * 五色百人一首 練習ツール スタイル
 * 百人一首.jp
 * プレフィックス: gp-
 */

/* ============================
   共通
   ============================ */
.gp-container {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.gp-breadcrumb {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-6);
}

.gp-breadcrumb a {
    color: var(--color-text-tertiary);
    text-decoration: none;
}

.gp-breadcrumb a:hover {
    color: var(--color-accent);
}

.gp-breadcrumb span {
    margin: 0 var(--space-1);
}

/* ============================
   色選択画面
   ============================ */
.gp-color-select {
    text-align: center;
    padding: var(--space-8) 0;
}

.gp-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
    line-height: 1.4;
}

.gp-subtitle {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
}

.gp-color-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    max-width: 400px;
    margin: 0 auto var(--space-8);
}

.gp-color-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: 120px;
    border: 3px solid transparent;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
    padding: var(--space-3);
    position: relative;
    overflow: hidden;
}

.gp-color-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.gp-color-btn:active {
    transform: scale(0.96);
}

.gp-color-name {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-xl);
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.gp-color-count {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.9);
    margin-top: var(--space-1);
}

.gp-color-progress {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.85);
    margin-top: var(--space-1);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 2px 8px;
}

/* 各色ボタン */
.gp-color-btn--blue {
    background: var(--color-goshoku-blue);
    border-color: var(--color-goshoku-blue);
}

.gp-color-btn--pink {
    background: var(--color-goshoku-pink);
    border-color: var(--color-goshoku-pink);
}

.gp-color-btn--yellow {
    background: var(--color-goshoku-yellow);
    border-color: var(--color-goshoku-yellow);
}

.gp-color-btn--yellow .gp-color-name,
.gp-color-btn--yellow .gp-color-count {
    color: #6B5900;
    text-shadow: none;
}

.gp-color-btn--yellow .gp-color-progress {
    color: #6B5900;
    background: rgba(107, 89, 0, 0.15);
}

.gp-color-btn--green {
    background: var(--color-goshoku-green);
    border-color: var(--color-goshoku-green);
}

.gp-color-btn--orange {
    background: var(--color-goshoku-orange);
    border-color: var(--color-goshoku-orange);
}

/* ============================
   モード選択画面
   ============================ */
.gp-mode-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.gp-back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: background var(--duration-fast) var(--ease-default);
}

.gp-back-btn:hover {
    background: var(--color-bg-secondary);
}

.gp-selected-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-sm);
    font-weight: 500;
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    color: #fff;
}

.gp-selected-badge--blue   { background: var(--color-goshoku-blue); }
.gp-selected-badge--pink   { background: var(--color-goshoku-pink); }
.gp-selected-badge--yellow { background: var(--color-goshoku-yellow); color: #6B5900; }
.gp-selected-badge--green  { background: var(--color-goshoku-green); }
.gp-selected-badge--orange { background: var(--color-goshoku-orange); }

.gp-mode-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-2xl);
    font-weight: 500;
    color: var(--color-text-primary);
    text-align: center;
    margin-bottom: var(--space-6);
}

.gp-mode-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    max-width: 480px;
    margin: 0 auto;
}

.gp-mode-card {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    text-align: left;
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
}

.gp-mode-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.gp-mode-card:active {
    transform: scale(0.98);
}

.gp-mode-icon {
    font-size: 2rem;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
}

.gp-mode-name {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.gp-mode-desc {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* ============================
   共通パーツ: ヘッダ・プログレス
   ============================ */
.gp-practice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.gp-practice-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--color-text-primary);
}

.gp-practice-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.gp-control-btn {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-default);
}

.gp-control-btn:hover {
    background: var(--color-border-light);
}

.gp-speech-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.125rem;
    transition: background var(--duration-fast) var(--ease-default);
}

.gp-speech-btn:hover {
    background: var(--color-border-light);
}

.gp-speech-btn.is-speaking {
    background: var(--color-accent);
    color: #fff;
}

/* Auto-read toggle (goshoku) */
.gp-auto-read-toggle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-default),
                border-color var(--duration-fast) var(--ease-default);
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.gp-auto-read-toggle:hover {
    background: var(--color-border-light);
}

.gp-auto-read-toggle.is-active {
    border-color: var(--color-accent);
    background: rgba(0, 113, 227, 0.08);
    color: var(--color-accent);
}

/* 色テーマでトグルのアクティブ色を変更 */
.gp-theme--blue .gp-auto-read-toggle.is-active   { border-color: var(--color-goshoku-blue); color: var(--color-goshoku-blue); }
.gp-theme--pink .gp-auto-read-toggle.is-active   { border-color: var(--color-goshoku-pink); color: var(--color-goshoku-pink); }
.gp-theme--yellow .gp-auto-read-toggle.is-active { border-color: var(--color-goshoku-yellow); color: #6B5900; }
.gp-theme--green .gp-auto-read-toggle.is-active  { border-color: var(--color-goshoku-green); color: var(--color-goshoku-green); }
.gp-theme--orange .gp-auto-read-toggle.is-active { border-color: var(--color-goshoku-orange); color: var(--color-goshoku-orange); }

.gp-progress {
    margin-bottom: var(--space-6);
}

.gp-progress-info {
    display: flex;
    justify-content: space-between;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.gp-progress-bar {
    height: 8px;
    background: var(--color-bg-secondary);
    border-radius: 999px;
    overflow: hidden;
}

.gp-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s var(--ease-default);
}

/* 色テーマ */
.gp-theme--blue .gp-progress-fill   { background: var(--color-goshoku-blue); }
.gp-theme--pink .gp-progress-fill   { background: var(--color-goshoku-pink); }
.gp-theme--yellow .gp-progress-fill { background: var(--color-goshoku-yellow); }
.gp-theme--green .gp-progress-fill  { background: var(--color-goshoku-green); }
.gp-theme--orange .gp-progress-fill { background: var(--color-goshoku-orange); }

/* ============================
   クイズモード
   ============================ */
.gp-quiz-question {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    margin-bottom: var(--space-6);
}

.gp-quiz-hint {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-4);
}

.gp-quiz-kami {
    font-family: 'Shippori Mincho', serif;
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.8;
}

.gp-quiz-choices {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.gp-quiz-choice {
    display: block;
    width: 100%;
    font-family: 'Shippori Mincho', serif;
    font-size: clamp(1rem, 3vw, 1.125rem);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    text-align: left;
    min-height: 56px;
    transition: border-color var(--duration-fast) var(--ease-default),
                background var(--duration-fast) var(--ease-default),
                transform var(--duration-fast) var(--ease-default);
}

.gp-quiz-choice:hover:not(.is-disabled) {
    border-color: var(--color-accent);
    background: rgba(0, 113, 227, 0.04);
}

.gp-quiz-choice:active:not(.is-disabled) {
    transform: scale(0.98);
}

.gp-quiz-choice.is-disabled {
    cursor: default;
    pointer-events: none;
}

.gp-quiz-choice.is-correct {
    border-color: #34C759;
    background: rgba(52, 199, 89, 0.08);
    animation: gp-correct-bounce 0.4s var(--ease-default);
}

.gp-quiz-choice.is-wrong {
    border-color: #FF3B30;
    background: rgba(255, 59, 48, 0.08);
    animation: gp-wrong-shake 0.4s var(--ease-default);
}

/* クイズフィードバック */
.gp-quiz-feedback {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    margin-top: var(--space-4);
}

.gp-feedback-message {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-2xl);
    font-weight: 500;
    margin-bottom: var(--space-3);
}

.gp-feedback-message.is-correct {
    color: #34C759;
}

.gp-feedback-message.is-wrong {
    color: #FF3B30;
}

.gp-feedback-poem {
    font-family: 'Shippori Mincho', serif;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-2);
}

.gp-feedback-poet {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-5);
}

.gp-feedback-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
}

.gp-btn {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-base);
    font-weight: 500;
    padding: var(--space-3) var(--space-6);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    min-height: 48px;
    transition: transform var(--duration-fast) var(--ease-default),
                opacity var(--duration-fast) var(--ease-default);
}

.gp-btn:active {
    transform: scale(0.96);
}

.gp-btn--primary {
    color: #fff;
    background: var(--color-accent);
}

.gp-btn--primary:hover {
    opacity: 0.9;
}

.gp-btn--secondary {
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
}

.gp-btn--secondary:hover {
    background: var(--color-border-light);
}

.gp-btn--lg {
    font-size: var(--text-lg);
    padding: var(--space-4) var(--space-8);
    min-height: 56px;
}

/* 色テーマでプライマリボタンの色を変更 */
.gp-theme--blue .gp-btn--primary   { background: var(--color-goshoku-blue); }
.gp-theme--pink .gp-btn--primary   { background: var(--color-goshoku-pink); }
.gp-theme--yellow .gp-btn--primary { background: var(--color-goshoku-yellow); color: #6B5900; }
.gp-theme--green .gp-btn--primary  { background: var(--color-goshoku-green); }
.gp-theme--orange .gp-btn--primary { background: var(--color-goshoku-orange); }

/* ============================
   フラッシュカードモード
   ============================ */
.gp-flash-area {
    perspective: 1000px;
    margin-bottom: var(--space-6);
}

.gp-flash-card {
    position: relative;
    width: 100%;
    min-height: 280px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.5s var(--ease-default);
}

.gp-flash-card.is-flipped {
    transform: rotateY(180deg);
}

.gp-flash-card-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-6);
    backface-visibility: hidden;
    border-radius: var(--radius-xl);
    border: 2px solid var(--color-border-light);
    background: var(--color-bg-primary);
}

.gp-flash-card-back {
    transform: rotateY(180deg);
}

.gp-flash-label {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
}

.gp-flash-text {
    font-family: 'Shippori Mincho', serif;
    font-size: clamp(1.25rem, 4.5vw, 1.75rem);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.8;
    text-align: center;
}

.gp-flash-poet {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    margin-top: var(--space-4);
}

.gp-flash-tap-hint {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-4);
}

.gp-flash-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.gp-flash-nav-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.25rem;
    transition: background var(--duration-fast) var(--ease-default);
}

.gp-flash-nav-btn:hover {
    background: var(--color-border-light);
}

.gp-flash-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.gp-flash-counter {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    min-width: 60px;
    text-align: center;
}

.gp-flash-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
}

.gp-btn--mastered {
    background: #34C759;
    color: #fff;
}

.gp-btn--mastered:hover {
    opacity: 0.9;
}

.gp-btn--mastered.is-active {
    background: #2DA44E;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================
   かるたモード
   ============================ */
.gp-karuta-reader {
    background: var(--color-bg-primary);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    margin-bottom: var(--space-6);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gp-karuta-reader-label {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-3);
}

.gp-karuta-reader-text {
    font-family: 'Shippori Mincho', serif;
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.8;
    min-height: 2em;
}

.gp-karuta-reader-text .gp-char {
    display: inline-block;
    opacity: 0;
    animation: gp-char-appear 0.15s forwards;
}

.gp-karuta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.gp-karuta-card {
    font-family: 'Shippori Mincho', serif;
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-2);
    cursor: pointer;
    text-align: center;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.6;
    transition: transform var(--duration-fast) var(--ease-default),
                border-color var(--duration-fast) var(--ease-default),
                opacity var(--duration-normal) var(--ease-default);
}

.gp-karuta-card:hover:not(.is-disabled) {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.gp-karuta-card:active:not(.is-disabled) {
    transform: scale(0.95);
}

.gp-karuta-card.is-correct {
    border-color: #34C759;
    background: rgba(52, 199, 89, 0.1);
    animation: gp-correct-bounce 0.4s var(--ease-default);
}

.gp-karuta-card.is-wrong {
    animation: gp-wrong-shake 0.3s var(--ease-default);
    border-color: #FF3B30;
}

.gp-karuta-card.is-found {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
    transition: all 0.4s var(--ease-default);
}

.gp-karuta-card.is-disabled {
    cursor: default;
    pointer-events: none;
}

.gp-karuta-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.gp-karuta-stat-value {
    font-weight: 500;
    color: var(--color-text-primary);
}

/* ============================
   AI対戦かるたモード
   ============================ */
.gp-ai-settings {
    text-align: center;
    padding: var(--space-6) 0;
}

.gp-ai-settings-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--space-6);
}

.gp-ai-level-group {
    margin-bottom: var(--space-8);
}

.gp-ai-level-label {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
    display: block;
}

.gp-ai-level-options {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
}

.gp-ai-level-btn {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    min-width: 96px;
    transition: border-color var(--duration-fast) var(--ease-default),
                background var(--duration-fast) var(--ease-default);
}

.gp-ai-level-btn:hover {
    background: var(--color-border-light);
}

.gp-ai-level-btn.is-selected {
    border-color: var(--color-accent);
    background: rgba(0, 113, 227, 0.08);
    color: var(--color-accent);
}

/* 色テーマでAIレベルボタンのアクティブ色を変更 */
.gp-theme--blue .gp-ai-level-btn.is-selected   { border-color: var(--color-goshoku-blue); color: var(--color-goshoku-blue); }
.gp-theme--pink .gp-ai-level-btn.is-selected   { border-color: var(--color-goshoku-pink); color: var(--color-goshoku-pink); }
.gp-theme--yellow .gp-ai-level-btn.is-selected { border-color: var(--color-goshoku-yellow); color: #6B5900; }
.gp-theme--green .gp-ai-level-btn.is-selected  { border-color: var(--color-goshoku-green); color: var(--color-goshoku-green); }
.gp-theme--orange .gp-ai-level-btn.is-selected { border-color: var(--color-goshoku-orange); color: var(--color-goshoku-orange); }

.gp-ai-scoreboard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
}

.gp-ai-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-width: 80px;
}

.gp-ai-score-label {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

.gp-ai-score-value {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
}

.gp-ai-vs {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-tertiary);
}

.gp-karuta-card.is-ai-taken {
    border-color: #FF9500;
    background: rgba(255, 149, 0, 0.1);
    position: relative;
}

.gp-karuta-card.is-ai-taken::after {
    content: 'AI';
    position: absolute;
    top: 4px;
    right: 6px;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #FF9500;
}

/* ============================
   結果画面
   ============================ */
.gp-result {
    text-align: center;
    padding: var(--space-10) var(--space-4);
}

.gp-result-stars {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.gp-star {
    font-size: 2.5rem;
    opacity: 0.2;
    transition: opacity 0.3s, transform 0.3s;
}

.gp-star.is-active {
    opacity: 1;
    animation: gp-star-pop 0.4s var(--ease-default);
}

.gp-result-message {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-2xl);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.gp-result-detail {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
}

.gp-result-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.gp-result-stat {
    text-align: center;
}

.gp-result-stat-label {
    display: block;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-1);
}

.gp-result-stat-value {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-2xl);
    font-weight: 500;
    color: var(--color-text-primary);
}

.gp-result-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

/* ============================
   ローディング
   ============================ */
.gp-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-4);
}

.gp-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: gp-spin 0.8s linear infinite;
    margin-bottom: var(--space-4);
}

.gp-loading-text {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
}

/* 色テーマでスピナーの色を変更 */
.gp-theme--blue .gp-loading-spinner   { border-top-color: var(--color-goshoku-blue); }
.gp-theme--pink .gp-loading-spinner   { border-top-color: var(--color-goshoku-pink); }
.gp-theme--yellow .gp-loading-spinner { border-top-color: var(--color-goshoku-yellow); }
.gp-theme--green .gp-loading-spinner  { border-top-color: var(--color-goshoku-green); }
.gp-theme--orange .gp-loading-spinner { border-top-color: var(--color-goshoku-orange); }

/* 色テーマでクイズ質問カードの枠色を変更 */
.gp-theme--blue .gp-quiz-question     { border-color: rgba(0, 113, 227, 0.3); }
.gp-theme--pink .gp-quiz-question     { border-color: rgba(255, 45, 85, 0.3); }
.gp-theme--yellow .gp-quiz-question   { border-color: rgba(255, 204, 0, 0.3); }
.gp-theme--green .gp-quiz-question    { border-color: rgba(52, 199, 89, 0.3); }
.gp-theme--orange .gp-quiz-question   { border-color: rgba(255, 149, 0, 0.3); }

/* 色テーマでフラッシュカードの枠色を変更 */
.gp-theme--blue .gp-flash-card-face   { border-color: rgba(0, 113, 227, 0.3); }
.gp-theme--pink .gp-flash-card-face   { border-color: rgba(255, 45, 85, 0.3); }
.gp-theme--yellow .gp-flash-card-face { border-color: rgba(255, 204, 0, 0.3); }
.gp-theme--green .gp-flash-card-face  { border-color: rgba(52, 199, 89, 0.3); }
.gp-theme--orange .gp-flash-card-face { border-color: rgba(255, 149, 0, 0.3); }

/* 色テーマでかるた読み上げ枠の色を変更 */
.gp-theme--blue .gp-karuta-reader     { border-color: rgba(0, 113, 227, 0.3); }
.gp-theme--pink .gp-karuta-reader     { border-color: rgba(255, 45, 85, 0.3); }
.gp-theme--yellow .gp-karuta-reader   { border-color: rgba(255, 204, 0, 0.3); }
.gp-theme--green .gp-karuta-reader    { border-color: rgba(52, 199, 89, 0.3); }
.gp-theme--orange .gp-karuta-reader   { border-color: rgba(255, 149, 0, 0.3); }

/* ============================
   SEOコンテンツ
   ============================ */
.gp-seo-content {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border-light);
}

.gp-seo-content h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.gp-seo-content h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

.gp-seo-content p {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-4);
}

.gp-seo-content ul {
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
}

.gp-seo-content li {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-1);
}

/* ============================
   アニメーション
   ============================ */
@keyframes gp-correct-bounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes gp-wrong-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@keyframes gp-star-pop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes gp-char-appear {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes gp-spin {
    to { transform: rotate(360deg); }
}

/* ============================
   レスポンシブ
   ============================ */
@media (max-width: 600px) {
    .gp-color-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 280px;
    }

    .gp-color-btn {
        min-height: 100px;
    }

    .gp-karuta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gp-result-stats {
        gap: var(--space-4);
    }

    .gp-karuta-stats {
        gap: var(--space-4);
    }
}