/* Operations board and the M8 mini-games (docking, storm, ores, greenhouse, slingshot, signal). */

/* ---------- operations board ---------- */
.ops { display: grid; grid-template-columns: 1fr; gap: 10px; padding-bottom: 24px; }
@media (min-width: 560px) { .ops { grid-template-columns: 1fr 1fr; } }
.op { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 3px solid var(--sw-ink); background: var(--sw-paper-light); text-decoration: none; color: var(--sw-ink); box-shadow: 4px 4px 0 var(--sw-ink); }
.op.locked { opacity: .55; box-shadow: none; cursor: default; }
.op-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.op-head .dis { font-size: 26px; line-height: 1; }
.op-kind { font-size: 9px; font-weight: 700; letter-spacing: 1px; padding: 2px 6px; background: var(--sw-ink); color: var(--sw-paper); }
.op p { font-size: 12px; line-height: 1.45; }
.op-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.op-foot small { font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.op-state { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 2px solid var(--sw-ink); }
.op-state.ready { background: var(--sw-teal); color: var(--sw-paper); border-color: var(--sw-teal); }
.op-state.cool { background: var(--sw-mustard); }
.op-best { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #4a5468; }

/* ---------- shared action-game bits ---------- */
.mg-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(7,11,20,.45); }
.mg .actions .btn .ic { vertical-align: -3px; }

/* ---------- docking ---------- */
.dock-field { min-height: 460px; }
.dock-hud b { font-size: 14px; white-space: nowrap; }
.lander-field > svg.dock-map { position: absolute; inset: auto 12px 178px auto; width: 64px; height: 96px; }
.dock-controls { position: absolute; left: 10px; right: 10px; bottom: 12px; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.dock-controls button { pointer-events: auto; width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(242,230,207,.4); background: rgba(27,42,65,.85); color: #F2E6CF; touch-action: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dock-controls button.held { background: var(--sw-mustard); color: var(--sw-ink); border-color: var(--sw-mustard); }
.dpad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); gap: 2px; }
.dpad .u { grid-column: 2; grid-row: 1; }
.dpad .l { grid-column: 1; grid-row: 2; }
.dpad .r { grid-column: 3; grid-row: 2; }
.dpad .d { grid-column: 2; grid-row: 3; }
.rollpad { display: flex; gap: 10px; padding-bottom: 54px; }

/* ---------- storm escape ---------- */
.lander-controls.storm-pad { position: static; padding: 0 16px; }
.storm-field { flex: none; min-height: 0; aspect-ratio: 2 / 3; max-height: 78vh; }

/* ---------- ore sorter ---------- */
.ore-field { position: relative; margin: 0 16px; padding: 8px; background: radial-gradient(circle at 30% 20%, #1a2233, #070a12); }
.ores { display: grid; gap: 3px; width: min(380px, 100%); margin: 0 auto; }
.ore { aspect-ratio: 1; border: 0; padding: 2px; background: rgba(255,255,255,.04); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .12s, background .12s; }
.ore svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.ore.sel { background: rgba(232,178,58,.35); box-shadow: inset 0 0 0 2px var(--sw-mustard); transform: scale(1.06); }
.ore.pop { animation: orepop .26s ease-in forwards; }
@keyframes orepop { 50% { transform: scale(1.25); filter: brightness(2); } 100% { transform: scale(.2); opacity: 0; } }
.ore:disabled { cursor: default; }
.ore-combo { position: absolute; top: 40%; left: 0; right: 0; text-align: center; font-size: 44px; color: var(--sw-mustard); text-shadow: 0 3px 0 #000; pointer-events: none; animation: combo .4s ease-out; }
@keyframes combo { from { transform: scale(.4); opacity: 0; } }
.ore-tally { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 0 16px; font-size: 13px; font-weight: 700; }
.ore-tally span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ore-tally small { font-size: 8px; letter-spacing: 1px; color: #4a5468; }

/* ---------- greenhouse ---------- */
.gh-queue { display: flex; gap: 8px; align-items: center; padding: 0 16px; }
.gh-queue .now { flex: 1; display: flex; gap: 10px; align-items: center; border: 3px solid var(--sw-ink); padding: 6px 10px; background: var(--sw-mustard); min-width: 0; }
.gh-queue .now span { display: flex; flex-direction: column; min-width: 0; }
.gh-queue .now small { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--sw-ink); }
.gh-queue .now b { font-size: 24px; line-height: 1; }
.gh-queue .now em { font-style: normal; font-size: 11px; color: var(--sw-ink); }
.gh-queue .soon { border: 2px solid var(--sw-ink); background: var(--sw-paper-light); padding: 4px; display: flex; }
.gh-field { margin: 0 16px; padding: 8px; background: linear-gradient(#11202a, #0a141b); }
.gh-grid { display: grid; gap: 4px; width: min(380px, 100%); margin: 0 auto; }
.gh-cell { position: relative; aspect-ratio: 1; border: 0; border-radius: 4px; padding: 3px; display: flex; align-items: center; justify-content: center; }
.gh-cell svg { width: 100%; height: 100%; }
.gh-cell.soil { background: radial-gradient(circle at 30% 30%, #6b4a2e 0 6%, transparent 7%), radial-gradient(circle at 70% 65%, #4a311c 0 5%, transparent 6%), linear-gradient(#5a3d24, #3e2915); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.gh-cell.soil:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--sw-mustard); }
.gh-cell.planted { cursor: default; }
.gh-cell.lamp { background: radial-gradient(circle, rgba(255,210,122,.5), rgba(255,210,122,.08) 70%), #1b2330; }
.gh-cell.tank { background: #16303f; }
.gh-cell.rock { background: radial-gradient(circle at 60% 40%, #4a4036 0 22%, transparent 23%), radial-gradient(circle at 30% 70%, #3c342c 0 16%, transparent 17%), #241f1a; }
.gh-cell .pts { position: absolute; right: 2px; bottom: 2px; min-width: 18px; padding: 0 3px; background: var(--sw-teal); color: #fff; font-size: 11px; font-weight: 700; text-align: center; border-radius: 3px; }
.gh-rules { display: grid; grid-template-columns: 1fr; gap: 3px; }
.gh-rules span { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.gh-rules svg { flex: none; }

/* ---------- slingshot ---------- */
.sling-field { margin: 0 16px; aspect-ratio: 1; padding: 0; overflow: hidden; touch-action: none; cursor: crosshair; }
.sling-field svg { width: 100%; height: 100%; display: block; }
.spin-slow { transform-origin: center; transform-box: fill-box; animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sling-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--sw-ink); }
.sling-sliders label { display: flex; flex-direction: column; gap: 4px; }
.sling-sliders input { width: 100%; accent-color: var(--sw-mustard); }

/* ---------- signal decode ---------- */
.sig-scope { margin: 0 16px; padding: 0; position: relative; border-color: #1d4a3c; }
.sig-scope svg { display: block; width: 100%; height: 140px; }
.sig-lockglyph svg { stroke: #8FE3DE; fill: none; stroke-width: 1.8; }
.sig-slots { display: grid; grid-template-columns: repeat(5, 1fr); background: #04130f; border-top: 1px solid #1d4a3c; }
.sig-slots span { text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 1px; color: #3fd18a; padding: 3px 0; }
.sig-slots span.lock { color: #04130f; background: #8FE3DE; }
.sig-board { display: flex; flex-direction: column; gap: 5px; padding: 0 16px; align-items: center; }
.sig-row { display: grid; grid-template-columns: repeat(var(--len), minmax(0, 46px)); gap: 5px; width: 100%; justify-content: center; }
.sig-cell { width: 100%; aspect-ratio: 1; max-width: 46px; display: flex; align-items: center; justify-content: center; border: 3px solid rgba(27,42,65,.3); background: var(--sw-paper-light); color: var(--sw-ink); }
.sig-row.active .sig-cell { border-color: var(--sw-ink); }
.sig-cell.lock { background: var(--sw-teal); border-color: var(--sw-ink); color: #fff; }
.sig-cell.near { background: var(--sw-mustard); border-color: var(--sw-ink); color: var(--sw-ink); }
.sig-cell.miss { background: #8d8b85; border-color: #6b6a66; color: #e8e2d4; }
.sig-cell.mini { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; }
.glyph { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sig-keys { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; padding: 0 16px; }
.sig-keys button { min-width: 0; padding: 0; height: 48px; border: 3px solid var(--sw-ink); background: var(--sw-paper-light); color: var(--sw-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sig-keys button.lock { background: var(--sw-teal); color: #fff; }
.sig-keys button.near { background: var(--sw-mustard); }
.sig-keys button.miss { background: #8d8b85; color: #e8e2d4; }
.sig-keys button:disabled { opacity: .5; cursor: default; }
.sig-keys .wide { grid-column: span 2; }
.sig-keys .send { grid-column: span 5; background: var(--sw-mustard); font-family: var(--sw-font-display); font-size: 24px; letter-spacing: 3px; }