* {
  box-sizing: border-box;
}

:root {
  --sand: #efb64d;
  --sand-light: #f8da8a;
  --earth: #654633;
  --earth-dark: #302924;
  --earth-mid: #493a31;
  --leaf: #78bd67;
  --leaf-dark: #4f8247;
  --panel: #f7dda0;
  --ink: #2f261f;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--sand);
  color: #fff;
}

body {
  display: grid;
  grid-template-rows: auto 1fr;
}

.mobile-notice {
  display: none;
}

.toolbar {
  min-height: 68px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  background: var(--earth-dark);
  border-bottom: 1px solid rgba(255, 226, 167, 0.18);
  box-shadow: 0 3px 12px rgba(55, 35, 22, 0.3);
  z-index: 10;
}

.brand {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.brand strong {
  font-size: 18px;
}

.brand span {
  font-size: 12px;
  opacity: 0.7;
}

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

button {
  border: 1px solid rgba(255, 226, 167, 0.22);
  background: var(--earth-mid);
  color: #fff;
  border-radius: 7px;
  padding: 9px 12px;
  cursor: pointer;
  font-weight: 600;
}

button:hover {
  background: #604b3d;
}

#addLong,
#addShort,
#addRed,
#addFuel,
#addArrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#addLong::before,
#addShort::before,
#addRed::before {
  content: "";
  display: inline-block;
  height: 3px;
  flex: 0 0 auto;
  background: #a98266;
  box-shadow: 0 0 0 2px rgba(255, 224, 146, 0.14);
}

#addLong::before {
  width: 20px;
}

#addShort::before {
  width: 11px;
}

#addRed::before {
  width: 18px;
  background: var(--leaf);
}

#addFuel::before {
  content: "×";
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid #a8d399;
  border-radius: 3px;
  background: var(--leaf);
  color: var(--leaf-dark);
  font-size: 13px;
  line-height: 1;
}

#addArrow::before {
  content: "➜";
  color: #c49a69;
  font-size: 18px;
  line-height: 1;
}

.direction-arrow {
  fill: rgba(111, 72, 35, 0.2);
  cursor: grab;
}

.direction-arrow:active {
  cursor: grabbing;
}

button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  font-size: 12px;
  white-space: nowrap;
}

.status-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.barrier-counter {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(94, 65, 43, 0.28);
  border-radius: 3px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 3px 8px rgba(38, 26, 17, 0.2);
}

.counter-item {
  display: grid;
  grid-template-columns: 14px auto minmax(20px, auto);
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 9px;
}

.counter-item + .counter-item {
  border-left: 1px solid rgba(94, 65, 43, 0.22);
}

.counter-item strong {
  font-size: 15px;
  color: var(--ink);
  text-align: right;
}

.counter-swatch {
  display: block;
  width: 14px;
  height: 3px;
  background: var(--earth);
}

.counter-swatch-start {
  background: var(--leaf);
}

.workspace {
  position: relative;
  min-height: 0;
}

.tool-palette {
  position: absolute;
  z-index: 5;
  top: 16px;
  left: 16px;
  display: flex;
  width: 174px;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 226, 167, 0.2);
  border-radius: 10px;
  background: rgba(48, 41, 36, 0.94);
  box-shadow: 0 6px 18px rgba(55, 35, 22, 0.28);
  backdrop-filter: blur(5px);
}

.tool-palette > strong {
  padding: 1px 3px 5px;
  color: var(--sand-light);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tool-palette button {
  width: 100%;
  min-height: 42px;
  justify-content: flex-start;
  text-align: left;
}

#canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
  user-select: none;
  touch-action: none;
}

#canvas.panning {
  cursor: grabbing;
}

.welcome-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(540px, calc(100% - 40px));
  padding: 30px 34px 32px;
  border: 1px solid rgba(94, 65, 43, 0.28);
  border-radius: 14px;
  background: rgba(247, 221, 160, 0.96);
  color: var(--ink);
  box-shadow: 8px 8px 0 rgba(101, 70, 51, 0.18);
  text-align: center;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(4px);
}

.welcome-panel[hidden] {
  display: none;
}

.welcome-logo {
  display: block;
  width: min(360px, 88%);
  height: auto;
  margin: 0 auto 14px;
}

.welcome-panel h1 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1;
  text-transform: uppercase;
}

.welcome-panel p {
  margin: 0 auto 20px;
  max-width: 52ch;
  color: rgba(47, 38, 31, 0.78);
  line-height: 1.45;
}

.welcome-panel .welcome-device-note {
  margin-top: -6px;
  padding: 10px 12px;
  border-radius: 7px;
  background: rgba(101, 70, 51, 0.1);
  color: var(--earth);
  font-size: 13px;
}

.welcome-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.welcome-actions button {
  background: var(--leaf-dark);
  border-color: rgba(47, 38, 31, 0.18);
  text-transform: uppercase;
}

.welcome-actions .welcome-secondary {
  background: var(--earth-mid);
}

.canvas-bg {
  fill: var(--sand);
}

.canvas-texture {
  fill: #9e6a38;
  opacity: 0.42;
}

.barrier-glow {
  stroke: rgba(255, 224, 146, 0.38);
  stroke-width: 9;
  stroke-linecap: round;
  filter: blur(2px);
}

.barrier-line {
  stroke: var(--earth);
  stroke-width: 3;
  stroke-linecap: butt;
}

.barrier-line.red {
  stroke: var(--leaf);
}

