body.mtg-rotated { overflow: hidden; }
body.mtg-rotated main { position: relative; z-index: 1030; }
.text_white { color: white !important; }
.magicTimeGame_fab { position: fixed; bottom: 16px; right: 16px; z-index: 999; } /* Floating Action Button */
.magicTimeGame_fab::before { content: ''; display: block; width: 100px; aspect-ratio: 7/12; background: url(../img/30logo_loop.gif) center / contain no-repeat; }
.magicTimeGame_container { position: fixed; z-index: 1010; width: 100%; height: auto; aspect-ratio: 16/9; max-height: calc(100dvh - 120px); background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); container-type: inline-size; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-in; }
.magicTimeGame_container [role=button] { cursor: pointer; }
.magicTimeGame_container.closing { margin-left: 0 !important; margin-top: 0 !important; transition: none !important; background:transparent !important; }
#mtg-cursor { --rg: radial-gradient(closest-side, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 10%, rgba(255,255,255,0) 20%); position: absolute; z-index: 99998; width: 8cqi; height: 8cqi; background: var(--rg) 0% 8% / 6cqi 6cqi no-repeat, url(../img/cursor.gif) center / contain no-repeat; transform: translate(-37%,-40%); display: none; pointer-events: none; }
#mtg-cursor._pointer { --rg: radial-gradient(closest-side, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 30%, rgba(255,255,255,0.1) 80%, rgba(255,255,255,0) 100%); filter: brightness(1.3); }
#mtg-cursor._click { --rg: radial-gradient(closest-side, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.54) 34%, rgba(255,255,255,0.1) 80%, rgba(255,255,255,0) 100%); filter: brightness(1.4); }
.magicTimeGame_container._rotated { position: fixed; top: 0 !important; left: 0; width: 100vw; background: rgba(0,0,0,0.95); height: 100dvh; max-height: unset !important; z-index: 99999; }
@media (orientation: portrait) {
    .magicTimeGame_container { transition: transform 0.3s ease-in-out, background 0.3s ease-in-out; }
    .magicTimeGame_container._rotated { transform: rotate(90deg); width: 100dvh; height: 100vw; position: fixed; top: 50% !important; left: 50%; margin-top: calc(-100vw / 2); margin-left: calc(-100dvh / 2); }
}

.magicTimeGame_content { container-type: inline-size; position: absolute; top: 0; left: 0; right: 0; bottom: 0; aspect-ratio: 16/9; max-width: 100%; max-height: 100%; width: auto; height: auto; margin: auto; overflow: hidden; }
.magicTimeGame_content._no_cursor,
.magicTimeGame_content._no_cursor a,
.magicTimeGame_content._no_cursor [role=button] { cursor: none; }
.magicTimeGame_stageBox { position: absolute; inset: 0; width: 100%; height: 100%; }
.magicTimeGame_stageBox:not(.active) { pointer-events: none !important; } /* 背景 */
.magicTimeGame_stageBox.active { z-index: 99 !important; } /* 當前 */
.magicTimeGame_stageBox.transitioning { pointer-events: none !important; z-index: 99 !important; } /* 過渡中 */
.magicTimeGame_stageBox > * { position: absolute; z-index: 0; }
.magicTimeGame_fillContent { position: absolute; inset: 0; width: 100%; height: 100%; }
.magicTimeGame_fillVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }

/* magicTimeGame 框框按鈕 */
.magicTimeGame_frameBtn { z-index: 99999; cursor: pointer !important; --size: min(calc(16px + 2cqi), 40px); --gap: min(12px, 1cqi); display: flex; align-items: center; justify-content: center; position: absolute; width: var(--size); height: var(--size); border: none; border-radius: 50%; font-size: 1.2rem; cursor: pointer; background: rgba(255,255,255,0.85); transition: background 0.3s; user-select: none; }
.magicTimeGame_frameBtn:hover { background: rgba(255,255,255,0.98); }
#mtg-btn-close { right: var(--gap); top: var(--gap); }
#mtg-btn-close::before { content: ''; display: block; width: 55%; height: 55%; background: url(../img/icon_close.png) center / contain no-repeat; }
/* .magicTimeGame_container._rotated #mtg-btn-close { display: none; } */
#mtg-btn-volume { right: var(--gap); top: calc(var(--gap) * 1.6 + var(--size)); }
/* #mtg-btn-volume { right: var(--gap); top: var(--gap); } */
#mtg-btn-volume::before { content: ''; display: block; width: 55%; height: 55%; background: url(../img/volume-on.png) center / contain no-repeat; }
#mtg-btn-volume._muted::before { background-image: url(../img/volume-off.png); }
/* .magicTimeGame_container._rotated #mtg-btn-volume { top: var(--gap); } */

