/* CSS Inti Chatbot */
#kaitou-chat-button,#kaitou-chat-window,#kaitou-chat-header,#kaitou-chat-input-area,#kaitou-toast-notification{font-family:'Arial',sans-serif}#kaitou-chat-button{position:fixed;bottom:65px;right:25px;background-color:#ff4f4f;color:#fff;width:60px;height:60px;border-radius:50%;border:none;box-shadow:0 4px 10px rgba(0,0,0,.2),0 0 15px rgba(255,79,79,.5);font-size:28px;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:9998;transition:transform .3s ease,box-shadow .3s ease;animation:pulse-red 2s infinite}@keyframes pulse-red{0%{box-shadow:0 4px 10px rgba(0,0,0,.2),0 0 15px rgba(255,79,79,.5)}50%{box-shadow:0 4px 15px rgba(0,0,0,.3),0 0 25px rgba(255,79,79,1)}100%{box-shadow:0 4px 10px rgba(0,0,0,.2),0 0 15px rgba(255,79,79,.5)}}#kaitou-chat-button:hover{transform:scale(1.15) rotate(15deg);box-shadow:0 6px 20px rgba(0,0,0,.4),0 0 30px rgba(255,100,100,1)}#kaitou-chat-window{position:fixed;bottom:100px;right:25px;width:350px;max-width:90%;height:500px;background:#fff;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden;z-index:9999;transform-origin:bottom right;transform:scale(0);opacity:0;visibility:hidden;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s ease,visibility .3s,background-color .3s ease,color .3s ease}#kaitou-chat-window:fullscreen{width:100vw;height:100vh;max-width:100%;border-radius:0}#kaitou-chat-window.visible{transform:scale(1);opacity:1;visibility:visible}#kaitou-chat-window.shake{animation:shake-window .5s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake-window{10%,90%{transform:scale(1) translate3d(-1px,0,0)}20%,80%{transform:scale(1) translate3d(2px,0,0)}30%,50%,70%{transform:scale(1) translate3d(-4px,0,0)}40%,60%{transform:scale(1) translate3d(4px,0,0)}}#kaitou-chat-header{background:#333;color:#fff;padding:15px;font-weight:700;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden;flex-shrink:0;transition:background-color .3s ease,color .3s ease}#kaitou-chat-header::after{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,79,79,.8),transparent);animation:scan-animation 3s linear infinite}@keyframes scan-animation{0%{transform:translateY(-10px)}100%{transform:translateY(60px)}}#kaitou-header-controls{display:flex;align-items:center;gap:10px}#kaitou-header-controls .header-btn{cursor:pointer;font-size:20px;z-index:1;user-select:none}
#kaitou-coin-balance { display: flex; align-items: center; gap: 5px; font-size: 16px; font-weight: bold; user-select: none; cursor:pointer; }
#kaitou-chat-body-container{flex-grow:1;position:relative;overflow:hidden}
#kaitou-chat-body-container::before {content:'';position:absolute;top:0;left:0;width:100%;height:40%;background:linear-gradient(to bottom,rgba(0,0,0,0.3),transparent);z-index:5;pointer-events:none;}
#kaitou-3d-viewer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;--poster-color:transparent;background-color:#f0f0f0; transition: all .3s ease;}
#kaitou-chat-messages {position:absolute;bottom:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;}
#kaitou-chat-scroll-area {width:100%;max-height:50%;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:12px;pointer-events:auto;box-sizing:border-box;}
.chat-message{padding:10px 15px;border-radius:20px;max-width:80%;line-height:1.4;position:relative;z-index:11;flex-shrink:0}.user-message{background-color:#0072C6;color:#fff;align-self:flex-end;border-bottom-right-radius:5px;margin-right:5px}.bot-message{background-color:rgba(240,240,240,.85);color:#333;align-self:flex-start;border-bottom-left-radius:5px; transition: background-color .3s ease,color .3s ease;}.bot-message .typing-cursor{display:inline-block;width:8px;height:1.2em;background-color:#ff4f4f;margin-left:4px;animation:blink-cursor .7s infinite}@keyframes blink-cursor{0%,100%{opacity:1}50%{opacity:0}}#kaitou-chat-input-area{display:flex;flex-direction:column;border-top:1px solid #f0f0f0;padding:10px;flex-shrink:0;background:#fff;z-index:12; transition: background-color .3s ease, border-top-color .3s ease;}
#kaitou-media-indicator {display: none;align-items: center;justify-content: space-between;padding: 8px 12px;margin-bottom: 8px;background-color: #e9f5ff;border: 1px solid #b3d7ff;border-radius: 20px;font-size: 13px;color: #005a9e; transition: background-color .3s ease,color .3s ease, border-color .3s ease;}
#kaitou-media-indicator-text {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#kaitou-remove-media-btn {background: none;border: none;font-size: 20px;color: #005a9e;cursor: pointer;line-height: 1;margin-left: 10px;padding: 0 4px;}
#kaitou-input-wrapper {display: flex;width: 100%;align-items: center;}
#kaitou-chat-input{flex-grow:1;border:none;padding:10px;border-radius:20px;background:#f0f0f0;outline:none; transition: background-color .3s ease,color .3s ease;}#kaitou-send-btn{background:#ff4f4f;color:#fff;border:none;padding:0 15px;margin-left:10px;border-radius:20px;cursor:pointer;font-weight:700;transition:transform .1s ease}#kaitou-send-btn:active{transform:scale(.95)}#kaitou-toast-notification{position:fixed;bottom:100px;right:25px;background:rgba(30,30,30,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);border-left:4px solid #ff4f4f;color:#fff;padding:12px 18px;border-radius:15px;box-shadow:0 10px 25px rgba(0,0,0,0.3);z-index:10000;display:flex;align-items:center;gap:12px;transform:translateY(20px) scale(0.95);opacity:0;visibility:hidden;transition:all .4s cubic-bezier(.175,.885,.32,1.275);cursor:pointer;font-family:sans-serif}#kaitou-toast-notification:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 15px 30px rgba(0,0,0,0.5)}#kaitou-toast-notification.visible{transform:translateY(0) scale(1);opacity:1;visibility:visible;animation:digital-glitch 1.5s 1}@keyframes digital-glitch{0%,100%{transform:translateY(0)}10%{transform:translate(-2px,2px)}20%{transform:translate(2px,-2px)}30%{transform:translate(-2px,-2px);text-shadow:-1px 0 red,1px 0 cyan}40%{transform:translate(2px,2px);text-shadow:none}80%{transform:translateY(0)}85%{transform:translateX(5px)}90%{transform:translateX(-5px)}95%{transform:translateX(2px)}}#kaitou-toast-text strong{color:#ff4f4f;font-weight:800}#kaitou-toast-close{background:rgba(255,255,255,0.1);border:none;color:#ddd;width:24px;height:24px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:18px;line-height:1;cursor:pointer;transition:all .2s}#kaitou-toast-close:hover{background:#ff4f4f;color:#fff;transform:rotate(90deg)}.video-container-base{position:relative;width:200px;background-color:#000;border-radius:10px;overflow:hidden;border:2px solid #ff4f4f;cursor:pointer}
.user-message .video-container-base{margin-bottom:10px}
.video-thumbnail-img{display:block;width:100%;height:auto}
.video-play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:48px;color:rgba(255,255,255,.8);background-color:rgba(0,0,0,.4);border-radius:50%;width:60px;height:60px;display:flex;justify-content:center;align-items:center;pointer-events:none;transition:transform .2s ease}
.video-container-base:hover .video-play-icon{transform:translate(-50%,-50%) scale(1.1)}
.upload-progress-container{height:10px;width:100%;background-color:rgba(255,255,255,.3);border-radius:5px;margin-top:8px;overflow:hidden}
.upload-progress-bar{width:0;height:100%;background-color:#4caf50;transition:width .2s linear}
.kaitou-dark-mode #kaitou-chat-window { background-color: #1E1E1E; }
.kaitou-dark-mode #kaitou-chat-header { background-color: #111; color: #f0f0f0; }
.kaitou-dark-mode #kaitou-3d-viewer { background-color: #2a2a2a; }
.kaitou-dark-mode .bot-message { background-color: rgba(60, 60, 60, 0.85); color: #e0e0e0; }
.kaitou-dark-mode #kaitou-chat-input-area { background-color: #1E1E1E; border-top-color: #333; }
.kaitou-dark-mode #kaitou-chat-input { background-color: #333; color: #e0e0e0; }
.kaitou-dark-mode #kaitou-chat-input::placeholder { color: #888; }
.kaitou-dark-mode #kaitou-media-indicator { background-color: #2c3e50; color: #bdc3c7; border-color: #34495e; }
.kaitou-dark-mode #kaitou-remove-media-btn { color: #bdc3c7; }
#kaitou-animation-controls, #kaitou-mission-panel { position: absolute; top: 55px; left: 0; width: 100%; background-color: rgba(255, 255, 255, 0.98); z-index: 17; box-sizing: border-box; border-bottom: 1px solid #e0e0e0; box-shadow: 0 4px 6px rgba(0,0,0,0.05); transform: translateY(-20px); opacity: 0; visibility: hidden; transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s; max-height: 180px; overflow-y: auto; }
#kaitou-animation-controls.visible, #kaitou-mission-panel.visible { transform: translateY(0); opacity: 1; visibility: visible; }
#kaitou-animation-controls { padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#kaitou-animation-controls button { background-color: #f0f0f0; border: 1px solid #ddd; color: #333; padding: 6px 12px; border-radius: 15px; cursor: pointer; font-size: 12px; transition: background-color 0.2s ease, transform 0.1s ease; }
#kaitou-animation-controls button:hover { background-color: #e0e0e0; }
#kaitou-animation-controls button:active { transform: scale(0.95); }
.kaitou-dark-mode #kaitou-animation-controls { background-color: rgba(40, 40, 40, 0.98); border-bottom-color: #333; }
.kaitou-dark-mode #kaitou-animation-controls button { background-color: #3a3a3a; border-color: #555; color: #e0e0e0; }
.kaitou-dark-mode #kaitou-animation-controls button:hover { background-color: #4f4f4f; }
#kaitou-mission-panel { padding: 15px; display: flex; flex-direction: column; gap: 10px; }
#mission-panel-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px; }
#mission-header-left { display: flex; flex-direction: column; align-items: flex-start; }
#mission-panel-title { font-weight: bold; font-size: 14px; color: #333; }
#mission-reset-countdown { font-size: 11px; color: #777; margin-top: 2px; }
#streak-counter { font-size: 14px; font-weight: bold; color: #ff4f4f; }
#mission-list { list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#mission-list li { font-size: 13px; color: #555; transition: color 0.3s ease, text-decoration 0.3s ease; }
#mission-list li.completed { color: #888; text-decoration: line-through; }
#mission-list li::before { content: '-'; margin-right: 10px; font-weight: bold; color: #ff4f4f; transition: content 0.3s ease; }
#mission-list li.completed::before { content: '*'; color: #4caf50; }
.kaitou-dark-mode #kaitou-mission-panel { background-color: rgba(40, 40, 40, 0.98); border-bottom-color: #333; }
.kaitou-dark-mode #mission-panel-title { color: #e0e0e0; }
.kaitou-dark-mode #mission-reset-countdown { color: #aaa; }
.kaitou-dark-mode #mission-list li { color: #bbb; }
.kaitou-dark-mode #mission-list li.completed { color: #777; }
#kaitou-hub-popup { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 20; display: none; justify-content: center; align-items: center; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
#kaitou-hub-box { background: #fff; padding: 0; border-radius: 15px; width: 90%; max-width: 320px; box-shadow: 0 5px 25px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; }
.hub-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-bottom: 1px solid #eee; }
.hub-header h3 { margin: 0; font-size: 18px; }
.close-hub-btn { font-size: 28px; font-weight: bold; cursor: pointer; line-height: 1; color: #888; }
.hub-tabs { display: flex; background-color: #f9f9f9; }
.hub-tab-btn { flex: 1; padding: 12px 10px; border: none; background: transparent; cursor: pointer; font-weight: bold; color: #888; border-bottom: 3px solid transparent; transition: all 0.2s; }
.hub-tab-btn.active { color: #FF4F4F; border-bottom-color: #FF4F4F; }
.hub-content-wrapper { padding: 15px; max-height: 300px; overflow-y: auto; }
.hub-content { display: none; }
.hub-content.active { display: block; }
#kaitou-shop-list, #history-list { list-style: none; padding: 0; margin: 0; }
#kaitou-shop-list li, #history-list li { display: flex; align-items: center; padding: 15px 10px; border-bottom: 1px solid #f0f0f0; }
#kaitou-shop-list li:last-child, #history-list li:last-child { border-bottom: none; }
.shop-item-icon { font-size: 24px; margin-right: 15px; }
.item-details { flex-grow: 1; }
.item-name { display: block; font-weight: bold; }
.item-price, .item-timestamp { display: block; font-size: 13px; color: #666; }
.item-code { font-family: monospace; background: #eee; padding: 2px 6px; border-radius: 4px; user-select: all; }
.redeem-btn, .copy-btn { background: #FF4F4F; color: white; padding: 8px 15px; border: none; border-radius: 20px; cursor: pointer; font-weight: bold; transition: all 0.2s; white-space: nowrap; }
.redeem-btn:hover:not(:disabled), .copy-btn:hover { background-color: #333; }
.redeem-btn:disabled { background-color: #ccc; cursor: not-allowed; }
#no-history-msg { text-align: center; padding: 20px; color: #888; }
.kaitou-dark-mode #kaitou-hub-box { background: #2c3e50; }
.kaitou-dark-mode .hub-header { border-bottom-color: #34495e; color: #ecf0f1; }
.kaitou-dark-mode .hub-tabs { background-color: #21303e; }
.kaitou-dark-mode .hub-tab-btn { color: #bdc3c7; }
.kaitou-dark-mode .hub-tab-btn.active { color: #ff8a80; border-bottom-color: #ff8a80; }
.kaitou-dark-mode #kaitou-shop-list li, .kaitou-dark-mode #history-list li { border-bottom-color: #34495e; }
.kaitou-dark-mode .item-name { color: #fff; }
.kaitou-dark-mode .item-price, .kaitou-dark-mode .item-timestamp { color: #bdc3c7; }
.kaitou-dark-mode .item-code { background: #34495e; color: #f1c40f; }
.kaitou-dark-mode #no-history-msg { color: #95a5a6; }
#kaitou-mission-map-container { position: absolute; top: 60px; right: 10px; width: 120px; height: 120px; border: 2px solid #ff4f4f; border-radius: 10px; background-color: #f0f0f0; background-image: url('https://files.catbox.moe/7zs1jh.jpg'); background-size: cover; background-position: center; box-shadow: 0 2px 10px rgba(0,0,0,0.3); z-index: 14; cursor: pointer; overflow: hidden; display: none; }
#kaitou-mission-map-container.visible { display: block; animation: zoomIn 0.3s ease-out; }
@keyframes zoomIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.monster-dot { position: absolute; width: 12px; height: 12px; background-color: red; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 8px rgba(255, 0, 0, 0.8); animation: pulse-dot 1.5s infinite; cursor: pointer; transition: transform 0.2s ease; }
.monster-dot:hover { transform: scale(1.3); }
@keyframes pulse-dot { 0% { box-shadow: 0 0 8px rgba(255, 0, 0, 0.8); } 50% { box-shadow: 0 0 14px rgba(255, 0, 0, 1); } 100% { box-shadow: 0 0 8px rgba(255, 0, 0, 0.8); } }
#mission-map-alert { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; background-color: #ff4f4f; color: white; border-radius: 50%; display: none; justify-content: center; align-items: center; font-size: 14px; font-weight: bold; animation: shake-alert 3s infinite; }
#mission-map-alert.visible { display: flex; }
@keyframes shake-alert { 0%, 100% { transform: rotate(0); } 10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg); } 20%, 40%, 60%, 80% { transform: rotate(10deg); } }
#kaitou-battle-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 50; display: none; justify-content: center; align-items: center; color: white; }
#battle-box.shake-hard { animation: shake-hard-anim 0.4s 1; }
@keyframes shake-hard-anim { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(3px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-5px, 0, 0); } 40%, 60% { transform: translate3d(5px, 0, 0); } }
#battle-monster-img.flash-red { animation: flash-red-anim 0.3s 1; }
@keyframes flash-red-anim { 0%, 100% { filter: none; } 50% { filter: brightness(1.5) drop-shadow(0 0 10px red); } }
#kaitou-battle-viewer { width: 100px; height: 100px; --poster-color: transparent; }
#battle-box { padding: 15px; background: #2c3e50; border-radius: 15px; border: 3px solid #ff4f4f; box-shadow: 0 0 25px rgba(255, 79, 79, 0.5); text-align: center; width: 90%; max-width: 320px; position: relative; }
#battle-arena { display: flex; justify-content: space-between; align-items: flex-end; height: 120px; }
#player-side, #enemy-side { width: 48%; display: flex; flex-direction: column; align-items: center; }
#battle-monster-img { width: 100px; height: 100px; margin-bottom: 0; }
.battle-name { font-weight: bold; margin-bottom: 5px; text-shadow: 1px 1px 2px #000; }
.hp-bar-container { width: 100%; height: 15px; background-color: #1a2531; border: 2px solid #fff; border-radius: 10px; overflow: hidden; }
.hp-bar { height: 100%; transition: width 0.3s ease-out; }
#player-hp-bar { background: linear-gradient(to right, #2ecc71, #28a745); }
#enemy-hp-bar { background: linear-gradient(to right, #e74c3c, #c0392b); }
.hp-text { font-size: 13px; font-weight: bold; margin-top: 3px; }
#battle-log-area { height: 60px; background: rgba(0, 0, 0, 0.3); border-radius: 5px; padding: 8px; margin: 10px 0; overflow-y: auto; text-align: left; font-size: 12px; border: 1px solid rgba(255,255,255,0.2); }
#battle-log-area p { margin: 0 0 4px; padding: 0; color: #fff; font-family: monospace; }
#battle-ui-bottom { margin-top: 10px; }
#special-meter-container { width: 100%; height: 20px; background-color: #1a2531; border: 2px solid #f1c40f; border-radius: 10px; margin-bottom: 15px; position: relative; overflow: hidden; }
#special-meter-bar { width: 0%; height: 100%; background: linear-gradient(to right, #f1c40f, #f39c12); transition: width 0.3s ease; }
#special-meter-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 12px; color: white; text-shadow: 1px 1px 2px #000; }
#battle-action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.action-btn { background-color: #3498db; color: white; border: 2px solid #2980b9; padding: 10px; font-size: 14px; font-weight: bold; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; }
.action-btn:hover:not(:disabled) { background-color: #2980b9; transform: translateY(-2px); }
.action-btn:disabled { background-color: #95a5a6; border-color: #7f8c8d; cursor: not-allowed; }
#special-move-btn { grid-column: 1 / -1; background-color: #e67e22; border-color: #d35400; }
#special-move-btn:disabled { background-color: #95a5a6; border-color: #7f8c8d; }
#battle-result-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: none; justify-content: center; align-items: center; z-index: 55; border-radius: 15px; }
#battle-result-text { font-size: 48px; font-weight: bold; text-transform: uppercase; transform: scale(0); animation: zoom-in-result 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; }
#battle-result-text.win-text { color: #f1c40f; text-shadow: 0 0 15px #f1c40f, 0 0 5px #fff; }
#battle-result-text.lose-text { color: #c0392b; text-shadow: 0 0 15px #c0392b, 0 0 5px #000; }
@keyframes zoom-in-result { to { transform: scale(1); } }
#kaitou-username-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 10001; display: none; justify-content: center; align-items: center; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
#kaitou-username-box { background: #fff; padding: 25px; border-radius: 15px; width: 90%; max-width: 300px; box-shadow: 0 5px 25px rgba(0,0,0,0.2); text-align: center; font-family: 'Arial', sans-serif; }
#kaitou-username-box h3 { margin-top: 0; margin-bottom: 15px; }
#kaitou-username-box p { font-size: 14px; color: #666; margin-bottom: 20px; line-height: 1.4; }
#kaitou-username-input { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #ddd; font-size: 16px; margin-bottom: 20px; box-sizing: border-box; text-align: center; }
#kaitou-save-username-btn { background: #ff4f4f; color: white; padding: 12px 20px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; width: 100%; font-size: 16px; transition: background-color 0.2s; }
#kaitou-save-username-btn:hover { background-color: #e04343; }
.kaitou-dark-mode #kaitou-username-box { background: #2c3e50; color: #ecf0f1; }
.kaitou-dark-mode #kaitou-username-box p { color: #bdc3c7; }
.kaitou-dark-mode #kaitou-username-input { background-color: #34495e; color: #ecf0f1; border-color: #4a6278; }
.kaitou-dark-mode #kaitou-username-input::placeholder { color: #8a9ba8; }

/* === CSS UNTUK TAMPILAN PERINGKAT BARU & POPUP LEADERBOARD === */
#kaitou-rank-display {
    position: absolute;
    top: 60px; /* Di bawah header */
    left: 15px;
    background: linear-gradient(45deg, #f1c40f, #f39c12);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    z-index: 16;
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0.9);
    visibility: hidden;
}
#kaitou-rank-display.visible {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
}
#kaitou-rank-display:hover { transform: scale(1.1); }
/* GANTI BLOK CSS LAMA ANDA DENGAN YANG INI */
#kaitou-leaderboard-popup {
    position: absolute; /* Diubah dari fixed ke absolute */
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 10002;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.leaderboard-box {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    width: 95%; /* Dibuat sedikit lebih lebar untuk padding */
    max-width: 340px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    position: relative; /* Dihapus: absolute, top, left, transform */
    max-height: 450px; /* Diubah dari 80vh agar pas di jendela 500px */
    display: flex;
    flex-direction: column;
}
.leaderboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.leaderboard-header h3 { margin: 0; font-size: 20px; color: #333; }
.close-leaderboard-btn { font-size: 28px; font-weight: bold; cursor: pointer; line-height: 1; color: #aaa; }
.leaderboard-type-selector { display: flex; gap: 10px; margin-bottom: 15px; }
.leaderboard-type-btn { flex: 1; padding: 8px; border: 1px solid #ddd; background-color: #f0f0f0; border-radius: 8px; cursor: pointer; font-weight: bold; transition: all 0.2s; }
.leaderboard-type-btn.active { background-color: #FF4F4F; color: white; border-color: #FF4F4F; }
#leaderboard-list-container { overflow-y: auto; padding-right: 5px; }
#full-leaderboard-list { padding: 0; margin: 0; list-style: none; counter-reset: leaderboard-counter; }
#full-leaderboard-list li { display: flex; align-items: center; padding: 12px 5px; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
#full-leaderboard-list li:last-child { border-bottom: none; }
#full-leaderboard-list li::before { content: counter(leaderboard-counter); counter-increment: leaderboard-counter; font-weight: bold; font-size: 16px; min-width: 30px; text-align: center; color: #FF4F4F; }
.leaderboard-name { flex-grow: 1; font-weight: bold; padding-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leaderboard-score { font-weight: bold; color: #333; }
.leaderboard-score .score-icon { margin-left: 5px; }
#leaderboard-message { text-align: center; color: #888; padding: 20px; }
.kaitou-dark-mode .leaderboard-box { background: #2c3e50; }
.kaitou-dark-mode .leaderboard-header h3 { color: #ecf0f1; }
.kaitou-dark-mode .close-leaderboard-btn { color: #7f8c8d; }
.kaitou-dark-mode .leaderboard-type-btn { background-color: #3a3a3a; border-color: #555; color: #e0e0e0; }
.kaitou-dark-mode .leaderboard-type-btn.active { background-color: #ff8a80; color: #2c3e50; border-color: #ff8a80; }
.kaitou-dark-mode #full-leaderboard-list li { border-bottom-color: #34495e; }
.kaitou-dark-mode .leaderboard-name, .kaitou-dark-mode .leaderboard-score { color: #fff; }
.kaitou-dark-mode #leaderboard-message { color: #95a5a6; }
/* TAMBAHKAN BLOK CSS BARU INI DI AKHIR */
#kaitou-chat-window:fullscreen #kaitou-leaderboard-popup {
    position: fixed; /* Kembalikan ke fixed saat fullscreen */
}

#kaitou-chat-window:fullscreen .leaderboard-box {
    max-height: 80vh; /* Kembalikan ke tinggi semula saat fullscreen */
}
/* GAMEPLAY BRANKAS (SAFE CRACKING) */
.yellow-dot {
    position: absolute;
    width: 12px; height: 12px;
    background-color: #f1c40f; /* Kuning */
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 8px rgba(241, 196, 15, 0.8);
    animation: pulse-yellow 1.5s infinite;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.yellow-dot:hover { transform: scale(1.3); }
@keyframes pulse-yellow {
    0% { box-shadow: 0 0 8px rgba(241, 196, 15, 0.8); }
    50% { box-shadow: 0 0 14px rgba(241, 196, 15, 1); }
    100% { box-shadow: 0 0 8px rgba(241, 196, 15, 0.8); }
}
.blue-dot {
    position: absolute;
    width: 12px; height: 12px;
    background-color: #3498db;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.8);
    animation: pulse-blue 1.5s infinite;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.blue-dot:hover { transform: scale(1.3); }
@keyframes pulse-blue {
    0% { box-shadow: 0 0 8px rgba(52, 152, 219, 0.8); }
    50% { box-shadow: 0 0 14px rgba(52, 152, 219, 1); }
    100% { box-shadow: 0 0 8px rgba(52, 152, 219, 0.8); }
}

#kaitou-safe-overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 60;
    display: none; /* Hidden by default */
    justify-content: center; align-items: center;
    backdrop-filter: blur(5px);
}

#safe-game-box {
    width: 280px;
    padding: 20px;
    background: linear-gradient(145deg, #2c3e50, #000);
    border: 4px solid #95a5a6;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.safe-header {
    color: #fff; font-weight: bold; font-size: 18px; margin-bottom: 15px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); letter-spacing: 2px;
}

.safe-indicators {
    display: flex; justify-content: center; gap: 10px; margin-bottom: 20px;
}

.safe-light {
    width: 15px; height: 15px;
    background-color: #333;
    border-radius: 50%;
    border: 2px solid #555;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
    transition: all 0.3s;
}
.safe-light.unlocked {
    background-color: #2ecc71;
    box-shadow: 0 0 10px #2ecc71;
    border-color: #fff;
}

#safe-dial-container {
    width: 180px; height: 180px;
    margin: 0 auto 20px;
    position: relative;
    background: #444;
    border-radius: 50%;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
    display: flex; justify-content: center; align-items: center;
}

#safe-dial {
    width: 140px; height: 140px;
    background: radial-gradient(circle, #555, #222); /* Warna lebih gelap */
    border-radius: 50%;
    border: 4px solid #7f8c8d; /* Border abu-abu */
    position: relative;
    cursor: grab;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    transition: border-color 0.2s; /* Animasi transisi border */
}


#safe-dial.active-glow {
    border-color: #f1c40f !important;
    box-shadow: 0 0 20px #f1c40f !important;
}

.dial-knob {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 50px; height: 50px; /* Diperbesar sedikit */
    background: #111;
    border-radius: 50%;
    border: 2px solid #666;
    z-index: 2;
    transition: background-color 0.1s; /* Transisi warna instan */
}

.dial-marker {
    position: absolute; top: 5px; left: 50%;
    transform: translateX(-50%);
    width: 6px; height: 20px;
    background: #e74c3c;
    border-radius: 3px;
}

.safe-hint {
    color: #bdc3c7; font-size: 12px; margin-bottom: 15px; font-style: italic;
}
.volume-instruction {
    background-color: rgba(231, 76, 60, 0.2);
    border: 1px solid #e74c3c;
    color: #e74c3c;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    animation: pulse-opacity 2s infinite;
}

@keyframes pulse-opacity {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
#close-safe-btn {
    background: transparent; border: 1px solid #7f8c8d;
    color: #bdc3c7; padding: 5px 15px; border-radius: 15px;
    cursor: pointer; transition: all 0.2s;
}
#close-safe-btn:hover { background: #c0392b; border-color: #c0392b; color: white; }
/* =========================================
   CYBER RUNNER 3D GAME (SUBWAY SURFERS STYLE)
   ========================================= */
#kaitou-runner-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #020308;
    z-index: 70; display: none; overflow: hidden;
    user-select: none; -webkit-user-select: none;
}

#runner-game-container {
    position: relative; width: 100%; height: 100%;
    overflow: hidden;
    touch-action: none;
}

/* Layer Flash Merah (Hit Effect) */
#runner-flash-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(255,23,68,0.35) 0%, rgba(255,0,0,0.85) 100%);
    opacity: 0; pointer-events: none; z-index: 85;
    transition: opacity 0.12s ease;
}

/* Top HUD Cyberpunk */
#runner-ui {
    position: absolute; top: 12px; left: 12px; right: 12px;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 88; pointer-events: none;
}
.runner-hud-left, .runner-hud-right {
    display: flex; align-items: center; gap: 8px;
}
.runner-score {
    background: rgba(8, 13, 26, 0.82);
    border: 1.5px solid #ffd700;
    color: #ffd700;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 900; font-size: 13px;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
    backdrop-filter: blur(6px);
}
.runner-dist {
    background: rgba(8, 13, 26, 0.82);
    border: 1.5px solid #00eaff;
    color: #00eaff;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: 900; font-size: 12px;
    box-shadow: 0 0 10px rgba(0, 234, 255, 0.3);
}
.runner-lives {
    background: rgba(8, 13, 26, 0.82);
    border: 1.5px solid rgba(255, 23, 68, 0.65);
    color: #ff1744;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 14px; letter-spacing: 2px;
    text-shadow: 0 0 8px #ff1744;
}
#runner-close-btn {
    pointer-events: auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.35);
    background: rgba(15, 23, 42, 0.85);
    color: #fff; font-size: 18px; font-weight: bold;
    cursor: pointer; display: flex; justify-content: center; align-items: center;
    transition: all 0.2s;
}
#runner-close-btn:hover {
    background: #ff1744; border-color: #ff1744;
}

/* Callout Banner (JUMP / SLIDE / MAGNET / HIT) */
#runner-callout-banner {
    position: absolute; top: 56px; left: 50%;
    transform: translateX(-50%) scale(0.85);
    background: rgba(6, 10, 22, 0.88);
    border: 1.5px solid #00eaff;
    color: #00eaff;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 12px; font-weight: 900;
    letter-spacing: 0.8px; white-space: nowrap;
    z-index: 87; pointer-events: none;
    opacity: 0;
    transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#runner-callout-banner.visible {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Viewport 3D Penuh */
#runner-track {
    position: absolute; inset: 0; width: 100%; height: 100%;
    background: #020308;
    overflow: hidden;
}
#runner-3d-viewport,
.runner-player-wrapper {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    z-index: 3 !important;
    pointer-events: none;
    background: transparent !important;
}
#runner-3d-viewport canvas,
.runner-player-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}
.track-line, #runner-objects-layer {
    display: none !important;
}

/* Kontrol D-Pad Taktis Bawah (Kiri, Lompat, Slide, Kanan) */
#runner-controls {
    position: absolute !important;
    bottom: 12px; left: 10px; right: 10px;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    z-index: 86;
}
.runner-dpad-btn {
    padding: 10px 4px;
    border-radius: 12px;
    border: 1.5px solid rgba(0, 234, 255, 0.55);
    background: rgba(8, 14, 28, 0.78);
    color: #fff;
    font-size: 11px; font-weight: 900;
    letter-spacing: 0.4px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    transition: transform 0.1s, background 0.15s;
    user-select: none;
}
.runner-dpad-btn.runner-btn-jump {
    border-color: rgba(0, 230, 118, 0.65);
    color: #69f0ae;
}
.runner-dpad-btn.runner-btn-slide {
    border-color: rgba(255, 145, 0, 0.65);
    color: #ffd180;
}
.runner-dpad-btn:active {
    transform: scale(0.92);
    background: rgba(0, 234, 255, 0.28);
}

/* UI Briefing Overlay */
#runner-msg-overlay {
    position: absolute; inset: 0; width: 100%; height: 100%;
    background: rgba(2, 5, 15, 0.84);
    backdrop-filter: blur(8px);
    z-index: 90;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 16px;
    color: white; text-align: center;
}
.runner-briefing-card {
    background: linear-gradient(155deg, rgba(13, 22, 42, 0.96), rgba(6, 10, 22, 0.98));
    border: 1.5px solid rgba(0, 234, 255, 0.45);
    border-radius: 18px;
    padding: 18px 16px;
    width: 100%; max-width: 310px;
    box-shadow: 0 0 35px rgba(0, 234, 255, 0.22);
}
.runner-briefing-badge {
    display: inline-block;
    background: rgba(0, 234, 255, 0.14);
    border: 1px solid #00eaff;
    color: #00eaff;
    font-size: 9px; font-weight: 900;
    padding: 3px 9px; border-radius: 12px;
    letter-spacing: 1px; margin-bottom: 8px;
}
#runner-msg-title {
    margin: 0 0 6px;
    font-size: 22px; font-weight: 900;
    color: #fff;
    text-shadow: 0 0 14px rgba(0, 234, 255, 0.6);
    letter-spacing: 1px;
}
#runner-msg-desc {
    margin: 0 0 12px;
    font-size: 12px; color: #b0bec5; line-height: 1.35;
}
.runner-guide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 14px;
    text-align: left;
}
.runner-guide-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 10px; color: #e2e8f0;
    display: flex; flex-direction: column; gap: 2px;
}
.runner-guide-item span {
    font-weight: 900; color: #00eaff; font-size: 11px;
}
#runner-start-btn {
    width: 100%;
    padding: 12px 24px;
    background: linear-gradient(135deg, #00eaff, #0088ff);
    color: #001020; border: none; font-weight: 900;
    font-size: 15px; border-radius: 50px; cursor: pointer;
    box-shadow: 0 0 22px rgba(0, 234, 255, 0.65);
    animation: pulse 1.2s infinite;
    text-transform: uppercase; letter-spacing: 0.8px;
}
/* === CSS BARU: SISTEM GARASI & SKIN === */

/* Grid tata letak kartu karakter */
#garage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Kolom */
    gap: 10px;
    padding-bottom: 10px;
}

/* Desain Kartu Karakter */
.char-card {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

/* Efek saat karakter sedang dipakai */
.char-card.active-char {
    border-color: #f1c40f;
    background: #fff9db;
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
}
.char-card.active-char::after {
    content: 'DIPAKAI';
    position: absolute; top: -8px; right: -8px;
    background: #f1c40f; color: #000;
    font-size: 10px; font-weight: bold;
    padding: 2px 6px; border-radius: 4px;
}

.char-icon { font-size: 30px; display: block; margin-bottom: 5px; }
.char-name {
    font-size: 13px; font-weight: bold; display: block; margin-bottom: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.char-action-btn {
    width: 100%; padding: 6px;
    border: none; border-radius: 5px;
    font-size: 12px; font-weight: bold; cursor: pointer;
}

/* Warna Tombol */
.btn-use { background: #3498db; color: white; }
.btn-buy { background: #2ecc71; color: white; }
.btn-locked { background: #95a5a6; color: white; cursor: not-allowed; }

/* Layar Loading saat Download Skin */
#skin-loading-overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 200; /* Pastikan paling atas */
    display: none; /* Hidden default */
    flex-direction: column;
    justify-content: center; align-items: center;
    color: #fff;
}

/* Animasi Putar Spinner */
.loading-spinner {
    width: 40px; height: 40px;
    border: 4px solid rgba(255,255,255,0.3);
    border-top: 4px solid #f1c40f;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Support Dark Mode */
.kaitou-dark-mode .char-card { background: #34495e; border-color: #2c3e50; }
.kaitou-dark-mode .char-name { color: #ecf0f1; }
.kaitou-dark-mode .char-card.active-char { background: #4a3b18; border-color: #f1c40f; }

/* Progress Bar Container */
.progress-wrapper {
    width: 80%;
    height: 8px;
    background-color: rgba(255,255,255,0.2);
    border-radius: 10px;
    margin: 10px 0;
    overflow: hidden;
    position: relative;
}

/* Isi Bar yang bergerak */
#skin-progress-bar {
    width: 0%;
    height: 100%;
    background-color: #f1c40f; /* Kuning Emas */
    transition: width 0.1s linear;
    box-shadow: 0 0 10px #f1c40f;
}

/* Teks Detail (MB dan %) */
#skin-progress-details {
    font-size: 12px;
    color: #ccc;
    font-family: monospace;
}

#skin-loading-title {
    font-weight: bold;
    margin-bottom: 5px;
    color: white;
}

/* === SHOWCASE MODE (VIEW MODEL) === */

/* Tombol Keluar (Default Sembunyi) */
#exit-view-mode-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(50px); /* Sembunyi di bawah */
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: 1px solid white;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Saat Mode Pameran Aktif */
.kaitou-showcase-active #exit-view-mode-btn {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Elemen yang harus DIS E B U N Y I K A N saat mode aktif */
.kaitou-showcase-active #kaitou-chat-messages,     /* Pesan Chat */
.kaitou-showcase-active #kaitou-chat-input-area,   /* Kolom Ketik */
.kaitou-showcase-active #kaitou-mission-map-container, /* Peta */
.kaitou-showcase-active #kaitou-rank-display,      /* Peringkat */
.kaitou-showcase-active #kaitou-chat-header::after /* Efek Scan Header */
{
    opacity: 0 !important;
    pointer-events: none !important; /* Agar tembus klik ke model */
    transition: opacity 0.3s ease;
}

/* Update CSS Showcase agar animasi bisa di-toggle */
.kaitou-showcase-active #kaitou-animation-controls {
    z-index: 101; /* Biar tetap di atas layer lain */
    /* Kita hapus opacity/visibility paksa, biar ikut logic class .visible biasa */
}

/* Background gradient chat juga kita hilangkan biar model jelas */
.kaitou-showcase-active #kaitou-chat-body-container::before {
    opacity: 0;
}
/* === FIX POSISI POP-UP ANGKA (NOTIFICATION BADGE) === */

/* 1. Pastikan tombol koin siap jadi sandaran badge */
#kaitou-coin-balance {
    position: relative !important; 
    overflow: visible !important; /* PENTING: Biar badge yg keluar kotak tidak kepotong */
    display: inline-flex !important; /* Biar ikon & teks sejajar */
    align-items: center;
}

/* 2. Desain Badge-nya */
.notification-badge {
    position: absolute;
    /* Atur koordinat ini untuk geser-geser posisi */
    top: -6px;    /* Semakin minus (-), semakin naik ke atas */
    right: -6px;  /* Semakin minus (-), semakin geser ke kanan */
    
    /* Ukuran Tetap (Biar Bulat Sempurna) */
    width: 18px;
    height: 18px;
    
    /* Warna & Border */
    background-color: #ff3b30; /* Merah menyala ala iPhone */
    color: white;
    border: 2px solid #333; /* Samakan dengan warna background Header biar seolah "terpotong" */
    border-radius: 50%; /* Wajib 50% biar bulat */
    
    /* Teks di tengah */
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Layering & Animasi */
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Efek Muncul Kenyal */
@keyframes pop-in {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* === UI UPGRADE 1: CUSTOM SCROLLBAR === */
#kaitou-chat-scroll-area::-webkit-scrollbar,
#kaitou-shop-list::-webkit-scrollbar,
#leaderboard-list-container::-webkit-scrollbar,
#garage-grid::-webkit-scrollbar {
    width: 6px;
}
#kaitou-chat-scroll-area::-webkit-scrollbar-track,
#kaitou-shop-list::-webkit-scrollbar-track {
    background: transparent;
}
#kaitou-chat-scroll-area::-webkit-scrollbar-thumb,
#kaitou-shop-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
}
#kaitou-chat-scroll-area::-webkit-scrollbar-thumb:hover {
    background: #ff4f4f; /* Merah saat dihover */
}

.kaitou-dark-mode #kaitou-chat-window {
    background: rgba(30, 30, 30, 0.9) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

/* === UI UPGRADE 3: BUBBLE CHAT DINAMIS === */
.chat-message {
    animation: messagePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transform-origin: bottom left;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.user-message { 
    transform-origin: bottom right; 
    background: linear-gradient(135deg, #0072C6, #005a9e) !important; /* Gradasi Biru */
}
.bot-message {
    background: #f1f3f5 !important;
}

@keyframes messagePop {
    0% { opacity: 0; transform: translateY(10px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* === UI UPGRADE 4: FLOATING INPUT AREA === */
#kaitou-chat-input-area {
    margin: 10px;
    margin-bottom: 15px; /* Jarak dari bawah */
    border-radius: 25px;
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

#kaitou-chat-input {
    background: transparent !important; /* Biar nyatu sama container */
}

/* Tombol Kirim Jadi Bulat */
#kaitou-send-btn {
    width: 35px; height: 35px;
    padding: 0;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    background: linear-gradient(135deg, #ff4f4f, #c0392b);
    box-shadow: 0 3px 10px rgba(255, 79, 79, 0.4);
    transition: transform 0.2s;
}
#kaitou-send-btn:hover {
    transform: scale(1.1) rotate(-10deg);
}
#kaitou-send-btn:active {
    transform: scale(0.9);
}

/* === UI UPGRADE 5: JUICY BUTTONS === */
/* Efek tekan khusus untuk tombol di dalam widget Kaitou (tidak bocor ke blog utama) */
#kaitou-chatbot-container button:active, #kaitou-toast-notification button:active, .header-btn:active, .char-card:active {
    transform: scale(0.95);
    transition: transform 0.1s;
}

/* Header Icons Hover */
.header-btn {
    transition: transform 0.2s, color 0.2s;
}
.header-btn:hover {
    transform: translateY(-2px);
    color: #ff4f4f; /* Nyala merah saat hover */
    text-shadow: 0 0 10px rgba(255, 79, 79, 0.5);
}

/* Tombol Buka Utama (Pojok Kanan Bawah) */
#kaitou-chat-button {
    background: linear-gradient(135deg, #ff4f4f, #ff2020); /* Gradasi Merah */
}
/* Efek ombak saat hover di tombol utama */
#kaitou-chat-button::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    border: 2px solid white;
    opacity: 0;
    animation: ripple 1.5s infinite;
}
@keyframes ripple {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* =======================================================
   FIX FINAL: DARK MODE & GLASS BUBBLES (TRANSPARAN)
   ======================================================= */

/* 1. BALON CHAT TRANSPARAN (OPTIMASI GPU ANTI-LAG) */
.chat-message {
    /* Gunakan contain: layout paint agar browser tidak merender ulang seluruh chat saat ada pesan baru */
    contain: layout paint;
    will-change: transform, opacity;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Style Bot (Putih Semi-Transparan Tanpa Blur Berat) */
.bot-message {
    background: rgba(255, 255, 255, 0.88) !important;
    color: #000 !important;
}

/* Style User (Biru Transparan) */
.user-message {
    background: linear-gradient(135deg, rgba(0, 114, 198, 0.92), rgba(0, 90, 158, 0.92)) !important;
    color: #fff !important;
    border: none;
}

/* 2. PERBAIKAN DARK MODE (Supaya tetap gelap & elegan) */
.kaitou-dark-mode .chat-message {
    border-color: rgba(255, 255, 255, 0.1);
}

.kaitou-dark-mode .bot-message {
    /* Hitam transparan untuk Dark Mode */
    background: rgba(40, 40, 40, 0.7) !important;
    color: #fff !important;
    text-shadow: 0 1px 2px #000; /* Shadow hitam biar teks putih jelas */
}

.kaitou-dark-mode #kaitou-chat-window {
    background: rgba(20, 20, 20, 0.85) !important; /* Window lebih gelap */
}

.kaitou-dark-mode #kaitou-chat-input-area {
    background: rgba(40, 40, 40, 0.8) !important;
    border-color: #555 !important;
}

.kaitou-dark-mode #kaitou-chat-input {
    color: #fff !important;
}
.kaitou-dark-mode #kaitou-chat-input::placeholder {
    color: #aaa;
}

/* 3. INPUT AREA TRANSPARAN (Biar kaki model kelihatan dikit) */
#kaitou-chat-input-area {
    background: rgba(248, 249, 250, 0.85) !important; /* Putih transparan */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* === UI TAB AKUN === */
.account-box {
    padding: 5px;
    text-align: center;
}
.account-box h4 {
    margin: 10px 0 5px;
    color: #333;
    font-size: 14px;
}
.account-desc {
    font-size: 11px;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.3;
}
.code-display-area, .code-input-area {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
}
.code-display-area input, .code-input-area input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: monospace;
    font-size: 11px;
    background: #f9f9f9;
}
#copy-recovery-btn { background: #2ecc71; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; }
#load-account-btn { background: #e67e22; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; }

#kaitou-chatbot-container hr { border: 0; border-top: 1px dashed #ccc; margin: 15px 0; }

.kaitou-dark-mode .account-box h4 { color: #fff; }
.kaitou-dark-mode .account-desc { color: #bbb; }
.kaitou-dark-mode input { background: #444; border-color: #555; color: #fff; }

/* === POPUP USERNAME V2 (LOAD SUPPORT) === */
#kaitou-username-box {
    padding: 20px;
    max-width: 320px; /* Lebarkan dikit */
}

/* Garis Pemisah "ATAU" */
.popup-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: #999;
    font-size: 11px;
    font-weight: bold;
}
.popup-separator::before, .popup-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #eee;
}
.popup-separator span {
    padding: 0 10px;
}

/* Bagian Load Bawah */
.startup-load-section p {
    font-size: 12px;
    margin-bottom: 8px;
    color: #555;
}
.startup-input-wrapper {
    display: flex;
    gap: 5px;
}
#startup-recovery-input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
    font-size: 12px;
}
#startup-load-btn {
    padding: 8px 15px;
    background: #3498db; /* Warna Biru beda dari tombol Simpan */
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    font-size: 12px;
}
#startup-load-btn:hover { background: #2980b9; }

/* Dark Mode Adjustment */
.kaitou-dark-mode .popup-separator { color: #555; }
.kaitou-dark-mode .popup-separator::before, .kaitou-dark-mode .popup-separator::after { border-color: #444; }
.kaitou-dark-mode #startup-recovery-input { background: #333; border-color: #444; color: #fff; }
.kaitou-dark-mode .startup-load-section p { color: #bbb; }
/* === UI BLASTER (SENJATA) === */
#kaitou-blaster-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 150;
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(5px);
}

#blaster-container {
    position: relative;
    width: 90%; max-width: 320px;
}

#blaster-img {
    width: 100%; display: block;
    user-select: none; pointer-events: none; /* Biar gambar gak sengaja keseret */
}

/* Kotak Transparan (Hitbox) */
.blaster-hitbox {
    position: absolute;
    cursor: pointer;
    border-radius: 20px;
    /* border: 2px solid rgba(255,255,255,0.5); /* Hapus/Komen baris ini nanti kalau posisi udah pas */
}

#btn-blaster-white { top: 40%; left: 30%; width: 15%; height: 10%; }
#btn-blaster-black { top: 40%; left: 65%; width: 15%; height: 10%; }
#btn-blaster-trigger { top: 54%; left: 62%; width: 15%; height: 10%; border-radius: 10px; }

/* Efek saat ditekan */
.blaster-hitbox:active { background: rgba(255,255,255,0.3); }

#close-blaster-btn {
    position: absolute; top: -40px; right: 0;
    background: #e74c3c; color: white; border: none;
    padding: 5px 15px; border-radius: 10px; font-weight: bold; cursor: pointer;
}

#blaster-combo-text {
    position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
    color: #00eaff; font-family: monospace; font-size: 16px; font-weight: bold;
    text-shadow: 0 0 10px #00eaff; letter-spacing: 2px;
}
/* === EFEK CAHAYA BLASTER (LED FX) === */

/* Animasi Denyut Putih (Standby Putih) */
.glow-white-active {
    animation: pulse-white 0.8s infinite alternate !important;
}
@keyframes pulse-white {
    0% { 
        box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.5); 
        background: rgba(255, 255, 255, 0.1); 
    }
    100% { 
        box-shadow: 0 0 40px 15px rgba(255, 255, 255, 1), inset 0 0 30px rgba(255, 255, 255, 0.8); 
        background: rgba(255, 255, 255, 0.3); 
    }
}

/* Animasi Denyut Merah (Standby Hitam/Mata Merah) */
.glow-red-active {
    animation: pulse-blaster-red 0.8s infinite alternate !important;
}
@keyframes pulse-blaster-red {
    0% { 
        box-shadow: 0 0 20px 5px rgba(255, 0, 0, 0.5), inset 0 0 15px rgba(255, 0, 0, 0.5); 
        background: rgba(255, 0, 0, 0.1); 
    }
    100% { 
        box-shadow: 0 0 40px 15px rgba(255, 0, 0, 1), inset 0 0 30px rgba(255, 0, 0, 0.8); 
        background: rgba(255, 0, 0, 0.3); 
    }
}

/* Efek Kilat Saat Nembak (Trigger Flash) */
.trigger-flash {
    animation: blast-flash 0.3s ease-out forwards;
}
@keyframes blast-flash {
    0% { background: rgba(255, 255, 0, 1); box-shadow: 0 0 50px 20px rgba(255, 255, 0, 1); }
    100% { background: transparent; box-shadow: none; }
}

/* Efek Senjata Bergetar Hebat (Saat Henshin) */
.weapon-shake {
    animation: weapon-shake-anim 0.1s infinite;
}
@keyframes weapon-shake-anim {
    0% { transform: translate(2px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(0px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(2px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(2px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}
/* === FIX TOMBOL BUKA WIDGET (BUBBLE CHAT) === */
#kaitou-chat-button {
    background: #ff4f4f !important; /* Paksa warna merah solid */
    background-color: #ff4f4f !important;
    opacity: 1 !important; /* Paksa tidak transparan */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3), 0 0 20px rgba(255,79,79,0.6) !important;
    z-index: 9998 !important;
}

/* Hapus efek ombak jika itu yang bikin error/nge-bug di HP */
#kaitou-chat-button::after {
    display: none !important; 
}
/* === EFEK TRANSISI MATERIALIZE (PREMIUM CYBER SCAN) === */

.materialize-wrapper {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 9999; pointer-events: none; overflow: hidden;
}

/* Tirai Gelap dengan tekstur Grid Cyber */
.mat-curtain {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #050a0f;
    /* Bikin motif kotak-kotak hologram */
    background-image: 
        linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: center bottom;
    
    transform: translateY(0);
    /* Durasi diperlama jadi 3 detik dengan kurva lambat di akhir */
    animation: curtain-rise 3s cubic-bezier(0.4, 0, 0.1, 1) forwards;
}

/* Area Scan di atas laser (Efek Kaca Film) */
.mat-scan-area {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 250px;
    background: linear-gradient(to top, var(--mc-alpha), transparent);
    z-index: 1;
}

/* INTI LASER (Garis Terang Benderang) */
.mat-laser-core {
    position: absolute; bottom: -2px; left: 0; width: 100%; height: 5px;
    background: #ffffff;
    /* Glow berlapis: Putih -> Warna -> Warna Luas */
    box-shadow: 
        0 0 10px 2px #fff,
        0 0 20px 5px var(--mc), 
        0 0 50px 20px var(--mc), 
        0 0 100px 40px var(--mc);
    z-index: 3;
}

/* KUBUS DATA (Partikel yang membangun Armor) */
.mat-data-cube {
    position: absolute;
    background: var(--mc);
    box-shadow: 0 0 15px var(--mc), 0 0 5px #fff inset;
    border: 1px solid rgba(255,255,255,0.5);
    opacity: 0;
    /* Bergerak ke bawah relatif terhadap laser yang naik */
    animation: cube-materialize 1.2s ease-out forwards;
    z-index: 2;
}

@keyframes curtain-rise {
    0% { transform: translateY(0); }
    15% { transform: translateY(0); } /* Tahan sebentar buat ancang-ancang */
    85% { transform: translateY(-100vh); } /* Naik secara halus */
    100% { transform: translateY(-100vh); }
}

@keyframes cube-materialize {
    0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
    50% { opacity: 0.8; }
    100% { transform: translateY(150px) scale(0) rotate(90deg); opacity: 0; }
}

/* 2. Layar Error (Petir Merah) - FIX FULL SCREEN */
.error-lightning-overlay {
    position: fixed; /* Ganti jadi Fixed biar nutupin satu web */
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(255, 0, 0, 0.2);
    box-shadow: inset 0 0 100px 30px rgba(255, 0, 0, 0.9); /* Efek merah di pinggiran layar */
    z-index: 9999; /* Pastikan posisinya paling depan */
    pointer-events: none;
    animation: lightning-strobe 0.3s infinite;
}
@keyframes lightning-strobe {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 1; background: rgba(255, 0, 0, 0.4); }
    20%, 80% { opacity: 0; }
    30%, 50%, 70% { opacity: 1; box-shadow: inset 0 0 150px 50px rgba(255, 0, 0, 1); }
    40%, 60% { opacity: 0.5; }
}

/* 3. Percikan Api (Sparks) */
.blaster-spark {
    position: absolute;
    width: 3px; height: 20px;
    background: #fff;
    box-shadow: 0 0 10px 3px #ff0000;
    border-radius: 5px;
    transform-origin: center;
    animation: spark-fly 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    z-index: 160;
    pointer-events: none;
}
@keyframes spark-fly {
    0% { transform: scale(1) translate(0, 0) rotate(var(--rot)); opacity: 1; }
    100% { transform: scale(0) translate(var(--tx), var(--ty)) rotate(var(--rot)); opacity: 0; }
}
/* === TOMBOL BLASTER MENGAPUNG (BAWAH PETA) === */
#blaster-mode-btn {
    position: absolute;
    top: 190px; /* Posisinya tepat di bawah peta */
    right: 15px;
    width: 100px; /* Ukuran gambar senjata di layar utama */
    height: auto;
    cursor: pointer;
    z-index: 14;
    display: none; /* Disembunyikan sampai user bikin nama/login */
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5));
}

