/* =========================================================
   BẮN VỊT — STYLESHEET
   Một tới bốn bé ngồi cạnh nhau, mỗi bé giữ một khoảnh trời
   ========================================================= */

:root {
    --font-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
    --font-main: 'Nunito', system-ui, sans-serif;

    --bg-dark: #060a14;
    --card-bg: rgba(15, 23, 42, 0.78);
    --card-border: rgba(255, 255, 255, 0.12);

    --sky: #4dd2ff;
    --gold: #ffd43b;
    --grass: #39ff14;
    --rose: #ff8fae;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-dark);
    background-image:
        radial-gradient(circle at 18% 16%, rgba(77, 210, 255, 0.18), transparent 46%),
        radial-gradient(circle at 84% 20%, rgba(255, 212, 59, 0.16), transparent 46%),
        radial-gradient(circle at 50% 110%, rgba(57, 255, 20, 0.14), transparent 58%);
    color: #fff;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app-wrapper {
    width: 100%;
    max-width: 1320px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 12px 16px 16px;
    gap: 12px;
}

/* ---------------- Thanh trên ---------------- */
.unified-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 10px 18px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
}

.brand { display: flex; align-items: center; gap: 10px; }

/* Ảnh biểu tượng game cạnh tên. Phải khai cỡ ở đây: tệp icon.jpg là ảnh vuông
   512px, thiếu dòng này thì nó hiện nguyên cỡ và đội cả thanh trên cao hơn nửa
   màn hình. Em không thấy lỗi suốt buổi vì lúc ấy chưa vẽ icon.jpg — thẻ img
   hỏng, đoạn onerror gỡ nó đi và chỉ còn hình 🦆 nhỏ xíu. */
.brand-img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    object-fit: cover;
    display: block;
}

.brand-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 10px rgba(255, 212, 59, 0.65));
    display: inline-block;
    animation: flap 1.6s ease-in-out infinite;
}

@keyframes flap {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-5px) rotate(4deg); }
}

.brand-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 1px;
    background: linear-gradient(135deg, var(--sky), var(--gold), var(--grass));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 9px 16px;
    min-height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    color: #e2e8f0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.35);
}

.btn.is-off { opacity: 0.5; }

/* ---------------- Khung chơi ---------------- */
.game-viewport {
    position: relative;
    flex: 1;
    min-height: 0;
    min-width: 0;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
    background: #0a1220;
    display: flex;
    align-items: center;
    justify-content: center;
    /* để .stage đo được cả bề ngang lẫn bề cao của khung bằng cqw/cqh */
    container-type: size;
}

/* Sân giữ đúng tỉ lệ của canvas (1280×720). Phaser co canvas theo Scale.FIT
   dựa vào khổ thẻ cha, mà thẻ cha đây đã đúng tỉ lệ rồi nên canvas lấp kín —
   bảng điểm và chữ báo vòng đặt lên trên là khớp tuyệt đối. */
.stage {
    position: relative;
    /* Cao bằng khung rồi để tỉ lệ tự ra bề ngang. Bản đầu em đặt width:100%
       và trông cậy vào max-height — chiều rộng cố định thắng, thẻ sân rộng
       hơn canvas thật, và thẻ điểm bé thứ tư thò hẳn ra vùng đen bên phải. */
    /* Giữ đúng tỉ lệ 16:9 mà vẫn vừa cả hai chiều của khung.
     *
     * aspect-ratio một mình KHÔNG đủ: nó chỉ suy ra chiều còn lại khi một
     * chiều để auto. Bản đầu em đặt height:100% rồi trông cậy vào max-width —
     * đo ra thẻ sân 400×648, tỉ lệ sai hẳn, và bảng điểm lệch khỏi mặt tranh.
     * Phải tự tính bề ngang bằng đơn vị theo khung chứa (cqw/cqh) thì mới lấy
     * được cái nhỏ hơn trong hai giới hạn. */
     * Tỉ lệ do game.js đặt vào --stage-ar, vì khổ bầu trời đổi theo máy: nằm
     * ngang thì 1280×720, cầm dựng thì 720×cao. Nhờ vậy canvas lấp gần kín
     * khung ở cả hai kiểu cầm, không còn dải mỏng kẹp giữa hai vùng đen. */
    --stage-w: 1280;
    --stage-h: 720;
    width: 100%;
    height: auto;
    aspect-ratio: var(--stage-w) / var(--stage-h);
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
}

@supports (width: 1cqh) {
    .stage { width: min(100cqw, 100cqh * var(--stage-w) / var(--stage-h)); }
}

#game-canvas {
    position: absolute;
    inset: 0;
}

#game-canvas canvas {
    display: block;
    /* Cả trò chơi là CHẠM ĐỂ BẮN. Không chặn thì trình duyệt trên điện thoại
       hiểu cú chạm nhanh là cuộn trang, và phát bắn bị nuốt mất. */
    touch-action: none;
}

