body { background-color: #111; color: #0f0; font-family: 'Courier New', Courier, monospace; text-align: center; padding: 10px; font-size: 14px; margin: 0; overflow-x: hidden; transition: background-color 0.3s; }
#container { max-width: 900px; margin: 0 auto; border: 2px solid #0f0; padding: 50px 20px 20px 20px; box-shadow: 0 0 15px #0f0; position: relative; transition: all 0.3s; }
h1 { font-size: 20px; cursor: pointer; user-select: none; margin-bottom: 5px; color: #ff00ff; }
h1:hover { color: #fff; }

.top-left-btn { position: absolute; top: 10px; left: 10px; z-index: 100; display: flex; gap: 5px; }
.top-right-btn { position: absolute; top: 10px; right: 10px; z-index: 100; }

.hud-left { text-align: left; }
.hud-name { color: #0ff; font-weight: bold; font-size: 16px; }
.hud-power { color: #ffaa00; font-size: 13px; margin-top: 3px; font-weight: bold; display: flex; align-items: center; }
.info-btn { cursor: pointer; color: #0ff; border: 1px solid #0ff; border-radius: 50%; padding: 0 5px; font-size: 10px; margin-left: 6px; user-select: none; }
.info-btn:hover { background: #0ff; color: #000; }

.top-dash { display: flex; justify-content: space-around; background: #222; padding: 10px; margin-bottom: 15px; border: 1px solid #555; flex-wrap: wrap; gap: 5px; margin-top: 15px;}
.top-dash div { font-size: 15px; font-weight: bold; }
.val-dia { color: #0ff; }
.val-snack { color: #ffaa00; }
.val-debt { color: #ff0000; animation: flash 2s infinite; }
.val-premium { color: #ff66b2; text-shadow: 0 0 3px #ff00ff; }
.cloud-status { flex-basis: 100%; text-align: center; font-size: 12px; margin-top: 5px; color: #aaa; font-weight: normal !important; }

@keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.nav-tabs { display: flex; justify-content: center; gap: 5px; margin-bottom: 15px; border-bottom: 1px solid #0f0; padding-bottom: 10px; flex-wrap: wrap; }
.nav-tabs button { background: none; border: 1px solid #0f0; color: #0f0; padding: 5px 10px; cursor: pointer; font-size: 14px; }
.nav-tabs button.active { background-color: #0f0; color: #111; font-weight: bold; }

.tab-content { display: none; }
.tab-content.active { display: block; }
/* 斂財商業街用子分頁 */
.sub-tab-content { display: none; }
.sub-tab-content.active { display: block; }

.btn-group { margin: 10px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* =========================================
   ( ´_ゝ`) 悠的特製終極按鈕：安靜下壓 + 點擊閃電
   ========================================= */
button, .tr-btn, .modal-btn { 
    background-color: #222; 
    color: #0f0; 
    border: 1px solid #0f0; 
    padding: 8px 12px; 
    cursor: pointer; 
    font-family: inherit; 
    transition: 0.2s ease-in-out; 
    position: relative; 
    overflow: hidden;   
}

.tr-btn { padding: 5px 10px; font-size: 12px; font-weight: bold; border-color:#ffaa00; color:#ffaa00; }
.modal-btn { font-size: 16px; font-weight: bold; padding: 10px 20px; }

button:hover:not(:disabled), .modal-btn:hover, .tr-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.05);
    color: currentColor;
    border-color: currentColor;
    box-shadow: 0 0 12px currentColor, inset 0 0 8px currentColor;
    transform: translateY(2px) scale(0.98);
    text-shadow: 0 0 5px currentColor;
}

button::after, .modal-btn::after, .tr-btn::after {
    content: ''; 
    position: absolute; 
    top: -10%; 
    left: -100%;
    width: 30%; 
    height: 120%;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    transform: skewX(-45deg);
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen; 
}

button:active:not(:disabled)::after, .modal-btn:active::after, .tr-btn:active:not(:disabled)::after {
    opacity: 0.8;
    animation: micro-zap 0.25s ease-out forwards;
}

@keyframes micro-zap {
    0% { left: -50%; opacity: 0.8; }
    100% { left: 150%; opacity: 0; }
}

button:disabled { border-color: #444 !important; color: #444 !important; cursor: not-allowed; opacity: 0.7; background: #111 !important; box-shadow: none !important; transform: none !important; }

/* =========================================
   滋滋滋神經質抖動 (Glitch 特效回歸)
   ========================================= */
.btn-glitch { position: relative; z-index: 1; overflow: hidden; }
.btn-glitch:hover:not(.active):not(:disabled) { 
    animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite !important; 
    background: transparent !important; 
    color: currentColor !important; 
}
@keyframes glitch-skew {
    0% { transform: skew(0deg); text-shadow: -2px 0 #f0f, 2px 0 #0ff; }
    20% { transform: skew(-10deg); text-shadow: 2px 0 #f0f, -2px 0 #0ff; }
    40% { transform: skew(10deg); text-shadow: -2px 0 #f0f, 2px 0 #0ff; }
    60% { transform: skew(-5deg); text-shadow: 2px 0 #f00, -2px 0 #0f0; }
    80% { transform: skew(5deg); text-shadow: -2px 0 #f00, 2px 0 #0f0; }
    100% { transform: skew(0deg); text-shadow: none; }
}

#log { margin-top: 10px; height: 250px; overflow-y: auto; border: 1px solid #333; padding: 10px; text-align: left; background-color: #000; line-height: 1.4; font-size: 13px; }
.log-entry { margin: 3px 0; border-bottom: 1px dashed #222; padding-bottom: 2px; }
.sys-msg { color: #fff; background-color: #333; padding: 2px 5px; }
.jackpot { color: #ff00ff; font-weight: bold; animation: flash 1s infinite; text-shadow: 0 0 5px #ff00ff; }
.summary { color: #0ff; font-weight: bold; border-top: 1px dashed #0ff; padding-top: 5px; margin-top: 5px; }
.highlight { color: #ffaa00; }

.h-norm { color: #fff; }
.h-rare { color: #ffaa00; font-weight: bold; }
.h-sr { color: #ff0000; font-weight: bold; text-shadow: 0 0 3px #f00; }
.h-ur { animation: rainbow 2s linear infinite; font-weight: bold; text-shadow: 0 0 5px #fff; }
.h-bbbb { animation: flash-bbbb 0.5s infinite; color: #ff0044; text-shadow: 0 0 10px #ff0000, 0 0 5px #fff; font-weight: 900; font-size: 16px;}
@keyframes flash-bbbb { 0%, 100% { color: #ff0044; } 50% { color: #fff; } }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; text-align: left; }
.card { border: 1px solid #555; padding: 10px; background: #1a1a1a; display: flex; flex-direction: column; position: relative; transition: all 0.3s;}
.card h3 { margin: 0 0 5px 0; font-size: 14px; }

/* 貴重物品背包卡片專用 */
.item-card { border: 1px dashed #0ff; background: #001a1a; }
.item-card h3 { color: #0ff; }
.weekly-stage-card { border: 2px solid #555; background: #1a0000; text-align: center; padding: 15px; }
.weekly-stage-card.passed { border-color: #0f0; background: #002200; opacity: 0.6; }
.weekly-stage-card.current { border-color: #ff0044; box-shadow: 0 0 10px #ff0044; animation: flash 2s infinite; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; text-align: left; margin-bottom: 20px; }
.story-text { font-size: 12px; color: #aaa; margin-top: 10px; border-top: 1px dashed #444; padding-top: 10px; line-height: 1.5; flex-grow: 1; }

.combat-arena { display: flex; justify-content: space-between; border: 2px dashed #555; padding: 20px; background: #050505; margin-bottom: 15px; position: relative; }
.combat-side { width: 48%; border: 1px solid #333; padding: 10px; z-index: 10; }
.health-bar { height: 10px; background: #333; margin-top: 5px; position: relative; }
.health-fill { height: 100%; background: #0f0; width: 100%; transition: width 0.2s; }
.enemy-health { background: #f00; }
.combat-log { height: 150px; overflow-y: auto; text-align: left; font-size: 12px; color: #aaa; background: #111; padding: 5px; border: 1px solid #222; }

.crit-text { color: #ff0044; font-weight: bold; font-size: 14px; display: inline-block; animation: shake-inline 0.3s; text-shadow: 0 0 5px #f00; }
.trait-text { color: #0ff; font-weight: bold; font-style: italic; }

.clickable-trait { color: #ff00ff; cursor: pointer; font-weight: bold; text-decoration: underline dashed; transition: 0.2s; }
.clickable-trait:hover { color: #fff; text-shadow: 0 0 5px #ff00ff; }
.clickable-enemy { color: #f00; cursor: pointer; font-weight: bold; text-decoration: underline dashed; transition: 0.2s; }
.clickable-enemy:hover { color: #fff; text-shadow: 0 0 5px #f00; }

@keyframes shake-inline { 0% { transform: translate(1px, 1px) rotate(0deg); } 25% { transform: translate(-2px, -1px) rotate(-1deg); } 50% { transform: translate(-1px, 2px) rotate(1deg); } 75% { transform: translate(2px, -2px) rotate(0deg); } 100% { transform: translate(1px, -1px) rotate(0deg); } }

.shake { animation: shakeAnim 0.5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shakeAnim { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, 0, 0); background-color: #300; } 30%, 50%, 70% { transform: translate3d(-8px, 0, 0); } 40%, 60% { transform: translate3d(8px, 0, 0); } }
.floating-text { position: absolute; font-weight: bold; pointer-events: none; animation: floatUp 1s ease-out forwards; z-index: 100; text-shadow: 1px 1px 2px #000; }
.skill-text { font-size: 24px; color: #ff3333; text-shadow: 0 0 5px #ff0000, 1px 1px 2px #000; animation: floatSkill 1.5s ease-out forwards; white-space: nowrap; }

.float-jojo {
    position: absolute; font-size: 36px; font-weight: 900; font-style: italic;
    color: #ffcc00; -webkit-text-stroke: 1px #000;
    text-shadow: 3px 3px 0 #000, -2px -2px 0 #ff0044, 0 0 15px #ffaa00;
    white-space: nowrap; z-index: 100; pointer-events: none;
    animation: ora-smash 0.4s cubic-bezier(0.1, 2, 0.5, 1) forwards;
}

@keyframes floatUp { 0% { opacity: 1; transform: translateY(0) scale(1.5); } 100% { opacity: 0; transform: translateY(-50px) scale(1); } }
@keyframes floatSkill { 0% { opacity: 0; transform: translateY(20px) scale(0.5); } 20% { opacity: 1; transform: translateY(0) scale(1.2); } 80% { opacity: 1; transform: translateY(-10px) scale(1); } 100% { opacity: 0; transform: translateY(-30px) scale(1.5); } }
@keyframes ora-smash { 0% { transform: rotate(-20deg) scale(0); opacity: 0; } 40% { transform: rotate(5deg) scale(1.5); opacity: 1; } 80% { transform: rotate(-5deg) scale(1.1); opacity: 1; } 100% { transform: rotate(-10deg) scale(1.2); opacity: 0; } }

/* =========================================
   ( ´_ゝ`) 戰力飄字專用特效
   ========================================= */
.power-float-up {
    position: absolute;
    left: 100px;
    top: -15px;
    color: #0f0;
    font-weight: bold;
    font-size: 15px;
    pointer-events: none;
    animation: powerFloatUpAnim 1.5s ease-out forwards;
    text-shadow: 0 0 5px #0f0, 1px 1px 2px #000;
    z-index: 1000;
}
.power-float-down {
    position: absolute;
    left: 100px;
    top: 5px;
    color: #f00;
    font-weight: bold;
    font-size: 15px;
    pointer-events: none;
    animation: powerFloatDownAnim 1.5s ease-out forwards;
    text-shadow: 0 0 5px #f00, 1px 1px 2px #000;
    z-index: 1000;
}
@keyframes powerFloatUpAnim {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    20% { transform: translateY(-10px) scale(1.2); }
    100% { opacity: 0; transform: translateY(-30px) scale(1); }
}
@keyframes powerFloatDownAnim {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    20% { transform: translateY(10px) scale(1.2); }
    100% { opacity: 0; transform: translateY(30px) scale(1); }
}

.hero-panel { border: 1px solid #0ff; padding: 15px; background: #001111; margin-bottom: 20px; text-align: left; }
.hero-panel h3 { margin-top: 0; color: #0ff; }
.stat-line { margin: 5px 0; }
.stat-total { color: #fff; font-weight: bold; }

.q-0 { color: #fff; } .q-1 { color: #0f0; } .q-2 { color: #0088ff; } 
.q-3 { color: #aa00ff; } .q-4 { color: #ffaa00; font-weight: bold; } 
.q-5 { color: #ff0000; font-weight: bold; text-shadow: 0 0 2px #f00; } 
.q-6 { animation: rainbow 2s linear infinite; font-weight: bold; }
@keyframes rainbow { 0%{color:#f00} 17%{color:#ff0} 33%{color:#0f0} 50%{color:#0ff} 67%{color:#00f} 83%{color:#f0f} 100%{color:#f00} }

.section-title { color: #ff00ff; border-bottom: 1px solid #555; padding-bottom: 5px; margin-top: 20px; text-align: left; }

.filter-btn.active { background: #0088ff; color: #fff; border-color: #0088ff; }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999; }
.modal-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #111; border: 2px solid #0f0; padding: 25px; width: 85%; max-width: 500px; text-align: left; box-shadow: 0 0 20px #0f0; max-height: 85vh; overflow-y: auto; transition: all 0.3s;}
.modal-text-content { color: #fff; font-size: 15px; margin-bottom: 20px; line-height: 1.6; white-space: pre-wrap; }

.modal-btn.danger { border-color: #f00; color: #f00; }
.modal-btn.danger:hover { background: #f00 !important; color: #fff !important; }

textarea { width: 100%; height: 100px; background: #000; color: #0f0; border: 1px solid #0f0; padding: 10px; font-family: monospace; resize: vertical; box-sizing: border-box; margin-bottom: 10px;}
select { background:#000; color:#0f0; border:1px solid #0f0; padding:5px; font-family:inherit; width: 100%; max-width: 200px;}

.quick-deploy-bar { display:flex; justify-content:space-around; background:#050505; border:1px solid #0f0; padding:10px; margin-bottom:10px; flex-wrap:wrap; gap:5px; }
.quick-deploy-slot { flex: 1; min-width: 120px; font-size: 12px; }
#btn-restart-combat { display: none; width: 100%; background: #500; color: #fff; border: 2px solid #f00; padding: 15px; font-size: 18px; font-weight: bold; margin-top: 10px; animation: flash 1s infinite; cursor: pointer; }
#btn-restart-combat:hover { background: #f00 !important; }

.bonus-stat { color: #0f0; font-weight: bold; }

#lb-modal-box { max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; }
.lb-list { list-style: none; padding: 0; margin: 0; text-align: left; }
.lb-list li { border-bottom: 1px dashed #444; padding: 8px 0; display: flex; justify-content: space-between; }
.lb-list li span:first-child { color: #fff; font-weight: bold; }
.lb-list li span:last-child { color: #0ff; }
.lb-rank-1 { color: #ffaa00 !important; text-shadow: 0 0 5px #ffaa00; }
.lb-rank-2 { color: #ccc !important; }
.lb-rank-3 { color: #cd7f32 !important; }
.lb-my-rank { margin-top: 15px; padding: 10px; background: #222; border: 1px solid #0f0; text-align: center; font-weight: bold; color: #0f0; }

#toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast-msg { background: rgba(0,0,0,0.9); border: 2px solid #0f0; color: #0f0; padding: 10px 20px; border-radius: 5px; animation: slideInFadeOut 3s forwards; box-shadow: 0 0 15px #0f0; font-weight: bold; text-align: center; font-size: 16px; }
@keyframes slideInFadeOut { 0% { opacity: 0; transform: translateY(-20px); } 10% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } }

.dual-filter-container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 15px; border-bottom: 1px dashed #555; padding-bottom: 10px; }
#cb-enemies-container { display: flex; flex-direction: column; gap: 10px; }

#img-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 10000; text-align: center; cursor: zoom-out; }
#img-modal img { max-width: 90%; max-height: 90vh; margin-top: 5vh; border: 2px solid #ff0044; box-shadow: 0 0 20px #ff0044; background: #000; object-fit: contain; }
#img-modal .close-btn { position: absolute; top: 20px; right: 20px; font-size: 40px; color: #fff; cursor: pointer; text-shadow: 0 0 10px #f00; z-index: 10001; }
.clickable-image { cursor: zoom-in; transition: border-color 0.2s, filter 0.2s; }
.clickable-image:hover { border-color: #fff !important; filter: brightness(1.2); }

.enhance-btn { background: #331100; border-color: #ffaa00; color: #ffaa00; }
.sell-btn { background: #220000; border-color: #f00; color: #f00; }
.useless-btn { background: #111; color: #555; border-color: #333; }

.btn-snake span { display: none !important; }

.gacha-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, #330000 0%, #000000 100%);
    z-index: 100000; flex-direction: column; align-items: center; justify-content: center;
}
.gacha-char-img {
    max-width: 80%; max-height: 50vh; opacity: 0; transform: scale(5);
    border: 3px solid transparent; box-shadow: none; background: #000; border-radius: 10px;
}
@keyframes impact-drop {
    0% { opacity: 0; transform: scale(5); filter: blur(10px); }
    80% { opacity: 1; transform: scale(0.9); filter: blur(0); }
    100% { opacity: 1; transform: scale(1); border-color: #ff0044; box-shadow: 0 0 50px #ff0044, 0 0 100px rgba(255,0,68,0.5); }
}
.gacha-text-box { opacity: 0; margin-top: 20px; text-align: center; }
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

#equip-modal-list::-webkit-scrollbar { width: 6px; }
#equip-modal-list::-webkit-scrollbar-track { background: #111; }
#equip-modal-list::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }
#equip-modal-list::-webkit-scrollbar-thumb:hover { background: #0f0; }

/* =========================================
   (눈_눈) 瞎眼邪教白專用 (Light Mode Overrides)
   ========================================= */
body.cult-light-mode { background-color: #eee !important; color: #111 !important; text-shadow: none !important; }
body.cult-light-mode #container { border-color: #555 !important; box-shadow: 0 0 15px #aaa !important; background: #fff !important; }
body.cult-light-mode h1, body.cult-light-mode h2, body.cult-light-mode h3, body.cult-light-mode .section-title { color: #800 !important; text-shadow: none !important; }
body.cult-light-mode .top-dash { background: #ddd !important; border-color: #999 !important; }
body.cult-light-mode .card { background: #f9f9f9 !important; border-color: #aaa !important; color: #333 !important; }
body.cult-light-mode button, body.cult-light-mode .tr-btn, body.cult-light-mode .modal-btn { background-color: #ccc !important; color: #111 !important; border-color: #666 !important; text-shadow: none !important; }
body.cult-light-mode button:hover, body.cult-light-mode .tr-btn:hover { background-color: #bbb !important; color: #000 !important; border-color: #000 !important; box-shadow: 0 0 5px #555 !important; }
body.cult-light-mode .val-dia { color: #0066cc !important; }
body.cult-light-mode .val-snack { color: #aa5500 !important; }
body.cult-light-mode .val-premium { color: #aa0066 !important; }
body.cult-light-mode .val-debt { color: #d00 !important; font-weight: bold !important; text-shadow: none !important; }
body.cult-light-mode .hud-name { color: #0055aa !important; }
body.cult-light-mode .hud-power { color: #aa5500 !important; }
body.cult-light-mode .nav-tabs button { color: #333 !important; border-color: #777 !important; }
body.cult-light-mode .nav-tabs button.active { background-color: #777 !important; color: #fff !important; }
body.cult-light-mode #log { background-color: #ddd !important; color: #111 !important; border-color: #999 !important; }
body.cult-light-mode .log-entry { border-bottom-color: #bbb !important; }
body.cult-light-mode .sys-msg { background-color: #aaa !important; color: #000 !important; }
body.cult-light-mode .combat-arena { background: #ddd !important; border-color: #888 !important; }
body.cult-light-mode .combat-side { background: #eee !important; border-color: #aaa !important; }
body.cult-light-mode .combat-log { background: #eee !important; color: #222 !important; border-color: #999 !important; }
body.cult-light-mode .modal-box { background: #fff !important; border-color: #555 !important; color: #111 !important; box-shadow: 0 0 20px #888 !important; }
body.cult-light-mode .modal-text-content { color: #111 !important; }
body.cult-light-mode select { background: #eee !important; color: #111 !important; border-color: #555 !important; }
body.cult-light-mode .health-bar { background: #ccc !important; }
body.cult-light-mode .story-text { color: #222 !important; border-color:#999 !important; background: #f5f5f5 !important; padding: 10px !important;}
body.cult-light-mode p { color: #333 !important; }
body.cult-light-mode [style*="#fff"], 
body.cult-light-mode [style*="#ffffff"],
body.cult-light-mode [style*="white"],
body.cult-light-mode .h-norm,
body.cult-light-mode .q-0,
body.cult-light-mode .stat-total { 
    color: #111 !important; text-shadow: none !important;
}

/* =========================================
   ( ´_ゝ`) 勞改福利專用
   ========================================= */
.welfare-progress-bg { width: 100%; height: 20px; background: #222; border: 1px solid #0f0; border-radius: 10px; overflow: hidden; position: relative; margin-top: 10px; }
.welfare-progress-fill { height: 100%; background: linear-gradient(90deg, #004400, #0f0); width: 0%; transition: width 1s linear; }
.milestone-item { border: 1px solid #555; background: #1a1a1a; padding: 15px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s; }
.milestone-item.claimed { border-color: #333; opacity: 0.5; }
.milestone-item.unlocked { border-color: #0ff; box-shadow: 0 0 10px rgba(0, 255, 255, 0.2); }