/* Saat sudah login (Muncul & Melayang) */
#blaster-mode-btn.visible {
    display: block;
    animation: float-blaster 3s ease-in-out infinite;
}

#blaster-mode-btn img {
    width: 100%;
    display: block;
    /* transform: scaleX(-1); Jika gambar mau dihadapkan ke kiri, nyalakan kode ini */
}

/* Efek saat mouse diarahkan (Glow & Zoom) */
#blaster-mode-btn:hover {
    transform: scale(1.15) rotate(-5deg);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)); /* Glow Putih Terang */
}

/* Efek saat ditekan */
#blaster-mode-btn:active {
    transform: scale(0.9);
}

@keyframes float-blaster {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); } /* Naik sedikit */
    100% { transform: translateY(0px); }
}

/* Hilangkan tombol senjata ini kalau masuk Mode Pameran (Showcase) */
.kaitou-showcase-active #blaster-mode-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease;
}
/* PENGAMAN TEKS HEADER BIAR GAK NABRAK KOIN */
#kaitou-chat-header > span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px; /* Batas lebar teks */
    display: inline-block;
    vertical-align: middle;
}
/* === EFEK PETIR MASTER FORM (DARK LIGHTNING) === */
.master-lightning-bolt {
    position: absolute;
    width: 15px; 
    /* Tinggi dan Posisi diatur oleh JS secara dinamis */
    background: #ffcccc; /* Inti petir (merah sangat muda/putih) */
    
    /* Aura Gelap dan Merah Darah */
    box-shadow: 0 0 10px 3px #ff0000, 
                0 0 20px 8px #8b0000, 
                0 0 40px 15px #3a0000;
                
    /* Bentuk Zig-Zag Petir */
    clip-path: polygon(
        50% 0%, 65% 15%, 35% 30%, 70% 50%, 
        30% 70%, 50% 100%, 20% 65%, 55% 45%, 15% 25%
    );
    
    transform-origin: top center;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    animation: dark-strike 0.3s ease-out forwards;
}

