/* === GACHA SCREEN & LAYOUT === */
#game-container:has(#gacha-screen.active) { overflow: visible !important; }
#gacha-screen.active ~ #tech-nav, #gacha-screen.active .screen-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#tech-nav.is-hiding { opacity: 0; pointer-events: none; transition: opacity 0.5s; }

/* (Giữ nguyên Layout Grid...) */
#gacha-screen { display: flex; flex-direction: column; }
#gacha-screen .screen-header { flex-shrink: 0; transition: opacity 0.5s ease-out, visibility 0.5s ease-out; }
#gacha-screen .screen-main { flex-grow: 1 !important; height: auto !important; min-height: 0 !important; }
.gacha-layout { width: 100%; height: 100%; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr auto 1fr; grid-template-areas: "top-left top-center top-right" "center center center" "bottom bottom bottom"; box-sizing: border-box; overflow: visible; }
#gacha-info-top-left { grid-area: top-left; justify-self: start; transition: opacity 0.5s ease-out, visibility 0.5s ease-out; }
#gacha-info-top-right { grid-area: top-right; justify-self: end; transition: opacity 0.5s ease-out, visibility 0.5s ease-out; }
#gacha-buttons-container { grid-area: bottom; align-self: end; padding-bottom: 4rem; }
#gacha-info-top-center { grid-area: top-center; justify-self: center; align-self: center; transition: opacity 0.5s ease-out, visibility 0.5s ease-out; }

/* MỚI: Immersive Mode (Blackout) */
#gacha-screen.is-blackout #gacha-info-top-left,
#gacha-screen.is-blackout #gacha-info-top-right,
#gacha-screen.is-blackout #gacha-info-top-center,
#gacha-screen.is-blackout .screen-header,
#gacha-screen.is-blackout #gacha-buttons-container {
    opacity: 0;
    visibility: hidden;
}


/* ==========================================================
   LÕI CÔNG NGHỆ 3D VÀ HOẠT ẢNH ĐIỆN ẢNH
========================================================== */

#energy-cube-container {
    grid-area: center; align-self: center; justify-self: center;
    width: 400px; height: 400px; perspective: 1500px;
    display: flex; align-items: center; justify-content: center;
}

/* Cấu trúc 5 lớp (Bắt buộc) */
.gacha-cube-scene, .float-wrapper, .scaling-wrapper, .rotation-wrapper, .energy-cube {
    width: 100%; height: 100%; position: relative; transform-style: preserve-3d;
}

/* Layer 1: Xoay toàn cảnh */
.gacha-cube-scene { animation: scene-rotate 30s infinite linear; }
@keyframes scene-rotate { to { transform: rotateY(360deg); } }

/* Layer 2: Nổi và Góc nhìn 3D cơ bản */
.float-wrapper {
    transform: rotateX(15deg); 
    animation: pulse-and-float 4s infinite ease-in-out;
}
@keyframes pulse-and-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

/* MỚI: Vòng Năng Lượng Quay Đạo (Orbital Rings) */
.orbital-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 380px; /* Lớn hơn Cube (250px) */
    height: 380px;
    margin-top: -190px; margin-left: -190px;
    border-radius: 50%;
    /* Kiểu dáng mặc định: Đứt nét, mờ */
    border: 3px dashed rgba(0, 229, 255, 0.6);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.5), inset 0 0 15px rgba(0, 229, 255, 0.5);
    transform-style: preserve-3d;
    transition: border 0.5s ease-out, box-shadow 0.5s ease-out;
}

/* Định nghĩa chuyển động cho từng vòng */
.orbital-ring.ring-1 {
    /* Quay quanh trục X và nghiêng nhẹ trục Z */
    animation: orbit-x 15s linear infinite;
}
.orbital-ring.ring-2 {
    /* Quay quanh trục Y và nghiêng mạnh trục X */
    animation: orbit-y 20s linear infinite reverse;
}

@keyframes orbit-x {
    from { transform: rotateZ(20deg) rotateX(0deg); }
    to { transform: rotateZ(20deg) rotateX(360deg); }
}

