/* Ship Shape on the big screen: the placing stage (clock and how many ships are hidden). */

.gtf-ss-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  height: 100%;
  text-align: center;

  .gtf-ss-clock__ring {
    width: 160px;
    height: 160px;

    &::before {
      width: 132px;
      height: 132px;
    }
  }

  .gtf-ss-clock__value {
    font-size: 64px;
  }
}

.gtf-ss-screen__lede {
  max-width: 900px;
  margin: 0;
  font-size: 36px;
  line-height: 1.3;
  color: var(--gtf-text-2);
}

.gtf-ss-placed {
  width: min(720px, 100%);
}

.gtf-ss-placed__count {
  margin: 0 0 12px;
  font-family: var(--gtf-mono);
  font-size: 40px;
}

/* ---------- The live grid ----------
   A square board on the left (as tall as the window allows, never so wide the side column drops under 480px) and
   the heading, counts, legend and updates on the right. Drawn by PixiJS (lib/javascript/ship_shape/pixi_board.js)
   into .gtf-ssb__canvas. */

.gtf-ssb-screen {
  --gtf-board-pad: clamp(20px, calc(var(--gtf-stage-w, 1920px) * 0.04), 56px);
}

.gtf-ssb-screen .gtf-screen__body {
  inset: 0;
  zoom: 1;
}

.gtf-ssb {
  --ssb-board: min(
    calc(var(--gtf-stage-h, 1080px) - 120px * var(--gtf-m, 1)),
    calc(var(--gtf-stage-w, 1920px) - 2 * var(--gtf-board-pad) - 40px - 480px)
  );
  --ssb-top: calc(100px * var(--gtf-m, 1));

  position: absolute;
  inset: 0;
}

.gtf-ssb-screen .gtf-screen__header {
  inset: calc(24px * var(--gtf-m, 1)) var(--gtf-board-pad) auto;
  height: calc(56px * var(--gtf-m, 1));
  padding: 0;
  background: none;
  zoom: 1;
}

.gtf-ssb-screen .gtf-screen__brand {
  gap: 16px;
  zoom: var(--gtf-m, 1);
}

.gtf-ssb-screen .gtf-screen__title {
  font-size: 36px;
  letter-spacing: -0.02em;
}

.gtf-ssb__board {
  position: absolute;
  top: var(--ssb-top);
  left: var(--gtf-board-pad);
  width: var(--ssb-board);
  height: var(--ssb-board);
  border-radius: 14px;
  background: var(--gtf-surface-1);
  overflow: hidden;
}

.gtf-ssb__canvas {
  position: absolute;
  inset: 0;
}

.gtf-ssb__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 32px;
  font-size: 28px;
  text-align: center;
  color: var(--gtf-text-2);

  &[hidden] { display: none; }
}

/* The side column is sized in em from a base that follows the stage width (the design's sizes at 1420px: 16px
   base, 68px heading), not the window height, so short windows keep readable text and clip the feed instead. */
.gtf-ssb__side {
  position: absolute;
  top: var(--ssb-top);
  bottom: calc(24px * var(--gtf-m, 1));
  left: calc(var(--gtf-board-pad) + var(--ssb-board) + 40px);
  right: var(--gtf-board-pad);
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  min-width: 0;
  overflow: hidden;
  font-size: clamp(16px, calc(var(--gtf-stage-w, 1920px) * 0.0113), 22px);
}

.gtf-ssb__heading {
  font-size: clamp(40px, calc(var(--gtf-stage-w, 1920px) * 0.048), 84px);
  line-height: 1;
  text-wrap: balance;
}

.gtf-ssb__note {
  margin-top: 0.55em;
  font-size: 1.25em;
  line-height: 1.4;
  color: var(--gtf-text-2);
}

.gtf-ssb__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}

.gtf-ssb__stat-label {
  font-size: 0.95em;
  font-weight: 600;
  color: var(--gtf-text-2);
}

.gtf-ssb__stat-value {
  font-family: var(--gtf-mono);
  font-size: 2.5em;
  line-height: 1.1;
}

.gtf-ssb__stat-value--success { color: var(--gtf-success); }
.gtf-ssb__stat-value--yellow { color: var(--gtf-yellow); }
.gtf-ssb__stat-value--orange { color: var(--gtf-orange); }

.gtf-ssb__stat-of {
  font-size: 0.55em;
  color: var(--gtf-text-2);
}

.gtf-ssb__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.4em;
  font-size: 1.2em;
  color: var(--gtf-text-2);
}

.gtf-ssb__legend-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.gtf-ssb__dot {
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
}

.gtf-ssb__dot--hidden { background: #4a4036; }
.gtf-ssb__dot--water { background: #2e8fb0; }
.gtf-ssb__dot--debris { background: #e0883a; }
.gtf-ssb__dot--aimed { background: var(--gtf-cream); }

.gtf-ssb__updates-title {
  margin-bottom: 0.25em;
  font-size: 1.375em;
  font-weight: 800;
}

.gtf-ssb__feed-item {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.45em 0;
  border-top: 2px solid var(--gtf-surface-2);
  font-size: 1.2em;
}

.gtf-ssb__feed-mark {
  flex: none;
  width: 0.55em;
  height: 0.55em;
  border-radius: 4px;
  background: var(--gtf-text-3);
}

.gtf-ssb__feed-mark--blue { background: oklch(0.76 0.12 230); }
.gtf-ssb__feed-mark--orange { background: var(--gtf-orange); }
.gtf-ssb__feed-mark--yellow { background: var(--gtf-yellow); }