/* ============================================================================
 * Rescue Run — giao diện quanh sân chơi
 * ----------------------------------------------------------------------------
 * Sân chơi nằm trọn trong một canvas 2D; file này chỉ lo phần HTML bao quanh:
 * khung chứa canvas, thanh thông tin, dãy vật phẩm, bảng nhiệm vụ và hai bảng
 * phủ (chào, hết lượt). Màu và bo góc lấy theo /site-chrome.css cho đồng bộ.
 * ==========================================================================*/

:root {
    --rr-leaf: #51cf66;
    --rr-ink: #06180f;
    --rr-good: #22c55e;
    --rr-bad: #f43f5e;
    --rr-gold: #ffc53d;
    --font-round: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
    --font-fat: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
}

/* Ba tầng xếp dọc: thanh trên, sân chơi, footer. site-chrome.css cho
   .game-wrapper thuộc tính flex:1 1 auto, nhưng chỉ có tác dụng khi body là
   flex container — việc đó mỗi trang game phải tự khai. */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #05170f 0%, #082419 100%);
    font-family: var(--font-round);
    color: #eafff1;
}

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

/* site-chrome.css chỉ lo việc ẩn emoji khi có ảnh; cỡ ảnh thương hiệu thì
   từng trang game phải tự đặt, bỏ quên là ảnh 512 px chiếm hết màn hình. */
.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 chạy ngang nên sân càng rộng càng lợi: lấy trọn chiều ngang, chiều cao
   thì nhận hết phần còn dư giữa thanh trên và footer. */
.game-wrapper {
    position: relative;
    width: 100%;
    max-width: 1400px;   /* bằng đúng max-width của thanh trên trong site-chrome */
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    background: #06180f;
    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;
    /* Cả khung là vùng chạm: nửa trên nhảy, nửa dưới trượt. touch-action phải
       tắt hẳn, không thì cú vuốt xuống bị trình duyệt hiểu là kéo trang. */
    touch-action: none;
}

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

/* ---------- Thanh thông tin ---------- */
/* Lưới ba cột 1fr–auto–1fr chứ không phải flex space-between.
   Với space-between, ô giữa bị đẩy đi theo chênh lệch bề rộng của hai ô hai
   bên: thanh trái có thêm tên vùng cảnh nên rộng hơn thanh phải, ô giữa lệch
   sang phải 48px — mà viên combo lại neo đúng tâm sân, thành ra hai thứ nằm
   ngay dưới nhau mà không thẳng hàng. Cột 1fr hai bên bằng nhau thì ô giữa
   đứng đúng tâm bất kể hai ô kia rộng hẹp ra sao. */
.hud {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 8px;
    pointer-events: none;
    font-family: var(--font-fat);
}

.hud > .hud-box:nth-of-type(1) { justify-self: start; }
.hud > .hud-box:nth-of-type(2) { justify-self: center; }
.hud > .hud-box:nth-of-type(3) { justify-self: end; }

/* Ô hai bên co lại được khi màn hẹp, chứ giữ nguyên bề rộng thì tràn ra ngoài. */
.hud > .hud-box { min-width: 0; }

.hud.hidden { display: none; }