@keyframes orbit-y {
    from { transform: rotateX(70deg) rotateY(0deg); }
    to { transform: rotateX(70deg) rotateY(360deg); }
}


/* --- [GIAI ĐOẠN 1] Kích Hoạt (0s-2s) --- */

/* Áp dụng animation vào đúng Wrapper */
#energy-cube-container.is-activating .scaling-wrapper {
    animation: intensive-charge-up 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
#energy-cube-container.is-activating .rotation-wrapper {
    animation: fast-spin 2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* Áp dụng Flicker vào .face */
#energy-cube-container.is-activating .energy-cube .face {
    animation: flicker-activation 2s step-end forwards;
}

/* Tăng tốc Vòng Năng Lượng khi Kích Hoạt */
#energy-cube-container.is-activating .orbital-ring {
    animation-duration: 1.5s; /* Tăng tốc */
    border-style: solid; /* Chuyển sang solid */
    border-color: white;
    box-shadow: 0 0 60px var(--color-primary-cyan), inset 0 0 40px var(--color-primary-cyan);
}

@keyframes fast-spin { to { transform: rotateY(1800deg); } }
@keyframes intensive-charge-up {
    0% { transform: scale(1) translate(0, 0); }
    20% { transform: scale(1.1) translate(10px, 0); }
    40% { transform: scale(1.2) translate(0, 10px); }
    60% { transform: scale(1.3) translate(-10px, 0); }
    80% { transform: scale(1.4) translate(0, -10px); }
    100% { transform: scale(1.6) translate(0, 0); }
}
@keyframes flicker-activation {
    0%, 20%, 40%, 60%, 80%, 100% { filter: brightness(5); opacity: 1; }
    10%, 30%, 50%, 70%, 90% { filter: brightness(1.5); opacity: 0.6; }
}

/* --- [GIAI ĐOẠN 2.1] Xâm Nhập (2s+) --- */

#energy-cube-container.is-warping .energy-cube {
    animation: cube-warp-transformation 1s cubic-bezier(0.755, 0.05, 0.855, 0.06) forwards;
}

/* Áp dụng độ sáng cao và Mở khóa vào .face */
#energy-cube-container.is-warping .energy-cube .face {
    filter: brightness(5);
    animation: cube-unlock 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Vòng Năng Lượng cũng bị hút vào Warp */
#energy-cube-container.is-warping .orbital-ring {
     animation: cube-warp-transformation 1s cubic-bezier(0.755, 0.05, 0.855, 0.06) forwards;
}

@keyframes cube-warp-transformation {
    0% { transform: scale(1) translateZ(0px); opacity: 1; }
    30% { transform: scale(0.2); opacity: 1; }
    100% { transform: scale(0.01) translateZ(4000px); opacity: 0; }
}

@keyframes cube-unlock {
    100% { transform: var(--base-transform) translateZ(80px); }
}


/* (Thiết kế Lõi Lập Phương) */
.energy-cube .face {
    position: absolute; width: 250px; height: 250px; top: 75px; left: 75px;
    background-color: rgba(10, 15, 30, 0.3); 
    background-image: radial-gradient(circle at center, rgba(0, 229, 255, 0.5) 0%, rgba(0, 229, 255, 0.3) 50%, rgba(0, 229, 255, 0.1) 75%, rgba(0, 229, 255, 0) 90%); 
    border: 2px solid rgba(0, 229, 255, 0.9);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.5), inset 0 0 40px rgba(0, 229, 255, 0.7);
    transition: box-shadow 0.5s ease-out, border 0.5s ease-out;
    transform: var(--base-transform);
    
    /* Glow mặc định */
    animation: pulse-glow 4s infinite ease-in-out;
}

@keyframes pulse-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

/* Tăng cường Glow khi Kích Hoạt/Warping */
#energy-cube-container.is-activating .energy-cube .face,
#energy-cube-container.is-warping .energy-cube .face {
    box-shadow: 0 0 120px 40px white, inset 0 0 150px 50px var(--color-primary-cyan);
}

