/* ============================================================================
 * Cỗ Máy Kỳ Quặc — giao diện quanh cỗ máy
 * ----------------------------------------------------------------------------
 * Cỗ máy, khay mảnh và viên bi đều do Phaser vẽ trong canvas; tệp này chỉ lo
 * phần HTML bao quanh: khung chứa canvas, bảng số, hai nút CHẠY / LÀM LẠI và
 * các bảng phủ (chào, chọn màn, qua màn, giải thích các mảnh).
 *
 * Tông màu xưởng máy: nền tím than, mảnh máy màu tươi. Nền phải TỐI hẳn vì cả
 * lối chơi nằm ở chỗ phân biệt tám màu mảnh với nhau.
 * ==========================================================================*/

:root {
    --mm-ink: #1a1440;
    --mm-gold: #ffd43b;
    --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 của Rót Màu 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, #2a1f5e 0%, #140f30 100%);
    font-family: var(--font-round);
    color: #f0ecff;
}

.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 ---------- */
.game-wrapper {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    background: radial-gradient(circle at 50% 10%, #3d2f8a 0%, #1a1440 72%);
    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;
    }
}

/* Phaser tự đặt canvas vào đây rồi co theo tỉ lệ (Scale.FIT); chỗ này chỉ lo
   căn nó vào giữa khung. */
.board-host {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.board-host canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    /* touch-action:none là bắt buộc: cả trò chơi là KÉO THẢ, mà mặc định trình
       duyệt nuốt cú kéo dọc thành cuộn trang, bé kéo mảnh lên không được. */
    touch-action: none;
    margin: 0;
}

/* ---------- Mách nước ---------- */
.tip {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    max-width: 88%;
    text-align: center;
    background: rgba(26, 20, 64, 0.94);
    border: 2px solid var(--mm-gold);
    border-radius: 999px;
    padding: 10px 24px;
    font-family: var(--font-fat);
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffe9b5;
    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;
    /* Chặn kéo ngang từ gốc: overflow-y:auto kéo theo overflow-x thành auto,
       chỉ cần một phần tử con rộng quá là cả bảng trượt ngang được — đúng lỗi
       anh Hiếu gặp ở màn chào Máy Gắp Thú trên điện thoại. */
    overflow-x: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 14px;
    background: rgba(12, 9, 32, 0.93);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.overlay.hidden { display: none; }

.card {
    width: min(700px, 100%);
    margin: auto;
    background: rgba(40, 30, 92, 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, #fff3bf, #ffa94d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 4px 22px rgba(255, 169, 77, 0.35);
}

.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: #cfc7f5;
    font-size: 0.98rem;
}

.subtitle b { color: var(--mm-gold); }

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

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

/* ---------- Bảng giải thích các mảnh ---------- */
.parts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
    text-align: left;
}

.part-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 9px 12px;
}

