@font-face {
  font-family: 'Pixel';
  src: local('Courier New'), local('Courier');
}

html, body { margin: 0; background: #0a0a0a; overflow: hidden; display: flex; flex-direction: column; height: 100dvh; font-family: 'Courier New', Courier, monospace; touch-action: manipulation; }
#app-wrap { width: 100%; display: flex; flex-direction: column; height: 100dvh; margin: 0 auto; }
/* Amber-phosphor CRT display mode -- the game's whole palette (canvas fills,
   entity colors, every #33ff33 UI accent) is a single green hue (120deg), so
   one hue-rotate shifts canvas + UI together to amber (#ffaa00, hue 40deg)
   instead of swapping every individual color definition. */
#app-wrap.amber-scheme { filter: hue-rotate(-80deg); }
canvas#c { display: block; image-rendering: pixelated; width: 100%; height: 100%; }
canvas.icon { display: inline-block; image-rendering: pixelated; }

* { font-family: 'Courier New', Courier, monospace; -webkit-font-smoothing: none; box-sizing: border-box; }

.btn {
  background: #0d3d0d; color: #33ff33; border: 1px solid #1a5a1a;
  font-family: 'Courier New', Courier, monospace; font-size: 13px; padding: 6px 0;
  cursor: pointer; flex: 1; text-rendering: optimizeSpeed; letter-spacing: 1px;
}
.btn:hover { background: #1a5a1a; }
.btn:active { background: #33ff33; color: #0a1a0a; }

#logo-header { text-align: center; color: #33ff33; cursor: pointer; flex-shrink: 0; }
#logo-full { margin: 4px 0; font-size: 4px; line-height: 1; white-space: pre; }
#logo-full.hidden { display: none; }
#logo-mini { margin: 6px 0; font-size: 16px; letter-spacing: 3px; }
#logo-mini.hidden { display: none; }

#load-tank-input.hidden { display: none; }

#tank-wrap { position: relative; flex: 1; min-height: 0; }

.btn-settings {
  width: 32px; height: 32px; flex: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.btn-settings canvas { image-rendering: pixelated; width: 21px; height: 21px; pointer-events: none; }

/* Opened by clicking/touching the treasure chest -- no longer anchored under
   a fixed icon-button pair, so it's centered like the old settings modal. */
#add-panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 15;
  background: #0a1a0a; border: 2px solid #1a5a1a;
  padding: 6px; min-width: 180px; max-width: 90vw; max-height: 85vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
#add-panel.hidden { display: none; }
#settings-body { flex-direction: column; }
#add-panel-close { margin-top: 2px; }

.accordion-header {
  width: 100%; text-align: left; padding: 6px 8px; margin-bottom: 4px;
  background: #0d3d0d; color: #33ff33; border: 1px solid #1a5a1a;
  font-family: 'Courier New', Courier, monospace; font-size: 14px; font-weight: bold;
  cursor: pointer; letter-spacing: 1px;
}
.accordion-header:hover { background: #1a5a1a; }
.accordion-header:active { background: #33ff33; color: #0a1a0a; }

.accordion-body { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 4px; }
.accordion-body.hidden { display: none; }

.acc-btn { flex: none; padding: 5px 8px; font-size: 11px; }

#panel-sizer { display: flex; width: 100%; gap: 2px; margin-top: 2px; }
#panel-sizer.hidden { display: none; }
#panel-sizer .acc-btn { flex: 1; }

#intensity-popup {
  position: absolute; z-index: 25;
  background: #0a1a0a; border: 2px solid #1a5a1a;
  padding: 8px; display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  min-width: 170px;
}
#intensity-popup.hidden { display: none; }

#zindex-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.zindex-btn { font-size: 9px; padding: 6px 2px; }

#intensity-section { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#intensity-section.hidden { display: none; }
#intensity-label { color: #33ff33; font-size: 9px; letter-spacing: 2px; }

/* Pixelated to match the rest of the game's blocky, no-antialiasing look --
   a flat rectangular track and a square, hard-edged thumb instead of the
   OS's rounded default slider. */
#intensity-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 10px; cursor: pointer;
  background: #0d3d0d; border: 1px solid #1a5a1a;
}
#intensity-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 0;
  background: #33ff33; border: 1px solid #0a1a0a;
}
#intensity-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 0;
  background: #33ff33; border: 1px solid #0a1a0a;
}
#intensity-range::-moz-range-track { background: #0d3d0d; height: 10px; }

.btn-modal { flex: none; padding: 8px 16px; text-align: center; }

.icon { width: 20px; height: 12px; image-rendering: pixelated; vertical-align: middle; margin-right: 2px; pointer-events: none; }

#tip-section { display: flex; flex-direction: column; gap: 4px; width: 100%; }
#tip-section.hidden { display: none; }
#tip-label { color: #33ff33; font-size: 9px; letter-spacing: 2px; text-align: center; padding: 6px 0 2px; opacity: 0.6; }

#achievements-modal, #achievement-unlock-modal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 30;
  background: #0a1a0a; border: 2px solid #1a5a1a;
  padding: 10px; min-width: 220px; max-width: 90vw; overflow-y: auto;
  /* #tank-wrap (the positioning ancestor, position:relative) is sized to the
     actual tank area, not the viewport -- percentage height is relative to
     it, so this can never exceed the tank's own height even when tank-wrap
     is smaller than the viewport (e.g. the add-panel/header taking space).
     -8px top + -8px bottom via the surrounding calc gives a symmetric
     buffer above/below once centered by the transform above. */
  max-height: calc(100% - 16px);
  display: flex; flex-direction: column; gap: 6px; align-items: stretch;
}
#achievements-modal.hidden, #achievement-unlock-modal.hidden { display: none; }
#achievements-title, #achievement-unlock-title {
  color: #33ff33; font-size: 11px; letter-spacing: 2px; text-align: center; margin-bottom: 4px;
}
#achievements-list { display: flex; flex-direction: column; gap: 4px; }
.achievement-row {
  border: 1px solid #1a5a1a; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px;
}
.achievement-row.unlocked { background: #0d3d0d; }
.achievement-row.locked { opacity: 0.5; }
.achievement-name { color: #33ff33; font-size: 12px; letter-spacing: 1px; }
.achievement-description { color: #33ff33; font-size: 10px; opacity: 0.8; }
#achievement-unlock-modal { text-align: center; align-items: center; overflow: visible; }
#achievement-unlock-name { color: #33ff33; font-size: 13px; letter-spacing: 1px; }
#achievement-unlock-description { color: #33ff33; font-size: 10px; opacity: 0.8; }

/* 1px bubbles that pop out of the unlock modal when it appears -- spawned
   and removed by achievements.js's spawnUnlockBubbles, one .unlock-bubble
   element per bubble, each with its own randomized rise/drift via inline
   custom properties (see spawnUnlockBubbles) so no two look identical. */
.unlock-bubble {
  position: absolute; width: 1px; height: 1px; background: #99eebb;
  left: var(--bx, 50%); top: var(--by, 50%);
  animation: unlock-bubble-rise 0.9s ease-out forwards;
  pointer-events: none;
}
@keyframes unlock-bubble-rise {
  0%   { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--bdx, 0), var(--bdy, -30px)); opacity: 0; }
}

@media (max-width: 600px) {
  .btn { font-size: 10px; padding: 4px 0; letter-spacing: 0; }
  .icon { width: 14px; height: 8px; margin-right: 1px; }
}