/* Học chung — giao diện dọc cho điện thoại, và bố cục ngang cho máy tính (xem phần cuối tệp). Nền sáng, thẻ trắng bo tròn, nút nổi khối như đồ chơi.
   Tông màu theo logo GeCo AI: xanh lá (--brand, --accent) và vàng lá (--gold). Bảng màu gốc ghi ở shared/brand.js. */
:root {
  color-scheme: light;
  --brand: #128a43; --brand-deep: #0a6630; --brand-ink: #ffffff; --accent: #01674a; --accent-soft: #e3f6df;
  --gold: #f8e11f; --gold-deep: #cdb40e; --gold-ink: #2a2703; --gold-soft: #fdf9d2;
  --bg: #f6fbee; --panel: #ffffff; --panel2: #eef5e4; --panel3: #dce9cf; --line: #d9e6cb;
  --ink: #1b2a22; --mute: #66756b; --ok: #128a43; --bad: #d8452f;
  --shadow: 0 6px 20px rgba(20, 70, 40, .14); --lift: 0 3px 0 var(--panel3);
  --head: 'Baloo 2', 'Be Vietnam Pro', system-ui, sans-serif;
  --body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gl: max(16px, env(safe-area-inset-left)); --gr: max(16px, env(safe-area-inset-right));
}
html { box-sizing: border-box; height: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body { height: 100%; margin: 0; background: #dfeed2; color: var(--ink); font: 15px/1.45 var(--body); -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
#app { height: 100%; max-width: 540px; margin: 0 auto; background: var(--bg); position: relative; overflow: hidden; display: flex; flex-direction: column; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
#app > * { flex: 1; min-height: 0; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; touch-action: manipulation; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
.pad { padding-left: var(--gl); padding-right: var(--gr); }

/* ---------- nút và ô nhập ---------- */
.btn { display: block; width: 100%; min-height: 50px; border-radius: 16px; font: 800 17px var(--head); padding: 0 16px; transition: transform .06s; }
.btn.primary { background: var(--brand); color: var(--brand-ink); box-shadow: 0 4px 0 var(--brand-deep); }
.btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--brand-deep); }
.btn.ghost { background: var(--panel2); color: var(--ink); box-shadow: var(--lift); }
.btn.ghost:active, .btn.danger:active { transform: translateY(2px); box-shadow: none; }
.btn.danger { background: #fde6e1; color: #b3301d; box-shadow: 0 3px 0 #f3c4bb; font-size: 15px; }
.btn[disabled] { opacity: .5; }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 12.5px; font-weight: 700; color: var(--mute); margin-bottom: 6px; letter-spacing: .01em; }
.field input, .dpass input { width: 100%; height: 50px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: 500 16px var(--body); padding: 0 14px; user-select: text; -webkit-user-select: text; }
.field input:focus, .dpass input:focus { border-color: var(--accent); outline: 0; }
.fine { font-size: 12.5px; color: var(--mute); margin-top: 12px; }
.error { color: var(--bad); font-size: 13px; font-weight: 600; min-height: 18px; margin-top: 8px; }
.iconbtn { width: 42px; height: 42px; flex: none; border-radius: 14px; background: var(--panel2); font-size: 18px; line-height: 1; display: grid; place-items: center; box-shadow: var(--lift); }
.iconbtn:active { transform: translateY(2px); box-shadow: none; }
.iconbtn.on { background: var(--accent); color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.pillbtn { height: 42px; padding: 0 16px; border-radius: 21px; background: var(--panel2); font-weight: 700; font-size: 13.5px; flex: none; box-shadow: var(--lift); }
.pill { padding: 6px 13px; border-radius: 18px; font: 800 15px var(--head); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pill.gold { background: var(--gold); color: var(--gold-ink); box-shadow: 0 3px 0 var(--gold-deep); }
button.pill:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gold-deep); }

