* { box-sizing: border-box; }
html, body, #app { height: 100%; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; background: #0f0f10; color: #e7e2d8; overflow: hidden; }
#app { display: grid; grid-template-rows: auto 1fr auto; height: 100vh; }
#top-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #2c2a28; border-bottom: 2px solid #3d3a37; }
#top-bar .title { display: flex; align-items: center; gap: 8px; font-variant: small-caps; letter-spacing: 1px; color: #e5c07b;}
#top-bar .title-logo { height: 28px; width: auto; display: inline-block; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4)); vertical-align: -9px; margin-right: 5px; }
#top-bar .title h1 { margin: 0; font-size: 1em; font-weight: normal; }
#top-bar .controls { display: flex; gap: 8px; align-items: center; }
#top-bar button { background: #4b3a22; color: #f4e6c2; border: 1px solid #6b4a2a; padding: 6px 10px; cursor: pointer; border-radius: 4px; }
#top-bar button:hover { filter: brightness(1.1); }
#main { display: grid; grid-template-columns: 1fr 320px; min-height: 0; align-items: stretch; background-color: #39352f;}
#game-canvas { width: 100%; height: calc(100vh - var(--topbar-h, 50px) - var(--bottombar-h, 0px)); display: block; background: radial-gradient(ellipse at top, #1b1b1d 0%, #121214 60%, #0f0f10 100%); }
#sidebar { background: #1b1a18; border-left: 2px solid #3d3a37; overflow-y: auto; padding: 12px; position: relative; height: calc(100vh - 50px);}
.sidebar-section { margin-bottom: 16px; }
.section-title { color: #d19a66; margin-bottom: 6px; border-bottom: 1px dashed #5a4a3a; padding-bottom: 4px; }
.toolbox, .upgrades { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool-btn { background: #3a2a1a; border: 1px solid #6b4a2a; color: #f4e6c2; padding: 8px; border-radius: 4px; cursor: pointer;}
.tool-btn.selected { outline: 2px solid #e5c07b; }
.price { color: #98c379; }
.tool-btn--sell { background: #5a2323; border: 1px solid #a04444; color: #ffecec; }
.tool-btn--select { background: #203a5a; border: 1px solid #3a6ba0; color: #e6f0ff; }
/* Tower toolbox buttons */
.tool-btn--tower { display: grid; grid-template-rows: auto auto; align-items: center; gap: 6px; padding: 8px; height: 116px; position: relative; width: 145px;}
.tool-btn__icon { width: 100%; height: 75px; object-fit: contain; }
.tool-btn__icon--placeholder { display: block; }
.tool-btn__footer { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; }
.tool-btn__name { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-btn--tower .tool-btn__info { display: none; position: absolute; right: 5px; top: 5px; width: 28px; height: 28px; border-radius: 50%; background: #1b1a18; border: 1px solid #3d3a37; color: #e5c07b; box-shadow: 0 2px 8px rgba(0,0,0,0.5); place-items: center; }
.tool-btn--tower .tool-btn__info i { pointer-events: none; }
@media (max-width: 900px) {
.tool-btn--tower { position: relative; }
.tool-btn--tower .tool-btn__info { display: grid; }
}
/* Disabled state for toolbox buttons */
.tool-btn:disabled { opacity: 0.5; filter: grayscale(0.8); cursor: not-allowed; }
.tool-btn--tower:disabled .tool-btn__icon { filter: grayscale(1) brightness(0.8); }
#bottom-bar { height: 241px; background: #2c2a28; border-top: 2px solid #3d3a37; display: grid; grid-template-columns: 3fr 2fr; gap: 8px; padding: 8px 12px; }
#selection-info { background: #1b1a18; border: 1px solid #3d3a37; padding: 8px; overflow: auto; }
#log { background: #1b1a18; border: 1px solid #3d3a37; padding: 8px; overflow: auto; }
.enemy-info { display: grid; grid-template-columns: 1fr 1fr 280px; gap: 15px; align-items: stretch; }
.enemy-identity {
display: grid;
grid-template-columns:
auto 1fr;
gap: 15px;
height: 100%;
color: #c7ffde;
font-weight: 600;
letter-spacing: 2px;
opacity: 0.95;
font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
text-shadow: 0 0 6px rgba(99, 255, 175, 0.7), 0 0 12px rgba(99, 255, 175, 0.5), 0 0 20px rgba(99, 255, 175, 0.35);}
/* Enemy/tower icon with monochrome green, glow, and scan lines */
.enemy-icon {
position: relative;
height: 100%;
width: auto;
max-width: 130px;
object-fit: contain;
image-rendering: pixelated;
background: rgba(0,0,0,0.3);
border: none;
border-radius: 4px;
/* Monochrome green filter with glow */
filter:
sepia(100%)
saturate(200%)
hue-rotate(85deg)
brightness(1.1)
contrast(1.2);
/* Scan lines overlay */
background-image:
repeating-linear-gradient(
0deg,
transparent,
transparent 1px,
rgba(0, 255, 100, 0.3) 2px,
rgba(0, 255, 100, 0.3) 3px
);
background-size: 100% 4px;
animation: scan-lines 2s linear infinite;
}
/* Scan lines animation */
@keyframes scan-lines {
0% { background-position: 0 0; }
100% { background-position: 0 4px; }
}
.enemy-name { line-height: 1.1; font-size: 20px}
.enemy-desc { margin-top: 6px; font-size: 0.90em; }
.enemy-stats { padding-right: 12px; }
/* Left column should stack identity and targeting with targeting at bottom */
.enemy-left { display: flex; flex-direction: column; }
.enemy-left .targeting { margin-top: auto; }
.targeting { padding-right: 12px; height: 100%; }
.targeting-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.targeting .tool-btn { padding: 0; display: grid; place-items: center; aspect-ratio: 1 / 1; font-size: 1.8em; }
.targeting .tool-btn i { pointer-events: none; }
.targeting .tool-btn.selected { outline: 2px solid #c7ffde; box-shadow: 0 0 10px rgba(99,255,175,0.25) inset; }
/* Tower selection info */
.tower-info { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tower-left { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; }
.tower-icon { width: 72px; height: 72px; object-fit: contain; image-rendering: pixelated; background: #111; border: 1px solid #333; border-radius: 4px; }
/* Tooltip */
.tooltip { position: fixed; z-index: 2000; max-width: 320px; background: #1b1a18; color: #e7e2d8; border: 1px solid #3d3a37; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,0.5); padding: 8px; pointer-events: none; }
.tooltip .tooltip-close { display: none; position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border-radius: 4px; background: #5a2323; color: #ffecec; border: 1px solid #a04444; cursor: pointer; pointer-events: auto; }
@media (max-width: 900px) {
.tooltip { pointer-events: auto; }
.tooltip .tooltip-close { display: block; }
}
.tower-tooltip .tt-title { color: #e5c07b; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tower-tooltip .tt-desc { color: #cfc7b8; margin-bottom: 6px; }
.tower-tooltip .tt-stats { display: grid; gap: 2px; }
.stat { display: flex; justify-content: space-between; border-bottom: 1px dotted #555; padding: 2px 0; }
.badge { display: inline-flex; align-items: center; padding: 2px 6px; margin: -2px 0px -5px 0px; border-radius: 9px; background: #444; border: 1px solid #1b0c02; }
.damage-type-icon { image-rendering: pixelated; margin: -3px 5px -3px -6px;}
.badge.arrow { background: #c69c6d; color: #112; }
.badge.explosive { background: #e06666; color: #221; }
.badge.electric { background: #8bf; color: #112; }
.badge.magnet { background: #bf8; color: #121; }
.badge.support { background: #ccf; color: #112; }
.badge.energy { background: #44e4c0; color: #112; }
/* Settings modal */
.modal.hidden { display: none; }
.modal { position: fixed; inset: 0; z-index: 1000; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.modal-dialog { position: relative; width: 520px; max-width: calc(100% - 24px); margin: 10vh auto; background: #1b1a18; border: 2px solid #3d3a37; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #3d3a37; }
.modal-title { font-weight: 600; color: #e5c07b; }
.modal-close { background: #5a2323; color: #ffecec; border: 1px solid #a04444; padding: 6px 10px; cursor: pointer; border-radius: 4px; }
.modal-tabs { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #3d3a37; }
.tab { background: #3a2a1a; color: #f4e6c2; border: 1px solid #6b4a2a; padding: 6px 10px; cursor: pointer; border-radius: 4px; }
.tab.active { outline: 2px solid #e5c07b; }
.modal-content { padding: 12px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* Game over modal can reuse the same styles; no extra rules needed */
.slider-row { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 12px; }
.slider-row label { display: flex; align-items: center; justify-content: space-between; }
.slider-row input[type="range"] { width: 100%; accent-color: #e5c07b; }
/* Simple rows for map modal */
.form-row { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 12px; }
/* Waves panel in sidebar */
.sidebar-section--waves { position: absolute; bottom: 0; width: calc(100% - 25px); }
.wave-panel { position: relative; background: #121110; border: 1px solid #3d3a37; border-radius: 8px; padding: 10px 20px; min-height: 88px; }
.wave-display { font-size: 2em; line-height: 2em; color: #c7ffde; font-weight: 600; letter-spacing: 2px; opacity: 0.95; height: 100%; display: flex; align-items: center; padding-right: 70px; font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; text-shadow: 0 0 6px rgba(99, 255, 175, 0.7), 0 0 12px rgba(99, 255, 175, 0.5), 0 0 20px rgba(99, 255, 175, 0.35); }
.wave-button { position: absolute; right: 55px; top: 50%; width: 64px; height: 64px; border-radius: 50%; border: 2px solid #6b4a2a; background: radial-gradient(circle at 30% 30%, #6b4a2a, #4b3a22 60%, #3a2a1a 100%); color: #f4e6c2; cursor: pointer; box-shadow: 0 8px 18px rgba(0,0,0,0.5); display: grid; place-items: center; transform: translateY(-50%); }
.wave-button:hover { filter: brightness(1.1); box-shadow: 0 10px 22px rgba(0,0,0,0.6); }
.wave-button:active { transform: translateY(calc(-50% + 1px)); }
.wave-button i { font-size: 28px; }
/* Wave title + subtext layout */
.wave-display { flex-direction: column; align-items: flex-start; justify-content: center; }
.wave-title { font-size: 1em; line-height: 1.4; }
.wave-name { font-size: 0.40em; line-height: 2; color: #bfe9d0; letter-spacing: 1.2px; opacity: 0.9; }
/* Fast speed crescent toggle */
.wave-panel .wave-button { z-index: 2; }
/* Square body with left-side circular bite */
.speed-toggle { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 64px; height: 44px; border-radius: 6px; border: 2px solid #6b4a2a; background: linear-gradient(180deg, #4b3a22, #3a2a1a); color: #f4e6c2; cursor: pointer; box-shadow: 0 8px 18px rgba(0,0,0,0.5); z-index: 1; display: grid; place-items: center; padding: 0 0 0 20px;}
.speed-toggle i { font-size: 18px; }
/* Thin inner rim */
.speed-toggle:hover { filter: brightness(1.08); }
.speed-toggle.active { border-color: #e5c07b; box-shadow: 0 0 12px rgba(229,192,123,0.35), 0 8px 18px rgba(0,0,0,0.5); }
/* Image backdrops for welcome/defeat */
.modal-backdrop--image { background-size: cover; background-position: center; background-repeat: no-repeat; }
.modal-backdrop--image.welcome { background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url('./src/misc_images/welcome.png'); }
.modal-backdrop--image.defeat { background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)), url('./src/misc_images/defeat.png'); }
.modal-backdrop--image.victory {background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)), url('./src/misc_images/victory.png');}
/* Modal hero logo */
.modal-hero-logo { display: grid; place-items: center; padding-top: 18px; }
.modal-hero-logo img { width: 100%; filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6)); }
/* Welcome modal layout overrides */
#welcome-modal .modal-dialog { width: 720px; max-width: min(92vw, 920px); margin: 25vh auto; background: rgba(27,26,24,0.88); border-color: rgba(255,255,255,0.08); backdrop-filter: blur(2px); }
#welcome-modal .modal-header { display: none; }
#welcome-modal .modal-hero-logo { display: grid; place-items: center; padding-top: 12px; }
#welcome-modal .modal-hero-logo img { height: clamp(180px, 38vh, 420px); width: auto; filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6)); }
#welcome-modal .modal-content { padding: 16px 18px 22px; text-align: center; }
#welcome-modal .modal-content p { margin: 0 0 14px; font-size: 1.05rem; color: #e7e2d8; }
#welcome-modal .modal-content > div { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
#welcome-modal .tab { padding: 10px 16px; font-size: 1.05rem; }
/* Welcome progress */
#welcome-progress { position: relative; height: 10px; background: #2b2a28; border: 1px solid #3d3a37; border-radius: 6px; overflow: hidden; margin: 10px auto 12px; max-width: 420px; }
#welcome-progress .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, #6b4a2a, #e5c07b); box-shadow: 0 0 12px rgba(229,192,123,0.35) inset; transition: width 120ms ease-out; }
#welcome-progress-text { font-family: 'Share Tech Mono', ui-monospace, monospace; letter-spacing: 1px; color: #d3c6a6; margin-bottom: 6px; }
@media (max-width: 520px) {
#welcome-modal .modal-dialog { width: 96vw; margin: 4vh auto; }
#welcome-modal .modal-hero-logo img { height: clamp(140px, 28vh, 280px); }
#welcome-modal .tab { flex: 1 1 120px; }
}
/* Game over modal layout overrides */
#gameover-modal .modal-dialog { width: 640px; max-width: min(92vw, 820px); margin: 8vh auto; background: rgba(27,26,24,0.9); border-color: rgba(255,255,255,0.08); }
#gameover-modal .modal-hero-logo { display: grid; place-items: center; padding-top: 10px; }
#gameover-modal .modal-hero-logo img { height: clamp(160px, 32vh, 360px); width: auto; filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6)); }
#gameover-modal .modal-header { padding: 10px 16px; }
#gameover-modal .modal-title { color: #f2adad; letter-spacing: 1px; }
#gameover-modal .modal-content { padding: 16px 18px 22px; text-align: center; }
#gameover-modal .modal-content p { margin: 0 0 14px; font-size: 1.05rem; color: #ffe3e3; }
#gameover-modal .modal-content > div { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
#gameover-modal .tab { background: #5a2323; border: 1px solid #a04444; color: #ffecec; padding: 10px 16px; font-size: 1.05rem; }
#gameover-modal .tab:hover { filter: brightness(1.05); }
/* Disabled buttons */
.tab:disabled { opacity: 0.6; cursor: not-allowed; filter: grayscale(0.7); }
@media (max-width: 520px) {
#gameover-modal .modal-dialog { width: 96vw; margin: 5vh auto; }
#gameover-modal .modal-hero-logo img { height: clamp(120px, 26vh, 240px); }
#gameover-modal .tab { flex: 1 1 140px; }
}
/* Map presets grid */
.map-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.map-card { background: #121110; border: 1px solid #3d3a37; border-radius: 6px; padding: 8px; cursor: pointer; display: grid; grid-template-rows: auto auto; gap: 8px; align-items: center; text-align: center; }
.map-card:hover { filter: brightness(1.05); }
.map-card.selected { outline: 2px solid #e5c07b; box-shadow: 0 0 10px rgba(229,192,123,0.25) inset; }
.map-thumb { width: 100%; height: 80px; object-fit: cover; background: #0f0f10; border: 1px dashed #3d3a37; border-radius: 4px; }
.map-card .label { font-weight: 600; color: #e7e2d8; }
/* Top bar indicators and right-aligned controls */
#top-bar .indicators { display: flex; gap: 8px; align-items: center; flex: 1 1 auto; padding: 0 12px; }
.indicator { display: flex; align-items: center; gap: 8px; background: #1b1a18; border: 1px solid #3d3a37; border-radius: 6px; padding: 6px 10px; }
.indicator i { color: #e5c07b; }
.indicator--funds i { color: #d4af37; }
.indicator--hq i { color: #8ecae6; }
#funds-display, #hq-hp-display { color: #c7ffde; font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; text-shadow: 0 0 6px rgba(99, 255, 175, 0.5), 0 0 6px rgba(99, 255, 175, 0.4), 0 0 10px rgba(99, 255, 175, 0.25);}
#top-bar .top-right { width: 320px; display: flex; justify-content: flex-end; gap: 8px; }
#top-bar .icon-button { background: #4b3a22; color: #f4e6c2; border: 1px solid #6b4a2a; padding: 6px 10px; cursor: pointer; border-radius: 4px; display: grid; place-items: center; }
#top-bar .icon-button:hover { filter: brightness(1.1); }
#top-bar .icon-button i { font-size: 18px; }
#btn-sidebar-toggle { display: none !important; }
/* Responsive: mobile widths */
@media (max-width: 900px) {
#top-bar { padding: 6px 8px; }
#top-bar .title { font-size: 0.95rem; gap: 6px; }
#top-bar .title-logo { height: 22px; margin-right: 4px; vertical-align: -6px; }
#top-bar .top-right { width: auto; gap: 6px; }
#top-bar .icon-button { padding: 6px 8px; }
#btn-sidebar-toggle { display: grid !important; }
#main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; min-height: 0;}
#game-canvas { min-height: 0; }
#sidebar { height: auto; max-height: none; min-height: 0;}
/* Let waves panel flow instead of absolute on small screens */
.sidebar-section--waves { position: static; width: 100%; }
.toolbox, .upgrades { grid-template-columns: 1fr; }
.tool-btn--tower { height: 96px; }
.tool-btn__icon { height: 60px; }
#bottom-bar { grid-template-columns: 1fr; min-height: 110px; max-height: 36vh; }
.enemy-info { grid-template-columns: 1fr; }
.targeting-grid { grid-template-columns: repeat(6, 1fr); }
.enemy-icon { max-width: 80px;}
}
@media (max-width: 520px) {
#top-bar .title { display: none; }
#top-bar .indicators { padding: 0 6px; gap: 6px; }
.indicator { gap: 6px; padding: 4px 6px; }
#funds-display, #hq-hp-display { font-size: 0.9em; }
.tool-btn--tower { height: 92px; padding: 6px; }
.tool-btn__icon { height: 56px; }
.sidebar { width: 42vw; }
.wave-button { width: 52px; height: 52px; right: 12px; }
.wave-button i { font-size: 24px; }
#bottom-bar { min-height: 100px; max-height: 32vh; }
}
@media (max-height: 580px) {
#bottom-bar { display: none; }
#sidebar { height: 44vh; }
}
/* Touch/overscroll tweaks for mobile */
html, body { overscroll-behavior: none; }
#game-canvas { touch-action: none; }
/* Prefer dynamic viewport height on supported browsers (mobile address bars) */
@supports (height: 100dvh) {
#app { height: 100dvh; }
}
/* Mobile off-canvas sidebar */
@media (max-width: 900px) {
body.sidebar-open #sidebar { transform: translateX(0%); box-shadow: -6px 0 20px rgba(0,0,0,0.5); }
#sidebar { transition: transform 180ms ease; transform: translateX(100%); position: fixed; right: 0; top: var(--topbar-h, 50px); bottom: 0; max-height: none; z-index: 900; }
#main { grid-template-columns: 1fr; }
}
/* Sidebar backdrop overlay (mobile) */
.sidebar-backdrop { position: fixed; left: 0; right: 0; top: var(--topbar-h, 50px); bottom: 0; background: rgba(0,0,0,0.45); display: none; z-index: 850; }
body.sidebar-open .sidebar-backdrop { display: block; }
/* Ensure mobile sidebar overlays main content properly */
@media (max-width: 900px) {
#sidebar { z-index: 1200; }
}
@media (max-width: 900px) {
#log { display: none; }
#bottom-bar { grid-template-columns: 1fr; }
}
/* Mobile wave overlay (full width, bottom-floating) */
.wave-overlay { display: none; }
.wave-overlay .wave-overlay-content { background: rgba(18,17,16,0.42); border: 1px solid #3d3a37; border-radius: 30px; padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; backdrop-filter: blur(2px); }
.wave-display-mobile { font-size: 1.2em; line-height: 1.2; color: #c7ffde; letter-spacing: 1.2px; font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; text-shadow: 0 0 6px rgba(99, 255, 175, 0.35); }
.wave-overlay .wave-button { width: 44px; height: 44px; position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 2; }
/* Mobile crescent toggle as square with left bite meshing with 44px circle */
.wave-overlay .speed-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 54px; height: 36px; border-radius: 30px; border: 2px solid #6b4a2a; background: linear-gradient(180deg, #4b3a22, #3a2a1a); color: #f4e6c2; cursor: pointer; box-shadow: 0 8px 18px rgba(0,0,0,0.5); z-index: 1; display: grid; place-items: center; }
.wave-overlay .speed-toggle i { font-size: 16px; }
.wave-overlay .speed-toggle.active { border-color: #e5c07b; box-shadow: 0 0 10px rgba(229,192,123,0.3), 0 8px 18px rgba(0,0,0,0.5); }
@media (max-width: 900px) {
/* hide sidebar wave card on mobile */
.sidebar-section--waves { display: none; }
/* show overlay and position it floating over the map */
.wave-overlay { display: block; position: fixed; left: 8px; right: 8px; bottom: calc(var(--bottombar-h, 0px) + 8px); z-index: 900; }
}
.upgrades .tool-btn--upgrade { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.upgrades .tool-btn--upgrade .tool-btn__info { display: none; color: #e5c07b; opacity: 0.9; }
.upgrades .tool-btn--upgrade .tool-btn__info i { pointer-events: none; }
@media (max-width: 900px) {
.upgrades .tool-btn--upgrade { position: relative; padding-right: 40px; }
.upgrades .tool-btn--upgrade .tool-btn__info { display: grid; place-items: center; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: #1b1a18; border: 1px solid #3d3a37; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
}
/* end mobile styling */
/* Victory modal deluxe styling */
#victory-modal .modal-dialog {
position: relative;
overflow: hidden;
border: 2px solid transparent;
background: linear-gradient(rgba(27,26,24,0.92), rgba(27,26,24,0.92)) padding-box,
linear-gradient(135deg, rgba(139,90,43,0.8), rgba(212,175,55,0.85), rgba(139,90,43,0.8)) border-box;
box-shadow: 0 16px 50px rgba(0,0,0,0.6), 0 0 24px rgba(212,175,55,0.15) inset;
}
#victory-modal .modal-dialog::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px),
radial-gradient(rgba(255,215,128,0.16) 1px, transparent 1px);
background-size: 120px 120px, 180px 180px;
background-position: 0 0, 60px 30px;
animation: victory-twinkle 14s linear infinite;
}
@keyframes victory-twinkle { to { background-position: 120px 120px, 240px 210px; } }
#victory-modal .modal-title { color: #ffe8a3; letter-spacing: 1px; text-shadow: 0 0 10px rgba(229,192,123,0.5), 0 0 18px rgba(229,192,123,0.35); }
#victory-modal .modal-content {
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0));
border-radius: 6px;
}
/* Medal shimmer and glow */
#victory-medal {
position: relative;
display: inline-block; padding: 6px 12px; margin-left: 6px; border-radius: 999px;
font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
border: 1px solid rgba(255,255,255,0.15);
box-shadow: 0 8px 24px rgba(0,0,0,0.45), inset 0 0 10px rgba(255,255,255,0.08);
}
#victory-medal.gold {
background: linear-gradient(120deg, #ffd166, #d4af37, #ffd166);
background-size: 220% 220%; color: #3a2a1a;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
border-color: rgba(212,175,55,0.7);
box-shadow: 0 8px 28px rgba(212,175,55,0.35), inset 0 0 10px rgba(255,255,255,0.12);
animation: medal-sheen 3s linear infinite;
}
#victory-medal.silver {
background: linear-gradient(120deg, #f0f0f0, #bfbfbf, #f0f0f0);
background-size: 220% 220%; color: #1b1a18;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
border-color: rgba(200,200,200,0.7);
box-shadow: 0 8px 28px rgba(170,170,170,0.35), inset 0 0 10px rgba(255,255,255,0.12);
animation: medal-sheen 3.2s linear infinite;
}
#victory-medal.bronze {
background: linear-gradient(120deg, #e0b080, #8b5a2b, #e0b080);
background-size: 220% 220%; color: #1b1a18;
text-shadow: 0 1px 0 rgba(255,255,255,0.35);
border-color: rgba(139,90,43,0.7);
box-shadow: 0 8px 28px rgba(139,90,43,0.35), inset 0 0 10px rgba(255,255,255,0.12);
animation: medal-sheen 3.4s linear infinite;
}
@keyframes medal-sheen { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
/* Themed glows by medal */
#victory-modal.gold-theme .modal-dialog { box-shadow: 0 16px 50px rgba(0,0,0,0.6), 0 0 26px rgba(212,175,55,0.25) inset, 0 0 40px rgba(212,175,55,0.18); }
#victory-modal.silver-theme .modal-dialog { box-shadow: 0 16px 50px rgba(0,0,0,0.6), 0 0 26px rgba(170,170,170,0.23) inset, 0 0 40px rgba(180,180,180,0.14); }
#victory-modal.bronze-theme .modal-dialog { box-shadow: 0 16px 50px rgba(0,0,0,0.6), 0 0 26px rgba(139,90,43,0.24) inset, 0 0 40px rgba(139,90,43,0.14); }
/* Theme-specific border/background gradients */
#victory-modal.silver-theme .modal-dialog {
background: linear-gradient(rgba(27,26,24,0.92), rgba(27,26,24,0.92)) padding-box,
linear-gradient(135deg, rgba(176,176,176,0.9), rgba(224,224,224,0.95), rgba(176,176,176,0.9)) border-box;
}
#victory-modal.bronze-theme .modal-dialog {
background: linear-gradient(rgba(27,26,24,0.92), rgba(27,26,24,0.92)) padding-box,
linear-gradient(135deg, rgba(139,90,43,0.88), rgba(224,176,128,0.9), rgba(139,90,43,0.88)) border-box;
}
/* Stats pills */
#victory-waves, #victory-hp {
display: inline-block; padding: 2px 10px; border-radius: 999px;
background: rgba(0,0,0,0.35); border: 1px solid #3d3a37;
box-shadow: inset 0 0 10px rgba(0,0,0,0.25);
}
/* Share row embellishments */
#victory-modal .share-cta { flex-basis: 100%; text-align: center; color: #e7e2d8; opacity: 0.95; margin: 6px 0 2px; letter-spacing: 0.5px; }
#victory-modal .share-row .tab {
transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
#victory-modal .share-row .tab:hover { transform: translateY(-1px) scale(1.04); filter: brightness(1.08); }
#btn-share-twitter { background: #0f1419; border-color: #8899a6; }
#btn-share-twitter:hover { box-shadow: 0 0 18px rgba(136,153,166,0.3); }
#btn-share-facebook { background: #1c2233; border-color: #3b5998; }
#btn-share-facebook:hover { box-shadow: 0 0 18px rgba(59,89,152,0.35); }
#btn-share-copy { background: #2b2a28; border-color: #6b4a2a; }
#btn-share-copy:hover { box-shadow: 0 0 18px rgba(229,192,123,0.28); }
@media (max-width: 520px) {
#victory-modal .modal-dialog { width: 96vw; margin: 5vh auto; }
#victory-modal .tab { flex: 1 1 140px; }
}
/* Victory segmented sections */
#victory-modal .victory-section {
margin: 14px -12px 0; /* bleed to full modal width (content has 12px padding) */
padding: 12px;
border-top: 1px solid rgba(229,192,123,0.18);
background: linear-gradient(180deg, rgba(229,192,123,0.055), rgba(0,0,0,0.02));
}
#victory-modal .victory-section:first-of-type { margin-top: 16px; }
#victory-modal .victory-section--share { border-top-color: rgba(99,255,175,0.18); background: linear-gradient(180deg, rgba(99,255,175,0.06), rgba(0,0,0,0.02)); }
#victory-modal .victory-section--actions { border-top-color: rgba(212,175,55,0.22); background: linear-gradient(180deg, rgba(212,175,55,0.06), rgba(0,0,0,0.02)); margin: 12px -12px -12px}
#victory-modal .share-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
#victory-modal .actions-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* Victory heading styled like waves */
#victory-modal .victory-heading {
margin: 6px 0 15px;
padding: 0;
font-size: 2em;
line-height: 1.15;
color: #c7ffde;
font-weight: 600;
letter-spacing: 2px;
opacity: 0.95;
font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
text-shadow: 0 0 6px rgba(99, 255, 175, 0.7), 0 0 12px rgba(99, 255, 175, 0.5), 0 0 20px rgba(99, 255, 175, 0.35);
}
#victory-modal .victory-desc {
margin: 6px auto 12px;
padding: 0 6px;
max-width: 540px;
line-height: 1.5;
color: #e7e2d8;
opacity: 0.95;
}
/* Actions section uses modal base color */
#victory-modal .victory-section--actions {
background: #1b1a18;
border-top-color: #3d3a37;
}
#victory-modal .actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#victory-modal .actions-row .tab { width: 100%; }
/* Victory share CTA and buttons refinements */
#victory-modal .victory-section--share { padding-top: 14px; padding-bottom: 12px; }
#victory-modal .victory-section--share .share-cta {
flex-basis: auto;
margin: 0 auto 15px;
padding: 0 6px;
max-width: 560px;
text-align: center;
font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
font-size: 0.95rem;
letter-spacing: 1px;
color: #bfe9d0;
opacity: 0.95;
text-shadow: 0 0 6px rgba(99, 255, 175, 0.35);
}
#victory-modal .share-row { margin-top: 0; gap: 10px; }
#victory-modal .share-row .tab {
border-radius: 999px;
padding: 8px 14px;
min-width: 140px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
#victory-modal .share-row .tab i { font-size: 1em; margin: 0; }
/* Inventory badge on tower buttons */
.tool-badge { position: absolute; left: 6px; top: 6px; background: #1b3a1b; color: #cfe9cf; border: 1px solid #2f6b2f; border-radius: 10px; padding: 1px 6px; font-size: 12px; }
/* Factory config */
.factory-config { margin-top: 8px; display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center; }
.factory-config select { background: #2c2a28; color: #e6e6e6; border: 1px solid #3d3a37; padding: 4px; }
.factory-inline-config { margin-top: 8px; display: grid; gap: 6px; }
.factory-output-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; }
.factory-output-label { color: #cfc7b8; }
.factory-output-select, .factory-inline-config select { background: #2c2a28; color: #e7e2d8; border: 1px solid #3d3a37; border-radius: 4px; padding: 6px 8px; }
.factory-output-note { color: #bfe9d0; font-family: 'Share Tech Mono', ui-monospace, monospace; opacity: 0.9; }
/* Tutorial popovers */
.tutorial-backdrop { position: fixed; inset: 0; background: transparent; z-index: 1400; display: none; }
.tutorial-popover { position: fixed; z-index: 1450; min-width: 260px; max-width: 360px; background: #1b1a18; color: #e7e2d8; border: 2px solid #3d3a37; border-radius: 8px; box-shadow: 0 12px 36px rgba(0,0,0,0.6); padding: 10px 12px; display: none; }
.tutorial-popover .tp-title { font-weight: 700; color: #e5c07b; margin-bottom: 6px; }
.tutorial-popover .tp-body { color: #cfc7b8; margin-bottom: 10px; line-height: 1.35; }
.tutorial-popover .tp-actions { display: flex; gap: 8px; justify-content: flex-end; }
.tutorial-popover .tp-actions .tp-next, .tutorial-popover .tp-actions .tp-skip { background: #3a2a1a; color: #f4e6c2; border: 1px solid #6b4a2a; padding: 6px 10px; cursor: pointer; border-radius: 4px; }
.tutorial-popover .tp-actions .tp-skip { background: #2b2a28; border-color: #3d3a37; color: #d7d2c8; }
/* arrows */
.tutorial-popover::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; }
.tutorial-popover.arrow-top::after { top: -10px; left: 18px; border-width: 0 10px 10px 10px; border-color: transparent transparent #3d3a37 transparent; }
.tutorial-popover.arrow-bottom::after { bottom: -10px; left: 18px; border-width: 10px 10px 0 10px; border-color: #3d3a37 transparent transparent transparent; }
.tutorial-popover.arrow-left::after { left: -10px; top: 18px; border-width: 10px 10px 10px 0; border-color: transparent #3d3a37 transparent transparent; }
.tutorial-popover.arrow-right::after { right: -10px; top: 18px; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #3d3a37; }
.tutorial-popover.arrow-top-right::after { top: -10px; right: 18px; border-width: 0 10px 10px 10px; border-color: transparent transparent #3d3a37 transparent; }
/* Tutorial intro modal enhancements */
.tutorial-intro { padding: 14px 16px; }
.tutorial-intro .ti-section { margin-bottom: 14px; background: rgba(0,0,0,0.18); border: 1px solid #3d3a37; border-radius: 6px; padding: 10px 12px; }
.tutorial-intro .ti-heading { margin: 0 0 6px; font-size: 1.05rem; color: #e5c07b; letter-spacing: 0.5px; }
.tutorial-intro p { margin: 0; color: #e7e2d8; opacity: 0.95; line-height: 1.45; }
.tutorial-intro .ti-list { margin: 6px 0 0; padding-left: 0px; }
.tutorial-intro .ti-list li { margin: 6px 0; color: #d9d2c2; }
.tutorial-intro .ti-cta { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
@media (max-width: 520px) {
#tutorial-intro-modal .modal-dialog { width: 96vw; margin: 5vh auto; }
.tutorial-intro { padding: 12px 12px; }
.tutorial-intro .ti-section { margin-bottom: 10px; padding: 8px 10px; }
.tutorial-intro .ti-heading { font-size: 1rem; }
.tutorial-intro p { font-size: 0.95rem; line-height: 1.4; }
.tutorial-intro .ti-cta { gap: 8px; }
.tutorial-intro .ti-cta .tab { flex: 1 1 140px; }
}
/* Tutorial intro objectives checkboxes */
.tutorial-intro .ti-item { list-style: none; margin: 6px 0; }
.tutorial-intro .ti-item label { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: flex-start; cursor: default; }
.tutorial-intro .ti-item input[type="checkbox"] {
appearance: none; width: 16px; height: 16px; margin-top: 2px;
background: url('./src/ui/elems/empty.png') center / contain no-repeat; image-rendering: pixelated; position: relative; border: none; border-radius: 0; box-shadow: none;
}
.tutorial-intro .ti-item input[type="checkbox"]:checked { background: url('./src/ui/elems/checkbox.png') center / contain no-repeat; image-rendering: pixelated; }
.tutorial-intro .ti-item input[type="checkbox"]:disabled { opacity: 0.9; }
.tutorial-intro .ti-item span { color: #d9d2c2; }
/* Admin modal checkboxes */
#admin-modal input[type="checkbox"] {
appearance: none; width: 16px; height: 16px; margin-right: 6px;
background: url('./src/ui/elems/empty.png') center / contain no-repeat; image-rendering: pixelated; position: relative; border: none; border-radius: 0; box-shadow: none; vertical-align: -2px;
}
#admin-modal input[type="checkbox"]:checked {
background: url('./src/ui/elems/checkbox.png') center / contain no-repeat; image-rendering: pixelated;
}
/* Tutorial spotlight to reveal target above backdrop */
.tutorial-spotlight { position: fixed; z-index: 1445; pointer-events: none; border-radius: 8px; transition: left 120ms ease, top 120ms ease, width 120ms ease, height 120ms ease, border-radius 120ms ease; box-shadow: 0 0 0 20000px rgba(0,0,0,0.35); border: 1px solid rgba(229,192,123,0.35); min-width: 40px; min-height: 40px; }
.enemy-identity {
background: none;
border-style: solid;
border-width: 35px;
border-image-source: url('./src/ui/elems/button_square_large_green.png');
border-image-slice: 35 fill;
border-image-repeat: repeat;
border-radius: 15px;
}