@keyframes dark-strike {
    0% { opacity: 1; transform: scaleX(1) scaleY(0.5) rotate(var(--rot)); }
    20% { opacity: 1; transform: scaleX(1.5) scaleY(1.2) rotate(var(--rot)); }
    100% { opacity: 0; transform: scaleX(0.1) scaleY(2) rotate(var(--rot)); }
}
/* ========================================================
   MASTER FORM: AURA DOMAIN & OVERKILL BATTLE UI
   ======================================================== */

/* 1. TEMA HEADER & BACKGROUND (AURA DOMAIN) */
.master-form-active #kaitou-chat-header {
    background: linear-gradient(135deg, #111111, #3a0000) !important;
    border-bottom: 2px solid #ff0000 !important;
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4);
}

/* Background Master Form - MODE TERANG (Putih Vinyet) */
.master-form-active #kaitou-chat-body-container {
    background: radial-gradient(circle at center, #ffffff 0%, #e0e0e0 100%) !important;
}

/* Background Master Form - MODE GELAP (Hitam Vinyet) */
.kaitou-dark-mode.master-form-active #kaitou-chat-body-container {
    background: radial-gradient(circle at center, #2a2a2a 0%, #000000 100%) !important;
}

/* PASTIKAN KANVAS 3D TETAP TRANSPARAN (Agar gradasinya terlihat) */
.master-form-active #kaitou-3d-viewer {
    background-color: transparent !important;
}