#mtg-btn-rotate { right: var(--gap); bottom: var(--gap); }
#mtg-btn-rotate::before { content: ''; display: block; width: 50%; height: 50%; background: url(../img/icon_screen_expand.png) center / contain no-repeat; }
#mtg-btn-rotate._rotated::before { background-image: url(../img/icon_screen_shrink.png); }
@media screen and (min-width: 1024px) {
    .magicTimeGame_container:not(._rotated) #mtg-btn-rotate { display: none; }
}

/* stage 物件 */
.magicTimeGame_stageBtn { filter: brightness(1) opacity(0.95); }
.magicTimeGame_stageBtn img { -webkit-user-drag: none; user-drag: none; }
.magicTimeGame_stageBtn:hover { filter: brightness(1.15) opacity(1); }
.mtg-stage-item { position: absolute; z-index: 9; }
.mtg-stage-item:not(._enable) { pointer-events: none; }

/* stage1 開場動畫 */
#mtg-stage1 { z-index: 9; }
#mtg-stage1-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,0.4); z-index: 10; font-size: calc(12px + 0.5cqi); color: white; cursor: auto; }
#mtg-stage1-loading > img { display: block; width: calc(12px + 11cqi); aspect-ratio: 1/1; object-fit: contain; }
#mtg-stage1-preload-stage2-video { width: 0; height: 0; opacity: 0; position: absolute; left: -99999; top: -99999; z-index: -99999; }
#mtg-stage1-btn-play { width: 16cqi; right: 6.5cqi; bottom: 13cqi; user-select: none; }

/* stage2 過渡動畫 */
#mtg-stage2 { z-index: 8; }
#mtg-stage2-btn-skip { width: 16cqi; right: 3cqi; bottom: 8cqi; }
#mtg-stage2-btn-skip:not(._enable) { display: none !important; }

/* stage3 箱子選擇 */
.mtg-stage-transition-bg { background: center / cover no-repeat; background-image: url(../img/bg.png); }
#mtg-stage-transition-bg { z-index: 5; }
#mtg-stage3 { z-index: 7; }
#mtg-stage3-btn-replay { width: 14cqi; left: 2cqi; bottom: 3cqi; }
#mtg-stage3-title { width: 36cqi; left: 45cqi; top: 14.5cqi; text-align: center; font-size: 2.9cqi; line-height: 1.3; letter-spacing: 1cqi; }
#mtg-stage3-wizard { width: 28.1cqi; left: 8.1cqi; top: 14.2cqi; }
#mtg-stage3-flashlight { position: absolute; width: 0cqi; height: 0cqi; left: 0; top: 0; transform: translate(-50%, -50%); border-radius: 100vmax; opacity: 0.8; background: radial-gradient(closest-side, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 60%, rgba(255,255,255,0.1) 100%); z-index: 100; }
#mtg-stage3-flashlight._active { animation: sizeUp 3s ease-in-out forwards; }
.mtg-stage3-chest { width: 16.6cqi; top: 25.2cqi; aspect-ratio: 4/3; }
.mtg-stage3-chest > * { position: absolute; display: block; z-index: 1; inset: 0; object-fit: contain; }
.mtg-stage3-chest:hover,
.mtg-stage3-chest._clicked { filter: brightness(1.15); }
.mtg-stage3-chest [data-chest-clicked=false],
.mtg-stage3-chest._clicked [data-chest-clicked=true] { opacity: 1; }
.mtg-stage3-chest [data-chest-clicked=true],
.mtg-stage3-chest._clicked [data-chest-clicked=false] { opacity: 0; }
@keyframes sizeUp {
    0% { width: 0cqi; height: 0cqi; opacity: 0.8; }
    80% { width: 600cqi; height: 600cqi; opacity: 1; }
    100% { width: 600cqi; height: 600cqi; opacity: 0; }
}

