/* Bố cục và thành phần của Billiards Practice theo thiết kế Claude Design. Token ở tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--color-text); overscroll-behavior: none; }
body { font: 400 15px/1.55 var(--font-body); color: var(--color-neutral-100); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.app { position: fixed; inset: 0; /* khi cầm dọc, main.js đặt width/height đã hoán đổi + --vw rồi bật .rot */ display: flex; flex-direction: column; background: var(--color-text); overflow: hidden; user-select: none; -webkit-user-select: none; }
[hidden] { display: none !important; }

/* ── thanh trên ── */
.top { height: var(--top-h, 64px); flex: none; display: flex; align-items: stretch; border-bottom: 2px solid var(--color-neutral-800); background: var(--color-text); min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 18px; border-right: 2px solid var(--color-neutral-800); }
.brand i { width: 14px; height: 14px; background: var(--color-accent); flex: none; }
.brand div { display: flex; flex-direction: column; gap: 5px; }
.brand b { font: 800 18px/1 var(--font-heading); letter-spacing: -0.01em; white-space: nowrap; }
.brand span { font: 700 10px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-500); white-space: nowrap; }
.pcell { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 18px; transition: background .3s, box-shadow .3s; }
.pcell.p1 { border-right: 2px solid var(--color-neutral-800); }
.pcell.p2 { flex-direction: row-reverse; border-left: 2px solid var(--color-neutral-800); }
.pcell.active { background: var(--color-neutral-900); box-shadow: inset 0 -4px 0 var(--color-accent); }
.dot { width: 20px; height: 20px; border-radius: 50%; flex: none; }
.dot.white { background: radial-gradient(circle at 35% 30%, #fff, #f2ede1 50%, #a39d8d); }
.dot.yellow { background: radial-gradient(circle at 35% 30%, #fff0a0, #f0b81c 45%, #8a5f05); }
.dot.red { background: radial-gradient(circle at 35% 30%, #ff9a82, #e5321a 45%, #6e1004); }
.ptext { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; align-items: flex-start; }
.p2 .ptext { align-items: flex-end; }
.pname { font: 800 14px/1 var(--font-heading); color: var(--color-neutral-500); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.psub { font: 600 11px/1 var(--font-body); color: var(--color-neutral-500); white-space: nowrap; font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pscore { font: 800 34px/1 var(--font-heading); font-variant-numeric: tabular-nums; color: var(--color-neutral-500); }
.pcell.active .pname, .pcell.active .pscore { color: var(--color-neutral-100); }
.center { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 0 18px; }
.clabel { font: 700 10px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-500); white-space: nowrap; }
.pips { display: flex; gap: 10px; align-items: center; }
.cush { display: flex; gap: 4px; }
.pip { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-neutral-700); color: var(--color-neutral-500); font: 800 12px/1 var(--font-heading); transition: background .2s, border-color .2s, transform .25s cubic-bezier(.2, .9, .2, 1.4); }
.pip.on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-neutral-100); }
.pip.now { transform: scale(1.15); }
.objpips { display: flex; gap: 6px; align-items: center; }
.obj { width: 16px; height: 16px; border-radius: 50%; opacity: .3; transition: opacity .25s; }
.obj.hit { opacity: 1; box-shadow: 0 0 0 2px var(--color-neutral-100); }
.obj.white, .dot.white { background: radial-gradient(circle at 64% 40%, #cf1a22 0 11%, transparent 13%), radial-gradient(circle at 35% 30%, #fff, #f2ede1 50%, #a39d8d); }
.obj.yellow, .dot.yellow { background: radial-gradient(circle at 64% 40%, #cf1a22 0 11%, transparent 13%), radial-gradient(circle at 35% 30%, #fff0a0, #f0b81c 45%, #8a5f05); }  /* bi chấm như bi thi đấu */
.obj.red { background: radial-gradient(circle at 35% 30%, #ff9a82, #e5321a 45%, #6e1004); }
.tools { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-left: 2px solid var(--color-neutral-800); }
.tbtn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: 2px solid var(--color-neutral-700); color: var(--color-neutral-100); cursor: pointer; padding: 0; }
.tbtn:hover { border-color: var(--color-accent); color: var(--color-accent-400); }
.tbtn[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-neutral-100); }
.tbtn:disabled { opacity: .45; cursor: default; }

/* ── sân khấu + bàn ── */
.stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 50%, var(--color-neutral-800) 0%, var(--color-neutral-900) 45%, var(--color-text) 100%); }
.wrap { position: relative; flex: none; }
#table { position: absolute; cursor: crosshair; touch-action: none; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
#table.grab { cursor: grab; }
#table.lens { cursor: ew-resize; }
.rail { position: absolute; right: 0; top: var(--rail-top); height: var(--rail-h); width: var(--rail-w); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--rail-pad, 0px) 0; }
.spin { position: relative; width: var(--spin, 46px); height: var(--spin, 46px); flex: none; margin-bottom: 4px; padding: 0; border-radius: 50%; border: 2px solid rgba(32, 30, 29, .5); background: radial-gradient(circle at 36% 30%, #fff 0%, #f2ede1 45%, #a39d8d 100%); cursor: pointer; box-shadow: 2px 3px 0 rgba(0, 0, 0, .35); }
.spin:hover { border-color: var(--color-accent); }
.spin i { position: absolute; width: 24%; height: 24%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-accent); }
.pct { font: 800 clamp(11px, calc(var(--rail-w) * .28), 17px)/1 var(--font-heading); font-variant-numeric: tabular-nums; }
.meter { position: relative; flex: 1; min-height: 36px; width: max(28px, calc(var(--rail-w) * .55)); border: 2px solid rgba(248, 244, 244, .35); background: linear-gradient(to top, var(--color-accent-200) 0%, var(--color-accent-400) 35%, var(--color-accent) 70%, var(--color-accent-800) 100%); cursor: ns-resize; touch-action: none; }
.meter .tick { position: absolute; left: 0; right: 0; height: 2px; background: rgba(32, 30, 29, .35); pointer-events: none; }
.meter .tick.t20 { top: 20%; } .meter .tick.t40 { top: 40%; } .meter .tick.t60 { top: 60%; } .meter .tick.t80 { top: 80%; }
.meter .mask { position: absolute; left: 0; right: 0; top: 0; height: calc((1 - var(--p, .6)) * 100%); background: rgba(32, 30, 29, .9); pointer-events: none; }
.meter .mark { position: absolute; left: -9px; right: -9px; top: calc((1 - var(--p, .6)) * 100%); height: 0; border-top: 3px solid var(--color-neutral-100); margin-top: -1.5px; pointer-events: none; }
.meter .mark::before, .meter .mark::after { content: ""; position: absolute; top: -8px; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }
.meter .mark::before { left: 0; border-left: 8px solid var(--color-neutral-100); }
.meter .mark::after { right: 0; border-right: 8px solid var(--color-neutral-100); }
.corner { position: absolute; right: 0; bottom: 0; width: var(--corner-w); height: var(--corner); display: flex; align-items: center; justify-content: center; }
.shoot { width: var(--q); height: var(--q); padding: 0; display: flex; align-items: center; justify-content: center; background: var(--color-accent); border: 0; color: var(--color-neutral-100); cursor: pointer; box-shadow: 2px 3px 0 rgba(0, 0, 0, .35); }
.shoot:hover:not(:disabled) { background: var(--color-accent-600); }
.shoot:disabled { opacity: .45; cursor: default; }
.aichip { position: absolute; left: 50%; top: calc(var(--r, 0px) + 12px); transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(32, 30, 29, .88); border: 2px solid rgba(248, 244, 244, .3); font: 700 12px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; white-space: nowrap; }
.frozenbar { position: absolute; left: 50%; bottom: calc(var(--r, 0px) + 12px); transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; background: rgba(32, 30, 29, .92); border: 2px solid rgba(248, 244, 244, .3); font: 700 12px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; max-width: min(640px, 92%); }
.frozenbar.push { border-color: var(--color-accent); }
.frozenbar .btn { white-space: nowrap; flex: none; }
.aichip i { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff0a0, #f0b81c 45%, #8a5f05); }

/* ── dải mất kết nối (net.js): nằm trên cả lớp phủ, không chặn thao tác ── */
.netbar { position: absolute; left: 50%; top: calc(var(--top-h, 56px) + 8px); transform: translateX(-50%); z-index: 6; padding: 8px 16px; background: var(--color-accent); color: var(--color-neutral-100); border: 2px solid var(--color-neutral-100); box-shadow: var(--shadow-lg); font: 800 12px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }

/* ── toast ── */
.toast { position: absolute; left: 50%; top: 50%; z-index: 3; pointer-events: none; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 20px 36px 22px; background: var(--color-text); box-shadow: var(--shadow-lg);
  transform: translate(-50%, -50%) scale(.6) rotate(4deg); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.6, .4, 1), opacity .25s; }
.toast.on { transform: translate(-50%, -50%) scale(1) rotate(-3deg); opacity: 1; }
.toast.win { background: var(--color-accent); } .toast.ai { border: 3px solid #f0b81c; }
.toast b { font: 800 72px/.9 var(--font-heading); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; }
.toast span { font: 700 12px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }

/* ── popup điểm chạm: lớp phủ toàn màn hình (bàn mờ), bi chủ phóng to ở giữa; bấm nền = áp dụng (spec feedback-polish §6) ── */
.pop { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(32, 30, 29, .55); }
.pop .popin { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bigball { position: relative; width: var(--big, 240px); aspect-ratio: 1; flex: none; border-radius: 50%; border: 2px solid var(--color-text); background: radial-gradient(circle at 36% 30%, #fff 0%, #f2ede1 45%, #a39d8d 100%); box-shadow: 3px 4px 0 rgba(32, 30, 29, .25); cursor: crosshair; touch-action: none; }
.bigball u { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(32, 30, 29, .3); pointer-events: none; text-decoration: none; }
.bigball s { position: absolute; background: rgba(32, 30, 29, .25); pointer-events: none; text-decoration: none; }
.bigball u.r12 { inset: 12%; } .bigball u.r30 { inset: 30%; } .bigball u.r46 { inset: 46%; }   /* 3 vòng tròn đồng tâm */
.bigball s.v { left: 50%; top: 8%; bottom: 8%; width: 1px; } .bigball s.h { top: 50%; left: 8%; right: 8%; height: 1px; }   /* chữ thập */
.bigball i { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 3px rgba(248, 244, 244, .95); pointer-events: none; }
.pop .lbl { font: 700 13px/1.3 var(--font-body); color: var(--color-neutral-100); }
.pop #spinReset { flex: none; color: var(--color-neutral-100); border-color: rgba(248, 244, 244, .45); background: rgba(32, 30, 29, .6); }

/* ── nút chung ── */
.btn { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; cursor: pointer; font: 800 14px/1.2 var(--font-heading); color: var(--color-text); background: transparent; border: 1px solid transparent; padding: 8px 14.4px; flex: 1; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); } .btn-primary:hover { background: var(--color-accent-600); }
.btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

/* ── lớp phủ: mở đầu / luật / tạm dừng / kết thúc ── */
.overlay { position: absolute; inset: 0; z-index: 5; background: rgba(32, 30, 29, .6); display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.ov { width: 100%; max-width: 540px; max-height: 100%; overflow: auto; background: var(--color-bg); border: 2px solid var(--color-text); box-shadow: var(--shadow-lg); color: var(--color-text); }
.ov.red { background: var(--color-accent); border-color: var(--color-accent-700); }
.ov .head { padding: 26px 30px 20px; display: flex; flex-direction: column; gap: 12px; }
.ov .kick { font: 700 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--color-neutral-700); }
.ov.red .kick { color: var(--color-text); }
.ov h1 { margin: 0; font: 800 58px/.95 var(--font-heading); letter-spacing: -.02em; text-wrap: balance; }
.ov.red h1 { color: var(--color-neutral-100); }
.ov p { margin: 0; font: 500 16px/1.5 var(--font-body); color: var(--color-neutral-800); text-wrap: pretty; }
.ov.red p { color: var(--color-text); }
.ov .rules { border-top: 2px solid var(--color-accent-700); }
.ov .rule { display: grid; grid-template-columns: 76px minmax(0, 1fr); border-bottom: 2px solid var(--color-accent-700); }
.ov .rule b { padding: 13px 0 13px 30px; font: 800 17px/1.3 var(--font-heading); color: var(--color-neutral-100); }
.ov .rule span { padding: 13px 30px 13px 0; font: 600 15px/1.4 var(--font-body); }
.ov .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); }
.ov.red .stats { border-color: var(--color-accent-700); }
.ov .stat { padding: 16px 0 16px 30px; display: flex; flex-direction: column; gap: 8px; border-right: 2px solid var(--color-text); }
.ov.red .stat { border-color: var(--color-accent-700); } .ov .stat:last-child { border-right: 0; }
.ov .stat span { font: 700 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-700); }
.ov .stat b { font: 800 26px/1 var(--font-heading); font-variant-numeric: tabular-nums; }
.ov .settings { padding: 4px 30px 8px; display: flex; flex-direction: column; border-top: 2px solid var(--color-text); }
.ov .set { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-divider); flex-wrap: wrap; }
.ov .set:last-child { border-bottom: 0; }
.ov .set label { font: 700 13px/1.2 var(--font-body); }
.seg { display: inline-flex; border: 1px solid var(--color-divider); }
.seg button { padding: 7px 12px; font-size: 13px; cursor: pointer; background: transparent; border: 0; color: inherit; }
.seg button + button { border-left: 1px solid var(--color-divider); }
.seg button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-bg); }
.seg button:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.ov .actions { display: flex; gap: 10px; padding: 22px 30px 26px; flex-wrap: wrap; }
.ov .go { min-height: 52px; min-width: 200px; padding: 0 22px; display: flex; align-items: center; gap: 12px; border: 0; background: var(--color-accent); color: var(--color-neutral-100); font: 800 15px/1 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; flex: none; }
.ov.red .go { background: var(--color-text); }
.ov .go:hover { opacity: .88; }
.ov .second { min-height: 52px; flex: none; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; padding: 0 22px; }
.ov.red .second { border-color: var(--color-accent-700); color: var(--color-text); }

/* ── bài tập: chọn system, thông tin system, lời giải ── */
.ov:has(.systems) { max-width: 760px; }
.ov .systems { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); border-top: 2px solid var(--color-text); }
.ov .sys { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 12px 16px; background: transparent; border: 0; border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); text-align: left; cursor: pointer; color: inherit; min-width: 0; }
.ov .sys:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.ov .sys[aria-pressed="true"] { box-shadow: inset 4px 0 0 var(--color-accent); }
.ov .sys b { font: 800 15px/1.15 var(--font-heading); }
.ov .sys span { font: 700 10px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-700); }
.ov .sys small { font: 600 12px/1 var(--font-body); color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }
.chip { display: inline-block; padding: 3px 8px; background: var(--c); color: #f8f4f4; font: 800 13px/1.2 var(--font-heading); border: 1.5px solid rgba(32, 30, 29, .35); white-space: nowrap; }
.ov .drillinfo { display: flex; flex-direction: column; gap: 14px; padding: 4px 30px 18px; }
.ov .formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ov .formula .op { font: 800 20px/1 var(--font-heading); }
.ov .legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; }
.ov .leg { display: flex; align-items: center; gap: 10px; font: 600 14px/1.2 var(--font-body); }
.ov .leg .chip { min-width: 52px; text-align: center; }
.ov .stats.sol { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ov .stats.sol .stat { border-bottom: 1px solid var(--color-divider); }
.ov .stats.sol .stat b { font-size: 20px; }
.ov p.note { padding: 14px 30px 0; font-size: 14px; color: var(--color-neutral-700); }

/* ── màn hẹp/thấp: gọn thanh trên để không chồng chữ (lỗi của bản thiết kế ở 390 px).
      Dùng thuộc tính data-w / data-h do main.js đặt theo cỡ HIỆU DỤNG (sau khi xoay), không dùng @media theo cỡ cửa sổ thật. ── */
.app:is([data-w="s"], [data-w="xs"], [data-w="xxs"]) :is(.brand, .clabel, .psub) { display: none; }
.app:is([data-w="s"], [data-w="xs"], [data-w="xxs"]) .pcell { gap: 8px; padding: 0 10px; }
.app:is([data-w="s"], [data-w="xs"], [data-w="xxs"]) .pscore { font-size: 24px; }
.app:is([data-w="s"], [data-w="xs"], [data-w="xxs"]) .center { padding: 0 8px; }
.app:is([data-w="s"], [data-w="xs"], [data-w="xxs"]) .toast { padding: 12px 20px 14px; }
.app:is([data-w="s"], [data-w="xs"], [data-w="xxs"]) .toast b { font-size: 40px; }
.app:is([data-w="s"], [data-w="xs"], [data-w="xxs"]) .ov h1 { font-size: 42px; }
.app:is([data-w="s"], [data-w="xs"], [data-w="xxs"]) .ov .head { padding: 22px 20px 16px; }
.app:is([data-w="s"], [data-w="xs"], [data-w="xxs"]) .ov .rule b { padding-left: 20px; }
.app:is([data-w="s"], [data-w="xs"], [data-w="xxs"]) .ov .stat { padding-left: 20px; }
.app:is([data-w="s"], [data-w="xs"], [data-w="xxs"]) :is(.ov .actions, .ov .settings) { padding-left: 20px; padding-right: 20px; }
.app:is([data-w="xs"], [data-w="xxs"]) .pname { display: none; }
.app:is([data-w="xs"], [data-w="xxs"]) .tools { gap: 4px; padding: 0 6px; }
.app:is([data-w="xs"], [data-w="xxs"]) .tbtn { width: 36px; height: 36px; }
.app:is([data-w="xs"], [data-w="xxs"]) .pcell { padding: 0 4px; gap: 6px; }
.app:is([data-w="xs"], [data-w="xxs"]) .pscore { font-size: 22px; }
.app:is([data-w="xs"], [data-w="xxs"]) .center { padding: 0 4px; }
.app:is([data-w="xs"], [data-w="xxs"]) .pip { width: 22px; height: 22px; }
.app:is([data-w="xs"], [data-w="xxs"]) .ov .stats { grid-template-columns: 1fr; }
.app:is([data-w="xs"], [data-w="xxs"]) .ov .stat { border-right: 0; border-bottom: 2px solid var(--color-text); flex-direction: row; justify-content: space-between; padding-right: 20px; align-items: center; }
.app:is([data-w="xs"], [data-w="xxs"]) .ov.red .stat { border-color: var(--color-accent-700); }
.app:is([data-w="xs"], [data-w="xxs"]) .ov .stat:last-child { border-bottom: 0; }
.app:is([data-w="xs"], [data-w="xxs"]) :is(#fsBtn, #onlineBtn) { display: none; }   /* màn hẹp: chế độ online vào từ bảng Tạm dừng */
.app[data-w="xxs"] :is(.objpips, .p1 .dot, .p2 .dot) { display: none; }
.app[data-w="xxs"] .pips { gap: 0; }
.app[data-mode="drill"][data-dense="1"] .brand { display: none; }

/* màn thấp (điện thoại ngang): thanh trên mỏng, các nút nhỏ lại */
.app[data-h="short"] .tbtn { width: 34px; height: 34px; } .app[data-h="short"] .tools { gap: 6px; padding: 0 8px; }
.app[data-h="short"] .pip { width: 22px; height: 22px; } .app[data-h="short"] .pscore { font-size: 26px; } .app[data-h="short"] .brand { padding: 0 12px; } .app[data-h="short"] .center { gap: 5px; }
.app[data-h="short"] .toast b { font-size: 40px; } .app[data-h="short"] .toast { padding: 10px 20px 12px; } .app[data-h="short"] .ov h1 { font-size: 40px; } .app[data-h="short"] .ov .head { padding: 16px 20px 12px; }
.app[data-h="short"] :is(.ov .rule b, .ov .rule span) { padding-top: 8px; padding-bottom: 8px; } .app[data-h="short"] .ov .actions { padding: 14px 20px 16px; }

@media (prefers-reduced-motion: reduce) { .toast, .pip, .obj, .pcell { transition: none; } }

/* ── cầm dọc: xoay cả giao diện 90° để vẫn full màn hình ngang (điểm cục bộ (x,y) → màn hình (vw − y, x)) ── */
.app.rot { inset: auto; top: 0; left: 0; transform-origin: 0 0; transform: translateX(var(--vw)) rotate(90deg); }
/* tai thỏ / thanh điều hướng: chừa vùng an toàn khi giao diện không xoay (khi xoay 90° dùng cỡ hoán đổi, bỏ qua) */
.app[data-rot="0"] { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; }

/* ── thi đấu online: đồng hồ cú đánh, nút gia hạn, dòng trạng thái, sảnh / chờ / chọn / kết quả ── */
.clock { position: relative; width: 30px; height: 30px; flex: none; }
.clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.clock circle { fill: none; stroke-width: 4; }
.clock .bg { stroke: var(--color-neutral-700); }
.clock .fg { stroke: var(--color-accent); stroke-dasharray: 100.53; stroke-dashoffset: 0; transition: stroke-dashoffset .2s linear; }   /* chu vi 2π·16 */
.clock b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 12px/1 var(--font-heading); color: var(--color-neutral-100); font-variant-numeric: tabular-nums; }
.clock.warn .fg { stroke: #ff5a3c; } .clock.warn b { color: var(--color-accent-400); }
.clock.paused { opacity: .5; }
.tbtn.ext { width: auto; min-width: 40px; padding: 0 8px; font: 800 13px/1 var(--font-heading); }
.aichip { white-space: normal; text-align: center; max-width: min(560px, 86%); line-height: 1.3; }
.ov .codebox { padding: 6px 30px 4px; display: flex; gap: 10px; }
.ov .codebox input { flex: 1; min-width: 0; font: 800 22px/1 var(--font-heading); letter-spacing: .16em; text-transform: uppercase; padding: 12px; background: transparent; color: inherit; border: 2px solid var(--color-text); border-radius: 0; }
.ov .codebox input:focus { outline: 3px solid var(--color-accent); outline-offset: 1px; }
.ov .codebox .btn { flex: none; padding: 0 18px; justify-content: center; }
.ov .lobbyerr { margin: 0; padding: 4px 30px 8px; color: var(--color-accent-700); font: 700 14px/1.4 var(--font-body); }
.ov .bigcode { padding: 4px 30px 6px; font: 800 44px/1.1 var(--font-heading); letter-spacing: .14em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.ov .seatlist { margin: 0; padding: 4px 30px 12px; list-style: none; display: flex; flex-direction: column; gap: 6px; font: 700 14px/1.3 var(--font-body); }
.ov .seatlist li { display: flex; justify-content: space-between; gap: 12px; }
.ov .seatlist .off { color: var(--color-neutral-700); font-weight: 600; }
.ov .linkrow { padding: 0 30px 8px; font: 600 13px/1.4 var(--font-body); color: var(--color-neutral-700); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.ov .lagres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); }
.ov .lagres .stat { border-right: 2px solid var(--color-text); } .ov .lagres .stat:last-child { border-right: 0; }
.app:is([data-w="s"], [data-w="xs"], [data-w="xxs"]) .ov .bigcode { font-size: 30px; padding-left: 20px; padding-right: 20px; }
.app:is([data-w="s"], [data-w="xs"], [data-w="xxs"]) :is(.ov .codebox, .ov .lobbyerr, .ov .seatlist, .ov .linkrow) { padding-left: 20px; padding-right: 20px; }
.app[data-h="short"] .clock { width: 26px; height: 26px; }