/* the display font: Lilita One by Juan Montoreano, SIL Open Font License 1.1 (LilitaOne-OFL.txt), as WOFF2 (entry 150) */
@font-face { font-family: "Lilita One"; src: url(assets/lilita-one.woff2?v=138e6ae58838) format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; }
:root { --disp: "Lilita One", "Segoe UI", Arial, sans-serif;
  /* the game's theme colours for the main title and the HUD, for now the ship palette Crimson (entry 162): red, orange, peach */
  --theme1: #ff3355; --theme2: #ffb02e; --theme-text: #ffd0a8;
  /* the cartoon look for menus and the HUD (entry 154): dark ink outlines and hard drop shadows in place of neon glows */
  --ink: #14101e; --panel: #1c2446;
  --ink-text: 2px 0 var(--ink), -2px 0 var(--ink), 0 2px var(--ink), 0 -2px var(--ink), 2px 2px var(--ink), -2px -2px var(--ink), 2px -2px var(--ink), -2px 2px var(--ink);
  --ink-text-thin: 1.5px 0 var(--ink), -1.5px 0 var(--ink), 0 1.5px var(--ink), 0 -1.5px var(--ink), 0 2.5px var(--ink);
  --ink-text-big: var(--ink-text), 3px 0 var(--ink), -3px 0 var(--ink), 0 3px var(--ink), 0 -3px var(--ink), 5px 6px 0 var(--ink);
  --ink-title: drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(5px 6px 0 var(--ink));
  --pop: 0 4px 0 var(--ink); --drop: 4px 4px 0 var(--ink); }
