/* ============================================================================
 * Rót Màu — giao diện quanh giàn ống
 * ----------------------------------------------------------------------------
 * Giàn ống nằm trọn trong một canvas 2D; file này chỉ lo phần HTML bao quanh:
 * khung chứa canvas, thẻ tên, mách nước và các bảng phủ (chào, chọn màn, qua
 * màn, kết quả hai bé). Màu và bo góc lấy theo /site-chrome.css cho đồng bộ.
 *
 * Nền là màu nước trong veo, sáng hẳn so với mấy game ban đêm của nhà mình:
 * đây là game ngồi lâu, mà nền tối thì mười hai màu nước chói hết cả mắt.
 * ==========================================================================*/

:root {
    --ws-ink: #0b3a5d;
    --ws-gold: #ffc53d;
    --ws-kid1: #1c7ed6;
    --ws-kid2: #f06595;
    --font-round: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
    --font-fat: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
}

/* Thuộc tính hidden của HTML chỉ ẩn nhờ style mặc định của trình duyệt, mà
   style đó thua mọi khai báo display của mình — thiếu dòng này thì cái nút đặt
   hidden vẫn hiện ra. Bảng qua màn từng hiện cùng lúc cả "MÀN TIẾP" lẫn "XONG
   RỒI" đúng vì chuyện đó. */
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0b2740 0%, #07182a 100%);
    font-family: var(--font-round);
    color: #eaf6ff;
}

.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; }
}

/* Hai bé thi: giấu nút Lùi và Mách Nước — xem ghi chú ở startLevel() */
body.duo-race #btn-nav-undo,
body.duo-race #btn-nav-hint { display: none; }

/* ---------- Khung sân ---------- */
.game-wrapper {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    background: #0d2c47;
    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ẻ tên ----------
   Một thẻ cho mỗi bé, game.js đặt đúng trên đầu giàn ống của bé ấy nên hai bé
   không bao giờ phải đoán xem số nước 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, 255, 255, 0.92);
    border: 2px solid rgba(11, 58, 93, 0.75);
    box-shadow: 0 3px 0 rgba(4, 26, 45, 0.35);
    color: var(--ws-ink);
    font-family: var(--font-fat);
    pointer-events: none;
    box-sizing: border-box;
}

.chip[hidden] { display: none; }

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

.chip-name {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.chip-moves-box {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

.chip-tag {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.6;
}

.chip-moves-box b { font-size: 1.05rem; font-weight: 800; }

/* ---------- Mách nước ---------- */
.tip {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    max-width: 88%;
    text-align: center;
    background: rgba(11, 58, 93, 0.92);
    border: 2px solid var(--ws-gold);
    border-radius: 999px;
    padding: 10px 24px;
    font-family: var(--font-fat);
    font-size: 1.05rem;
    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); }
}

/* ---------- 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(5, 22, 38, 0.9);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.overlay.hidden { display: none; }

.card {
    width: min(700px, 100%);
    margin: auto;
    background: rgba(12, 44, 72, 0.97);
    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, #d0f0ff, #4dabf7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 4px 18px rgba(77, 171, 247, 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: #bcd9ef;
    font-size: 0.98rem;
}

/* ---------- 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: #bcd9ef;
    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, #4dabf7, #1c7ed6);
    border-color: #fff;
    color: #fff;
}

/* ---------- 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: #d0f0ff; }
.how-item span:last-child { font-size: 0.84rem; color: #bcd9ef; }

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

/* ---------- Nút ký hiệu cho bé mù màu ---------- */
.mark-btn {
    font-family: var(--font-fat);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 9px 20px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #bcd9ef;
    cursor: pointer;
}

.mark-btn.is-on {
    background: rgba(12, 166, 120, 0.28);
    border-color: #0ca678;
    color: #d3f9d8;
}

.mark-note {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: #93b8d4;
}

/* ---------- 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, #4dabf7, #1c7ed6);
    color: #fff;
    box-shadow: 0 8px 22px rgba(28, 126, 214, 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: #bcd9ef;
}

.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ính ghim đáy khung cuộn — bài học từ lần sửa vùng chạm hai mươi game:
   bảng dài thì nút rơi xuống dưới đáy màn hình, mà 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(12, 44, 72, 0), rgba(12, 44, 72, 0.97) 35%);
}

/* ---------- Chọn thế giới ---------- */
.world-tabs {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.ch-tab {
    font-family: var(--font-fat);
    font-size: 0.86rem;
    font-weight: 700;
    padding: 7px 15px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: #bcd9ef;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.ch-tab:hover:not(.locked) { transform: translateY(-2px); }

.ch-tab.is-on {
    background: linear-gradient(135deg, #4dabf7, #1c7ed6);
    border-color: #fff;
    color: #fff;
}

.ch-tab.locked { opacity: 0.45; cursor: not-allowed; }
.ch-tab .ch-lock { font-style: normal; margin-right: 5px; }
.ch-tab .ch-stars { font-size: 0.72rem; opacity: 0.9; margin-left: 5px; }

/* ---------- Chọn màn ---------- */
.level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}

.lv {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    color: #eaf6ff;
    font-family: var(--font-fat);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: transform 0.12s ease, background 0.12s ease;
}

.lv:hover:not(.locked) { transform: translateY(-3px); background: rgba(255, 255, 255, 0.14); }
.lv.locked { opacity: 0.4; cursor: not-allowed; }
.lv.done { border-color: rgba(255, 197, 61, 0.7); }

.lv .lv-num { font-size: 1.3rem; font-weight: 800; }
.lv .lv-stars { font-size: 0.68rem; letter-spacing: 1px; }
.lv .lv-star { color: rgba(255, 255, 255, 0.25); font-style: normal; }
.lv .lv-star.lit { color: var(--ws-gold); }

/* ---------- Sao và bảng điểm ---------- */
.stars {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 6px 0 12px;
}

.star {
    font-size: 2.4rem;
    color: rgba(255, 255, 255, 0.2);
}

.star.lit {
    color: var(--ws-gold);
    animation: starPop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.star.lit:nth-child(2) { animation-delay: 0.14s; }
.star.lit:nth-child(3) { animation-delay: 0.28s; }

@keyframes starPop {
    from { transform: scale(0.2) rotate(-40deg); opacity: 0; }
    to { transform: scale(1) rotate(0); opacity: 1; }
}

.score-rows {
    max-width: 340px;
    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(--ws-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.66rem; }
    .chip-tag { font-size: 0.54rem; }
    .chip-moves-box b { font-size: 0.95rem; }

    .tip { font-size: 0.95rem; 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; }
    .btn-big { font-size: 1.05rem; padding: 12px 30px; }
    .level-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .lv .lv-num { font-size: 1.1rem; }
    .star { font-size: 2rem; }
    .mark-note { font-size: 0.72rem; }
}

/* ---------- 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; }

    .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; margin-bottom: 8px; }
    .mark-btn { padding: 7px 14px; font-size: 0.82rem; }
    .mark-note { display: none; }
    .btn-big { font-size: 1rem; padding: 9px 26px; }
    .row-buttons { margin-top: 9px; }
    .level-grid { grid-template-columns: repeat(8, 1fr); gap: 7px; }
    .ch-tab { font-size: 0.74rem; padding: 5px 10px; }
    .world-tabs { margin-bottom: 7px; }
    .star { font-size: 1.7rem; }
}