/* Trò kiểu game: Gấu Mì nhảy ăn chữ, Câu cá chữ cái, Xếp tàu chữ */
.ar-field { --sz: clamp(64px, 12vmin, 96px); --sx: 0px; position: relative; flex: 1; width: 100%; min-height: 220px; border-radius: var(--radius);
  overflow: hidden; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .6); touch-action: manipulation; }
.ar-hero { position: absolute; z-index: 3; height: 34%; aspect-ratio: 3 / 4; will-change: transform; pointer-events: none; }
.ar-hero img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .22)); }
/* quả bóng chữ (bánh quy / thùng hàng dùng chung) */
.ar-ball { position: absolute; z-index: 2; width: var(--sz); height: var(--sz); margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; animation: pop .4s ease backwards; animation-delay: calc(var(--k) * .08s);
  background: radial-gradient(circle at 32% 28%, #fff 0 10%, color-mix(in srgb, var(--c) 30%, white) 40%, color-mix(in srgb, var(--c) 70%, white));
  box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 70%, black), 0 12px 18px rgba(0, 0, 0, .15); transition: opacity .3s, transform .3s; }
.ar-ball b { font: 800 clamp(32px, 6.4vmin, 52px)/1 var(--font); color: color-mix(in srgb, var(--c) 75%, black); pointer-events: none; }
.ar-ball.wrong { opacity: .45; filter: grayscale(.6); animation: shake .45s ease; }
.ar-ball.gone { opacity: 0; transform: scale(.4); pointer-events: none; }

