/* ─── Root ─────────────────────────────────────────────────────────────────── */
#chindogu-game {
    max-width: 640px;
    margin: 0 auto;
    padding: 1rem;
    font-family: inherit;
}

.cg-game {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 160px);
    max-height: calc(100dvh - 160px);
    min-height: 380px;
}
.cg-game > .cg-header { flex-shrink: 0; }
.cg-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.cg-crop-wrap { flex-shrink: 0; }
.cg-next-row  { flex-shrink: 0; }

.cg-loading, .cg-error {
    text-align: center;
    padding: 4rem 1rem;
    color: #999;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* ─── Home ─────────────────────────────────────────────────────────────────── */
.cg-home { text-align: center; }

.cg-logo {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    font-weight: 800;
    margin: 0 0 .4rem;
    color: #1a1a1a;
}

.cg-tagline {
    color: #777;
    margin: 0 0 2rem;
    font-size: .95rem;
}

/* Section label */
.cg-section-lbl {
    font-size: .75rem;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 .6rem;
    text-align: left;
}

/* Mode cards */
.cg-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.cg-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: 1.25rem 1rem;
    background: #fff;
    color: #1a1a1a !important;
    border: 2px solid #e0d5c5;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.cg-mode-btn:hover {
    border-color: #c8a96e;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.cg-mode-ico  { font-size: 2rem; }
.cg-mode-name { font-weight: 700; font-size: .95rem; color: #1a1a1a; }
.cg-mode-desc { font-size: .78rem; color: #999; line-height: 1.3; }

/* Quiz section block */
.cg-quiz-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 2px dashed #e0d5c5;
}
.cg-mode-btn-quiz {
    width: 100%;
    flex-direction: row;
    gap: .75rem;
    text-align: left;
    background: #fdf8f0;
    border-color: #c8a96e;
}
.cg-mode-btn-quiz .cg-mode-ico { font-size: 1.6rem; flex-shrink: 0; }
.cg-mode-btn-quiz .cg-mode-name { font-size: 1rem; }

/* Difficulty */
.cg-diff-row { margin-bottom: 1rem; }
.cg-diff-label { font-size: .8rem; color: #aaa; display: block; margin-bottom: .45rem; }
.cg-diff-btns { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

.cg-diff-btn {
    padding: .38rem 1rem;
    border: 2px solid #e0d5c5;
    border-radius: 20px;
    background: #fff;
    color: #1a1a1a !important;
    cursor: pointer;
    font-size: .88rem;
    transition: all .15s;
}
.cg-diff-btn.active,
.cg-diff-btn:hover { border-color: #c8a96e; background: #c8a96e; color: #fff; }

/* Name */
.cg-name-row { margin-bottom: 1.25rem; }
.cg-name-input {
    padding: .48rem 1rem;
    border: 2px solid #e0d5c5;
    border-radius: 8px;
    font-size: .9rem;
    width: 220px;
    text-align: center;
    transition: border-color .15s;
}
.cg-name-input:focus { outline: none; border-color: #c8a96e; }

.cg-stats-link {
    background: none;
    border: none;
    color: #c8a96e;
    cursor: pointer;
    font-size: .88rem;
    text-decoration: underline;
    padding: 0;
}

/* ─── Game header ──────────────────────────────────────────────────────────── */
.cg-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.cg-back-btn {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: .85rem;
    white-space: nowrap;
    padding: 0;
    flex-shrink: 0;
}
.cg-back-btn:hover { color: #666; }

.cg-progress { flex: 1; min-width: 0; }
.cg-game-meta { font-size: .7rem; color: #c8a96e; font-weight: 600; display: block; margin-bottom: .1rem; }
.cg-q-num { font-size: .78rem; color: #aaa; display: block; margin-bottom: .2rem; }
.cg-bar { height: 5px; background: #eee; border-radius: 3px; overflow: hidden; }
.cg-bar-fill { height: 100%; background: #c8a96e; border-radius: 3px; transition: width .35s; }

.cg-score-hd { text-align: right; flex-shrink: 0; }
.cg-score-num { font-weight: 700; font-size: 1.05rem; display: block; }
.cg-score-pts { font-size: .72rem; color: #bbb; }

/* ─── G-01: Crop ───────────────────────────────────────────────────────────── */
.cg-crop-wrap { text-align: center; margin-bottom: 1rem; }

.cg-crop-box {
    display: inline-block;
    width: min(240px, 56vw, 30svh);
    height: min(240px, 56vw, 30svh);
    overflow: hidden;
    border-radius: 14px;
    position: relative;
    background: #f0ebe2;
    box-shadow: 0 4px 18px rgba(0,0,0,.12);
}

.cg-crop-box img { max-width: none; display: block; }

/* ─── Choices: text ────────────────────────────────────────────────────────── */
.cg-text-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
}

.cg-choice-btn {
    padding: .7rem .5rem;
    background: #fff;
    color: #1a1a1a !important;
    border: 2px solid #e0d5c5;
    border-radius: 10px;
    cursor: pointer;
    font-size: .88rem;
    line-height: 1.35;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.cg-choice-btn:hover:not(:disabled) { border-color: #c8a96e; background: #fdf8f0; color: #1a1a1a !important; }

/* ─── Choices: images ──────────────────────────────────────────────────────── */
.cg-g02-title { text-align: center; margin-bottom: 1.25rem; }
.cg-find-label { font-size: .8rem; color: #aaa; margin: 0 0 .2rem; }
.cg-find-title { font-size: 1.25rem; font-weight: 700; margin: 0; color: #1a1a1a; line-height: 1.3; }

.cg-img-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    flex: 1;
    min-height: 0;
}

.cg-img-btn {
    aspect-ratio: 1;
    overflow: hidden;
    border: 3px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    background: #f5f0e8;
    transition: border-color .15s, transform .15s;
    padding: 0;
    min-height: 0;
    max-height: min(160px, 22svh);
}
.cg-img-btn:hover:not(:disabled) { border-color: #c8a96e; transform: scale(1.02); }
.cg-img-btn:disabled { cursor: default; }

/* Quiz: full-image display (no crop, object-fit cover) */
.cg-img-full { width: 100%; height: 100%; object-fit: cover; display: block; }

.cg-img-crop-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #f0ebe2;
}
.cg-img-crop-box img { max-width: none; display: block; }

/* ─── Answer highlights ────────────────────────────────────────────────────── */
.cg-choice-btn.cg-ok, .cg-img-btn.cg-ok {
    border-color: #27ae60 !important;
    background: #eafaf1 !important;
    color: #27ae60;
    font-weight: 700;
}
.cg-choice-btn.cg-err, .cg-img-btn.cg-err {
    border-color: #e74c3c !important;
    background: #fdf0ee !important;
    color: #e74c3c;
    opacity: .8;
}

/* ─── Next row ─────────────────────────────────────────────────────────────── */
.cg-next-row {
    margin-top: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
}
.cg-fb { font-weight: 700; font-size: .95rem; }
.cg-fb-ok  { color: #27ae60; }
.cg-fb-err { color: #e74c3c; }

.cg-next-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.cg-article-link { font-size: .82rem; color: #c8a96e; text-decoration: underline; }

.cg-next-btn, .cg-btn-primary {
    padding: .6rem 1.4rem;
    background: #c8a96e;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: .9rem;
    transition: background .15s;
}
.cg-next-btn:hover, .cg-btn-primary:hover { background: #b8944f; }

.cg-btn-secondary {
    padding: .6rem 1.4rem;
    background: #fff;
    color: #c8a96e !important;
    border: 2px solid #c8a96e;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: .9rem;
    transition: background .15s;
}
.cg-btn-secondary:hover { background: #fdf8f0; }

/* ─── Result ───────────────────────────────────────────────────────────────── */
.cg-result {
    text-align: center;
    padding: 2.5rem 1rem;
}
.cg-result-emoji { font-size: 4rem; line-height: 1; margin-bottom: .75rem; }
.cg-result-score {
    font-size: 2.8rem;
    font-weight: 800;
    margin: 0 0 .25rem;
    color: #1a1a1a;
}
.cg-result-pts { color: #999; margin: 0 0 1.5rem; font-size: .9rem; }

.cg-ach-list { margin-bottom: 1.5rem; }
.cg-ach-hd { font-size: .8rem; color: #aaa; margin: 0 0 .4rem; }
.cg-ach-badge {
    display: inline-block;
    padding: .28rem .7rem;
    background: #fdf8f0;
    border: 1px solid #c8a96e;
    border-radius: 20px;
    font-size: .82rem;
    margin: .15rem;
}

.cg-result-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ─── Stats ────────────────────────────────────────────────────────────────── */
.cg-stats-hd {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}
.cg-stats-title { font-size: 1.1rem; font-weight: 700; flex: 1; margin: 0; color: #1a1a1a; }

.cg-toggle-btn {
    padding: .32rem .85rem;
    border: 2px solid #c8a96e;
    background: #fff;
    border-radius: 20px;
    cursor: pointer;
    font-size: .82rem;
    color: #c8a96e;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.cg-toggle-btn.active { background: #c8a96e; color: #fff; }

.cg-my-rank {
    text-align: center;
    padding: .45rem;
    background: #fdf8f0;
    border-radius: 8px;
    margin-bottom: .75rem;
    font-size: .88rem;
    color: #777;
}

.cg-scores {
    border: 1px solid #e0d5c5;
    border-radius: 10px;
    overflow: hidden;
}

.cg-row {
    display: grid;
    align-items: center;
    padding: .48rem .75rem;
    gap: .3rem;
    font-size: .83rem;
}

.cg-head {
    background: #f5f0e8;
    color: #aaa;
    font-size: .75rem;
    font-weight: 700;
}

.cg-row:not(.cg-head) { border-top: 1px solid #f0ebe2; }
.cg-row.cg-me { background: #fdf8f0; font-weight: 600; }

.cg-rank { font-weight: 700; font-size: .9rem; }
.cg-pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-pts { font-weight: 700; color: #c8a96e; }

.cg-empty { text-align: center; color: #ccc; padding: 2.5rem; margin: 0; }

/* ─── Menu item ────────────────────────────────────────────────────────────── */
.cg-menu-play > a {
    display: inline-block !important;
    padding: .35rem .9rem !important;
    background: #2e7d32 !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    transition: background .2s !important;
}
.cg-menu-play > a:hover {
    background: #1b5e20 !important;
    color: #fff !important;
}

/* ─── Text quiz ────────────────────────────────────────────────────────────── */
.cg-quiz-text-wrap {
    flex-shrink: 0;
    margin-bottom: 1rem;
}
.cg-quiz-hint {
    font-size: .78rem;
    color: #aaa;
    margin: 0 0 .5rem;
    text-align: center;
}
.cg-quiz-excerpt {
    margin: 0;
    padding: .85rem 1rem;
    background: #fdf8f0;
    border-left: 3px solid #c8a96e;
    border-radius: 0 10px 10px 0;
    font-size: .92rem;
    line-height: 1.55;
    color: #444;
    overflow-y: auto;
    max-height: 38dvh;
}

/* ─── Mobile compact ───────────────────────────────────────────────────────── */
@media (max-height: 700px) {
    .cg-game { height: calc(100dvh - 140px); max-height: calc(100dvh - 140px); }
    .cg-header { margin-bottom: 0.75rem; }
    .cg-crop-box {
        width: min(180px, 46vw, 24dvh);
        height: min(180px, 46vw, 24dvh);
    }
    .cg-crop-wrap { margin-bottom: 0.65rem; }
    .cg-g02-title { margin-bottom: 0.65rem; }
    .cg-img-btn { max-height: min(130px, 18dvh); }
    .cg-next-row { margin-top: 0.65rem; }
    .cg-choice-btn { padding: .5rem .4rem; font-size: .83rem; }
}

@media (max-width: 360px) {
    #chindogu-game { padding: .6rem; }
    .cg-crop-box {
        width: min(160px, 44vw);
        height: min(160px, 44vw);
    }
    .cg-find-title { font-size: 1.05rem; }
    .cg-choice-btn { font-size: .8rem; padding: .45rem .3rem; }
    .cg-img-btn { max-height: min(120px, 40vw); }
}