/* ═══════════════════════════════════════════════════════
   HONGBAI CRUSH — CSS
   Desktop : panel kiri (vertikal), grid kanan
   Mobile  : panel atas 2-kolom, grid bawah, NO SCROLL
═══════════════════════════════════════════════════════ */

:root {
    --bg-dark: #121212;
    --bg-card: #1e1e1e;
    --primary-red: #b20606;
    --primary-red-hover: #8e0505;
    --text-white: #e4e6eb;
    --text-muted: #adb5bd;
    --border-color: #343a40;
    --navbar-h: 62px;
}

/* ─────────────────────────────────────────────────────
   WRAPPER HALAMAN
───────────────────────────────────────────────────── */
.game-main-container {
    padding: 115px 20px 40px 20px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    box-sizing: border-box;
    width: 100%;
}
.game-main-container .container {
    background: rgba(255,255,255,0.03);
    padding: 24px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    max-width: 940px;
    width: fit-content;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    margin: 0 auto;
}

/* ─────────────────────────────────────────────────────
   START MENU
───────────────────────────────────────────────────── */
.menu-screen { text-align: center; padding: 25px 20px 40px 20px; }
.menu-screen h1 { font-size: clamp(32px,6vw,48px); font-weight: 900; margin-bottom: 10px; letter-spacing: -1px; }
.menu-screen p  { color: var(--text-muted); margin: 0 auto 20px; font-size: clamp(14px,2vw,16px); font-weight: 400; max-width: 800px; line-height: 1.2; }

.level-selector {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.level-selector select {
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    background: #2b2b2b;
    color: white;
    border: 1px solid var(--border-color);
    cursor: pointer;
    outline: none;
    width: auto;
    min-width: 140px;
    margin-bottom: 0 !important;
}

/* ─────────────────────────────────────────────────────
   TOMBOL
───────────────────────────────────────────────────── */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-red), #b71c1c);
    color: white; border: none; padding: 16px 40px; font-size: 18px;
    border-radius: 50px; cursor: pointer; font-weight: 700;
    box-shadow: 0 8px 20px rgba(230,57,70,0.3); transition: all 0.3s;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(230,57,70,0.5); }
.btn-outline {
    background: transparent; color: var(--text-muted); border: 1px solid var(--text-muted);
    padding: 8px 20px; border-radius: 50px; cursor: pointer; font-size: 14px; font-weight: 600;
}

