:root {
  /* wooden palette */
  --wood-dark: #3a1d0d;
  --wood-mid: #75401d;
  --wood-light: #a96732;
  --wood-panel-dark: #643a1d;
  --wood-panel-mid: #6e3c1d;
  --wood-panel-light: #844b24;
  --wood-inset-dark: #241107;
  --wood-inset-light: #9a5d2d;

  /* metal palette */
  --metal-black: #202323;
  --metal-dark: #25282a;
  --metal-mid: #737b7d;
  --metal-light: #c9d0cf;
  --metal-highlight: #f1f4f0;
  --metal-shadow: #383e3d;
  --metal-bolt-light: #e2e6e2;
  --metal-bolt-mid: #545b5b;
  --metal-bolt-dark: #1d2020;
  --metal-border: #272b2b;

  /* text colors */
  --text-gold: #f0d49b;
  --text-light-gold: #ffe8c5;
  --text-focus: #ffe08a;
  --text-dark: #222;

  /* borders and stuff*/
  --output-background: #c4c8c4;
  --output-border: #353939;
  --panel-border: #28150a;
  --power-track-border: #271010;

  /* big red button palette */
  --fire-highlight: #ff8580;
  --fire-red: #ed332e;
  --fire-dark-red: #a5090b;
  --fire-deep-red: #560305;
  --fire-shadow: #151717;
  --fire-inset-dark: #330000aa;
  --fire-text-shadow: #520000;

  /* power slider pallette */
  --power-blue: #253b9c;
  --power-cyan: #18a9d2;
  --power-yellow: #ffd447;
  --power-orange: #f47728;
  --power-red: #d51e22;

  /* shadow & hilight */
  --shadow-black: #000;
  --highlight-white: #fff;
}

/* h1 {
  text-align: center;
} */

* {
  box-sizing: border-box;
}

.cannon-wooden-border {
  padding: 14px;
  border-radius: 14px;
  background: repeating-linear-gradient(
    0deg,
    var(--wood-dark) 0 7px,
    var(--wood-mid) 8px 32px,
    var(--wood-light) 33px 35px
  );
  box-shadow:
    0 14px 30px #000b,
    inset 0 0 0 3px var(--wood-inset-dark),
    inset 0 0 0 6px var(--wood-inset-light);
}

.cannon-controls {
  width: 100%;
  display: flex;
  justify-content: space-around;
  gap: 16px;
  margin-top: 10px;
}

.control-panel-main {
  flex-grow: 3;
  overflow: scroll;
}

.control-panel-fire {
  flex-grow: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.control-panel,
canvas {
  position: relative;
  padding: 24px 22px;
  border: 3px solid var(--panel-border);
  border-radius: 8px;
  background:
    linear-gradient(#643a1ddd),
    repeating-linear-gradient(
      90deg,
      var(--wood-panel-mid) 0 32px,
      var(--wood-panel-light) 33px 64px
    );
  box-shadow:
    inset 0 0 18px #0009,
    0 2px 4px #0009;
}

.control-panel {
  max-height: 30dvh;
}

canvas {
  max-height: 70dvh;
  padding: 0;
  border-radius: 0;
}

.control-panel.control-panel-small {
  padding-bottom: 0;
  margin-bottom: 0.75em;
  height: auto;
}

.control-panel::before,
.control-panel::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    var(--metal-bolt-light),
    var(--metal-bolt-mid) 45%,
    var(--metal-bolt-dark)
  );
  box-shadow: 0 1px 2px var(--shadow-black);
}

.control-panel::before {
  top: 9px;
  left: 9px;
}

.control-panel::after {
  top: 9px;
  right: 9px;
}

.cannon-wooden-border h2 {
  margin: 0 0 24px;
  color: var(--text-gold);
  text-align: center;
  letter-spacing: 0.08em;
  text-shadow: 2px 2px var(--panel-border);
  font-size: 1.25rem;
}

/*
 * SLIDER CONTROLS
 */

.slider-control {
  display: block;
  color: var(--text-gold);
}