/* Tombol Buka Widget (Di luar chat) jadi warna Hitam-Merah */
.master-form-active #kaitou-chat-button {
    background: linear-gradient(135deg, #111111, #ff0000) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5), 0 0 25px rgba(255,0,0,0.8) !important;
}

/* 2. OVERKILL BATTLE ARENA (SISI GELAP) */
/* Ubah Box Arena jadi menyeramkan */
.master-form-active #battle-box {
    background: linear-gradient(to bottom, #2b0000, #000000) !important;
    border: 3px solid #ff0000 !important;
    box-shadow: 0 0 40px rgba(255, 0, 0, 0.6) !important;
}

/* HP Bar Player jadi Putih - Merah (Sesuai warna armor) */
.master-form-active #player-hp-bar {
    background: linear-gradient(to right, #ffffff, #ff0000) !important;
    box-shadow: 0 0 15px #ff0000;
}

/* Tulisan Nama Player jadi Menyala (Anti-Nembus HP Bar) */
.master-form-active #player-side .battle-name {
    color: #ffcccc;
    text-shadow: 0 0 10px #ff0000, 0 0 5px #fff;
    font-size: 13px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 3. PARTIKEL AMBIENT EMBERS (DEBU API/AURA) */
.master-ember {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0; /* Di belakang model 3D */
    animation: float-ember linear forwards;
}

