/* Skins: the look of the game's frame (hub, lobby, HUD, side panels, dialogs). The boards, towers, creeps and shop icons are drawn on canvas and look the same in every skin. picks one (src/skin.js restores the saved choice before anything draws). Every rule goes through :where() so a skin rule weighs exactly as much as the styles.css rule it restyles: later wins over the base, and state rules like .board-card.me still apply. */ @import url('fonts/fonts.css'); /* ================= Adventure (default): chunky, outlined, cartoon ================= */ :root[data-skin='adventure'] { --bg: #0f1d17; --panel: #1c2b3a; --panel-2: #253a4d; --line: #0a121b; --line-2: #36506a; --text: #f2f7ff; --muted: #93a9c0; --accent: #5ee08f; --gold: #ffd25a; --ink: #0a121b; --title: 'Lilita One', 'Segoe UI', sans-serif; font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif; font-weight: 600; } :where([data-skin='adventure']) body, :where([data-skin='adventure']) #hub { background: radial-gradient(ellipse at 50% 25%, #1d3a2a 0%, #0f1d17 55%, #08100c 100%); } :where([data-skin='adventure']) #hub::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.06; background-image: radial-gradient(circle at 25% 25%, #fff 2px, transparent 2.5px), radial-gradient(circle at 75% 75%, #fff 2px, transparent 2.5px); background-size: 2.5rem 2.5rem; } :where([data-skin='adventure']) .brand, :where([data-skin='adventure']) .card h1 { font-family: var(--title); font-weight: 400; letter-spacing: 0.02em; color: #fff; text-shadow: 0 0.18rem 0 var(--ink), 0 0 1rem rgba(94, 224, 143, 0.25); -webkit-text-stroke: 1px var(--ink); } :where([data-skin='adventure']) .brand { font-size: 2rem; } :where([data-skin='adventure']) .brand span, :where([data-skin='adventure']) .card h1 span { color: var(--gold); } :where([data-skin='adventure']) #hud, :where([data-skin='adventure']) .hub-head { background: linear-gradient(#2a4258, #1c2b3a); border-bottom: 3px solid var(--ink); box-shadow: 0 0.3rem 0 rgba(0, 0, 0, 0.35); } :where([data-skin='adventure']) .panel, :where([data-skin='adventure']) .card { background: linear-gradient(#22354a, #1a2938); border: 3px solid var(--ink); border-radius: 1.1rem; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.09), inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 0.35rem 0 rgba(0, 0, 0, 0.4); } :where([data-skin='adventure']) .panel h3 { font-family: var(--title); font-weight: 400; font-size: 1.05rem; letter-spacing: 0.06em; color: var(--gold); text-shadow: 0 2px 0 var(--ink); } :where([data-skin='adventure']) .panel h3 small { text-shadow: none; } :where([data-skin='adventure']) .hub h4, :where([data-skin='adventure']) .card h4, :where([data-skin='adventure']) .evolve-h { font-family: var(--title); font-weight: 400; color: #9fc3e6; letter-spacing: 0.06em; font-size: 0.9rem; } :where([data-skin='adventure']) .evolve-h { color: var(--warn); } :where([data-skin='adventure']) button, :where([data-skin='adventure']) a.button { font-weight: 800; background: linear-gradient(#3b5875, #2b4259); border: 2px solid var(--ink); border-radius: 0.8rem; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 0.22rem 0 var(--ink); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); transition: transform 0.06s, filter 0.12s; } :where([data-skin='adventure']) button:hover:not(:disabled), :where([data-skin='adventure']) a.button:hover { border-color: var(--ink); filter: brightness(1.15); } :where([data-skin='adventure']) button:active:not(:disabled) { transform: translateY(0.15rem); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 0.07rem 0 var(--ink); } :where([data-skin='adventure']) button.active { background: linear-gradient(#3fb873, #278f53); border-color: var(--ink); color: #fff; } :where([data-skin='adventure']) button.active small { color: #d9ffe8; } :where([data-skin='adventure']) .hub .primary, :where([data-skin='adventure']) .card .primary, :where([data-skin='adventure']) .card .report-link a, :where([data-skin='adventure']) .skip, :where([data-skin='adventure']) .actions .upgrade { background: linear-gradient(#ffd864, #f0a724); color: #3a2300; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); border-color: var(--ink); } :where([data-skin='adventure']) .card .report-link a { border: 2px solid var(--ink); border-radius: 0.8rem; box-shadow: 0 0.22rem 0 var(--ink); } :where([data-skin='adventure']) .actions .sell { background: linear-gradient(#e2525f, #a72a37); border-color: var(--ink); } :where([data-skin='adventure']) #hub input, :where([data-skin='adventure']) .card .row input, :where([data-skin='adventure']) #mc-input { background: #0f1a26; border: 2px solid var(--ink); border-radius: 0.7rem; box-shadow: inset 0 0.2rem 0 rgba(0, 0, 0, 0.35); } :where([data-skin='adventure']) #hub input:focus { border-color: var(--accent); } :where([data-skin='adventure']) .tile { background: linear-gradient(#2d4660, #233850); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 0.18rem 0 var(--ink); } :where([data-skin='adventure']) .next-wave { background: #233850; border: 2px solid var(--ink); } :where([data-skin='adventure']) .seats li, :where([data-skin='adventure']) .game-card { background: linear-gradient(#2d4660, #233850); border: 2px solid var(--ink); border-radius: 0.8rem; box-shadow: 0 0.18rem 0 var(--ink); } :where([data-skin='adventure']) .seats li.open { background: none; border: 2px dashed var(--line-2); box-shadow: none; } :where([data-skin='adventure']) .crown { background: var(--gold); color: #3a2300; } :where([data-skin='adventure']) .game-card .title { font-family: var(--title); font-weight: 400; letter-spacing: 0.03em; text-shadow: 0 2px 0 var(--ink); } :where([data-skin='adventure']) .player-list li.self { background: #2d4660; border-radius: 0.7rem; } :where([data-skin='adventure']) .board-card { background: linear-gradient(#22354a, #1a2938); box-shadow: 0 0 0 2px var(--ink), 0 0.35rem 0 rgba(0, 0, 0, 0.4); } :where([data-skin='adventure']) .board-head { font-family: var(--title); font-weight: 400; letter-spacing: 0.03em; text-shadow: 0 2px 0 var(--ink); } :where([data-skin='adventure']) .board-head .badge { background: var(--accent); color: #08331b; text-shadow: none; font-family: 'Nunito', sans-serif; font-weight: 900; } :where([data-skin='adventure']) .board-head .badge.target { background: #ffb84d; color: #3a2300; } :where([data-skin='adventure']) .board-head .money, :where([data-skin='adventure']) .board-head .income { font-family: 'Nunito', sans-serif; font-weight: 800; text-shadow: none; } :where([data-skin='adventure']) .wave-big b { font-family: var(--title); font-weight: 400; color: var(--gold); text-shadow: 0 0.15rem 0 var(--ink); } :where([data-skin='adventure']) #tip, :where([data-skin='adventure']) #toast, :where([data-skin='adventure']) .mc-line { background: #1c2b3a; border: 2px solid var(--ink); box-shadow: 0 0.25rem 0 rgba(0, 0, 0, 0.45); } :where([data-skin='adventure']) #tip .t { font-family: var(--title); font-weight: 400; letter-spacing: 0.03em; } :where([data-skin='adventure']) #overlay { background: rgba(5, 12, 8, 0.75); backdrop-filter: blur(3px); } :where([data-skin='adventure']) kbd { border-color: var(--ink); background: rgba(0, 0, 0, 0.35); } :where([data-skin='adventure']) #settings-dialog { background: rgba(5, 12, 8, 0.75); backdrop-filter: blur(3px); } :where([data-skin='adventure']) .settings-top h2 { font-family: var(--title); font-weight: 400; letter-spacing: 0.03em; color: var(--gold); text-shadow: 0 0.15rem 0 var(--ink); -webkit-text-stroke: 1px var(--ink); } :where([data-skin='adventure']) .set-row { border-top: 2px dashed rgba(10, 18, 27, 0.6); } :where([data-skin='adventure']) .settings-foot .primary { background: linear-gradient(#ffd864, #f0a724); color: #3a2300; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); border-color: var(--ink); } :where([data-skin='adventure']) .fps { font-weight: 800; color: #9fc3e6; } /* ================= Tactical: sci-fi command HUD ================= */ :root[data-skin='tactical'] { --bg: #05080d; --panel: #0b1720; --panel-2: #0e1e2b; --line: #173445; --line-2: #1f4a5e; --text: #d8f3ff; --muted: #6f98aa; --accent: #3df0c8; --gold: #ffcf4a; --cut: 0.7rem; --title: 'Russo One', 'Segoe UI', sans-serif; font-family: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif; font-weight: 500; } :where([data-skin='tactical']) body, :where([data-skin='tactical']) #hub { background-color: #05080d; background-image: linear-gradient(rgba(61, 240, 200, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 240, 200, 0.05) 1px, transparent 1px), radial-gradient(ellipse at 50% 0%, #0d2a36 0%, #05080d 70%); background-size: 2rem 2rem, 2rem 2rem, 100% 100%; } :where([data-skin='tactical']) .brand, :where([data-skin='tactical']) .card h1 { font-family: var(--title); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: #eafcff; text-shadow: 0 0 0.8rem rgba(61, 240, 200, 0.45); } :where([data-skin='tactical']) .brand span, :where([data-skin='tactical']) .card h1 span { color: var(--accent); } :where([data-skin='tactical']) #hud, :where([data-skin='tactical']) .hub-head { background: linear-gradient(90deg, rgba(61, 240, 200, 0.12), rgba(10, 20, 30, 0.92) 30%, rgba(10, 20, 30, 0.92) 70%, rgba(61, 240, 200, 0.12)); border-bottom: 1px solid var(--accent); box-shadow: 0 1px 0 rgba(61, 240, 200, 0.25), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5); } :where([data-skin='tactical']) .panel, :where([data-skin='tactical']) .card { border-radius: 0; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(14, 32, 44, 0.94), rgba(7, 15, 22, 0.94)); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); box-shadow: inset 0 0 0 1px rgba(61, 240, 200, 0.08), inset 0 2px 0 rgba(61, 240, 200, 0.35); } :where([data-skin='tactical']) .panel h3 { font-family: var(--title); font-weight: 400; color: var(--accent); letter-spacing: 0.2em; font-size: 0.78rem; justify-content: flex-start; gap: 0.5rem; } :where([data-skin='tactical']) .panel h3::before { content: ''; width: 0.25rem; height: 0.8rem; background: var(--accent); align-self: center; flex: none; } :where([data-skin='tactical']) .panel h3 small, :where([data-skin='tactical']) .panel h3 > button { margin-left: auto; } :where([data-skin='tactical']) .panel h3 small { font-family: 'Chakra Petch', sans-serif; letter-spacing: 0.02em; } :where([data-skin='tactical']) .hub h4, :where([data-skin='tactical']) .card h4, :where([data-skin='tactical']) .evolve-h { font-family: var(--title); font-weight: 400; color: var(--muted); letter-spacing: 0.2em; } :where([data-skin='tactical']) .evolve-h { color: var(--warn); } :where([data-skin='tactical']) button, :where([data-skin='tactical']) a.button { border-radius: 0; background: linear-gradient(rgba(61, 240, 200, 0.08), rgba(61, 240, 200, 0.02)); border: 1px solid var(--line-2); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; clip-path: polygon(0.45rem 0, 100% 0, 100% calc(100% - 0.45rem), calc(100% - 0.45rem) 100%, 0 100%, 0 0.45rem); } :where([data-skin='tactical']) button small, :where([data-skin='tactical']) .icon-btn, :where([data-skin='tactical']) .tile, :where([data-skin='tactical']) .evo { text-transform: none; letter-spacing: normal; } :where([data-skin='tactical']) button:hover:not(:disabled), :where([data-skin='tactical']) a.button:hover { border-color: var(--accent); background: rgba(61, 240, 200, 0.14); box-shadow: inset 0 0 0.8rem rgba(61, 240, 200, 0.25); } :where([data-skin='tactical']) button.active { background: rgba(61, 240, 200, 0.18); border-color: var(--accent); color: #fff; box-shadow: inset 0 0 1rem rgba(61, 240, 200, 0.3); } :where([data-skin='tactical']) .hub .primary, :where([data-skin='tactical']) .card .primary, :where([data-skin='tactical']) .card .report-link a, :where([data-skin='tactical']) .skip, :where([data-skin='tactical']) .actions .upgrade { background: linear-gradient(#3df0c8, #19b394); color: #02201a; border-color: #8ffbe3; } :where([data-skin='tactical']) .card .report-link a { border-radius: 0; text-transform: uppercase; letter-spacing: 0.08em; } :where([data-skin='tactical']) .actions .sell { background: rgba(255, 80, 100, 0.15); border-color: #ff5a6e; } :where([data-skin='tactical']) #hub input, :where([data-skin='tactical']) .card .row input, :where([data-skin='tactical']) #mc-input { border-radius: 0; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); } :where([data-skin='tactical']) .tile { border-radius: 0; background: rgba(61, 240, 200, 0.04); border: 1px solid var(--line); } :where([data-skin='tactical']) .next-wave { border-radius: 0; border-left: 3px solid var(--accent); } :where([data-skin='tactical']) .seats li, :where([data-skin='tactical']) .game-card { border-radius: 0; background: linear-gradient(90deg, rgba(61, 240, 200, 0.12), rgba(61, 240, 200, 0.02)); border: 1px solid var(--line); border-left: 3px solid var(--accent); } :where([data-skin='tactical']) .seats li.open { background: none; border-left: 3px dashed var(--line-2); } :where([data-skin='tactical']) .crown, :where([data-skin='tactical']) .bot-badge { border-radius: 0; } :where([data-skin='tactical']) .crown { background: var(--gold); color: #1a1200; } :where([data-skin='tactical']) .game-card .title { font-family: var(--title); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; } :where([data-skin='tactical']) .game-card canvas { border-radius: 0; } :where([data-skin='tactical']) .player-list li.self { background: rgba(61, 240, 200, 0.1); border-radius: 0; } :where([data-skin='tactical']) .chat-log time { color: #3d7a8c; } :where([data-skin='tactical']) .board-card { border-radius: 0; } :where([data-skin='tactical']) .board-head { font-family: var(--title); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9rem; } :where([data-skin='tactical']) .board-head .badge { border-radius: 0; background: var(--accent); color: #02201a; } :where([data-skin='tactical']) .board-head .badge.target { background: #ffb84d; color: #2a1600; } :where([data-skin='tactical']) .wave-big b { font-family: var(--title); font-weight: 400; color: var(--accent); text-shadow: 0 0 0.8rem rgba(61, 240, 200, 0.5); } :where([data-skin='tactical']) #tip, :where([data-skin='tactical']) #toast, :where([data-skin='tactical']) .mc-line { border-radius: 0; background: rgba(7, 15, 22, 0.94); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); } :where([data-skin='tactical']) #tip .t { font-family: var(--title); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; } :where([data-skin='tactical']) kbd { border-radius: 0; } :where([data-skin='tactical']) #settings-dialog { background: rgba(2, 8, 12, 0.85); } :where([data-skin='tactical']) .settings-top h2 { font-family: var(--title); font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: #eafcff; text-shadow: 0 0 0.8rem rgba(61, 240, 200, 0.45); } :where([data-skin='tactical']) .set-row { border-top: 1px solid var(--line); } :where([data-skin='tactical']) .set-label b { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9rem; } :where([data-skin='tactical']) .set-vol output { color: var(--accent); } :where([data-skin='tactical']) .settings-foot .primary { background: linear-gradient(#3df0c8, #19b394); color: #02201a; border-color: #8ffbe3; } :where([data-skin='tactical']) .fps { font-family: var(--title); color: var(--accent); letter-spacing: 0.08em; } /* ================= Stone: fantasy, dark wood and gold ================= */ :root[data-skin='stone'] { --bg: #120e0a; --panel: #1d1813; --panel-2: #2a221a; --line: #3a2e20; --line-2: #5a4630; --text: #f1e6d2; --muted: #a8957a; --accent: #e8b84a; --gold: #ffd25a; --frame: #6e532e; --title: 'Cinzel', Georgia, serif; font-family: 'Nunito', Georgia, serif; font-weight: 600; } :where([data-skin='stone']) body, :where([data-skin='stone']) #hub { background: radial-gradient(ellipse at 50% 0%, #2b2015 0%, #120e0a 60%, #080604 100%); } :where([data-skin='stone']) .brand, :where([data-skin='stone']) .card h1 { font-family: var(--title); font-weight: 700; letter-spacing: 0.08em; background: linear-gradient(#fff3c9, #e0a93c 60%, #a8701e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 #000); } :where([data-skin='stone']) #hud, :where([data-skin='stone']) .hub-head { background: linear-gradient(#2f251b, #1c1610); border-bottom: 2px solid #8a6a36; box-shadow: 0 1px 0 #2a1f12, 0 0.4rem 1rem rgba(0, 0, 0, 0.6); } :where([data-skin='stone']) .panel, :where([data-skin='stone']) .card { background: linear-gradient(#251e17, #1a1510); border: 2px solid var(--frame); border-radius: 0.4rem; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #3a2c1a, 0 0.4rem 1rem rgba(0, 0, 0, 0.55); } :where([data-skin='stone']) .panel h3 { font-family: var(--title); font-weight: 700; color: #e8c477; letter-spacing: 0.12em; font-size: 0.95rem; justify-content: flex-start; gap: 0.5rem; border-bottom: 1px solid var(--line-2); padding-bottom: 0.4rem; } :where([data-skin='stone']) .panel h3::before { content: '\25C6'; color: #8a6a36; font-size: 0.6rem; align-self: center; } :where([data-skin='stone']) .panel h3 small, :where([data-skin='stone']) .panel h3 > button { margin-left: auto; } :where([data-skin='stone']) .panel h3 small { font-family: 'Nunito', sans-serif; letter-spacing: 0; } :where([data-skin='stone']) .hub h4, :where([data-skin='stone']) .card h4, :where([data-skin='stone']) .evolve-h { font-family: var(--title); font-weight: 700; color: #c9a467; letter-spacing: 0.1em; } :where([data-skin='stone']) button, :where([data-skin='stone']) a.button { background: linear-gradient(#4a3a28, #2f2519); border: 1px solid #8a6a36; border-radius: 0.3rem; color: var(--text); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.35); } :where([data-skin='stone']) button:hover:not(:disabled), :where([data-skin='stone']) a.button:hover { border-color: var(--accent); filter: brightness(1.12); } :where([data-skin='stone']) button.active { background: linear-gradient(#6b4f1e, #4a3612); border-color: var(--accent); color: #ffe9b0; box-shadow: inset 0 0 0.6rem rgba(232, 184, 74, 0.35); } :where([data-skin='stone']) .hub .primary, :where([data-skin='stone']) .card .primary, :where([data-skin='stone']) .card .report-link a, :where([data-skin='stone']) .skip, :where([data-skin='stone']) .actions .upgrade { background: linear-gradient(#f2c35a, #b97f22); color: #2a1a05; border-color: #ffe39a; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); } :where([data-skin='stone']) .actions .sell { background: linear-gradient(#7a2a24, #4f1913); border-color: #b4483c; } :where([data-skin='stone']) #hub input, :where([data-skin='stone']) .card .row input, :where([data-skin='stone']) #mc-input { background: #120e0a; border: 1px solid var(--line-2); border-radius: 0.3rem; } :where([data-skin='stone']) #hub input:focus { border-color: var(--accent); } :where([data-skin='stone']) .tile { background: linear-gradient(#2e251b, #221b14); border: 1px solid #4a3a26; } :where([data-skin='stone']) .seats li, :where([data-skin='stone']) .game-card { background: linear-gradient(90deg, #3a2d1d, #251e17); border: 1px solid var(--frame); border-radius: 0.3rem; } :where([data-skin='stone']) .seats li.open { background: none; border-style: dashed; } :where([data-skin='stone']) .crown { background: var(--accent); color: #2a1a05; } :where([data-skin='stone']) .game-card .title { font-family: var(--title); font-weight: 700; letter-spacing: 0.04em; color: #f6e2b0; } :where([data-skin='stone']) .chat-log b { color: var(--accent); } :where([data-skin='stone']) .chat-log .line.self b { color: #8fd18a; } :where([data-skin='stone']) .player-list li.self { background: #2e2419; } :where([data-skin='stone']) .board-card { background: linear-gradient(#251e17, #1a1510); border-color: var(--frame); border-radius: 0.4rem; } :where([data-skin='stone']) .board-head { font-family: var(--title); font-weight: 700; letter-spacing: 0.05em; } :where([data-skin='stone']) .board-head .badge { background: #3a5a2a; color: #cdf5b4; font-family: 'Nunito', sans-serif; } :where([data-skin='stone']) .board-head .badge.target { background: #6b4518; color: #ffd28a; } :where([data-skin='stone']) #boards.field .board-wrap { box-shadow: 0 0 0 2px var(--frame), 0 0 0 4px #1a1510, 0 0 0 5px var(--frame); } :where([data-skin='stone']) .wave-big b { font-family: var(--title); color: #f2c35a; } :where([data-skin='stone']) #tip, :where([data-skin='stone']) #toast, :where([data-skin='stone']) .mc-line { background: #1d1813; border: 1px solid var(--frame); } :where([data-skin='stone']) #tip .t { font-family: var(--title); font-weight: 700; color: #f6e2b0; } :where([data-skin='stone']) #settings-dialog { background: rgba(8, 6, 4, 0.82); } :where([data-skin='stone']) .settings-top h2 { font-family: var(--title); font-weight: 700; letter-spacing: 0.08em; background: linear-gradient(#fff3c9, #e0a93c 60%, #a8701e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 #000); } :where([data-skin='stone']) .set-row { border-top: 1px solid var(--line); } :where([data-skin='stone']) .set-label b { color: #f6e2b0; } :where([data-skin='stone']) .settings-foot .primary { background: linear-gradient(#f2c35a, #b97f22); color: #2a1a05; border-color: #ffe39a; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); } :where([data-skin='stone']) .fps { font-family: var(--title); color: #c9a467; }