body { padding: 12px 16px 24px; }
.muted { color: var(--yc-phos-dim); font-size: 0.8rem; }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; max-width: 1160px; margin: 0 auto 12px; }
.crumbs { margin: 0; width: 100%; font-size: 0.85rem; }
.top h1 { font-size: clamp(20px, 3.6vw, 32px); }
.readouts { margin-left: auto; display: flex; gap: 18px; padding: 6px 14px; }
.readouts .yc-value { font-size: 20px; }
.game { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; max-width: 1160px; margin: 0 auto; }
@media (max-width: 860px) { .game { grid-template-columns: minmax(0, 1fr); } }
.side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; }

/* The field: every ship and rock is a positioned <div>. */
.field { position: relative; height: 560px; overflow: hidden;
  background-image: radial-gradient(1px 1px at 20% 30%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 60%, #fff6 50%, transparent 51%), radial-gradient(1px 1px at 40% 80%, #fff5 50%, transparent 51%);
  background-size: 97px 89px, 131px 113px, 71px 67px; background-color: #000; }
.station { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 2px;
  color: var(--yc-ice); font: 700 11px var(--yc-mono); letter-spacing: 0.2em; text-transform: uppercase; }
.station img { image-rendering: pixelated; filter: drop-shadow(0 0 12px rgb(80 160 255 / 0.4)); }
.rock { position: absolute; image-rendering: pixelated; transform: translate(-50%, -50%); }
.rock .ore { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); font: 700 10px var(--yc-mono);
  color: var(--yc-amber); text-shadow: 0 0 4px #000; white-space: nowrap; }
.ship { position: absolute; left: 0; top: 0; background-repeat: no-repeat; image-rendering: pixelated; will-change: transform; }
.ship .cargo { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); height: 3px; width: 26px;
  background: rgb(255 179 64 / 0.25); border-radius: 2px; }
.ship .cargo i { display: block; height: 100%; background: var(--yc-amber); border-radius: 2px; }
.float { position: absolute; pointer-events: none; font: 700 12px var(--yc-mono); color: var(--yc-phos);
  text-shadow: 0 0 6px rgb(92 255 92 / 0.7); animation: rise 1.2s ease-out forwards; }
@keyframes rise { to { transform: translateY(-34px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .float { animation: none; opacity: 0; } }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.list li { display: grid; grid-template-columns: 52px 1fr auto; gap: 8px; align-items: center; }
.list img { width: 52px; height: 52px; image-rendering: pixelated; background: #000; border-radius: 3px; box-shadow: 0 0 0 1px var(--yc-chrome-lo); }
.list .what { font-size: 0.8rem; line-height: 1.35; }
.list .what b { color: var(--yc-ice); font-size: 0.9rem; }
.list .yc-plate { padding: 7px 9px; font-size: 10px; white-space: nowrap; }
.log { list-style: none; margin: 0; padding: 8px 10px; max-height: 160px; overflow: auto; font-size: 0.78rem; display: grid; gap: 3px; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
.credit { max-width: 1160px; margin: 16px auto 0; color: var(--yc-phos-dim); font-size: 0.75rem; }
@media (max-width: 520px) { body { padding: 8px; } .game.yc-console { padding: 6px; } .field { height: 420px; } .readouts { gap: 10px; } }