/* ---------- đăng nhập ---------- */
.auth { display: flex; flex-direction: column; justify-content: center; gap: 22px; overflow-y: auto; padding-top: 24px; padding-bottom: 24px; background: radial-gradient(130% 70% at 50% 0%, #cdeeb6 0%, var(--bg) 62%); }
.brand { text-align: center; }
.brand .logo { width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 28px; background: linear-gradient(135deg, #01674a, #2fb04c 70%, #7fd03a); color: var(--gold); font: 800 40px/84px var(--head); box-shadow: 0 6px 0 #014d37, var(--shadow); transform: rotate(-4deg); }
.byline { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 14px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); text-decoration: none; color: var(--mute); font-size: 12px; font-weight: 600; }
.byline img { height: 22px; width: auto; display: block; }
.byline:active { transform: translateY(2px); }
.mbody .byline { display: flex; justify-content: center; margin-top: 16px; }
.brand h1 { font: 800 38px/1.1 var(--head); }
.brand p { color: var(--mute); margin-top: 4px; }
.card { background: var(--panel); border-radius: 26px; padding: 20px; box-shadow: var(--shadow); }
.card .btn + .btn { margin-top: 12px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--panel2); border-radius: 16px; padding: 4px; margin-bottom: 16px; }
.tabs button { height: 40px; border-radius: 12px; font-weight: 700; color: var(--mute); }
.tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(20, 70, 40, .14); }

/* ---------- thanh trên ---------- */
.hud { flex: none; position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; padding-top: 10px; padding-bottom: 10px; background: var(--panel); box-shadow: 0 2px 12px rgba(20, 70, 40, .12); }
.room-title { flex: 1; min-width: 0; line-height: 1.2; }
.room-title b { display: block; font: 800 18px/1.15 var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-title small { display: block; font-size: 11.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- khung 3D ---------- */
.stage-host { position: relative; overflow: hidden; flex: 1; min-height: 0; background: #eaf5dc; }
.creator-host { flex: none; height: 36%; min-height: 200px; background: radial-gradient(120% 90% at 50% 30%, #ffffff 0%, #dff3d2 60%, #b9e3a6 100%); }
canvas.gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.nogl { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--ink); font-weight: 600; }
.fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ov { position: absolute; left: 0; top: 0; will-change: transform; white-space: nowrap; transform-origin: 50% 100%; }
.ov.bubble { background: #fff; color: var(--ink); font-weight: 700; padding: 3px 10px; border-radius: 12px; }
.ov.react { font-size: 26px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.ov.pts { font: 800 20px/1 var(--head); color: #fff; -webkit-text-stroke: 4px #128a43; paint-order: stroke fill; text-shadow: 0 2px 0 rgba(0, 60, 30, .35); }
.ov.fly { font-size: 32px; line-height: 1; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); }
.ov.speech { background: #fff; color: var(--ink); padding: 7px 12px; border-radius: 16px; white-space: normal; width: max-content; max-width: 190px; text-align: center; box-shadow: 0 4px 12px rgba(20, 60, 35, .22); line-height: 1.25; }
.ov.speech::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.ov.speech b { display: block; font-size: 14px; }
.ov.speech.teach { max-width: 260px; padding: 5px 11px; background: #fbfff2; box-shadow: 0 0 0 2.5px var(--brand), 0 4px 12px rgba(20, 60, 35, .22); }
.ov.speech.teach::after { background: #fbfff2; box-shadow: 2.5px 2.5px 0 0 var(--brand); }
.ov.speech small { display: block; font-size: 11px; color: var(--mute); }
.ov.zzz { font: 800 16px/1 var(--head); color: #fff; text-shadow: 0 1px 3px rgba(20, 30, 60, .8); }
.ov.zzz span { display: inline-block; animation: zz 1.8s ease-in-out infinite; }
.ov.zzz span:nth-child(2) { animation-delay: .3s; font-size: 1.2em; }
.ov.zzz span:nth-child(3) { animation-delay: .6s; font-size: 1.5em; }
@keyframes zz { 0%, 100% { transform: translateY(2px); opacity: .35; } 50% { transform: translateY(-5px); opacity: 1; } }

.chip { position: absolute; top: 10px; right: var(--gr); background: #fff; color: var(--ink); padding: 5px 14px; border-radius: 18px; font: 800 18px/1.2 var(--head); font-variant-numeric: tabular-nums; pointer-events: none; box-shadow: var(--shadow); }
.chip.hot { background: var(--bad); color: #fff; animation: pulse .5s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(1.12); } }
.mytag { position: absolute; top: 10px; left: var(--gl); padding: 4px 11px; border-radius: 14px; color: #fff; font-weight: 700; font-size: 12px; pointer-events: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.toasts { position: absolute; top: 48px; left: var(--gl); right: var(--gr); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 2; }
.toast { background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 16px; font-size: 13px; font-weight: 600; max-width: 100%; text-align: center; animation: toast .25s ease-out; box-shadow: var(--shadow); }
.toast b { color: #0a6630; }
@keyframes toast { from { opacity: 0; transform: translateY(-8px); } }
.recenter { position: absolute; right: var(--gr); bottom: 34px; width: 46px; height: 46px; border-radius: 23px; background: #fff; font-size: 19px; box-shadow: var(--shadow); }
.hint { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 130px); background: rgba(16, 35, 26, .86); color: #fff; padding: 7px 13px; border-radius: 16px; font-size: 12px; text-align: center; pointer-events: none; }
.veil { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 130px); display: flex; flex-direction: column; align-items: center; gap: 1px; background: #fff; color: var(--ink); padding: 9px 18px; border-radius: 18px; box-shadow: 0 0 0 3px var(--brand), var(--shadow); }
.veil b { font: 800 16px var(--head); }
.veil span { color: var(--mute); font-size: 12px; }

/* ---------- tạo nhân vật ---------- */
.creator, .lobby, .room { display: flex; flex-direction: column; position: relative; }
.options { flex: 1; min-height: 0; overflow-y: auto; padding-top: 16px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; background: var(--panel); border-radius: 26px 26px 0 0; margin-top: -22px; position: relative; z-index: 1; box-shadow: 0 -6px 18px rgba(20, 70, 40, .1); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg button, .chips button { min-height: 44px; padding: 0 15px; border-radius: 14px; background: var(--panel2); font-weight: 700; font-size: 14px; border: 2px solid transparent; box-shadow: var(--lift); }
.seg button.on, .chips button.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: 0 3px 0 #bfe3c4; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { display: flex; flex-wrap: wrap; gap: 10px; }
.sw button { width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line); }
.sw button.on { box-shadow: 0 0 0 3px var(--accent); transform: scale(1.08); }
.footer { flex: none; padding-top: 10px; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); }
.footer.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.footer.row .btn { min-height: 46px; font-size: 15px; }

/* ---------- sảnh trường 3D ---------- */
.mebtn { flex: none; border-radius: 50%; }
.hud .face { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); object-fit: cover; border: 3px solid var(--brand); font-size: 20px; }
.hud .tot { flex: none; font-size: 14.5px; padding: 6px 11px; }
.levels { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; background: var(--panel2); border-radius: 16px; padding: 4px; }
.levels button { height: 38px; border-radius: 12px; font: 800 17px var(--head); color: var(--mute); }
.levels button.on { background: var(--brand); color: var(--brand-ink); box-shadow: 0 3px 0 var(--brand-deep); }
.panel.lp { height: 256px; }
.lp .content { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.lp .sheet { top: -176px; border-radius: 26px 26px 0 0; box-shadow: 0 -8px 24px rgba(20, 70, 40, .18); }
.actions.two { grid-template-columns: 1fr 1fr; }
.actions .duelbtn { background: var(--gold); color: var(--gold-ink); box-shadow: 0 3px 0 var(--gold-deep); }
.dchips { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--gr)) 0 calc(-1 * var(--gl)); padding: 2px var(--gr) 6px var(--gl); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dchips::-webkit-scrollbar { display: none; }
.door { flex: none; width: 132px; text-align: left; border-radius: 18px; background: var(--panel2); color: var(--ink); padding: 9px 11px 10px; line-height: 1.2; box-shadow: var(--lift); display: flex; flex-direction: column; gap: 2px; min-height: 92px; border-top: 5px solid var(--accent); }
.door:nth-child(4n+2) { border-top-color: #51c03b; } .door:nth-child(4n+3) { border-top-color: #ecc81f; } .door:nth-child(4n) { border-top-color: #93dd24; }
.door:active { transform: translateY(2px); box-shadow: none; }
.door.full { filter: saturate(.4) brightness(.92); }
.door small { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--mute); }
.door b { flex: 1; font: 800 15px/1.15 var(--head); overflow-wrap: anywhere; }
.door span { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--mute); }
.door span i, .dcard span i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3fb56d; }
.door.full span i, .dcard span i.full { background: #e2604f; }
.dcard { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: start; background: var(--accent-soft); border-radius: 20px; padding: 11px 13px 13px; border: 2px solid var(--accent); }
.dcard > div { min-width: 0; line-height: 1.25; }
.dcard small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.dcard b { display: block; font: 800 20px/1.15 var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcard span { display: block; font-size: 12.5px; color: var(--mute); font-weight: 600; }
.dcard span i { margin-right: 5px; }
.dcard .iconbtn { background: #fff; }
.dcard .btn { grid-column: 1 / -1; min-height: 46px; }
.dcard.arena { border-color: var(--gold-deep); background: var(--gold-soft); }
.dcard.arena small { color: #5c5000; }

/* ---------- trang phủ: thách đấu, hồ sơ ---------- */
.modal { position: absolute; inset: 0; z-index: 6; background: var(--bg); display: flex; flex-direction: column; animation: sheet .18s ease-out; }
.mtabs { flex: none; margin: 12px var(--gr) 0 var(--gl); }
.mbody { flex: 1; min-height: 0; overflow-y: auto; padding-top: 14px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.dlist { display: flex; flex-direction: column; gap: 10px; }
.drow { background: var(--panel); border-radius: 18px; border: 2px solid transparent; overflow: hidden; box-shadow: var(--shadow); }
.drow.open { border-color: var(--accent); }
.drow > button { display: block; width: 100%; text-align: left; padding: 11px 14px; line-height: 1.3; }
.drow b { display: block; font: 800 18px/1.2 var(--head); overflow-wrap: anywhere; }
.drow span { display: block; font-size: 13px; font-weight: 600; }
.drow small { display: block; font-size: 12px; color: var(--mute); }
.dpass { display: flex; gap: 8px; padding: 0 12px 12px; }
.dpass input { flex: 1; min-width: 0; }
.dpass .btn { width: auto; flex: 1; min-height: 50px; white-space: nowrap; }
.dpass input + .btn { flex: none; }
.empty { text-align: center; color: var(--mute); padding: 36px 8px; }
.waitbox { background: var(--gold-soft); border: 2px solid var(--gold-deep); border-radius: 18px; padding: 10px 13px; line-height: 1.3; }
.waitbox strong { display: block; font: 800 18px/1.2 var(--head); color: #5c5000; }
.waitbox span { display: block; font-size: 12.5px; color: var(--mute); }
.who { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.who em { background: #fff; color: var(--ink); font-size: 12px; padding: 2px 9px; }
.who em.host { background: var(--gold); color: var(--gold-ink); }
.pcard { display: flex; align-items: center; gap: 14px; background: var(--panel); border-radius: 24px; padding: 14px 16px; box-shadow: var(--shadow); }
.pcard img { width: 84px; height: 84px; flex: none; border-radius: 50%; background: var(--accent-soft); border: 4px solid var(--brand); }
.pcard b { display: block; font: 800 26px/1.1 var(--head); overflow-wrap: anywhere; }
.pcard span { display: block; color: var(--mute); font-size: 13px; font-weight: 600; margin-top: 2px; }
.total { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: linear-gradient(135deg, #01674a, #1c9c4c 60%, #49b93f); color: #fff; border-radius: 22px; padding: 12px 18px; box-shadow: 0 5px 0 #014d37; }
.total span { font-weight: 700; }
.total b { font: 800 34px/1 var(--head); font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.stat { background: var(--panel); border-radius: 20px; padding: 12px 14px; box-shadow: var(--shadow); display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.stat i { grid-row: 1 / 3; font-style: normal; font-size: 26px; }
.stat b { font: 800 22px/1.1 var(--head); font-variant-numeric: tabular-nums; }
.stat span { font-size: 11.5px; color: var(--mute); font-weight: 600; line-height: 1.25; }

/* ---------- hộp hỏi lại ---------- */
.dialog { position: absolute; inset: 0; z-index: 9; background: rgba(16, 35, 26, .55); display: grid; place-items: center; padding: 20px var(--gr) 20px var(--gl); animation: fade .15s ease-out; }
@keyframes fade { from { opacity: 0; } }
.dbox { width: 100%; max-width: 380px; background: var(--panel); border-radius: 28px; padding: 22px 20px 18px; text-align: center; box-shadow: 0 16px 40px rgba(8, 30, 18, .35); animation: pop .2s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }
.dicon { font-size: 44px; line-height: 1; }
.dbox h2 { font: 800 23px/1.2 var(--head); margin: 8px 0 8px; }
.dbox p { font-size: 14.5px; line-height: 1.45; }
.dbox p b { color: var(--bad); }
.dbox .fine { margin-top: 8px; }
.dbox .btn { margin-top: 12px; }
.dbox .btn.primary { margin-top: 16px; }
.dbox a.btn { display: grid; place-items: center; text-decoration: none; }
.dbox .blogo { display: block; height: 44px; width: auto; max-width: 100%; margin: 4px auto 10px; }

/* ---------- thương hiệu: logo góc sảnh, tờ rơi ---------- */
.bmark { position: absolute; top: 10px; left: var(--gl); z-index: 1; display: block; padding: 6px 10px; border-radius: 14px; background: rgba(255, 255, 255, .94); box-shadow: var(--shadow); line-height: 0; }
.bmark img { height: 20px; width: auto; display: block; }
.bmark:active { transform: translateY(2px); }
.flyer { position: relative; overflow: hidden; margin: 2px auto 14px; max-width: 280px; background: #fff; border-radius: 14px; padding: 30px 18px 16px; box-shadow: 0 0 0 2px var(--line), 0 10px 22px rgba(20, 70, 40, .2); transform: rotate(-2deg); }
.flyer i { position: absolute; left: 0; right: 0; top: 0; height: 16px; background: linear-gradient(90deg, #01674a, #51c03b); border-bottom: 4px solid var(--gold); }
.flyer img { display: block; height: 46px; width: auto; max-width: 100%; margin: 0 auto 10px; }
.flyer b { display: block; font: 800 21px/1.2 var(--head); color: var(--accent); }
.flyer p { font-size: 13.5px; line-height: 1.4; margin-top: 4px; }
.flyer span { display: inline-block; margin-top: 10px; padding: 3px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; }

/* ---------- bảng điều khiển dưới ---------- */
.panel { flex: none; position: relative; z-index: 1; height: 322px; display: flex; flex-direction: column; gap: 10px; background: var(--panel); border-radius: 26px 26px 0 0; margin-top: -22px; box-shadow: 0 -6px 18px rgba(20, 70, 40, .14); padding-top: 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.actions { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.actions button { height: 42px; border-radius: 14px; background: var(--panel2); font-weight: 700; font-size: 13px; white-space: nowrap; box-shadow: var(--lift); }
.actions button:active { transform: translateY(2px); box-shadow: none; }
.actions button.on { background: var(--accent); color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.content { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.countbox { display: flex; align-items: center; gap: 14px; background: var(--accent-soft); border-radius: 20px; padding: 14px; }
.countbox > b { width: 72px; height: 72px; flex: none; border-radius: 50%; background: var(--gold); color: var(--gold-ink); font: 800 40px/72px var(--head); text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 4px 0 var(--gold-deep); }
.countbox strong { display: block; font: 800 19px/1.2 var(--head); }
.countbox span { display: block; font-size: 12.5px; color: var(--mute); margin-top: 2px; font-weight: 600; }
.tip { font-size: 13px; color: var(--mute); background: var(--panel2); border-radius: 14px; padding: 10px 12px; }
.qtext { font-weight: 700; font-size: 16px; line-height: 1.3; min-height: 40px; display: flex; align-items: center; }
.ans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: none; padding-bottom: 4px; }
.ans button { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 10px; border-radius: 16px; text-align: left; color: #fff; font-weight: 700; font-size: 14px; line-height: 1.2; }
.ans button:active { transform: translateY(3px); box-shadow: none; }
.ans button small { width: 26px; height: 26px; flex: none; border-radius: 9px; background: rgba(255, 255, 255, .92); color: var(--ink); font: 800 14px var(--head); display: grid; place-items: center; }
.ans button span { min-width: 0; overflow-wrap: anywhere; }
.ans .a0 { background: #3f7fe0; box-shadow: 0 4px 0 #2a5db0; } .ans .a1 { background: #e8662a; box-shadow: 0 4px 0 #b84a17; }
.ans .a2 { background: #8a5fd6; box-shadow: 0 4px 0 #6541a8; } .ans .a3 { background: #0f9690; box-shadow: 0 4px 0 #0a6f6b; }
.ans .picked { outline: 3px solid var(--ink); outline-offset: 2px; }
.ans [aria-disabled="true"] { cursor: default; }
.ans .dim { opacity: .35; }
/* hiện kết quả: số người chọn và phần trăm ở từng đáp án; ô không phải đáp án chỉ nhạt màu chứ vẫn đọc được số */
.ans .rv { position: relative; overflow: hidden; padding-right: 8px; }
.ans .rv.dim { opacity: 1; filter: saturate(.3) brightness(1.04); }
.ans .rv span { flex: 1; }
.ans .cnt { flex: none; display: grid; justify-items: end; gap: 1px; font: 700 10.5px var(--body); line-height: 1.1; white-space: nowrap; }
.ans .cnt i { font: 800 15px var(--head); font-style: normal; }
.ans .rv::after { content: ''; position: absolute; left: 0; bottom: 0; height: 5px; width: var(--pc, 0%); background: rgba(255, 255, 255, .8); border-radius: 0 3px 0 0; transition: width .5s ease-out; }
.explain .none { color: var(--mute); }
.ans .right { background: #128a43; box-shadow: 0 0 0 3px #a8eec6, 0 4px 0 #0a6630; }
.ans .wrong { background: #d8452f; box-shadow: 0 0 0 3px #ffc0b6, 0 4px 0 #a02c1a; }
.ans .right small::after { content: '✓'; } .ans .wrong small::after { content: '✕'; }
.ans .right small, .ans .wrong small { font-size: 0; } .ans .right small::after, .ans .wrong small::after { font-size: 15px; }
.timer { flex: none; height: 10px; border-radius: 5px; background: var(--panel2); overflow: hidden; margin-top: 2px; }
.timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #e8662a, var(--gold)); border-radius: 5px; }
.explain { font-size: 12.5px; line-height: 1.4; color: var(--ink); background: var(--panel2); border-radius: 14px; padding: 8px 11px; overflow: hidden; }
.explain .ok { color: var(--ok); } .explain .bad { color: var(--bad); }
.podhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.podhead strong { font: 800 20px var(--head); }
.podhead span { font-size: 12.5px; color: var(--mute); }
.gain { flex: none; background: var(--gold-soft); border: 2px solid var(--gold-deep); border-radius: 14px; padding: 7px 11px; font-size: 13px; line-height: 1.3; }
.lb { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.lb > div { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 6px; background: var(--panel2); border-radius: 12px; padding: 5px 10px; font-size: 13.5px; }
.lb > div.me { background: var(--gold-soft); box-shadow: inset 0 0 0 2px var(--gold-deep); }
.lb span:first-child { text-align: center; font-weight: 700; }
.lb span:nth-child(2) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.lb span:last-child { font: 800 15px var(--head); font-variant-numeric: tabular-nums; }
/* hết hiệp: bảng dưới cao hơn, dòng gọn hơn để thấy đủ 10 bạn đứng đầu mà không phải cuộn */
.panel { transition: height .25s ease; }
.panel.pod { height: min(478px, calc(100dvh - 196px)); gap: 8px; }
.panel.pod .content { gap: 6px; }
.panel.pod .lb { gap: 3px; flex: 1; min-height: 0; }
.panel.pod .lb > div { padding: 2px 10px; font-size: 13px; line-height: 1.5; flex: none; }
.panel.pod .lb span:last-child { font-size: 14px; }
.panel.pod .lb > div.out { position: sticky; bottom: 0; margin-top: 2px; }
.panel.pod .gain { padding: 5px 11px; font-size: 12.5px; }
em { font-style: normal; display: inline-block; color: #fff; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 9px; vertical-align: 1px; }

/* ---------- bảng tương tác ---------- */
.sheet { position: absolute; inset: 0; z-index: 3; background: var(--panel); border-radius: 26px 26px 0 0; display: flex; flex-direction: column; gap: 10px; padding: 12px var(--gr) max(10px, env(safe-area-inset-bottom)) var(--gl); overflow-y: auto; animation: sheet .18s ease-out; }
@keyframes sheet { from { transform: translateY(16px); opacity: 0; } }
.sheethead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sheethead > div { min-width: 0; }
.sheethead b { font: 800 19px/1.2 var(--head); }
.sheethead small { display: block; font-size: 12px; color: var(--mute); }
.emorow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.emorow button { height: 46px; border-radius: 14px; background: var(--panel2); font-size: 23px; line-height: 1; box-shadow: var(--lift); }
.emorow.big { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.emorow.big button { height: 68px; font-size: 32px; }
.actrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.actrow button { min-height: 84px; border-radius: 18px; background: var(--panel2); font-size: 28px; line-height: 1.1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; box-shadow: var(--lift); }
.actrow button span { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.phrases { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 4px; }
.phrases button { text-align: left; min-height: 56px; border-radius: 14px; background: var(--panel2); padding: 7px 11px; line-height: 1.2; box-shadow: var(--lift); }
.emorow button:active, .actrow button:active, .phrases button:active { transform: translateY(2px); box-shadow: none; }
.phrases b { display: block; font-size: 13.5px; }
.phrases small { display: block; font-size: 11px; color: var(--mute); margin-top: 2px; }

/* ---------- nút âm thanh, hiệu ứng tương tác ---------- */
.sndbtn { position: absolute; right: var(--gr); bottom: 90px; z-index: 1; width: 40px; height: 40px; border-radius: 20px; background: #fff; font-size: 17px; line-height: 1; box-shadow: var(--shadow); }
.sndbtn.off { background: var(--panel3); opacity: .85; }
.sndbtn:active { transform: translateY(2px); }
.lobby .sndbtn { bottom: 34px; }
.busy .sndbtn { top: max(12px, env(safe-area-inset-top)); bottom: auto; }
.ov.spark { font-size: 21px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .28)); }
.ov.spark i { display: block; width: 9px; height: 13px; border-radius: 2px; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -18px; width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation: confetti 2.6s linear 1 both; }
@keyframes confetti { 0% { transform: translate(0, 0) rotate(var(--r)); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--x), calc(var(--h, 400px) + 30px)) rotate(calc(var(--r) + 540deg)); opacity: 0; } }
.ans button.right.fresh { animation: rightpop .5s cubic-bezier(.2, 1.6, .4, 1); }
.ans button.wrong.fresh { animation: shake .42s ease-in-out; }
@keyframes rightpop { 0% { transform: scale(.94); } 55% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.bump { animation: bump .5s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-3deg); } 100% { transform: scale(1); } }

/* ---------- màn chờ: sảnh trường học đang tắc ---------- */
.busy { position: relative; height: 100%; display: flex; flex-direction: column; overflow-y: auto; padding-top: 20px; padding-bottom: 20px; background: radial-gradient(130% 70% at 50% 0%, #cdeeb6 0%, var(--bg) 62%); }
.bcard { margin: auto 0; flex: none; background: var(--panel); border-radius: 28px; padding: 18px 18px 20px; box-shadow: var(--shadow); text-align: center; display: flex; flex-direction: column; gap: 10px; }
.bscene { margin: 0 auto -4px; width: min(100%, 300px); }
.bscene svg { display: block; width: 100%; height: auto; }
.bscene .steam path { animation: steam 2.4s ease-in-out infinite; }
.bscene .steam path:nth-child(2) { animation-delay: .5s; }
.bscene .steam path:nth-child(3) { animation-delay: 1s; }
@keyframes steam { 0% { transform: translateY(8px); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-8px); opacity: 0; } }
.bscene .wurst { transform-box: fill-box; transform-origin: 0% 50%; animation: wurst 2.8s ease-in-out infinite; }
@keyframes wurst { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
.bscene.sip svg { animation: sip .4s ease-out; transform-origin: 30% 90%; }
.bscene.bite svg { animation: bite .32s ease-out; }
@keyframes sip { 40% { transform: rotate(-7deg); } }
@keyframes bite { 30% { transform: translateX(-9px) scale(1.03); } 60% { transform: translateX(4px); } }
.busy h1 { font: 800 min(26px, 6.5vw)/1.15 var(--head); color: var(--accent); text-wrap: balance; }
.blead { font-size: 16px; font-weight: 600; line-height: 1.35; text-wrap: balance; }
.bqueue { background: var(--gold-soft); border: 2px solid var(--gold-deep); border-radius: 16px; padding: 9px 12px; font-size: 14.5px; }
.bqueue b { font: 800 18px var(--head); }
.bbar { height: 8px; border-radius: 4px; background: var(--panel2); overflow: hidden; }
.bbar i { display: block; width: 36%; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #07875e, #51c03b); animation: bbar 1.6s ease-in-out infinite alternate; }
@keyframes bbar { from { transform: translateX(-20%); } to { transform: translateX(200%); } }
.btreats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btreats button { min-height: 46px; border-radius: 14px; background: var(--panel2); font-weight: 700; font-size: 13.5px; box-shadow: var(--lift); }
.btreats button:active { transform: translateY(2px); box-shadow: none; }
.bcard .fine { margin-top: 0; }
.bnote { color: var(--accent); font-weight: 600; }
.busy .toasts { top: 12px; }

/* ---------- xe đẩy ở sảnh ---------- */
.shop { display: flex; flex-direction: column; gap: 8px; }
.shop button { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; min-height: 58px; padding: 6px 12px 6px 8px; border-radius: 16px; background: var(--panel2); text-align: left; box-shadow: var(--lift); }
.shop button:active { transform: translateY(2px); box-shadow: none; }
.shop i { font-style: normal; font-size: 28px; line-height: 44px; text-align: center; background: #fff; border-radius: 12px; }
.shop b { display: block; font: 800 16px/1.2 var(--head); }
.shop small { display: block; font-size: 12px; color: var(--mute); }
.shop em { font: 800 15px var(--head); font-style: normal; background: var(--gold); color: var(--gold-ink); padding: 4px 11px; border-radius: 14px; box-shadow: 0 3px 0 var(--gold-deep); white-space: nowrap; }
.shop button.poor { opacity: .55; }
.shop button.held { outline: 3px solid var(--gold-deep); outline-offset: -3px; }
.shop button.held small { color: var(--gold-ink); font-weight: 700; }
.shop button.poor em { background: var(--panel3); box-shadow: none; color: var(--mute); }
.sheet .gift { min-height: 44px; font-size: 14px; flex: none; }
.sheethead small b { font: inherit; font-weight: 800; color: var(--accent); }
.wallet { margin-top: 10px; display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: center; background: var(--gold-soft); border: 2px solid var(--gold-deep); border-radius: 18px; padding: 10px 16px; }
.wallet span { font-weight: 700; font-size: 13.5px; }
.wallet b { font: 800 24px/1 var(--head); font-variant-numeric: tabular-nums; grid-row: span 2; }
.wallet small { font-size: 12px; color: var(--mute); }

@media (max-height: 700px) {
  .bscene { width: min(100%, 220px); }
  .busy { padding-top: 12px; padding-bottom: 12px; }
  .bcard { gap: 8px; padding: 14px 16px 16px; }
  .panel.pod .lb { gap: 2px; }
  .panel.pod .lb > div { padding: 1px 10px; line-height: 1.4; }
  .panel.pod .lb span:last-child { font-size: 13.5px; line-height: 1.5; }
}
@media (max-height: 620px) {
  .panel { height: 292px; }
  .qtext { font-size: 14.5px; min-height: 0; }
  .ans button { min-height: 46px; }
}
/* ---------- máy tính, màn hình ngang: khung 3D nằm bên trái, bảng điều khiển thành cột bên phải ---------- */
/* ---------- phòng bổ túc, giáo vụ, con gà ---------- */
.door.botuc { border-top-color: #f08a3c !important; background: #fff4e6; }
.door.botuc span { color: #a85a17; }
.dcard.botuc { border-color: #f08a3c; background: #fff4e6; }
.dcard.botuc small { color: #a85a17; }
.mebtn { position: relative; }
.henbadge { position: absolute; right: -6px; bottom: -4px; font-style: normal; font-size: 19px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.actions button[disabled] { opacity: .45; }
.dbox .quote { font: 800 19px/1.3 var(--head); color: var(--ink); background: var(--gold-soft); border: 2px solid var(--gold-deep); border-radius: 18px; padding: 12px 14px; margin-top: 4px; }
.demotools { margin-top: 16px; padding: 12px; border-radius: 20px; background: var(--panel2); display: grid; gap: 8px; }
.demotools > b { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.demotools .btn { min-height: 44px; font-size: 14.5px; background: #fff; }
.linkbtn { align-self: flex-start; font-weight: 700; font-size: 13px; color: var(--accent); padding: 6px 4px; }
.panel.tp { height: 318px; }
.tutor .sndbtn { bottom: 34px; }
.tp .content { overflow-y: auto; gap: 9px; }
.tq { flex: none; background: var(--accent-soft); border-radius: 18px; padding: 9px 13px 10px; line-height: 1.3; }
.tq small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.tq b { display: block; font: 800 17.5px/1.25 var(--head); }
.topts { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 4px; }
.topts button { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 10px; border-radius: 16px; text-align: left; color: #fff; font-weight: 700; font-size: 14px; line-height: 1.2; }
.topts button:active { transform: translateY(3px); box-shadow: none; }
.topts button small { width: 24px; height: 24px; flex: none; border-radius: 9px; background: rgba(255, 255, 255, .92); color: var(--ink); font: 800 13px var(--head); display: grid; place-items: center; }
.topts .a0 { background: #3f7fe0; box-shadow: 0 4px 0 #2a5db0; } .topts .a1 { background: #e8662a; box-shadow: 0 4px 0 #b84a17; }
.topts .a2 { background: #8a5fd6; box-shadow: 0 4px 0 #6541a8; } .topts .a3 { background: #0f9690; box-shadow: 0 4px 0 #0a6f6b; }
.topts .picked { outline: 3px solid var(--ink); outline-offset: 2px; }
.trecap { flex: none; display: flex; flex-wrap: wrap; gap: 6px; }
.trecap button { padding: 4px 11px; border-radius: 13px; background: var(--panel2); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.trecap button[disabled] { cursor: default; }
.tphone { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.tphone input { height: 50px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: 600 18px var(--body); padding: 0 14px; user-select: text; -webkit-user-select: text; min-width: 0; letter-spacing: .02em; }
.tphone input:focus { border-color: var(--accent); outline: 0; }
.tphone .btn { width: auto; white-space: nowrap; }
.tp .error { margin: 0; min-height: 0; }
.tp .tip b { color: var(--ink); }

/* ---------- trang quản trị ---------- */
.adm h3 { font: 800 17px/1.2 var(--head); margin: 18px 0 8px; }
.adm h3 small { font: 600 12.5px var(--body); color: var(--mute); margin-left: 6px; }
.adm .fine { margin-top: 0; }
.abar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.abar .chips { flex: 1; flex-wrap: nowrap; gap: 6px; }
.abar .chips button, .adm .chips button { height: 36px; padding: 0 10px; border-radius: 18px; background: var(--panel2); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.abar .pillbtn { height: 36px; padding: 0 12px; font-size: 12.5px; }
.abar .chips button.on { background: var(--accent); color: #fff; }
.pillbtn[disabled] { opacity: .45; }
.leads { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.lead { background: var(--panel); border-radius: 20px; padding: 12px 14px; box-shadow: var(--shadow); border-left: 6px solid var(--gold-deep); user-select: text; -webkit-user-select: text; }
.lead.done { border-left-color: var(--brand); opacity: .8; }
.lhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lhead b { font: 800 18px/1.2 var(--head); overflow-wrap: anywhere; }
.lhead time { font-size: 12px; color: var(--mute); white-space: nowrap; }
.lphone { display: inline-block; margin: 4px 0 6px; font: 800 20px/1.2 var(--head); color: var(--accent); text-decoration: none; letter-spacing: .02em; }
.lead dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 10px; font-size: 13px; }
.lead dt { color: var(--mute); } .lead dd { margin: 0; font-weight: 600; }
.lacts { display: flex; gap: 8px; }
.lacts button { height: 36px; padding: 0 12px; border-radius: 12px; background: var(--panel2); font-weight: 700; font-size: 13px; }
.lacts button.on { background: var(--accent-soft); color: var(--accent); }
.lacts .del { margin-left: auto; color: #b3301d; background: #fde6e1; }
.asws { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.asw { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px 8px 14px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); text-align: left; }
.asw span { flex: 1; min-width: 0; } .asw b { display: block; font-size: 14.5px; }
.asw small { display: block; font-size: 12px; color: var(--mute); }
.asw i { flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--panel3); position: relative; transition: background .15s; }
.asw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.asw.on i { background: var(--brand); } .asw.on i::after { transform: translateX(18px); }
.asw em { flex: none; width: 26px; font-style: normal; font-size: 12px; font-weight: 800; color: var(--mute); }
.asw.on em { color: var(--brand); }
.ahead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ahead > span { display: flex; gap: 8px; }
.ahead .pillbtn { height: 36px; padding: 0 13px; font-size: 13px; }
.alevel { background: var(--panel); border-radius: 18px; padding: 8px 12px 12px; margin-top: 8px; box-shadow: var(--shadow); }
.alevel .ahead b { font: 800 18px var(--head); }
.arooms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.arooms button { height: 34px; padding: 0 11px; border-radius: 12px; font-size: 12.5px; font-weight: 700; background: var(--panel3); color: var(--mute); text-decoration: line-through; }
.arooms button.on { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
/* thẻ Thống kê của trang quản trị: ô số, bảng, biểu đồ một màu theo ngày */
.mtabs:has(> :nth-child(3)) { grid-template-columns: 1fr 1.25fr .8fr; }
.mtabs:has(> :nth-child(3)) button { font-size: 12.5px; line-height: 1.15; padding: 0 4px; }
.stiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stiles > div { background: var(--panel2); border-radius: 14px; padding: 9px 10px; display: grid; gap: 1px; }
.stiles b { font: 800 22px/1.1 var(--head); font-variant-numeric: tabular-nums; }
.stiles span { font-size: 12px; color: var(--mute); }
.stable { border: 1px solid var(--line); border-radius: 14px; overflow: auto; background: var(--panel); }
.stable table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.stable th, .stable td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.stable tr:last-child > * { border-bottom: 0; }
.stable thead th { font-size: 11.5px; font-weight: 700; color: var(--mute); background: var(--panel2); position: sticky; top: 0; }
.stable tbody th { font-weight: 700; }
.stable th:first-child { text-align: left; white-space: normal; }
.stable th small { display: block; font-weight: 500; font-size: 11.5px; color: var(--mute); }
.stable.wide { max-height: 420px; }
.stable.wide table { width: max-content; min-width: 100%; }
.stable.wide th:first-child { position: sticky; left: 0; background: var(--panel); white-space: nowrap; z-index: 1; }
.stable.wide thead th:first-child { background: var(--panel2); z-index: 2; }
.stable.wide thead th { white-space: normal; max-width: 92px; vertical-align: bottom; line-height: 1.2; }
.adm .ahead .chips { display: flex; gap: 6px; }
.scharts { display: grid; gap: 12px; margin-top: 8px; }
.schart { margin: 0; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 8px; background: var(--panel); min-width: 0; }
.schart figcaption b { display: block; font: 800 15px/1.2 var(--head); }
.schart figcaption small { display: block; font-size: 11.5px; color: var(--mute); }
.sread { display: block; margin-top: 4px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.splot { position: relative; height: 104px; margin-top: 6px; border-bottom: 1px solid var(--line); border-top: 1px dashed var(--line); }
.smax { position: absolute; left: 0; top: 2px; font-size: 10.5px; color: var(--mute); font-variant-numeric: tabular-nums; pointer-events: none; z-index: 1; background: var(--panel); padding-right: 4px; border-radius: 4px; }
.splot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.splot polyline { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.splot polygon { fill: var(--brand); opacity: .12; }
.sdot { position: absolute; width: 9px; height: 9px; margin: 0 0 -4.5px -4.5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--panel); pointer-events: none; }
.scols { position: absolute; inset: 0; display: flex; align-items: stretch; }
.scol { flex: 1; min-width: 0; height: 100%; padding: 0 1px; display: flex; align-items: flex-end; justify-content: center; border-radius: 4px 4px 0 0; }
.scol i { display: block; width: 100%; max-width: 22px; border-radius: 4px 4px 0 0; background: var(--brand); }
.scol:hover, .scol.on, .scol:focus-visible { background: rgba(18, 138, 67, .1); outline: none; }
.scol:hover i, .scol.on i { background: var(--brand-deep); }
.schart.line .scol.on, .schart.line .scol:hover { background: linear-gradient(var(--brand-deep), var(--brand-deep)) center / 1px 100% no-repeat; }
.saxis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--mute); margin-top: 3px; font-variant-numeric: tabular-nums; }
.sranks { display: grid; gap: 5px; }
.sranks > div { display: grid; grid-template-columns: minmax(64px, 34%) 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.sranks span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sranks i { height: 12px; border-radius: 4px; background: var(--panel2); overflow: hidden; }
.sranks i b { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--brand); }
.sranks em { font-style: normal; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
#app.adminpage { max-width: 1100px; }
#app.adminpage > .hud, #app.adminpage > .mtabs { flex: none; } /* ở trang /admin ba phần này là con trực tiếp của #app, không để chúng chia đều chiều cao */
@media (min-width: 760px) {
  #app.adminpage .scharts { grid-template-columns: 1fr 1fr; }
  #app.adminpage .stiles { grid-template-columns: repeat(6, 1fr); }
}
#app.adminpage .mtabs { max-width: 620px; }

@media (min-width: 900px) and (min-height: 540px) and (orientation: landscape) {
  :root { --side: clamp(380px, 30vw, 460px); --gl: 20px; --gr: 20px; }
  body { background: #cfe3c0; }
  #app { max-width: 1760px; box-shadow: 0 0 60px rgba(20, 70, 40, .18); }
  .lobby, .room, .creator { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); grid-template-rows: auto minmax(0, 1fr); }
  .lobby > .hud, .room > .hud, .creator > .hud { grid-column: 1 / -1; padding-top: 12px; padding-bottom: 12px; }
  .room-title b { font-size: 21px; } .room-title small { font-size: 13px; }
  .stage-host { grid-column: 1; grid-row: 2; }
  .panel, .panel.lp, .panel.pod { grid-column: 2; grid-row: 2; height: auto; min-height: 0; margin-top: 0; border-radius: 0; padding-top: 18px; padding-bottom: 18px; gap: 14px; box-shadow: -6px 0 18px rgba(20, 70, 40, .12); transition: none; }
  .sheet, .lp .sheet { top: 0; border-radius: 0; padding-top: 18px; box-shadow: none; }
  .modal { left: auto; width: var(--side); box-shadow: -10px 0 30px rgba(20, 70, 40, .22); }
  .actions button { height: 46px; font-size: 14px; }
  .levels button { height: 42px; }
  /* sảnh: mười phòng xếp thành lưới hai cột thay cho dải cuộn ngang */
  .lp .content { justify-content: flex-start; overflow-y: auto; }
  .dchips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; margin: 0; padding: 2px 2px 6px; }
  .door { width: auto; min-height: 84px; display: flex; flex-direction: column; }
  /* phòng học: chữ câu hỏi và nút trả lời lớn hơn */
  .qtext { font-size: 19px; min-height: 56px; }
  .ans { gap: 10px; }
  .ans button { min-height: 64px; font-size: 16px; }
  .panel.pod .lb { gap: 5px; }
  .panel.pod .lb > div { padding: 6px 12px; font-size: 14.5px; }
  .content { overflow-y: auto; }
  .hint { bottom: 22px; font-size: 13.5px; max-width: 70%; }
  .veil { bottom: 22px; }
  .toasts { top: 16px; }
  .toast { font-size: 14.5px; }
  .recenter { bottom: 22px; width: 52px; height: 52px; border-radius: 26px; }
  .sndbtn { bottom: 86px; width: 46px; height: 46px; border-radius: 23px; right: calc(var(--gr) + 3px); }
  .lobby .sndbtn { bottom: 22px; }
  .ov.speech { max-width: 260px; font-size: 15px; }
  /* tạo nhân vật: nhân vật bên trái, lựa chọn bên phải */
  .creator { grid-template-rows: auto minmax(0, 1fr) auto; }
  .creator-host { grid-column: 1; grid-row: 2 / 4; height: auto; }
  .options { grid-column: 2; grid-row: 2; margin-top: 0; border-radius: 0; box-shadow: -6px 0 18px rgba(20, 70, 40, .1); }
  .creator .footer { grid-column: 2; grid-row: 3; }
  /* đăng nhập: tên game bên trái, khung nhập bên phải */
  .auth { flex-direction: row; align-items: center; justify-content: center; gap: 72px; }
  .auth .brand { flex: 0 1 420px; }
  .auth .card { flex: 0 0 420px; }
  .brand .logo { width: 112px; height: 112px; border-radius: 36px; font-size: 54px; line-height: 112px; }
  .brand h1 { font-size: 56px; } .brand p { font-size: 18px; }
  .busy { align-items: center; }
  .bcard { width: min(560px, 100%); }
  .busy h1 { font-size: 30px; }
  .dbox { max-width: 440px; }
  .panel.tp { height: auto; }
  .tq b { font-size: 20px; }
  .topts button { min-height: 56px; font-size: 15.5px; }
  .tutor .sndbtn { bottom: 22px; }
  .ov.speech.teach { max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }

.acsv { margin: 0 0 12px; display: grid; gap: 6px; }
.acsv small { color: var(--muted, #5b6b63); font-size: 12.5px; line-height: 1.4; }
.acsv textarea { width: 100%; box-sizing: border-box; font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; padding: 10px; border-radius: 12px; border: 1.5px solid rgba(1, 74, 54, .22); background: #fff; color: #17352b; resize: vertical; white-space: pre; }

/* trang quản trị: đặt tên nhân vật máy */
.anames { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.aname { display: grid; gap: 4px; padding: 10px 12px 12px 14px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.aname span { font-size: 12.5px; font-weight: 700; color: var(--mute); }
.aname input { width: 100%; height: 42px; border-radius: 12px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: 700 15px var(--body); padding: 0 12px; user-select: text; -webkit-user-select: text; }
.aname input:focus { outline: none; border-color: var(--brand); }
.anamebar { display: flex; align-items: center; gap: 12px; margin: 10px 0 8px; }
.anamebar .linkbtn { align-self: center; }
.anamebar small { color: var(--ok); font-weight: 700; font-size: 13px; }

/* nút đi học bổ túc để giải ngố, chỉ hiện khi mình đang là gà */
.henfix { position: absolute; left: var(--gl); z-index: 4; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 9px; border-radius: 22px; background: #e8651f; color: #fff; text-align: left; box-shadow: 0 3px 0 #a8430d, 0 6px 14px rgba(0, 0, 0, .25); animation: henpulse 1.6s ease-in-out infinite; }
.henfix[hidden] { display: none; }
.henfix i { font-style: normal; font-size: 24px; line-height: 1; }
.henfix small { display: block; font-size: 11px; font-weight: 600; opacity: .92; line-height: 1.2; }
.henfix b { display: block; font-size: 13.5px; line-height: 1.25; }
.henfix.low { bottom: 12px; }
.henfix.top { top: 10px; }
.henfix.top.under { top: 40px; }
.henfix:active { transform: translateY(2px); box-shadow: 0 1px 0 #a8430d; }
@keyframes henpulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
.tip.tcured { background: #fff6d6; color: #5c4a00; font-weight: 600; }

/* trang quản trị: số bạn máy ở sảnh */
.abots { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); margin-bottom: 8px; }
.abots label { flex: 1 1 100%; font-weight: 700; font-size: 14.5px; }
.astep { display: inline-flex; align-items: center; gap: 6px; }
.astep button { width: 38px; height: 38px; border-radius: 50%; background: var(--panel2); font: 800 20px/1 var(--body); box-shadow: var(--lift); }
.astep input { width: 62px; height: 42px; border-radius: 12px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: 800 17px var(--body); text-align: center; user-select: text; -webkit-user-select: text; -moz-appearance: textfield; }
.astep input::-webkit-outer-spin-button, .astep input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.astep input:focus { outline: none; border-color: var(--brand); }
.abots small { flex-basis: 100%; color: var(--ok); font-weight: 700; font-size: 13px; }
.abots small:empty { display: none; }