/* ---------------- Thẻ điểm từng bé ---------------- */
.cards {
    position: absolute;
    left: 0; right: 0; top: 0;
    display: grid;
    grid-template-columns: repeat(var(--kids, 2), 1fr);
    gap: 6px;
    padding: 8px 8px 0;
    pointer-events: none;
    z-index: 4;
}

.cards[hidden] { display: none; }

.pcard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 14px;
    background: rgba(6, 12, 24, 0.62);
    border: 2px solid color-mix(in srgb, var(--kid) 55%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    min-width: 0;
}

/* Bé đang dẫn điểm sáng lên — ba bé kia nhìn phát là biết phải đuổi ai */
.pcard.lead {
    border-color: var(--kid);
    box-shadow: 0 0 18px color-mix(in srgb, var(--kid) 45%, transparent);
}

.pc-emoji {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.pc-name {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--kid);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-score {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.pc-combo {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--gold);
    min-width: 30px;
}

.pc-combo.hot {
    animation: comboPop 0.6s ease-in-out infinite alternate;
}

@keyframes comboPop {
    from { transform: scale(1); }
    to   { transform: scale(1.22); }
}

/* ---------------- Huy hiệu vòng ---------------- */
/* Huy hiệu vòng nằm sát góc dưới bên trái, không nằm giữa.
   Từ khi có vịt bơi trên ao thì giữa đáy màn là chỗ con vịt lội qua — huy hiệu
   đặt ở đó là che đúng thứ bé đang ngắm. */
.round-badge {
    position: absolute;
    left: 10px;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(6, 12, 24, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--font-display);
    font-size: 0.74rem;
    letter-spacing: 1px;
    color: #cbd5e1;
    pointer-events: none;
    z-index: 4;
    white-space: nowrap;
    opacity: 0.82;
}

.round-badge[hidden] { display: none; }
.round-badge b { color: var(--gold); font-size: 0.86rem; }

/* ---------------- Chữ báo vòng ---------------- */
.flash {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
    z-index: 8;
    text-align: center;
    padding: 20px;
}

.flash.hidden { display: none; }
.flash.go { animation: flashIn 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }

/* Đường bay RA. Thiếu nó thì bảng chữ nằm lì giữa màn suốt cả vòng — lỗi anh
   Hiếu bắt được: bắn xong 3 với 11 điểm mà tên vòng vẫn còn che đàn vịt. */
.flash.out {
    animation: flashOut 0.4s ease forwards;
    pointer-events: none;
}

@keyframes flashIn {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes flashOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(1.12); }
}

.fl-no {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 4px;
    color: #cbd5e1;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.8);
}

.fl-name {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3.6rem);
    font-weight: 800;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #fff, var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.85));
}

.fl-hint {
    font-size: 1rem;
    font-weight: 700;
    color: #e2e8f0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.tally {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    min-width: min(340px, 80vw);
}

.tally-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    border-radius: 14px;
    background: rgba(6, 12, 24, 0.72);
    border: 2px solid color-mix(in srgb, var(--kid) 50%, transparent);
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--kid);
}