/* stage4 卡片選擇 */
#mtg-stage4 { z-index: 6; }
#mtg-stage4-btn-back { width: 11cqi; left: 2cqi; bottom: 3cqi; }
#mtg-stage4-banner { width: 100cqi; left: 0cqi; top: 1cqi; }
#mtg-stage4-banner-wizard { width: 16.6cqi; left: 1.8cqi; top: 0cqi; }
#mtg-stage4-banner-topText { width: 12cqi; left: 44cqi; top: 2.3cqi; text-align: center; font-size: 2.3cqi; line-height: 1; letter-spacing: 0.6cqi; }
#mtg-stage4-banner-text { width: 100cqi; left: 0cqi; top: 7.9cqi; padding-inline: 22cqi; font-size: 2.6cqi; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 6cqi; }
/* .mtg-divider-title { display: flex; align-items: center; justify-content: center; height: 1em; white-space: nowrap; gap: 1cqi; font-weight: 700; }
.mtg-divider-title::before,
.mtg-divider-title::after { content: ''; height: 0.05em; width: 20%; background: black; } */
.mtg-divider-desc { text-align: left; line-height: 1.25; font-weight: 300; }

#mtg-stage4-cards { width: 92cqi; left: 4cqi; top: 19cqi; }
#mtg-stage4-hint { width: 42cqi; left: 50%; bottom: 4.6cqi; transform: translateX(-50%); text-align: center; font-size: 2.8cqi; line-height: 1; letter-spacing: 0.8cqi; }
.mtg-stage4-cards-row { display: flex; width: 100%; justify-content: center; gap: 1.25cqi; }
.mtg-stage4-cards-row-item { flex: 0 0 calc(20% - 1.5cqi); max-width: 20%; }
.mtg-stage4-card { display: block; padding: 1.25cqi; border-radius: 1cqi; font-size: 1.7cqi; background: black; text-decoration: none; }
.mtg-stage4-card:hover { filter: brightness(1.15); }
.mtg-stage4-card._animating { animation: 1s moveDown linear infinite alternate; }
.mtg-stage4-card._animating:hover { animation-play-state: paused; }
@keyframes moveDown {
    0% { transform: translateY(0cqi); }
    100% { transform: translateY(1cqi); }
}
.mtg-stage4-cards-row-item:nth-child(n+1) .mtg-stage4-card { animation-delay: 0s; }
.mtg-stage4-cards-row-item:nth-child(n+2) .mtg-stage4-card { animation-delay: 0.5s; }
.mtg-stage4-cards-row-item:nth-child(n+3) .mtg-stage4-card { animation-delay: 0.1s; }
.mtg-stage4-cards-row-item:nth-child(n+4) .mtg-stage4-card { animation-delay: 0.4s; }
.mtg-stage4-cards-row-item:nth-child(n+5) .mtg-stage4-card { animation-delay: -0.1s; }
.mtg-stage4-card[data-stage4-color=R], [data-stage4-color=R] .mtg-stage4-card { background: linear-gradient(180deg, #FF591D 0%, #FF381D 26%, #A62F26 100%); }
.mtg-stage4-card[data-stage4-color=O], [data-stage4-color=O] .mtg-stage4-card { background: linear-gradient(180deg, #F1AB19 0%, #ECA119 19%, #E8981A 50%, #E7961B 100%); }
.mtg-stage4-card[data-stage4-color=G], [data-stage4-color=G] .mtg-stage4-card { background: linear-gradient(180deg, #6DBF6A 0%, #3EA681 100%); }
.mtg-stage4-card > ._img { border-radius: 0.8cqi; overflow: hidden; aspect-ratio: 3/2; }
.mtg-stage4-card > ._img > img { width: 100%; height: 100%; object-fit: cover; }
.mtg-stage4-card > ._txt { color: white; margin-top: 1cqi; line-height: 2.5cqi; min-height: 10cqi; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }