@charset "utf-8";
/* Construction: hazard stripes, a crane swinging its load, a digger and a truck. */
:root[data-theme="construction"] {
  --bg: #cfd6dc; --panel: #ffffff; --ink: #1f2933; --muted: #5f6b76; --line: #d5dbe0;
  --accent: #f59e0b; --accent-ink: #1f2933; --mover: #fff6e0; --die: #ffffff; --die-edge: #3f4a54;
  --pip: #1f2933; --held: #f59e0b; --field: #ffffff; --good: #2f855a; --bad: #c53030;
  --title: #1f2933; --title-font: "Bungee", "Arial Black", sans-serif; --name-font: "Bungee", "Arial Black", sans-serif;
  --radius: 4px; --mark: "🦺";
  --pattern: linear-gradient(#dbe3ea, #c3ccd4);
}
[data-theme="construction"] body { padding-top: 34px; }
[data-theme="construction"] h1 { font-size: 34px; }
[data-theme="construction"] .card { border: 2px solid #3f4a54; box-shadow: 0 4px 0 #3f4a54; }
[data-theme="construction"] .tray-head .name { font-size: 14px; }
[data-theme="construction"] .tray-head .total { font-size: 22px; color: #d97706; }
[data-theme="construction"] .sheet thead th { font-size: 11px; }
[data-theme="construction"] .sheet tr.total td, [data-theme="construction"] .sheet tr.total th { font-size: 14px; }
[data-theme="construction"] .die:not(.blank) { border-radius: 3px; border-width: 3px; }
[data-theme="construction"] .die.held { box-shadow: 0 0 0 3px var(--held); background: repeating-linear-gradient(-45deg, #fff 0 6px, #fff3d6 6px 12px); }
[data-theme="construction"] button.primary { box-shadow: 0 3px 0 #b45309; font-weight: 700; }
/* Hazard stripes along the top. */
[data-theme="construction"] body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 18px; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg, #f59e0b 0 16px, #1f2933 16px 32px);
}
/* The crane's arm swinging its load. */
[data-theme="construction"] .ambient .a1 { display: block; top: 18px; right: 8%; width: 3px; height: 140px; background: #3f4a54; transform-origin: top center; animation: crane 5s ease-in-out infinite; }
[data-theme="construction"] .ambient .a1::after { content: "🧱"; position: absolute; bottom: -24px; left: -14px; font-size: 28px; }
@keyframes crane { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } }
[data-theme="construction"] .ambient .a2 { display: block; bottom: 8px; left: -70px; font-size: 42px; animation: digger 24s linear infinite 3s; }
[data-theme="construction"] .ambient .a2::before { content: "🚜"; display: inline-block; transform: scaleX(-1); animation: bump .4s ease-in-out infinite; }
@keyframes digger { 0% { transform: translateX(0); } 40%, 100% { transform: translateX(calc(100vw + 140px)); } }
@keyframes bump { 50% { transform: scaleX(-1) translateY(-3px); } }
[data-theme="construction"] .ambient .a3 { display: block; bottom: 8px; right: 2%; font-size: 30px; }
[data-theme="construction"] .ambient .a3::before { content: "🚧"; }