/* Skersvejis Signals — 2006-era Steam client theme. */
:root {
  --ink: #d8dcc8; --muted: #adb49d; --dim: #79806f; --line: #515948;
  --green: #a4b46b; --cyan: #93aaa2; --violet: #aaa0b2;
  --amber: #d48635; --red: #bd6650; --radius: 1px;
}
html { background: #171a16; }
body {
  border-top: 4px solid #768344;
  background: linear-gradient(90deg, transparent 49.8%, #ffffff04 50%, transparent 50.2%), radial-gradient(ellipse at 50% -150px, #58624642, transparent 620px), linear-gradient(#292e27 0, #1d211c 420px, #171a16 100%);
  color: var(--ink); font-family: Tahoma, Verdana, Arial, sans-serif;
}
body::before { z-index: 0; pointer-events: none; opacity: .14; background: repeating-linear-gradient(0deg, transparent 0 3px, #000 4px); mask-image: linear-gradient(#000, transparent 680px); }
.shell { position: relative; width: min(1100px, calc(100% - 32px)); }

.steam-client-bar {
  display: flex; align-items: stretch; min-height: 48px; margin: 18px 0 22px;
  border: 1px solid #10130f; border-top-color: #67705c; border-left-color: #5d6654;
  background: linear-gradient(#444b40, #292e28 55%, #232720 56%);
  box-shadow: inset 0 1px #7a837033, 0 2px 8px #0008;
}
.steam-wordmark { display: flex; align-items: center; padding: 0 18px; border-right: 1px solid #161a15; color: #e5e7da; font: bold 15px/1 Tahoma, Verdana, sans-serif; letter-spacing: .055em; text-shadow: 0 1px #000; }
.steam-wordmark::before { content: ''; width: 13px; height: 13px; margin-right: 9px; border: 2px solid #9fab73; border-radius: 50%; box-shadow: inset 0 0 0 3px #30362d; }
.steam-nav { display: flex; align-items: stretch; }
.steam-nav a { display: flex; align-items: center; padding: 0 15px; border-right: 1px solid #161a15; border-left: 1px solid #51584b55; color: #aeb59f; font-size: 10px; font-weight: bold; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.steam-nav a:hover { background: #59614855; color: #e2e6cf; }
.steam-online { display: flex; align-items: center; gap: 7px; margin-left: auto; padding: 0 14px; color: #aeb788; font-size: 9px; font-weight: bold; letter-spacing: .08em; }
.steam-online i { width: 6px; height: 6px; border: 1px solid #c0ce83; border-radius: 50%; background: #829342; box-shadow: 0 0 5px #a7bf55; }

.section-head { min-height: 34px; margin: 0 0 9px; padding: 0 9px 0 12px; border: 1px solid #11140f; border-top-color: #596151; border-left-color: #535b4b; background: linear-gradient(#3c4339, #292e27); box-shadow: inset 0 1px #737b6922; }
.section-head h2 { color: #d6dac8; font: bold 11px/1 Tahoma, Verdana, sans-serif; letter-spacing: .05em; text-shadow: 0 1px #000; text-transform: uppercase; }
.refresh { border: 1px solid #11140f; border-top-color: #737b68; border-left-color: #68705f; border-radius: 1px; padding: 6px 9px; background: linear-gradient(#4a5145, #30362d); color: #c9ceb9; box-shadow: inset 0 1px #ffffff10; font: bold 9px Tahoma, Verdana, sans-serif; text-transform: uppercase; }
.refresh:hover { background: linear-gradient(#5b654b, #3b4234); color: #fff; }
a:focus-visible, button:focus-visible { outline: 1px dotted #d9a354; outline-offset: 3px; }

.metrics { gap: 10px; }
.metric, .metric[data-metric="radiation"], .metric[data-metric="schumann"], .metric[data-metric="solar_wind"], .metal-card {
  overflow: hidden; border: 1px solid #10130f; border-top-color: #596151; border-left-color: #535b4b; border-radius: 1px;
  background: linear-gradient(135deg, #30362e, #242923 72%); box-shadow: inset 0 1px #69715f20, 0 2px 5px #0006;
}
.metric { padding: 16px; }
.metric::before, .metric[data-metric="radiation"]::before, .metric[data-metric="schumann"]::before, .metal-card::before, .metric::after { display: none; content: none; }
.metric:hover { transform: none; border-color: #687158; }
.metric-top { min-height: 30px; margin: -16px -16px 15px; padding: 0 9px; border-bottom: 1px solid #11140f; background: linear-gradient(#464d41, #32372f); box-shadow: inset 0 1px #ffffff0d; }
.metric-label, .metric[data-metric="schumann"] .metric-label { color: #d8dccb; font: bold 10px/1.2 Tahoma, Verdana, sans-serif; letter-spacing: .035em; text-transform: uppercase; }
.metric-state, .metric[data-metric="schumann"] .metric-state { border: 1px solid #171b15; border-radius: 1px; padding: 3px 5px; background: #252a23; color: #aeb985; font: bold 8px Tahoma, Verdana, sans-serif; text-shadow: 0 1px #000; text-transform: uppercase; }
.metric[data-metric="schumann"] { --accent: var(--green); }
.metric-value { color: #e2e5d5; font-family: Tahoma, Verdana, sans-serif; font-weight: 400; letter-spacing: -.04em; text-shadow: 0 1px #000; }
.metric-unit { color: #a3aa96; font-family: Tahoma, Verdana, sans-serif; }
.metric-detail { color: #aeb5a3; font: 12px/1.55 Tahoma, Verdana, sans-serif; }
.metric-foot { border-top: 1px solid #42493d; padding-top: 9px; color: #818977; font-size: 9px; }
.metric-source, .metal-source { color: #c78b4e; text-decoration: none; }
.metric-source:hover, .metal-source:hover, .gcp-explainer-link:hover { color: #eda75d; text-decoration: underline; }
.sparkline .area { opacity: .1; }

.geiger-console { border-color: #11140f; background: #1d211c; }
.geiger-dial { display: flex; align-items: center; justify-content: center; border: 2px solid #151814; border-top-color: #6c7464; border-radius: 1px; background: linear-gradient(#d2d5c5, #aeb4a2); box-shadow: inset 0 0 8px #30362966; }
.radiation-gauge { display: block; width: 100%; height: auto; max-height: 160px; }
.radiation-arc { fill: none; stroke: #626957; stroke-width: 1; }
.radiation-ticks { stroke: #30362b; stroke-width: 1.2; }
.radiation-labels { fill: #31362d; font: 10px Tahoma, sans-serif; }
.radiation-caption { fill: #555d4c; font: bold 7px Tahoma, sans-serif; letter-spacing: .5px; }
.radiation-needle { visibility: hidden; stroke: #9b3d2c; stroke-width: 2; stroke-linecap: round; transform: rotate(var(--radiation-angle, -180deg)); transform-origin: 120px 120px; transition: transform 900ms ease; }
[data-radiation-valid="true"] .radiation-needle { visibility: visible; }
[data-radiation-overrange="true"] .radiation-caption { fill: #8d251c; font-weight: bold; }
.radiation-hub { fill: #3e4439; stroke: #858d79; stroke-width: 2; }
.geiger-needle, .speedo-needle { background: #9c4532; box-shadow: 0 1px 2px #0005; }
.geiger-hub, .speedo-hub { background: #343a30; border-color: #929b84; box-shadow: 0 2px 4px #0007; }
.geiger-hardware { border-color: #161a15; background: linear-gradient(135deg, #41483d, #262b25); }
.geiger-lamp, .geiger-model { color: #aeb59c; }
.geiger-speaker { background-image: radial-gradient(circle, #11140f 0 1.5px, #6e766544 2px, transparent 2.4px); }

.crt-console { border-color: #11140f; background: linear-gradient(135deg, #4b5346, #2b3028); }
.crt-bezel { background: linear-gradient(145deg, #282d26, #151814); }
.crt-controls, .crt-plate { color: #bdc5ad; }
.crt-plate { border-color: #171a16; background: #30362d; }
.crt-knob { border-color: #171a16; background: repeating-conic-gradient(#242923 0 8deg, #596151 8deg 13deg); }
.crt-knob::after { background: #cbd1bc; }
.crt-screw { background: #7c8471; }
.metric[data-metric="schumann"] .crt-screen { height: auto; min-height: 135px; }
.schumann-history { display: block; width: 100%; height: auto; min-height: 135px; max-height: 200px; }
.schumann-history text { fill: #a8c890; font: 9px Tahoma, sans-serif; }
.schumann-history .history-heading { fill: #b5db96; font-size: 9px; }
.history-grid { stroke: #80a86b; stroke-opacity: .2; stroke-width: .6; }
.history-line { fill: none; stroke: #9fd77e; stroke-width: 1.5; stroke-linejoin: round; }
.history-point { fill: #cbf5aa; stroke: #20371a; stroke-width: .5; }

.wind-speedometer { border: 2px solid #151814; border-top-color: #697160; border-radius: 1px; background: radial-gradient(ellipse at bottom, #d8dccd, #aeb5a5); box-shadow: inset 0 0 10px #3a403666; }
.speedo-track { stroke: #68705f44; }
.speedo-safe { stroke: #667b58; filter: none; }
.speedo-fast { stroke: #a2543b; filter: none; }
.speedo-ticks { stroke: #42483d; }
.speedo-numbers { fill: #343a31; font-family: Tahoma, sans-serif; }
.speedo-caption { color: #555c4d; font-family: Tahoma, sans-serif; }

.gcp-map-shell, .gcp-gauge-shell, .bom-tec-map, .oulu-chart-shell, .solar-week-chart, .moonphase-widget, .astrowin-frame-shell { border-radius: 1px; }
.gcp-map-shell { border-color: #11140f; background: #1a1e19; }
.gcp-map-readout { border: 1px solid #11140f; border-top-color: #69715e; border-radius: 1px; background: linear-gradient(#3e453a, #292e27); color: #cbd0be; font-family: Tahoma, Verdana, sans-serif; box-shadow: 0 2px 5px #0008; }
.gcp-coherence-key, .bom-tec-map, .oulu-chart-shell, .astrowin-frame-shell { border: 1px solid #11140f; box-shadow: 0 1px #626a591f; }
.gcp-gauge-shell { border-color: #11140f; background: linear-gradient(#222720, #181b17); }
.gcp-gauge-value { fill: #d8ddca; font-family: Tahoma, Verdana, sans-serif; }
.gcp-gauge-hub { fill: #3d4439; stroke: #8d967f; }
.gcp-explainer-link { color: #c68a4b; font: 10px Tahoma, Verdana, sans-serif; }

.market-section { margin-top: 24px; }
.market-currency { color: #939a89; font-size: 8px; }
.metal-grid { gap: 10px; }
.metal-card { min-height: 220px; padding: 15px; }
.metal-name { color: #d6dacb; font-family: Tahoma, Verdana, sans-serif; }
.metal-mark { top: 42px; right: 12px; color: #9ca688; font-family: Georgia, serif; opacity: .08; font-size: 50px; }
.metal-price { color: #dfe2d3; font-family: Tahoma, Verdana, sans-serif; font-weight: 400; }
.metal-unit { color: #959d8a; }
.metal-card .metric-foot { font-size: 8px; }

.small-signals { margin-top: 18px; border: 1px solid #11140f; border-top-color: #586050; border-radius: 1px; background: linear-gradient(#30362d, #21251f); box-shadow: inset 0 1px #ffffff0d; }
.tiny:first-child { padding-left: 14px; }
.tiny-label { color: #838b79; }
.tiny-value { color: #c9ceba; }
.moon-image { border-radius: 1px; box-shadow: 0 0 0 1px #11140f; }
.footer { margin-top: 18px; padding-top: 14px; color: #727968; border-top: 1px solid #3e4439; }
.skeleton { background: linear-gradient(90deg, #353c32, #525b49, #353c32); background-size: 200% 100%; }

@media (prefers-reduced-motion: reduce) { .radiation-needle { transition: none; } }
@media (max-width: 580px) {
  .shell { width: calc(100% - 16px); }
  .steam-client-bar { margin: 9px 0 14px; min-height: 42px; }
  .steam-wordmark { padding: 0 10px; font-size: 11px; }
  .steam-wordmark::before { width: 10px; height: 10px; margin-right: 6px; }
  .steam-nav a { padding: 0 8px; font-size: 8px; }
  .steam-online { padding: 0 8px; font-size: 7px; }
  .section-head { gap: 8px; padding-left: 9px; }
  .section-head h2 { font-size: 10px; }
  .refresh { padding: 5px 7px; font-size: 8px; }
  .metric, .metric[data-metric="radiation"], .metric[data-metric="schumann"] { padding: 13px; }
  .metric-top { margin: -13px -13px 13px; padding: 0 7px; }
  .metric-label { font-size: 9px; }
  .metric-state { font-size: 7px; }
  .geiger-console { grid-template-columns: minmax(0, 1fr) 65px; gap: 8px; }
  .crt-console { grid-template-columns: minmax(0, 1fr) 58px; gap: 7px; }
  .market-section .section-head { align-items: center; flex-direction: row; }
  .metal-grid { gap: 7px; }
  .metal-card { padding: 13px; }
  .metal-top { flex-wrap: wrap; }
  .metal-price { font-size: 28px; }
  .tiny { min-width: 0; }
  .tiny:first-child { padding-left: 10px; }
}
@media (max-width: 430px) { .steam-nav a:nth-child(2) { display: none; } .steam-online { letter-spacing: .03em; } }
@media (max-width: 360px) { .steam-nav { display: none; } .metric-top { gap: 6px; } }