@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=M+PLUS+1p:wght@400;700&display=swap');

:root {
  --neon-cyan: #00f3ff;
  --neon-pink: #ff00ff;
  --neon-yellow: #ffeb3b;
  --neon-green: #00ff66;
  --neon-orange: #ff5722;
  --bg-color: #05050a;
  --panel-bg: rgba(10, 15, 30, 0.85);
}

body { 
  font-family: 'Share Tech Mono', 'M PLUS 1p', sans-serif; 
  background-color: var(--bg-color); 
  background-image: 
    linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  color: #fff; 
  text-align: center; 
  margin-top: 10px; 
  user-select: none;
  overflow-x: hidden;
}

#scanlines {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 4px, 3px 100%;
  z-index: 9999; pointer-events: none; opacity: 0.6;
}

.crit-flash-bg { filter: invert(1) hue-rotate(180deg) brightness(1.5) !important; background-color: #fff !important; }
.damage-flash-bg { filter: brightness(0.5) sepia(1) hue-rotate(300deg) saturate(10) !important; }
.heal-flash-bg { filter: hue-rotate(90deg) brightness(1.5) saturate(2) !important; }

#game-container { 
  display: inline-block; max-width: 450px; width: 95%; 
  background-color: transparent; 
  padding: 10px; border-radius: 0; position: relative; z-index: 10;
}

.retro-title { 
  font-family: 'Share Tech Mono', sans-serif; font-size: 26px; 
  color: #fff; 
  text-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-pink); 
  margin-bottom: 15px; letter-spacing: 2px;
}

.cyber-window { 
  background: var(--panel-bg); border: 1px solid var(--neon-cyan); 
  box-shadow: inset 0 0 10px rgba(0, 243, 255, 0.2), 0 0 10px rgba(0, 243, 255, 0.2); 
  border-radius: 4px; padding: 12px; margin-bottom: 15px; text-align: left; position: relative; 
  backdrop-filter: blur(5px);
}
.cyber-window::before {
  content: ''; position: absolute; top: -1px; left: -1px; width: 20px; height: 20px;
  border-top: 2px solid var(--neon-cyan); border-left: 2px solid var(--neon-cyan);
}
.cyber-window::after {
  content: ''; position: absolute; bottom: -1px; right: -1px; width: 20px; height: 20px;
  border-bottom: 2px solid var(--neon-cyan); border-right: 2px solid var(--neon-cyan);
}

