/* Say Piano – màn "o-roi" (Khởi động Tác phẩm: ô nhạc rơi chơi liên tục), game/man/o-roi.js. Nạp sau bai-ngang.css.
 * Toàn màn: cột hẹp bên trái là nhân vật 3D nhỏ (góc dưới), khối làn phủ phần còn lại; HUD, thẻ bắt đầu, thẻ kết quả, băng chữ vòng
 * nổi trên khối làn. Đang chơi (.gm.or-dang-choi): ẩn thanh trên của bài để khối làn cao nhất.
 * Android cũ: không làm mờ nền, không bộ lọc; hiệu ứng DOM chỉ transform/opacity; html.po-giam tắt chuyển động. Không giãn khoảng cách chữ.
 * Vừa MỘT màn hình ở 844×390, 915×412, 740×360 (tools/kiem-tra-mot-man-hinh.mjs --bo tac-pham). */

.gm:has(.gm-man.or) .gm__main { padding: 4px 10px 6px; }
.gm.or-dang-choi .gm-top { display: none; }
.gm.or-dang-choi .gm__main { padding-top: calc(var(--safe-t, 0px) + 6px); }

.gm-screen > .gm-man.or { position: relative; display: grid; grid-template-columns: clamp(76px, 13%, 140px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  gap: 0 8px; height: 100%; min-height: 0; }

/* ---------- nhân vật nhỏ ở góc dưới trái ---------- */
.or__nv { align-self: end; justify-self: center; height: 34cqh; max-height: 100%; display: flex; align-items: flex-end; justify-content: center; line-height: 0; pointer-events: none; }
.or__nv > .nv3d { height: 100%; }
.or__nv > .nv3d > img { display: block; width: auto; height: 100%; aspect-ratio: 1; }

/* ---------- khối làn ---------- */
.or__lan { position: relative; width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column;
  background: #170550; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .04); }
.or__vung { position: relative; flex: 1 1 0; min-height: 0; }
.or-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.or.is-midi .or-canvas { pointer-events: none; }
.or__vung > .gm-cho { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.or__vung > .gm-cho[hidden] { display: none; }

/* số đếm vào */
.or__dem { position: absolute; inset: 40% 0 6% 0; display: grid; place-items: center; pointer-events: none;
  font-size: clamp(64px, 34cqh, 128px); font-weight: 800; line-height: 1; color: #FFE58A; text-shadow: 0 6px 26px rgba(0, 0, 0, .6); }
.or__dem:empty { display: none; }

/* combo to, mờ, phía trên vạch sáng */
.or__combo { position: absolute; left: 0; right: 0; top: 46%; text-align: center; pointer-events: none; font-size: clamp(30px, 15cqh, 58px); font-weight: 800;
  line-height: 1.3; color: rgba(255, 255, 255, .34); transform-origin: 50% 60%; }
.or__combo:empty { display: none; }
.or__combo.is-cau-vong { color: rgba(255, 226, 120, .55); }
.or__combo.is-nay { animation: or-nay .22s cubic-bezier(.3, 1.6, .5, 1); }
.or__combo.is-moc { animation: or-moc .7s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes or-nay { from { transform: scale(.7); } to { transform: none; } }
@keyframes or-moc { 0% { transform: scale(.6); color: #FFE58A; } 35% { transform: scale(1.5); color: #FFE58A; } 100% { transform: none; } }

/* băng chữ "Vòng N · Nhanh hơn!" trượt ngang */
.or__bang { position: absolute; left: 0; right: 0; top: 15%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0;
  background: linear-gradient(90deg, rgba(128, 99, 245, 0), rgba(128, 99, 245, .82) 18%, rgba(242, 135, 26, .82) 82%, rgba(242, 135, 26, 0));
  color: #fff; text-align: center; pointer-events: none; }
.or__bang:not(.is-chay) { display: none; }
.or__bang b { font-size: clamp(24px, 11cqh, 40px); font-weight: 800; line-height: 1.35; }
.or__bang span { font-size: clamp(14px, 5.5cqh, 20px); font-weight: 700; line-height: 1.2; color: #FFF3C4; }
.or__bang.is-chay { animation: or-bang 1.8s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes or-bang { 0% { opacity: 0; transform: translateX(-60%); } 18% { opacity: 1; transform: none; } 78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(60%); } }

/* ---------- HUD nổi ---------- */
.or-hud { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start;
  gap: 8px; padding: 8px 10px 0; pointer-events: none; }
.or-hud[hidden] { display: none; }
.or-hud__trai { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.or-hud__vong-chu { padding: 3px 10px; border-radius: 999px; background: rgba(14, 3, 46, .62); color: #FFE58A; font-size: 14px; font-weight: 800; line-height: 1.3; }
.or-hud__vach { display: block; width: clamp(70px, 14vw, 130px); height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.or-hud__vach-trong { display: block; height: 100%; background: linear-gradient(90deg, #FFD23F, #FF9A2E); transform-origin: 0 50%; transform: scaleX(0); }
.or-hud__giua { padding: 2px 16px; border-radius: 14px; background: rgba(14, 3, 46, .55); }
.or-hud__diem { display: block; font-size: clamp(22px, 10cqh, 36px); font-weight: 800; line-height: 1.2; color: #fff; text-align: center; }
.or-hud__phai { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.or-hud__mangs { display: flex; gap: 2px; padding: 3px 8px; border-radius: 999px; background: rgba(14, 3, 46, .62); }
.or-hud__mang { display: block; width: 22px; height: 22px; color: #FF6B8A; }
.or-hud__mang svg { display: block; width: 100%; height: 100%; }
.or-hud__mang.is-mat { color: rgba(255, 255, 255, .22); }
.or-hud__mang.is-vo { animation: or-vo .5s ease-out; }
@keyframes or-vo { 0% { transform: scale(1.5) rotate(0); color: #FF4D5E; } 50% { transform: scale(.6) rotate(-25deg); } 100% { transform: none; } }
.or-hud__dung { pointer-events: auto; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: linear-gradient(150deg, #FFB75E 0%, #F2871A 100%); color: #fff; box-shadow: none; cursor: pointer; }
.or-hud__dung svg { width: 22px; height: 22px; }
.or-hud__dung:focus-visible { outline: 3px solid #FFE58A; outline-offset: 2px; }

/* ---------- thẻ bắt đầu / kết quả (nổi giữa khối làn) ---------- */
.or-the { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100% - 24px)); max-height: calc(100% - 12px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(2px, 1.6cqh, 8px); padding: clamp(8px, 3cqh, 16px) 18px;
  border-radius: 20px; background: rgba(9, 16, 40, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 20px 40px -16px rgba(0, 0, 0, .8);
  text-align: center; overflow: hidden; }
.or-the[hidden] { display: none; }
.or-the p { margin: 0; }
.or-the__nho { font-size: 13px; font-weight: 800; line-height: 1.2; color: #FFD9A8; }
.or-the__loi { font-size: clamp(14px, 4.6cqh, 16px); font-weight: 800; line-height: 1.3; color: #fff; }
.or-the__luat { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ink-2); }
.or-the__goi-y { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink-3); }
.or-the__ky-luc { padding: 2px 10px; border-radius: 999px; background: rgba(255, 210, 63, .14); color: #FFE58A; font-size: 13px; font-weight: 800; line-height: 1.4; }

/* MỘT nút tròn ▶ */
.or .gm-play.or__nut { flex: none; width: 66px; height: 66px; min-width: 0; min-height: 0; padding: 0; gap: 0; justify-content: center;
  border-radius: 50%; color: #fff; background: linear-gradient(150deg, #8063F5 0%, #5534C9 100%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14); transition: transform .12s; animation: or-tho 1.8s ease-in-out infinite; }
.or .gm-play.or__nut svg { width: 34px; height: 34px; margin: 0; } /* hình ▶ đã lệch phải 2/24 trong viewBox = cân thị giác; thêm lề sẽ lệch */
.or .gm-play.or__nut:active { transform: scale(.95); }
.or .gm-play.or__nut:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 229, 138, .5); }
@keyframes or-tho { 0%, 100% { box-shadow: 0 0 0 0 rgba(128, 99, 245, .45); } 50% { box-shadow: 0 0 0 10px rgba(128, 99, 245, 0); } }

/* chip "Dễ" (chỉ khi có đàn MIDI) */
.or-toc { min-width: 44px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 3px 14px; border: 0; border-radius: 12px;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.or-toc[hidden] { display: none; }
.or-toc--de[aria-pressed="true"] { background: rgba(95, 209, 139, .18); box-shadow: inset 0 0 0 2px #5FD18B; color: #DDF8E6; }

/* thẻ kết quả */
.or-kq__sao { display: flex; gap: 6px; }
.or-kq__s { display: block; width: clamp(26px, 11cqh, 38px); height: clamp(26px, 11cqh, 38px); color: rgba(255, 255, 255, .22); }
.or-kq__s svg { display: block; width: 100%; height: 100%; }
.or-kq__s.is-co { color: #FFD23F; animation: or-sao .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.15s + var(--i) * .22s); }
@keyframes or-sao { from { transform: scale(.2) rotate(-35deg); opacity: 0; } to { transform: none; opacity: 1; } }
.or-kq__nho { font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--ink-3); }
.or-kq__diem { display: block; font-size: clamp(30px, 14cqh, 50px); font-weight: 800; line-height: 1.3; color: #fff; }
.or-kq__ky-luc { min-height: 1.3em; font-size: 14px; font-weight: 800; line-height: 1.3; color: #FFE58A; }
.or-kq__ky-luc.is-moi { padding: 2px 12px; border-radius: 999px; background: linear-gradient(90deg, #F0503C, #FF9A2E, #FFD23F); color: #2A1500;
  animation: or-moi .9s cubic-bezier(.3, 1.6, .5, 1) .5s both; }
@keyframes or-moi { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.or-kq__dong { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ink-2); white-space: nowrap; }
/* ván chạm màn hình: chỉ ván đàn MIDI vào bảng xếp hạng Khởi động */
.or-kq__xh { margin-top: 2px; padding: 3px 12px; border-radius: 999px; background: rgba(91, 168, 255, .16); box-shadow: inset 0 0 0 1px rgba(91, 168, 255, .35);
  font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #CFE3FF; white-space: nowrap; }

/* ---------- dải phím chạm ---------- */
.or-phim { flex: none; display: flex; gap: 2px; height: clamp(40px, 12cqh, 54px); height: calc(clamp(40px, 12cqh, 54px) + var(--safe-b, 0px));
  padding: 2px 2px calc(3px + var(--safe-b, 0px)); background: rgba(0, 0, 0, .3); }   /* chừa thanh chỉ báo Home (iPhone) */
.or-phim__k { flex: 1; min-width: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0 0 12px 12px;
  background: var(--m); color: var(--c); font: inherit; font-size: clamp(14px, 4.6cqh, 18px); font-weight: 800; line-height: 1; cursor: pointer;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), inset 0 -4px 0 rgba(0, 0, 0, .22); touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; transition: transform .06s; }
.or-phim__k.is-on { transform: translateY(2px) scale(.97); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .75), inset 0 -2px 0 rgba(0, 0, 0, .22); }
/* phím loé khi ăn ô (19/10): Tuyệt – sáng vàng bật nảy; Hay – sáng nhẹ; nhầm làn – rung đỏ */
.or-phim__k.is-tuyet { animation: or-phim-tuyet .32s cubic-bezier(.3, 1.6, .5, 1); }
.or-phim__k.is-hay { animation: or-phim-hay .26s ease-out; }
.or-phim__k.is-sai { animation: or-phim-sai .28s ease-out; }
@keyframes or-phim-tuyet { 0% { transform: translateY(3px) scale(.94); box-shadow: inset 0 0 0 4px #FFF3C4; }
  60% { transform: translateY(-2px) scale(1.04); } 100% { transform: none; } }
@keyframes or-phim-hay { 0% { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85); } 100% { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), inset 0 -4px 0 rgba(0, 0, 0, .22); } }
@keyframes or-phim-sai { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); box-shadow: inset 0 0 0 3px #FF6B7A; } 75% { transform: translateX(3px); } }
.or-phim__k:focus-visible { outline: 3px solid #FFE58A; outline-offset: -3px; }
.or-phim.is-midi { height: 24px; padding: 0 2px 2px; pointer-events: none; }
.or-phim.is-midi .or-phim__k { font-size: 12px; border-radius: 0 0 8px 8px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); opacity: .8; }
.or-phim.is-midi .or-phim__k.is-on { opacity: 1; transform: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); }

/* thanh phản hồi đang mở (hết ván): thẻ kết quả gọn hơn */
.gm.co-sheet .or-kq__dong + .or-kq__dong, .gm.co-sheet .or-kq__nho { display: none; }
.gm.co-sheet .or__nv { height: 30cqh; }

@container gm (max-height: 300px) {
  .or .gm-play.or__nut { width: 56px; height: 56px; }
  .or .gm-play.or__nut svg { width: 28px; height: 28px; }
  .or-the__goi-y, .or-the__nho { display: none; }
  .or-hud__mang { width: 19px; height: 19px; }
  .or-hud__dung { width: 36px; height: 36px; }
}
@container gm (max-height: 220px) {
  .or-the__luat, .or-kq__dong + .or-kq__dong { display: none; }
}

html.po-giam .or__combo.is-nay, html.po-giam .or__combo.is-moc, html.po-giam .or-kq__s.is-co, html.po-giam .or-hud__mang.is-vo,
html.po-giam .or-kq__ky-luc.is-moi, html.po-giam .or .gm-play.or__nut { animation: none; }
html.po-giam .or__bang.is-chay { animation: or-bang-giam 1.8s linear both; }
@keyframes or-bang-giam { 0%, 99% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
html.po-giam .or-phim__k, html.po-giam .or .gm-play.or__nut { transition: none; }
html.po-giam .or-phim__k.is-tuyet, html.po-giam .or-phim__k.is-hay, html.po-giam .or-phim__k.is-sai { animation: none; }

/* thẻ bắt đầu chỉ có nút ▶ (chủ dự án 20/10): không nền, không viền, nút to ở giữa */
.or-the.or-the--bd { width: auto; padding: 0; background: none; border: 0; box-shadow: none; }
.or .or-the--bd .gm-play.or__nut { width: 84px; height: 84px; }
.or .or-the--bd .gm-play.or__nut svg { width: 42px; height: 42px; }