:root { --console-edge: #3a4841; --console-muted: #82978b; }
body { background: #111715; }
header { border-color: #34463b; }
.intro p { font: 10px 'DM Mono', monospace; letter-spacing: 1.1px; color: #a6b7a6; }
.intro-note { font: 10px/1.7 'DM Mono', monospace; letter-spacing: .6px; }
.board-wrap, .panel { background: #1a211e; border: 1px solid var(--console-edge); box-shadow: inset 0 1px rgba(220, 239, 210, .04), 0 3px 12px #0005; }
.board-wrap { padding: 4px; }
.board-top, .board-bottom { background: #202a25; color: #a4b6a7; }
.board-top { border-bottom: 1px solid #34443a; }
.board-bottom { border-top: 1px solid #34443a; }
.panel { padding: 14px; }
.panel-heading { background: #28342d; border: 1px solid #46584b; border-left: 3px solid #9bc969; padding: 9px 10px; font-size: 10px; letter-spacing: 1.1px; }
.panel-heading span { font-size: 12px; line-height: 1; }
.score-label { margin-top: 14px; }
.score { background: #0b110e; color: #d9efc4; border: 1px solid #34483a; padding: 5px 9px; margin: 7px 0 12px; font-size: 32px; text-shadow: 0 0 9px #b6ef6733; }
.stat-row { padding: 10px 0; }
.stat-row strong { font-size: 18px; }
.hull-head { margin-top: 13px; }
.hull { margin: 8px 0; }
.targeting label { margin: 14px 0 7px; }
.input-wrap { border: 1px solid #749e57; box-shadow: inset 0 0 12px #0008; }
input { font-size: 20px; padding: 10px; }
#upgrade { color: #bfd2bb; font: 9px 'DM Mono', monospace; letter-spacing: .3px; margin: 12px 0; }
.inventory-label { display: flex; justify-content: space-between; color: var(--console-muted); font: 9px 'DM Mono', monospace; letter-spacing: .5px; margin: 14px 0 5px; }
.inventory-label span { color: #71847a; }
.gem-inventory { border: 1px solid #394b3d; background: #101713; padding: 3px 9px; }
.gem-row + .gem-row { border-top: 1px solid #26372b; }
.gem-row { min-height: 32px; }
.feedback { border: 0; padding: 10px 0 0; line-height: 1.5; }
.instructions > div:not(.panel-heading) { margin-top: 9px; align-items: baseline; }
.instructions p { font: 9px/1.5 'DM Mono', monospace; letter-spacing: .3px; }
.instructions p b { font-size: 9px; }
.aside-foot { padding-top: 0; }
#autoplay, #sound { background: #202b24; border-color: #485c4b; color: #d0dec9; box-shadow: inset 0 1px #ffffff0d; }
button:focus-visible { outline: 2px solid #c7f36b; outline-offset: 3px; }
input:focus-visible { outline: none; }
.mission-summary { display: none; }
.desktop-notice { display: none; }
body.desktop-required { overflow: hidden; }
body.desktop-required .desktop-notice { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 24px; background: #090e0df5; }
.desktop-notice-card { max-width: 420px; padding: 32px; border: 1px solid #46584b; background: #1a211e; box-shadow: 0 8px 40px #000b; text-align: center; }
.desktop-notice-icon { color: #c7f36b; font-size: 42px; margin-bottom: 18px; }
.desktop-notice-card h1 { margin: 16px 0; font-size: 36px; letter-spacing: -1.5px; }
.desktop-notice-card p { color: #b2c3b6; font-size: 14px; line-height: 1.6; }
@media (min-width: 801px) and (min-height: 600px) {
  .shell { padding: 0 clamp(12px, 2vw, 32px); }
  header { height: 46px; }
  .mission-summary { display: block; color: #81948a; font: 9px 'DM Mono', monospace; letter-spacing: .8px; }
  .intro, footer { display: none; }
  .game-layout { margin-top: 8px; grid-template-columns: minmax(0, min(calc(100vh - 112px), calc(100% - 330px))) minmax(290px, 320px); gap: 10px; }
  .board-top, .board-bottom { height: 26px; }
  aside { max-height: calc(100vh - 62px); }
}
@media (min-width: 801px) and (max-width: 1050px) { .mission-summary { display: none; } }
@media (max-width: 500px) { .panel { padding: 12px; } .header-right { gap: 5px; } #autoplay, #sound { padding: 8px 6px; font-size: 8px; } }

/* Brushed console plates with polished steel edges. */
.board-wrap, .panel {
  background-color: #242e29;
  background-image: repeating-linear-gradient(0deg, rgba(218, 233, 220, .025) 0, rgba(218, 233, 220, .025) 1px, transparent 1px, transparent 3px), linear-gradient(115deg, #38443d 0%, #242e29 28%, #303c35 53%, #1b2420 100%);
  border-color: #62736a;
  box-shadow: inset 0 1px rgba(226, 241, 226, .22), inset 1px 0 rgba(211, 229, 214, .08), inset 0 -1px rgba(0, 0, 0, .65), 0 3px 12px #0007;
}
.board-top, .board-bottom, .panel-heading {
  background-image: linear-gradient(180deg, #65766b 0%, #3e4d43 12%, #2a3730 48%, #35443a 51%, #202c26 100%);
  box-shadow: inset 0 1px rgba(238, 248, 236, .22), inset 0 -1px rgba(0, 0, 0, .45);
}
.panel-heading { border-color: #708176; border-left-color: #9bc969; }
#autoplay, #sound {
  background-image: linear-gradient(180deg, #526259, #29372f 48%, #202c25 52%, #35453a);
  box-shadow: inset 0 1px rgba(235, 247, 232, .22), inset 0 -1px rgba(0, 0, 0, .5);
}

/* Angled, raised avionics bezels. */
.board-wrap, .panel {
  position: relative;
  border: 0;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
  background-image: repeating-linear-gradient(0deg, rgba(218, 233, 220, .025) 0, rgba(218, 233, 220, .025) 1px, transparent 1px, transparent 3px), linear-gradient(135deg, #788a7e 0%, #35453b 3%, #243029 20%, #303c35 55%, #18221c 96%, #53665a 100%);
  box-shadow: inset 2px 2px 0 #a3b5a48c, inset -3px -3px 0 #0b120ed9, inset 5px 5px 8px #c8d8c21a, inset -6px -6px 10px #0007;
}
.panel { padding: 17px; }
.board-wrap { padding: 6px; }
.panel-heading {
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  border-left: 3px solid #9bc969;
  box-shadow: inset 0 1px #dcead05c, inset 1px 0 #dcead02a, inset 0 -2px #080e0ab3, 0 2px 4px #0008;
}
.score, .input-wrap, .gem-inventory {
  box-shadow: inset 0 2px 5px #000b, inset 0 1px #000, 0 1px #a5b8a52b;
}
@media (max-width: 500px) { .panel { padding: 15px; } }

/* Independent counters for the three gem systems. */
.gem-inventory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0; border: 0; background: none; box-shadow: none; }
.gem-row, .gem-row + .gem-row { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 76px; padding: 10px 3px 6px; border: 1px solid #52665a; background: linear-gradient(145deg, #26352c, #0c1510 65%); box-shadow: inset 0 1px #b0c9ad33, inset 0 -2px 5px #0009; }
.gem-row .gem-icon { flex: none; }
.gem-row p { color: #e2f0dd; font: 18px/1 'DM Mono', monospace; }
.gem-row small { min-height: 11px; color: #a2b6a6; font: 8px/1.2 'DM Mono', monospace; text-align: center; }

/* Seven-segment score display. */
.score { display: flex; justify-content: flex-end; align-items: center; gap: 4px; min-height: 48px; overflow: hidden; }
.segment-digit { --segment-on: #00f050; --segment-off: #233626; --segment-glow: #00ff6680; position: relative; display: inline-block; flex: 0 0 20px; height: 34px; }
.segment-digit i { position: absolute; display: block; background: var(--segment-off); opacity: .55; }
.segment-digit i:nth-child(1), .segment-digit i:nth-child(4), .segment-digit i:nth-child(7) { left: 3px; width: 14px; height: 3px; clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 50%, calc(100% - 2px) 100%, 2px 100%, 0 50%); }
.segment-digit i:nth-child(1) { top: 0; } .segment-digit i:nth-child(4) { top: 15px; } .segment-digit i:nth-child(7) { bottom: 0; }
.segment-digit i:nth-child(2), .segment-digit i:nth-child(3), .segment-digit i:nth-child(5), .segment-digit i:nth-child(6) { width: 3px; height: 14px; clip-path: polygon(50% 0, 100% 2px, 100% calc(100% - 2px), 50% 100%, 0 calc(100% - 2px), 0 2px); }
.segment-digit i:nth-child(2) { left: 0; top: 1px; } .segment-digit i:nth-child(3) { right: 0; top: 1px; }
.segment-digit i:nth-child(5) { left: 0; bottom: 1px; } .segment-digit i:nth-child(6) { right: 0; bottom: 1px; }
.segment-digit[data-digit="0"] i:is(:nth-child(1),:nth-child(2),:nth-child(3),:nth-child(5),:nth-child(6),:nth-child(7)),
.segment-digit[data-digit="1"] i:is(:nth-child(3),:nth-child(6)),
.segment-digit[data-digit="2"] i:is(:nth-child(1),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(7)),
.segment-digit[data-digit="3"] i:is(:nth-child(1),:nth-child(3),:nth-child(4),:nth-child(6),:nth-child(7)),
.segment-digit[data-digit="4"] i:is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(6)),
.segment-digit[data-digit="5"] i:is(:nth-child(1),:nth-child(2),:nth-child(4),:nth-child(6),:nth-child(7)),
.segment-digit[data-digit="6"] i:is(:nth-child(1),:nth-child(2),:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(7)),
.segment-digit[data-digit="7"] i:is(:nth-child(1),:nth-child(3),:nth-child(6)),
.segment-digit[data-digit="8"] i,
.segment-digit[data-digit="9"] i:is(:nth-child(1),:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(6),:nth-child(7)) { background: var(--segment-on); opacity: 1; filter: drop-shadow(0 0 3px var(--segment-glow)); }

/* Compact seven-segment digits for gem and mission counters. */
.gem-row p { display: flex; justify-content: center; gap: 3px; line-height: 1; }
.stat-row strong { display: flex; gap: 3px; margin-top: 7px; }
.gem-row .segment-digit, .stat-row .segment-digit { flex-basis: 12px; height: 21px; }
.gem-row .segment-digit i:nth-child(1), .gem-row .segment-digit i:nth-child(4), .gem-row .segment-digit i:nth-child(7),
.stat-row .segment-digit i:nth-child(1), .stat-row .segment-digit i:nth-child(4), .stat-row .segment-digit i:nth-child(7) { left: 2px; width: 8px; height: 2px; }
.gem-row .segment-digit i:nth-child(4), .stat-row .segment-digit i:nth-child(4) { top: 9px; }
.gem-row .segment-digit i:nth-child(2), .gem-row .segment-digit i:nth-child(3), .gem-row .segment-digit i:nth-child(5), .gem-row .segment-digit i:nth-child(6),
.stat-row .segment-digit i:nth-child(2), .stat-row .segment-digit i:nth-child(3), .stat-row .segment-digit i:nth-child(5), .stat-row .segment-digit i:nth-child(6) { width: 2px; height: 9px; }
.stat-row .segment-digit { flex-basis: 11px; }
.stat-row .segment-digit { --segment-on: #ffae00; --segment-off: #41301a; --segment-glow: #ff990066; }

/* Recessed panels for mission counters. */
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px 0; border: 0; }
.stat-row > div, .stat-row > div + div { min-width: 0; padding: 8px 5px; border: 1px solid #52665a; background: linear-gradient(145deg, #26352c, #0c1510 65%); box-shadow: inset 0 1px #b0c9ad33, inset 0 -2px 5px #0009; }
.stat-row label { font-size: 8px; letter-spacing: .3px; }
.stat-row strong { justify-content: center; gap: 2px; }
.stat-row #incoming { justify-content: center; }
.stat-row label { text-align: center; }

.hull-panel { margin-top: 9px; padding: 9px; border: 1px solid #52665a; background: linear-gradient(145deg, #26352c, #0c1510 65%); box-shadow: inset 0 1px #b0c9ad33, inset 0 -2px 5px #0009; }
.hull-panel .hull-head { margin-top: 0; }
.hull-panel .hull { display: flex; justify-content: space-between; gap: 3px; height: 14px; margin: 5px 0; background: none; align-items: stretch; }
/* Directional bezel lighting: shadow above and left, reflected light below and right. */
.board-wrap, .panel {
  box-shadow: inset 2px 2px 3px #000b, inset -2px -2px 2px #b9cbb65c, inset 5px 5px 8px #0005, inset -5px -5px 8px #b5c9b314;
}
.panel-heading, .board-top, .board-bottom {
  box-shadow: inset 1px 2px 3px #0009, inset -1px -1px 1px #c8dac34d;
  border-color: #26352c #718477 #718477 #26352c;
}
.panel-heading { border-left: 3px solid #9bc969; }
.score, .input-wrap, .gem-inventory .gem-row, .stat-row > div, .stat-row > div + div, .hull-panel {
  border-color: #18241d #718477 #718477 #18241d;
  box-shadow: inset 2px 2px 4px #000b, inset -1px -1px 1px #b5cbb133, 0 1px #bacfb323;
}
.brand { display: inline-flex; align-items: center; }
canvas.brand-rock { display: inline-block; flex: 0 0 34px; width: 34px; height: 34px; margin: 0 3px; filter: drop-shadow(0 0 3px #829b804d); background: radial-gradient(circle, #91ae91 0%, #587162 35%, #293b30 56%, transparent 72%); border-radius: 50%; }

/* Twenty-cell battery-style hull meter. */
.hull-panel .hull-block { flex: 1 1 0; min-width: 0; background: #302719; border: 1px solid #493722; box-shadow: inset 0 1px 2px #0008; }
.hull-panel .hull-block.lit { background: linear-gradient(180deg, #ffd066, #d98500); border-color: #d9931f; box-shadow: inset 0 1px #fff1a966, 0 0 4px #ff9c0070; }
.board-bottom .game-version { color: #a4b6a7; white-space: nowrap; }
canvas.start-rock { display: block; width: 128px; height: 128px; margin: 0; }
.start-emblem { position: relative; display: inline-block; width: 128px; height: 128px; }
.start-reticle { position: absolute; width: 64px; height: 64px; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid #c7f36b; border-radius: 50%; background: repeating-linear-gradient(to bottom, #c7f36b 0 5px, transparent 5px 9px) center / 1px 100% no-repeat, repeating-linear-gradient(to right, #c7f36b 0 5px, transparent 5px 9px) center / 100% 1px no-repeat; box-shadow: 0 0 8px #b5f46a99, inset 0 0 8px #b5f46a66; }
@keyframes reticle-search {
  0%, 100% { transform: translate(-50%, -50%); }
 20% { transform: translate(calc(-50% - 4px), calc(-50% + 2px)); }
 43% { transform: translate(calc(-50% + 3px), calc(-50% - 3px)); }
 68% { transform: translate(calc(-50% + 2px), calc(-50% + 2px)); }
 85% { transform: translate(-50%, -50%); }
}
#overlay:not(.hidden) .start-reticle { animation: reticle-search 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #overlay .start-reticle { animation: none; } }
@keyframes rock-wobble {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
#overlay:not(.hidden) .start-rock { animation: rock-wobble 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #overlay .start-rock { animation: none; } }