/* ---------- Nhảy ăn chữ ---------- */
.arc-jump .ar-field { background: linear-gradient(#8fd3ff, #d4f1ff 70%); }
.ar-hills { position: absolute; left: 0; right: 0; bottom: 14%; height: 40%; opacity: .9;
  background: radial-gradient(ellipse 18% 70% at 15% 100%, #8ee08a 98%, transparent) , radial-gradient(ellipse 22% 85% at 55% 100%, #7bd477 98%, transparent);
  background-size: 50% 100%; background-repeat: repeat-x; background-position: calc(var(--sx) * .35) bottom; }
.ar-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 16%;
  background: repeating-linear-gradient(90deg, #5cc45a 0 40px, #4fb74d 40px 80px) var(--sx) 0 / auto 100%, #5cc45a; box-shadow: inset 0 6px 0 #78d876; }
.arc-jump .ar-hero { left: 6%; bottom: 15%; }
.ar-hero.run img { animation: arRun .32s ease-in-out infinite; }
.ar-hero.chomp img { animation: arChomp .4s ease; }
@keyframes arRun { 50% { transform: translateY(-7%) rotate(3deg); } }
@keyframes arChomp { 30% { transform: scale(1.08, .92); } 60% { transform: scale(.96, 1.05); } }
/* bánh quy chữ */
.ar-ball.cookie { background: radial-gradient(circle at 30% 30%, #ffe2a8, #e8b36a 60%, #c98a3d); box-shadow: 0 6px 0 #9a6526, 0 12px 18px rgba(0, 0, 0, .15); }
.ar-ball.cookie::before { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 24% 62%, #6b3f1d 0 4%, transparent 5%), radial-gradient(circle at 74% 30%, #6b3f1d 0 4%, transparent 5%), radial-gradient(circle at 70% 76%, #6b3f1d 0 3.5%, transparent 4.5%); }
.ar-ball.cookie b { position: relative; color: #6b3f1d; }
.ar-ball.eaten { transform: scale(0) rotate(90deg); opacity: 0; transition: transform .25s ease-in, opacity .25s; }

/* ---------- Câu cá ---------- */
.arc-fish .ar-field { background: linear-gradient(#bfe8ff 0 30%, #5ab8f0 30%, #2f8fd6); }
.ar-water { position: absolute; left: 0; right: 0; top: 30%; height: 14px; transform: translateY(-50%);
  background: radial-gradient(circle at 10px -2px, transparent 10px, rgba(255, 255, 255, .7) 11px 13px, transparent 14px) 0 0 / 24px 14px repeat-x; animation: arWave 3s linear infinite; }
@keyframes arWave { to { background-position: 24px 0; } }
.ar-dock { position: absolute; left: 0; top: 28%; width: 24%; height: 5%; border-radius: 0 8px 8px 0; background: #b77a45; box-shadow: 0 5px 0 #8a5427; }
.ar-dock::after { content: ''; position: absolute; left: 30%; top: 100%; width: 8%; height: 160%; background: #8a5427; box-shadow: 4vmin 0 0 #8a5427; }
.arc-fish .ar-hero { left: 3%; top: 28%; height: 25%; transform: translateY(-100%); }
.ar-rod { position: absolute; left: 62%; top: 46%; width: 110%; height: 5px; border-radius: 3px; background: #7a4a22; transform: rotate(-12deg); transform-origin: 0 50%; }
.ar-line { position: absolute; z-index: 4; width: 2px; height: 0; background: rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); transform-origin: 1px 0; pointer-events: none; }
.ar-bucket { position: absolute; left: 4%; top: 31%; z-index: 2; }
.ar-bucket.bump { animation: bump .5s ease; }
.ar-fish { position: absolute; left: 0; top: 0; z-index: 2; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; will-change: transform;
  display: grid; place-items: center; min-width: 64px; min-height: 64px; transition: opacity .35s; }
.ar-fish .pic.md { --s: clamp(62px, 12vmin, 96px); }
.ar-fish.right .ar-fish-art { transform: scaleX(-1); } /* hình cá Fluent quay sang trái */
.ar-tag { position: absolute; display: grid; place-items: center; width: 54%; aspect-ratio: 1; border-radius: 50%; background: #fff;
  font: 800 clamp(24px, 5vmin, 40px)/1 var(--font); color: color-mix(in srgb, var(--c) 75%, black); box-shadow: 0 3px 0 rgba(0, 0, 0, .15); pointer-events: none; }
.ar-fish.wrong { opacity: .45; animation: shake .45s ease; }
.ar-fish.gone { opacity: 0; pointer-events: none; }
.ar-fish.caught { z-index: 5; }
.ar-sign { display: grid; place-items: center; width: clamp(64px, 12vmin, 96px); height: clamp(64px, 12vmin, 96px); padding: 0; border: 4px solid #3aa0ff; }
.ar-sign b { font: 800 clamp(40px, 8vmin, 64px)/1 var(--font); color: #1d6fd1; }
.ar-sign.bump { animation: bump .5s ease; }

/* ---------- Tàu chữ ---------- */
.arc-train .ar-field { background: linear-gradient(#bfe8ff, #e6f7ff 60%, #b9e6a0 60%); }
.ar-rail { position: absolute; left: 0; right: 0; top: 58%; height: 10px;
  background: repeating-linear-gradient(90deg, #8a5427 0 8px, transparent 8px 26px), linear-gradient(#9aa7b8, #6f7d90) 0 0 / 100% 4px no-repeat; }
/* tàu đứng trên ray: đáy khung tàu = mặt ray */
.ar-train { position: absolute; left: 4%; bottom: calc(42% - 2px); transform: translateX(100vw); display: flex; align-items: flex-end; gap: 6px; will-change: transform; }
.ar-engine .pic { --s: clamp(80px, 16vmin, 140px); }
.ar-cars { display: flex; gap: 6px; }
.ar-car { position: relative; display: grid; place-items: center; width: clamp(62px, 11vmin, 92px); height: clamp(56px, 10vmin, 84px); margin-bottom: 8px;
  border-radius: 12px; background: var(--c); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .15), 0 4px 0 rgba(0, 0, 0, .15); }
.ar-car::before, .ar-car::after { content: ''; position: absolute; bottom: -10px; width: 18px; height: 18px; border-radius: 50%; background: #3c4656; border: 4px solid #9aa7b8; }
.ar-car::before { left: 10%; }
.ar-car::after { right: 10%; }
.ar-train.moving .ar-car::before, .ar-train.moving .ar-car::after { border-style: dashed; animation: arSpin .4s linear infinite; }
@keyframes arSpin { to { transform: rotate(360deg); } }
.ar-car i { display: grid; place-items: center; width: 74%; height: 70%; border-radius: 8px; background: #fff; font: 800 clamp(26px, 5.2vmin, 44px)/1 var(--font); font-style: normal; color: #334; }
.ar-car.gap i { background: rgba(255, 255, 255, .55); border: 3px dashed #fff; color: #fff; }
.ar-car.filled i { animation: bump .5s ease; }
.arc-train .ar-hero { left: 3%; bottom: 3%; height: 30%; }
.ar-hero.wave img { animation: arWaveBye .5s ease-in-out 2; }
@keyframes arWaveBye { 50% { transform: rotate(-8deg) translateY(-4%); } }
.ar-crates { position: absolute; left: 26%; right: 4%; bottom: 6%; display: flex; justify-content: space-around; }
.ar-crates .ar-ball { position: relative; }
.ar-ball.crate { border-radius: 14px; background: linear-gradient(#f2c27a, #d99a4e); box-shadow: 0 6px 0 #a86a2c, 0 12px 18px rgba(0, 0, 0, .15), inset 0 0 0 5px #c0813f; }
.ar-ball.crate b { color: #5b3612; }
.ar-ball.flying { z-index: 6; transition: none; animation: none; }

/* điện thoại xoay ngang */
@media (orientation: landscape) and (max-height: 520px) {
  .ar-field { --sz: 54px; min-height: 0; }
  .ar-ball b { font-size: 30px; }
  .ar-car { width: 54px; height: 48px; }
  .ar-car i { font-size: 26px; }
  .ar-engine .pic { --s: 70px; }
  .ar-sign { width: 52px; height: 52px; }
  .ar-sign b { font-size: 36px; }
}
@media (orientation: portrait) {
  .ar-field { min-height: 0; }
  .ar-car { width: 16vw; height: 14vw; }
  .ar-cars, .ar-train { gap: 3px; }
  .ar-engine .pic { --s: 20vw; }
  .ar-train { left: 2%; }
  .ar-crates { left: 30%; }
}