/* Vị trí cơ bản (Không thay đổi) */
.energy-cube .face.front  { --base-transform: rotateY(0deg) translateZ(125px); }
.energy-cube .face.back   { --base-transform: rotateY(180deg) translateZ(125px); }
.energy-cube .face.right  { --base-transform: rotateY(90deg) translateZ(125px); }
.energy-cube .face.left   { --base-transform: rotateY(-90deg) translateZ(125px); }
.energy-cube .face.top    { --base-transform: rotateX(90deg) translateZ(125px); }
.energy-cube .face.bottom { --base-transform: rotateX(-90deg) translateZ(125px); }


/* ==========================================================
   [GIAI ĐOẠN 2.2] HÀNH TRÌNH TÌM KIẾM (Loại bỏ Pings/Messages riêng)
========================================================== */

.gacha-sequence-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.5s, background-color 0.5s; }
.gacha-sequence-container.active { opacity: 1; visibility: visible; }
.gacha-sequence-container.show-results { background-color: rgba(0, 0, 0, 0.9); }

/* Xóa các định nghĩa cho .gacha-scanning-overlay, .scanning-text, .energy-ping vì chúng đã được chuyển sang main.css (Hologram chung) */


/* ==========================================================
   [GIAI ĐOẠN 4] KẾT QUẢ VÀ LỐC XOÁY (Giữ nguyên)
========================================================== */
/* (Giữ nguyên toàn bộ phần còn lại của CSS: .gacha-reveal-screen, .result-cube-wrapper, .result-cube, Lốc Xoáy Tái Tạo, Thẩm Mỹ Độ Hiếm...) */
.gacha-reveal-screen { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.5rem; box-sizing: border-box; }
.gacha-results-grid { display: grid; gap: 2rem; width: 100%; max-width: 1100px; margin: 0 auto; grid-template-columns: repeat(5, 1fr); justify-content: center; z-index: 10; }
.gacha-reveal-buttons { display: flex; gap: 5rem; margin-top: 4rem; opacity: 0; transition: opacity 0.5s; z-index: 10; }
.gacha-reveal-buttons.visible { opacity: 1; }
.gacha-results-grid.single-pull { display: flex; }
@media (max-width: 768px) { .gacha-results-grid { gap: 1rem; grid-template-columns: repeat(2, 1fr); } }
.result-cube-wrapper { z-index: 1; width: 130px; height: 170px; position: relative; perspective: 1200px; cursor: pointer; opacity: 0; transform: scale(0.1) translateY(50px); }
.result-cube-wrapper.materialized { animation: materialize 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; animation-delay: calc(var(--index) * 0.1s); }
@keyframes materialize { to { opacity: 1; transform: scale(1) translateY(0); } }
.result-cube { width: 100%; height: 130px; position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 0.4s ease-out; animation: slow-rotate-cube 15s infinite linear; }
@keyframes slow-rotate-cube { from { transform: translate(-50%, -50%) rotateY(0deg) rotateX(10deg); } to { transform: translate(-50%, -50%) rotateY(360deg) rotateX(10deg); } }
.result-cube-wrapper:hover .result-cube { animation-play-state: paused; }
.result-cube .face {
    position: absolute; width: 130px; height: 130px; background-color: rgba(10, 15, 30, 0.7); border: 1px solid var(--color-border);
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.s%7Bstroke:%2300E5FF;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0.3%7D%3C/style%3E%3Cpath class='s' d='M50 2L2 26v48l48 24 48-24V26L50 2zM2 26l48 24M50 98V50M98 26L50 50'/%3E%3Cpath class='s' d='M28 38L50 50l22-12'/%3E%3C/svg%3E");
    background-size: 60%; background-repeat: no-repeat; background-position: center; box-sizing: border-box; top: 50%; left: 50%; margin-top: -65px; margin-left: -65px; overflow: hidden;
}
.result-cube .face.front  { transform: rotateY(0deg) translateZ(65px); }
.result-cube .face.back   { transform: rotateY(180deg) translateZ(65px); }
.result-cube .face.right  { transform: rotateY(90deg) translateZ(65px); }
.result-cube .face.left   { transform: rotateY(-90deg) translateZ(65px); }
.result-cube .face.top    { transform: rotateX(90deg) translateZ(65px); }
.result-cube .face.bottom { transform: rotateX(-90deg) translateZ(65px); }