.tally-row b { color: #fff; font-size: 1.3rem; }

/* ---------------- Màn hình phủ ---------------- */
.screen {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(4, 8, 18, 0.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow-y: auto;
}

.screen.hidden { display: none; }

.panel {
    width: 100%;
    max-width: 620px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 26px;
    padding: 26px 26px 22px;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-height: 100%;
    overflow-y: auto;
}

.panel-small { max-width: 460px; }
.panel-emoji { font-size: 2.6rem; line-height: 1; }

.panel-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: 1px;
    background: linear-gradient(135deg, var(--sky), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.panel-desc {
    font-size: 0.98rem;
    color: #cbd5e1;
    line-height: 1.55;
    max-width: 46ch;
}

.panel-desc b { color: #fff; }

.setup-block { width: 100%; }

.setup-label {
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: #94a3b8;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.opt-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.opt-row.cols-4 { grid-template-columns: repeat(4, 1fr); }

.opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    min-height: 44px;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.18s ease;
}

.opt:hover { background: rgba(255, 255, 255, 0.11); transform: translateY(-2px); }

.opt.is-on {
    border-color: var(--gold);
    background: linear-gradient(135deg, rgba(255, 212, 59, 0.22), rgba(77, 210, 255, 0.14));
    box-shadow: 0 0 18px rgba(255, 212, 59, 0.25);
}

.opt-icon { font-size: 1.05rem; letter-spacing: -2px; }

.opt-name {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Dải sáu cảnh: cho bé thấy trước là chơi xong vòng này còn năm vòng nữa,
   mỗi vòng một bầu trời khác — đây là thứ giữ bé chơi hết ván. */
.rounds-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.rounds-strip span {
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    white-space: nowrap;
}

.rotate-hint {
    display: none;
    font-size: 0.86rem;
    font-weight: 700;
    color: #ffd43b;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(255, 212, 59, 0.1);
    border: 1px solid rgba(255, 212, 59, 0.3);
}

@media (orientation: portrait) and (pointer: coarse) {
    .rotate-hint { display: block; }
}

.best-line {
    font-family: var(--font-display);
    font-size: 0.92rem;
    color: #94a3b8;
}

.best-line b { color: var(--gold); font-size: 1.15rem; }

.new-best {
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 212, 59, 0.2);
    border: 1px solid var(--gold);
    color: var(--gold);
    font-size: 0.72rem;
    letter-spacing: 1px;
}

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

.help-list {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 9px;
    list-style: none;
    color: #cbd5e1;
    font-size: 0.94rem;
    line-height: 1.5;
}

.help-list li { padding-left: 22px; position: relative; }

.help-list li::before {
    content: '🎯';
    position: absolute;
    left: 0;
    font-size: 0.85rem;
}

.help-list b { color: #fff; }

.final-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid color-mix(in srgb, var(--kid) 45%, transparent);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
}

.score-row span:first-child { color: var(--kid); }
.score-row span:last-child { color: #fff; }

.over-actions {
    display: flex;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}

.over-actions .big-btn { flex: 1; min-width: 180px; }

.big-btn {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 14px 26px;
    min-height: 52px;
    border-radius: 18px;
    border: none;
    cursor: pointer;
    color: #06121f;
    background: linear-gradient(135deg, var(--gold), #ffb020);
    box-shadow: 0 10px 26px rgba(255, 176, 32, 0.32);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    width: 100%;
    text-decoration: none;
}

.big-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(255, 176, 32, 0.45); }
.big-btn:active { transform: translateY(0); }

.big-btn.btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #e2e8f0;
    box-shadow: none;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translate(-50%, 20px);
    padding: 10px 20px;
    border-radius: 999px;
    background: rgba(6, 12, 24, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-family: var(--font-display);
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
    z-index: 60;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- Màn nhỏ ---------------- */
@media (max-width: 760px) {
    .app-wrapper { padding: 8px 8px 10px; gap: 8px; }
    .unified-nav { padding: 8px 10px; border-radius: 16px; gap: 8px; }
    .brand-title { font-size: 1.1rem; }
    .brand-img { width: 30px; height: 30px; }
    .btn { padding: 8px 11px; font-size: 0.84rem; }
    .btn span { display: none; }
    .nav-actions { gap: 6px; }
    .game-viewport { border-radius: 18px; }
    .panel { padding: 20px 16px 18px; border-radius: 20px; }
    .opt-row.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .pc-name { font-size: 0.7rem; }
    .pc-score { font-size: 1.15rem; }
    .cards { gap: 4px; padding: 5px 5px 0; }
    .pcard { padding: 5px 6px; gap: 5px; border-radius: 11px; }
    .over-actions { flex-direction: column; }
    .over-actions .big-btn { min-width: 0; }
}

/* Điện thoại xoay ngang: cả màn hình chỉ cao chừng 420px, mà thanh trên và
   chân trang ăn mất gần nửa. Thu hai dải ấy lại thì bầu trời được thêm ngót
   60px chiều cao — với khung 16:9 thì 60px cao đổi được hơn 100px bề ngang. */
@media (max-height: 520px) and (orientation: landscape) {
    .app-wrapper { padding: 6px 8px 6px; gap: 6px; }
    .unified-nav { padding: 5px 10px; border-radius: 14px; }
    .brand-title { font-size: 1rem; }
    .brand-img { width: 26px; height: 26px; }
    .btn { min-height: 38px; padding: 6px 10px; }
    .site-footer { display: none; }
}

/* Bàn 3–4 bé trên điện thoại: ba bốn thẻ điểm cạnh nhau thì tên bé không còn
   chỗ, nên giấu chữ, chỉ giữ mặt biểu tượng và con số. Bé vẫn biết thẻ nào của
   mình nhờ mặt biểu tượng và màu viền — đúng hai thứ ấy cũng in trên nút chọn
   số người lúc bắt đầu. */
@media (max-width: 560px) {
    .cards.kids-3 .pc-name,
    .cards.kids-4 .pc-name { display: none; }
    .cards.kids-4 .pc-emoji { font-size: 0.92rem; }
    .cards.kids-4 .pcard { padding: 5px 4px; gap: 4px; }
}

/* Trên máy có cảm ứng, bảng chọn hay dài hơn màn hình và nút BẮT ĐẦU trôi
   xuống dưới đáy — bé không thấy nút, tưởng game hỏng. Ghim nó lại. */
@media (hover: none) and (pointer: coarse) {
    #menu-overlay .big-btn {
        position: sticky;
        bottom: 6px;
        z-index: 5;
    }
}