@keyframes float-ember {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(-400px) scale(0); opacity: 0; }
}
/* === EFEK TRANSISI MASTER FORM (ANTI-LAG & SYNC) === */

.shatter-wrapper {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 9999; pointer-events: none;
    display: flex; justify-content: center; align-items: center;
}

.shatter-bg {
    position: absolute; width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(20,0,0,0.8), rgba(0,0,0,0.95));
    opacity: 0;
    animation: shatter-bg-in 0.5s forwards;
}
.shatter-bg.fade-out { animation: shatter-bg-out 1.5s forwards; }

.shatter-shard {
    position: absolute; width: 30px; height: 30px;
    will-change: transform, opacity; /* OPTIMASI ANTI LAG! Memindahkan proses ke GPU */
}

/* FASE 1: Meledak & Mengambang sambil nunggu download */
.shard-fly-out {
    animation: fly-out 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards,
               float-mid-air 2s 0.8s ease-in-out infinite alternate;
}

/* FASE 2: Tersedot masuk pas model udah ready */
.shard-suck-in {
    transform: translate(var(--tx), var(--ty)) scale(1.5) rotate(var(--rot1)); 
    animation: suck-in 0.3s cubic-bezier(0.8, 0, 1, 1) forwards;
}

/* Kilat Putih-Emas */
.shatter-flash {
    position: absolute; width: 100%; height: 100%;
    background: #ffffff; opacity: 0;
}
.shatter-flash.flash-active {
    animation: shatter-flash-anim 1.5s ease-out forwards;
}

