:root { --ink:#181611; --paper:#d7cbb2; --paper-light:#e4dac5; --brass:#c79d49; --rust:#a04422; --olive:#5f6542; --line:#6d604b; --muted:#a99d85; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; color:var(--paper); background-color:#17130f; background-image:radial-gradient(ellipse at top, rgba(122,66,26,.20), transparent 45%), repeating-linear-gradient(90deg, rgba(255,255,255,.017) 0 1px, transparent 1px 7px), linear-gradient(100deg, rgba(0,0,0,.45), transparent 35%, rgba(0,0,0,.3)); font-family:"Courier New", Courier, monospace; letter-spacing:.035em; }
body::before { content:""; pointer-events:none; position:fixed; inset:0; opacity:.14; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); mix-blend-mode:screen; }
.console-shell { width:min(1040px, calc(100% - 32px)); margin:0 auto; padding:50px 0 40px; }
.masthead { border-left:6px solid var(--brass); padding:3px 0 7px 18px; margin:0 0 28px; text-shadow:2px 2px 0 #000; }
.eyebrow { color:var(--brass); font-weight:700; font-size:.83rem; margin:0 0 4px; letter-spacing:.16em; }
h1,h2,p { margin-top:0; } h1,h2,.firing-card h3 { font-family:Impact, sans-serif; font-weight:400; } h1 { font-size:clamp(2.4rem, 7vw, 4.9rem); text-transform:uppercase; line-height:.82; margin:0; letter-spacing:.025em; } h2 { margin:0; text-transform:uppercase; font-size:1.65rem; letter-spacing:.07em; } .subtitle { color:#c7bda9; margin:9px 0 0; font-size:1.05rem; }
.panel { position:relative; padding:24px; color:var(--ink); background:var(--paper); border:2px solid #988a6e; outline:1px solid #261f16; box-shadow:7px 8px 0 rgba(0,0,0,.45), inset 0 0 0 4px rgba(90,75,52,.16); }
.panel::after { content:""; position:absolute; inset:8px; pointer-events:none; border:1px dashed rgba(57,46,31,.35); }
.panel-heading,.coordinate-grid,.options-grid,.validation,.solution-readout,.primary-button { position:relative; z-index:1; }
.panel-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; padding-bottom:17px; border-bottom:2px solid var(--line); }.target-mode { position:relative; z-index:2; display:flex; align-items:center; gap:16px; margin:16px 0 -7px; padding:0; border:0; }.target-mode legend { margin:0; }.target-mode .radio-row { margin:0; }
.status-lamp { font-size:.82rem; font-weight:700; white-space:nowrap; } .status-lamp i { display:inline-block; width:8px; height:8px; background:#79914a; border-radius:50%; box-shadow:0 0 8px #79914a; margin-right:5px; }
.coordinate-grid { display:grid; grid-template-columns:1fr 45px 1fr; gap:15px; align-items:end; padding:22px 0 8px; }
label>span, legend { display:block; margin-bottom:6px; text-transform:uppercase; font-weight:700; font-size:.95rem; }
input,select { font:700 1rem "Courier New", Courier, monospace; color:var(--ink); width:100%; border:2px solid #756951; border-radius:0; background:#eee4d1; padding:9px 10px; text-transform:uppercase; box-shadow:inset 0 1px 2px rgba(0,0,0,.2); }
input:focus,select:focus { outline:3px solid rgba(160,68,34,.42); border-color:var(--rust); }
.position-entry { display:flex; align-items:stretch; }.position-entry .grid-input { min-width:0; }.grid-input { font-family:"Courier New", Courier, monospace; font-size:1.05rem; letter-spacing:.03em; }.target-direct-control { display:grid; grid-template-columns:1fr 1fr; grid-column:1 / -1; gap:8px; }.target-direct-control input { min-width:0; }.position-picker { --position-x:0%; --position-y:100%; position:relative; flex:0 0 52px; min-height:52px; padding:0; margin-left:-2px; border:2px solid #756951; background-color:#e6dac2; background-image:linear-gradient(90deg, transparent 49%, rgba(89,75,51,.2) 49% 51%, transparent 51%),linear-gradient(transparent 49%, rgba(89,75,51,.2) 49% 51%, transparent 51%); }.position-picker::before { content:""; position:absolute; inset:5px; border:1px solid rgba(89,75,51,.28); }.position-picker i { position:absolute; width:7px; height:7px; left:var(--position-x); top:var(--position-y); border-radius:50%; background:var(--rust); border:1px solid #f4ddaa; transform:translate(-50%,-50%); box-shadow:0 0 0 1px rgba(61,41,22,.55); }.position-picker:not(:disabled):hover { border-color:var(--rust); background-color:#eee0c6; }.position-picker:focus-visible { z-index:1; outline:3px solid rgba(160,68,34,.42); outline-offset:1px; }.position-picker:disabled { cursor:not-allowed; opacity:.42; }.direction-arrow { color:var(--rust); text-align:center; font-size:2rem; line-height:1; padding-bottom:6px; }.helper { color:#5b503f; font-size:.78rem; line-height:1.55; margin:5px 0 20px; }
.options-grid { z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:20px; border-top:1px solid #9c9078; padding-top:18px; }.options-grid>* { min-width:0; } fieldset { margin:0; padding:0; border:0; } legend { margin-bottom:8px; }.radio-row { display:block; margin:7px 0; font-weight:600; cursor:pointer; }.radio-row input { accent-color:var(--rust); width:auto; padding:0; vertical-align:middle; }.radio-row span { display:inline; font-size:1.05rem; text-transform:none; }.charge-buttons { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; }.charge-buttons button { min-width:0; border:1px solid #756951; background:#eee4d1; color:var(--ink); padding:8px 3px; font-size:.78rem; }.charge-buttons button:hover,.charge-buttons button.is-selected { border-color:#71351e; background:#a34a27; color:#f3dfbc; }.shell-control { position:relative; min-width:0; }.shell-control>span { display:block; margin-bottom:6px; text-transform:uppercase; font-weight:700; font-size:.95rem; }.shell-control em { color:#716550; font-style:normal; font-weight:500; }.shell-control>small { display:block; color:#5b503f; margin-top:5px; }.shell-toggle { width:100%; min-width:0; min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:8px; overflow:hidden; color:var(--ink); border:2px solid #756951; background:#eee4d1; padding:6px 10px; text-align:left; text-transform:none; letter-spacing:0; }.shell-toggle:hover,.shell-toggle[aria-expanded="true"] { border-color:var(--rust); }.shell-toggle-label,.shell-option>span { min-width:0; display:flex; align-items:center; gap:7px; }.shell-toggle-label { flex:1; }.shell-toggle-label>span,.shell-option>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.shell-toggle small,.shell-option small { color:#756951; font-size:.72em; }.shell-options { position:absolute; z-index:5; width:100%; max-width:100%; border:2px solid #615640; background:#eee4d1; box-shadow:4px 5px 0 rgba(0,0,0,.25); }.shell-options #shell-search { display:block; border:0; border-bottom:1px solid #9c9078; box-shadow:none; font-size:.8rem; padding:8px 9px; }.shell-options #shell-search:focus { outline:2px solid rgba(160,68,34,.42); outline-offset:-2px; }.shell-options #shell-option-list { max-height:240px; overflow:auto; }.shell-option { width:100%; min-width:0; display:flex; align-items:center; gap:8px; border:0; border-bottom:1px solid #b9ad96; background:transparent; color:var(--ink); padding:6px 9px; font-size:.76rem; text-align:left; text-transform:none; letter-spacing:0; }.shell-option:last-child { border-bottom:0; }.shell-option:hover,.shell-option:focus-visible,.shell-option.is-selected { background:#d5c7aa; }.shell-empty-icon { width:26px; text-align:center; color:#756951; }.shell-icon { flex:0 0 26px; width:26px; height:26px; overflow:visible; }.shell-body { fill:var(--shell-body); stroke:#1d1b16; stroke-width:1.1; }.shell-symbol { fill:var(--shell-accent); stroke:#1d1b16; stroke-width:.8; stroke-linecap:round; stroke-linejoin:round; }
.time-control { position:relative; z-index:1; margin-top:19px; padding-top:16px; border-top:1px solid #9c9078; }.time-control em { color:#716550; font-style:normal; font-weight:500; }.time-control .radio-row { margin:0; }.time-inputs { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; max-width:520px; }.time-entry { position:relative; }.time-entry input { padding-right:39px; }.time-clear { position:absolute; top:2px; right:2px; bottom:2px; width:34px; border:0; border-left:1px solid #a89a80; background:transparent; color:#75533d; font-family:"Courier New", Courier, monospace; font-size:1.25rem; line-height:1; }.time-clear:hover,.time-clear:focus-visible { background:#d8c9a9; color:#942f1b; }.validation { min-height:1.25em; margin:13px 0 0; color:#8a281b; font-weight:700; }.validation:empty { display:none; }
.solution-readout { margin-top:11px; display:grid; grid-template-columns:repeat(5,1fr); background:#25241e; border:3px solid #514b3a; color:var(--paper-light); }.solution-readout div { min-height:115px; padding:13px 14px; border-right:1px solid #736d58; }.solution-readout div:last-child { border:0; }.solution-readout span,.solution-readout small { display:block; text-transform:uppercase; }.solution-readout span { color:#bbb094; font-size:.8rem; font-weight:600; }.solution-readout strong { display:block; color:#f2d487; font-size:2rem; line-height:1; padding:7px 0 4px; }.solution-readout small { color:#9e967e; font-size:.72rem; }
button { cursor:pointer; font-family:"Courier New", Courier, monospace; letter-spacing:.07em; text-transform:uppercase; font-weight:800; }.primary-button { width:100%; margin-top:20px; border:2px solid #552b18; background:var(--rust); color:#f3dfbc; padding:12px 15px; font-size:1rem; box-shadow:inset 0 0 0 2px rgba(255,208,140,.2), 3px 3px 0 #473323; transition:transform .12s,background .12s; }.primary-button:hover { background:#b44d27; transform:translate(-1px,-1px); }.primary-button:active { transform:translate(2px,2px); box-shadow:none; }.primary-button span { float:right; }
.cards-section { margin-top:44px; }.cards-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; border-bottom:2px solid var(--brass); padding-bottom:10px; }.clear-button { color:#c0b69d; border:1px solid #83765e; padding:6px 10px; background:transparent; font-size:.8rem; }.clear-button:hover { color:#f0d68f; border-color:#c69d4d; }.empty-state { color:#a99d85; margin:20px 0; font-family:"Courier New", Courier, monospace; font-size:.78rem; }.card-group { margin-top:23px; }.card-group>h3 { margin:0; color:#c9b37a; font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; }.completed-group>h3 { color:#8c9476; }.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:11px; }.firing-card { position:relative; color:var(--ink); background:var(--paper-light); border:2px solid #8e8068; padding:13px; box-shadow:4px 5px 0 rgba(0,0,0,.38), inset 0 0 0 3px rgba(81,66,42,.14); }.card-number { color:var(--rust); font-size:.75rem; font-weight:800; }.completed-group .card-number { color:#657047; }.firing-card h3 { font-size:1.25rem; margin:3px 0 10px; }.card-shell { display:flex; align-items:center; gap:7px; margin:0 0 10px; color:#63563f; min-height:28px; font-family:"Courier New", Courier, monospace; font-size:.69rem; }.card-shell .shell-icon { flex-basis:30px; width:30px; height:30px; }.card-shell span { min-width:0; }.card-values { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #958870; }.card-values div { padding:7px 0; }.card-values span { display:block; color:#71654f; text-transform:uppercase; font-size:.72rem; font-weight:700; }.card-values strong { font-size:1.02rem; }.card-delete { position:absolute; right:8px; top:7px; background:none; color:#735f50; border:0; padding:4px; font-size:1rem; }.card-delete:hover { color:#9a321b; }.card-done { width:100%; margin-top:4px; border:1px solid #82745b; background:transparent; color:#554a38; padding:6px 8px; font-size:.75rem; }.card-done:hover { border-color:#5f7041; background:#d3d5b8; color:#38401f; }.completed-group .card-done { color:#52603b; }
footer { color:#766c5d; text-align:center; border-top:1px solid #494033; padding:16px; font-size:.72rem; letter-spacing:.13em; }
@media (max-width:620px) { .console-shell { width:min(100% - 22px,1040px); padding-top:28px; }.panel { padding:16px; }.panel-heading { align-items:start; flex-direction:column; gap:4px; }.target-mode { align-items:start; flex-direction:column; gap:6px; }.coordinate-grid { grid-template-columns:1fr 28px 1fr; gap:8px; }.target-direct-control,.time-inputs { grid-template-columns:1fr; }.options-grid { grid-template-columns:1fr; }.charge-buttons button { padding:8px 2px; font-size:clamp(.58rem,2.7vw,.78rem); }.solution-readout { grid-template-columns:1fr 1fr; }.solution-readout div { min-height:92px; }.solution-readout div:nth-child(2),.solution-readout div:nth-child(4) { border-right:0; }.solution-readout div:nth-child(-n+4) { border-bottom:1px solid #736d58; }.solution-readout strong { font-size:1.6rem; } }
@media (max-width:430px) { .coordinate-grid { grid-template-columns:1fr; }.direction-arrow { transform:rotate(90deg); padding:0; }.target-direct-control { grid-column:1; } }