.barrier-foot {
  stroke: var(--earth);
  stroke-width: 3;
  stroke-linecap: butt;
}

.barrier-foot.red {
  stroke: var(--leaf);
}

.barrier-hitbox {
  stroke: transparent;
  stroke-width: 24;
  cursor: grab;
}

.barrier-hitbox:active {
  cursor: grabbing;
}

.selection-box {
  fill: none;
  stroke: #ffd447;
  stroke-width: 2;
  stroke-dasharray: 7 5;
  pointer-events: none;
}

.marquee-selection {
  fill: rgba(255, 212, 71, 0.16);
  stroke: #9a6927;
  stroke-width: 1.5;
  stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.rotation-line {
  stroke: #ffd447;
  stroke-width: 2;
  pointer-events: none;
}

.rotation-handle {
  fill: #ffd447;
  stroke: #1b2333;
  stroke-width: 2;
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%20%20%3Cpath%20d%3D%22M23.5%209.5A10%2010%200%201%200%2025.8%2020%22%0A%20%20%20%20%20%20%20%20fill%3D%22none%22%0A%20%20%20%20%20%20%20%20stroke%3D%22%23111827%22%0A%20%20%20%20%20%20%20%20stroke-width%3D%223.2%22%0A%20%20%20%20%20%20%20%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M22%204.5L24.2%2010.5L18%209.5%22%0A%20%20%20%20%20%20%20%20fill%3D%22%23111827%22%0A%20%20%20%20%20%20%20%20stroke%3D%22%23111827%22%0A%20%20%20%20%20%20%20%20stroke-width%3D%221.2%22%0A%20%20%20%20%20%20%20%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E") 16 16, grab;
}

.help {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 13px;
  border-radius: 8px;
  background: rgba(48, 41, 36, 0.92);
  border: 1px solid rgba(255, 226, 167, 0.18);
  font-size: 12px;
  pointer-events: none;
  backdrop-filter: blur(5px);
}

.help strong {
  margin-bottom: 2px;
}

@media (max-width: 980px) {
  .toolbar {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .status-details {
    display: none;
  }

  .workspace {
    min-height: 0;
  }

  .help {
    display: none;
  }
}


button.active {
  background: var(--leaf-dark);
  border-color: rgba(198, 235, 168, 0.55);
}
.placement-circle {
  pointer-events: none;
}

.placement-circle-good {
  fill: rgba(119, 255, 158, 0.78);
  stroke: rgba(70, 220, 115, 1);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.placement-circle-overlap {
  fill: rgba(255, 92, 92, 0.78);
  stroke: rgba(230, 45, 45, 1);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}


.rotation-handle:active {
  cursor: grabbing;
}


.angle-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 600;
}

.angle-control:focus-within {
  border-color: rgba(119, 255, 158, 0.75);
  background: rgba(119, 255, 158, 0.08);
}

.angle-control input {
  width: 58px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  outline: none;
  background: transparent;
  color: #ffffff;
  font: inherit;
  text-align: right;
  padding: 3px 2px;
  appearance: textfield;
}

.angle-control input::-webkit-outer-spin-button,
.angle-control input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.angle-control input:disabled {
  color: rgba(255, 255, 255, 0.35);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}


.track-name-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 600;
}

.track-name-control:focus-within {
  border-color: rgba(119, 255, 158, 0.75);
  background: rgba(119, 255, 158, 0.08);
}

.track-name-control input {
  width: 150px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  outline: none;
  background: transparent;
  color: #ffffff;
  font: inherit;
  padding: 3px 2px;
}

.tool-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.14);
  margin: 0 2px;
}

@media (max-width: 620px) {
  .tool-palette {
    right: 10px;
    left: 10px;
    top: 10px;
    width: auto;
    flex-direction: row;
    overflow-x: auto;
  }

  .tool-palette > strong {
    display: none;
  }

  .tool-palette button {
    width: auto;
    min-width: max-content;
  }

  .barrier-counter {
    width: 100%;
  }

  .counter-item {
    flex: 1;
    grid-template-columns: 14px 1fr auto;
  }
}

@media (max-width: 760px) {
  body {
    display: block;
    min-height: 100%;
    overflow: auto;
    background: var(--sand);
  }

  .toolbar,
  .workspace {
    display: none;
  }

  .mobile-notice {
    display: flex;
    min-height: 100dvh;
    padding: 34px 24px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--ink);
    text-align: center;
  }

  .mobile-notice img {
    width: min(360px, 92%);
    height: auto;
    margin-bottom: 26px;
  }

  .mobile-notice h1 {
    max-width: 12ch;
    margin: 0 0 18px;
    font-size: clamp(34px, 10vw, 48px);
    line-height: 0.95;
    text-transform: uppercase;
  }

  .mobile-notice p {
    max-width: 34ch;
    margin: 0;
    color: rgba(47, 38, 31, 0.78);
    font-size: 18px;
    line-height: 1.5;
  }
}

.fuel-token-body { fill:var(--leaf); stroke:var(--leaf-dark); stroke-width:2; vector-effect:non-scaling-stroke; }
.fuel-token-detail { fill:none; stroke:var(--leaf-dark); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; pointer-events:none; }
.fuel-token-hitbox { fill:transparent; cursor:grab; }
.fuel-token-hitbox:active { cursor:grabbing; }
.counter-swatch-fuel { width:12px; height:12px; border-radius:3px; background:var(--leaf); border:1px solid var(--leaf-dark); }