.is-revealed .result-cube { transform: translate(-50%, -50%) rotateY(180deg) scale(1.5); opacity: 0; }
.shards-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; z-index: 10; pointer-events: none; }
.shard { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; background: var(--color-primary-cyan); opacity: 0; border-radius: 50%; }
.is-revealed:not(.is-rare-showcase) .shard { animation: shard-disintegration 0.8s ease-out forwards; animation-delay: calc(var(--i) * 0.01s); }
@keyframes shard-disintegration { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 0; transform: translate(calc(cos(var(--angle)) * 150px), calc(sin(var(--angle)) * 150px)) scale(0.1); } }
.is-revealed.is-rare-showcase .shard { animation: shard-vortex-sequence 4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards; animation-delay: calc(var(--i) * 0.002s); }
@keyframes shard-vortex-sequence {
    0% { opacity: 1; transform: translate(0, 0) scale(1.5); }
    25% { opacity: 1; transform: translate(var(--center-offset-x), var(--center-offset-y)) scale(1); }
    85% { opacity: 1; transform: translate(var(--center-offset-x), var(--center-offset-y)) rotateY(2520deg) translateX(10px) translateZ(calc(sin(var(--angle) * 12) * 200px)) scale(0.4); }
    100% { opacity: 0; transform: translate(var(--center-offset-x), var(--center-offset-y)) rotateY(2520deg) translateX(0px) scale(0); }
}
.result-card { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; backface-visibility: hidden; transform: scale(0.5); opacity: 0; transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease-in; display: flex; align-items: center; justify-content: center; transform-origin: center center; }
.is-revealed:not(.is-rare-showcase) .result-card { transform: scale(1); opacity: 1; transition-delay: 0.4s; }
.result-cube-wrapper::before { content: ''; position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; background: radial-gradient(circle, white 0%, rgba(255,255,255,0.8) 30%, transparent 60%); border-radius: 50%; opacity: 0; z-index: 5; }
.is-revealed.is-rare-showcase::before { animation: nova-burst 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; animation-delay: 3.8s; }
@keyframes nova-burst {
    0% { transform: translate(calc(var(--center-offset-x) - 100px), calc(var(--center-offset-y) - 100px)) scale(0.1); opacity: 1; }
    100% { transform: translate(calc(var(--center-offset-x) - 100px), calc(var(--center-offset-y) - 100px)) scale(6); opacity: 0; }
}
.result-card .item-card { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 1rem; font-size: 15px; position: relative; overflow: hidden; z-index: 1; border-radius: 8px; background-color: rgba(10, 15, 30, 0.9); border: 2px solid; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); }
.result-card .item-card .font-bold { font-size: 1em; line-height: 1.25; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
.result-card .item-card .text-xs { font-size: 0.8em; flex-shrink: 0; text-align: center; }

.result-cube-wrapper.is-rare-showcase.is-revealed { z-index: 100; }
.is-revealed.is-rare-showcase .result-card {
    animation: rare-reveal-showcase 6s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    z-index: 9999; opacity: 0 !important; transform: scale(0.5) !important; transition: none !important;
}
@keyframes rare-reveal-showcase {
    0%, 63% { opacity: 0; transform: translate(var(--center-offset-x), var(--center-offset-y)) scale(0.5) rotateY(2520deg); }
    68% { opacity: 1; transform: translate(var(--center-offset-x), var(--center-offset-y)) scale(2.3) rotateY(2520deg); }
    75%, 85% { transform: translate(var(--center-offset-x), var(--center-offset-y)) scale(2) rotateY(2700deg); }
    100% { opacity: 1; transform: translate(0, 0) scale(1) rotateY(0deg); }
}

/* ==========================================================
   THẨM MỸ ĐỘ HIẾM (Giữ nguyên)
========================================================== */
/* (Giữ nguyên Shard colors, Cube Glow/Border/Sheen, Card Gradient/Sheen, Mythic Sparkles) */
.result-cube-wrapper.thần-thoại .shard { background: var(--color-accent-gold); box-shadow: 0 0 10px var(--color-accent-gold); }
.result-cube-wrapper.sử-thi .shard { background: var(--color-secondary-purple); box-shadow: 0 0 10px var(--color-secondary-purple); }
.result-cube-wrapper.hiếm .shard { background: #3B82F6; }
.result-cube-wrapper.thần-thoại .result-cube .face, .result-cube-wrapper.sử-thi .result-cube .face { animation: rare-glow 2s infinite alternate; }
@keyframes rare-glow { from { box-shadow: inset 0 0 10px, 0 0 10px; } to { box-shadow: inset 0 0 25px, 0 0 25px; } }
.result-cube-wrapper.thần-thoại .result-cube .face { border-color: var(--color-accent-gold); color: var(--color-accent-gold); }
.result-cube-wrapper.sử-thi .result-cube .face { border-color: var(--color-secondary-purple); color: var(--color-secondary-purple); }
.result-cube-wrapper.hiếm .result-cube .face { border-color: #3B82F6; color: #3B82F6; }
.result-cube-wrapper.thần-thoại .result-cube .face::after, .result-cube-wrapper.sử-thi .result-cube .face::after { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%); transform: skewX(-25deg) translateX(-150%); animation: sheen 3s infinite; }
@keyframes sheen { 100% { transform: skewX(-25deg) translateX(250%); } }
.result-cube-wrapper.thần-thoại .item-card, .result-cube-wrapper.sử-thi .item-card { background: linear-gradient(135deg, rgba(10, 15, 30, 0.95) 60%, rgba(50, 50, 70, 0.95) 100%); }
.result-cube-wrapper.thần-thoại .item-card::after, .result-cube-wrapper.sử-thi .item-card::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(to right, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%); transform: rotate(25deg); animation: sheen-card 4s infinite linear; }
@keyframes sheen-card { from { transform: rotate(25deg) translateX(-100%); } to { transform: rotate(25deg) translateX(100%); } }
.mythic-sparkles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.sparkle { position: absolute; width: 8px; height: 8px; background-color: white; border-radius: 50%; box-shadow: 0 0 15px var(--color-accent-gold), 0 0 5px var(--color-accent-gold); opacity: 0; animation: sparkle-float 2s ease-out infinite; top: var(--y); left: var(--x); animation-delay: var(--delay); }
@keyframes sparkle-float { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-60px) scale(0); } }

