/* fan113 DHD overlay — keeps the production Stargate DOM and logic intact. */
body.fan-dhd-layout {
  background: #081722;
  display: block;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: 0;
  position: relative;
}

body.fan-dhd-layout .border {
  aspect-ratio: 674 / 670;
  border: 0;
  border-radius: 0;
  height: auto;
  left: 50%;
  margin: 0;
  max-width: 874px;
  overflow: hidden;
  position: fixed;
  scale: 1 !important;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: filter 320ms ease, opacity 320ms ease, transform 420ms cubic-bezier(.2,.8,.2,1);
  width: min(76vw, 97vh, 874px);
  z-index: 70;
}

body.fan-dhd-layout .border > :not(.gate) {
  display: none !important;
}

body.fan-dhd-layout .border > .gate {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

body.fan-dhd-layout .fan113-controls-wrapper {
  height: auto;
  left: auto;
  margin: 0;
  position: fixed;
  right: clamp(96px, 12vw, 360px);
  top: 8px;
  width: auto;
  z-index: 10000;
}

body.fan-dhd-layout .fan113-controls {
  font-size: clamp(12px, 1.5vw, 18px);
  left: 0;
  margin: 0;
  padding: 0;
  position: static;
  width: auto;
}

body.fan-dhd-layout .a-fullscreen {
  display: none !important;
}

.fan-dhd-panel {
  --dial-red: #ff2a1a;
  --dial-red2: #7a1510;
  aspect-ratio: 1;
  filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.58));
  bottom: clamp(12px, 2vw, 30px);
  max-width: 472px;
  min-width: 0;
  opacity: .78;
  position: fixed;
  right: clamp(12px, 2vw, 30px);
  transform: scale(.8);
  transform-origin: right bottom;
  transition: filter 260ms ease, opacity 260ms ease, transform 420ms cubic-bezier(.2,.8,.2,1);
  width: min(38vw, 52vh, 472px);
  z-index: 25;
}

.fan-dhd-panel.loading {
  opacity: 0;
}

.fan-dhd-board {
  display: block;
  height: auto;
  overflow: visible;
  width: 100%;
}