/* ─────────────────────────────────────────────────────
   DESKTOP: GAME SCREEN (panel kiri, grid kanan)
───────────────────────────────────────────────────── */
#game-screen {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    align-items: flex-start;
    box-sizing: border-box;
}
.game-top-bar {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.game-area {
    flex: 1.5;
    min-width: 350px;
    max-width: 580px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.game-header { display: flex; align-items: center; gap: 20px; }
.game-header h1 { color: var(--text-white); margin: 0; font-size: 24px; font-weight: 800; }
.stats h2 { color: var(--text-muted); font-size: 16px; margin: 0; font-weight: 500; }

/* ─────────────────────────────────────────────────────
   GRID
───────────────────────────────────────────────────── */
.grid-container {
    width: 100%;
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grid {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    grid-template-rows:    repeat(8,1fr);
    width: 100%;
    aspect-ratio: 1/1;
    gap: 6px;
    padding: 10px;
    background-color: rgba(0,0,0,0.4);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.05);
}
.grid div {
    width: 100%; height: 100%;
    border-radius: 8px;
    display: flex; justify-content: center; align-items: center;
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 700;
    cursor: grab; user-select: none; color: #fff;
    background: linear-gradient(135deg, rgba(20,20,20,0.9) 0%, rgba(40,40,40,0.9) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.4);
    text-align: center; line-height: 1;
    transition: transform 0.2s, box-shadow 0.2s;
}
.grid div:hover   { transform: scale(1.05); box-shadow: 0 0 15px rgba(255,255,255,0.1); z-index: 10; }
.grid div[data-len="1"] { font-size: clamp(20px,4.5vw,36px); }
.grid div[data-len="2"] { font-size: clamp(16px,3.5vw,28px); }
.grid div[data-len="3"] { font-size: clamp(12px,2.5vw,18px); }
.grid div[data-len="4"] { font-size: clamp(10px,2vw,14px); }
.grid.easy-mode div { border: none; box-shadow: 0 4px 4px rgba(0,0,0,0.4); }

/* ─────────────────────────────────────────────────────
   ANIMASI
───────────────────────────────────────────────────── */
@keyframes pop-anim {
    0%   { transform: scale(1);    opacity: 1; }
    50%  { transform: scale(1.15); opacity: 0.9; }
    100% { transform: scale(0);    opacity: 0; }
}
.pop-animation  { animation: pop-anim  0.3s forwards ease-in-out; }

@keyframes drop-anim {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}
.drop-animation { animation: drop-anim 0.1s linear; }

/* Touch: blok yang dipilih */
.grid div.touch-selected {
    outline: 3px solid #ff3d3d;
    outline-offset: -2px;
    transform: scale(1.1);
    z-index: 20;
    box-shadow: 0 0 22px rgba(255,61,61,0.7);
}

/* ─────────────────────────────────────────────────────
   PANEL (desktop: kolom kiri, vertikal)
───────────────────────────────────────────────────── */
.panel {
    flex: 1;
    min-width: 250px;
    max-width: 320px;
    background: transparent;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.panel h3,
.panel-col-right h3  { font-size: 18px; color: var(--text-muted); margin-bottom: 15px; text-transform: uppercase; }
.panel-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}
.panel-col-right { display: flex; flex-direction: column; align-items: center; }
.panel-col-left  { display: flex; flex-direction: column; }
.panel-logo { width: 150px; margin: -50px auto 10px; display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)); }

@media (min-width: 769px) {
    .panel-logo {
        margin-top: -85px;
    }
}

.info-box {
    background: rgba(0,0,0,0.3);
    color: var(--text-white);
    padding: 25px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
    width: 100%;
    box-sizing: border-box;
}
#hanzi-display  { font-family: 'Noto Sans SC',sans-serif; font-size: 70px; font-weight: 700; margin-bottom: 10px; line-height: 1; color: var(--text-white); text-shadow: 0 0 20px rgba(255,255,255,0.1); }
#pinyin-display { font-size: 24px; color: #ff3d3d; font-weight: 700; }
#arti-display   { font-size: 20px; margin-top: 10px; color: #cbd5e0; }

.extra-info  { margin-top: 15px; background: #2b2b2b; padding: 15px; border-radius: 16px; border: 1px solid var(--border-color); text-align: left; }
.word-type   { font-size: 14px; color: var(--primary-red); font-weight: bold; margin-bottom: 10px; text-transform: uppercase; border-bottom: 1px solid var(--border-color); padding-bottom: 5px; }
.word-examples { display: flex; flex-direction: column; gap: 4px; }
.ex-zh { font-family: 'Noto Sans SC',sans-serif; font-size: 16px; color: var(--text-white); margin-bottom: 2px; }
.ex-py { font-size: 14px; color: #a8a8a8; margin-bottom: 2px; }
.ex-id { font-size: 14px; color: var(--text-muted); font-style: italic; }

.panel-hint    { color: var(--text-muted); font-size: 13px; font-style: italic; margin-top: 12px; }
#panel-level-text { margin-top: 15px; color: var(--text-muted); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }

.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--bg-card); padding: 40px; border-radius: 24px; text-align: center; z-index: 10; width: 90%; max-width: 400px; border: 1px solid var(--border-color); }

.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════
   TABLET (≤ 900px)
