:root {
    color-scheme: dark;
    --bg: #0d1326;
    --panel: #151d38;
    --line: #2a3560;
    --text: #eef1fb;
    --muted: #97a1c4;
    --amber: #ffbe5c;
    --ember: #ff7a3d;
    --ok: #6fdc9a;
    --bad: #ff6b7d;
    --gutter: 16px;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

html {
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: radial-gradient(900px 480px at 50% -12%, #1c2750 0%, var(--bg) 65%) no-repeat, var(--bg);
    color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
}
/* Chừa chỗ cho tai thỏ / thanh home của iPhone (cần viewport-fit=cover). */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: max(10px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}
.game { flex: 1; display: flex; flex-direction: column; }

/* ---- Thanh trên ---- */
.hud { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.brand { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.meta { display: flex; align-items: center; gap: 14px; }
.lives { display: flex; gap: 5px; }
.lives i { width: 12px; height: 16px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--line); }
.lives i.on { background: linear-gradient(var(--amber), var(--ember)); box-shadow: 0 0 8px rgba(255, 122, 61, .6); }
.score { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.score small { margin-left: 4px; color: var(--muted); font-size: .75rem; font-weight: 400; }

/* ---- Chế độ ---- */
.modes {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
    margin: 8px 0 12px; padding: 4px; border-radius: 12px;
    background: var(--panel); border: 1px solid var(--line);
}
.modes button {
    min-height: 38px; padding: 0 6px; border: 0; border-radius: 9px;
    background: none; color: var(--muted); font: inherit; font-size: .95rem;
    cursor: pointer; touch-action: manipulation;
}
.modes button.active { background: #232d58; color: var(--amber); font-weight: 600; }

/* ---- Cảnh ---- */
.scene {
    position: relative; flex: none; overflow: hidden; border-radius: 14px;
    height: 190px; height: clamp(120px, 24svh, 230px);
    border: 1px solid var(--line);
    background: linear-gradient(#0a1024 0%, #1a2450 70%, #2b2f5e 100%);
}
.stars {
    position: absolute; inset: 0; opacity: .7;
    background-image:
        radial-gradient(1.5px 1.5px at 8% 18%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 21% 42%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 34% 12%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 47% 30%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 63% 9%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 72% 38%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 86% 20%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 93% 46%, #fff 50%, transparent 51%);
}
.hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 55%; }
.hills .far { fill: #232c5a; }
.hills .near { fill: #131a38; }

/* Lồng đèn luôn nằm trọn trong khung, dù khung cao hay thấp. */
.lantern {
    --h: 59px;
    position: absolute; left: 50%; width: 42px; margin-left: -21px;
    bottom: calc(6px + (100% - var(--h) - 12px) * var(--lift, 0));
    transition: bottom .9s cubic-bezier(.3, 1.3, .5, 1);
    filter: drop-shadow(0 0 12px rgba(255, 170, 70, .6));
}
.lantern-body { animation: sway 4s ease-in-out infinite; }
.lantern-body.hit { animation: shake .45s, sway 4s .45s ease-in-out infinite; }
.lantern svg { display: block; width: 100%; height: auto; }
.lantern .paper { fill: #ff9a4a; }
.lantern .rim { fill: #b9461f; }
.lantern .flame { fill: #fff3c4; transform-origin: 30px 57px; }
.lantern .tassel { stroke: #b9461f; stroke-width: 2; }
.listening .lantern .flame { animation: flicker .5s ease-in-out infinite alternate; }
.altitude {
    position: absolute; right: 12px; top: 8px; color: var(--muted);
    font: .8rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em;
}

/* ---- Câu đọc ---- */
.reading {
    flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px;
    padding: 18px 0 8px; text-align: center;
}
.phrase {
    margin: 0; font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 600; line-height: 1.3;
    display: flex; flex-wrap: wrap; justify-content: center; gap: .1em .35em;
}
.phrase.long { font-size: clamp(1.3rem, 5.6vw, 2rem); }
.phrase.swap { animation: shake .45s; }
.syl { border-bottom: 3px solid transparent; transition: color .2s, border-color .2s; }
.syl em { font-style: normal; color: var(--amber); }
.syl.ok { color: var(--ok); }
.syl.swap { color: var(--bad); border-bottom-color: var(--bad); }
.syl.ok em, .syl.swap em { color: inherit; }
.syl.wrong, .syl.missing { color: var(--muted); border-bottom: 3px dotted var(--line); }

.heard { margin: 0; min-height: 1.5em; color: var(--text); overflow-wrap: anywhere; }
.heard i {
    display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%;
    background: var(--line); vertical-align: 1px;
}
.listening .heard i { background: var(--bad); animation: pulse 1.2s infinite; }
.heard-label { margin-right: 4px; color: var(--muted); font-size: .85rem; }

.feedback { min-height: 3em; font-size: .95rem; }
.feedback p { margin: 0; }
.feedback .ok { color: var(--ok); }
.feedback .bad { color: var(--bad); }
.feedback .hint { color: var(--muted); }
.feedback .hint em { font-style: normal; color: var(--amber); }
.feedback .pair { display: inline-block; margin: 0 6px; color: var(--text); }

/* ---- Nút bấm: luôn nằm sát đáy màn hình, trong tầm ngón cái ---- */
.controls {
    position: sticky; bottom: 0; z-index: 2;
    padding: 14px 0 max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(rgba(13, 19, 38, 0), var(--bg) 14px);
}
.buttons { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.buttons .btn { flex: 1 1 0; min-width: 0; }
.buttons .btn.primary { flex-grow: 1.35; }
.btn {
    min-height: 48px; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--panel); color: var(--text); font: inherit; font-size: .95rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.btn.primary {
    border-color: transparent; color: #2a1500; font-size: 1.05rem;
    background: linear-gradient(var(--amber), #ff9d45);
}
.listening .btn.primary { animation: ring 1.6s ease-out infinite; }
.typed .btn { flex: none; padding-inline: 16px; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.status { min-height: 1.3em; margin: 8px 0 0; color: var(--muted); font-size: .85rem; text-align: center; }
.typed { display: flex; gap: 8px; max-width: 460px; margin: 10px auto 0; }
.typed input {
    flex: 1; min-width: 0; min-height: 48px; padding: 0 12px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--panel); color: var(--text);
    font: inherit; font-size: 16px; /* < 16px thì iPhone tự phóng to khi gõ */
}

/* ---- Hết lượt ---- */
.over {
    position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px;
    background: rgba(6, 9, 20, .8); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.over-card {
    width: min(100%, 360px); padding: 26px 22px; border-radius: 16px; text-align: center;
    background: var(--panel); border: 1px solid var(--line);
}
.over-card h2 { margin: 0 0 8px; }
.over-card p { margin: 0 0 6px; }
.over-card .muted { margin-bottom: 18px; color: var(--muted); }
.over-card .btn { min-width: 160px; }

@media (hover: hover) {
    .modes button:hover { color: var(--text); }
    .btn:hover { border-color: var(--muted); }
    .btn.primary:hover { filter: brightness(1.07); }
}
/* Màn hình hẹp (iPhone SE đời đầu). */
@media (max-width: 359px) {
    :root { --gutter: 12px; }
    .buttons { gap: 8px; }
    .btn { font-size: .875rem; }
    .brand { font-size: 1rem; }
}
/* Điện thoại xoay ngang: thu nhỏ khung cảnh, thả thanh nút về cuối trang để không che câu đọc. */
@media (max-height: 480px) {
    .scene { height: 76px; }
    .modes { margin: 4px 0 8px; }
    .reading { padding-top: 10px; }
    .controls { position: static; }
}

@keyframes sway { 0%, 100% { transform: translateX(-6px) rotate(-3deg); } 50% { transform: translateX(6px) rotate(3deg); } }
@keyframes shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes flicker { to { transform: scale(1.25, 1.35); } }
@keyframes pulse { 50% { opacity: .3; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255, 190, 92, .5); } 100% { box-shadow: 0 0 0 10px rgba(255, 190, 92, 0); } }

@media (prefers-reduced-motion: reduce) {
    .lantern-body, .lantern-body.hit, .phrase.swap, .listening .lantern .flame,
    .listening .heard i, .listening .btn.primary { animation: none; }
    .lantern { transition: none; }
}