button {
  border: 0;
  background: 0;
  border-radius: 0;
  font-family: monospace;
  pointer-events: all;
}

input {
  border: 0;
}


*:focus-visible {
  outline: 0;
}

body {
  height: 100vh;
  margin: 0;
  background: #000;
  font-family: monospace;
}

.tri::before,
.tri::after {
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

.dia::before,
.dia::after {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.hex::before,
.hex::after {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.hex-cut,
.hex-cut::before,
.hex-cut::after {
  clip-path:
    polygon(
      25% 0%,
      75% 0%,
      100% 50%,
      75% 100%,
      25% 100%,
      0% 50%,
      25% 0%,
      
      calc(25% + var(--tx) / 2) var(--t),
      var(--tx) 50%,
      calc(25% + var(--tx) / 2) calc(100% - var(--t)),
      calc(75% - var(--tx) / 2) calc(100% - var(--t)),
      calc(100% - var(--tx)) 50%,
      calc(75% - var(--tx) / 2) var(--t),
      calc(25% + var(--tx) / 2) var(--t)
    );
}

.oct::before,
.oct::after {
  clip-path: polygon(29.34% 0, 70.66% 0, 100% 29.34%, 100% 70.66%, 70.66% 100%, 29.34% 100%, 0 70.66%, 0 29.34%);
}

.octish::before,
.octish::after {
  clip-path: polygon(15% 0, 85% 0, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0 85%, 0 15%);
}

.circle {
  border-radius: 50%;
}

.shape,
.face {
  display: flex;
  align-items: center;
  justify-content: center;
}

.face {
  backface-visibility: hidden;
}


.face::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  content: '';
  filter: brightness(var(--l));
}

.face::after {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  content: '';
}

.face.ao-outer {
  backface-visibility: visible !important;
}

.face.ao-outer::after {
  box-shadow: 0 0 7px 3px #0005;

  
  transform: translateZ(-0.5px);
}

.shape:not(.select):not(.hover) .face:not(.build-hover).ao::after {
  box-sizing: border-box;
  border: 2px solid;
  border-top-color: var(--ao-t, #0000);
  border-right-color: var(--ao-r, #0000);
  border-bottom-color: var(--ao-b, #0000);
  border-left-color: var(--ao-l, #0000);
  filter: blur(4px);
}


.face.build-hover::after {
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border-top: 3px solid #0000;
  border-right: 3px solid #0ff;
  border-bottom: 3px solid #0000;
  border-left: 3px solid #0ff;
  animation: spin 1.5s linear infinite;
  backface-visibility: hidden;
  background: radial-gradient(#0ff 50%, #0000 0);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  border-radius: 50%;
}

.face.build-hover.err-cost::after,
.face.build-hover.obstructed::after {
  border-right-color: #f02b;
  border-left-color: #f02b;
  animation-duration: 5s;
  background-image: radial-gradient(#f02 50%, #0000 0);
}

@keyframes spin {
  0% { transform: rotate(0deg) translateZ(1px); }
  100% { transform: rotate(360deg) translateZ(1px); }
}



.module:not(.frame) .face::before {
  animation: 1s build forwards;
}

@keyframes build {
  0% {
    box-shadow: inset 0 0 0 100px #0ff0;
    transform: scale(0);
  }

  50% {
    box-shadow: inset 0 0 0 100px #0ff9;
    transform: scale(1);
  }

  100% {
    box-shadow: inset 0 0 0 100px #0ff0;
  }
}

.block .face::before {
  background: var(--color-secondary);
}

.block-multi .face::before {
  border: 4px solid var(--color-secondary);
  background: var(--color-secondary);
  background-image:
    linear-gradient(
      #0003,
      #0000 4px
    ),
    linear-gradient(
      90deg,
      #0003,
      #0000 4px
    ),
    linear-gradient(
      -90deg,
      #0003,
      #0000 4px
    ),
    linear-gradient(
      0deg,
      #0003,
      #0000 4px
    );
}


.block-multi .face:nth-child(5)::before {
  background-image:
    linear-gradient(
      #0005,
      #0000 4px
    ),
    linear-gradient(
      90deg,
      #0005,
      #0000 4px
    ),
    linear-gradient(
      -90deg,
      #0005,
      #0000 4px
    ),
    linear-gradient(
      0deg,
      #0005,
      #0000 4px
    ),
    repeating-linear-gradient(
      to top,
      #0000 0 8px,
      #fff6 0 9px
    ),
    repeating-linear-gradient(
      to right,
      #0000 0 5px,
      #fff9 0 6px
    ),
    
    linear-gradient(
      45deg,
      #059,
      #08a
    );
}

.block-multi .face:nth-child(1)::before,
.block-multi .face:nth-child(6)::before, {
  background-image:
    linear-gradient(
      #0008,
      #0000 4px
    ),
    linear-gradient(
      90deg,
      #0008,
      #0000 4px
    ),
    linear-gradient(
      -90deg,
      #0008,
      #0000 4px
    ),
    linear-gradient(
      0deg,
      #0008,
      #0000 4px
    ),
    repeating-linear-gradient(
      #777,
      #777 3px,
      #555 4px,
      #111 0 5px,
      #333 0 6px
    );
}

.hab .face {
  backface-visibility: visible;
  filter: none !important;
}

.hab .face.rect {
  background: #013a; 
}

.hab .face::before {
  background: var(--color-primary);
}






.hab .rect:nth-child(4)::before {
  background:
    linear-gradient(
      #0000 16px,
      var(--color-accent) 0 23px,
      #0000 0
    ),
    linear-gradient(
      90deg,
      var(--color-primary) 10px,
      #0000 0 50px,
      var(--color-primary) 0
    ),
    linear-gradient(
      var(--color-primary) 23px,
      #0000 0 37px,
      var(--color-primary) 0
    );
}

.hab .rect:nth-child(8)::before {
  background:
    linear-gradient(
      0deg,
      #0000 16px,
      var(--color-accent) 0 23px,
      #0000 0
    ),
    linear-gradient(
      90deg,
      var(--color-primary) 10px,
      #0000 0 50px,
      var(--color-primary) 0
    ),
    linear-gradient(
      var(--color-primary) 23px,
      #0000 0 37px,
      var(--color-primary) 0
    );
}

.hab .light {
  width: 40px;
  height: 14px;
  box-shadow: 0 0 8px 4px #fff3;
  transition: all 0.5s;
}

.shape.hab.disabled .light {
  animation: 1s infinite alarm alternate;
}

@keyframes alarm {
  0% {
    background: #0000;
    box-shadow: 0 0 8px 4px #fff3;
  }

  50% {
    background: #f113;
    box-shadow: 0 0 8px 4px #f117;
  }
}

.hangar .face::before {
  background: var(--color-secondary);
}


.door {
  overflow: hidden;
}

.module.hangar .door::before {
  right: -50%;
  left: -50%;
  animation: slide 16s linear forwards infinite;
  background:
    repeating-linear-gradient(
      -75deg,
      #0cf3 0 2px,
      #0cf8 3px,
      #eff8 4px,
      #0cf8 5px,
      #0cf3 6px 8px
    );
  filter: none;
}

@keyframes slide {
  0% { transform: translateX(25%); }
  100% { transform: translateX(-25%); }
}

.door::after {
  box-shadow: inset 0 0 2px 2px #def, inset 0 0 8px 2px #0af;
}

.hangar .face:nth-child(6)::before {
  background: #333;
  filter: none;
}

.hangar .face:nth-child(12)::after,
.hangar .face:nth-child(13)::after,
.hangar .face:nth-child(14)::after,
.hangar .face:nth-child(15)::after, {
  background:
    linear-gradient(90deg, #000a, #0008 82px, #0000 0),
    linear-gradient(90deg, #0000 82px, #fff 0, #0000 84px),
    linear-gradient(90deg, #0000 82px, #0af 0, #0000);
}

.hex-ring .face::before {
  background: var(--color-primary);
}

.hex-block .face::before {
  background: var(--color-primary);
}

.hex-block-multi .panel::before {
  border: 2px solid #fff;
  background:
    repeating-linear-gradient(
      to top,
      #0000 0 9px,
      #fff6 0 10px
    ),
    repeating-linear-gradient(
      to right,
      #0000 0 4px,
      #fff9 0 5px
    ),
    
    linear-gradient(
      45deg,
      #059,
      #08a
    );
  background-repeat: no-repeat;
}

.scaffold .face.rect::before {
  border: 3px solid var(--color-secondary);
  background:
    linear-gradient(
      45deg,
      #0000 0 calc(50% - 2px),
      var(--color-secondary) 0 calc(50% + 2px),
      #0000 0
    ),
    linear-gradient(
      -45deg,
      #0000 0 calc(50% - 2px),
      var(--color-secondary) 0 calc(50% + 2px),
      #0000 0
    );
}


.scaffold .face:nth-child(n+7)::before {
  transform: translateZ(1px);
}


.shape.solar:not(.frame) {
  transition: all 1s;
}

.shape.solar:not(.frame) .face {
  transition: all 1s;
}

.solar .face::before {
  background: var(--color-primary);
}

.solar .panel::before {
  border: 2px solid var(--color-primary);
  background:
    repeating-linear-gradient(
      to top,
      #0000 0 9px,
      #fff6 0 10px
    ),
    repeating-linear-gradient(
      to right,
      #0000 0 4px,
      #fff9 0 5px
    ),
    
    linear-gradient(
      45deg,
      #059,
      #08a
    );
  background-repeat: no-repeat;
}

.solar:not(.frame) .panel::before {
  animation: 1s build forwards, 2s extend forwards;
}

@keyframes extend {
  0% { background-size: 0 100%; }
  30% { background-size: 0 100%; }
  100% { background-size: 100% 100%; }
}

.store.power .face::before {
  background: var(--color-accent);
  background:
    linear-gradient(
      var(--color-accent) 0 4px,
      var(--color-secondary) 0 12px,
      var(--color-accent) 0 48px,
      var(--color-secondary) 0 56px,
      var(--color-accent) 0
    );
}

.store.power .face.oct::before {
  background: var(--color-secondary);
  background-image:
    linear-gradient(
      #0000 0 10px,
      #0003 12px,
      var(--color-primary) 0 18px,
      #0003 0,
      #0000 20px
    ),
    radial-gradient(
      #0000 0 40%,
      #0003 0,
      #0000 50% 60%,
      #0003 65%,
      var(--color-accent) 0
    );
}

.store.power .indicator {
  width: 7px;
  height: 30px;
  background: #111;
}

.store.power .indicator::before {
  position: absolute;
  right: 0;
  bottom: 0; 
  left: 0;
  height: var(--curr);
  background: #ff0;
  box-shadow: inset 0 0 0 0.5px #333, 0 0 6px #fd0;
  content: '';
}

.ui {
  position: absolute;
  top: 0;
  display: flex;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 2vmin;
  perspective: 300px;
  pointer-events: none;
  user-select: none;
}

.ui[aria-hidden='true'] {
  display: none;
}

.ui * {
  transform-style: preserve-3d;
}

.ui__hex {
  position: relative;
  display: flex;
  height: 100%;
  max-height: 55vw;
  align-items: center;
  justify-content: center;
  aspect-ratio: 8 / 5;
}

.ui__hex .side {
  position: absolute;
  display: flex;
  width: 52.5%;
  box-sizing: border-box;
}

.ui__hex .top,
.ui__hex .bottom {
  height: 50%;
}

.ui__hex .top--right,
.ui__hex .bottom--right {
  left: 50%;
}

.ui__hex .top--left,
.ui__hex .bottom--left {
  left: -2.5%;
}

.ui__hex .top {
  top: -50%;
  align-items: flex-end;
  justify-content: center;
}

.ui__hex .top--right {
  border-bottom: 6px solid hsl(0, 0%, 25%);
  transform: rotateZ(17.4deg) rotateX(-90deg);
  transform-origin: bottom left;
}

.ui__hex .top--left {
  border-bottom: 6px solid hsl(0, 0%, 30%);
  transform: rotateZ(-17.4deg) rotateX(-90deg);
  transform-origin: bottom right;
}

.ui__hex .right,
.ui__hex .left {
  top: 25%;
  height: 50%;
  border-right: 6px solid hsl(0, 0%, 35%);
  border-left: 6px solid hsl(0, 0%, 35%);
}

.ui__hex .right {
  left: 100%;
  align-items: center;
  transform: rotateY(-90deg);
  transform-origin: left;
}

.ui__hex .left {
  left: -52.5%;
  transform: rotateY(90deg);
  transform-origin: right;
}

.ui__hex .bottom {
  top: 100%;
}

.ui__hex .bottom--right {
  border-top: 6px solid hsl(0, 0%, 40%);
  transform: rotateZ(-17.4deg) rotateX(90deg);
  transform-origin: top left;
}

.ui__hex .bottom--left {
  border-top: 6px solid hsl(0, 0%, 45%);
  transform: rotateZ(17.4deg) rotateX(90deg);
  transform-origin: top right;
}

.ui__hex .side::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 8px solid hsl(0, 0%, 70%);
  border-right: 8px solid hsl(0, 0%, 75%);
  border-bottom: 8px solid hsl(0, 0%, 80%);
  border-left: 8px solid hsl(0, 0%, 75%);
  content: '';
}

.ui__hex .right::before,
.ui__hex .left::before {
  border-right: 8px solid hsl(0, 0%, 75%);
  border-left: 8px solid hsl(0, 0%, 75%);
}

.ui__hex .top .ui-panel {
  transform: rotateX(85deg) translateY(calc(6vmin - 16px));
}



button.build-bar::before {
  content: '';
}

button.build-bar.block::before {
  width: 26px;
  height: 26px;
  background: var(--color-primary);
  background-image:
    conic-gradient(
      #0000 65deg,
      #0003 0 180deg,
      #0005 0 295deg,
      #0000 0
    );
  clip-path:
    polygon(
      50% 0,
      100% 25%,
      100% 75%,
      50% 100%,
      0 75%,
      0 25%
    );
}

button.build-bar.scaffold::before {
  width: 22px;
  height: 18px;
  background:
    linear-gradient(
      45deg,
      #0000 0 calc(50% - 1px),
      var(--color-secondary) 0 calc(50% + 2px),
      #0000 0
    ),
    linear-gradient(
      -45deg,
      #0000 0 calc(50% - 1px),
      var(--color-secondary) 0 calc(50% + 2px),
      #0000 0
    );
  box-shadow: 0 0 0 3px var(--color-secondary);
}

button.build-bar.block-multi::before {
  width: 26px;
  height: 26px;
  background: var(--color-secondary);
  background-image:
    conic-gradient(
      #08a 65deg,
      #0003 0 180deg,
      #0005 0 295deg,
      #08a 0
    );
  clip-path:
    polygon(
      50% 0,
      100% 25%,
      100% 75%,
      50% 100%,
      0 75%,
      0 25%
    );
}

button.build-bar.hex-block::before {
  width: 26px;
  height: 22px;
  background: var(--color-primary);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

button.build-bar.solar::before {
  width: 20px;
  height: 24px;
  border: 2px solid var(--color-primary);
  background:
    repeating-linear-gradient(
      to top,
      #0000 0 4px,
      #fff9 0 5px
    ),
    repeating-linear-gradient(
      to right,
      #0000 0 9px,
      #fff6 0 10px
    ),
    
    linear-gradient(
      45deg,
      #059,
      #08a
    );
}

button.build-bar.hangar::before {
  width: 24px;
  height: 18px;
  border: 2px solid var(--color-primary);
  background:
    repeating-linear-gradient(
      -75deg,
      #0cf3 0 2px,
      #0cf8 3px,
      #eff8 4px,
      #0cf8 5px,
      #0cf3 6px 8px
    );
}

button.build-bar.hab::before {
  width: 26px;
  height: 26px;
  background:
    linear-gradient(
      #0003 4px,
      #0000 0 22px,
      #0004 0
    ),
    linear-gradient(
      var(--color-primary) 10px,
      #0000 0 16px,
      var(--color-accent) 0 18px,
      var(--color-primary) 0
    ),
    linear-gradient(
      90deg,
      var(--color-primary) 0 5px,
      #0000 0 21px,
      var(--color-primary) 0
    );
}

button.build-bar.ring::before {
  --tx: 4px;
  --t: 3.5px;

  width: 28px;
  height: 24px;
  background: var(--color-primary);

  
  clip-path:
    polygon(
      25% 0%,
      75% 0%,
      100% 50%,
      75% 100%,
      25% 100%,
      0% 50%,
      25% 0%,
      
      calc(25% + var(--tx) / 2) var(--t),
      var(--tx) 50%,
      calc(25% + var(--tx) / 2) calc(100% - var(--t)),
      calc(75% - var(--tx) / 2) calc(100% - var(--t)),
      calc(100% - var(--tx)) 50%,
      calc(75% - var(--tx) / 2) var(--t),
      calc(25% + var(--tx) / 2) var(--t)
    );
}

button.build-bar.ring:hover::before,
button.build-bar.ring[aria-pressed='true']::before {
  animation: 9s rotate linear infinite;
}

@keyframes rotate {
  100% { transform: rotate(360deg); }
}

button.build-bar.store.power::before {
  width: 15px;
  height: 24px;
  background:
    linear-gradient(
      90deg,
      #0003 4px,
      #0000 0 11px,
      #0005 0
    ),
    linear-gradient(
      var(--color-accent) 3px,
      var(--color-secondary) 0 7px,
      var(--color-accent) 0 17px,
      var(--color-secondary) 0 21px,
      var(--color-accent) 0
    );
}

button.build-bar.mining.ship::before {
  width: 30px;
  height: 30px;
  background: linear-gradient(var(--color-accent) 0 18px, #5ff 0, #0000);
  clip-path:
    polygon(
      11px 8px,
      19px 8px,
      100% 18px,
      19px 18px,
      19px 30px,
      11px 30px,
      11px 18px,
      0 18px
    );
}

button.build-bar.upgrade::before {
  position: absolute;
  z-index: -1;
  width: 32px;
  height: 32px;
  background: #088;
  clip-path: polygon(50% 0, 100% 45%, 75% 45%, 75% 100%, 25% 100%, 25% 45%, 0 45%);
}

.ui-panel__build-list {
  display: flex;
  padding: 1px;
  margin-top: -1px;
  margin-bottom: -2px;
  background: #333;
  box-shadow: 2px 2px inset #111, -2px -2px inset #222, inset 0 0 8px 8px #222;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
}

button.build-bar {
  position: relative;
  display: flex;
  overflow: hidden;
  width: 52px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  margin: 1px;
  box-shadow:
    inset 0 0 0 24px #222,
    inset 0 0 0 2px #c400,
    inset 0 0 0 24px #b400;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  transition: box-shadow 0.2s;
}

button.build-bar.upgrade {
  width: 106px;
}

button.build-bar.disabled {
  color: #aaa;
}

button.build-bar.disabled::before {
  opacity: 0.5;
}

button.build-bar.disabled::after {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid #222;
  background:
    linear-gradient(
      to top left,
      #0000 0 calc(50% - 1px),
      #fff 0 calc(50% + 1px),
      #0000 0
    ),
    linear-gradient(
      to bottom left,
      #0000 0 calc(50% - 1px),
      #fff 0 calc(50% + 1px),
      #0000 0
    );
  box-shadow: inset 0 0 0 2px #fff;
  content: '';
  opacity: 0.3;
}

button.build-bar:not(.disabled):hover {
  box-shadow:
    inset 0 0 0 0 #222,
    inset 0 0 0 2px #c404,
    inset 0 0 0 26px #b404;
}

button.build-bar[aria-pressed='true'] {
  box-shadow:
    inset 0 0 0 0 #222,
    inset 0 0 0 2px #c40f,
    inset 0 0 0 24px #b403;
}

button.build-bar[aria-pressed='true']:hover {
  box-shadow:
    inset 0 0 0 0 #222,
    inset 0 0 0 2px #c40f,
    inset 0 0 0 24px #b404;
}

.ui-panel__build-info {
  width: 300px;
  padding: 5px 6px 4px 6px;
  border: 3px solid #aaa;
  background: #b40;
  background-image:
    repeating-linear-gradient(
      to top,
      #0000 0 6px,
      #a30 0 8px
    ),
    repeating-linear-gradient(
      to right,
      #0000 0 6px,
      #a30 0 8px
    );
  background-position: 6px 3px;
  box-shadow: 4px 4px 0 inset #0005, -3px -2px 0 inset #0005, 0 1px 3px #000;
  color: #fff;
  font-size: 14px;
  text-shadow: 0 0 2px #000;
}

.ui-panel__build-info--select {
  background: #077;

  
  background-image:
    repeating-linear-gradient(
      45deg,
      #0000 1px 4px,
      #088 0 6px
    ),
    repeating-linear-gradient(
      135deg,
      #0000 1px 4px,
      #088 0 6px
    );
  background-position: top left, bottom left;
  background-repeat: no-repeat;
  background-size: 100% 50%;
}

.ui-panel__build-info > div {
  display: flex;
  justify-content: space-between;
}

.eco {
  display: flex;
  gap: 6px;
}

.eco .dot {
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  background: #333;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
  transition: all 0.2s;
}

.eco.power .dot {
  -webkit-text-stroke: thin;
}

.eco.mats .dot:not(.empty) {
  border-right: 1px solid #0a9;
  border-bottom: 2px solid #0aa;
  background: #0fd;
  box-shadow: 0 0 6px #0fd, 0 0 0 1px #333;
}

.eco.power .dot:not(.empty) {
  border-right: 1px solid #cb0;
  border-bottom: 2px solid #ca0;
  background: #ff0;
  box-shadow: 0 0 6px #fd0, 0 0 0 1px #333;
}

.eco .bar {
  position: relative;
  width: 102px;
  height: 5px;
  background: #333;
  box-shadow: 0 1px inset #222, 0 1px #aaa;
}

.eco .bar::after {
  position: absolute;
  top: -12px;
  right: 0;
  left: 0;
  height: 7px;
  background:
    repeating-linear-gradient(
      90deg,
      #333,
      3px,
      #0000 0 9px
    );
  content: '';
}

.eco .bar .fill {
  height: 4px;
  transition: width 0.5s linear;
}

.eco.mats .bar .fill {
  border-bottom: 1px solid #0aa;
  margin-left: auto;
  background: #0fd;
  box-shadow: 0 0 6px #0fd, 0 0 0 1px #333;
}

.eco.power .bar .fill {
  border-bottom: 1px solid #ca0;
  background: #ff0;
  box-shadow: 0 0 6px #fd0, 0 0 0 1px #333;
}

.eco .bar .cap {
  color: #000;
  font-size: 11px;
  line-height: 16px;
}

.eco.power .bar .cap {
  text-align: right;
}

.eco .nums {
  display: flex;
  align-items: center;
  padding: 0 4px;
  margin-bottom: -2px;
  background: #333;
  box-shadow: 2px 2px inset #222;
  font-size: 14px;
}

.eco .use {
  min-width: 34px;
  margin-top: 5px;
}

.eco .gen,
.eco .num {
  color: #0f9;
}

.eco .num {
  margin-left: 4px;
  font-size: 18px;
}

.eco .use,
.eco .num.neg {
  color: #f20;
}

.pop {
  flex-direction: column;
  gap: 0;
}

.pop .ui-panel__inner {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
}

.pop .info {
  display: flex;
  align-items: center;
  padding: 8px;
}

.pop .err {
  background: #f33;
  font-size: 11px;
  text-align: center;
}

.pop .err:not(:empty) {
  padding: 4px 8px;
}

.pop .icon {
  width: 20px;
  height: 20px;
  margin: 0 3px;
  border-radius: 50%;
  box-shadow: inset 0 -2px 0 6px #333; 
}


.pop .icon::before {
  position: absolute;
  bottom: -2px;
  left: 6px;
  width: 8px;
  height: 9px;
  background: #777;
  border-radius: 3px;
  content: '';
}

.pop .icon ~ * {
  margin-top: 1px;
}


.pop .cur,
.pop .cap {
  display: flex;
  min-width: 22px;
  justify-content: center;
}

.ui-panel.ui-panel--top.neg {
  background:
    repeating-linear-gradient(
      -45deg,
      #000 3px,
      #ff0 0 6px,
      #000 0 9px
    );
}

.ui-panel {
  padding: 8px;
  border: 3px solid #aaa;
  background:
    linear-gradient(
      135deg,
      #333 50%,
      #444 0
    );
  box-shadow: 1px 1px 9px #000;
  transition: 0.3s all;
}

.ui-panel__inner {
  display: flex;
  align-items: center;
  padding: 8px;
  background: #777;
  box-shadow: 0 1px 0 2px #222;
  gap: 8px;
}

.ui-panel--top,
.ui-panel__big {
  padding: 6px 8px;
}

.ui-panel--top {
  position: absolute;
  top: 2vmin;
  font-weight: bold;
  transform: rotateX(-9deg) translateZ(18px);
  transform-origin: top;
}

.ui-panel--big {
  position: absolute;
  bottom: 3vh;
  display: flex;
  height: 46px;
  gap: 18px;
  transform: rotateX(9deg);
}

.ui-right {
  width: 0;
  direction: rtl; 
  transform: translateX(0.5vw);
}

.ui-right .ui-panel {
  width: 44px;
  direction: ltr;
}

.ui-right .ui-panel__inner {
  display: flex;
  flex-direction: column;
}

.ui-panel.ui-panel--btns {
  overflow: hidden;
  width: 54px;
  padding: 8px 0;
}

.ui-panel.ui-panel--btns[aria-hidden='true'] {
  width: 0;
}

.ui-panel--btns .ui-panel__inner {
  display: flex;
  width: 30px;
  padding: 4px;
  margin: 0 8px;
  gap: 6px;
}

.ui-panel--btns button {
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
  border-top: 0 solid #5317;
  border-right: 2px solid #5315;
  border-bottom: 3px solid #5317;
  border-left: 0 solid #5315;
  box-shadow: 0 0 0 1px #3339;
  font-weight: bold;
  text-shadow: 0 0 1px #000;
  transition: box-shadow 0.2s;
}

.ui-panel--btns button:active {
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 2px;
  border-left-width: 1px;
}

.ui-panel--btns button[aria-pressed='true'] {
  background: #fffa;
}

.del-wrap {
  background:
    repeating-linear-gradient(
      -45deg,
      #000,
      #ff0 2px 4px,
      #000 0 6px
    );
  box-shadow: 0 0 0 1px #3339;
}

button.del {
  width: 26px;
  height: 26px;
  margin: 3px;
  background: #e00;
  color: #fff;
  font-size: 12px;
}

button.del:hover {
  box-shadow: 0 0 0 1px #3339, 0 0 6px #e00;
}

button.del:hover::before {
  box-shadow: 0 0 6px #f33, 0 0 0 1px #333;
}

button.off {
  background: #ff0;
  color: #000;
  font-size: 20px;
}

button.off:hover {
  box-shadow: 0 0 6px #fc3, 0 0 0 1px #333;
}

button.off[aria-pressed='true']::after {
  position: absolute;
  right: 2px;
  bottom: 0;
  color: #e00;
  content: '×';
  font-size: 16px;
}

button.off[aria-pressed='true']:hover {
  box-shadow: 0 0 6px #fff9, 0 0 0 1px #333;
}



.ui-left {
  z-index: 1;
  width: 0;
  pointer-events: all;
  transform: translateX(-0.5vw);
}

.ui-panel--left {
  display: flex;
  overflow: hidden;
  width: 16px;
  padding: 8px 0;
  color: #ccc;
  font-weight: bold;
  text-align: center;
}

.hover-zone {
  width: 25px;
}

.menu {
  font-size: 14px;
  writing-mode: vertical-lr;
}

.ui-left:hover .ui-panel--left {
  width: 132px;
}

.ui-panel--left .ui-panel__inner {
  display: flex;
  width: 100px;
  flex-direction: column;
  margin: 0 8px 0 2px;
}

.ui-panel--left hr {
  width: 100%;
  border: 1px solid #444;
  margin: 0;
}

input {
  width: 100%;
  padding: 2px;
  margin-top: -7px;
  margin-bottom: -2px;
  background: #333;
  box-shadow: 2px 2px inset #222;
  color: #ccc;
}

.ui-panel--left button {
  display: flex;
  width: 100%;
  width: 91px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
  border-top: 0 solid #5317;
  border-right: 2px solid #5315;
  border-bottom: 3px solid #5317;
  border-left: 0 solid #5315;
  background: #aaa;
  box-shadow: 0 0 0 1px #3339;
  font-weight: bold;
  transition: background-color 0.2s;
}

.ui-panel--left button:active {
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 2px;
  border-left-width: 1px;
}

.ui-panel--left button:hover {
  background: #999;
}

.save.disabled::after {
  position: absolute;
  right: 8px;
  content: '✔';
}

.color {
  display: flex;
}

.color input {
  width: 30px;
  height: 30px;
}

.camera {
  position: relative;
  top: 50vh;
  left: 50vw;
  width: 0;
  height: 0;
}


.shape.ship .face::before {
  background: var(--color-accent);
  color: #fff;
  content: attr(data-text);
  font-size: 8px;
  line-height: 26px;
  text-align: center;
}

.shape.ship .face:nth-child(1)::before {
  background:
    linear-gradient(
      var(--color-accent) 8px,
      #000 0 12px, 
      var(--color-accent) 0
    );
}

.shape.ship .face.engine {
  backface-visibility: visible;
  background: #677;
  box-shadow: 0 0 0 0 #5ff;
  transition: all 1s;
}

.shape.ship.thrust .face.engine {
  background: #6ff;
  box-shadow: 0 0 3px 1px #5ff;
}

.shape.ship .face.engine::before {
  display: none;
}

.shape.ship .face.engine::after {
  top: 1px;
  height: 8px;
  backface-visibility: visible;
  background: linear-gradient(#5ff, #0000);
  transform: rotateX(90deg) scaleY(0);
  transform-origin: top;
  transition: all 1s;
}

.shape.ship.thrust .face.engine::after {
  opacity: 0.5;
  transform: rotateX(90deg) scaleY(1);
}

.shape.ship.thrust-l .face.engine::after {
  opacity: 1;
  transform: rotateX(90deg) scaleY(2);
}



.select .face::after,
.hover .face::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid #0ffb;
  content: '';
}

.select .face::after {
  background: #0ff3;
}

.planet {
  box-shadow:
    30px -30px 60px #000e inset,
    9px 9px 20px #eef3 inset,
    -1px 1px 3px 1px #fff9 inset;
  pointer-events: none;
}

.planet.e {
  background: #039;
  background-image:
    linear-gradient(
      #fff3,
      #039 10%,
      #029 20%,
      #039 50%,
      #029 80%,
      #039 90%,
      #fff3
    );
}

.planet.m {
  background: #777;
  box-shadow:
    -30px -30px 60px #000e inset,
    9px 9px 20px #eef3 inset,
    1px 1px 3px 1px #fff9 inset;
  filter: drop-shadow(0 0 20px #fff3) drop-shadow(0 0 100px #000) drop-shadow(0 0 100px #000) drop-shadow(0 0 100px #000);
}

.scene {
  transform-origin: 0 0;
}

.scene * {
  position: absolute;
}

.sun {
  
  overflow: hidden;

  
  background: #f90;
  box-shadow: 0 0 26px #f60, 0 0 99px #ffcb;
  filter: drop-shadow(0 0 100px #000) drop-shadow(0 0 100px #000);
}

.viewport {
  overflow: hidden;
  width: 100vw;
  height: 100vh;

  
  touch-action: none;
}

.viewport * {
  box-sizing: border-box;
  transform-style: preserve-3d;
}



.frame {
  transition: transform 0.2s;
}


.frame .face::before {
  backface-visibility: hidden;
  opacity: 0.1;
}

.frame .face {
  backface-visibility: visible;
  pointer-events: none;
}

.frame .face::after {
  border: 2px solid #fffa;
  background: #fff2;
  transform: translateZ(-0.1px);
}

.frame.obstructed .face::after,
.frame.err-cost .face::after {
  border: 2px solid #f02b;
  background: #f022;
}

.skybox .face::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='filter'%3E%3CfeTurbulence baseFrequency='0.2'/%3E%3CfeColorMatrix values='0 0 0 9 -5 0 0 0 9 -5 0 0 0 9 -5 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23filter)'/%3E%3C/svg%3E");
}

.splash {
  position: absolute;
  top: 0;
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 1px 8px #000;
}

h1 {
  margin: 0;
  font-size: 120px;
}