/* ภาพฟุตบอล + ภาพวัตถุชุดเงิน/ดำ + interaction ต่อจาก baseline v2 */
html {
  --mos-football-image: url('../assets/images/cinematic/hero-football.webp');
  --mos-football-desktop-clean: url('../assets/images/cinematic/hero-desktop-clean-scene.webp');
  --mos-football-portrait: url('../assets/images/cinematic/auth-sportsbook-popout-portrait.webp');
  --mos-auth-campaign-wide: url('../assets/images/cinematic/auth-sportsbook-popout-wide.webp');
  --mos-hero-campaign-image: url('../assets/images/cinematic/auth-sportsbook-popout-wide.webp');
  --mos-stadium-image: url('../assets/images/cinematic/stadium.webp');
}
html body[data-page="register"] {
  --mos-football-portrait: url('../assets/images/cinematic/signup-welcome-portrait.webp');
  --mos-auth-campaign-wide: url('../assets/images/cinematic/signup-welcome-wide.webp');
}

/* PLAY NOW: ฉากภาพแยกจากตัวอักษร เพื่อให้ภาพเคลื่อนได้โดยข้อความไม่ขยับ */
html body[data-page] .mos-game-hero { position: relative; isolation: isolate; overflow: visible; }
/* ขอบทองจริงเป็นชั้นแยก จึงไม่ถูก box-shadow ของ hover ทับหาย */
html body[data-page] button.mos-game-hero.foil-frame > svg.mos-hero-frame { position: absolute; inset: 0; z-index: 5; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; transform: none; transition: none; }
html body[data-page] .mos-hero-frame rect { width: calc(100% - 2px); height: calc(100% - 2px); fill: none; stroke-linecap: round; stroke-linejoin: round; }
html body[data-page] .mos-hero-border-base { stroke: #b7a06a; stroke-width: 1; }
html body[data-page] .mos-hero-border-trace { opacity: 0; stroke-dashoffset: var(--mos-orbit-start); filter: drop-shadow(0 0 2px #e3bf6b99); transition: opacity 220ms ease; animation: mos-hero-gold-orbit 3.6s linear infinite; animation-play-state: paused; }
html body[data-page] .mos-hero-border-tail { --mos-orbit-start: 0px; stroke: #ba9956; stroke-width: 3; stroke-opacity: .45; stroke-dasharray: 16 84; }
html body[data-page] .mos-hero-border-core { --mos-orbit-start: -8px; stroke: #e8ca7e; stroke-width: 2; stroke-opacity: .9; stroke-dasharray: 8 92; }
html body[data-page] .mos-hero-border-head { --mos-orbit-start: -13px; stroke: #fff1b5; stroke-width: 1.5; stroke-dasharray: 3 97; }
@keyframes mos-hero-gold-orbit { from { stroke-dashoffset: var(--mos-orbit-start); } to { stroke-dashoffset: calc(var(--mos-orbit-start) - 100px); } }
html body[data-page] .mos-game-hero.foil-frame.mos-tile:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible, :active, .mos-is-pressed) { transform: none; box-shadow: inset 0 0 0 1px #c9b171, 0 0 0 1px #b99b5d26, 0 0 24px #c5a15d30, 0 10px 24px #0006; }
html body[data-page] .mos-game-hero:focus-visible .mos-hero-border-trace { opacity: 1; animation-play-state: running; }
html body[data-page] .mos-game-hero > .mos-game-body { background: #0e1113; isolation: isolate; }
/* จอเล็กใช้ภาพเดิม ส่วน desktop ใช้ฉากใหม่ที่สร้างจากภาพอ้างอิงโดยไม่มี UI ติดภาพ */
html body[data-page] .mos-hero-visual { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: var(--mos-football-image) right 10% / cover no-repeat; transform: scale(1); transform-origin: 80% 35%; transition: transform 700ms var(--mos-ui-ease), filter 700ms ease; }
/* เปลี่ยนเฉพาะภาพ ฉากเดิมรองอยู่ตลอดจึงไม่วูบดำ ข้อความ/กรอบทองไม่ขยับ */
html body[data-page] .mos-hero-stage { position: relative; }
html body[data-page] .mos-hero-stage > .mos-game-hero { width: 100%; }
html body[data-page] .mos-hero-campaign { position: absolute; inset: 0; display: block; background: var(--mos-hero-campaign-image) 74% top / cover no-repeat; opacity: 0; animation: mos-hero-crossfade 14s ease-in-out infinite; }
@keyframes mos-hero-crossfade { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
html body[data-page] .mos-hero-stage[data-hero-hidden="true"] :is(.mos-hero-campaign, .mos-play-rotor, .mos-play-spin, .mos-play-token) { animation-play-state: paused; }
html body[data-page] .mos-hero-stage[data-hero-hidden="true"] .mos-game-play::after { animation-play-state: paused; }
html body[data-page] .mos-game-body::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #0e1113 0%, #0e1113e8 30%, #0e11138a 49%, #0e111306 75%, #0e111320); }
html body[data-page] .mos-game-content { position: relative; z-index: 1; }
html body[data-page] .mos-game-body > .bulbs { position: relative; z-index: 1; }
html body[data-page] .mos-game-copy { text-shadow: 0 2px 16px #000b; }
/* ดีดขึ้น พลิกแกน X สองรอบ แล้วลงมานิ่ง พร้อม dissolve ระหว่างลอย */
html body[data-page] .mos-game-play { --mos-token-lift: 14px; perspective: 500px; perspective-origin: 50% 50%; overflow: visible; font-size: 13px; line-height: 1; transition: transform 420ms var(--mos-ui-ease); }
html body[data-page] .mos-game-play::after { content: ''; position: absolute; z-index: 0; left: 12%; bottom: -6px; width: 76%; height: 8%; border-radius: 50%; background: radial-gradient(ellipse, #0006, transparent 70%); pointer-events: none; animation: mos-play-shadow 15s ease-in-out infinite; }
html body[data-page] .mos-play-rotor { position: absolute; z-index: 1; inset: 0; display: block; transform-style: preserve-3d; animation: mos-play-toss 15s ease-out infinite; will-change: transform; }
html body[data-page] .mos-play-spin { position: absolute; inset: 0; display: block; transform-style: preserve-3d; animation: mos-play-flip 15s cubic-bezier(.2, .65, .2, 1) infinite; will-change: transform; }
html body[data-page] .mos-play-token { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; animation: mos-play-dissolve 15s linear infinite both; will-change: opacity; }
html body[data-page] .mos-play-token--play { border: 1px solid #d9c17e; border-radius: 50%; background: linear-gradient(135deg, #e7d4a0, #aa8d53); box-shadow: inset 0 0 0 3px #aa8d5333, 0 5px 14px #0005; color: #211c11; font-family: Inter, 'Noto Sans Thai', sans-serif; font-size: inherit; font-weight: 600; letter-spacing: .08em; line-height: 1; }
html body[data-page] .mos-play-token--play::after { content: ''; position: absolute; inset: 4px; border: 1px dashed #6d582d; border-radius: inherit; }
html body[data-page] .mos-play-token--ball { animation-delay: -10s; }
html body[data-page] .mos-play-token--chip { animation-delay: -5s; }
html body[data-page] .mos-play-token img { display: block; width: 114%; height: 114%; max-width: none; object-fit: contain; filter: drop-shadow(0 3px 3px #0006); }
@keyframes mos-play-flip {
  0%, 20% { transform: rotateX(0deg); }
  33.333%, 53.333% { transform: rotateX(720deg); }
  66.667%, 86.667% { transform: rotateX(1440deg); }
  100% { transform: rotateX(2160deg); }
}
@keyframes mos-play-toss {
  0%, 20%, 33.333%, 53.333%, 66.667%, 86.667%, 100% { transform: translateY(0) rotateZ(0deg); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  26.667%, 60%, 93.333% { transform: translateY(calc(0px - var(--mos-token-lift))) rotateZ(-4deg); animation-timing-function: cubic-bezier(.55, 0, .85, .5); }
  31.333%, 64.667%, 98% { transform: translateY(2px) rotateZ(1deg); animation-timing-function: cubic-bezier(.2, .75, .3, 1); }
}
@keyframes mos-play-shadow {
  0%, 20%, 33.333%, 53.333%, 66.667%, 86.667%, 100% { transform: scaleX(1); opacity: .32; }
  26.667%, 60%, 93.333% { transform: scaleX(.65); opacity: .12; }
  31.333%, 64.667%, 98% { transform: scaleX(1.04); opacity: .4; }
}
@keyframes mos-play-dissolve {
  0%, 23.667% { opacity: 1; }
  29.333%, 90.333% { opacity: 0; }
  96%, 100% { opacity: 1; }
}
html body[data-page] .mos-game-arrow { transition: transform 300ms var(--mos-ui-ease); filter: drop-shadow(0 2px 5px #000); }

/* ชิปเลือกจำนวนเงินฝาก: ภาพเปล่ามีมิติ ราคาจริงเป็น HTML คมชัด */
html body[data-page^="deposit"] .mos-amount-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; align-items: center; gap: 12px; padding: 2px 0 6px; }
html body[data-page^="deposit"] button.mos-amount-chip { --mos-chip-tone: #b2bcc8; position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; max-width: 96px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; outline: none; background: url('../assets/images/cinematic/deposit-amount-chip.webp') center / contain no-repeat; color: #f2efe7; box-shadow: none; cursor: pointer; filter: drop-shadow(0 4px 3px #0008); transition: transform 220ms cubic-bezier(.2,.7,.2,1), filter 220ms ease; }
/* ลงสีบนผิวหน้า/แถบขอบด้วย blend เพื่อคงเงาโลหะ วงทอง และราคา HTML */
html body[data-page^="deposit"] .mos-amount-chip::after { content: ''; position: absolute; z-index: 0; inset: 0; border-radius: 50%; background: var(--mos-chip-tone); mix-blend-mode: color; -webkit-mask-image: radial-gradient(circle at 50% 49.5%, #000 0 29%, transparent 29.6% 37.2%, #000 38% 44%, transparent 44.6%); mask-image: radial-gradient(circle at 50% 49.5%, #000 0 29%, transparent 29.6% 37.2%, #000 38% 44%, transparent 44.6%); pointer-events: none; }
html body[data-page^="deposit"] .mos-amount-chip[data-mos-deposit-amount="100"] { --mos-chip-tone: #bd465b; }
html body[data-page^="deposit"] .mos-amount-chip[data-mos-deposit-amount="300"] { --mos-chip-tone: #3b78bc; }
html body[data-page^="deposit"] .mos-amount-chip[data-mos-deposit-amount="500"] { --mos-chip-tone: #2b9972; }
html body[data-page^="deposit"] .mos-amount-chip[data-mos-deposit-amount="1000"] { --mos-chip-tone: #8b5bc0; }
html body[data-page^="deposit"] .mos-amount-chip[data-mos-deposit-amount="3000"] { --mos-chip-tone: #b2bcc8; }
html body[data-page^="deposit"] .mos-amount-chip[data-mos-deposit-amount="5000"] { --mos-chip-tone: #cda95a; }
html body[data-page^="deposit"] .mos-amount-chip::before { content: ''; position: absolute; inset: 2.5%; border: 2px solid var(--mos-chip-tone); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mos-chip-tone) 18%, transparent), 0 0 18px color-mix(in srgb, var(--mos-chip-tone) 38%, transparent); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
html body[data-page^="deposit"] .mos-amount-chip-label { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 66%; padding-top: 1px; pointer-events: none; }
html body[data-page^="deposit"] .mos-amount-value { font-family: var(--mos-type-family); font-size: clamp(1.05rem, 1.55vw, 1.2rem); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: normal; white-space: nowrap; text-shadow: 0 1px 2px #000b; }
html body[data-page^="deposit"] .mos-amount-currency { color: #cdb57b; font-family: var(--mos-type-family); font-size: var(--mos-type-min); font-weight: 500; line-height: 1; letter-spacing: normal; }
html body[data-page^="deposit"] button.mos-amount-chip[aria-pressed="true"] { transform: translateY(-2px) scale(1.035); filter: drop-shadow(0 0 9px color-mix(in srgb, var(--mos-chip-tone) 40%, transparent)) drop-shadow(0 6px 4px #0008); }
html body[data-page^="deposit"] .mos-amount-chip[aria-pressed="true"]::before { opacity: 1; }
html body[data-page^="deposit"] button.mos-amount-chip:focus-visible { outline: 2px solid var(--mos-chip-tone); outline-offset: 3px; }
html body[data-page^="deposit"] button.mos-amount-chip:is(:active, .mos-is-pressed) { transform: translateY(1px) scale(.97); }
@media (min-width: 640px) {
  html body[data-page^="deposit"] .mos-amount-chips { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (hover: hover) and (pointer: fine) {
  html body[data-page^="deposit"] button.mos-amount-chip:hover { transform: translateY(-4px) rotate(-3deg); filter: drop-shadow(0 7px 5px #0009); }
  html body[data-page^="deposit"] button.mos-amount-chip[aria-pressed="true"]:hover { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--mos-chip-tone) 40%, transparent)) drop-shadow(0 7px 5px #0009); }
}

/* ทางลัด: รูปวัตถุมีมิติในกรอบเดิม ตัวอักษรยังเป็น HTML */
html body[data-page] .mos-shortcut { --mos-shortcut-surface: radial-gradient(ellipse 80% 110% at 50% 122%, #e7cf8c80 0%, #bea46945 34%, #7d6b450f 65%, transparent 82%), linear-gradient(0deg, #e4cc8d0d, transparent 55%), #111416; position: relative; isolation: isolate; justify-content: flex-start; padding: 10px 8px; gap: 4px; background: var(--mos-shortcut-surface); overflow: hidden; }
/* ทับพื้นการ์ดเดิมที่มี specificity สูง และคงแสงทองเมื่อโต้ตอบ */
html body[data-page] .mos-shortcut.bg-card { background: var(--mos-shortcut-surface); }
html body[data-page] .mos-shortcut.mos-tile:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible, :active, .mos-is-pressed) { background: var(--mos-shortcut-surface); }
/* ทดลองเหรียญทองโผล่ที่ขอบล่าง เว้นส่วนข้อความ และเลื่อนลงออกจากการ์ด */
html body[data-page] .mos-shortcut::before,
html body[data-page] .mos-shortcut::after { content: ''; position: absolute; left: 50%; z-index: -1; border-radius: 50%; pointer-events: none; transform: translateX(-50%); opacity: 1; transition: transform 480ms var(--mos-ui-ease), opacity 360ms ease; }
html body[data-page] .mos-shortcut::before { bottom: -90px; width: 104px; height: 104px; border: 1px solid #d8c083; background: linear-gradient(145deg, #f0dfa6, #c7ab68 55%, #a88b4f); box-shadow: inset 0 0 0 3px #16151555, 0 0 32px #d1b56e2b; }
html body[data-page] .mos-shortcut::after { bottom: -86px; width: 96px; height: 96px; border: 1px dashed #5e4a21b8; }
html body[data-page] .mos-shortcut-art { position: relative; display: grid; place-items: center; width: 72px; height: 72px; flex: 0 0 72px; }
html body[data-page] .mos-shortcut-image { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 6px #0007); transition: transform 480ms var(--mos-ui-ease), filter 480ms ease; }
html body[data-page] .mos-shortcut-label { display: block; position: relative; top: -4px; min-height: 24px; }
html body[data-page] .mos-shortcut-text { display: inline-block; position: relative; transition: color 300ms ease, transform 380ms var(--mos-ui-ease), text-shadow 300ms ease; }
html body[data-page] .mos-shortcut-text::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 22px; height: 1px; background: var(--pc-gold); transform: translateX(-50%) scaleX(0); opacity: 0; transition: transform 380ms var(--mos-ui-ease), opacity 280ms ease; }
html body[data-page] .mos-shortcut-arrow { position: absolute; width: 16px; height: 16px; right: 14px; bottom: 14px; color: var(--pc-gold); opacity: 0; transform: translateX(-4px); transition: opacity 250ms ease, transform 300ms var(--mos-ui-ease); }
html body[data-page] .mos-shortcut:focus-visible::before,
html body[data-page] .mos-shortcut:focus-visible::after { transform: translate(-50%, 32px); opacity: 0; }
html body[data-page] .mos-shortcut:focus-visible .mos-shortcut-image { transform: translateY(-4px) rotate(-3deg) scale(1.1); }
html body[data-page] .mos-shortcut:focus-visible .mos-shortcut-text { color: var(--pc-gold); transform: translateY(-2px); text-shadow: 0 0 14px #cbb47630; }
html body[data-page] .mos-shortcut:focus-visible .mos-shortcut-text::after { transform: translateX(-50%) scaleX(1); opacity: 1; }
html body[data-page] .mos-shortcut:focus-visible .mos-shortcut-arrow { opacity: 1; transform: translateX(0); }

/* เติมภาพเฉพาะพื้นที่สื่อสาร ไม่ใส่ภาพทับช่องกรอกหรือยอดเงิน */
html body[data-page] .mos-empty-illustrated { background: radial-gradient(ellipse at 50% 0, #c5c8cc08, transparent 65%); }
html body[data-page] .mos-empty-art { display: block; width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 8px 9px #0007); }
html body[data-page] .mos-referral-art { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 56px; }
html body[data-page] .mos-referral-image { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 6px #0006); }
html body[data-page] .profile-v2 .pv-banner { background-image: linear-gradient(90deg, #0d0e100a, #0d0e1040 48%, #0d0e10b8), var(--mos-stadium-image); background-position: center, center 53%; }
html body[data-page] .profile-v2 .pv-banner p { text-shadow: 0 2px 10px #000c; }

/* ภาพแคมเปญ sportsbook แยกแนวตั้ง/แนวนอน โลโก้เป็น HTML บนเงาด้านล่าง */
html body[data-page] aside.mos-auth-visual { background-image: radial-gradient(ellipse 90% 42% at 0 100%, #0d1113f5 0%, #0d1113c4 42%, #0d111300 100%), linear-gradient(90deg, transparent 82%, #1113144d), var(--mos-football-portrait); background-size: 100% 100%, 100% 100%, cover; background-position: center, center, center top; outline: none; }
html body[data-page] .mos-auth-brand { z-index: 1; position: absolute; left: 32px; bottom: 32px; top: auto; transform: none; white-space: nowrap; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; box-shadow: none; }
html body[data-page] aside.mos-auth-visual .mos-auth-brand .text-foil.font-deco { font-size: 48px; line-height: 1.15; }
html body[data-page] .mos-auth-brand:focus-visible { outline: 2px solid var(--pc-gold); outline-offset: 4px; }

/* แสงกด: clip เฉพาะชั้นตกแต่ง ไม่ตัด focus ring ของปุ่ม */
html body[data-page] .mos-wave-target { position: relative; }
html body[data-page] .mos-press-overlay { position: absolute; inset: 0; z-index: 4; border-radius: inherit; overflow: hidden; pointer-events: none; }
html body[data-page] .mos-press-wave { position: absolute; left: var(--wave-x); top: var(--wave-y); width: var(--wave-size); height: var(--wave-size); border-radius: 50%; background: radial-gradient(circle, currentColor, transparent 70%); opacity: 0; transform: translate(-50%, -50%) scale(0); animation: mos-press-wave 480ms ease-out both; }
@keyframes mos-press-wave { 0% { opacity: .2; transform: translate(-50%, -50%) scale(0); } 45% { opacity: .12; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }

/* ไอคอนเคลื่อนตามความหมาย เล่นหนึ่งรอบเมื่อโต้ตอบ */
html body[data-page] .pv-service.mos-icon-running svg { transform-box: view-box; transform-origin: 50% 50%; }
html body[data-page] .mos-icon-running .lucide-history > path:last-child { transform-box: view-box; transform-origin: 50% 50%; animation: mos-clock-turn 460ms var(--mos-ui-ease) both; }
html body[data-page] .mos-icon-running .lucide-sparkles { animation: mos-sparkle 460ms var(--mos-ui-ease) both; }
html body[data-page] .mos-icon-running :is(.lucide-tickets, .lucide-ticket, .lucide-ticket-percent) { animation: mos-ticket-nod 460ms var(--mos-ui-ease) both; }
html body[data-page] .mos-icon-running .lucide-gift > rect { animation: mos-gift-lid 460ms var(--mos-ui-ease) both; }
html body[data-page] .mos-icon-running .lucide-users-round { animation: mos-members 460ms var(--mos-ui-ease) both; }
html body[data-page] .mos-icon-running .lucide-key-round { animation: mos-key-turn 460ms var(--mos-ui-ease) both; }
html body[data-page] .mos-icon-running .lucide-headset { animation: mos-ticket-nod 460ms var(--mos-ui-ease) both; }
@keyframes mos-clock-turn { 35% { transform: rotate(-45deg); } 100% { transform: rotate(0); } }
@keyframes mos-sparkle { 35% { transform: scale(1.16); opacity: .75; } 100% { transform: scale(1); opacity: 1; } }
@keyframes mos-ticket-nod { 35% { transform: translateY(-2px) rotate(-7deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes mos-gift-lid { 35% { transform: translateY(-2px); } 100% { transform: translateY(0); } }
@keyframes mos-members { 30% { transform: translateX(-2px); } 65% { transform: translateX(1px); } 100% { transform: translateX(0); } }
@keyframes mos-key-turn { 35% { transform: rotate(-18deg); } 100% { transform: rotate(0); } }

@media (hover: hover) and (pointer: fine) {
  html body[data-page] .mos-game-hero:hover .mos-hero-border-trace { opacity: 1; animation-play-state: running; }
  html body[data-page] .mos-game-hero:hover .mos-hero-visual { transform: scale(1.025); filter: brightness(1.07); }
  html body[data-page] .mos-game-hero:hover .mos-game-play { transform: rotate(-5deg) scale(1.035); }
  html body[data-page] .mos-game-hero:hover .mos-game-arrow { transform: translateX(4px); }
  html body[data-page] .mos-shortcut:hover::before,
  html body[data-page] .mos-shortcut:hover::after { transform: translate(-50%, 32px); opacity: 0; }
  html body[data-page] .mos-shortcut:hover .mos-shortcut-image { transform: translateY(-4px) rotate(-3deg) scale(1.1); filter: drop-shadow(0 11px 8px #0008); }
  html body[data-page] .mos-shortcut:hover .mos-shortcut-text { color: var(--pc-gold); transform: translateY(-2px); text-shadow: 0 0 14px #cbb47630; }
  html body[data-page] .mos-shortcut:hover .mos-shortcut-text::after { transform: translateX(-50%) scaleX(1); opacity: 1; }
  html body[data-page] .mos-shortcut:hover > svg.mos-shortcut-arrow { opacity: 1; transform: translateX(0); }
}
html body[data-page] .mos-game-hero:focus-visible .mos-hero-visual { transform: scale(1.02); }
html body[data-page] .mos-shortcut:is(:active, .mos-is-pressed) .mos-shortcut-image { transform: translateY(1px) scale(.96); }

@media (max-width: 959px) {
  html body[data-page] .mos-auth-layout { flex-direction: column; }
  html body[data-page] aside.mos-auth-visual { flex: 0 0 auto; width: 100%; height: clamp(160px, 28vw, 260px); min-height: 160px; background-image: radial-gradient(ellipse at 8% 100%, #0b1015ed 0%, #0b101570 35%, transparent 68%), linear-gradient(180deg, transparent 55%, #0b101566), var(--mos-auth-campaign-wide); background-position: center, center, 62% top; }
  html body[data-page] .mos-auth-layout > section { flex: 0 0 auto; width: 100%; }
  html body[data-page] .mos-auth-brand { left: 20px; bottom: 16px; }
  html body[data-page] aside.mos-auth-visual .mos-auth-brand .text-foil.font-deco { font-size: 30px; }
}
@media (min-width: 1200px) {
  /* ภาพที่สร้างใหม่เป็นฉากล้วน ใช้ cover เฉพาะพื้นที่ภาพ ไม่มีกรอบ/ข้อความซ้อน */
  html body[data-page] .mos-hero-visual { left: 20%; background-image: var(--mos-football-desktop-clean); background-size: cover; background-position: center; }
  html body[data-page] .mos-hero-campaign { top: -10px; background-position: center top; }
  html body[data-page] .mos-game-body::after { background: linear-gradient(90deg, #0e1113 0%, #0e1113f2 16%, #0e111380 32%, transparent 55%); }
  html body[data-page] .mos-game-body > .bulbs { opacity: 0; }
  html body[data-page] .mos-game-play { width: 84px; height: 84px; }
  html body[data-page] .mos-game-arrow { visibility: hidden; }
}
@media (max-width: 767px) {
  html body[data-page] .mos-game-hero .mos-game-body { min-height: 156px; }
  html body[data-page] .mos-game-content { flex: 1; padding: 18px; gap: 12px; }
  html body[data-page] .mos-game-hero .mos-game-play { --mos-token-lift: 8px; width: 44px; height: 44px; font-size: 13px; letter-spacing: .08em; }
  html body[data-page] button.mos-game-hero .mos-game-copy .text-foil.font-deco { font-size: 26px; line-height: 1.2; }
  html body[data-page] .mos-game-copy > .font-display { font-size: 14px; line-height: 1.6; }
  html body[data-page] .mos-hero-visual { background-position: right 22%; }
  html body[data-page] .mos-game-body::after { background: linear-gradient(90deg, #0e1113ed 0%, #0e1113d0 44%, #0e11138f 62%, #0e111300 85%); }
  html body[data-page] .mos-game-arrow { display: none; }
  html body[data-page] .mos-shortcut { padding: 12px 2px 10px; gap: 6px; }
  html body[data-page] .mos-shortcut::before { bottom: -60px; width: 70px; height: 70px; }
  html body[data-page] .mos-shortcut::after { bottom: -56px; width: 62px; height: 62px; }
  html body[data-page] .mos-shortcut-art { width: 56px; height: 56px; flex-basis: 56px; }
  html body[data-page] .mos-shortcut-label { min-height: 44.8px; width: 100%; }
  html body[data-page] .mos-shortcut-arrow { display: none; }
  html body[data-page] .mos-empty-art { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  html body[data-page^="deposit"] button.mos-amount-chip { transition: none; }
  html body[data-page^="deposit"] button.mos-amount-chip:is(:hover, :active, .mos-is-pressed, [aria-pressed="true"]) { transform: none; }
  html body[data-page^="deposit"] .mos-amount-chip::before { transition: none; }
  html body[data-page] .mos-game-play::after { animation: none !important; transform: none; opacity: .25; }
  html body[data-page] :is(.mos-play-rotor, .mos-play-spin, .mos-play-token) { animation: none !important; transform: none; filter: none; }
  html body[data-page] .mos-play-token--play { opacity: 1; }
  html body[data-page] .mos-play-token:not(.mos-play-token--play) { display: none; }
  html body[data-page] .mos-hero-campaign { display: none; animation: none !important; opacity: 0; }
  html body[data-page] .mos-hero-border-trace { animation: none !important; opacity: 0 !important; transition: none; }
  html body[data-page] :is(.mos-hero-visual, .mos-game-play, .mos-game-arrow, .mos-shortcut-image, .mos-shortcut-arrow, .mos-shortcut-text),
  html body[data-page] .mos-shortcut::before,
  html body[data-page] .mos-shortcut::after,
  html body[data-page] .mos-shortcut-text::after { transition: none; }
  html body[data-page] :is(.mos-press-wave, .mos-icon-running svg, .mos-icon-running svg > path, .mos-icon-running svg > rect) { animation: none !important; }
  html body[data-page] .mos-press-overlay { display: none; }
  html body[data-page] :is(.mos-game-hero, .mos-shortcut):is(:hover, :focus-visible, :active, .mos-is-pressed) :is(.mos-hero-visual, .mos-game-play, .mos-shortcut-image, .mos-shortcut-arrow) { transform: none !important; }
  html body[data-page] .mos-shortcut:is(:hover, :focus-visible)::before,
  html body[data-page] .mos-shortcut:is(:hover, :focus-visible)::after { transform: translateX(-50%) !important; opacity: 1; }
  html body[data-page] .mos-shortcut:is(:hover, :focus-visible) .mos-shortcut-text { transform: none; }
}