/* Keyframes */
@keyframes shatter-bg-in { to { opacity: 1; } }
@keyframes shatter-bg-out { to { opacity: 0; } }

@keyframes fly-out {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; filter: brightness(2); }
    100% { transform: translate(var(--tx), var(--ty)) scale(1.5) rotate(var(--rot1)); opacity: 1; }
}
@keyframes float-mid-air {
    0% { transform: translate(var(--tx), var(--ty)) scale(1.5) rotate(var(--rot1)); opacity: 1; }
    100% { transform: translate(calc(var(--tx) + 15px), calc(var(--ty) - 15px)) scale(1.4) rotate(calc(var(--rot1) + 10deg)); opacity: 1; }
}
@keyframes suck-in {
    100% { transform: translate(0, 0) scale(0); opacity: 0; filter: brightness(5); }
}
@keyframes shatter-flash-anim {
    0% { opacity: 0; }
    10% { opacity: 1; box-shadow: inset 0 0 100px 50px #f1c40f; } 
    100% { opacity: 0; }
}
/* ========================================================
   JRPG BATTLE SYSTEM UI
   ======================================================== */

/* Lantai Arena 3D */
#battle-arena { position: relative; perspective: 500px; z-index: 1; }
#battle-arena::before {
    content: ''; position: absolute; bottom: -10px; left: 0; width: 100%; height: 60px;
    background: repeating-linear-gradient(rgba(255,255,255,0.1) 0 1px, transparent 1px 10px),
                repeating-linear-gradient(90deg, rgba(255,255,255,0.1) 0 1px, transparent 1px 10px);
    transform: rotateX(65deg); z-index: -1; opacity: 0.5;
}

/* Banner Aksi Keren di Tengah Layar */
#battle-action-banner {
    position: absolute; top: 35%; left: -100%; width: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.9) 20%, rgba(0,0,0,0.9) 80%, transparent);
    color: #fff; text-align: center; padding: 10px 0; font-size: 16px; font-weight: 900;
    transform: skewY(-3deg); z-index: 150; opacity: 0;
    border-top: 2px solid #ff4f4f; border-bottom: 2px solid #ff4f4f;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
    pointer-events: none; text-shadow: 0 0 5px #fff; letter-spacing: 1px;
}
#battle-action-banner.show { left: 0; opacity: 1; }

