:root {
       --fg: #e6f3ff;
       --accent: #5df2ff;
       --accent2: #ec5dfd;
       --danger: #ff6b6b;
       --bg: #0a0b10;
       --hud: rgba(10, 12, 18, 0.8);
   }

   @font-face {
       font-family: "brand";
       src: url("brand.woff"), url("brand.woff2");
   }

   html,
   body {
       height: 100%;
       margin: 0;
       background: radial-gradient(1200px 800px at 50% -200px, #151829, #0a0b10 60%);
       color: var(--fg);
       font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
   }

   #wrap {
       position: relative;
       height: 100%;
       overflow: hidden;
   }

   #game {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       display: block;
   }

#hud {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--hud);
    padding: 6px 10px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    backdrop-filter: blur(5px);
    z-index: 4;
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: min(520px, 88vw);
}

#hud .row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

   #hud .bar {
       width: 220px;
       height: 10px;
       border-radius: 99px;
       background: rgba(255, 255, 255, 0.08);
       overflow: hidden;
   }

   #hud .bar>i {
       display: block;
       height: 100%;
       background: linear-gradient(90deg, #58f1ff, #bd5fff);
   }

   #hud .powerups-row {
    align-items: flex-start;
    gap: 10px;
}

#hud .powerups-row .small {
    min-width: 56px;
    margin-top: 0;
}