.slider-control > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-shadow: 1px 1px var(--panel-border);
}

output {
  min-width: 54px;
  padding: 3px 7px;
  color: var(--text-dark);
  text-align: center;
  font-family: monospace;
  font-size: 0.85rem;
  background: var(--output-background);
  border: 2px solid var(--output-border);
  border-radius: 4px;
  box-shadow: inset 0 1px 2px #fff8;
}

.metal-slider,
.power-slider {
  width: 100%;
  height: 25px;
  appearance: none;
  cursor: pointer;
  background: transparent;
}

.metal-slider::-webkit-slider-runnable-track {
  height: 10px;
  border: 3px solid var(--metal-black);
  border-radius: 6px;
  background: var(--shadow-black);
}

.metal-slider::-moz-range-track {
  height: 10px;
  border: 3px solid var(--metal-black);
  border-radius: 6px;
  background: var(--shadow-black);
}

/*
 * metal bolt-looking thumb slider
 */

.metal-slider::-webkit-slider-thumb,
.power-slider::-webkit-slider-thumb {
  width: 25px;
  height: 25px;
  margin-top: -9px;
  appearance: none;
  border: 3px solid var(--metal-black);
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    var(--metal-highlight),
    #8b9491 38%,
    var(--metal-shadow) 72%
  );
  box-shadow:
    0 2px 3px #000b,
    inset 0 1px 2px #fff8;
}

.metal-slider::-moz-range-thumb,
.power-slider::-moz-range-thumb {
  width: 19px;
  height: 19px;
  border: 3px solid var(--metal-black);
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    var(--metal-highlight),
    #8b9491 38%,
    var(--metal-shadow) 72%
  );
  box-shadow: 0 2px 3px #000b;
}

/*
 * track for the power slider, colorful tm
 */

.power-slider::-webkit-slider-runnable-track {
  height: 13px;
  border: 3px solid var(--power-track-border);
  border-radius: 7px;
  background: linear-gradient(
    90deg,
    var(--power-blue),
    var(--power-cyan) 30%,
    var(--power-yellow) 60%,
    var(--power-orange) 80%,
    var(--power-red)
  );
}

.power-slider::-moz-range-track {
  height: 13px;
  border: 3px solid var(--power-track-border);
  border-radius: 7px;
  background: linear-gradient(
    90deg,
    var(--power-blue),
    var(--power-cyan) 30%,
    var(--power-yellow) 60%,
    var(--power-orange) 80%,
    var(--power-red)
  );
}

/*
 * FIRING BUTTON
 */

.fire-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  padding: 0;
  margin-bottom: 20px;
  border: 8px solid var(--metal-border);
  border-radius: 50%;
  cursor: pointer;

  background: radial-gradient(
    circle at 34% 27%,
    var(--fire-highlight) 0%,
    var(--fire-red) 23%,
    var(--fire-dark-red) 68%,
    var(--fire-deep-red) 100%
  );

  box-shadow:
    0 9px 0 var(--fire-shadow),
    0 13px 14px #000b,
    inset 0 5px 5px #ffffff66,
    inset 0 -9px 10px var(--fire-inset-dark);

  transition:
    transform 80ms ease,
    box-shadow 80ms ease,
    filter 120ms ease;
}

.fire-button:hover {
  filter: brightness(1.3);
}

.fire-button:active,
.fire-button.is-pressed {
  transform: translateY(7px);
  box-shadow:
    0 2px 0 var(--fire-shadow),
    0 5px 8px #000b,
    inset 0 5px 5px #ffffff44,
    inset 0 -9px 10px var(--fire-inset-dark);
}

.fire-button:disabled {
  filter: brightness(0.8);
  transform: translateY(7px);
  box-shadow:
    0 2px 0 var(--fire-shadow),
    0 5px 8px #000b,
    inset 0 5px 5px #ffffff44,
    inset 0 -9px 10px var(--fire-inset-dark);
}

.fire-button:focus-visible {
  outline: 3px solid var(--text-focus);
  outline-offset: 8px;
}

/* TODO some responsive styling maybe  */