/* Teks Damage Melayang (Floating Numbers) */
.floating-dmg {
    position: absolute; font-weight: 900; font-size: 26px; z-index: 200;
    pointer-events: none; animation: float-up-fade 1s ease-out forwards;
}
.dmg-red { color: #ff3b30; text-shadow: 0 0 5px #fff, 0 0 10px #000; }
.dmg-yellow { color: #f1c40f; text-shadow: 0 0 5px #fff, 0 0 10px #000; }
.dmg-blue { color: #3498db; text-shadow: 0 0 5px #fff, 0 0 10px #000; font-size: 18px; }

@keyframes float-up-fade {
    0% { transform: translateY(0) scale(0.5); opacity: 1; }
    20% { transform: translateY(-30px) scale(1.2); opacity: 1; }
    100% { transform: translateY(-60px) scale(1); opacity: 0; }
}

/* Kuda-kuda Monster (Stances) */
#monster-stance-icon {
    position: absolute; top: -15px; right: 0; font-size: 24px;
    z-index: 10; animation: pulse-icon 1s infinite alternate;
}
@keyframes pulse-icon { from { transform: scale(1); } to { transform: scale(1.2); } }

/* Aura Bertahan (Guard) */
.stance-guard { filter: drop-shadow(0 0 15px #3498db); border-radius: 50%; background: rgba(52, 152, 219, 0.2); }
/* Aura Mengamuk (Charge) */
.stance-charge { filter: drop-shadow(0 0 20px #e74c3c); border-radius: 50%; background: rgba(231, 76, 60, 0.3); animation: shake-hard-anim 0.2s infinite; }

/* Desain Tombol Miring ala Persona */
#battle-action-buttons { gap: 10px; padding-top: 5px; }
.action-btn { 
    transform: skewX(-10deg); border-radius: 0; border: 2px solid transparent; 
    box-shadow: 4px 4px 0 rgba(0,0,0,0.5); font-style: italic; transition: all 0.1s;
}
.action-btn:active { transform: skewX(-10deg) translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0,0,0,0.5); }
.btn-punch { background: #3498db; border-color: #2980b9; }
.btn-kick { background: #e67e22; border-color: #d35400; }
.btn-dodge { background: #2ecc71; border-color: #27ae60; }
.btn-special { background: #9b59b6; border-color: #8e44ad; color: #fff; letter-spacing: 2px; }
/* ========================================================
   FIX: KANVAS 3D MODEL & TATA LETAK ARENA JRPG
   ======================================================== */

/* 1. KECILKAN BATTLE BOX BIAR TOMBOL NAIK */
#battle-box {
    padding: 12px; /* Padding dikurangi biar hemat tempat */
    width: 95%;
    max-width: 330px;
}

/* 2. KECILKAN TINGGI ARENA (Hemat Ruang untuk Tombol) */
#battle-arena {
    height: 140px !important; /* Dikecilkan agar tombol finisher naik */
    margin-top: 35px; /* Beri ruang ekstra di atas arena untuk kepala model */
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    position: relative;
}

#player-side, #enemy-side {
    width: 48% !important;
    position: relative;
    display: block !important;
}

/* 3. PERBESAR KANVAS 3D MODEL (Anti Kepotong) */
#kaitou-battle-viewer {
    position: absolute;
    bottom: -15px; /* Pijakan pas di lantai */
    left: 50%;
    transform: translateX(-50%);
    
    /* KANVAS DIBIKIN SANGAT LEBAR DAN TINGGI */
    width: 180px !important; 
    height: 250px !important; /* Tinggi kanvas ditambah drastis, kepala bebas loncat! */
    
    --poster-color: transparent;
    z-index: 5;
    filter: drop-shadow(0 15px 5px rgba(0,0,0,0.5));
    pointer-events: none; /* Biar kanvas gedenya ga halangin klik tombol */
}

/* 4. Sesuaikan Monster Image */
#battle-monster-img {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px !important;
    height: 110px !important;
    object-fit: contain;
    z-index: 4;
    filter: drop-shadow(0 15px 5px rgba(0,0,0,0.5));
}

/* 5. Paku UI (Nama & HP) ke ATAS (Anti-Overlap / Anti-Nembus HP Bar) */
#player-side .battle-name, #enemy-side .battle-name {
    position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
    width: 100%; z-index: 10;
    font-size: 13px; line-height: 1.2; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#player-side .hp-bar-container, #enemy-side .hp-bar-container {
    position: absolute; top: 0px; left: 0; width: 100%; z-index: 10;
}
#player-side .hp-text, #enemy-side .hp-text {
    position: absolute; top: 18px; left: 0; width: 100%; z-index: 10;
}

/* 6. Ikon Kuda-kuda Monster */
#monster-stance-icon {
    position: absolute !important;
    bottom: 110px !important; /* Posisikan pas di atas monster */
    top: auto !important; right: auto !important; left: 50% !important;
    transform: translateX(-50%);
    z-index: 15;
}

/* 7. Rapikan Tombol Bawah */
#battle-ui-bottom {
    margin-top: 5px;
}
/* ========================================================
   FIX: BUG VISUAL MONSTER STANCE & BANNER
   ======================================================== */

/* 1. Kembalikan Bentuk Monster ke Kotak (Hilangkan Bulat) */
.stance-guard { 
    filter: drop-shadow(0 0 15px #3498db); 
    border-radius: 10px !important; /* Bentuk kotak sedikit melengkung di ujung */
    background: rgba(52, 152, 219, 0.2); 
}

.stance-charge { 
    filter: drop-shadow(0 0 20px #e74c3c); 
    border-radius: 10px !important; /* Bentuk kotak */
    background: rgba(231, 76, 60, 0.3); 
    animation: monster-shake-anim 0.2s infinite !important; /* Pakai animasi khusus */
}

/* 2. Fix Animasi Getar Monster (Biar tetap di tengah, gak lari ke kanan) */
@keyframes monster-shake-anim { 
  10%, 90% { transform: translateX(-50%) translate3d(-2px, 0, 0); } 
  20%, 80% { transform: translateX(-50%) translate3d(3px, 0, 0); } 
  30%, 50%, 70% { transform: translateX(-50%) translate3d(-5px, 0, 0); } 
  40%, 60% { transform: translateX(-50%) translate3d(5px, 0, 0); } 
}

/* 3. Turunkan Posisi Banner Command (Teks Overlay Action) */
#battle-action-banner {
    top: 45% !important; /* Semakin besar angkanya, semakin turun ke bawah layarnya */
}
/* ========================================================
   FIX: TRANSPARANSI BACKGROUND KANVAS 3D MASTER FORM
   ======================================================== */
.master-form-active #kaitou-3d-viewer {
    background-color: transparent !important;
}

/* Opsional: Jika kamu ingin efek bayangan (shadow) modelnya 
   sedikit lebih menyatu dengan background gelap */
.master-form-active #kaitou-3d-viewer::part(default-progress-bar) {
    display: none;
}
/* ========================================================
   🎮 MODE LANDSCAPE (OTOMATIS SAAT HP DIMIRINGKAN)
   Khusus layar dengan tinggi maksimal 600px (HP Landscape)
   ======================================================== */
@media screen and (orientation: landscape) and (max-height: 600px) {
    
    /* 1. Paksa Widget Penuhi Layar HP */
    #kaitou-chat-window.visible {
        width: 100vw !important;
        height: 100vh !important;
        bottom: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
    }

    /* 2. Ubah Layout Battle Jadi 2 Kolom (Kiri: Arena, Kanan: Tombol) */
    #battle-box {
        display: grid !important;
        grid-template-columns: 55% 45% !important; /* 55% Arena, 45% Tombol */
        grid-template-rows: auto auto;
        gap: 15px;
        width: 95% !important;
        max-width: 750px !important; /* Perlebar kotaknya */
        padding: 20px !important;
    }

    /* 3. Posisi Arena Pindah Kiri */
    #battle-arena {
        grid-column: 1;
        grid-row: 1;
        height: 160px !important; 
        margin-top: 30px !important;
    }

    /* 4. Kotak Log/Teks Pindah Bawah Kiri */
    #battle-log-area {
        grid-column: 1;
        grid-row: 2;
        height: 50px !important;
        margin: 0 !important;
    }

    /* 5. UI Tombol Pindah Kanan (Lebih pas di jempol kanan) */
    #battle-ui-bottom {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-top: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: center; /* Tombol ke tengah secara vertikal */
        padding-left: 15px;
        border-left: 2px dashed rgba(255, 255, 255, 0.2); /* Garis pemisah */
    }

    #special-meter-container {
        margin-bottom: 20px !important;
        height: 25px !important; /* Bar Special lebih tebal dikit */
    }

    /* Tombol jadi lebih kotak dan besar untuk jempol */
    #battle-action-buttons {
        gap: 12px !important;
    }
    
    .action-btn {
        padding: 15px 10px !important;
        font-size: 15px !important;
    }

    /* 6. Penyesuaian Kanvas Model 3D di Mode Miring */
    #kaitou-battle-viewer {
        width: 170px !important;
        height: 200px !important;
        bottom: -20px !important;
    }
    
    #battle-monster-img {
        width: 110px !important;
        height: 110px !important;
        bottom: 0px !important;
    }
    
    /* 7. Banner Teks Action turun ke tengah pas */
    #battle-action-banner {
        top: 25% !important;
        font-size: 20px !important;
        padding: 15px 0 !important;
    }
}
/* =========================================
   FIX ANTI-LAG & OBJEK 3D (CYBER RUN 3D NATIVE THREE.JS)
   ========================================= */
#runner-track::before,
#runner-track::after,
.runner-player-wrapper::after {
    display: none !important;
}

/* ========================================================
   🪐 FASE 1: TOMBOL ORBIT & LAYAR GALAKSI MULTIVERSE 3D (RESPONSIVE FLEX)
   ======================================================== */

/* 1. Tombol Orbit Tepat di Bawah Radar */
#orbit-mode-btn {
    position: absolute;
    top: 188px;
    right: 10px;
    width: 120px;
    padding: 7px 0;
    background: linear-gradient(135deg, #0b192c, #1e3e62);
    color: #00eaff;
    border: 1.5px solid #00eaff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
    cursor: pointer;
    z-index: 15;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 234, 255, 0.35);
    transition: all 0.25s ease;
}
#orbit-mode-btn.visible {
    display: block;
    animation: zoomIn 0.3s ease-out;
}
#orbit-mode-btn:hover {
    background: #00eaff;
    color: #000;
    box-shadow: 0 0 18px #00eaff;
    transform: translateY(-2px);
}
.kaitou-showcase-active #orbit-mode-btn {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 2. Geser Senjata Blaster Turun ke Bawah Menyesuaikan Tombol Orbit */
#blaster-mode-btn {
    top: 230px !important;
}

/* 3. Ekspansi Layar Penuh Fleksibel di Semua Layar HP & PC */
#kaitou-chat-window.orbit-fullscreen-expand {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    z-index: 99999 !important;
    transition: all 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 4. Overlay Galaksi Orbit 3D (Sistem Auto-Flow Flexbox Anti Menumpuk) */
