/* 두뇌 놀이터 화면. 시니어가 쓰는 화면이라 글씨와 누를 곳을 키운다.

   전역이 아니라 .playground 안에만 적용하는 이유 — 전역으로 키우면 /quiz/ 의
   문제 풀이 화면까지 흔들린다. 두 화면은 대상 사용자가 다르다. */

/* 기획서(docs/plan/02_공통설계_UX가이드.md)의 노년기 시각 규칙을 여기에 담는다.
   전역이 아니라 .playground 안에만 두는 이유는 아래 첫 주석과 같다.

   - 순백 배경은 눈부심(glare)을 유발한다 → 아주 옅은 크림색
   - 순검정 글자보다 진회색이 눈이 덜 피로하다
   - 회색 글씨 금지. 보조 문구도 대비를 확보한다
   - 정보를 색으로만 전달하지 않는다 (각 게임 CSS 가 모양·글자를 함께 쓴다) */
.playground {
    font-size: 1.15rem;
    line-height: 1.7;
    letter-spacing: -0.01em;
}

:root:not([data-bs-theme="dark"]) .playground {
    --pg-cream: #FDF8EE;
}

:root:not([data-bs-theme="dark"]) .playground .card {
    background-color: var(--pg-cream);
}

/* 보조 문구가 회색으로 흐려지지 않게 대비를 되돌린다. 기획서 기준은 7:1 이다. */
:root:not([data-bs-theme="dark"]) .playground .text-body-secondary {
    color: #554C40 !important;
}

.playground .btn {
    min-height: 56px;
    font-size: 1.05rem;
    padding-inline: 1.25rem;
}

.playground .btn-lg {
    min-height: 64px;
    font-size: 1.2rem;
}

/* 초점 테두리를 굵게. 키보드로 쓰는 사람이 지금 어디에 있는지 놓치지 않게 한다. */
.playground :focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 3px;
}

/* ---------- 머리말 ---------- */

.playground-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.playground-date {
    font-weight: 600;
    color: var(--bs-secondary-color);
}

/* ---------- 오늘의 추천 ---------- */

.today-card {
    background: var(--bs-warning-bg-subtle);
    border: 1px solid var(--bs-warning-border-subtle);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 28px;
}

.today-title {
    text-align: center;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 16px;
}

.today-picks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* ---------- 게임 카드 ---------- */

.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}

.game-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    background: var(--bs-body-bg);
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.game-card:hover,
.game-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    color: inherit;
}

.game-card-icon {
    font-size: 2.4rem;
    line-height: 1;
    color: var(--bs-primary);
}

.game-card-name {
    font-weight: 700;
    font-size: 1.1rem;
}

.game-card-category {
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}

/* ---------- 연속 일수 · 배지 ---------- */

.streak-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--bs-tertiary-bg);
    margin-bottom: 20px;
}

.streak-number {
    font-family: var(--quiz-font-display, inherit);
    font-weight: 800;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--bs-primary);
}

.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}

.badge-tile {
    display: flex;
    /* 가운데 정렬하면 설명이 두 줄일 때 아이콘이 글 사이에 낀 것처럼 보인다. */
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--bs-border-color);
}

/* 아직 못 받은 배지는 흐리게 두되 지우지 않는다 — 무엇이 남았는지 보여야 한다. */
.badge-tile--locked {
    opacity: 0.38;
}

.badge-tile i {
    flex: 0 0 auto;
    font-size: 1.6rem;
    line-height: 1.2;
    color: var(--bs-warning);
}

/* ---------- 추이 막대 ---------- */

.trend {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 90px;
}

.trend-bar {
    flex: 1 1 0;
    min-height: 3px;
    height: var(--bar-height, 3px);
    border-radius: 3px 3px 0 0;
    background: var(--bs-primary);
    opacity: 0.85;
}

.trend-bar--empty {
    background: var(--bs-border-color);
    opacity: 1;
}

/* ---------- 순위표 ---------- */

.rank-me {
    background: var(--bs-primary-bg-subtle);
    font-weight: 700;
}

.rank-note {
    font-size: 0.92rem;
    color: var(--bs-secondary-color);
}

@media (prefers-reduced-motion: reduce) {
    .game-card {
        transition: none;
    }
}