/* Tooltip Tỷ lệ Gacha */
#gacha-rates-panel { position: absolute; left: 2rem; top: 50%; width: 100%; max-width: 400px; max-height: 75vh; overflow-y: auto; background-color: rgba(10, 15, 30, 0.95); border: 1px solid var(--color-primary-cyan); border-radius: 8px; padding: 1.25rem; box-shadow: 0 0 30px rgba(0, 229, 255, 0.5); backdrop-filter: blur(10px); z-index: 100; opacity: 0; visibility: hidden; transform: translateY(-50%) translateX(-20px); transition: all 0.3s ease; pointer-events: none; }
#gacha-rates-panel.visible { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); pointer-events: auto; }
.rate-group { margin-bottom: 1rem; }
.rate-group summary { padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); cursor: pointer; }
.rate-item-list { list-style: none; padding: 0.5rem 0 0 1rem; margin: 0; }
.rate-item { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; font-size: 0.9rem; color: var(--color-text-secondary); }
.rate-item:not(:last-child) { border-bottom: 1px solid rgba(0, 229, 255, 0.1); }
#gacha-rates-panel::-webkit-scrollbar { width: 8px; }
#gacha-rates-panel::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); border-radius: 4px; }
#gacha-rates-panel::-webkit-scrollbar-thumb { background-color: var(--color-primary-cyan); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
#gacha-rates-panel::-webkit-scrollbar-thumb:hover { background-color: #00ffff; }