.title, .btn, .diff-btn, .stat, .row-label, #score, #total-points, #wave, #combo, #fx, #banner, #boss-bar span, #shield-ind, #dash-wrap, .ft, #toast,
#t-dash, #t-pause, .hull-card b, .hull-card .st, .ach b, .ecard b, .ach .rw, .color-grid label, #web-stats b, #web-tip b, .ctl-table td:first-child, kbd, .ghost-hint { font-family: var(--disp); font-synthesis: none; }
.diff-btn small, #toast small, #t-dash small { font-family: "Segoe UI", Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #04050c; color: #fff; font-family: "Segoe UI", Arial, sans-serif; overflow: hidden; user-select: none; }
#game-renderer { position: fixed; inset: 0; touch-action: none; outline: none; }  /* also where the keyboard focus rests (19-input.js) */
#game-renderer canvas { display: block; }
.hidden { display: none !important; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 2; text-shadow: var(--ink-text); }
#score { position: absolute; top: 14px; left: 18px; font-size: 28px; font-weight: 700; letter-spacing: 1px; }
#total-points { position: absolute; top: 14px; right: 18px; font-size: 20px; color: #ffd84a; text-align: right; }
#wave { position: absolute; top: 48px; right: 18px; font-size: 16px; color: var(--theme-text); text-align: right; }
#fx { position: absolute; top: 52px; left: 18px; font-size: 14px; font-weight: 700; color: #ffd84a; line-height: 1.5; }
#boss-bar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: min(42vw, 480px); height: 22px; background: rgba(20,16,30,.65); border: 3px solid var(--ink); border-radius: 11px; overflow: hidden; box-shadow: var(--pop); }
#boss-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff3355, #ff9a2e); }
#boss-bar span { position: absolute; inset: 0; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: 4px; line-height: 16px; }
#hp-row { position: absolute; bottom: 18px; left: 18px; display: flex; align-items: center; gap: 18px; }
#summon-hp { font-family: var(--disp); font-size: 15px; letter-spacing: 1px; color: #6fb8b0; }
#summon-hp.on { font-size: 24px; color: #39ffe0; }
#hearts { font-size: 30px; color: #ff4f7b; letter-spacing: 3px; }
#shield-ind { position: absolute; bottom: 58px; left: 20px; font-size: 14px; color: #7fd6ff; }
#combo { position: absolute; bottom: 20px; right: 18px; font-size: 22px; font-weight: 800; color: #ffd84a; }
#dash-wrap { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 220px; text-align: center; font-size: 12px; color: #9fd8ff; }
#dash-bar { height: 12px; margin-top: 4px; background: rgba(20,16,30,.65); border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; }
#dash-fill { height: 100%; width: 100%; background: linear-gradient(90deg,#00e5ff,#7a5cff); }  /* cyan, not the theme's red: red reads as danger */
#banner { position: absolute; top: 28%; left: 0; right: 0; text-align: center; font-size: 56px; font-weight: 800; letter-spacing: 8px; color: var(--theme2); opacity: 0; text-shadow: var(--ink-text-big); }
#banner.show { animation: banner 1.8s ease-out; }
@keyframes banner { 0% { opacity: 0; transform: scale(.4) rotate(-8deg); } 12% { opacity: 1; transform: scale(1.15) rotate(-2deg); } 22% { transform: scale(1) rotate(-3deg); } 75% { opacity: 1; transform: scale(1) rotate(-3deg); } 100% { opacity: 0; transform: scale(1.1) rotate(-3deg); } }
.ft.pow { font: 900 calc(24px * var(--ts, 1) * var(--hs, 1)) 'Arial Black', Impact, sans-serif; font-style: italic; color: #ffe14a; letter-spacing: 1px; /* an ink outline and a drop shadow, comic style (stacked shadows draw it in every browser) */ text-shadow: 2px 0 #14101e, -2px 0 #14101e, 0 2px #14101e, 0 -2px #14101e, 2px 2px #14101e, -2px -2px #14101e, 2px -2px #14101e, -2px 2px #14101e, 4px 5px 0 #14101e; animation: pow .9s linear forwards; }
.ft.pow.big { font-size: calc(40px * var(--ts, 1) * var(--hs, 1)); color: #ff5a3d; }
/* a comic word: pops in with an overshoot, holds, then drifts up and fades */
@keyframes pow { 0% { transform: translate(-50%,-50%) scale(.3) rotate(-14deg); opacity: 1; } 15% { transform: translate(-50%,-50%) scale(1.2) rotate(-8deg); } 25% { transform: translate(-50%,-50%) scale(1) rotate(-8deg); } 70% { transform: translate(-50%,-62%) scale(1) rotate(-8deg); opacity: 1; } 100% { transform: translate(-50%,-80%) scale(.95) rotate(-8deg); opacity: 0; } }
.ft { position: fixed; z-index: 3; pointer-events: none; font-weight: 700; font-size: calc(16px * var(--ts, 1) * var(--hs, 1)); color: #5dffb0; text-shadow: var(--ink-text); transform: translate(-50%,-50%); animation: ft .9s ease-out forwards; white-space: nowrap; }
@keyframes ft { to { opacity: 0; transform: translate(-50%,-150%); } }
#toast { position: fixed; z-index: 9; left: 50%; bottom: 70px; transform: translateX(-50%); padding: 12px 22px; color: var(--ink); background: #ffd84a; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); font-weight: 700; text-align: center; pointer-events: none; animation: toast 3.2s ease-out forwards; }
#toast small { display: block; color: #4a3c12; font-weight: 400; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 20px); } 10% { opacity: 1; transform: translate(-50%, 0); } 85% { opacity: 1; } 100% { opacity: 0; } }

/* Overlays */
.overlay { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(rgba(255,255,255,.05) 1.5px, transparent 1.8px) 0 0 / 14px 14px, radial-gradient(ellipse at center, rgba(22,34,66,.55), rgba(10,12,28,.88)); padding: 16px; overflow: auto; }
.title { font-size: clamp(40px, 9vw, 92px); font-weight: 900; letter-spacing: 8px; margin: 0 0 6px; background: linear-gradient(90deg,var(--theme2),var(--theme1)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: var(--ink-title); width: fit-content; transform: rotate(-2deg); } /* the theme colours (orange to red), as on the main menu; fit-content keeps the full gradient on short headings */
/* game over: canary yellow -> cadmium red, kept for this screen only */
#game-over > .title { background-image: linear-gradient(90deg,#ffef00,#e30022); }
.title.sm { font-size: clamp(30px, 5vw, 52px); letter-spacing: 6px; }
/* skill web title: the six region colors in web order (Blastworks, Fortress, Speedway, Fortune, Gadget Lab, Mayhem) */
#skill-screen > .title { background-image: linear-gradient(90deg,#ff5577,#5ab8ff,#b36bff,#ffd84a,#39ffe0,#ff9a2e); }
/* customize title: the player's chosen ship colors, set as --c1..--c4 on #custom-screen by buildShip() */
#custom-screen .title { background-image: linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4)); }
#ach-screen > .title { background-image: linear-gradient(90deg,#ffdf00 0%,#ffdf00 25%,#9370db 75%,#9370db 100%); }
#controls-screen > .title { background-image: linear-gradient(90deg,#00e5ff,#7a5cff); }
/* engine trails title: colors of the equipped trail, set as --tg / --tg1 / --tg2 on #trail-screen by renderTrails() */
#trail-screen .title { background-image: var(--tg); }
#pause-menu > .title { background-image: linear-gradient(90deg,#39ff7a,#00b3ff); } /* green -> blue */
.sub { color: #9fb4d0; margin: 10px 0 14px; max-width: 600px; line-height: 1.5; }
.btn { margin: 5px; padding: 11px 24px; font-size: 17px; font-weight: 700; letter-spacing: 2px; color: #04050c; background: #00e5ff; border: 3px solid var(--ink); border-radius: 14px; cursor: pointer; box-shadow: var(--pop); transition: transform .1s, box-shadow .1s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.alt { background: #7a5cff; color: #fff; text-shadow: var(--ink-text-thin); }
.btn.pink { background: #ff3fa4; color: #fff; text-shadow: var(--ink-text-thin); }
.btn.green { background: #2ee66b; color: #04050c; }
.btn.gold { background: #ffd84a; color: #04050c; } /* the colour keeps the text dark against .gold's yellow below */
.btn.reset-btn { margin-top: 10px; background: repeating-linear-gradient(45deg, #ff2a3d 0 8px, #14101e 8px 16px); color: #fff; text-shadow: var(--ink-text-thin); font-size: 14px; padding: 8px 18px; animation: reset-wobble 1.6s ease-in-out infinite; }
.btn.start { background: #2ee66b; color: #04050c; }
/* the one button to press next: Start Game, or Skill Web / Upgrade Skills when a keystone is affordable (updatePulse) */
.btn.pulse { animation: start-pulse 1.4s ease-in-out infinite; }
@keyframes start-pulse { 50% { transform: scale(1.07); } }
@keyframes reset-wobble { 25% { transform: rotate(-1deg); } 75% { transform: rotate(1deg); } }
.btn.settings { background: #c8d4ea; color: #04050c; }
.btn.ghost { background: var(--panel); color: #c8d6ee; font-size: 14px; padding: 8px 16px; box-shadow: 0 3px 0 var(--ink); }
.stat { font-size: 19px; margin: 4px 0; }
.gold { color: #ffd84a; }
.best-glow { color: #ffd84a; text-shadow: var(--ink-text), 3px 4px 0 var(--ink); }
.keys { margin-top: 14px; font-size: 13px; color: #7d8fae; }
.fb-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 12px auto 0; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 14px; background: var(--panel); box-shadow: var(--drop); width: fit-content; max-width: 94vw; }
.fb-q { color: #c8d6ee; font-size: 14px; font-weight: 600; }
.fb-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.fb-row.done .fb-btns { display: none; }
.fb-row.done .fb-q { color: #39ff7a; }
.app-version { margin-top: 6px; font-size: 11px; color: #56627a; letter-spacing: 1px; }
.row-label { margin-top: 8px; font-size: 13px; letter-spacing: 4px; color: #9fb4d0; font-weight: 700; text-shadow: 0 2px 0 var(--ink); }

/* Option rows (difficulty / arena) */
.diff-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0 4px; }
.diff-btn { padding: 7px 14px; font-size: 14px; font-weight: 700; letter-spacing: 1px; color: #c8d6ee; background: var(--panel); border: 3px solid var(--ink); border-radius: 12px; cursor: pointer; box-shadow: var(--pop); transition: transform .1s, box-shadow .1s; }
.diff-btn:hover { transform: translateY(-2px); }
.diff-btn small { display: block; font-size: 11px; font-weight: 600; opacity: .85; letter-spacing: 0; }
.diff-btn.sel { color: var(--ink); background: var(--c); transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.diff-btn.lock { opacity: .75; border-style: dashed; }
.diff-desc { min-height: 18px; margin-bottom: 6px; font-size: 13px; color: #9fb4d0; }
.deny { animation: deny .3s; }
@keyframes deny { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Controls */
.sens-wrap, .slider-wrap { display: inline-flex; align-items: center; gap: 10px; margin: 5px; padding: 6px 14px; color: #c8d6ee; background: var(--panel); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); font-size: 14px; letter-spacing: 1px; }
.sens-wrap input[type=range], .slider-wrap input[type=range] { width: 130px; accent-color: #00e5ff; cursor: pointer; }
.slider-wrap b { min-width: 4ch; color: #00e5ff; }
.sens-wrap b { min-width: 2ch; color: #00e5ff; }
.ctl-table { border-collapse: collapse; margin: 6px 0 14px; text-align: left; }
.ctl-table td { padding: 7px 14px; border-bottom: 1px solid #1f2b47; font-size: 16px; }
.ctl-table td:first-child { white-space: nowrap; }
.bind-btn { min-width: 74px; margin: 0 3px; padding: 4px 10px; font: 700 14px "Segoe UI", Arial, sans-serif; color: var(--ink); background: #e6f0ff; border: 2px solid var(--ink); border-bottom-width: 5px; border-radius: 8px; cursor: pointer; }
.bind-btn:hover { background: #fff; }
.bind-btn.wait { background: #ffd84a; }
.bind-help { font-size: 13px; }
kbd { display: inline-block; min-width: 28px; padding: 3px 8px; margin: 0 2px; text-align: center; font: 700 14px "Segoe UI", Arial, sans-serif; color: var(--ink); background: #e6f0ff; border: 2px solid var(--ink); border-bottom-width: 5px; border-radius: 8px; }
.tips { max-width: 600px; color: #9fb4d0; font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
.toggle-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; max-width: 780px; margin: 12px auto 0; padding-top: 8px; border-top: 3px dashed rgba(159,180,208,.25); }
/* text size setting: --ts is set from the Text size slider (skill-web canvas area is left unscaled) */
/* --hs: the HUD's scale for big desktop windows (fitHud, entry 156), on top of the Text size setting */
.overlay > *:not(#web-wrap):not(#daily-fx) { zoom: var(--ts, 1); }
#hud > *, #toast { zoom: calc(var(--ts, 1) * var(--hs, 1)); }
#fatal { z-index: 10; }
.save-warn { max-width: 560px; margin: 4px auto 0; padding: 6px 12px; color: var(--ink); font-size: calc(13px * var(--ts, 1)); border: 3px solid var(--ink); border-radius: 12px; background: #ffd84a; box-shadow: var(--pop); }
.overlay { justify-content: safe center; } /* keep the top of tall (enlarged) menus scrollable */
.privacy-btn { margin-top: 10px; font-size: 12px; padding: 6px 14px; }
.privacy-text { text-align: left; }
.privacy-text p { margin: 0 0 10px; }
.privacy-text b { color: #00e5ff; }
.privacy-note { color: #7d8fae; font-size: 13px; }
#privacy-pid.copyable { color: #cfe3ff; cursor: copy; user-select: all; -webkit-user-select: all; }
/* Share Metrics: the toggle under the menus (green when on) and the birth-year list on its first-load screen */
.metrics-btn.on { color: #5dffb0; border-color: #2e7d5b; }
#metrics-year { background: var(--panel); color: #e6f0ff; border: 3px solid var(--ink); border-radius: 10px; padding: 6px 10px; font: inherit; }
#metrics-note:empty { display: none; }
.privacy-text ol { margin: 0 0 10px; padding-left: 22px; }
.privacy-text li { margin-bottom: 4px; }
#settings-screen > .title { background-image: linear-gradient(90deg,#ffffff,#9fb4d0,#00e5ff); }
.settings-row { border-top: none; margin-top: 16px; }
.save-file-row { max-width: 520px; margin: 12px auto 0; padding-top: 8px; border-top: 3px dashed rgba(159,180,208,.25); }
.save-file-note { max-width: 480px; margin: 4px auto; color: #9fb4d0; font-size: 14px; line-height: 1.5; }
.save-file-note:empty { display: none; }
.save-file-note.bad { color: #ff8a95; }
#import-load-button { background: #ffd23d; }
.settings-tabs { display: flex; gap: 6px; justify-content: center; margin: 10px 0 6px; }
.settings-tabs .tab { padding: 7px 18px; font: 400 14px var(--disp); letter-spacing: 2px; color: #c8d6ee; background: var(--panel); border: 3px solid var(--ink); border-radius: 12px; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.settings-tabs .tab:hover { transform: translateY(-1px); }
.settings-tabs .tab.sel { color: #04050c; background: #00e5ff; }
#privacy-screen > .title { background-image: linear-gradient(90deg,#00e5ff,#9fb4d0); }
.help-body { width: min(760px, 100%); text-align: left; }
.help-body .row-label { margin-top: 14px; }
.help-list { margin: 6px 0; padding-left: 20px; color: #c8d6ee; font-size: 14px; line-height: 1.55; }
.help-list li { margin: 4px 0; }
.help-list b { color: #fff; }
.help-list .cur { color: #2ee66b; font-size: 12px; }
.help-note { color: #8fa3c4; font-size: 13px; margin: 4px 0; }
.ecard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; width: min(1000px, 100%); margin: 8px 0 12px; text-align: left; }
.ecard { display: flex; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; background: var(--panel); border: 3px solid var(--ink); border-left: 8px solid var(--c); border-radius: 14px; box-shadow: var(--drop); }
.ecard canvas { flex: none; width: 96px; height: 96px; border-radius: 10px; border: 2px solid var(--ink); background: radial-gradient(circle, #2a3566, #141a36); }
.ecard b { display: block; font-size: 16px; color: var(--c); margin-bottom: 3px; text-shadow: 0 2px 0 var(--ink); }
.ecard small { display: block; font-size: 13px; line-height: 1.45; color: #c8d6ee; }
html.m .ecard-grid { grid-template-columns: 1fr; }
html.m .ecard canvas { width: 72px; height: 72px; }
.intro-head { font-family: var(--disp); font-size: 20px; letter-spacing: 4px; color: #ff6b6b; text-shadow: var(--ink-text), 3px 3px 0 var(--ink); margin-bottom: 8px; }
.intro-head span { color: #8fa3c4; font-size: 14px; letter-spacing: 1px; }
#intro-screen { justify-content: center; }
#intro-card { width: min(560px, 100%); text-align: left; }
#intro-card .ecard { padding: 12px 16px 12px 12px; }
#intro-card .ecard canvas { width: 140px; height: 140px; }
#intro-card .ecard b { font-size: 22px; }
#intro-card .ecard small { font-size: 15px; }
#intro-screen .btn { margin-top: 10px; }
@media (max-height: 420px) { #intro-card .ecard canvas { width: 88px; height: 88px; } #intro-card .ecard b { font-size: 18px; } #intro-card .ecard small { font-size: 13px; } .intro-head { font-size: 16px; margin-bottom: 4px; } #intro-screen .btn { margin-top: 6px; } }
.btn.daily-btn { background: var(--panel); color: #9fffc0; }
.btn.daily-btn.ready { color: #04050c; background: #2ee66b; animation: start-pulse 1.2s ease-in-out infinite; }
.btn.daily-btn.ready::after { content: " \2605"; }
#daily-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.daily-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px 0 6px; }
.dbub { width: 72px; height: 72px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--disp); font-size: 13px; letter-spacing: 1px; border: 3px solid var(--ink); color: rgba(200,214,238,.6); background: var(--panel); box-shadow: 0 3px 0 var(--ink); }
.dbub b { font-size: 15px; font-weight: 400; }
.dbub.done { background: #2ee66b; color: #04050c; }
.dbub.today { color: #fff; background: #2e7d5b; animation: dailyPulse 1.1s ease-in-out infinite; }
.dbub.today.done { animation: none; background: #2ee66b; color: #04050c; }
.dbub.big { color: rgba(255,216,74,.85); }
.dbub.big.today { background: #8a6d12; }
@keyframes dailyPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12) rotate(-4deg); } }
.daily-msg { min-height: 22px; font-family: var(--disp); color: #ffd84a; font-size: 16px; margin-bottom: 4px; }
html.m .dbub { width: 54px; height: 54px; font-size: 11px; } html.m .dbub b { font-size: 12px; }
.pause-col { display: flex; flex-direction: column; align-items: center; margin-top: 16px; }
.pause-row { display: flex; flex-wrap: wrap; justify-content: center; }

/* Customize */
#custom-screen, #trail-screen { align-items: flex-start; justify-content: flex-start; text-align: left; padding: 18px 24px; background: linear-gradient(90deg, rgba(4,5,12,.95) 0, rgba(4,5,12,.95) 470px, rgba(4,5,12,.05) 780px); }
.panel { width: min(440px, 100%); }
/* phones: the menu covers the arena, so a small view of the ship stays at the top right while the menu scrolls under it */
#ship-preview { display: none; }
html.m #ship-preview { display: block; position: sticky; top: 0; z-index: 2; float: right; width: min(46%, 220px); aspect-ratio: 4 / 3; margin: 0 0 8px 10px; border: 3px solid var(--ink); border-radius: 12px; background: #04050c; box-shadow: var(--drop); }
html.m #custom-screen .hull-list, html.m #trail-screen .hull-list { clear: both; }
html.m #custom-screen .title, html.m #trail-screen .title { font-size: 26px; letter-spacing: 4px; } /* fits beside the view */
.size-row { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; }
.size-row input[type=range] { flex: 1; accent-color: #00e5ff; cursor: pointer; }
.size-row b { min-width: 4ch; color: #00e5ff; font-size: 14px; }
.hull-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 12px; }
.hull-card, .swatch { font: inherit; color: inherit; text-align: left; } /* cards and swatches are <button>s so the keyboard reaches them */
.hull-card:focus-visible, .swatch:focus-visible { outline: 2px solid #ffd84a; outline-offset: 2px; }
.hull-card { display: block; width: 100%; padding: 8px 10px; background: var(--panel); border: 3px solid var(--ink); border-radius: 12px; cursor: pointer; box-shadow: var(--drop); transition: transform .1s, box-shadow .1s; }
.hull-card:hover { transform: translateY(-2px); }
.hull-card b { font-size: 15px; }
.hull-card small { display: block; font-size: 11px; color: #8fa3c4; line-height: 1.3; margin-top: 2px; min-height: 28px; }
.hull-card .st { display: block; font-size: 12px; font-weight: 700; margin-top: 3px; color: #00e5ff; }
.trail-strip { display: block; height: 10px; border-radius: 5px; margin-top: 6px; border: 2px solid var(--ink); background: #1a2440; }
.hull-card.sel { border-color: #00e5ff; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.hull-card.locked .st { color: #ffd84a; }
.hull-card.poor .st { color: #ff6b6b; }
.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 8px 0; }
.color-grid label { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #9fb4d0; gap: 8px; }
.color-grid input[type=color] { width: 54px; height: 30px; padding: 0; border: 3px solid var(--ink); border-radius: 8px; background: var(--panel); cursor: pointer; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.swatch { padding: 0; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); cursor: pointer; transition: transform .1s; }
.swatch:hover { transform: scale(1.15); }

/* Arenas */
.arena-open small { font-size: 11px; }
.arena-cats { width: min(760px, 100%); text-align: left; }
.arena-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.arena-card { border-left: 8px solid var(--c); }
.arena-card.sel { border-color: var(--c); }
.arena-card b { color: var(--c); }
.arena-card.locked { opacity: .8; }
#arena-screen > .title { background-image: linear-gradient(90deg,#00e5ff,#ff5fd2,#5dff7a,#ffd84a,#ff3355); }

/* Developer perks */
.btn.dev { background: #ff7a2e; color: #04050c; }
.btn.dev.on { background: #5dffb0; }
#dev-screen > .title { background-image: linear-gradient(90deg,#ff7a2e,#ffd84a,#5dffb0); }
.dev-note { font-size: 13px; color: #9fb4d0; margin: 2px 0 6px; }
.dev-grid .ach { opacity: 1; border-left: 6px solid var(--c); }
.dev-grid .ach b { color: var(--c); }
.dev-stats { display: grid; grid-template-columns: auto auto; gap: 0 12px; font-size: 12px; margin: 4px 0; color: #d8e4ff; }
.dev-stats span:nth-child(odd) { color: #8fa3c4; }

/* Achievements */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; width: min(960px, 100%); margin: 10px 0; text-align: left; }
.ach { padding: 10px 12px; background: var(--panel); border: 3px solid var(--ink); border-radius: 12px; box-shadow: var(--drop); opacity: .6; }
.ach.done { opacity: 1; border-color: #ffd84a; }
.ach b { font-size: 15px; }
.ach small { display: block; font-size: 12px; color: #8fa3c4; margin: 2px 0; }
.ach .rw { font-size: 12px; font-weight: 700; color: #ffd84a; }


/* ===== Mobile ===== */
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; height: 100dvh; }
.overlay { touch-action: pan-y pinch-zoom; -webkit-overflow-scrolling: touch; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
#touch-ui { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.tzone { position: absolute; top: 0; bottom: 0; width: 50%; touch-action: none; pointer-events: auto; }
#tz-l { left: 0; } #tz-r { right: 0; }
.stick { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 3px solid rgba(20,16,30,.8); background: rgba(0,229,255,.12); display: none; pointer-events: none; }
.stick.r { background: rgba(255,63,164,.12); }
.stick.on { display: block; }
.stick .knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #00e5ff; border: 3px solid var(--ink); }
.stick.r .knob { background: #ff3fa4; }
.ghost-hint { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); width: 100px; height: 100px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.16); color: rgba(255,255,255,.28); font: 700 11px "Segoe UI", Arial, sans-serif; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
#gh-l { left: calc(env(safe-area-inset-left, 0px) + 6%); } #gh-r { right: calc(env(safe-area-inset-right, 0px) + 6%); }
#t-dash { position: absolute; right: calc(env(safe-area-inset-right, 0px) + 16px); bottom: 38%; width: 82px; height: 82px; border-radius: 50%; border: 3px solid var(--ink); background: rgba(122,92,255,.8); color: #fff; text-shadow: var(--ink-text-thin); font: 800 14px "Segoe UI", Arial, sans-serif; letter-spacing: 1px; pointer-events: auto; touch-action: none; box-shadow: var(--pop); line-height: 1.2; }
#t-summon { position: absolute; right: calc(env(safe-area-inset-right, 0px) + 16px); bottom: calc(38% + 96px); width: 82px; height: 82px; border-radius: 50%; border: 3px solid var(--ink); background: rgba(57,255,224,.7); color: #fff; text-shadow: var(--ink-text-thin); font: 800 12px "Segoe UI", Arial, sans-serif; letter-spacing: 1px; pointer-events: auto; touch-action: none; box-shadow: var(--pop); line-height: 1.2; }
#t-summon small { display: block; font-size: 12px; font-weight: 600; opacity: .9; }
#t-summon.cd { opacity: .4; box-shadow: none; }
#t-dash small { display: block; font-size: 12px; font-weight: 600; opacity: .9; }
#t-dash.cd { opacity: .4; box-shadow: none; } #t-dash.lock { opacity: .25; box-shadow: none; }
#t-pause { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; transform: translateX(-50%); width: 46px; height: 38px; border-radius: 10px; border: 3px solid var(--ink); background: rgba(28,36,70,.85); color: #fff; box-shadow: 0 3px 0 var(--ink); font-size: 16px; pointer-events: auto; touch-action: none; }
html.m .btn { padding: 12px 18px; font-size: 15px; letter-spacing: 1px; min-height: 46px; }html.m .btn.ghost { font-size: 13px; }html.m .sub { font-size: 14px; margin: 6px 0 8px; }html.m .stat { font-size: 16px; }html.m .keys { font-size: 12px; }html.m .diff-btn { padding: 8px 12px; font-size: 13px; }html.m .ctl-table td { padding: 6px 8px; font-size: 14px; }html.m .ach-grid { grid-template-columns: 1fr; }html.m #custom-screen, html.m #trail-screen { padding: 12px; background: rgba(4,5,12,.94); }html.m .color-grid { grid-template-columns: 1fr; }html.m #score { top: calc(env(safe-area-inset-top, 0px) + 8px); left: calc(env(safe-area-inset-left, 0px) + 12px); font-size: 20px; }html.m #total-points { top: calc(env(safe-area-inset-top, 0px) + 8px); right: calc(env(safe-area-inset-right, 0px) + 12px); font-size: 14px; }html.m #wave { top: calc(env(safe-area-inset-top, 0px) + 28px); right: calc(env(safe-area-inset-right, 0px) + 12px); font-size: 13px; }html.m #hp-row { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 34px); left: calc(env(safe-area-inset-left, 0px) + 12px); gap: 10px; }html.m #hearts { font-size: 20px; letter-spacing: 2px; }html.m #summon-hp { font-size: 12px; }html.m #summon-hp.on { font-size: 16px; }html.m #shield-ind { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 62px); left: calc(env(safe-area-inset-left, 0px) + 14px); font-size: 12px; }html.m #fx { top: calc(env(safe-area-inset-top, 0px) + 80px); left: calc(env(safe-area-inset-left, 0px) + 12px); font-size: 12px; }html.m #combo { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 50px); right: calc(env(safe-area-inset-right, 0px) + 12px); font-size: 16px; }html.m #dash-wrap { display: none !important; }html.m #boss-bar { top: calc(env(safe-area-inset-top, 0px) + 52px); width: 56vw; }html.m #banner { font-size: clamp(28px, 9vw, 56px); letter-spacing: 4px; }html.m #toast { bottom: 30px; max-width: 92vw; }html.m #skill-screen { justify-content: flex-start; }html.m #web-wrap { width: 100%; height: auto; flex: 1 1 0; min-height: 120px; }html.m #tree-buttons .btn { padding: 7px 12px; font-size: 13px; min-height: 38px; margin: 3px 2px; }html.m .web-hint { font-size: 11px; margin: 4px 0; }html.m #web-stats { display: none; font-size: 11px; }html.m #web-stats.show { display: block; }html.m #web-tip { left: 8px !important; right: 8px; top: auto !important; bottom: 34px; max-width: none; font-size: 12px; }html.m #web-zoom button { width: 40px; height: 40px; }

@media (max-height: 460px) { html.m #tree-buttons { margin-top: 4px !important; }html.m .title.sm { font-size: 24px; }html.m #skill-screen .stat { margin: 0; }html.m .web-hint { display: none; }  }
@media (max-height: 340px) { html.m #skill-screen > .title { display: none; }html.m #web-wrap { min-height: 90px; } }


html.m .pc-only { display: none !important; } html:not(.m) .m-only { display: none !important; }
.mode-btn { min-width: 220px; }
/* Skill web. #web-wrap takes the whole width and the height the title, hint and buttons leave, however big the window
   (entry 196; it was at most 1100 × 640). On phones (html.m rules above) that also keeps the buttons from ending up below
   the screen, where the canvas (which takes every touch for panning) leaves nothing to scroll with */
#web-wrap { position: relative; width: 96vw; flex: 1 1 0; min-height: 300px; border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; background: #1a2148; box-shadow: var(--drop); }
#web-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#web-tip { position: absolute; max-width: 330px; background: rgba(28,36,70,.97); border: 3px solid var(--ink); border-radius: 12px; box-shadow: var(--drop); padding: 9px 11px; font-size: 13px; pointer-events: none; text-align: left; line-height: 1.35; }
#web-stats { position: absolute; left: 8px; top: 8px; background: rgba(28,36,70,.85); border: 3px solid var(--ink); border-radius: 12px; padding: 7px 10px; font-size: 12px; text-align: left; line-height: 1.5; pointer-events: none; }
#web-stats small { color: #8fa3c4; }
#web-msg { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: #ffd84a; font-weight: 700; pointer-events: none; }
#web-zoom { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 6px; }
#web-zoom button { width: 34px; height: 34px; border-radius: 10px; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); background: var(--panel); color: #fff; font-size: 18px; cursor: pointer; }
#web-auto { position: fixed; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; background: var(--panel); border: 3px solid var(--ink); border-radius: 16px; padding: 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35), 6px 6px 0 var(--ink); }
#web-auto > b { font-size: 18px; color: #fff; }
/* the skill web's confirmation box (entry 140): Respec All and turning on Refund mode */
#web-confirm { position: fixed; z-index: 7; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; background: var(--panel); border: 3px solid var(--ink); border-top: 8px solid #ffd84a; border-radius: 16px; padding: 14px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.55), 6px 6px 0 var(--ink); }
#web-confirm > b { font-size: 18px; color: #fff; }
#web-confirm .sub { font-size: 14px; color: #c4d2ea; margin: 8px 0 12px; line-height: 1.45; text-align: left; }
#web-confirm .sub p { margin: 0 0 8px; }
#web-confirm .row { display: flex; gap: 8px; justify-content: center; }
#web-confirm .row .btn { margin: 0; flex: 1; }
#web-auto .sub { font-size: 13px; color: #8fa3c4; margin: 6px 0 10px; }
#web-auto-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#web-auto-list > button { margin: 0; padding: 9px 6px; font-size: 14px; letter-spacing: 1px; background: #141a36; color: var(--rc, #fff); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); display: flex; flex-direction: column; gap: 3px; text-align: left; }
#web-auto-list > button > b { font-weight: 700; }
#web-auto-list .tg { color: #fff; font-size: 13px; letter-spacing: 0; }
#web-auto-list .ds { color: #8fa3c4; font-size: 11px; font-weight: 400; letter-spacing: 0; line-height: 1.3; }
#web-auto-list .pr { color: #ffd84a; font-size: 12px; letter-spacing: 0; }
#web-auto-list .pr.short { color: #ff6b6b; }
#web-auto-list > button.bal { grid-column: 1 / -1; --rc: #ffffff; }
/* a region's tile (entry 141): its name over Buy all and Keystones */
#web-auto-list .rt { background: #141a36; border: 3px solid var(--ink); border-top: 6px solid var(--rc); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#web-auto-list .rt > b { color: var(--rc); font-size: 13px; letter-spacing: 1px; }
#web-auto-list .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
#web-auto-list .rb { margin: 0; padding: 6px 4px; min-width: 0; font-size: 12px; letter-spacing: .5px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(255,255,255,.04); color: var(--rc); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 3px 0 var(--ink); }
#web-auto-list .rb .pr { font-size: 11px; }
/* affordable: filled with the region colour */
#web-auto-list .rb.ok { background: color-mix(in srgb, var(--rc) 30%, #141a36); color: #fff; text-shadow: var(--ink-text-thin); }
#web-auto-list .rb.no, #web-kl .ki.no { filter: saturate(.15) brightness(.7); }
#web-auto-list .rb:disabled { opacity: .5; cursor: default; }
/* a region's Keystones list, over the middle of the screen (entry 141) */
#web-kl { position: fixed; z-index: 7; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(400px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; background: rgba(8,12,28,.98); border: 3px solid var(--ink); border-top: 8px solid var(--rc); border-radius: 16px; padding: 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45), 6px 6px 0 var(--ink); }
#web-kl > b { font-size: 17px; color: var(--rc); text-shadow: var(--ink-text); }
#web-kl-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
#web-kl .ki { display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: #141a36; border: 3px solid var(--ink); border-left: 6px solid var(--rc); border-radius: 10px; text-align: left; }
#web-kl .ki.ok { background: color-mix(in srgb, var(--rc) 22%, #141a36); }
#web-kl .kt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#web-kl .nm { color: var(--rc); font-size: 14px; font-weight: 700; }
#web-kl .ds { color: #8fa3c4; font-size: 12px; line-height: 1.3; }
#web-kl .pr { color: #ffd84a; font-size: 12px; }
#web-kl .pr.short { color: #ff6b6b; }
#web-kl .buy { margin: 0; padding: 7px 14px; font-size: 13px; background: var(--rc); color: #050814; }
#web-kl-back { margin: 0; }
#web-auto-cancel { margin-top: 10px; }
.web-hint { font-size: 12px; color: #8fa3c4; margin: 6px 0; }
/* shown until the skill web data has loaded; removed by start.js before the game boots */
#loading { z-index: 6; background: #04050c; }