/* ============================================================================
 * Melon Drop — giao diện quanh thùng trái cây
 * ----------------------------------------------------------------------------
 * Đống trái cây nằm trọn trong một canvas 2D; file này chỉ lo phần HTML bao
 * quanh: khung chứa canvas, thẻ điểm, lời khen và các bảng phủ (chào, hết
 * lượt, kết quả hai bé). Màu và bo góc lấy theo /site-chrome.css cho đồng bộ.
 *
 * Tông màu đi theo quầy trái cây: nền gỗ sẫm, lòng thùng kem, chữ nâu. Sáng
 * hẳn so với mấy game ban đêm của nhà mình là có chủ ý — game này chơi lâu,
 * mà nền tối thì mấy quả màu nóng bị chói mắt.
 * ==========================================================================*/

:root {
    --md-wood: #7a4a20;
    --md-cream: #fff6e0;
    --md-ink: #43290f;
    --md-red: #e0483c;
    --md-gold: #ffc53d;
    --md-kid1: #b5651d;
    --md-kid2: #2f7d8f;
    --font-round: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
    --font-fat: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #2a1b0e 0%, #1a1109 100%);
    font-family: var(--font-round);
    color: #fff6e6;
}

.unified-nav,
.site-footer {
    flex: 0 0 auto;
}

.brand-img {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

@media (max-width: 560px) {
    .brand-img { width: 30px; height: 30px; }
}

/* ---------- Khung sân ----------
   Thùng luôn là 7×10,2 ô, game.js tự co cho vừa khung này rồi canh giữa. Phần
   thừa hai bên chỉ là nền, không ảnh hưởng gì tới lối chơi. */
.game-wrapper {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 200, 120, 0.16), transparent 60%),
        #241708;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    overflow: hidden;
}

body.chrome-fit > .game-wrapper.game-wrapper {
    flex: 1 1 auto;
}

