:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #e6edf6; background: #0b1120; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 20% 0, #182842, transparent 65%); min-height: 100vh; }
main { max-width: 1180px; margin: auto; padding: 28px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.eyebrow { font-size: 10px; letter-spacing: 2px; color: #93a5bd; margin: 0 0 8px; font-weight: 700; }
.brand-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.brand-meta .eyebrow { margin: 0; }
.version { color: #657b97; font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.achievement-reset { display: inline-flex; align-items: center; gap: 4px; padding: 2px 5px; border-radius: 5px; border-color: #40536a; background: transparent; color: #a7b8cc; font-size: 9px; line-height: 1.3; white-space: nowrap; }
.achievement-reset svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
h1 { font-size: 36px; letter-spacing: -1.5px; margin: 0; }
h1 span { color: #5ee6b1; }
h2 { font-size: 22px; margin: 0 0 20px; }
.badge { border: 1px solid #304457; border-radius: 24px; color: #5ee6b1; padding: 9px 14px; font-size: 10px; letter-spacing: 1px; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; }
.header-actions a { text-decoration: none; }
.header-actions a:hover, .header-actions a:focus-visible { border-color: #5ee6b1; background: #5ee6b11a; }
.game-hud { padding: 10px 12px; border-bottom: 1px solid #304457; background: #101b29; }
.hud-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.game-hud .stats { display: flex; align-items: center; gap: 8px; pointer-events: none; }
.stats div { display: flex; align-items: center; gap: 5px; background: #0b1120dd; padding: 5px 8px; border: 1px solid #304457; border-radius: 8px; min-width: 0; }
.stats span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stats svg { width: 18px; height: 18px; fill: none; stroke: #78caff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.stats svg.gold-icon { stroke: #ffd279; }
.stats svg.heart-icon { fill: #ff647c; stroke: #ff647c; }
.stats strong { font-size: 13px; font-variant-numeric: tabular-nums; }
#gold-stat { position: relative; pointer-events: auto; cursor: help; }
.stats strong.gold-bonus { position: absolute; top: 2px; right: 3px; display: flex; gap: 1px; padding: 0; }
.gold-bonus-dot { width: 5px; height: 5px; border-radius: 50%; background: #ffd279; }
#gold { color: #ffd279; } #lives { color: #ff8896; } #best { color: #5ee6b1; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.arena { position: relative; width: min(100%, calc(100dvh - 145px)); margin: 0 auto; border: 1px solid #304457; border-radius: 16px; overflow: hidden; background: #101b29; }
.board-wrap { position: relative; width: 100%; aspect-ratio: 1; }
canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; }
canvas:focus-visible { outline: 3px solid #5ee6b1; outline-offset: -3px; }
canvas.edge-hover { cursor: default; }
.wave-toast { position: absolute; z-index: 2; top: calc(100% / 12); left: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 24px); padding: clamp(3px, 1vw, 10px) 18px; border: 1px solid #5ee6b1; border-radius: 10px; background: #08111be8; color: #5ee6b1; font-size: clamp(14px, 2vw, 22px); font-weight: 700; text-align: center; pointer-events: none; }
.pause-overlay { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0; border: 0; border-radius: 0; background: #08111bd9; color: #e6edf6; text-align: center; backdrop-filter: blur(2px); cursor: pointer; }
.pause-overlay strong { color: #ffd279; font-size: clamp(18px, 3vw, 28px); letter-spacing: 2px; text-shadow: 0 0 18px #ff647c; }
.pause-overlay span { color: #c4d3e4; font-size: 12px; }
button { font: inherit; color: inherit; background: #1c2a40; border: 1px solid #34455d; border-radius: 9px; padding: 11px 12px; cursor: pointer; transition: background .15s; }
button:hover:not(:disabled) { background: #2a3d55; }
button:focus-visible { outline: 2px solid #5ee6b1; outline-offset: 3px; }
button:disabled { opacity: .45; cursor: not-allowed; }
.build-menu { position: absolute; width: 260px; max-width: 100%; height: 280px; z-index: 2; border-radius: 18px; background: #0b1120a8; border: 1px solid #455971; box-shadow: 0 10px 30px #0008; backdrop-filter: blur(2px); }
.build-ring { position: absolute; width: 145px; height: 145px; border: 1px dashed #5ee6b155; border-radius: 50%; top: 22px; left: calc(50% - 72.5px); }
.build-option { position: absolute; width: 50px; height: 50px; border-radius: 50%; padding: 4px; border: 2px solid currentColor; color: var(--tower-color); background: #182b3d; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.build-option span { font-size: 26px; line-height: 1; }.build-option strong { font-size: 11px; color: #ffd279; margin-top: 4px; }
.build-option[data-type="rapid"] { top: 8px; left: calc(50% - 87px); }
.build-option[data-type="cannon"] { top: 8px; left: calc(50% - 25px); }
.build-option[data-type="frost"] { top: 8px; left: calc(50% + 37px); }
.build-option[data-type="poison"] { top: 64px; left: calc(50% - 87px); }
.build-option[data-type="flame"] { top: 64px; left: calc(50% - 25px); }
.build-option[data-type="gatling"] { top: 64px; left: calc(50% + 37px); }
.build-option[data-type="launcher"] { top: 120px; left: calc(50% - 87px); }
.build-option[data-type="laser"] { top: 120px; left: calc(50% - 25px); }
.build-option[data-type="chimera"] { top: 120px; left: calc(50% + 37px); }
.build-option .build-lock { position: absolute; top: -7px; right: -8px; display: flex; align-items: center; gap: 2px; padding: 2px 3px; border: 1px solid #000; border-radius: 5px; background: #101b29; color: #ffd279; font-size: 10px; line-height: 1.2; }
.build-lock svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.build-option.unaffordable { border-color: #ff647c; background: #3d202e; cursor: not-allowed; }
.build-option:disabled { opacity: 1; background: #18212e; border-color: #455971; }
.build-option:disabled > span:not(.build-lock), .build-option:disabled > strong { opacity: .45; }
.build-close { position: absolute; top: 8px; left: 8px; border-radius: 50%; width: 32px; height: 32px; padding: 0; font-size: 23px; color: #a7b8cc; }
.build-preview-stats { position: absolute; top: 174px; left: 8px; right: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; pointer-events: none; }
.build-preview-stat { display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 2px; border-radius: 5px; background: #0b1120e8; color: #c4d3e4; font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.build-preview-stat svg { width: 13px; height: 13px; flex: 0 0 13px; color: #78caff; }
#build-preview-stats svg { color: var(--tower-color); }
.build-tooltip { position: absolute; bottom: 6px; left: 8px; right: 8px; min-height: 25px; padding: 4px 6px; border: 1px solid #34455d; border-radius: 8px; background: #141e30; font-size: 10px; line-height: 1.4; text-align: center; color: #e6edf6; pointer-events: none; }
.tower-details { position: absolute; z-index: 2; width: 260px; height: 280px; max-width: 100%; max-height: 100%; overflow-y: auto; padding: 12px; border: 1px solid #455971; border-radius: 16px; background: #0b1120f5; box-shadow: 0 10px 30px #0008; display: flex; flex-direction: column; gap: 4px; }
.tower-details h2 { padding-right: 26px; font-size: 16px; margin: 0; }
.detail-close { position: absolute; right: 8px; top: 8px; padding: 0; width: 25px; height: 25px; font-size: 18px; }
#detail-level { font-size: 10px; color: #a7b8cc; margin: 0; }
#detail-xp { width: 100%; height: 6px; flex-shrink: 0; accent-color: #5ee6b1; }
.detail-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 32px; gap: 5px; min-height: 106px; }
.detail-stat { display: flex; align-items: center; gap: 7px; padding: 5px; font-size: 11px; font-variant-numeric: tabular-nums; }
.detail-stat svg { width: 19px; height: 19px; flex-shrink: 0; color: #a7b8cc; }
.detail-stat-value { white-space: nowrap; }
.stat-diff { color: #5ee6b1; white-space: nowrap; }
.stat-diff.negative { color: #ff647c; }
.detail-tooltip-slot { min-height: 54px; flex: 1; }
#detail-stat-tooltip { margin: 0; padding: 5px 7px; border-radius: 6px; background: #19273b; font-size: 9px; line-height: 1.35; white-space: pre-line; }
.tower-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; flex-shrink: 0; }
.tower-actions button { padding: 6px 3px; font-size: 9px; min-width: 0; }
.rank-unaffordable { border-color: #ff647c; color: #ff8896; }
.upgrade-ready { border-color: #ffd279; color: #ffd279; background: #3a3020; }
.controls { display: flex; align-items: center; gap: 8px; }
.control-pair { display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 6px 0 2px; border: 1px solid #304457; border-radius: 8px; background: #0b1120dd; }
.control-button { display: grid; place-items: center; width: 26px; height: 26px; padding: 4px; border-color: transparent; background: transparent; }
.control-button:hover:not(:disabled) { background: #2a3d55; }
#auto-cycle[aria-pressed="true"] { color: #5ee6b1; background: #19382e; }
#focus-pause[aria-pressed="true"] { color: #5ee6b1; background: #19382e; }
.control-button svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#start svg .play-glyph { fill: currentColor; stroke: none; }
#speed svg { fill: currentColor; stroke: none; }
.control-readout { display: grid; place-items: center; min-width: 16px; height: 28px; padding: 0 2px; font-size: 13px; font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#retry { background: #5ee6b1; border-color: #5ee6b1; color: #09231e; font-weight: 750; }
#retry:hover { background: #8af1c8; }
.quiet { background: transparent; color: #a7b8cc; }
#restart svg { width: 15px; height: 15px; }
.hud-messages { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
#status, .error { font-size: 12px; line-height: 1.5; margin: 0; }
#status { flex: 1; padding: 6px 9px; border-radius: 8px; background: #0e1726; color: #c4d3e4; min-height: 0; }
.error { color: #ff8896; }
.overlay { position: absolute; inset: 0; background: #0b1120e8; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.overlay h2 { font-size: 42px; margin: 8px 0; }.overlay p { color: #a7b8cc; }.overlay button { margin-top: 16px; }
.achievement-popup { position: fixed; z-index: 10; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(360px, calc(100vw - 24px)); padding: 12px 16px; border: 2px solid #ffd279; border-radius: 12px; background: #111d2bf2; box-shadow: 0 0 0 1px #a77918, 0 0 20px #ffd27988, 0 8px 28px #0009; text-align: center; }
.achievement-popup::before, .achievement-popup::after { position: absolute; color: #fff2b4; font-size: 14px; text-shadow: 0 0 8px #ffd279; pointer-events: none; animation: achievement-sparkle 1.4s ease-in-out infinite; }
.achievement-popup::before { content: "✦"; top: -10px; left: 12px; }
.achievement-popup::after { content: "✧"; right: 16px; bottom: -10px; animation-delay: .7s; }
@keyframes achievement-sparkle { 0%, 100% { opacity: .45; transform: scale(.8) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }
.achievement-close { position: absolute; top: 5px; right: 6px; width: 24px; height: 24px; padding: 0; border-color: #ffd27966; background: transparent; color: #ffd279; font-size: 17px; line-height: 1; }
.achievement-popup span { color: #ffd279; font-size: 9px; font-weight: 750; letter-spacing: 1.2px; }
.achievement-popup strong { display: block; margin-top: 3px; font-size: 16px; }
.achievement-popup p { margin: 2px 0 0; color: #c4d3e4; font-size: 12px; }
.enemy-introduction { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px; border: 1px solid #5ee6b1; border-radius: 16px; background: #101b29; color: #e6edf6; text-align: center; }
.enemy-introduction::backdrop { background: #08111bd9; }
.enemy-introduction h2 { margin: 16px 0 8px; }
.enemy-introduction p:not(.eyebrow) { font-size: 13px; line-height: 1.6; color: #c4d3e4; }
.enemy-introduction #enemy-wave { color: #5ee6b1; }
.enemy-portrait { width: 48px; height: 48px; margin: 20px auto 0; border: 2px solid #ffffff66; border-radius: 50%; background: var(--enemy-color); }
.enemy-portrait[data-shape="square"] { border-radius: 3px; box-shadow: 0 -8px 0 -3px #ffd279; }
.enemy-portrait[data-shape="wings"] { width: 72px; border-radius: 0; border: 0; clip-path: polygon(50% 0, 100% 90%, 50% 60%, 0 90%); }
.artifact-bar { position: relative; margin-right: auto; }
.artifact-sockets { display: flex; align-items: center; gap: 5px; margin: 0; padding: 5px 8px; list-style: none; border: 1px solid #304457; border-radius: 8px; background: #0b1120dd; }
.artifact-socket { box-sizing: border-box; width: 18px; height: 18px; border: 2px solid #657b97; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #050a12, #1c2a40); box-shadow: inset 0 1px 2px #000; }
.artifact-socket.filled { border-color: #ffd279; cursor: help; }
.artifact-socket.filled:focus-visible { outline: 2px solid #ffd279; outline-offset: 2px; }
.artifact-tooltip { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; width: max-content; max-width: min(260px, calc(100vw - 32px)); margin: 0; padding: 5px 7px; border: 1px solid #34455d; border-radius: 6px; background: #141e30f2; color: #e6edf6; font-size: 10px; line-height: 1.35; white-space: pre-line; pointer-events: none; }
.artifact-tooltip strong { color: var(--gem-color); }
.artifact-gem { position: relative; display: block; width: 100%; height: 100%; background: #000; animation: gem-socketed .45s ease-out; }
.artifact-gem[data-cut="brilliant"] { clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.artifact-gem[data-cut="round"] { clip-path: circle(46%); }
.artifact-gem[data-cut="oval"] { clip-path: ellipse(34% 48%); }
.artifact-gem[data-cut="drop"] { clip-path: polygon(50% 0, 76% 42%, 84% 66%, 72% 90%, 50% 100%, 28% 90%, 16% 66%, 24% 42%); }
.artifact-gem[data-cut="emerald"] { clip-path: polygon(32% 0, 68% 0, 86% 16%, 86% 84%, 68% 100%, 32% 100%, 14% 84%, 14% 16%); }
.artifact-gem[data-cut="hexagon"] { clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.artifact-gem[data-cut="trillion"] { clip-path: polygon(50% 4%, 100% 94%, 0 94%); }
.artifact-gem[data-cut="marquise"] { clip-path: polygon(50% 0, 72% 25%, 80% 50%, 72% 75%, 50% 100%, 28% 75%, 20% 50%, 28% 25%); }
.artifact-gem::before { content: ""; position: absolute; inset: 1px; background: var(--gem-color); clip-path: inherit; }
@keyframes gem-socketed { from { transform: scale(1.8); opacity: 0; } }
.artifact-choice { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px; border: 1px solid #ffd279; border-radius: 16px; background: #101b29; color: #e6edf6; text-align: center; }
.artifact-choice::backdrop { background: #08111bd9; }
.artifact-choice > p { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: #c4d3e4; }
.artifact-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.artifact-option { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; border-color: var(--gem-color); border-radius: 12px; text-align: center; }
.artifact-option .artifact-gem { width: 34px; height: 34px; }
.artifact-option strong { display: block; margin-bottom: 4px; color: var(--gem-color); font-size: 14px; }
.artifact-option span:not(.artifact-gem) { color: #c4d3e4; font-size: 11px; line-height: 1.5; }
.artifact-skip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; color: #a7b8cc; }
.artifact-bonus-icon { width: 18px; height: 18px; fill: none; stroke: #ffd279; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#artifact-bonus-lives-icon { fill: #ff647c; stroke: #ff647c; }
.artifact-choice > .artifact-or { margin: 10px 0 0; color: #8398af; font-size: 11px; font-weight: 700; }
[hidden] { display: none !important; }
footer { text-align: center; color: #657b97; font-size: 11px; padding-top: 24px; }
@media (max-width: 850px) { main { padding: 16px; } }
@media (min-width: 561px) {
  main { padding-block: 6px; }
  header { margin-bottom: 6px; }
  footer { padding-top: 6px; }
}
@media (min-width: 561px) and (min-height: 700px) {
  main { padding-top: 0; }
  header { margin-bottom: 0; }
  .brand-meta { margin-bottom: 4px; }
  h1 { font-size: 30px; line-height: 1; }
  .game-hud { padding-block: 2px; }
  .arena { width: min(100%, calc(100dvh - 95px)); }
}
@media (max-width: 560px) {
  main { padding-block: 12px; }
  header { flex-direction: column; align-items: flex-start; }
  .header-actions { justify-content: flex-start; }
  .achievement-reset { width: 22px; height: 20px; justify-content: center; padding: 3px; }
  .achievement-reset span { display: none; }
  .arena { width: min(100%, calc(100dvh - 202px)); }
  .hud-main { flex-wrap: wrap; gap: 8px; }
  .game-hud .stats { justify-content: flex-start; gap: 4px; width: 100%; }
  .stats div { gap: 3px; padding: 4px; }
  .stats svg { width: 15px; height: 15px; }
  .stats strong { font-size: 11px; }
  .game-hud { padding: 8px; }
  .game-hud .controls { margin-left: auto; gap: 6px; }
  .controls { gap: 5px; }
  .control-pair { padding-right: 4px; }
  .control-button { width: 26px; height: 26px; padding: 4px; }
  .control-button svg { width: 17px; height: 17px; }
  .artifact-options { grid-template-columns: 1fr; }
  .artifact-option { flex-direction: row; text-align: left; }
  .artifact-option .artifact-gem { flex: 0 0 28px; width: 28px; height: 28px; }
  .artifact-sockets { gap: 4px; padding: 4px; }
  .artifact-socket { width: 15px; height: 15px; }
  .hud-messages { align-items: stretch; flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; }.achievement-popup::before, .achievement-popup::after, .artifact-gem { animation: none; } }
.damage-meter { display: grid; gap: 8px; padding: 10px; border: 1px solid #ffd279; border-radius: 10px; background: #0d1622e6; box-shadow: 0 4px 12px #0008; font-size: 12px; font-variant-numeric: tabular-nums; }
.damage-meter-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.damage-meter h2 { margin: 0; color: #a7b8cc; font-size: 11px; letter-spacing: 0.12em; }
.damage-meter-handle { cursor: move; touch-action: none; user-select: none; }
.damage-meter-handle button { cursor: pointer; }
.damage-meter.dragging { box-shadow: 0 8px 24px #000c; }
.damage-meter-header button { padding: 3px 8px; font-size: 11px; }
.damage-meter dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.damage-meter dl div { display: grid; justify-items: center; }
.damage-meter dt { color: #a7b8cc; font-size: 10px; letter-spacing: 0.12em; }
.damage-meter dd { margin: 0; color: #ffd279; font-size: 20px; font-weight: 700; }
.damage-meter ol { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.damage-meter li { position: relative; display: grid; grid-template-columns: 1fr 14px auto 3.5em; align-items: center; gap: 6px; padding: 3px 6px; overflow: hidden; border-radius: 4px; background: #ffffff0d; }
.damage-meter li > :not(.damage-meter-bar) { position: relative; }
.damage-meter-bar { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--source-color) 45%, transparent); border-left: 3px solid var(--source-color); transition: width 0.3s; }
.damage-meter-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.damage-meter-total, .damage-meter-share { text-align: right; text-shadow: 0 1px 2px #000; }
.damage-meter-share { color: #c4d3e4; }
.damage-meter-empty { margin: 0; color: #a7b8cc; text-align: center; }
.damage-meter-crit { display: grid; place-items: center; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 3px; background: none; color: #ffd279; cursor: pointer; filter: drop-shadow(0 1px 1px #000); }
.damage-meter-crit svg { width: 12px; height: 12px; fill: currentColor; }
.damage-meter-crit:hover, .damage-meter-crit[aria-expanded="true"] { color: #fff; }
.damage-meter-crit:focus-visible { outline: 2px solid #ffd279; outline-offset: 1px; }
.damage-meter li.damage-meter-detail { margin-left: 12px; padding-block: 1px; background: #ffffff08; color: #c4d3e4; font-size: 11px; }
.damage-meter-detail .damage-meter-bar { background: color-mix(in srgb, var(--source-color) 25%, transparent); }
.damage-meter-detail.critical { color: #fff; }
.damage-meter-detail.critical .damage-meter-bar { border-left-color: #ffd279; }
@media (prefers-reduced-motion: reduce) { .damage-meter-bar { transition: none; } }