#powerups.powerups,
#powerups {
    display: flex;
       flex-wrap: wrap;
       gap: 6px;
       max-width: 240px;
       flex: 1;
   }

   .power-chip {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 4px 8px;
       border-radius: 10px;
       background: rgba(255, 255, 255, 0.08);
       border: 1px solid rgba(255, 255, 255, 0.12);
       font-size: 12px;
       letter-spacing: .3px;
       white-space: nowrap;
   }

   .power-chip .power-label {
       font-weight: 600;
   }

   .power-chip .power-count {
       font-weight: 700;
       color: var(--accent);
   }

   .power-chip .power-tag {
       font-size: 10px;
       padding: 0 4px;
       border-radius: 6px;
       border: 1px solid rgba(255, 255, 255, 0.25);
       opacity: .7;
   }

   .power-chip.power-offense {
       border-color: rgba(236, 93, 253, 0.45);
   }

   .power-chip.power-defense {
       border-color: rgba(93, 242, 255, 0.45);
   }

   .power-chip.power-utility {
       border-color: rgba(255, 214, 126, 0.45);
   }

   .power-empty {
       opacity: .55;
       font-size: 12px;
   }

   .hide {
       display: none;
   }

   #settings #card {
       width: min(960px, 85vw);
       padding: 26px 28px;
   }

   .settings-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 16px;
   }

   .settings-subtitle {
       margin: 6px 0 0;
       font-size: 14px;
       opacity: .7;
       letter-spacing: .35px;
   }

   .settings-layout {
       margin-top: 28px;
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
       gap: 22px;
   }

   .settings-section {
       background: linear-gradient(180deg, rgba(22, 28, 44, .92), rgba(12, 16, 26, .88));
       border: 1px solid rgba(255, 255, 255, .08);
       border-radius: 20px;
       padding: 20px 22px;
       box-shadow: inset 0 0 0 1px rgba(93, 242, 255, .05), 0 18px 36px rgba(0, 0, 0, .28);
       display: flex;
       flex-direction: column;
       gap: 18px;
   }

   .settings-section h2 {
       margin: 0;
       font-size: 15px;
       text-transform: uppercase;
       letter-spacing: 1.6px;
       opacity: .78;
   }

   .settings-group {
       display: flex;
       flex-direction: column;
       gap: 14px;
   }

   .setting {
       display: flex;
       align-items: center;
       gap: 18px;
       padding: 14px 16px;
       border-radius: 16px;
       background: rgba(255, 255, 255, .04);
       border: 1px solid rgba(255, 255, 255, .08);
       transition: border-color .2s ease, background .2s ease, transform .2s ease;
   }

   .setting:hover {
       border-color: rgba(93, 242, 255, .5);
       background: rgba(255, 255, 255, .07);
       transform: translateY(-1px);
   }

   .setting-info {
       display: flex;
       flex-direction: column;
       gap: 4px;
       flex: 1;
   }

   .setting-title {
       font-weight: 600;
       font-size: 14px;
       letter-spacing: .4px;
   }

   .setting-hint {
       font-size: 12px;
       opacity: .72;
       line-height: 1.4;
   }

   .setting-toggle {
       align-items: center;
   }

   .setting-toggle input[type=checkbox] {
       -webkit-appearance: none;
       appearance: none;
       width: 44px;
       height: 24px;
       border-radius: 999px;
       background: rgba(255, 255, 255, .18);
       border: 1px solid rgba(255, 255, 255, .2);
       position: relative;
       cursor: pointer;
       transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
       margin-top: 0;
   }

   .setting-toggle input[type=checkbox]::after {
       content: '';
       position: absolute;
       top: 2px;
       left: 3px;
       width: 20px;
       height: 20px;
       border-radius: 50%;
       background: rgba(245, 248, 255, .92);
       box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
       transition: transform .2s ease, background .2s ease;
   }

   .setting-toggle input[type=checkbox]:checked {
       background: rgba(93, 242, 255, .3);
       border-color: rgba(93, 242, 255, .7);
       box-shadow: 0 0 0 1px rgba(93, 242, 255, .35);
   }

   .setting-toggle input[type=checkbox]:checked::after {
       transform: translateX(18px);
       background: var(--accent);
   }

   .setting-toggle input[type=checkbox]:focus-visible {
       outline: none;
       box-shadow: 0 0 0 3px rgba(93, 242, 255, .35);
   }

   .setting-select select,
   .setting-range input[type=range] {
       flex: 0 0 170px;
   }

   .setting-select select {
       background: rgba(8, 10, 18, .9);
       border: 1px solid rgba(255, 255, 255, .15);
       color: var(--fg);
       border-radius: 10px;
       padding: 8px 12px;
       font-size: 14px;
       transition: border-color .2s ease, box-shadow .2s ease;
   }

   .setting-select select:focus {
       outline: none;
       border-color: rgba(93, 242, 255, .6);
       box-shadow: 0 0 0 3px rgba(93, 242, 255, .25);
   }

   .setting-range input[type=range] {
       width: 100%;
       max-width: 220px;
       -webkit-appearance: none;
       appearance: none;
       height: 6px;
       border-radius: 999px;
       background: rgba(255, 255, 255, .16);
       outline: none;
       cursor: pointer;
       transition: background .2s ease;
   }

   .setting-range input[type=range]:hover {
       background: rgba(93, 242, 255, .35);
   }

   .setting-range input[type=range]::-webkit-slider-thumb {
       -webkit-appearance: none;
       appearance: none;
       width: 16px;
       height: 16px;
       border-radius: 50%;
       background: var(--accent);
       border: 2px solid rgba(8, 10, 18, .8);
       box-shadow: 0 0 10px rgba(93, 242, 255, .6);
       transition: transform .2s ease;
   }

   .setting-range input[type=range]::-moz-range-thumb {
       width: 16px;
       height: 16px;
       border-radius: 50%;
       background: var(--accent);
       border: 2px solid rgba(8, 10, 18, .8);
       box-shadow: 0 0 10px rgba(93, 242, 255, .6);
       transition: transform .2s ease;
   }

   .setting-range input[type=range]::-moz-range-track {
       height: 6px;
       border-radius: 999px;
       background: rgba(255, 255, 255, .16);
   }

   .setting-range input[type=range]::-webkit-slider-thumb:hover,
   .setting-range input[type=range]::-moz-range-thumb:hover {
       transform: scale(1.05);
   }

   .settings-footer {
       margin-top: 30px;
       display: flex;
       justify-content: flex-end;
       gap: 12px;
   }

   @media (max-width: 700px) {
       .setting {
           flex-direction: column;
           align-items: stretch;
       }

       .setting-toggle input[type=checkbox] {
           margin-top: 0;
       }

       .setting-select select,
       .setting-range input[type=range] {
           flex: 0 0 auto;
           width: 100%;
           max-width: none;
       }
   }

   div#startContent {
       width: 100%;
   }

   .start-head {
       display: flex;
       flex-direction: column;
       align-items: center;
   }

   .start-layout {
       display: flex;
       gap: 24px;
       align-items: stretch;
       justify-content: center;
       flex-wrap: wrap;
       margin-top: 24px;
       height: fit-content;
   }

   .start-actions {
       display: flex;
       flex-direction: column;
       gap: 12px;
       align-items: stretch;
       padding: 12px 16px;
       border-radius: 16px;
       background: rgba(20, 24, 36, .65);
       border: 1px solid rgba(255, 255, 255, .06);
       min-width: 260px;
       flex: 1 1 30%;
       max-width: 360px;
   }

   .start-actions .button {
       width: 100%;
       max-width: 260px;
       align-self: center;
   }

   @media (max-width: 900px) {

       .start-layout .leaderboard,
       .start-actions {
           flex: 1 1 100%;
           max-width: none;
       }
   }

   @media (max-width: 640px) {

       html,
       body {
           font-size: 15px;
       }

    #hud {
        bottom: 8px;
        left: 8px;
        right: 8px;
        transform: none;
        padding: 8px 10px;
        border-radius: 12px;
        min-width: 0;
        width: auto;
        align-items: center;
        gap: 6px;
    }

    #hud .row {
        justify-content: space-between;
        gap: 6px;
    }

       #hud .chip {
           font-size: 12px;
       }

       #hud .bar {
           width: 100%;
       }

       #btns {
           right: 8px;
           top: 8px;
           bottom: auto;
           flex-direction: row;
           align-items: center;
           gap: 4px;
       }

       #btns .button {
           padding: 8px 10px;
           font-size: 11px;
           min-width: 96px;
       }

       #bossHUD {
           top: 56px;
           left: 12px;
           right: 12px;
       }

       #bossHUD #bossName {
           font-size: 16px;
       }

       #bossHUD #bossBar {
           height: 12px;
       }

       #mobileHint {
           font-size: 11px;
           padding: 6px 8px;
           width: calc(100% - 32px);
           bottom: 72px;
       }

       #card,
       #settings #card {
           width: 94vw;
           padding: 16px 14px;
       }

       .settings-layout {
           grid-template-columns: 1fr;
           gap: 16px;
       }

       .settings-section {
           padding: 16px 18px;
       }

       .settings-footer {
           flex-direction: column-reverse;
           align-items: stretch;
           gap: 10px;
       }

       .settings-footer .button {
           width: 100%;
       }

       .start-layout {
           gap: 16px;
       }

       .start-actions {
           min-width: 0;
           padding: 10px 12px;
       }

       .leaderboard {
           padding: 12px;
       }

       .leaderboard-header h2 {
           font-size: 16px;
       }

       .leaderboard-body {
           overflow-x: auto;
           -webkit-overflow-scrolling: touch;
       }

       .leaderboard-table th,
       .leaderboard-table td {
           padding: 6px 8px;
           font-size: 11px;
       }

       .button {
           padding: 0.75rem;
           font-size: 0.95rem;
       }

       .score-form input[type=text] {
           width: 100%;
       }

       .score-actions {
           width: 100%;
           justify-content: space-between;
       }
   }

   @media (min-width: 1080px) {
       .start-layout {
           flex-wrap: nowrap;
           justify-content: space-between;
       }

       .start-layout .leaderboard,
       .start-actions {
           flex: 0 1 calc((100% - 48px) / 3);
           max-width: calc((100% - 48px) / 3);
       }
   }

   .score-form {
       display: flex;
       flex-direction: column;
       gap: 12px;
       align-items: flex-start;
       margin-top: 12px;
   }

   .score-form input[type=text] {
       width: 220px;
       padding: 8px 10px;
       border-radius: 10px;
       border: 1px solid rgba(255, 255, 255, .2);
       background: rgba(10, 12, 18, .6);
       color: var(--fg);
   }

   .score-actions {
       display: flex;
       gap: 10px;
       flex-wrap: wrap;
   }

   .button.secondary {
       background: rgba(255, 255, 255, .05);
       border: 1px solid rgba(255, 255, 255, .12);
   }

   .gameover-stats {
       display: flex;
       gap: 14px;
       flex-wrap: wrap;
       margin: 12px 0;
       font-size: 14px;
   }

   .gameover-stats span strong {
       font-weight: 700;
   }

   .submit-status {
       min-height: 18px;
       font-size: 12px;
       opacity: .75;
       margin-top: 6px;
   }

   .leaderboard {
       margin-top: 24px;
       padding: 16px;
       border-radius: 16px;
       background: rgba(20, 24, 36, .78);
       border: 1px solid rgba(255, 255, 255, .08);
   }

   .start-layout .leaderboard {
       margin-top: 0;
       min-width: 280px;
       flex: 1 1 30%;
       max-width: 420px;
   }

   .leaderboard-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       flex-wrap: wrap;
   }

   .leaderboard-header h2 {
       margin: 0;
       font-size: 18px;
   }

   .leaderboard-body {
       margin-top: 14px;
       min-height: 70%;
       background: rgba(0, 0, 0, .15);
       border-radius: 12px;
       overflow: hidden;
   }

   .leaderboard-table {
       width: 100%;
       border-collapse: collapse;
       font-size: 12px;
   }

   .leaderboard-table thead {
       background: rgba(255, 255, 255, .04);
   }

   .leaderboard-table th,
   .leaderboard-table td {
       padding: 8px 10px;
       white-space: nowrap;
   }

   .leaderboard-table th {
       text-transform: uppercase;
       font-size: 10px;
       letter-spacing: 0.5px;
       opacity: .72;
   }

   .leaderboard-table td:nth-child(2) {
       max-width: 180px;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .leaderboard-table td:nth-child(1),
   .leaderboard-table th:nth-child(1) {
       /* width: 46px; */
       text-align: right;
   }

   .leaderboard-table td:nth-child(3),
   .leaderboard-table th:nth-child(3) {
       text-align: right;
   }

   .leaderboard-table td:nth-child(5),
   .leaderboard-table th:nth-child(5) {
       text-align: right;
   }

   .leaderboard-row:nth-child(even) {
       background: rgba(255, 255, 255, .02);
   }

   .leaderboard-loading,
   .leaderboard-empty,
   .leaderboard-error {
       padding: 18px;
       font-size: 12px;
       color: rgba(255, 255, 255, .8);
   }

   .leaderboard-empty {
       opacity: .7;
   }

   .leaderboard-error {
       color: var(--danger);
   }

   #hud .chip {
       font-weight: 700;
       letter-spacing: .5px;
   }

   #hud .small {
       opacity: .75;
       font-size: 12px;
   }

   #bossHUD {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
       top: 56px;
       z-index: 4;
       background: var(--hud);
       padding: 8px 10px;
       border-radius: 12px;
       display: none;
       align-items: center;
       gap: 10px;
       width: min(520px, 90vw);
   }

   #bossName {
       font-weight: 700;
       letter-spacing: .4px;
   }

   #bossBar {
       width: 260px;
       height: 10px;
       border-radius: 99px;
       background: rgba(255, 255, 255, .08);
       overflow: hidden;
   }

   #bossBar>i {
       display: block;
       height: 100%;
       background: linear-gradient(90deg, #ff9aa4, #ff4d6d);
       width: 0%;
   }

