/* ============================================================
   dau-truong.css – Đấu Trường: khủng long của bé (trái) đấu trùm (phải), thanh máu, sao tuyệt chiêu,
   hình của đề ở giữa, các lựa chọn ở dưới; thẻ mở đầu và thẻ kết quả. Mọi lớp có tiền tố .dt-
   ============================================================ */

.dt-san { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; touch-action: manipulation; }
.dt-san.co-the .dt-dau, .dt-san.co-the .dt-lua-chon { visibility: hidden; }

/* ---------- Sân đấu ---------- */
.dt-dau { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 12px; min-height: 0; }
.dt-dau.co-hinh { grid-template-columns: minmax(0, 22fr) minmax(0, 43fr) minmax(0, 35fr); }
.dt-ben { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; min-width: 0; }
.dt-bang { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; max-width: 100%; background: rgba(255,255,255,.95); border-radius: 18px; padding: 6px 14px 8px; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.dt-bang-trum { width: min(290px, 100%); }
.dt-ten { max-width: 100%; font-size: 21px; line-height: 1.15; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-bang-trum .dt-ten { color: var(--tim-dam); }

/* Sao tuyệt chiêu: mỗi câu tự làm đúng thắp một sao, đủ 3 sao là tuyệt chiêu */
.dt-sao { display: flex; gap: 4px; }
.dt-sao i { width: 28px; height: 28px; display: grid; place-items: center; font-style: normal; font-size: 26px; line-height: 1; color: #ddd6ef; transition: color .2s, transform .25s cubic-bezier(.2,1.6,.4,1), text-shadow .2s; }
.dt-sao i::before { content: "★"; }
.dt-sao i.sang { color: #ffc233; text-shadow: 0 0 8px rgba(255,180,0,.85); transform: scale(1.15); }

/* Thanh máu của trùm: mỗi khúc là một đòn */
.dt-mau { display: flex; align-items: center; gap: 6px; width: 100%; }
.dt-mau-tim { flex: none; color: var(--do); font-size: 20px; line-height: 1; }
.dt-mau-ong { position: relative; display: block; flex: 1; height: 18px; border-radius: 99px; background: #eee9fa; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.22); }
.dt-mau-ong i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 99px; }
.dt-mau-mat { background: #ffd166; transition: width .6s ease-in .45s; }
.dt-mau-con { background: linear-gradient(180deg, #ff86a3, #ef476f 60%, #d63a60); transition: width .35s cubic-bezier(.2,.8,.2,1); }
.dt-mau-ong::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--so-khuc, 12) - 2px), rgba(255,255,255,.9) calc(100% / var(--so-khuc, 12) - 2px), rgba(255,255,255,.9) calc(100% / var(--so-khuc, 12))); }
.dt-mau-so { flex: none; min-width: 28px; font-size: 21px; line-height: 1; color: var(--do-dam); text-align: right; font-variant-numeric: tabular-nums; }

/* Chỗ đứng của hai bên */
.dt-dung { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; }
.dt-dung::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: -8px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(50,20,10,.42), transparent); }
.dt-dong { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center; transform-origin: 50% 100%; }
.dt-dong img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
.dt-ben-be .dt-dong img { max-height: 80%; max-width: 72%; }
.dt-dau.co-hinh .dt-ben-be .dt-dong img { max-width: 90%; }
.dt-hinh-trum { transform: scaleX(-1); }
.dt-dong.dt-thua { transform: rotate(-9deg) translateY(14px) scale(.92); }
.dt-dong.dt-thua img { filter: saturate(.75) drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
.dt-dong.dt-tuyet-chieu img { filter: drop-shadow(0 0 12px #ffd166) drop-shadow(0 0 26px #ff8a1f); }

/* Hình của đề (tia số, đồng hồ, biểu đồ…) ở giữa sân */
.dt-giua { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: 4px 0 6%; }
.dt-hinh-de { width: 100%; max-height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.97); border-radius: 22px; padding: 12px; box-shadow: 0 6px 0 rgba(34,26,59,.2), 0 12px 26px rgba(0,0,0,.28); font-size: 26px; font-weight: 700; color: var(--ink); text-align: center; }
.dt-hinh-de > * { max-width: 100%; }
.dt-hinh-de > svg { display: block; width: 100%; height: auto; max-height: min(300px, 42vh); }

/* Lời nói (gợi ý của khủng long của bé, trò của trùm) */
.dt-noi { position: absolute; z-index: 5; top: 0; width: max-content; max-width: min(320px, 36vw); background: #fff; color: var(--ink); font-size: 20px; font-weight: 800; line-height: 1.25; padding: 10px 16px; border-radius: 20px; box-shadow: var(--bong); }
.dt-noi::after { content: ""; position: absolute; bottom: -12px; width: 22px; height: 16px; background: #fff; clip-path: polygon(0 0, 100% 0, 30% 100%); }
.dt-noi-be { left: 44%; border-bottom-left-radius: 6px; }
.dt-noi-be::after { left: 10px; }
.dt-noi-trum { right: 44%; border-bottom-right-radius: 6px; }
.dt-noi-trum::after { right: 10px; clip-path: polygon(0 0, 100% 0, 70% 100%); }

/* Hiệu ứng trúng đòn */
.dt-no { position: absolute; left: 50%; top: 42%; z-index: 3; width: 130px; height: 130px; margin: -65px 0 0 -65px; opacity: 0; pointer-events: none; }
.dt-no svg { width: 100%; height: 100%; }
.dt-no.no-to { width: 230px; height: 230px; margin: -115px 0 0 -115px; }
.dt-so-tru { position: absolute; left: 50%; top: 26%; z-index: 4; transform: translateX(-50%); font-size: 46px; font-weight: 800; line-height: 1; color: #fff; -webkit-text-stroke: 7px #b3264b; paint-order: stroke; pointer-events: none; white-space: nowrap; opacity: 0; }
.dt-so-tru.to { font-size: 66px; color: #ffd166; }
.dt-choang { position: absolute; left: 50%; top: 12%; z-index: 3; transform: translateX(-50%); font-size: 58px; line-height: 1; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.dt-dan { position: absolute; left: 0; top: 0; z-index: 4; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; pointer-events: none; display: grid; place-items: center; background: radial-gradient(circle, #fff 0 18%, #ffe27a 36%, rgba(255,138,31,.55) 56%, rgba(255,138,31,0) 72%); transform: translate(var(--tu-x, 0), var(--tu-y, 0)); }
.dt-dan::before { content: "★"; font-size: 40px; line-height: 1; color: #fff; text-shadow: 0 0 10px #ff8a1f; }

/* Chữ lớn giữa sân: Tuyệt chiêu!, Chiến thắng! */
.dt-bang-lon { position: absolute; left: 50%; top: 26%; z-index: 6; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; text-align: center; white-space: nowrap; }
.dt-bang-lon b { font-size: clamp(46px, 7.5vw, 80px); font-weight: 800; line-height: 1; color: var(--vang); -webkit-text-stroke: 9px #6a4bc4; paint-order: stroke; }
.dt-bang-lon small { font-size: clamp(22px, 2.8vw, 32px); font-weight: 800; color: #fff; -webkit-text-stroke: 6px #6a4bc4; paint-order: stroke; }
.dt-bang-lon.thang { top: 64%; }
.dt-bang-lon.thang b { color: #ffe27a; -webkit-text-stroke-color: #d84f1d; }
.dt-bang-lon.thang small { -webkit-text-stroke-color: #d84f1d; }

/* ---------- Các lựa chọn ---------- */
.dt-lua-chon { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 16px; min-height: 104px; padding: 0 4px 6px; }
.dt-lc { position: relative; flex: 1 1 0; min-width: 132px; max-width: 236px; min-height: 100px; display: flex; align-items: center; justify-content: center; padding: 8px 14px; border: 3px solid #e6e0f5; border-radius: 24px; background: #fff; color: var(--ink); font-weight: 800; box-shadow: 0 7px 0 #cfc5ea, 0 10px 22px rgba(0,0,0,.28); transition: transform .12s, box-shadow .12s, background .2s, border-color .2s, opacity .3s; }
.dt-lc:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 2px 0 #cfc5ea, 0 4px 10px rgba(0,0,0,.2); }
.dt-lc-chu { font-size: 46px; line-height: 1.05; overflow-wrap: anywhere; }
.dt-lc-chu.dai { font-size: 32px; }
.dt-lc-chu.rat-dai { font-size: 23px; line-height: 1.2; }
.dt-lc.co-hinh { min-height: 136px; padding: 8px; flex-direction: column; gap: 2px; }
.dt-lua-chon.co-hinh .dt-lc { max-width: 300px; }
.dt-lc-phu { font-size: 19px; line-height: 1.1; color: var(--ink-2); }
.dt-lc-hinh { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 64px; line-height: 1; pointer-events: none; }
.dt-lc-hinh > * { max-width: 100%; }
.dt-lc-hinh > svg { display: block; width: 100%; height: 116px; }
.dt-lc.dung { background: var(--xanh-nhat); border-color: var(--xanh); box-shadow: 0 0 0 6px rgba(6,214,160,.45), 0 7px 0 #0f9e7a, 0 10px 22px rgba(0,0,0,.25); }
.dt-lc.sai { background: var(--do-nhat); border-color: var(--do); box-shadow: 0 7px 0 #f3b3c3, 0 10px 22px rgba(0,0,0,.25); }
.dt-lc.gach { background: #eef0f3; border-color: #dfe2e8; box-shadow: 0 4px 0 #d6d9df; }
.dt-lc.gach > * { opacity: .35; }
.dt-lc.gach::before { content: ""; position: absolute; left: 16%; right: 16%; top: 50%; height: 5px; margin-top: -2px; border-radius: 3px; background: var(--do); opacity: .75; transform: rotate(-12deg); }
.dt-lc.gach::after { content: "✕"; position: absolute; right: -10px; top: -10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--do); color: #fff; font-size: 20px; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.dt-lua-chon.xong .dt-lc:not(.dung) { opacity: .45; }

/* ---------- Thẻ mở đầu, thẻ kết quả ---------- */
.dt-phu { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 6px; }
.dt-the { width: min(660px, 100%); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 30px 24px; text-align: center; background: #fff; border-radius: 32px; box-shadow: var(--bong); }
.dt-canh { position: relative; flex: none; display: flex; align-items: flex-end; justify-content: center; gap: 10px; width: 100%; height: 200px; background: radial-gradient(ellipse 58% 46% at 50% 100%, #ffe6a6, rgba(255,230,166,0) 72%); }
.dt-canh img { height: 100%; width: auto; max-width: 42%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 5px 6px rgba(0,0,0,.25)); }
.dt-canh img.dt-canh-be { height: 74%; }
.dt-canh-trum { transform: scaleX(-1); }
.dt-canh-trum.thua { transform: scaleX(-1) rotate(10deg) translateY(8px); filter: saturate(.8) drop-shadow(0 5px 6px rgba(0,0,0,.25)); }
.dt-set.dt-cup { background: linear-gradient(135deg, #fff1b8, #ffc233); box-shadow: 0 5px 0 #d99a00; font-size: 34px; }
.dt-set { flex: none; align-self: center; width: 62px; height: 62px; margin-bottom: 20px; display: grid; place-items: center; font-size: 32px; border-radius: 50%; background: linear-gradient(135deg, #ffd166, #ff6b35); box-shadow: 0 5px 0 var(--cam-dam); transform: rotate(-8deg); }
.dt-the-nhan { font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7a5a10; background: var(--vang-nhat); border-radius: 99px; padding: 4px 14px; }
.dt-the-ten { font-size: 42px; line-height: 1.05; color: var(--tim-dam); }
.dt-ket.thang .dt-the-ten { color: var(--cam); }
.dt-the-loi { font-size: 23px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.dt-luat { list-style: none; margin: 2px 0 8px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dt-luat li { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px; background: var(--tim-nhat); font-size: 18px; font-weight: 700; color: var(--ink-2); }
.dt-luat b { color: var(--do-dam); }
.dt-luat-tim { color: var(--do); }
.dt-luat-sao { color: #ffb400; letter-spacing: -2px; }
.dt-k-mau { width: min(300px, 80%); }
.dt-k-mau .dt-mau-ong { height: 20px; }
.dt-k-so { font-size: 19px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }

/* ---------- Chuyển động (tắt khi máy đặt giảm chuyển động) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .dt-hinh-be { animation: dtTho 2.4s ease-in-out infinite; }
  .dt-hinh-trum { animation: dtThoTrum 2.9s ease-in-out infinite; }
  @keyframes dtTho { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975); } }
  @keyframes dtThoTrum { 0%, 100% { transform: scaleX(-1) scale(1, 1); } 50% { transform: scaleX(-1) scale(1.02, .97); } }

  .dt-dong.dt-tan-cong { animation: dtTanCong .62s cubic-bezier(.3,.7,.3,1); }
  @keyframes dtTanCong { 0% { transform: none; } 18% { transform: translateX(-16px) rotate(-5deg); } 48% { transform: translateX(var(--xa, 120px)) rotate(9deg); } 62% { transform: translateX(calc(var(--xa, 120px) - 18px)) rotate(4deg); } 100% { transform: none; } }
  .dt-dong.dt-tuyet-chieu { animation: dtTuyetChieu 1.05s cubic-bezier(.3,.7,.3,1); }
  @keyframes dtTuyetChieu { 0% { transform: none; } 28% { transform: translateY(-46px) scale(1.14); } 58% { transform: translateX(calc(var(--xa, 120px) * .45)) translateY(-18px) scale(1.14) rotate(7deg); } 80% { transform: translateX(calc(var(--xa, 120px) * .5)) scale(1.06); } 100% { transform: none; } }

  .dt-dong.dt-bi-trung { animation: dtBiTrung .5s ease-out; }
  .dt-dong.dt-bi-trung img { animation: dtThoTrum 2.9s ease-in-out infinite, dtLoe .45s ease-out; }
  @keyframes dtBiTrung { 0% { transform: none; } 20% { transform: translateX(24px) rotate(6deg); } 45% { transform: translateX(-10px) rotate(-3deg); } 70% { transform: translateX(6px); } 100% { transform: none; } }
  @keyframes dtLoe { 0%, 100% { filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); } 20% { filter: brightness(1.8) saturate(.6) drop-shadow(0 0 12px #fff); } }

  .dt-dong.dt-tro-nhay { animation: dtTroNhay 1.1s ease-in-out; }
  @keyframes dtTroNhay { 0%, 30%, 60%, 100% { transform: none; } 15% { transform: translateY(-48px) rotate(-7deg); } 45% { transform: translateY(-30px) rotate(7deg); } 78% { transform: scale(1.06, .9); } }
  .dt-dong.dt-tro-lac { animation: dtTroLac 1.1s ease-in-out; }
  @keyframes dtTroLac { 0%, 100% { transform: none; } 15% { transform: rotate(-9deg); } 35% { transform: rotate(9deg); } 55% { transform: rotate(-7deg); } 75% { transform: rotate(5deg); } }
  .dt-dong.dt-tro-xoay { animation: dtTroXoay 1.1s ease-in-out; }
  @keyframes dtTroXoay { 0% { transform: none; } 50% { transform: translateY(-24px) rotateY(180deg); } 100% { transform: rotateY(360deg); } }

  .dt-dong.dt-thua { animation: dtThua 1.2s ease-out both; }
  @keyframes dtThua { 0% { transform: none; } 20% { transform: rotate(10deg); } 40% { transform: rotate(-8deg); } 60% { transform: rotate(6deg) translateY(6px); } 100% { transform: rotate(-9deg) translateY(14px) scale(.92); } }
  .dt-dong.dt-mung { animation: dtMung .7s ease-in-out 3; }
  @keyframes dtMung { 0%, 100% { transform: none; } 40% { transform: translateY(-40px) rotate(-4deg); } 60% { transform: translateY(-40px) rotate(4deg); } }
  .dt-choang { animation: dtChoang 1.6s linear infinite; }
  @keyframes dtChoang { from { transform: translateX(-50%) rotate(0); } to { transform: translateX(-50%) rotate(360deg); } }

  .dt-no.no { animation: dtNo .45s ease-out; }
  .dt-no.no-to { animation: dtNo .65s ease-out; }
  @keyframes dtNo { 0% { opacity: 1; transform: scale(.2) rotate(0); } 60% { opacity: 1; transform: scale(1.1) rotate(25deg); } 100% { opacity: 0; transform: scale(1.3) rotate(35deg); } }
  .dt-so-tru { animation: dtSoTru 1.2s ease-out forwards; }
  @keyframes dtSoTru { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 30% { transform: translate(-50%, 0) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60px); } }
  .dt-dan.bay { animation: dtDan .5s ease-in .25s both; }
  @keyframes dtDan { from { transform: translate(var(--tu-x), var(--tu-y)) scale(.4) rotate(0); } to { transform: translate(var(--den-x), var(--den-y)) scale(1.35) rotate(300deg); } }

  .dt-bang-lon.hien { animation: dtBangLon 1.6s ease-out forwards; }
  .dt-bang-lon.thang.hien { animation: dtBangLonGiu .7s cubic-bezier(.2,1.5,.4,1) both; }
  @keyframes dtBangLon { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-6deg); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(-3deg); } 30% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -64%) rotate(-3deg); } }
  @keyframes dtBangLonGiu { from { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); } to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); } }

  .dt-noi.hien { animation: dtNoi .3s cubic-bezier(.2,1.5,.4,1); }
  @keyframes dtNoi { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
  .dt-noi-be { transform-origin: 0 100%; }
  .dt-noi-trum { transform-origin: 100% 100%; }

  .dt-lc { animation: dtChia .42s both cubic-bezier(.2,1.4,.4,1); animation-delay: var(--tre, 0s); }
  @keyframes dtChia { from { opacity: 0; transform: translateY(26px) scale(.8); } to { opacity: 1; transform: none; } }
  .dt-lc.sai { animation: rung .45s; }
  .dt-sao i.no { animation: dtSaoNo .5s ease-out; }
  @keyframes dtSaoNo { 50% { transform: scale(1.6); } }
  .dt-mau.it .dt-mau-con { animation: dtNhay 1s ease-in-out infinite; }
  @keyframes dtNhay { 50% { opacity: .55; } }
  .dt-phu:not(.hidden) .dt-the { animation: dtThe .45s cubic-bezier(.2,1.3,.4,1) both; }
  @keyframes dtThe { from { opacity: 0; transform: translateY(24px) scale(.92); } to { opacity: 1; transform: none; } }
}
/* Giảm chuyển động: hiệu ứng chỉ hiện rồi mờ đi, không bay, không rung */
@media (prefers-reduced-motion: reduce) {
  .dt-no.no, .dt-no.no-to { animation: dtMo .5s ease-out; }
  .dt-so-tru { animation: dtMo 1.1s ease-out forwards; }
  .dt-bang-lon.hien:not(.thang) { animation: dtMo 1.4s ease-out forwards; }
  @keyframes dtMo { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
  .dt-dan { display: none; }
  .dt-dong.dt-bi-trung img { filter: brightness(1.5) saturate(.7); }
}

/* ---------- Màn hình dọc, cửa sổ hẹp ---------- */
@media (orientation: portrait), (max-width: 760px) {
  .dt-san { gap: 10px; }
  .dt-dau.co-hinh { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "giua giua" "be trum"; gap: 8px 12px; }
  .dt-dau.co-hinh .dt-giua { grid-area: giua; padding: 0; }
  .dt-dau.co-hinh .dt-ben-be { grid-area: be; }
  .dt-dau.co-hinh .dt-ben-trum { grid-area: trum; }
  .dt-hinh-de > svg { max-height: 24vh; }
  .dt-noi { max-width: 58vw; font-size: 19px; }
  .dt-lua-chon { gap: 12px; }
  .dt-lc { min-width: 116px; min-height: 96px; }
  .dt-lc-chu { font-size: 42px; }
  .dt-the { padding: 16px 20px 20px; }
  .dt-the-ten { font-size: 36px; }
}
@media (max-height: 640px) and (orientation: landscape) {
  .dt-san { gap: 8px; }
  .dt-bang { padding: 4px 12px 6px; }
  .dt-ten { font-size: 18px; }
  .dt-lua-chon { min-height: 80px; }
  .dt-lc { min-height: 78px; }
  .dt-lc-chu { font-size: 38px; }
  .dt-lc.co-hinh { min-height: 104px; }
  .dt-lc-hinh > svg { height: 88px; }
  .dt-canh { height: 130px; }
  .dt-the { gap: 6px; padding: 12px 24px 16px; }
  .dt-the-ten { font-size: 32px; }
  .dt-the-loi { font-size: 20px; }
  .dt-luat li { font-size: 16px; padding: 4px 12px; }
}