.status-row { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 4px; border-bottom: 1px dashed rgba(255,255,255,0.2); padding-bottom: 2px; }
.neon-text { color: var(--neon-cyan); text-shadow: 0 0 5px var(--neon-cyan); font-weight: bold; }
.neon-text-yellow { color: var(--neon-yellow); text-shadow: 0 0 5px var(--neon-yellow); font-weight: bold; }
.equip-text { color: var(--neon-yellow); font-size: 13px; }
.potion-text { color: var(--neon-green); font-size: 14px; text-shadow: 0 0 5px var(--neon-green); }
.material-box { font-size: 13px; color: #ccc; margin-top: 8px; background: rgba(0,0,0,0.6); padding: 6px; border: 1px solid #444; border-radius: 4px; font-family: monospace; }

.section-title { color: var(--neon-green); font-weight: bold; text-align: center; text-shadow: 0 0 5px var(--neon-green); letter-spacing: 1px; }
.system-msg { text-align: center; color: var(--neon-orange); font-size: 14px; text-shadow: 0 0 4px var(--neon-orange); margin: 8px 0; }

.facility-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 15px; }
.facility { background-color: rgba(0,0,0,0.5); border: 1px solid #333; padding: 8px; text-align: center; border-radius: 4px; transition: border-color 0.2s; }
.facility:hover { border-color: var(--neon-cyan); }
.facility p { font-size: 13px; margin-bottom: 6px; color: #ddd; }

/* Buttons base */
button { 
  font-family: 'M PLUS 1p', sans-serif; font-weight: bold;
  background: rgba(0,0,0,0.6); color: #fff; border: 1px solid #fff; 
  border-radius: 3px; cursor: pointer; padding: 6px 0; width: 100%; transition: all 0.2s ease; 
  text-transform: uppercase; letter-spacing: 1px;
}
button:active { transform: scale(0.95); }
.locked { color: #555 !important; border-color: #333 !important; background-color: #111 !important; cursor: not-allowed; text-shadow: none !important; box-shadow: none !important; }

/* Cyber Buttons */
.btn-blue { border-color: var(--neon-cyan); color: var(--neon-cyan); box-shadow: 0 0 5px rgba(0,243,255,0.3) inset; }
.btn-blue:hover { background: var(--neon-cyan); color: #000; box-shadow: 0 0 10px var(--neon-cyan); }
.btn-green { border-color: var(--neon-green); color: var(--neon-green); box-shadow: 0 0 5px rgba(0,255,102,0.3) inset; }
.btn-green:hover { background: var(--neon-green); color: #000; box-shadow: 0 0 10px var(--neon-green); }
.btn-cyan { border-color: #0df; color: #0df; box-shadow: 0 0 5px rgba(0,221,255,0.3) inset; }
.btn-cyan:hover { background: #0df; color: #000; box-shadow: 0 0 10px #0df; }
.btn-pink { border-color: var(--neon-pink); color: var(--neon-pink); box-shadow: 0 0 5px rgba(255,0,255,0.3) inset; }
.btn-pink:hover { background: var(--neon-pink); color: #000; box-shadow: 0 0 10px var(--neon-pink); }
.btn-orange { border-color: var(--neon-orange); color: var(--neon-orange); box-shadow: 0 0 5px rgba(255,87,34,0.3) inset; }
.btn-orange:hover { background: var(--neon-orange); color: #000; box-shadow: 0 0 10px var(--neon-orange); }

/* Mission List */
#dungeon-list { max-height: 280px; overflow-y: auto; padding-right: 5px; }
#dungeon-list::-webkit-scrollbar { width: 4px; }
#dungeon-list::-webkit-scrollbar-thumb { background: var(--neon-cyan); border-radius: 2px; }

.unit-box { border: 1px solid #333; padding: 10px; margin-bottom: 12px; background-color: rgba(0,0,0,0.6); position: relative; }
.unit-box::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--neon-cyan); }
.unit-title { font-size: 14px; margin-bottom: 8px; font-weight: bold; color: var(--neon-yellow); border-bottom: 1px solid #222; padding-bottom: 4px; }

.stage-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-buttons button { font-size: 13px; padding: 8px 4px; flex-grow: 1; min-width: 30%; border-color: #aaa; color: #ddd; }
.stage-buttons button:hover:not(.locked) { background: #fff; color: #000; box-shadow: 0 0 8px #fff; }

.btn-green-alt { border-color: var(--neon-green) !important; color: var(--neon-green) !important; }
.btn-green-alt:hover:not(.locked) { background: var(--neon-green) !important; color: #000 !important; }
.btn-orange-alt { border-color: var(--neon-orange) !important; color: var(--neon-orange) !important; }
.btn-orange-alt:hover:not(.locked) { background: var(--neon-orange) !important; color: #000 !important; }
.btn-boss { border-color: var(--neon-pink) !important; color: var(--neon-pink) !important; background: rgba(255,0,255,0.1) !important; font-weight: bold !important; }
.btn-boss:hover:not(.locked) { background: var(--neon-pink) !important; color: #000 !important; box-shadow: 0 0 15px var(--neon-pink) !important; }

/* Mini Map */
#mini-map { 
  display: grid; grid-template-columns: repeat(7, 45px); grid-template-rows: repeat(7, 45px); gap: 2px; 
  justify-content: center; background-color: #050505; padding: 6px; border: 2px solid var(--neon-cyan); 
  margin: 0 auto; width: fit-content; box-shadow: 0 0 15px rgba(0,243,255,0.2);
}
.map-cell { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: #111; border: 1px solid #222; }
.fog { background-color: #000 !important; border-color: #000 !important; color: #000 !important; text-shadow: none !important; }
.fog * { display: none !important; }

/* Cyber Map Themes */
.theme-grass { border-color: var(--neon-green) !important; box-shadow: 0 0 15px rgba(0,255,102,0.2) !important; }
.theme-grass .map-cell { background-color: rgba(0, 255, 102, 0.1); border-color: rgba(0, 255, 102, 0.3); }
.theme-cave { border-color: var(--neon-cyan) !important; }
.theme-cave .map-cell { background-color: rgba(0, 243, 255, 0.1); border-color: rgba(0, 243, 255, 0.3); }
.theme-lava { border-color: var(--neon-orange) !important; box-shadow: 0 0 15px rgba(255,87,34,0.2) !important; }
.theme-lava .map-cell { background-color: rgba(255, 87, 34, 0.15); border-color: rgba(255, 87, 34, 0.4); }
.theme-boss { border-color: var(--neon-pink) !important; box-shadow: 0 0 20px rgba(255,0,255,0.3) !important; }
.theme-boss .map-cell { background-color: rgba(255, 0, 255, 0.15); border-color: rgba(255, 0, 255, 0.4); }
.theme-star { border-color: #a020f0 !important; box-shadow: 0 0 15px rgba(160,32,240,0.3) !important; }
.theme-star .map-cell { background-color: rgba(160, 32, 240, 0.15); border-color: rgba(160, 32, 240, 0.4); }

.star-entity { color: var(--neon-yellow); text-shadow: 0 0 10px var(--neon-yellow); animation: twinkle 1s infinite alternate; }
@keyframes twinkle { from { opacity: 0.3; transform: scale(0.9); } to { opacity: 1; transform: scale(1.1); } }
.map-entity { font-size: 24px; filter: drop-shadow(0 0 5px rgba(255,255,255,0.8)); }
.wall-entity { font-size: 24px; color: #333; text-shadow: none; filter: grayscale(1); }

/* D-Pad */
.d-pad-layout { display: grid; grid-template-columns: 65px 65px 65px; grid-template-rows: 65px 65px; gap: 8px; justify-content: center; margin-top: 15px; }
.d-pad { font-size: 28px; background: rgba(0, 243, 255, 0.1); border: 2px solid var(--neon-cyan); color: var(--neon-cyan); border-radius: 8px; box-shadow: inset 0 0 10px rgba(0,243,255,0.2); }
.d-pad:active { background: var(--neon-cyan); color: #000; box-shadow: 0 0 20px var(--neon-cyan); }
.up-btn { grid-column: 2; grid-row: 1; } .left-btn { grid-column: 1; grid-row: 2; } .down-btn { grid-column: 2; grid-row: 2; } .right-btn { grid-column: 3; grid-row: 2; }

/* Battle Inputs */
.cyber-input { 
  font-family: 'Share Tech Mono', monospace; font-size: 24px; 
  background-color: rgba(0,0,0,0.8); color: var(--neon-cyan); 
  border: 1px solid var(--neon-cyan); border-radius: 0; padding: 4px 8px; 
  box-shadow: inset 0 0 5px var(--neon-cyan); text-shadow: 0 0 5px var(--neon-cyan);
}
.cyber-input:focus { outline: none; border-color: var(--neon-pink); color: var(--neon-pink); box-shadow: inset 0 0 10px var(--neon-pink); text-shadow: 0 0 5px var(--neon-pink); }
.hacker-math { font-size: 20px; margin-bottom: 15px; text-align: center; white-space: pre-wrap; font-family: 'Share Tech Mono', monospace; color: #fff; text-shadow: 0 0 5px rgba(255,255,255,0.5); }

.memo-input { 
  width: 24px; height: 24px; font-size: 14px; text-align: center; background-color: transparent; 
  color: var(--neon-pink); border: 1px dashed var(--neon-pink); padding: 0; font-family: 'Share Tech Mono', monospace; 
}
.memo-input:focus { outline: none; border: 1px solid var(--neon-yellow); color: var(--neon-yellow); background: rgba(255,235,59,0.1); }

/* Numpad */
#numpad-container { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 15px; background: rgba(0,0,0,0.4); padding: 12px; border: 1px solid #333; border-radius: 4px; }
#numpad-container button { 
  height: 60px; font-size: 24px; font-family: 'Share Tech Mono', monospace; 
  background: rgba(0,243,255,0.05); border: 1px solid var(--neon-cyan); color: var(--neon-cyan); 
  border-radius: 4px; box-shadow: inset 0 0 5px rgba(0,243,255,0.2);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  padding: 0; line-height: 1.1;
}
#numpad-container button:active { background: var(--neon-cyan); color: #000; box-shadow: 0 0 15px var(--neon-cyan); transform: scale(0.9); }
.btn-hack { background: rgba(255,0,255,0.1) !important; border-color: var(--neon-pink) !important; color: var(--neon-pink) !important; font-size: 14px !important; }

/* Animations */
.shake-effect { animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-6px, 0, 0); } 40%, 60% { transform: translate3d(6px, 0, 0); } }
.hit-anim { animation: hitGlitch 0.3s; filter: invert(1) drop-shadow(0 0 20px red); }
@keyframes hitGlitch { 0%{transform:translate(0)} 20%{transform:translate(-10px, 5px) skewX(-20deg)} 40%{transform:translate(10px, -5px) skewX(20deg)} 60%{transform:translate(-5px, 10px) skewX(-10deg)} 80%{transform:translate(5px, -10px) skewX(10deg)} 100%{transform:translate(0) skewX(0)} }
.player-anim { animation: hoverMove 2s infinite ease-in-out; filter: drop-shadow(0 0 8px var(--neon-cyan)); }
@keyframes hoverMove { 0%, 100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.effect-slash { position: absolute; width: 0; height: 8px; background: #fff; border-radius: 4px; animation: slashAnim 0.2s ease-out forwards; }
@keyframes slashAnim { 0% { width: 0; opacity: 1; margin-left: -50px; } 50% { width: 140px; opacity: 1; margin-left: 0; } 100% { width: 140px; opacity: 0; filter: brightness(3); margin-left: 30px; } }
.effect-boom { position: absolute; font-size: 100px; line-height: 1; text-shadow: 0 0 30px #ff00ff; animation: boomAnim 0.3s ease-out forwards; opacity: 0; mix-blend-mode: screen; }
@keyframes boomAnim { 0% { transform: scale(0.2); opacity: 1; } 50% { transform: scale(1.5) rotate(15deg); opacity: 1; filter: brightness(2); } 100% { transform: scale(1.8) rotate(30deg); opacity: 0; } }

#companions-list img, #companions-list .map-entity {
  position: static !important; width: auto !important; height: 1.2em !important; 
  font-size: 1.2em !important; vertical-align: middle !important;
  display: inline-block !important; margin-right: 5px !important; filter: drop-shadow(0 0 3px rgba(255,255,255,0.5)) !important;
}
</style>