* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1b2a; font-family: "Segoe UI", Roboto, Arial, sans-serif; color: #fff; -webkit-user-select: none; user-select: none; touch-action: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
/* ===== HỆ LỚP Z DÙNG CHUNG (trận + trung tâm + hộp JS tự chèn) =====
   #hud / #hubUI KHÔNG tạo ngữ cảnh xếp lớp (position:absolute, không z-index) -> mọi phần tử con nằm thẳng trên thang này.
   Thấp -> cao: điều khiển < nền HUD < bảng phụ < bảng mở < màn đầu/cuối < hộp lớn (modal 40..69) < THÔNG BÁO < hệ thống.
   Thông báo (toast/flash/lời trọng tài/time out-y tế/kết thúc/ATP) luôn trên cùng, chỉ dưới hộp hệ thống (bị đá/khoá 9999). */
:root {
  --z-ctrl: 12;    /* cần ảo + nút Mềm/Mạnh/Lốp/Ngắm (#touch), vùng cần ảo trung tâm */
  --z-hud: 14;     /* nền HUD: bảng điểm, nút nhỏ, nhật ký chat, thanh trên trung tâm */
  --z-side: 16;    /* bảng phụ: nhu cầu, chip vé, Time out/Y tế, nút thoại, chip sự kiện */
  --z-panel: 18;   /* bảng đang mở: hướng dẫn, biểu cảm, túi đồ, danh sách sân, menu ☰ */
  --z-modal: 40;   /* hộp lớn phủ màn: bạn bè, gian hàng, cài đặt, xếp hạng, sự kiện, quầy vé (40..69) */
  --z-note: 70;    /* THÔNG BÁO: toast, flash, lời trọng tài, hộp time out / y tế, màn kết thúc */
  --z-var: 90;     /* bảng VAR / Hawk-Eye (vết bóng so vạch): trên mọi nút + thông báo, dưới hộp hệ thống */
  --z-sys: 9999;   /* hộp thoại hệ thống: đăng nhập nơi khác / bị chặn (kick.js) */
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);   /* tai thỏ / thanh home iPhone */
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at top, rgba(40,90,150,0.85), rgba(5,15,30,0.95)); z-index: 20; padding: 16px; }
.card { background: rgba(255,255,255,0.96); color: #15202b; border-radius: 18px; padding: 24px 26px; width: min(520px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,0.45); }
.card h1 { margin: 0 0 4px; font-size: 30px; }
.card h2 { margin: 0; font-size: 28px; text-align: center; }
.card .sub { margin: 0 0 16px; color: #5c6b7a; }
.card .sc { font-size: 44px; font-weight: 800; text-align: center; margin: 10px 0 16px; }
.card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #3b4a5a; margin-bottom: 10px; }
.card input, .card select { font-size: 16px; padding: 9px 10px; border: 1px solid #c8d2dc; border-radius: 9px; background: #f7f9fb; }
.card .row { display: flex; gap: 10px; flex-wrap: wrap; }
#creator { display: flex; gap: 12px; margin-bottom: 12px; }
#creator .cleft { width: 200px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#pv { width: 200px; height: 260px; border-radius: 12px; background: linear-gradient(#dfe9f5, #f6f8fb); touch-action: none; cursor: grab; }
#crandom { width: auto !important; font-size: 13px !important; padding: 6px 12px !important; margin: 0 !important; background: #3b4a5a !important; }
#creator .cleft small { color: #8a96a3; font-size: 11px; }
#copts { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; align-content: start; }   /* 1 cột: giá trị dài (MakeHuman) không bị cắt */
.crow { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; background: #f4f7fa; border-radius: 8px; padding: 2px 6px; }
.crow .clab { width: 84px; color: #5c6b7a; font-weight: 600; flex: none; }
.crow .cval { flex: 1; text-align: center; font-weight: 600; color: #15202b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow .csw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid #c8d2dc; flex: none; }
.cbtn { width: 26px !important; height: 26px; padding: 0 !important; font-size: 10px !important; border-radius: 6px !important; background: #e7edf3 !important; color: #15202b !important; margin: 0 !important; flex: none; }
.card { width: min(720px, 100%); max-height: 96vh; overflow: auto; overflow-x: hidden; }
#boot { position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; background: radial-gradient(ellipse at top, rgba(40,90,150,0.85), rgba(5,15,30,0.95)); color: #fff; font-size: 20px; font-weight: 700; letter-spacing: .02em; }
/* thanh tiến độ tải tài nguyên cần thiết (assets.js): % + dung lượng */
#boot .bp { width: min(320px, 70vw); height: 8px; border-radius: 4px; background: rgba(255,255,255,0.18); overflow: hidden; }
#boot .bp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4fc3f7, #81c784); transition: width .25s; }
#boot .bs { font-size: 13px; font-weight: 500; opacity: .85; min-height: 1.2em; }
#boot .bl { width: min(210px, 56vw); height: auto; margin-bottom: 4px; filter: drop-shadow(0 4px 14px rgba(0,0,0,.45)); user-select: none; -webkit-user-drag: none; }   /* logo JAM phía trên thanh tải */
#boot .bn { max-width: min(340px, 84vw); font-size: 12px; font-weight: 400; line-height: 1.45; opacity: .7; text-align: center; letter-spacing: 0; }   /* ghi chú: lần đầu tải lâu */
@media (max-width: 700px) { #creator { flex-direction: column; align-items: center; } #copts { width: 100%; } .crow .clab { width: 86px; } }
.card .row label { flex: 1 1 150px; min-width: 0; }
.card .chk, .card .row label.chk { flex: 1 1 100%; flex-direction: row; align-items: center; gap: 8px; }
.card button { width: 100%; font-size: 19px; font-weight: 800; padding: 13px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #2f80ed, #1e5fc4); color: #fff; cursor: pointer; margin-top: 4px; }
.card button:active { transform: translateY(1px); }
.card .cavsave { width: auto; font-size: 13px; padding: 0 14px; margin: 0; border-radius: 9px; }
.card h3.sec { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #8a96a3; margin: 14px 0 8px; padding-top: 10px; border-top: 1px solid #e3e9ef; }
.card #play { position: sticky; bottom: 0; box-shadow: 0 -8px 16px rgba(255,255,255,.9); }   /* nút Lên sân luôn thấy khi cuộn */
.help { margin-top: 14px; font-size: 12px; line-height: 1.5; color: #5c6b7a; background: #f1f4f8; padding: 10px 12px; border-radius: 10px; }
.help .g { color: #1e9e4a; font-weight: 700; }

#hud { position: absolute; inset: 0; pointer-events: none; }   /* không z-index: con xếp theo thang z chung; nền HUD (z-hud) vẫn trên cần ảo (z-ctrl) để nút/chat bấm được */
#hud > * { z-index: var(--z-hud); }
#score { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: rgba(10,20,35,0.78); border-radius: 14px; padding: 6px 14px; font-size: 14px; letter-spacing: 0.5px; white-space: nowrap; backdrop-filter: blur(6px); }
#score b { font-size: 24px; font-weight: 900; min-width: 28px; text-align: center; }
#score i { opacity: 0.6; }
#score .tm { font-weight: 700; opacity: 0.75; }
#score .tm.sv { opacity: 1; color: #ffd54a; }
#score .tm.sv::before { content: '●'; margin-right: 5px; font-size: 10px; }
#score em { font-style: normal; font-size: 12px; opacity: 0.8; margin-left: 8px; border-left: 1px solid rgba(255,255,255,0.25); padding-left: 10px; }
#call { position: absolute; top: 20%; left: 50%; transform: translate(-50%, -10px) scale(0.9); opacity: 0; font-size: 30px; font-weight: 900; text-shadow: 0 2px 10px rgba(0,0,0,0.6); transition: all .18s; padding: 6px 18px; border-radius: 12px; background: rgba(0,0,0,0.35); text-align: center; max-width: 92vw; }
#call.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#call.good { color: #6dff9a; } #call.bad { color: #ff6b6b; } #call.score { color: #ffd54a; font-size: 26px; }
#flash { position: absolute; top: 34%; left: 50%; transform: translate(-50%, 0); opacity: 0; font-size: 22px; font-weight: 800; color: #6dff9a; text-shadow: 0 2px 8px rgba(0,0,0,0.6); transition: opacity .15s; }
#flash.show { opacity: 1; } #flash.bad { color: #ff9f6b; }
#hint { position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%); font-size: 14px; background: rgba(10,20,35,0.7); padding: 6px 14px; border-radius: 10px; opacity: 0; transition: opacity .2s; white-space: nowrap; max-width: 94vw; overflow: hidden; text-overflow: ellipsis; }
#hint.show { opacity: 1; }
#spin { position: absolute; top: 60px; right: 14px; font-size: 12px; color: #ffd54a; font-weight: 700; }
#hawk { position: absolute; right: 16px; top: 70px; background: rgba(10,20,35,0.92); border: 1px solid rgba(255,255,255,0.25); border-radius: 14px; padding: 10px; width: 300px; z-index: var(--z-var) !important; pointer-events: auto; cursor: pointer; box-shadow: 0 10px 40px rgba(0,0,0,.5); }   /* chạm/bấm = đóng */
#hawk canvas { width: 280px; height: 210px; border-radius: 8px; display: block; }
#hawkT { margin-top: 8px; text-align: center; }
#hawkT b { display: block; font-size: 22px; } #hawkT b.in { color: #6dff9a; } #hawkT b.out { color: #ff6b6b; }
#hawkT span { font-size: 12px; opacity: 0.85; }

#sclk { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); background: rgba(10,20,35,0.78); border-radius: 10px; padding: 4px 12px; font-size: 14px; font-weight: 700; }
#sclk b { font-size: 18px; margin-left: 6px; font-variant-numeric: tabular-nums; } #sclk.warn { color: #ff6b6b; animation: blink .5s infinite alternate; }
@keyframes blink { to { opacity: 0.55; } }
#profile { display: flex; gap: 10px; flex-wrap: wrap; margin: -6px 0 14px; font-size: 13px; }
#profile span { background: #eef3f8; border-radius: 8px; padding: 5px 10px; color: #3b4a5a; } #profile span b { color: #1e5fc4; }
.card .rw { text-align: center; margin: -6px 0 16px; line-height: 1.7; font-size: 15px; } .card .rw b { font-size: 18px; } .card .rw .up { color: #1e9e4a; } .card .rw .dn { color: #d64545; }
#afk { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); background: rgba(160,20,20,0.9); border: 2px solid #ff6b6b; border-radius: 16px; padding: 14px 24px; text-align: center; font-size: 16px; font-weight: 700; animation: blink .6s infinite alternate; }
#afk b { display: block; font-size: 40px; line-height: 1.1; }
#afk.bot { top: auto; bottom: 150px; background: rgba(20,60,120,0.9); border-color: #6fb3ff; animation: none; font-size: 14px; padding: 8px 16px; }
#afk small { display: block; font-weight: 400; opacity: 0.9; margin-top: 4px; }
.card .ban { background: #fdecea; color: #b3261e; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 10px; }
.card button:disabled { opacity: 0.5; cursor: not-allowed; }
#toBar { position: absolute; top: 56px; left: 14px; display: flex; gap: 6px; pointer-events: auto; }
.tob { background: rgba(10,20,35,0.75); border: 1px solid rgba(255,255,255,0.35); border-radius: 12px; padding: 5px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.tob b { color: #ffd54a; margin-left: 3px; } .tob.off { opacity: 0.4; cursor: default; }
#toBox { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); background: rgba(10,20,35,0.88); border-radius: 16px; padding: 14px 26px; text-align: center; pointer-events: auto; min-width: 220px; }
#toBox .ttl { font-size: 20px; font-weight: 900; color: #ffd54a; } #toBox .cnt { font-size: 44px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
#toBox .sub { font-size: 12px; opacity: 0.8; margin-bottom: 8px; }
#toBox button { font-size: 14px; font-weight: 700; padding: 7px 16px; border: 0; border-radius: 10px; background: #2f80ed; color: #fff; cursor: pointer; }
#toBox button.hidden { display: none; }
@media (max-width: 700px) { #toBar { top: 96px; left: auto; right: 8px; flex-direction: column; gap: 4px; } .tob { font-size: 11px; padding: 4px 8px; } }   /* điện thoại: cột phải = ? → Time out → Y tế → thanh nhu cầu (needs.js), không đè nhau */
#helpBtn { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(10,20,35,0.75); border: 1px solid rgba(255,255,255,0.35); border-radius: 14px; padding: 4px 12px; font-size: 12px; font-weight: 700; pointer-events: auto; cursor: pointer; white-space: nowrap; }
#helpBtn small { opacity: 0.6; font-weight: 400; }
#viewBtn { position: absolute; right: 14px; bottom: 10px; background: rgba(10,20,35,0.75); border: 1px solid rgba(255,255,255,0.35); border-radius: 14px; padding: 4px 12px; font-size: 12px; font-weight: 700; pointer-events: auto; cursor: pointer; white-space: nowrap; }
#viewBtn small { opacity: 0.6; font-weight: 400; }
@media (max-width: 700px) { #viewBtn { right: auto; left: 10px; top: 102px; bottom: auto; font-size: 11px; padding: 4px 9px; } #viewBtn small { display: none; } }
#helpPanel { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); width: min(860px, 96vw); background: rgba(10,20,35,0.85); border-radius: 14px; padding: 10px 14px; pointer-events: auto; backdrop-filter: blur(6px); }
#helpPanel .hp { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; padding: 4px 0; }
#helpPanel .hp + .hp { border-top: 1px solid rgba(255,255,255,0.12); }
#helpPanel .hp b { color: #ffd54a; } #helpPanel .hp b.g { color: #6dff9a; }
#helpPanel .hp.tip { opacity: 0.9; }
#helpPanel .hp.mb { display: none; }
body.touch #helpPanel .hp.pc { display: none; } body.touch #helpPanel .hp.mb { display: flex; } body.touch .pconly { display: none; }
@media (max-width: 700px) {
  #helpBtn { left: auto; right: 10px; top: 56px; bottom: auto; transform: none; font-size: 11px; padding: 3px 9px; }
  #helpPanel { left: 50%; top: 86px; bottom: auto; width: 94vw; padding: 8px 10px; }
  #helpPanel .hp { font-size: 11px; gap: 4px 10px; }
}
#score #clk { font-variant-numeric: tabular-nums; font-size: 13px; opacity: 0.9; margin-left: 8px; border-left: 1px solid rgba(255,255,255,0.25); padding-left: 10px; }
#chatLog { position: absolute; left: 14px; bottom: 120px; width: min(360px, 60vw); display: flex; flex-direction: column; gap: 3px; font-size: 13px; pointer-events: none; }
#chatLog div { background: rgba(10,20,35,0.6); border-radius: 8px; padding: 4px 9px; max-width: 100%; opacity: 0.95; animation: chatIn .2s; }
#chatLog div b { color: #ffd54a; margin-right: 4px; } #chatLog div.opp b { color: #ff8a80; } #chatLog div.sys { color: #9fd8ff; font-style: italic; }
@keyframes chatIn { from { transform: translateY(6px); opacity: 0; } }
#chatBox { position: absolute; left: 70px; bottom: 30px; pointer-events: auto; display: flex; align-items: center; gap: 6px; background: rgba(10,20,35,0.7); border: 1px solid rgba(255,255,255,0.3); border-radius: 22px; padding: 4px 6px 4px 12px; }
#chatBox span { font-size: 16px; opacity: 0.8; }
#chatIn { width: min(300px, 50vw); font-size: 14px; padding: 7px 10px; border-radius: 16px; border: 0; background: rgba(255,255,255,0.1); color: #fff; outline: none; }
#chatIn:focus { background: rgba(255,255,255,0.22); }
#chatIn::placeholder { color: rgba(255,255,255,0.55); }
#chatLog { bottom: 86px; }
#emoteBtn { position: absolute; left: 14px; bottom: 30px; width: 46px; height: 46px; border-radius: 50%; background: rgba(10,20,35,0.75); border: 1px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; font-size: 22px; pointer-events: auto; cursor: pointer; }
#emotePanel { position: absolute; left: 14px; bottom: 84px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: rgba(10,20,35,0.85); padding: 8px; border-radius: 12px; pointer-events: auto; width: min(340px, 70vw); }
#emotePanel div { background: rgba(255,255,255,0.12); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
#emotePanel div:active { background: rgba(255,255,255,0.3); }
#emotePanel div i { font-style: normal; opacity: 0.55; margin-right: 5px; }
@media (max-width: 700px) {
  #chatLog { bottom: auto; top: 176px; font-size: 11px; width: 48vw; }
  #emoteBtn { bottom: auto; top: 58px; left: 10px; width: 38px; height: 38px; font-size: 18px; }
  #emotePanel { bottom: auto; top: 140px; left: 10px; }
  #chatBox { display: none; bottom: auto; top: 140px; left: 10px; padding: 3px 4px 3px 8px; } #chatBox.show { display: flex; } #chatBox span { display: none; } #chatIn { width: 44vw; font-size: 13px; padding: 6px 8px; }   /* ô chat ẩn, mở từ bảng biểu cảm (⌨ Chat) để đỡ rối */
}
#touch { position: fixed; inset: 0; z-index: var(--z-ctrl); pointer-events: none; }
#joyZone { position: absolute; left: 0; top: 0; bottom: 0; width: 48%; pointer-events: auto; }
#joy { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.12); opacity: 0; transition: opacity .15s; }
#joy.on { opacity: 1; }
/* 11-06: cần ảo MỜ cố định góc dưới trái khi chưa chạm (người mới biết có nút di chuyển); chạm = hiện đậm ngay dưới ngón tay như cũ, thả ra = về chỗ mờ */
body.touch #joy:not(.on) { opacity: .6; background: rgba(10,20,35,.35); border-color: rgba(255,255,255,.8); left: calc(env(safe-area-inset-left, 0px) + 88px) !important; top: calc(100% - 84px - var(--sab, 0px)) !important; }   /* 11-06b owner: hạ sát đáy (vòng cách đáy ~24px) để không che sân */   /* 11-06 owner: hạ thấp (dọc trước đây 100%-215 nằm giữa màn) */
body.touch #joy:not(.on) #joyKnob { transform: none !important; }
body.touch #joy:not(.on)::after { content: 'Kéo để di chuyển'; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 6px; white-space: nowrap; font: 700 12px 'Segoe UI', Roboto, Arial, sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
/* 11-06: ĐIỆN THOẠI NGANG THẤP (≤380px — Safari hiện thêm thanh tab còn ~318px): thu nhỏ thanh nhu cầu + joystick 80%, joystick sát đáy;
   nút Ngắm lên hàng trên bên trái cụm mic/loa (#vcBar top sat+52) — trước đây đè nhau; ẩn dòng chữ gợi ý ngắm */
@media (orientation: landscape) and (max-height: 380px) {
  body.touch #needs { transform: scale(.8); transform-origin: top left; }
  body.touch #aimBtn { top: calc(var(--sat, 0px) + 56px); bottom: auto; right: calc(max(14px, env(safe-area-inset-right)) + 112px); }
  body.touch #aimHint { display: none; }
}
@media (orientation: portrait) { body.touch #joy:not(.on)::after { top: auto; bottom: 100%; margin: 0 0 6px; } }   /* dọc: chữ lên TRÊN vòng (dưới bị nút thêm Ô 2 / dòng FPS đè) */
@media (orientation: landscape) and (max-height: 500px) { body.touch #joy:not(.on) { top: calc(100% - 84px - var(--sab, 0px)) !important; } }
@media (orientation: landscape) and (max-height: 380px) { body.touch #joy:not(.on) { transform: scale(.8); top: calc(100% - 56px - var(--sab, 0px)) !important; left: calc(env(safe-area-inset-left, 0px) + 72px) !important; } }
@media (orientation: landscape) and (max-height: 500px) { body.touch #joy:not(.on)::after { left: 100%; top: 50%; transform: translateY(-50%); margin: 0 0 0 10px; } }   /* 11-06: sát đáy — Safari ngang còn ~364px, cao hơn là đè thanh nhu cầu */
#joyKnob { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.85); box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
#btns { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 190px; height: 190px; pointer-events: auto; }
.tb { position: absolute; width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.45); border: 2px solid rgba(255,255,255,0.6); }
.tb.on { transform: scale(0.92); filter: brightness(1.2); }
.tb.soft { right: 0; bottom: 0; width: 92px; height: 92px; background: rgba(38,166,91,0.85); }
.tb.hard { right: 96px; bottom: 14px; background: rgba(239,108,0,0.85); }
.tb.lob { right: 18px; bottom: 104px; background: rgba(41,121,255,0.85); }
#aimBtn { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: 215px; pointer-events: auto; background: rgba(10,20,35,0.8); border: 1px solid rgba(255,255,255,0.45); border-radius: 14px; padding: 6px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
#aimBtn.manual { background: rgba(38,166,91,0.85); }
#aimHint { position: absolute; right: 14px; bottom: 250px; font-size: 11px; opacity: 0.85; text-align: right; pointer-events: none; text-shadow: 0 1px 3px #000; }
@media (max-width: 700px) {
  #score { font-size: 12px; padding: 5px 10px; } #score b { font-size: 20px; } #score em { display: none; }
  #call { font-size: 22px; } #hint { bottom: 150px; font-size: 12px; max-width: 60vw; }
  /* VAR điện thoại dọc: GIỮA màn, to (bóng so vạch rõ), các nút cột phải tạm ẩn (body.hawkOn) */
  #hawk { left: 50%; right: auto; top: calc(var(--sat, 0px) + 18%); transform: translateX(-50%); width: min(340px, 90vw); padding: 10px; }
  #hawk canvas { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  #hawkT b { font-size: 26px; } #hawkT span { font-size: 14px; }
  .card { padding: 18px; } .card h1 { font-size: 24px; } .card .row { flex-wrap: wrap; } .help { font-size: 11px; }
}

/* màn cài nhân vật 1 lần sau đăng ký (js/setup.js): tiến trình 3 bước, bước 2/3 hiện cạnh khung xem trước */
#setup .sprog { display: flex; gap: 6px; margin: 0 0 12px; }
#setup .sprog span { flex: 1; text-align: center; font-size: 12px; font-weight: 700; padding: 7px 4px; border-radius: 8px; background: #eef3f8; color: #8a96a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#setup .sprog span.on { background: #2f80ed; color: #fff; } #setup .sprog span.done { background: #d9f3e3; color: #1e9e4a; }
#setup #creator.min #copts, #setup #creator.min #crandom { display: none; }
#setup .spanel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#setup .spanel h3.sec { margin-top: 0; padding-top: 0; border-top: 0; }
#setup .spanel p { margin: 0 0 8px; font-size: 13px; color: #3b4a5a; }
#setup .sface small { display: block; margin-top: 8px; font-size: 12px; color: #5c6b7a; }
#setup .serr { color: #d64545; font-size: 13px; font-weight: 600; min-height: 18px; margin-top: 6px; }
#setup .snav { display: flex; gap: 10px; margin-top: 6px; }
#setup .snav button { flex: 1; margin: 0; } #setup .snav .sback { flex: 0 0 130px; background: #3b4a5a; font-size: 15px; }
@media (max-width: 700px) { #setup .sprog span { font-size: 11px; padding: 6px 2px; } #setup .snav .sback { flex: 0 0 104px; } #setup .spanel { width: 100%; } }
/* bảng đến lượt giao bóng: to, vàng, nhấp nháy nhẹ — dưới bảng điểm */
#serveBan { position: absolute; top: 92px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #ffd54a, #ffb300); color: #1b2a41; border-radius: 14px; padding: 8px 18px; text-align: center; box-shadow: 0 6px 24px rgba(255, 179, 0, .45); animation: serveBlink .9s infinite alternate; pointer-events: none; z-index: var(--z-note); }
#serveBan b { display: block; font-size: 20px; letter-spacing: .5px; } #serveBan small { display: block; font-size: 12px; font-weight: 700; opacity: .85; margin-top: 2px; }
@keyframes serveBlink { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.05); box-shadow: 0 6px 30px rgba(255, 179, 0, .8); } }
@media (max-width: 700px) {
  #serveBan { top: 60px; padding: 6px 12px; max-width: 70vw; } #serveBan b { font-size: 15px; } #serveBan small { font-size: 10px; }
  #needs { top: 206px; }   /* dưới cột ? / Time out / Y tế / Rời sân (toBar 96 + 3 nút) */
  #tkHud { top: 146px; bottom: auto; left: 10px; right: auto; font-size: 11px; padding: 4px 8px; }   /* cột trái dưới 💬 (58) và 🎥 (102): tránh vùng cần ảo */
}

/* VAR trên điện thoại ngang: giữa trên, cao theo màn */
@media (max-height: 500px) and (min-width: 701px) {
  body.touch #hawk { left: 50%; right: auto; top: calc(var(--sat, 0px) + 50px); transform: translateX(-50%); width: auto; padding: 8px; display: flex; gap: 10px; align-items: center; }   /* dưới bảng điểm */
  body.touch #hawk canvas { height: min(calc(100vh - 120px), 260px); width: auto; aspect-ratio: 4 / 3; }
  body.touch #hawkT { margin: 0; min-width: 110px; } body.touch #hawkT b { font-size: 26px; } body.touch #hawkT span { font-size: 14px; }
}
/* VAR đang hiện trên điện thoại (dọc / ngang): ẩn tạm nút + bảng phụ đè lên (hiện lại khi VAR tắt sau 5 s hoặc chạm vào VAR) */
@media (max-width: 700px) { body.hawkOn #helpBtn, body.hawkOn #toBar, body.hawkOn #needs, body.hawkOn #viewBtn, body.hawkOn #emoteBtn, body.hawkOn #tkHud, body.hawkOn #helpPanel, body.hawkOn #emotePanel { visibility: hidden; } }
@media (max-height: 500px) and (min-width: 701px) { body.touch.hawkOn #helpBtn, body.touch.hawkOn #toBar, body.touch.hawkOn #needs, body.touch.hawkOn #viewBtn, body.touch.hawkOn #emoteBtn, body.touch.hawkOn #tkHud, body.touch.hawkOn #helpPanel, body.touch.hawkOn #emotePanel { visibility: hidden; } }

/* ===== LỚP Z từng phần tử trận (thang ở :root) ===== */
#toBar, #tkHud, #needs, #vcBar { z-index: var(--z-side); }
#helpPanel, #emotePanel, #needPanel { z-index: var(--z-panel); }
#toBox, #call, #flash, #hint, #afk, #serveBan, #sclk, #specBox { z-index: var(--z-note); }
#end { z-index: var(--z-note); }   /* màn kết thúc = thông báo, phủ cả HUD lẫn nút */
#flash, #call { pointer-events: none; }
/* túi đồ nằm TRONG hộp time out trên điện thoại (needs.js chuyển vào): 1 thẻ duy nhất, không đè nút Ngắm / chữ phía sau */
#toBox #needPanel { position: static; margin: 6px 0 8px; min-width: 0; background: rgba(255,255,255,0.07); text-align: left; padding: 8px 10px; }
/* đang nghỉ (time out / y tế) trên máy cảm ứng: nút đánh vô dụng -> làm mờ để thẻ time out chiếm chỗ */
body.toOn #btns, body.toOn #aimBtn, body.toOn #aimHint { opacity: 0.15; pointer-events: none; }

/* ===== PC (rộng >700, cao >500): thông báo giữa không chồng nhau theo pha =====
   đang đánh: đồng hồ giao 56 → bảng giao bóng 92 → lời trọng tài ≥160px → flash ≥220px; đang nghỉ: trọng tài trên thẻ time out, flash dưới thẻ */
@media (min-width: 701px) and (min-height: 501px) {
  #call { top: max(160px, 26%); } #flash { top: max(222px, 38%); }
  body.toOn #call { top: max(60px, calc(24% - 58px)); } body.toOn #flash { top: calc(24% + 200px); }
  #hud:has(#helpPanel:not(.hidden)) #hint { bottom: 220px; } #hud:has(#helpPanel:not(.hidden)) #afk.bot { bottom: 262px; }   /* bảng hướng dẫn đáy đang mở: gợi ý lên trên bảng */
}
/* ===== ĐIỆN THOẠI DỌC (≤700px): cột trái 💬 🎥 vé chat · cột phải ❔ TO/Y tế nhu cầu thoại · giữa = thông báo · đáy = nút đánh / thẻ time out ===== */
@media (max-width: 700px) {
  #score { top: max(10px, var(--sat)); }
  #emoteBtn { top: calc(var(--sat) + 58px); } #viewBtn { top: calc(var(--sat) + 102px); }
  #emotePanel, #chatBox { top: calc(var(--sat) + 140px); } #chatLog { top: calc(var(--sat) + 176px); }
  #helpBtn { top: calc(var(--sat) + 56px); } #toBar { top: calc(var(--sat) + 96px); }
  #serveBan { top: calc(var(--sat) + 56px); } #sclk { top: calc(var(--sat) + 112px); }
  #helpPanel { top: calc(var(--sat) + 86px); max-height: calc(100% - var(--sat) - 86px - 260px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #call { top: calc(var(--sat) + 19%); font-size: 20px; width: max-content; max-width: 66vw; padding: 5px 12px; }
  #helpBtn small { display: none; }
  #flash { top: 40%; font-size: 16px; width: max-content; max-width: 66vw; text-align: center; }
  #hint { bottom: calc(var(--sab) + 284px); max-width: 84vw; }
  #afk.bot { bottom: calc(var(--sab) + 330px); }
  #toBox { top: auto; bottom: max(14px, var(--sab)); width: min(360px, 94vw); min-width: 0; padding: 10px 14px 12px; max-height: calc(100% - var(--sat) - 400px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  body.toOn #hint { bottom: auto; top: calc(var(--sat) + 47%); }   /* đang nghỉ: thẻ time out chiếm đáy -> gợi ý lên giữa màn */
  #toBox .ttl { font-size: 16px; } #toBox .cnt { font-size: 30px; } #toBox .sub { margin-bottom: 4px; }
  #toBox #needPanel { padding: 6px 10px; margin: 4px 0 8px; } #toBox #needPanel h4 { margin-bottom: 2px; }
  #toBox #btnResume { min-height: 44px; min-width: 160px; font-size: 15px; }
}
/* MÁY TÍNH BẢNG NGANG (cảm ứng, cao >500): 🎥 xuống hàng giữa đáy cạnh ❔ (mặc định góc phải dưới đè nút Mềm) */
@media (orientation: landscape) and (min-height: 501px) { body.touch #viewBtn { right: auto; left: calc(50% + 70px); bottom: max(10px, var(--sab, 0px)); } }
/* ===== ĐIỆN THOẠI NGANG (cao ≤500px) — 11-06 owner: GÓC DƯỚI TRÁI CHỈ CÒN JOYSTICK. trái trên = TO/Y tế + nhu cầu + chat (vài dòng) · giữa dưới = 💬 ❔ 🎥 · Slice/Topspin dọc cạnh nút Lốp · phải = vé, thoại, ngắm, nút đánh · giữa trên = thông báo · giữa dưới = thẻ time out ===== */
@media (max-height: 500px) and (min-width: 701px) {
  body.touch #toBar { top: calc(var(--sat) + 56px); left: max(14px, var(--sal)); }
  body.touch #needs { left: max(14px, var(--sal)); }
  body.touch #emoteBtn { left: calc(50% - 104px); bottom: max(4px, calc(var(--sab) - 4px)); width: 36px; height: 36px; font-size: 17px; }
  body.touch #emotePanel { left: 50%; transform: translateX(-50%); bottom: calc(max(8px, var(--sab)) + 40px); width: min(340px, 50vw); }
  body.touch #chatLog { left: calc(max(14px, var(--sal)) + 162px); top: calc(var(--sat) + 96px); bottom: auto; height: 62px; overflow: hidden; justify-content: flex-end; width: min(250px, 27vw); font-size: 11px; }   /* bên PHẢI cột thanh nhu cầu (dưới hàng Time out): không đè nhu cầu / joystick, chỉ vài dòng mới nhất */
  body.touch #chatBox { display: none; left: 50%; transform: translateX(-50%); bottom: calc(max(8px, var(--sab)) + 40px); } body.touch #chatBox.show { display: flex; } body.touch #chatBox span { display: none; } body.touch #chatIn { width: 40vw; }
  body.touch #viewBtn { right: auto; left: calc(50% + 60px); top: auto; bottom: max(8px, var(--sab)); } body.touch #viewBtn small { display: none; }
  body.touch #helpBtn { bottom: max(8px, var(--sab)); } body.touch #helpBtn small { display: none; }
  body.touch #helpPanel { top: calc(var(--sat) + 56px); bottom: auto; width: min(600px, 62vw); max-height: calc(100% - var(--sat) - 100px); overflow-y: auto; padding: 8px 10px; }
  body.touch #helpPanel .hp { font-size: 11px; gap: 4px 10px; }
  body.touch #aimHint { right: max(14px, var(--sar)); }
  /* giữa trên theo pha: đang đánh = bảng giao bóng (50) → đồng hồ giao (94) → lời trọng tài 34% → flash 47% → gợi ý 58%;
     đang nghỉ (toOn: không có bảng giao) = trọng tài 17% → flash 30% → gợi ý 41% → thẻ time out ở đáy */
  #serveBan { top: calc(var(--sat) + 50px); padding: 5px 14px; } #serveBan b { font-size: 16px; } #serveBan small { font-size: 11px; }
  #sclk { top: calc(var(--sat) + 96px); font-size: 12px; padding: 3px 10px; } #sclk b { font-size: 15px; }
  #call { top: 34%; font-size: 22px; width: max-content; max-width: 56vw; } #flash { top: 47%; font-size: 17px; width: max-content; max-width: 56vw; text-align: center; }
  #hint { top: 58%; bottom: auto; max-width: 52vw; font-size: 12px; }
  body.toOn #call { top: 17%; } body.toOn #flash { top: 30%; } body.toOn #hint { top: 41%; }
  body.toOn.touch #helpPanel { max-height: calc(48% - var(--sat) - 56px); }   /* mở hướng dẫn lúc nghỉ: dừng trên thẻ time out */
  #toBox { top: auto; bottom: calc(max(8px, var(--sab)) + 32px); padding: 8px 14px; min-width: 200px; max-width: 60vw; max-height: calc(59% - 40px); overflow-y: auto; }
  #toBox .ttl { font-size: 15px; } #toBox .cnt { font-size: 26px; } #toBox .sub { margin-bottom: 4px; }
  #toBox.bag { display: grid; grid-template-columns: auto minmax(170px, 1fr); grid-template-areas: "ttl bag" "cnt bag" "sub bag" "btn bag"; column-gap: 14px; align-items: center; }
  #toBox.bag .ttl { grid-area: ttl; } #toBox.bag .cnt { grid-area: cnt; } #toBox.bag .sub { grid-area: sub; } #toBox.bag button#btnResume { grid-area: btn; justify-self: center; }
  #toBox.bag #needPanel { grid-area: bag; margin: 0; }
  #toBox button#btnResume { min-height: 40px; }
}