#kaitou-orbit-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #080d1a 0%, #020308 100%);
    z-index: 160;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: clamp(10px, 2.5vw, 18px);
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: none; /* Agar area kosong tengah tembus ke kanvas 3D */
    animation: orbit-zoom-out-in 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Saat JS mengubah display jadi block, otomatis aktifkan Flexbox */
#kaitou-orbit-overlay[style*="block"],
#kaitou-orbit-overlay[style*="flex"] {
    display: flex !important;
}

@keyframes orbit-zoom-out-in {
    0% { opacity: 0; transform: scale(2.0); filter: brightness(2.2) blur(6px); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1) blur(0); }
}

#orbit-3d-viewport {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: grab;
    pointer-events: auto; /* Kanvas 3D aktif menerima geseran & klik */
}
#orbit-3d-viewport:active { cursor: grabbing; }
#orbit-warp-flash {
    position: absolute;
    inset: 0;
    background: #00eaff;
    opacity: 0;
    pointer-events: none;
    z-index: 190;
    transition: opacity 0.35s ease;
}

/* Efek Peta Radar Membesar (Zoom-In Peta) Lalu Memudar ke Bumi 3D yang Zoom-Out! */
#orbit-warp-flash.radar-map-transition {
    background: 
        radial-gradient(circle, rgba(0, 234, 255, 0.45) 0%, rgba(0, 20, 40, 0.9) 80%),
        url('https://files.catbox.moe/7zs1jh.jpg') center/cover no-repeat !important;
    animation: radarExpandToGlobe 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}
@keyframes radarExpandToGlobe {
    0% {
        opacity: 1;
        clip-path: circle(12% at 88% 18%);
        transform: scale(1);
        filter: brightness(1.5) hue-rotate(15deg);
    }
    45% {
        opacity: 0.95;
        clip-path: circle(120% at 50% 50%);
        transform: scale(1.25);
    }
    100% {
        opacity: 0;
        clip-path: circle(150% at 50% 50%);
        transform: scale(2.2);
    }
}

/* 5. Header Navigasi Orbit (Auto-Wrap Rapi) */
.orbit-top-bar {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    z-index: 10;
    pointer-events: none;
    flex-shrink: 0;
}
.orbit-title-box {
    background: rgba(8, 14, 28, 0.85);
    border-left: 3px solid #00eaff;
    padding: 5px 12px;
    border-radius: 0 8px 8px 0;
    backdrop-filter: blur(8px);
    pointer-events: auto;
}
.orbit-badge {
    font-size: clamp(8px, 1.8vw, 10px);
    color: #00eaff;
    letter-spacing: 1.5px;
    font-weight: 800;
    display: block;
}
#orbit-sector-title {
    margin: 2px 0 0;
    font-size: clamp(12px, 3vw, 15px);
    color: #fff;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.orbit-top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: auto;
    margin-left: auto;
}
.orbit-nav-btn {
    background: rgba(15, 25, 45, 0.88);
    color: #fff;
    border: 1px solid rgba(0, 234, 255, 0.45);
    padding: clamp(5px, 1.5vw, 8px) clamp(8px, 2.2vw, 13px);
    border-radius: 8px;
    font-size: clamp(10px, 2.5vw, 12px);
    font-weight: bold;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: all 0.2s;
    white-space: nowrap;
}
.orbit-nav-btn:hover {
    background: #00eaff;
    color: #000;
    box-shadow: 0 0 12px #00eaff;
}
#close-orbit-btn {
    background: linear-gradient(135deg, #e74c3c, #900c3f);
    color: #fff;
    border: 1px solid #ff8a80;
    padding: clamp(5px, 1.5vw, 8px) clamp(10px, 2.5vw, 15px);
    border-radius: 8px;
    font-size: clamp(10px, 2.5vw, 12px);
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.5);
    white-space: nowrap;
}

/* 6. Teks Petunjuk 360 (Otomatis Turun di Bawah Header, Tidak Akan Tertutup!) */
.orbit-hint-pill {
    position: relative;
    margin-top: 6px;
    margin-bottom: auto; /* Dorong kartu planet ke paling bawah */
    background: rgba(5, 10, 22, 0.78);
    border: 1px solid rgba(0, 234, 255, 0.35);
    color: #e0f7fa;
    padding: 5px 12px;
    border-radius: 16px;
    font-size: clamp(10px, 2.4vw, 12px);
    line-height: 1.35;
    text-align: center;
    max-width: 96%;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* 7. Kartu Detail Planet (Elastis & Responsif di Bawah) */
#orbit-planet-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: rgba(10, 15, 28, 0.9);
    border: 1px solid rgba(0, 234, 255, 0.4);
    border-radius: 14px;
    padding: clamp(10px, 2.5vw, 16px);
    z-index: 10;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.75);
    color: #fff;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.3s ease;
    pointer-events: auto;
    flex-shrink: 0;
}
#orbit-planet-card.visible {
    opacity: 1;
    transform: translateY(0);
}
.planet-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    gap: 8px;
}
.earth-status-tag {
    font-size: 9px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 3px;
}
.tag-home { background: #0072c6; color: #fff; }
.tag-target { background: #e74c3c; color: #fff; }

#orbit-earth-name {
    margin: 0;
    font-size: clamp(16px, 4.2vw, 22px);
    font-weight: 900;
    letter-spacing: 1px;
}
.earth-reward-badge {
    background: rgba(241, 196, 15, 0.15);
    border: 1px solid #f1c40f;
    color: #f1c40f;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: clamp(10px, 2.5vw, 12px);
    font-weight: 900;
    white-space: nowrap;
}
.planet-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
}
.p-stat {
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 9px;
    border-radius: 8px;
}
.p-stat.full-width { grid-column: 1 / -1; }
.p-label {
    font-size: 9px;
    color: #8a9ba8;
    display: block;
    margin-bottom: 2px;
}
.p-val {
    font-size: clamp(11px, 2.6vw, 12px);
    font-weight: bold;
    color: #fff;
}
#orbit-invade-btn {
    width: 100%;
    padding: clamp(9px, 2.2vw, 12px);
    border: none;
    border-radius: 10px;
    font-size: clamp(11px, 2.8vw, 13px);
    font-weight: 900;
    letter-spacing: 0.8px;
    cursor: pointer;
    background: linear-gradient(135deg, #ff3b30, #9b0000);
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 59, 48, 0.5);
    transition: all 0.2s;
}
#orbit-invade-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(255, 59, 48, 0.85);
}
#orbit-invade-btn:disabled {
    background: #2c3e50;
    color: #7f8c8d;
    box-shadow: none;
    cursor: not-allowed;
}

/* 8. Penyesuaian Khusus Saat Layar HP Miring (Landscape) */
@media screen and (orientation: landscape) and (max-height: 560px) {
    .orbit-hint-pill { display: none; }
    #orbit-planet-card {
        align-self: flex-end;
        max-width: 320px;
        padding: 10px;
    }
    .planet-stats-grid { margin-bottom: 6px; }
}

/* ========================================================
   🏙️ FASE 2: HUD INVASI KOTA, WARGA PANIK, & 3 FINISHER
   ======================================================== */
#orbit-invasion-hud {
    position: relative;
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 15;
    pointer-events: none;
    margin-top: 8px;
}

.invasion-status-panel {
    width: 100%;
    max-width: 460px;
    background: rgba(10, 14, 24, 0.85);
    border: 1px solid rgba(255, 59, 48, 0.5);
    border-radius: 12px;
    padding: 8px 12px;
    backdrop-filter: blur(8px);
}
.inv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: clamp(10px, 2.5vw, 12px);
    font-weight: 900;
}
#inv-city-title { color: #fff; letter-spacing: 0.5px; }
.crowd-calm { color: #2ecc71; }
.crowd-panic { color: #ff3b30; animation: blink-cursor 0.5s infinite; }

.inv-hp-bg {
    width: 100%;
    height: 18px;
    background: #1a1f2c;
    border-radius: 9px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
}
#inv-hp-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ff3b30, #ff9500);
    transition: width 0.2s ease;
}
#inv-hp-text {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 3px #000;
}

.invasion-bottom-dock {
    width: 100%;
    max-width: 500px;
    background: rgba(8, 12, 22, 0.9);
    border: 1px solid rgba(0, 234, 255, 0.35);
    border-radius: 14px;
    padding: 10px 12px;
    backdrop-filter: blur(10px);
    pointer-events: auto;
}
.inv-charge-wrap {
    width: 100%;
    height: 18px;
    background: #111827;
    border-radius: 9px;
    position: relative;
    overflow: hidden;
    border: 1px solid #f1c40f;
    margin-bottom: 8px;
}
#inv-charge-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #f39c12, #fff200);
    transition: width 0.15s ease;
}
#inv-charge-text {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(9px, 2.2vw, 10px);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 3px #000;
}

.inv-skills-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.inv-skill-btn {
    padding: 8px 4px;
    border-radius: 8px;
    border: 1px solid #00eaff;
    background: linear-gradient(135deg, #005a9e, #002b4d);
    color: #fff;
    font-size: clamp(10px, 2.4vw, 12px);
    font-weight: 900;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: all 0.2s;
}
.inv-skill-btn span { font-size: 9px; font-weight: normal; color: #b3e5fc; }
.inv-skill-btn.inv-ult-btn {
    background: linear-gradient(135deg, #d32f2f, #7f0000);
    border-color: #ffeb3b;
}
.inv-skill-btn:disabled {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #6b7280 !important;
    cursor: not-allowed;
    opacity: 0.65;
}
.inv-skill-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(0, 234, 255, 0.6);
}

/* Modal Kemenangan +100 Koin */
#orbit-victory-modal {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 200;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
    pointer-events: auto;
}
#orbit-victory-modal[style*="flex"] { display: flex !important; }
.victory-card {
    background: linear-gradient(145deg, #1a0b0b, #090d16);
    border: 2px solid #f1c40f;
    border-radius: 18px;
    padding: 22px;
    width: 90%;
    max-width: 340px;
    text-align: center;
    color: #fff;
    box-shadow: 0 0 40px rgba(241, 196, 15, 0.4);
    animation: pop-in 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.victory-icon { font-size: 42px; margin-bottom: 8px; }
.victory-card h2 { margin: 0 0 8px; font-size: 18px; color: #f1c40f; }
.victory-card p { font-size: 12px; color: #ccc; margin: 0 0 15px; line-height: 1.4; }
.victory-reward-box {
    background: rgba(241, 196, 15, 0.15);
    border: 1px dashed #f1c40f;
    color: #f1c40f;
    padding: 10px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 16px;
}
#victory-claim-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #f1c40f, #d35400);
    color: #000;
    font-weight: 900;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
}