@media (max-width: 900px) {
    .game-wrapper {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

.board-host {
    position: absolute;
    inset: 0;
}

.board-host canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

/* ---------- Thẻ điểm ----------
   Một thẻ cho mỗi thùng, game.js đặt left/top/width theo đúng bề ngang thùng
   nên hai bé không bao giờ phải đoán xem điểm nào của ai. */
.chip {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 246, 224, 0.94);
    border: 2px solid rgba(67, 41, 15, 0.8);
    box-shadow: 0 3px 0 rgba(43, 25, 8, 0.4);
    color: var(--md-ink);
    font-family: var(--font-fat);
    pointer-events: none;
    box-sizing: border-box;
}

.chip[hidden] { display: none; }

.chip-1 { border-color: var(--md-kid1); }
.chip-2 { border-color: var(--md-kid2); }

.chip-name {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.75;
    white-space: nowrap;
}

.chip-score {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.1;
}

.chip-next {
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.8;
    white-space: nowrap;
}

.chip-next b { font-size: 1rem; }

/* ---------- Lời khen ---------- */
.tip {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    max-width: 88%;
    text-align: center;
    background: rgba(67, 41, 15, 0.9);
    border: 2px solid var(--md-gold);
    border-radius: 999px;
    padding: 10px 24px;
    font-family: var(--font-fat);
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffe9a8;
    pointer-events: none;
    animation: tipIn 0.3s ease both;
}

.tip.hidden { display: none; }

@keyframes tipIn {
    from { opacity: 0; transform: translateX(-50%) scale(0.8); }
    to { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* ---------- Nhắc phím ----------
   Chỉ có nghĩa với máy có bàn phím, nên máy cảm ứng ẩn hẳn đi — trên điện
   thoại nó vừa vô dụng vừa chiếm mất dải dưới thùng.

   Nằm ở góc trên bên trái chứ không nằm giữa đáy như mấy game khác: thùng trái
   cây cao gần hết khung và đống quả xếp từ ĐÁY lên, nên dải dưới là chỗ đông
   quả nhất — đặt chữ ở đó là che đúng chỗ bé đang nhìn. Hai bên thùng thì lúc
   nào cũng trống. */
.keys-hint {
    position: absolute;
    left: 12px;
    top: 10px;
    z-index: 6;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
    white-space: nowrap;
}

@media (pointer: fine) {
    .keys-hint { display: flex; }
}

.keys-hint .k-duo { display: none; }
.keys-hint.duo .k-solo { display: none; }
.keys-hint.duo .k-duo { display: block; }

/* Cửa sổ hẹp thì thùng nới ra sát mép trái, lúc ấy nhắc phím đè lên thùng —
   thà không nhắc còn hơn che mất trái cây. */
@media (max-width: 900px) {
    .keys-hint { display: none !important; }
}

.keys-hint.hidden { display: none; }

.keys-hint span {
    background: rgba(43, 25, 8, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #ffe9a8;
}

/* ---------- Bảng phủ ---------- */
.overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    /* align-items:center cắt mất đầu thẻ khi thẻ cao hơn bảng; margin:auto ở
       thẻ canh giữa y hệt nhưng lúc chật thì nhường chỗ chứ không cắt. */
    align-items: flex-start;
    justify-content: center;
    padding: 14px;
    background: rgba(26, 16, 7, 0.9);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.overlay.hidden { display: none; }

.card {
    width: min(680px, 100%);
    margin: auto;
    background: rgba(48, 30, 14, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    padding: 20px 22px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.pop-in { animation: popIn 0.28s cubic-bezier(0.2, 1.2, 0.4, 1) both; }

@keyframes popIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.title {
    font-family: var(--font-fat);
    font-size: clamp(1.9rem, 5vw, 2.9rem);
    font-weight: 800;
    margin: 0 0 6px;
    letter-spacing: 0.02em;
    background: linear-gradient(180deg, #ffe9a8, #ff922b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 4px 18px rgba(255, 146, 43, 0.25);
}

.title-sm {
    font-family: var(--font-fat);
    font-size: clamp(1.4rem, 3.6vw, 2rem);
    font-weight: 800;
    margin: 0 0 8px;
}

.text-good { color: #8ce99a; }

.subtitle {
    margin: 0 0 12px;
    color: #e8d3ae;
    font-size: 0.98rem;
}

/* ---------- Thang trái cây ----------
   Cả cái đích của game gói gọn trong một hàng emoji: bé nhìn một cái là biết
   phải leo từ quả nào lên tới quả nào, khỏi cần đọc chữ. */
.ladder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 14px;
    font-size: 1.05rem;
    line-height: 1.4;
}

/* Cỡ chữ tăng dần theo từng bậc: hàng emoji tự nó kể luôn câu chuyện "càng
   ghép càng to", khỏi cần một dòng giải thích nào. */
.ladder span { opacity: 0.85; }

.ladder span:nth-child(1) { font-size: 0.8rem; }
.ladder span:nth-child(2) { font-size: 0.88rem; }
.ladder span:nth-child(3) { font-size: 0.96rem; }
.ladder span:nth-child(4) { font-size: 1.04rem; }
.ladder span:nth-child(5) { font-size: 1.12rem; }
.ladder span:nth-child(6) { font-size: 1.2rem; }
.ladder span:nth-child(7) { font-size: 1.3rem; }
.ladder span:nth-child(8) { font-size: 1.4rem; }
.ladder span:nth-child(9) { font-size: 1.5rem; }

.ladder .ladder-goal {
    font-size: 1.9rem;
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(255, 197, 61, 0.7));
}

/* ---------- Chọn số bé ---------- */
.pick-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 14px;
}

.kid-btn {
    font-family: var(--font-fat);
    font-size: 1rem;
    font-weight: 800;
    padding: 10px 26px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #e8d3ae;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.kid-btn:hover { transform: translateY(-2px); }

.kid-btn.is-on {
    background: linear-gradient(135deg, #ffc93b, #ff922b);
    border-color: #fff;
    color: #3a2400;
}

/* ---------- Hướng dẫn ---------- */
.how-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.how-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.how-emoji { font-size: 1.7rem; line-height: 1; }
.how-item b { font-size: 0.98rem; color: #ffe9a8; }
.how-item span:last-child { font-size: 0.84rem; color: #e8d3ae; }

.rule-note {
    margin: 0 0 6px;
    font-size: 0.88rem;
    color: #e8d3ae;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 9px 12px;
}

/* ---------- Nút ---------- */
.btn {
    font-family: var(--font-fat);
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: 14px;
    padding: 11px 20px;
    cursor: pointer;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.12s ease, filter 0.12s ease;
}

.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: linear-gradient(135deg, #ffc93b, #ff922b);
    color: #3a2400;
    box-shadow: 0 8px 22px rgba(255, 146, 43, 0.35);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary.is-off { opacity: 0.55; }

.btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #e8d3ae;
}

.btn-big {
    font-size: 1.2rem;
    padding: 14px 44px;
}

.row-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* Nút CHƠI ghim đáy khung cuộn.
   Bài học rút từ lần sửa vùng chạm cho hai mươi game: bảng chào xếp chồng
   thang trái cây, chọn số bé, ba ô hướng dẫn rồi mới tới nút — trên iPad dựng
   đứng nó rơi xuống dưới đáy màn hình. Khung có cuộn được thật, nhưng trẻ con
   không tự nghĩ ra chuyện cuộn xuống tìm nút, thấy bảng dài không có nút là
   tưởng game hỏng. */
.row-buttons.sticky-cta {
    position: sticky;
    bottom: -20px;
    padding: 10px 0 12px;
    margin-bottom: -12px;
    background: linear-gradient(180deg, rgba(48, 30, 14, 0), rgba(48, 30, 14, 0.96) 35%);
}

/* ---------- Bảng kết quả ---------- */
.big-fruit {
    margin: 2px 0 8px;
    font-size: 3.2rem;
    line-height: 1;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

.new-best {
    margin: 0 0 10px;
    font-family: var(--font-fat);
    font-weight: 800;
    color: var(--md-gold);
    letter-spacing: 0.04em;
    animation: bestPulse 1s ease-in-out infinite alternate;
}

.new-best[hidden] { display: none; }

@keyframes bestPulse {
    from { transform: scale(1); }
    to { transform: scale(1.07); }
}

.score-rows {
    max-width: 320px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.score-row {
    display: flex;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 600;
}

.score-row span:last-child {
    color: var(--md-gold);
    font-family: var(--font-fat);
    font-weight: 800;
}

/* ---------- Màn hẹp ---------- */
@media (max-width: 640px) {
    .card { padding: 14px 12px; }

    .chip { padding: 3px 9px; gap: 5px; }
    .chip-name { font-size: 0.6rem; }
    .chip-score { font-size: 1rem; }
    .chip-next { font-size: 0.6rem; }
    .chip-next b { font-size: 0.9rem; }

    .tip { font-size: 1rem; padding: 8px 18px; }

    .how-row { grid-template-columns: 1fr; gap: 7px; margin-bottom: 10px; }
    .how-item {
        text-align: left;
        padding: 8px 10px;
        gap: 9px;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        align-items: center;
    }
    .how-emoji { grid-row: 1 / 3; font-size: 1.5rem; }
    .how-item b { font-size: 0.92rem; }
    .how-item span:last-child { font-size: 0.78rem; line-height: 1.25; }

    .title { margin-bottom: 2px; }
    .subtitle { margin-bottom: 8px; font-size: 0.88rem; }
    .ladder { margin-bottom: 10px; }
    .btn-big { font-size: 1.05rem; padding: 12px 30px; }
    .big-fruit { font-size: 2.6rem; }
}

/* ---------- Máy nằm ngang, màn thấp ----------
   Điện thoại xoay ngang chỉ còn khoảng 250 px chiều cao cho bảng chào, mà nó
   dựng theo bề ngang nên không rơi vào ngưỡng max-width phía trên. Ở đây co
   theo CHIỀU CAO để bé không phải cuộn mới thấy nút CHƠI. */
@media (max-height: 520px) {
    .card { padding: 10px 14px; }
    .title { font-size: 1.5rem; margin-bottom: 0; }
    .subtitle { font-size: 0.8rem; margin-bottom: 6px; }
    .ladder { margin-bottom: 7px; font-size: 0.9rem; }
    .ladder .ladder-goal { font-size: 1.4rem; }

    .pick-row { margin-bottom: 8px; }
    .kid-btn { padding: 8px 20px; font-size: 0.9rem; }

    .how-row { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 7px; }
    .how-item { padding: 6px 7px; gap: 1px; }
    .how-emoji { font-size: 1.15rem; }
    .how-item b { font-size: 0.8rem; }
    .how-item span:last-child { font-size: 0.68rem; line-height: 1.2; }

    .rule-note { padding: 6px 10px; font-size: 0.78rem; }
    .btn-big { font-size: 1rem; padding: 9px 26px; }
    .row-buttons { margin-top: 9px; }
    .big-fruit { font-size: 2.2rem; }
}