#btns {
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    gap: 4px;
    z-index: 5;
    align-items: center;
}

#btns .button {
    padding: 0.55rem 0.85rem;
    font-size: 0.88rem;
    min-width: 110px;
}

   .button {
       display: inline-block;
       margin: 1rem auto;
       padding: 1rem;
       border-radius: 10px;
       background: rgba(99, 102, 241, 0.18);
       border: 1px solid rgba(99, 102, 241, 0.45);
       color: #c7d2fe;
       font-weight: 600;
       text-decoration: none;
       text-align: center;
       transition: background 0.2s ease, transform 0.2s ease;
   }

   .button:active {
       transform: translateY(2px);
   }

   .button:hover {
       transform: translateY(2px);
   }

   .pause-button {
       width: 23%;
   }

   #overlay,
   #levelup,
   #settings,
   #pauseMenu,
   #codex {
       position: fixed;
       inset: 0;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 24px 16px;
       overflow-y: auto;
       background: radial-gradient(1000px 700px at 50% 20%, rgba(50, 60, 100, .25), rgba(10, 12, 18, 1));
       z-index: 6;
   }

   #overlay.hide,
   #levelup.hide,
   #settings.hide,
   #pauseMenu.hide,
   #codex.hide {
       display: none;
   }

   .start-screen {
       display: flex;
       flex-direction: column;
       align-content: center;
       align-items: center;
   }


   .start-screen h2 {
       font-size: 3.4rem;
       font-family: 'brand';
       margin: 1rem auto;
   }

   .donation-link {
       display: inline-block;
       margin: 1rem auto;
       padding: 6px 10px;
       border-radius: 10px;
       background: rgba(99, 102, 241, 0.18);
       border: 1px solid rgba(99, 102, 241, 0.45);
       color: #c7d2fe;
       font-weight: 600;
       text-decoration: none;
       text-align: center;
       transition: background 0.2s ease, transform 0.2s ease;
   }

   #card {
       width: min(1200px, 88vw);
       max-height: calc(100vh - 48px);
       overflow-y: auto;
       background: rgba(20, 24, 36, .9);
       border: 1px solid rgba(255, 255, 255, .08);
       border-radius: 16px;
       padding: 20px;
       box-shadow: 0 40px 80px rgba(0, 0, 0, .5);
   }

   h1 {
       margin: 0 0 8px;
       font-size: clamp(22px, 5vw, 36px);
   }

   p {
       margin: 8px 0;
       line-height: 1.5;
   }

   code {
       background: rgba(255, 255, 255, .07);
       padding: 2px 6px;
       border-radius: 6px;
   }

   .grid3 {
       display: grid;
       grid-template-columns: repeat(1, 1fr);
       gap: 10px;
   }

   @media (min-width: 560px) {
       .grid3 {
           grid-template-columns: repeat(3, 1fr);
       }
   }

   .choice {
       border-radius: 12px;
       padding: 12px;
       background: rgba(255, 255, 255, .06);
       border: 1px solid rgba(255, 255, 255, .1);
       cursor: pointer;
       text-align: left;
       color: #ffffff;
   }

   .choice:hover {
       background: rgba(255, 255, 255, .1);
   }

   .choice h3 {
       margin: 0 0 6px;
       font-size: 16px;
   }

   .choice p {
       margin: 0;
       opacity: .85;
       font-size: 13px;
   }

   #mobileHint {
       position: absolute;
       bottom: 88px;
       left: 50%;
       transform: translateX(-50%);
       font-size: 12px;
       opacity: .8;
       background: rgba(20, 24, 36, .65);
       padding: 6px 10px;
       border-radius: 12px;
   }

   #touch {
       position: absolute;
       width: 80px;
       height: 80px;
       border: 2px solid var(--accent);
       border-radius: 50%;
       opacity: 0;
       pointer-events: none;
       filter: drop-shadow(0 0 12px rgba(93, 242, 255, .6));
       transform: translate(-50%, -50%);
   }

   #timers {
       position: absolute;
       left: 12px;
       bottom: 12px;
       display: flex;
       flex-direction: column;
       gap: 8px;
       z-index: 6;
       min-width: 160px;
   }

   .timer {
       background: rgba(20, 24, 36, .82);
       border: 1px solid rgba(255, 255, 255, .12);
       border-radius: 12px;
       padding: 6px 10px 8px 10px;
       filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
   }

   .timer-name {
       font-size: 12px;
       font-weight: 600;
       letter-spacing: .4px;
   }

   .timer-track {
       margin-top: 4px;
       height: 4px;
       border-radius: 6px;
       background: rgba(255, 255, 255, 0.12);
       overflow: hidden;
   }

   .timer-track i {
       display: block;
       height: 100%;
       background: linear-gradient(90deg, var(--accent), var(--accent2));
       width: 100%;
       transition: width 0.12s ease-out;
   }

   .timer-remaining {
       margin-top: 2px;
       font-size: 11px;
       opacity: .75;
       text-align: right;
       letter-spacing: .3px;
   }