.fan-dhd-board .tri {
  fill: url(#panel);
  filter: url(#metalPatina);
  stroke: url(#frame);
  stroke-linejoin: round;
  stroke-width: 3;
  transition: fill 160ms ease, filter 160ms ease;
}

.fan-dhd-board .cell {
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
}

.fan-dhd-board .cell .gl {
  color: #d9c9ad;
  opacity: 0.56;
  pointer-events: none;
  transition: color 160ms ease, filter 160ms ease, opacity 160ms ease;
}

.fan-dhd-board .cell:hover:not(.disabled) .tri,
.fan-dhd-board .cell:focus-visible:not(.disabled) .tri {
  fill: #88776a;
  filter: url(#metalPatina) brightness(1.18);
}

.fan-dhd-board .cell:hover:not(.disabled) .gl,
.fan-dhd-board .cell:focus-visible:not(.disabled) .gl {
  color: #ffe477;
  filter: drop-shadow(0 0 4px rgba(255, 222, 94, 1)) drop-shadow(0 0 10px rgba(255, 167, 30, .82));
  opacity: 1;
}

.fan-dhd-board .cell:active:not(.disabled) .tri {
  fill: #a06c4b;
  filter: url(#metalPatina) brightness(1.14);
}

body.fan-dhd-layout:not(.dial-engaged) .fan-dhd-panel:hover,
body.fan-dhd-layout:not(.dial-engaged).dhd-focused .fan-dhd-panel {
  filter: drop-shadow(0 34px 38px rgba(0, 0, 0, 0.76));
  opacity: 1;
  transform: scale(1);
  z-index: 80;
}

body.fan-dhd-layout:not(.dial-engaged):has(.fan-dhd-panel:hover) .border,
body.fan-dhd-layout:not(.dial-engaged).dhd-focused .border {
  filter: brightness(.9) saturate(.94);
  opacity: .96;
  transform: translate(-50%, -50%) scale(.985);
  z-index: 20;
}

body.fan-dhd-layout.dial-engaged .border {
  filter: none;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  z-index: 70;
}

body.fan-dhd-layout.dial-engaged .fan-dhd-panel {
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.48));
  opacity: .76;
  transform: scale(.8);
  z-index: 25;
}

body.fan-dhd-layout.dial-engaged .fan-dhd-panel:hover {
  opacity: .94;
}

.fan-dhd-board .cell.selected .gl {
  color: #ffd75a;
  filter: drop-shadow(0 0 4px rgba(255, 190, 34, 1)) drop-shadow(0 0 10px rgba(255, 145, 0, .86));
  opacity: 1;
}

.fan-dhd-board .cell.disabled {
  cursor: default;
}

.fan-dhd-board .cellnum {
  display: none;
}

.fan-dhd-center {
  cursor: default;
  outline: none;
}

.fan-dhd-center .dial-tri {
  fill: url(#dialg);
  filter: drop-shadow(0 8px 5px rgba(27, 0, 0, .8)) drop-shadow(0 -2px 2px rgba(255, 100, 76, .38));
  stroke: #ff4a36;
  stroke-width: 3.5;
}

.fan-dhd-center .dial-shine {
  opacity: .52;
  pointer-events: none;
}

.fan-dhd-center.ready,
.fan-dhd-center.partial,
.fan-dhd-center.connected {
  cursor: pointer;
}

.fan-dhd-center.ready .dial-tri {
  filter: drop-shadow(0 0 10px rgba(255, 80, 40, .46));
}

.fan-dhd-center.engaged .dial-tri,
.fan-dhd-center.dial-pressed .dial-tri,
.fan-dhd-center.connected .dial-tri {
  fill: url(#dialg-active);
  filter: drop-shadow(0 0 12px rgba(255, 74, 34, 1)) drop-shadow(0 0 28px rgba(255, 24, 8, .92));
  stroke: #ff9a82;
}

.fan-dhd-center.engaged .dial-shine,
.fan-dhd-center.dial-pressed .dial-shine,
.fan-dhd-center.connected .dial-shine {
  opacity: .76;
}

.fan-dhd-center.dial-pressed .dial-tri {
  animation: fan-dhd-dial-press 360ms cubic-bezier(.2,.8,.2,1);
  transform-box: fill-box;
  transform-origin: center;
}

.fan-dhd-center.black-hole-connected.black-hole-arming .dial-tri {
  animation: fan-dhd-black-hole-arm 280ms ease-out;
}

.fan-dhd-panel.readonly .fan-dhd-key {
  pointer-events: none;
}

@keyframes fan-dhd-black-hole-arm {
  0% { filter: drop-shadow(0 0 8px rgba(255, 40, 20, .9)); }
  50% { filter: drop-shadow(0 0 18px rgba(255, 190, 40, 1)) drop-shadow(0 0 30px rgba(255, 45, 12, 1)); }
  100% { filter: drop-shadow(0 0 9px rgba(255, 40, 20, .98)) drop-shadow(0 0 22px rgba(255, 24, 8, .9)); }
}

@keyframes fan-dhd-dial-press {
  0% { transform: scale(1); }
  28% { transform: scale(.94); }
  100% { transform: scale(1); }
}

@media (max-width: 860px) {
  body.fan-dhd-layout {
    min-height: 100svh;
  }

  body.fan-dhd-layout .border {
    width: min(100vw, 78vh, 760px);
  }

  .fan-dhd-panel {
    bottom: 8px;
    right: 8px;
    width: min(58vw, 44vh, 390px);
  }

  body.fan-dhd-layout .fan113-controls-wrapper {
    right: clamp(24px, 6vw, 60px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.fan-dhd-layout .border,
  .fan-dhd-panel,
  .fan-dhd-key { transition: none; }
}