44r0n7
622a9fd170
Inverted tower-defense browser game — deploy enemies yourself, tower auto-kills them, pocket credits, upgrade weapons. HTML + Canvas + vanilla JS, no build step. Co-Authored-By: claude-flow <ruv@ruv.net>
105 lines
2.4 KiB
CSS
105 lines
2.4 KiB
CSS
/* ── DEV CONSOLE ── */
|
|
#dev-console {
|
|
display: none;
|
|
position: fixed;
|
|
bottom: 80px; left: 20px;
|
|
width: 520px;
|
|
max-height: 340px;
|
|
z-index: 500;
|
|
background: rgba(2,6,10,0.97);
|
|
border: 1px solid #00d4ff;
|
|
box-shadow: 0 0 24px rgba(0,212,255,0.3);
|
|
flex-direction: column;
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 12px;
|
|
}
|
|
#dev-console.open { display: flex; }
|
|
#dev-console-header {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
padding: 6px 12px;
|
|
background: rgba(0,212,255,0.12);
|
|
border-bottom: 1px solid #00d4ff44;
|
|
color: #00d4ff;
|
|
font-size: 11px;
|
|
letter-spacing: 3px;
|
|
}
|
|
#dev-console-hint { font-size: 9px; opacity: 0.5; }
|
|
#dev-output {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 8px 12px;
|
|
max-height: 260px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.dev-line { line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
|
|
.dev-line.out { color: #b8d8e8; }
|
|
.dev-line.ok { color: #00ff88; }
|
|
.dev-line.err { color: #ff3355; }
|
|
.dev-line.info { color: #00d4ff; }
|
|
.dev-line.warn { color: #ffd700; }
|
|
#dev-input-row {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 6px 12px;
|
|
border-top: 1px solid #00d4ff22;
|
|
}
|
|
#dev-prompt { color: #00d4ff; opacity: 0.7; white-space: nowrap; }
|
|
#dev-input {
|
|
flex: 1; background: transparent; border: none; outline: none;
|
|
color: #fff; font-family: 'Share Tech Mono', monospace; font-size: 12px;
|
|
caret-color: #00d4ff;
|
|
}
|
|
|
|
/* ── PERFORMANCE OVERLAY ── */
|
|
#perf-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 74px;
|
|
left: 16px;
|
|
z-index: 80;
|
|
min-width: 140px;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 11px;
|
|
color: #b8d8e8;
|
|
background: rgba(2, 6, 10, 0.92);
|
|
border: 1px solid #00d4ff66;
|
|
box-shadow: 0 0 16px rgba(0, 212, 255, 0.25);
|
|
padding: 7px 9px;
|
|
}
|
|
|
|
#perf-overlay .perf-title {
|
|
color: #00d4ff;
|
|
font-size: 10px;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
#perf-overlay .perf-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
#perf-overlay .perf-row span:first-child {
|
|
color: #6ea0b8;
|
|
}
|
|
|
|
#perf-overlay .perf-row span:last-child {
|
|
color: #d8ecff;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
#perf-overlay {
|
|
top: 68px;
|
|
left: 8px;
|
|
font-size: 10px;
|
|
min-width: 124px;
|
|
padding: 6px 8px;
|
|
}
|
|
}
|