/* =========================================================
   THÁP KHỐI — giao diện quanh cái giếng
   ---------------------------------------------------------
   Cái giếng, khối và căn phòng đều do Phaser vẽ trong canvas.
   Tệp này chỉ lo phần HTML bao quanh: bảng điểm, hàng nút bấm
   dưới đáy, và mấy bảng phủ.

   Tông màu: nền tím than tối để khối gạch và khối vàng nổi hẳn
   lên. Nền sáng thì khối vàng mất hết cái chói, mà chói mới là
   thứ làm nó trông ra tiền.
   ========================================================= */

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

    --bg-dark: #0b0f1c;
    --card-bg: rgba(15, 20, 38, 0.80);
    --card-border: rgba(255, 255, 255, 0.12);

    --gold: #ffd24a;
    --ruby: #ff3b57;
    --azure: #2ea8ff;
    --lime: #5ce68a;
    --violet: #7c3fd6;
}

* {
    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 20% 12%, rgba(255, 201, 60, 0.13), transparent 46%),
        radial-gradient(circle at 82% 24%, rgba(46, 168, 255, 0.14), transparent 46%),
        radial-gradient(circle at 50% 112%, rgba(168, 107, 255, 0.15), 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. 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. */
.brand-img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    object-fit: cover;
    display: block;
}

.brand-icon {
    font-size: 1.7rem;
    filter: drop-shadow(0 0 10px rgba(255, 201, 60, 0.6));
    display: inline-block;
}

.brand-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 1px;
    background: linear-gradient(135deg, var(--ruby), var(--gold), var(--azure));
    -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: #0a0e1a;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
}

/* Sân giữ đúng tỉ lệ canvas — game.js đặt --stage-w/--stage-h theo khung thật.
   aspect-ratio một mình không đủ: nó chỉ suy ra chiều còn lại khi một chiều để
   auto, nên phải tự tính bề ngang bằng đơn vị theo khung chứa. */
.stage {
    --stage-w: 900;
    --stage-h: 1000;
    position: relative;
    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 và VUỐT. Không chặn thì trình duyệt trên điện thoại
       nuốt cú vuốt xuống thành cuộn trang, và bé không thả nhanh được. */
    touch-action: none;
}

/* ---------------- Bảng điểm ---------------- */
.hud {
    position: absolute;
    left: 0; right: 0; top: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px 0;
    pointer-events: none;
    z-index: 4;
}

.hud[hidden] { display: none; }

.hud-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 12px;
    border-radius: 12px;
    background: rgba(8, 12, 24, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hud-label {
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: #8ea0bb;
}

.hud-box b {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

/* Ô NEXT dán SÁT ngay bên phải miệng giếng, không nằm ở góc màn.
   game.js đo cái giếng rồi đặt --well-right / --well-top theo phần trăm mặt
   tranh. Anh Hiếu nói đúng: để ở góc phải trên thì xa quá, mắt bé đang dán vào
   cái giếng, liếc ra góc là mất nhịp. */
.hud-next {
    position: absolute;
    left: calc(var(--well-right, 78%) + 1.4%);
    top: var(--well-top, 16%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 12px;
    background: rgba(8, 12, 24, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.next-list { display: flex; flex-direction: column; gap: 4px; }

/* Quân sắp tới vẽ bằng lưới 4×2 ô nhỏ. Quân KẾ TIẾP NGAY vẽ to hơn hai quân
   sau — bé chỉ thật sự cần biết quân ngay sau, hai quân kia là để tính xa. */
.next-piece {
    display: grid;
    grid-template-columns: repeat(4, 9px);
    grid-template-rows: repeat(2, 9px);
    gap: 2px;
    opacity: 0.62;
}

.next-piece.up {
    grid-template-columns: repeat(4, 13px);
    grid-template-rows: repeat(2, 13px);
    opacity: 1;
}

/* KHÔNG khai background ở đây. Bộ chọn ".next-piece i" cụ thể hơn ".m-brick",
   nên đặt background:transparent vào đây là nó thắng, và mọi ô quân sắp tới
   thành trong suốt — ảnh chụp thử ra một cái hộp NEXT trống trơn. */
.next-piece i { border-radius: 3px; }
.next-piece i.on { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35); }

.m-ruby { background: var(--ruby); }
.m-azure { background: var(--azure); }
.m-lime { background: var(--lime); }
.m-violet { background: var(--violet); }
.m-gold { background: var(--gold); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3), 0 0 6px rgba(255, 201, 60, 0.7) !important; }

.hud-room {
    position: absolute;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #8ea0bb;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------------- Hàng nút dưới đáy ---------------- */
.touchpad {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px 12px;
    z-index: 5;
    /* Chỉ hiện khi đang chơi — bảng chào che hết thì mấy nút này thò ra dưới
       trông rất lôi thôi. */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

body.playing .touchpad { opacity: 1; pointer-events: auto; }

.pad-btn {
    width: 62px;
    height: 54px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(12, 18, 34, 0.78);
    color: #dbe6f5;
    font-size: 1.35rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease, background 0.15s ease;
}

.pad-btn:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.16); }
.pad-turn { color: var(--azure); border-color: rgba(46, 168, 255, 0.45); }
.pad-drop { color: var(--gold); border-color: rgba(255, 201, 60, 0.45); }

/* ---------------- Bảng phủ ---------------- */
.screen {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(6, 9, 20, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow-y: auto;
}

.screen.hidden { display: none; }

.panel {
    width: 100%;
    max-width: 600px;
    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(--gold), var(--brick));
    -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; }

/* Dải chất liệu ở màn chào: cho bé thấy trước là có năm loại khối, và loại
   vàng đáng gấp ba. */
.mat-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.mat {
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 5px 12px;
    border-radius: 8px;
    color: #14181f;
    text-transform: uppercase;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28);
}

.mat.m-gold { color: #3a2600; }
.mat.m-ruby, .mat.m-azure, .mat.m-violet { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }

.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, 201, 60, 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.8rem;
}

.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: 1px solid rgba(255, 255, 255, 0.10);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: #cbd5e1;
}

.score-row b { color: #fff; font-size: 1.2rem; }

.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: #2a1c00;
    background: linear-gradient(135deg, var(--gold), #ff9f1a);
    box-shadow: 0 10px 26px rgba(255, 159, 26, 0.3);
    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, 159, 26, 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(8, 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; }
    .over-actions { flex-direction: column; }
    .over-actions .big-btn { min-width: 0; }
    .hud-box { padding: 4px 9px; }
    .hud-box b { font-size: 1.05rem; }
    .hud-next { padding: 4px 5px; }
    .next-piece { grid-template-columns: repeat(4, 7px); grid-template-rows: repeat(2, 7px); }
    .next-piece.up { grid-template-columns: repeat(4, 10px); grid-template-rows: repeat(2, 10px); }
    .pad-btn { width: 56px; height: 50px; font-size: 1.2rem; }
}

/* Điện thoại xoay ngang: màn chỉ cao chừng 420px mà thanh trên với chân trang
   ăn mất gần nửa. Thu hai dải ấy lại cho cái giếng được cao thêm. */
@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; }
    .pad-btn { width: 52px; height: 42px; }
    .touchpad { padding: 6px 10px 8px; }
}

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