.part-item b { display: block; color: #ffe9b5; font-size: 0.94rem; }
.part-item span { font-size: 0.8rem; color: #cfc7f5; line-height: 1.3; }

/* ---------- 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, #ffb84d, #ff8c1a);
    color: #3a2400;
    box-shadow: 0 8px 22px rgba(255, 140, 26, 0.4);
}

.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: #cfc7f5;
}

.btn-ghost b { color: var(--mm-gold); margin-left: 4px; }

.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 khỏi 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(40, 30, 92, 0), rgba(40, 30, 92, 0.97) 35%);
}

/* ---------- Chọn màn ---------- */
.levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 9px;
    margin-bottom: 4px;
    max-height: 52vh;
    overflow-y: auto;
}

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

.lv-btn:hover:not(.is-locked) { transform: translateY(-3px); background: rgba(255, 255, 255, 0.14); }
.lv-btn.is-locked { opacity: 0.4; cursor: not-allowed; }
.lv-btn b { font-size: 1.25rem; font-weight: 800; }
.lv-btn span { font-size: 0.68rem; letter-spacing: 1px; color: var(--mm-gold); }

/* ---------- Bảng qua màn ---------- */
.win-stars {
    font-size: 2.3rem;
    letter-spacing: 6px;
    color: var(--mm-gold);
    margin: 2px 0 10px;
    animation: starPop 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes starPop {
    from { transform: scale(0.2) rotate(-30deg); 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(--mm-gold);
    font-family: var(--font-fat);
    font-weight: 800;
}

/* ---------- Bảng số nổi trên máy ---------- */
.hud {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    font-family: var(--font-fat);
}

.hud[hidden] { display: none; }

.hud-box {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.93);
    border: 2px solid #3b2a8f;
    color: var(--mm-ink);
    box-shadow: 0 3px 0 rgba(12, 9, 32, 0.4);
    white-space: nowrap;
}

.hud-tag {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.72;
}

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

/* Nút hỏi phải nhận được ngón tay, nên riêng nó bật lại pointer-events và giữ
   đủ 44 px vùng chạm như hai mươi game kia. */
.hud-help {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 2px solid #3b2a8f;
    background: rgba(255, 255, 255, 0.93);
    color: var(--mm-ink);
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(12, 9, 32, 0.4);
}

/* ---------- Bàn điều khiển ---------- */
.pad {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 14px;
}

.pad[hidden] { display: none; }

.pad-btn {
    width: 86px;
    height: 64px;
    border-radius: 20px;
    border: none;
    background: linear-gradient(180deg, #6c5ce7, #4936c4);
    color: #fff;
    font-size: 1.7rem;
    font-family: var(--font-fat);
    cursor: pointer;
    box-shadow: 0 6px 0 #2b2073, 0 10px 22px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
}

.pad-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #2b2073; }

.pad-run {
    width: 168px;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    background: linear-gradient(180deg, #ffc078, #f76707);
    color: #3a2400;
    box-shadow: 0 6px 0 #b34700, 0 10px 22px rgba(0, 0, 0, 0.35);
}

.pad-run:active { box-shadow: 0 2px 0 #b34700; }
.pad-run:disabled { filter: grayscale(0.7) brightness(0.8); cursor: default; }

@media (max-width: 560px) {
    .pad-btn { width: 74px; height: 58px; font-size: 1.5rem; }
    .pad-run { width: 138px; font-size: 1.1rem; }
    .hud-box { padding: 4px 10px; }
    .hud-tag { font-size: 0.58rem; }
}

/* ---------- Màn hẹp ---------- */
@media (max-width: 640px) {
    .card { padding: 14px 12px; }
    .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; }

    .parts-grid { grid-template-columns: 1fr; }
    .title { margin-bottom: 2px; }
    .subtitle { margin-bottom: 8px; font-size: 0.88rem; }
    .btn-big { font-size: 1.05rem; padding: 12px 30px; }
    .levels-grid { grid-template-columns: repeat(5, 1fr); gap: 7px; }
    .lv-btn b { font-size: 1.05rem; }
    .win-stars { font-size: 1.9rem; }
}

/* ---------- Máy nằm ngang, màn thấp ---------- */
@media (max-height: 520px) {
    .card { padding: 10px 14px; }
    .title { font-size: 1.5rem; margin-bottom: 0; }
    .subtitle { font-size: 0.8rem; margin-bottom: 6px; }

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

    .parts-grid { grid-template-columns: repeat(2, 1fr); gap: 5px; }
    .part-item { padding: 5px 8px; }
    .part-item b { font-size: 0.8rem; }
    .part-item span { font-size: 0.68rem; }

    .rule-note { padding: 6px 10px; font-size: 0.78rem; margin-bottom: 8px; }
    .btn-big { font-size: 1rem; padding: 9px 26px; }
    .row-buttons { margin-top: 9px; }
    .levels-grid { grid-template-columns: repeat(10, 1fr); gap: 6px; max-height: 40vh; }
    .win-stars { font-size: 1.6rem; }
}