═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .game-main-container .container { padding: 20px; }
    #game-screen { gap: 20px; }
    .game-area { min-width: 260px; }
    .panel { min-width: 200px; max-width: 250px; }
    #hanzi-display { font-size: 54px; }
    #pinyin-display { font-size: 20px; }
    #arti-display   { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE (≤ 768px)
   Layout: top-bar → panel kompak → grid full-lebar
   HANYA untuk mobile, desktop TIDAK terpengaruh
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Sembunyikan tulisan mode game di mobile */
    #level-title, #panel-level-text {
        display: none !important;
    }

    /* Paksa posisi tombol agar sejajar dengan progres di top-bar mobile */
    .global-back-btn-container {
        padding-top: 130px !important; /* Di bawah dashboard/navbar/ticker */
        padding-left: 15px !important;
        padding-right: 15px !important;
        position: absolute !important;
        z-index: 1001;
        width: auto !important;
        margin: 0 !important;
        min-height: auto !important;
    }

    /* Sesuaikan top-bar agar progres rata kanan dan memberi ruang untuk tombol kembali di kiri */
    .game-top-bar {
        justify-content: flex-end !important;
        padding-left: 80px !important; /* Ruang untuk tombol kembali */
        margin-bottom: 5px !important;
    }

    /* Full viewport, tanpa scroll */
    .game-main-container {
        padding: 130px 0 0 0 !important;
        min-height: unset;
        height: 100dvh;
        height: 100svh;
        overflow: hidden;
        align-items: flex-start;
        justify-content: center;
    }

    /* Container: flex-col, isi sisa layar */
    .game-main-container .container {
        padding: 6px 8px;
        border-radius: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        height: calc(100dvh - 130px) !important;
        height: calc(100svh - 130px) !important;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background: transparent;
        box-shadow: none;
        border: none;
        backdrop-filter: none;
        box-sizing: border-box;
    }

    /* game-screen: kolom vertikal, ketat */
    #game-screen {
        flex: 1;
        flex-direction: column;
        gap: 0;                    /* ← hapus jarak antar elemen */
        align-items: stretch;
        overflow: hidden;
        min-height: 0;
        width: 100%;
    }

    /* ── Top bar ringkas ── */
    .game-top-bar {
        flex-shrink: 0;
        margin-bottom: 10px;
        padding: 5px 10px;
        gap: 10px;
        min-height: 40px;
        background: rgba(0,0,0,0.2);
        border-radius: 10px;
    }
    .game-top-bar .btn-outline {
        padding: 6px 12px;
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .game-header { gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
    .game-header h1 { font-size: 14px; font-weight: 700; color: #fff; margin: 0; }
    .stats h2 { font-size: 14px; color: var(--text-muted); margin: 0; }

    /* ══════════════════════════════════════════════════
       PANEL — kompak, auto-height, rata atas
       • Saat belum ada match: hanya kolom kanan (karakter)
       • Setelah match: 2-kolom (kiri=contoh, kanan=karakter)
    ══════════════════════════════════════════════════ */
    .panel {
        flex: 0 0 auto;            /* ← PENTING: override desktop flex:1, panel tidak tumbuh */
        flex-shrink: 0;
        min-width: unset;
        max-width: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;         /* panel sendiri juga row */
        align-items: flex-start;     /* konten rata ATAS */
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.09);
        border-radius: 10px;
        padding: 6px;
        box-sizing: border-box;
        margin-bottom: 4px;          /* jarak kecil ke grid */
    }
    .panel h3,
    .panel-col-right h3 { display: none; }
    #panel-level-text { display: none; }
    .panel-hint       { display: none; }

    /* Panel-inner: ROW, rata atas, konten menentukan tinggi */
    .panel-inner {
        display: flex;
        flex-direction: row;
        gap: 6px;
        width: 100%;
        align-items: flex-start;     /* BUKAN stretch — tinggi = kontennya */
        justify-content: flex-end;   /* kolom kanan selalu di kanan */
    }

    /* ── Kolom KIRI (order:1): contoh kalimat ── */
    .panel-col-left {
        order: 1;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        min-width: 0;
        padding-top: 36px;   /* sejajar dengan info-box (di bawah logo 32px) */
    }
    /* AUTO-COLLAPSE: jika extra-info masih tersembunyi → sembunyikan kol kiri */
    .panel-col-left:has(#extra-info.hidden) {
        display: none;
    }
    /* Jika browser tidak support :has(), fallback: tetap terlihat kosong tapi kecil */
    .extra-info {
        margin-top: 0;
        padding: 8px 10px;
        border-radius: 8px;
        background: rgba(0,0,0,0.35);
        border: 1px solid rgba(255,255,255,0.07);
        height: auto;               /* BUKAN 100% — ikuti kontennya */
        box-sizing: border-box;
        overflow: hidden;
    }
    .word-type { font-size: 10px; margin-bottom: 5px; padding-bottom: 3px; }
    .ex-zh     { font-size: 13px; margin-bottom: 1px; }
    .ex-py     { font-size: 11px; margin-bottom: 1px; }
    .ex-id     { font-size: 11px; }

    /* ── Kolom KANAN (order:2): logo + karakter ── */
    .panel-col-right {
        order: 2;
        flex: 0 0 auto;
        width: 145px;          /* diperlebar: muat 3 hanzi sejajar */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;   /* rata atas */
        gap: 3px;
    }
    /* Jika kol kiri hidden (belum ada match), perlebar kolom kanan */
    .panel-inner:has(#extra-info.hidden) .panel-col-right {
        width: 100%;
        flex-direction: row;           /* logo & info-box sejajar kiri-kanan */
        align-items: center;
        gap: 10px;
    }
    .panel-logo {
        width: 60px;
        margin: 0 auto 2px;
        display: block;
        flex-shrink: 0;
    }
    .info-box {
        display: flex;
        padding: 6px;
        border-radius: 8px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        min-height: 0;
        gap: 1px;
        box-sizing: border-box;
    }
    /* Saat kol kiri hidden (full-width mode), info-box rata kiri */
    .panel-inner:has(#extra-info.hidden) .info-box {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        text-align: left;
        flex: 1;
    }
    #hanzi-display  { font-size: clamp(20px,6.5vw,36px); margin-bottom: 0; line-height: 1.1; min-width: unset; width: auto; white-space: nowrap; }
    #pinyin-display { font-size: 11px; margin: 0; color: #ff3d3d; font-weight: bold; }
    #arti-display   { font-size: 10px; margin-top: 1px; color: #cbd5e0; word-break: break-word; }

    /* ══════════════════════════════════════════════════
       GAME AREA: sisa ruang, grid FULL LEBAR
    ══════════════════════════════════════════════════ */
    .game-area {
        flex: 1;
        min-height: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;   /* grid naik ke atas */
        overflow: hidden;
        box-sizing: border-box;
    }
    .grid-container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-start;       /* grid dari atas */
        justify-content: center;
        overflow: hidden;
    }

    /* Grid: full lebar, square via aspect-ratio */
    .grid {
        width: 100%;                   /* penuh lebar layar */
        height: auto;
        aspect-ratio: 1 / 1;
        max-height: 100%;              /* jangan overflow vertikal */
        gap: 4px;
        padding: 6px;
        border-radius: 10px;
        margin: 0;
        box-sizing: border-box;
    }
    .grid div { border-radius: 5px; }
    .grid div[data-len="1"] { font-size: clamp(13px,5vw,28px);   }
    .grid div[data-len="2"] { font-size: clamp(10px,3.5vw,20px); }
    .grid div[data-len="3"] { font-size: clamp(7px, 2.5vw,14px); }
    .grid div[data-len="4"] { font-size: clamp(6px, 2vw,  11px); }

    .modal { padding: 22px 18px; }
}

/* ═══════════════════════════════════════════════════════
   SMALL PHONE (≤ 480px)
═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .game-main-container .container { padding: 5px 6px; }
    #game-screen { gap: 5px; }
    .panel { padding: 6px; }
    .panel-col-right { width: 132px; }
    #hanzi-display { font-size: clamp(18px,6vw,30px); }
    .grid { gap: 3px; padding: 5px; }
}

/* ═══════════════════════════════════════════════════════
   VERY SMALL (≤ 360px)
═══════════════════════════════════════════════════════ */
@media (max-width: 360px) {
    .game-main-container .container { padding: 4px 5px; }
    .panel-col-right { width: 108px; }
    #hanzi-display  { font-size: 20px; }
    #pinyin-display { font-size: 10px; }
    #arti-display   { font-size: 9px; }
    .grid { gap: 2px; padding: 4px; }
}