/* ==========================================================
   KHUNG CHÍNH (HEADER, CLOUD STATUS)
   ========================================================== */
.iphone-frame { 
    background: #000; 
    border: 4px solid #3d3b42; 
    border-radius: 46px; 
    box-shadow: 0 25px 75px rgba(0, 0, 0, 0.98), 0 0 0 1px rgba(255,255,255,0.12); 
    transition: box-shadow 300ms ease, border-color 300ms ease;
}

.phone-status-bar {
    min-height: 48px;
    padding: 8px 18px 5px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 108px minmax(0, 1fr);
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(180deg, #090909, #030303);
    font-size: 11px;
    font-weight: 800;
}

#iosClock { justify-self: start; font-variant-numeric: tabular-nums; }

.dynamic-island {
    width: 104px;
    height: 28px;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    padding: 0 9px;
    border: 1px solid #242424;
    border-radius: 999px;
    background: #000;
    box-shadow: 0 2px 6px rgba(0,0,0,.8), inset 0 1px 3px rgba(255,255,255,.06);
}

.island-camera {
    width: 12px;
    height: 12px;
    border: 2px solid #152238;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #263a5b, #080b10 65%);
    box-shadow: 0 0 4px rgba(50,100,190,.35);
}

.island-sensor {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #121b14;
    box-shadow: inset 0 0 3px #29442f;
}

.phone-status-icons {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-size: 9px;
}

.phone-status-icons .battery-icon { margin-left: 1px; color: #e8c85e; font-size: 13px; }

#phoneBackdrop.phone-open { animation: phoneBackdropIn 260ms ease both; }
#phoneBackdrop.phone-closing { animation: phoneBackdropOut 220ms ease both; pointer-events: none; }
#phoneBackdrop.phone-open > .iphone-frame { animation: phoneSlideUp 360ms cubic-bezier(.18,.78,.28,1) both; }
#phoneBackdrop.phone-closing > .iphone-frame { animation: phoneSlideDown 220ms cubic-bezier(.5,0,.8,.25) both; }

@keyframes phoneBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes phoneBackdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes phoneSlideUp { from { opacity: .7; transform: translateY(36px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes phoneSlideDown { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(44px) scale(.96); } }

#phoneBackdrop.phone-open .phone-close-button { animation: closeButtonIn 300ms 100ms ease both; }
.phone-close-button {
    position: fixed;
    z-index: 60;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 164, 151, .82);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #ff4d43, #a90d17);
    box-shadow: 0 0 18px rgba(255, 38, 42, .48), 0 7px 22px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.4);
    font-size: 18px;
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}
.phone-close-button:hover { transform: scale(1.08); filter: brightness(1.12); box-shadow: 0 0 24px rgba(255,38,42,.66), 0 8px 24px rgba(0,0,0,.58); }
.phone-close-button:active { transform: scale(.94); }
@keyframes closeButtonIn { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }

.phone-bottom-bar { position: relative; height: 32px; display: flex; justify-content: center; align-items: center; background: #050505; border-top: 1px solid rgba(255,255,255,.04); }
.phone-home-indicator { width: 108px; height: 5px; padding: 0; border: 0; border-radius: 999px; background: #858585; box-shadow: 0 0 1px rgba(255,255,255,.5); transition: width 180ms ease, background 180ms ease; }
.phone-home-indicator:hover { width: 116px; background: #ddd; }

.profile-app-header { background: linear-gradient(110deg,#292012,#15130f); border-bottom: 1px solid rgba(215,180,91,.35); }
.profile-summary { border: 1px solid rgba(215,180,91,.38); background: linear-gradient(145deg,rgba(74,54,23,.68),rgba(17,17,14,.96)); box-shadow: 0 9px 24px rgba(0,0,0,.32),inset 0 1px rgba(255,244,204,.1); }
.profile-avatar { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 1px solid #e6ca82; border-radius: 50%; color: #ffe8a4; background: radial-gradient(circle at 30% 25%,#8c672a,#25190d 76%); box-shadow: 0 0 12px rgba(215,180,91,.22); font-size: 17px; }
.profile-level-badge { padding: 6px 9px; border: 1px solid #e8ca76; border-radius: 999px; color: #ffe7a0; background: rgba(57,42,15,.8); font: 900 11px monospace; box-shadow: 0 0 12px rgba(232,202,118,.16); }
.profile-luck-line { margin-top: 9px; display: flex; align-items: center; gap: 6px; color: #aaa18b; font-size: 9px; }
.profile-luck-line i, .profile-luck-line b { color: #a3e635; }
.profile-luck-line b { margin-left: auto; font: 900 10px monospace; }
.profile-xp-track { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(0,0,0,.56); }
.profile-xp-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#d49d39,#fff0a5); box-shadow: 0 0 9px rgba(245,208,97,.58); transition: width 240ms ease; }
.profile-rebirth-button { width: 100%; min-height: 46px; padding: 6px 12px; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 7px; border: 1px solid #ffe6a0; border-radius: 12px; color: #211708; background: linear-gradient(110deg,#ffe88f,#d19b35 58%,#f7d877); box-shadow: 0 0 17px rgba(245,208,97,.26),inset 0 1px rgba(255,255,255,.62); }
.profile-rebirth-button span { font-size: 11px; font-weight: 1000; letter-spacing: .8px; }
.profile-rebirth-button small { color: #4b3717; font-size: 8px; font-weight: 800; }
.profile-rebirth-button:hover:not(:disabled) { box-shadow: 0 0 23px rgba(255,220,115,.56),inset 0 1px rgba(255,255,255,.68); filter: brightness(1.05); }
.profile-rebirth-button:disabled { filter: grayscale(.5); opacity: .58; cursor: not-allowed; }
.profile-history-tabs button { min-width: 0; flex: 1; padding: 8px 3px; border: 1px solid rgba(215,180,91,.19); border-radius: 9px 9px 0 0; color: #99958a; background: rgba(255,255,255,.035); font-size: 8px; font-weight: 800; }
.profile-history-tabs button.active { color: #ffe4a0; border-color: rgba(215,180,91,.52); background: rgba(83,61,23,.38); box-shadow: inset 0 -2px #d5b45d; }
.profile-history-entry { padding: 9px 10px; border: 1px solid rgba(215,180,91,.15); border-radius: 10px; background: rgba(255,255,255,.035); }
.profile-history-entry .profile-history-title { color: #f0dfb6; font-size: 10px; font-weight: 900; }
.profile-history-entry .profile-history-detail { margin-top: 3px; color: #969185; font-size: 9px; line-height: 1.45; }
.profile-history-entry .profile-history-amount { color: #f4d276; font: 900 10px monospace; white-space: nowrap; }

.phone-app-loading {
    position: absolute;
    z-index: 25;
    inset: 48px 0 32px;
    display: grid;
    place-items: center;
    color: #f5d477;
    background: rgba(5, 7, 9, .88);
    backdrop-filter: blur(7px);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .5px;
}
.phone-app-loading.hidden { display: none; }
.phone-app-loading::before { content: ''; width: 22px; height: 22px; position: absolute; top: calc(50% - 25px); border: 2px solid rgba(245,212,119,.24); border-top-color: #f5d477; border-radius: 50%; animation: phoneLoadingSpin .7s linear infinite; }
@keyframes phoneLoadingSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    #phoneBackdrop.phone-open, #phoneBackdrop.phone-closing,
    #phoneBackdrop.phone-open > .iphone-frame, #phoneBackdrop.phone-closing > .iphone-frame,
    #phoneBackdrop.phone-open .phone-close-button, .phone-app-loading::before { animation-duration: .01ms !important; }
}

#wardrobeModal > div,
#garageModal > div,
#policeCatchModal > div {
    border-radius: 24px;
    box-shadow: var(--shadow-panel), var(--shadow-gold-glow);
}

#taiXiuCasinoModal.flex > div,
#wardrobeModal.flex > div,
#garageModal.flex > div,
#policeCatchModal.flex > div {
    animation: panelEnter 280ms var(--motion-smooth) both;
}

#liveChatSidebar:not(.hidden) {
    animation: panelEnter 220ms var(--motion-smooth) both;
}

@keyframes panelEnter {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hiệu ứng chữ bay lên (Dùng cho tiền tệ) */
@keyframes floatUpFade {
    0% { transform: translate(-50%, 0) scale(0.85); opacity: 0; }
    25% { transform: translate(-50%, -20px) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%, -75px) scale(1); opacity: 0; }
}
.float-text { 
    animation: floatUpFade 1.2s ease-out forwards; 
    pointer-events: none; 
    position: absolute; 
    left: 50%; 
    z-index: 100; 
    font-weight: 900; 
    text-shadow: 0 3px 12px rgba(0,0,0,0.9); 
}

@keyframes siren {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}