.hud-box {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(4, 22, 14, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 5px 13px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hud-tag {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9fd8b6;
    white-space: nowrap;
}

.hud-num {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--rr-gold);
    min-width: 1.1em;
    text-align: center;
}

.hud-fruit { color: #ffd43b; }
.hud-score { color: #8ce99a; }
/* Biểu tượng dùng icon vector chứ không dùng emoji.
   Emoji 🪙 và 🐾 trên máy người dùng hiện ra là hình tròn xám và vệt xám đen
   — không phải máy nào cũng có bộ emoji màu, mà emoji thì không tô màu lại
   được. Icon vector thì luôn hiện đúng và nhuộm được cho nổi trên nền sẫm. */
.hud-ico { font-size: 0.92rem; line-height: 1; }
.ico-paw { color: #ffd8a8; }
.ico-coin { color: #ffc93b; }

.hud-zone {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9fd8b6;
    white-space: nowrap;
}

/* Viên combo nhảy ra giữa màn, to dần theo chuỗi. */
.combo-chip {
    position: absolute;
    top: 46px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff9de2, #b06cff);
    color: #2b0b3a;
    font-family: var(--font-fat);
    font-weight: 800;
    font-size: 1.1rem;
    padding: 3px 16px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(176, 108, 255, 0.45);
    animation: comboPop 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.combo-chip.hidden { display: none; }

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

/* ---------- Dãy vật phẩm đang chạy ---------- */
.power-strip {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 6;
    display: flex;
    gap: 8px;
    pointer-events: none;
}

.pw {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--font-fat);
    font-weight: 800;
    font-size: 0.9rem;
    background: rgba(4, 22, 14, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: pwIn 0.25s ease both;
}

@keyframes pwIn {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.pw-shield { color: #8ed0ff; border-color: rgba(142, 208, 255, 0.55); }
.pw-magnet { color: #ff9de2; border-color: rgba(255, 157, 226, 0.55); }
.pw-rocket { color: #ffa94d; border-color: rgba(255, 169, 77, 0.55); }

/* ---------- Nhiệm vụ ---------- */
.mission-list {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 6;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none;
    text-align: right;
}

.mission-list li {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    background: rgba(4, 22, 14, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.8rem;
    color: #cfe9d9;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.mission-list li i { font-size: 0.62rem; color: #6f9a83; }
.mission-list li b { color: var(--rr-gold); font-size: 0.84rem; }

.mission-list li.done {
    color: #8ce99a;
    border-color: rgba(140, 233, 154, 0.5);
}

.mission-list li.done i { color: #8ce99a; }
.mission-list li.done b { color: #8ce99a; }

/* Trong bảng hết lượt thì danh sách nằm theo dòng chảy, không neo góc nữa. */
.mission-list.static {
    position: static;
    align-items: stretch;
    margin: 8px 0 0;
    text-align: left;
}

.mission-list.static li {
    justify-content: flex-start;
    padding: 3px 12px;
    font-size: 0.78rem;
}

/* Chữ dài trong li dùng flex-grow đẩy con số về sát mép phải. */
.mission-list.static li span { flex: 1 1 auto; }

/* Màn hẹp: bảng nhiệm vụ và dãy vật phẩm phải LEO LÊN ĐỈNH.
 *
 * Hai thứ đó vốn neo theo đáy sân. Trên máy tính thì không sao vì dải đất dưới
 * chân dày, chúng nằm gọn dưới mặt đất. Nhưng trên điện thoại dựng đứng, một
 * đơn vị u tính theo bề ngang nên nhỏ đi nhiều, dải đất dưới chân mỏng còn
 * chưa tới trăm điểm ảnh — thế là ba viên nhiệm vụ đè thẳng lên làn chạy, che
 * mất cả con thú canh đang lao tới.
 *
 * Cho lên đỉnh là chắc ăn: bầu trời trên máy dựng đứng lúc nào cũng thừa chỗ,
 * đó vốn là chỗ trống nhất màn hình. */
@media (max-width: 620px) {
    .mission-list li span { display: none; }
    .mission-list {
        top: 52px;
        bottom: auto;
        right: 10px;
        gap: 4px;
    }

    .power-strip {
        top: 52px;
        bottom: auto;
        left: 10px;
    }

    .hud-zone { display: none; }
}

/* ---------- Đếm ngược sau khi nghỉ ----------
   Nằm giữa sân, không chặn chạm, mỗi nhịp nảy ra một cái rồi tan. */
.countdown {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    z-index: 9;
    pointer-events: none;
    font-family: var(--font-fat);
    font-weight: 800;
    font-size: clamp(3.5rem, 14vw, 6rem);
    line-height: 1;
    color: #eafff1;
    text-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}

.countdown.hidden { display: none; }

.countdown.tick { animation: cdTick 0.6s ease-out both; }

@keyframes cdTick {
    0% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
    22% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.82); opacity: 0.15; }
}

.countdown.go {
    color: #8ce99a;
    animation: cdGo 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

@keyframes cdGo {
    from { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    60% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
}

/* ---------- 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(3, 14, 9, 0.88);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.overlay.hidden { display: none; }

.card {
    width: min(700px, 100%);
    margin: auto;
    background: rgba(9, 32, 21, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    padding: 18px 22px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

/* Thẻ hết lượt bị bó chặt hơn thẻ chào, vì nó phải vừa khung sân chứ không
   được phép đẩy nút chơi lại xuống dưới mép nhìn thấy. */
#over-overlay .card { padding: 14px 20px; }

.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, #dcffe6, #51cf66);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 4px 18px rgba(81, 207, 102, 0.25);
}

.title-sm {
    font-family: var(--font-fat);
    font-size: clamp(1.2rem, 3vw, 1.65rem);
    font-weight: 800;
    margin: 0 0 6px;
}

.text-good { color: var(--rr-good); }
.text-bad { color: var(--rr-bad); }

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

.new-best {
    margin: 0 0 6px;
    font-family: var(--font-fat);
    font-weight: 800;
    font-size: 1rem;
    color: var(--rr-gold);
    animation: bestPulse 0.9s ease-in-out infinite;
}

@keyframes bestPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

/* ---------- 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.96rem; color: #ffe9a8; }
.how-item span:last-child { font-size: 0.83rem; color: #b3dcc4; }

/* Điện thoại dựng đứng: ba ô hướng dẫn xếp chồng lên nhau đẩy nút CHẠY NÀO
   xuống dưới mép nhìn thấy. Nằm ngang thì mỗi ô thấp đi một nửa. */
@media (max-width: 560px) {
    .how-row { gap: 6px; margin-bottom: 10px; }

    .how-item {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 0;
        align-items: center;
        text-align: left;
        padding: 8px 12px;
    }

    .how-emoji { grid-row: 1 / span 2; font-size: 1.5rem; }
    .how-item b { font-size: 0.9rem; }
    .how-item span:last-child { font-size: 0.78rem; }

    .rule-note { font-size: 0.83rem; padding: 8px 12px; margin-bottom: 10px; }
    .best-item { padding: 6px 16px; }
    .best-item b { font-size: 1.15rem; }
}

/* Luật quan trọng nhất của game, tách riêng một khung cho khỏi lẫn vào phần
   hướng dẫn nút bấm. */
.rule-note {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 197, 61, 0.1);
    border: 1px solid rgba(255, 197, 61, 0.3);
    color: #ffe9a8;
    font-size: 0.9rem;
    line-height: 1.45;
}

.best-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.best-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 8px 20px;
}

/* Chỉ span con trực tiếp mới là nhãn, không thì con số nằm trong thẻ b cũng
   bị co lại bằng cỡ chữ nhãn (xem thêm chú thích ở .stat). */
.best-item > span { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: #9fd8b6; }
.best-item b { font-family: var(--font-fat); font-size: 1.3rem; color: var(--rr-gold); }

/* ---------- Bảng điểm cuối lượt ---------- */
/* Bảng cuối lượt phải lọt trong một màn hình: bé sẽ không cuộn xuống tìm nút
   chơi lại, thấy phải cuộn là bé bỏ luôn. Nên mọi thứ ở đây đều thấp và chật
   hơn hẳn mấy thẻ khác trong game. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 4px 0 6px;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 7px 6px;
}

.stat b {
    font-family: var(--font-fat);
    font-size: 1.3rem;
    color: #eafff1;
    line-height: 1.1;
}

/* Chỉ span con trực tiếp mới là nhãn. Viết .stat span thì con số nằm trong
   thẻ b cũng dính luật này và co lại bằng cỡ chữ nhãn. */
.stat > span {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9fd8b6;
}

.score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 6px 14px;
    font-size: 0.9rem;
    color: #cfe9d9;
}

.best-line {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: #9fd8b6;
}

.best-line b { color: var(--rr-gold); font-family: var(--font-fat); }

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

.score-row.big {
    background: rgba(255, 197, 61, 0.12);
    border: 1px solid rgba(255, 197, 61, 0.28);
}

.score-row.big span:last-child { color: var(--rr-gold); font-size: 1.25rem; }

/* ---------- 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, #51cf66, #2b8a3e);
    color: #04250f;
    box-shadow: 0 8px 22px rgba(81, 207, 102, 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: #b3dcc4;
}

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

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

#over-overlay .row-buttons { margin-top: 10px; }
#over-overlay .btn-big { font-size: 1.1rem; padding: 11px 34px; }