/* Siegework's HUD in the original's palette: warm paper panels, a teal
   accent, round 56px controls with symbols and shortcut letters, readout
   rings colored by what they measure, red alerts and plain dialogs. */
:root { --panel: #fff7e5; --accent: #086b70; --ink: #244550; --muted: #53666b; --warning: #94621f; --danger: #ac4435; --edge: #d6bb83; }
body { color: var(--ink); background: #167ba0; font: 13px/1.4 system-ui, sans-serif; }

.panel { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--edge);
  border-radius: 36px; background: var(--panel); box-shadow: inset 0 1px 0 #fffdf5, 0 3px 0 #b3935666, 0 7px 14px #123d5c2b; }
.label, .dial { background: none; padding: 0 4px; color: var(--ink); }

/* Round buttons: a symbol above the shortcut letter, a price pill below. */
.button { flex-direction: column; justify-content: center; gap: 0; width: 56px; height: 56px; padding: 4px; border: 1px solid #6d9999;
  border-radius: 50%; background: #e8f5ef; color: var(--accent); box-shadow: inset 0 1px 0 #ffffffd9, 0 2px 0 #174a5752; }
.button:hover { background: #f3fbf4; border-color: #3b8180; }
.button:active { background: #cce7de; }
.button[aria-pressed="true"] { color: #fff9e9; background: var(--accent); border-color: #07545d; }
.button:disabled { color: #6c7a78; background: #e8e8dc; border-color: #b2beb3; opacity: 1; }
/* Disabled for now, waiting on energy, work, the network or the first
   extractor: flat blue with faint diagonal lines and a quieter symbol. */
.button:disabled[data-tone="warning"] { color: #3d78a8; border-color: transparent; box-shadow: none;
  background: repeating-linear-gradient(135deg, #dcebf7 0 6px, #c9def0 6px 8px); }
.button:disabled[data-tone="warning"] .icon { filter: saturate(0.6); }
/* The control to use next swells and pulses with a turquoise ring. */
.button:enabled[data-tone="suggested"] { z-index: 1; animation: suggest 0.9s ease-in-out infinite; }
@keyframes suggest {
  50% { transform: scale(1.18); color: #fff9e9; background: #12a189; border-color: #0a7a68;
        box-shadow: 0 0 0 5px #23f2c3cc, 0 0 26px 12px #23f2c3; }
}
/* Disabled because it cannot apply here: faded. */
.button:disabled[data-tone="muted"] { color: #9aa5a3; background: #ecece4; border-color: #cfd5cf; opacity: 0.55; }
.button:disabled[data-tone="muted"] .caption { display: none; }
.button .text { font-size: 11px; font-weight: 750; line-height: 14px; }
.button .caption { position: absolute; bottom: -9px; padding: 0 5px; border-radius: 8px; color: #743aa8; background: #ebdcfa;
  font-size: 10px; font-weight: 750; line-height: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.button[data-icon] .icon { width: 22px; height: 22px; }
.button[data-ring] { background: conic-gradient(#2a9d8f var(--fraction), #e8f5ef 0); }

/* Readout dials: a colored ring around the value, its symbol beneath. */
.dial { flex-direction: column; justify-content: center; gap: 0; width: 56px; height: 56px; padding: 0; border-radius: 50%;
  background: radial-gradient(circle, #fff9ec 60%, transparent 61%), conic-gradient(var(--ring, #4c93c0) var(--fraction), #d9e1d8 0);
  font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dial .icon { order: 2; width: 13px; height: 13px; }
.dial[data-key="energy"] { color: #743aa8; --ring: #a67bd2; }
.dial[data-key="health"] { color: #19734b; --ring: #319665; }
.dial[data-key="health"][data-tone="danger"] { color: var(--danger); --ring: #bc493a; }
.dial[data-key="slots"] { color: #286796; --ring: #4c93c0; }
.dial[data-key="threat"] { color: var(--warning); --ring: #d29a39; }
.dial[data-key="threat"][data-tone="warning"] { color: var(--danger); --ring: #c95a45; }
[data-badge]::after { background: var(--accent); color: #fff9e9; }
.dial[data-key="threat"]::after { top: auto; bottom: -6px; right: auto; background: #f7dfb1; color: #795321; }

/* Construction: four buttons whose captions need room beneath them. */
.panel[data-key="construction"] { gap: 16px; padding-bottom: 16px; }
.label[data-key="divider"] { width: 60%; height: 0; padding: 0; margin: -4px 0; border-top: 2px solid var(--edge); border-radius: 0; }
/* A refusal under the nests: a notice that takes no input. */
.panel[data-key="message"] { max-width: 220px; border-radius: 14px; padding: 8px 14px; border-color: #e3a595; }
/* The opening banner: the title, what to do before the game begins, and
   a link to the guide. */
.panel[data-key="opening"] { max-width: none; border-radius: 22px; padding: 14px 36px 18px; gap: 6px; }
.label[data-key="opening-title"] { color: var(--accent); font-size: min(184px, 11vw); font-weight: 800; letter-spacing: 2px; line-height: 1;
  text-transform: uppercase; }
.label[data-key^="opening-"]:not([data-key="opening-title"]) { font-size: 22px; font-weight: 700; }
.label[data-key^="opening-"] strong { font-weight: 800; }
.label[data-key="opening-crystal"] strong { color: #7b3fd6; }
.label[data-key="opening-build"] strong { color: #12a189; }
.link[data-key="how-to-play"] { margin-top: 6px; padding: 6px 16px; border-radius: 16px; color: #fff9e9; background: var(--accent);
  font-weight: 700; text-decoration: none; }
.link[data-key="how-to-play"]:hover { background: #0a7f85; }
.label[data-key="message"] { color: var(--danger); font-weight: 700; font-size: 11px; line-height: 14px; text-align: center; }
.button[data-key="close"] .text { font-size: 9px; }

/* The queue: small chips, a ring while building, dimmed when unpowered.
   Wider padding centers them under the full-size buttons above. */
.panel[data-key="queue"] { padding: 6px 16px; }
.panel[data-key="queue"] .button { width: 40px; height: 40px; }
.panel[data-key="queue"] .button .icon { width: 18px; height: 18px; }
.button[data-tone="muted"] { color: #6c7a78; background: #e8e8dc; border-style: dashed; }
.button[data-badge="!"]::after { background: var(--danger); }

/* The attack alert under the nests: a red button that throbs while the
   colony is under attack and goes to the latest attack. */
.panel[data-key="alert"] { padding: 6px; border-color: #dd8d75; }
.button[data-key="attack"] { color: #fff; background: #c05545; border-color: #a03f31; animation: alarm 1s ease-in-out infinite; }
.button[data-key="attack"]:hover { background: #cf6451; }
@keyframes alarm { 50% { box-shadow: 0 0 0 4px #c0554555, 0 0 16px 4px #e0775f; } }

/* The nests and the clock. */
.panel[data-key="objective"] { border-radius: 14px; }
.label[data-key="nests"] { color: #d29a39; font-size: 22px; letter-spacing: 3px; }
.label[data-key="elapsed"] { font-weight: 650; font-variant-numeric: tabular-nums; }

/* Dialogs use readable labels and ordinary wide buttons. */
.backdrop { background: #102f438c; }
.dialogs .panel { border-radius: 18px; max-width: 280px; padding: 16px; gap: 8px; align-items: stretch; }
.dialogs .button { width: auto; height: auto; border-radius: 10px; padding: 10px 14px; }
.dialogs .button .text { font-size: 14px; }
.label[data-key$="-title"] { justify-content: center; font-size: 18px; font-weight: 800; text-align: center; }
.label[data-key="results-statistics"] { white-space: pre-line; font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; }
.button[data-key="resume"], .button[data-key="new-map"] { color: #fff9e9; background: var(--accent); border-color: #07545d; }
.button[data-key^="accept-"] { color: #fff9e9; background: var(--danger); border-color: #853b31; }

[data-icon="turn-right"] .icon { transform: scaleX(-1); }

/* Symbols, most from the original game. The recycle symbol is Font Awesome
   Free 6.7.2 (CC BY 4.0), its attribution kept in the embedded SVG. */
[data-icon="energy"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
[data-icon="health"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%205c-3-3-6-1-8%201-2-2-5-4-8-1-4%204%201%209%208%2015%207-6%2012-11%208-15z%22%2F%3E%3C%2Fsvg%3E"); }
[data-icon="slots"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='14' width='18' height='6' rx='1'/%3E%3Crect x='5' y='8' width='14' height='5' rx='1'/%3E%3Cpath d='M9 8V5h6v3'/%3E%3C/svg%3E"); }
[data-icon="threat"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%203%2013%2013m-3%203%206-6M3%204l2%205%203-3zM21%203%208%2016m-3-3%206%206m10-15-2%205-3-3z%22%2F%3E%3C%2Fsvg%3E"); }
[data-icon="pause"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%204v16M17%204v16%22%20stroke-width%3D%224%22%2F%3E%3C%2Fsvg%3E"); }
[data-icon="results"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20V10M12 20V4M18 20v-7'/%3E%3C/svg%3E"); }
[data-icon="turn-left"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10a8 8 0 1 1 1 8M4 3v7h7'/%3E%3C/svg%3E"); }
[data-icon="turn-right"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10a8 8 0 1 1 1 8M4 3v7h7'/%3E%3C/svg%3E"); }
[data-icon="close"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%205%2014%2014M19%205%205%2019%22%2F%3E%3C%2Fsvg%3E"); }
[data-icon="extractor"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2021h14M8%2021l2-13h4l2%2013M7%208h10M12%202v6M4%204l16%204M12%2012l4%204-4%204-4-4z%22%2F%3E%3C%2Fsvg%3E"); }
[data-icon="pylon"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2022V9h10v13M5%209V3h4v3h6V3h4v6zM4%2022h16M10%2013h4m-4%204h4%22%2F%3E%3C%2Fsvg%3E"); }
[data-icon="turret"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2217%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22m7%2013%2011-8%203%204-10%208M4%2022h16m-7-5%205%205%22%2F%3E%3C%2Fsvg%3E"); }
[data-icon="upgrade"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2011%207-7%207%207M12%204v16M5%2020h14%22%2F%3E%3C%2Fsvg%3E"); }
[data-icon="rush"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 6 6 6-6 6M12 6l6 6-6 6'/%3E%3C/svg%3E"); }
[data-icon="cancel"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m8%208%208%208m0-8-8%208%22%2F%3E%3C%2Fsvg%3E"); }
[data-icon="scavenge"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C%21--%21%20Font%20Awesome%20Free%206.7.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20%28Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License%29%20Copyright%202024%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20d%3D%22M174.7%2045.1C192.2%2017%20223%200%20256%200s63.8%2017%2081.3%2045.1l38.6%2061.7%2027-15.6c8.4-4.9%2018.9-4.2%2026.6%201.7s11.1%2015.9%208.6%2025.3l-23.4%2087.4c-3.4%2012.8-16.6%2020.4-29.4%2017l-87.4-23.4c-9.4-2.5-16.3-10.4-17.6-20s3.4-19.1%2011.8-23.9l28.4-16.4L283%2079c-5.8-9.3-16-15-27-15s-21.2%205.7-27%2015l-17.5%2028c-9.2%2014.8-28.6%2019.5-43.6%2010.5c-15.3-9.2-20.2-29.2-10.7-44.4l17.5-28zM429.5%20251.9c15-9%2034.4-4.3%2043.6%2010.5l24.4%2039.1c9.4%2015.1%2014.4%2032.4%2014.6%2050.2c.3%2053.1-42.7%2096.4-95.8%2096.4L320%20448l0%2032c0%209.7-5.8%2018.5-14.8%2022.2s-19.3%201.7-26.2-5.2l-64-64c-9.4-9.4-9.4-24.6%200-33.9l64-64c6.9-6.9%2017.2-8.9%2026.2-5.2s14.8%2012.5%2014.8%2022.2l0%2032%2096.2%200c17.6%200%2031.9-14.4%2031.8-32c0-5.9-1.7-11.7-4.8-16.7l-24.4-39.1c-9.5-15.2-4.7-35.2%2010.7-44.4zm-364.6-31L36%20204.2c-8.4-4.9-13.1-14.3-11.8-23.9s8.2-17.5%2017.6-20l87.4-23.4c12.8-3.4%2026%204.2%2029.4%2017L182%20241.2c2.5%209.4-.9%2019.3-8.6%2025.3s-18.2%206.6-26.6%201.7l-26.5-15.3L68.8%20335.3c-3.1%205-4.8%2010.8-4.8%2016.7c-.1%2017.6%2014.2%2032%2031.8%2032l32.2%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-32.2%200C42.7%20448-.3%20404.8%200%20351.6c.1-17.8%205.1-35.1%2014.6-50.2l50.3-80.5z%22%2F%3E%3C%2Fsvg%3E"); }
[data-icon="repair"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203a6%206%200%200%200-7%208L2%2018a3%203%200%200%200%204%204l7-6a6%206%200%200%200%208-7l-5%204-5-5z%22%2F%3E%3C%2Fsvg%3E"); }
[data-icon="danger"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20zM12 9v5M12 17v.5'/%3E%3C/svg%3E"); }

/* Short screens keep the whole dock in view with smaller controls. */
@media (max-height: 760px) {
  .panel { gap: 6px; padding: 6px; }
  .button, .dial { width: 44px; height: 44px; }
  .button[data-icon] .icon { width: 18px; height: 18px; }
  .dial { font-size: 12px; }
  .panel[data-key="construction"] { gap: 14px; padding-bottom: 14px; }
  .panel[data-key="queue"] { padding: 6px 11px; }
  .panel[data-key="queue"] .button { width: 34px; height: 34px; }
}

@media (max-height: 640px) {
  .button, .dial { width: 38px; height: 38px; }
  .button .text { font-size: 10px; line-height: 12px; }
  .button[data-icon] .icon { width: 16px; height: 16px; }
  .panel[data-key="construction"] { gap: 12px; padding-bottom: 12px; }
  .panel[data-key="queue"] { padding: 6px 8px; }
}

@media (max-width: 760px), (max-height: 640px) {
  .label[data-key="opening-title"] { font-size: min(112px, 11vw); }
  .label[data-key^="opening-"]:not([data-key="opening-title"]) { font-size: 16px; }
}