:root {
  --bg: #fbf7ef; --panel: #f3ecdf; --ink: #2b2620; --muted: #6b6155; --line: #d9cfbf;
  --accent: #c8572b; --accent-ink: #fff; --good: #2f7d4f; --bad: #b2412b;
  --wood: #b07a43; --wood-dark: #7d532a; --metal: #4c5560; --metal-ink: #fff;
  --box: #e2b866; --sky: #dfe7ea; --fog: #ffffff; --water: #5b8fb0; --balloon: #d9534f;
  --zone: #b9d39c; --fog-map: #dedad3; --skin: #e6b48a; --hat: #f0b429;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1a16; --panel: #29251f; --ink: #f1ebe0; --muted: #b5aa9b; --line: #3d372f;
    --accent: #e0703f; --good: #6cc08c; --bad: #ef7a62; --wood: #a5713d; --wood-dark: #d29c62;
    --metal: #8e99a6; --metal-ink: #111; --box: #c99b45; --sky: #27313a; --fog: #59636b;
    --water: #3f6f8f; --zone: #4f6a3c; --fog-map: #4a4f53; --skin: #c99472; --hat: #d79d1f;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 18px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 480px; margin: 0 auto; padding: 0 16px 32px; }
h1 { margin: 8px 0 12px; font-size: 26px; line-height: 1.2; }
h1:focus { outline: none; }
h2 { margin: 20px 0 8px; font-size: 20px; }
p { margin: 8px 0; }
.lead { font-size: 19px; }
.note { color: var(--muted); font-size: 16px; }
.gain { font-weight: 600; color: var(--good); }
.mistake { border-left: 4px solid var(--bad); padding-left: 10px; }
.good { border-left: 4px solid var(--good); padding-left: 10px; }
.mentor { background: var(--panel); border-radius: 12px; padding: 10px 12px; }

.bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.brand { font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.chip { background: var(--panel); border-radius: 999px; padding: 2px 10px; font-size: 15px; font-weight: 600; }

button { font: inherit; min-height: 48px; padding: 8px 16px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
button[disabled] { opacity: .5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; }
.actions button { flex: 1 1 140px; }
.row { display: flex; gap: 10px; margin-top: 10px; }
.row button { flex: 1; }

.scene { display: block; width: 100%; height: auto; margin: 4px 0; }
.progress { color: var(--muted); font-size: 15px; margin: 0; }
.msg { min-height: 2.9em; font-weight: 600; }
.weights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.weights .w { background: var(--metal); color: var(--metal-ink); border-color: var(--metal); font-weight: 700; font-size: 20px; }
.label { margin: 0 0 6px; color: var(--muted); }
.stepper { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr; gap: 6px; align-items: center; }
.stepper button { padding: 8px 0; font-weight: 700; }
.guess { text-align: center; font-size: 30px; font-weight: 800; background: var(--box); color: #2b2620; border-radius: 10px; padding: 4px 0; }

.cards { display: grid; gap: 10px; }
button.card { text-align: left; line-height: 1.35; }
blockquote.card { margin: 8px 0; padding: 12px; background: var(--panel); border-radius: 12px; font-weight: 600; }
.figure { display: block; width: 96px; height: auto; margin: 0 auto; }
.rules, .steps { padding-left: 24px; }
.rules li, .steps li { margin: 4px 0; }

.board, .box-panel { background: var(--panel); border-radius: 14px; padding: 4px 14px 6px; margin: 12px 0; }
.board h2, .box-panel h2 { margin-top: 10px; }
.shops, .store, .zones { list-style: none; padding: 0; margin: 0; }
.shop { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.shop.off { color: var(--muted); }
.shop-go { grid-row: span 2; text-align: left; font-weight: 700; }
.meter { display: block; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; min-width: 110px; }
.meter > span { display: block; height: 100%; background: var(--good); }
.store li { padding: 2px 0; }
.zones li { padding: 6px 0; border-bottom: 1px solid var(--line); }

/* SVG */
.scene text { font: 600 13px system-ui, sans-serif; fill: var(--ink); }
.weight path { fill: var(--metal); }
.weight text { fill: var(--metal-ink); font-size: 12px; }
.box rect { fill: var(--box); stroke: var(--wood-dark); stroke-width: 2; }
.box-cross { stroke: var(--wood-dark); stroke-width: 1; opacity: .35; }
.box text { fill: #2b2620; font-size: 15px; font-weight: 800; }
.cart rect { fill: var(--wood); }
.cart circle { fill: var(--metal); }
.group { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 3; }
.scene .group-n { font-size: 16px; fill: var(--accent); }
.balloon ellipse { fill: var(--balloon); }
.balloon text { fill: #fff; }
.string { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.plate { stroke: var(--wood-dark); stroke-width: 5; fill: none; stroke-linecap: round; }
.post { stroke: var(--wood-dark); stroke-width: 7; stroke-linecap: round; fill: none; }
.pivot { fill: var(--accent); }
.beam rect { fill: var(--wood); }
.beam, .pan { transition: transform .45s cubic-bezier(.3, 1.4, .6, 1); }
.pan-load { transition: transform .9s ease-in, opacity .9s ease-in; }
.crossed .pan-load { transform: translateX(260px); opacity: 0; }
.ground { stroke: var(--wood-dark); stroke-width: 6; }
.raft { fill: var(--wood); }
.waves { fill: none; stroke: var(--water); stroke-width: 4; animation: wave 3s linear infinite; }
.waves-2 { opacity: .6; animation-duration: 4.5s; }
.bob { animation: bob 3s ease-in-out infinite; }
@keyframes wave { to { transform: translateX(-40px); } }
@keyframes bob { 50% { transform: translateY(3px); } }

.town rect, .town path { fill: var(--line); }
.road { stroke: var(--muted); stroke-width: 4; fill: none; stroke-dasharray: 10 8; }
.bus-body { fill: var(--accent); }
.bus-window { fill: var(--sky); }
.bus-door { fill: var(--wood-dark); }
.wheel { fill: var(--metal); }
.fog ellipse { fill: var(--fog); opacity: .85; }
.map .fog ellipse { fill: var(--fog-map); opacity: .96; }
.drift { animation: drift 8s ease-in-out infinite alternate; }
.lifting { animation: lift 2.4s ease-in .6s forwards; }
@keyframes drift { to { transform: translateX(14px); } }
@keyframes lift { to { opacity: 0; transform: translateY(-30px); } }
.zone circle { fill: var(--zone); stroke: var(--wood-dark); stroke-width: 2; }
.fence-post { fill: var(--wood-dark); }
.board { fill: var(--wood); }
.board.broken { opacity: .55; }
.board.new { fill: #d9a066; }
.skin { fill: var(--skin); }
.hat { fill: var(--hat); }
.figure .body { fill: var(--accent); }
.limb { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; fill: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .lifting { opacity: 0; }
}

/* Constructorul, Taraba, Socotitorul */
.question { font-size: 19px; font-weight: 600; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.keypad button { font-size: 22px; font-weight: 700; }
.typed { display: block; text-align: center; font-size: 30px; font-weight: 800; min-height: 48px; background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 2px 0; }
.scene .dim { font-size: 15px; }
.scene .ask { font-size: 26px; font-weight: 800; fill: var(--accent); }
.shape { fill: var(--zone); stroke: var(--wood-dark); stroke-width: 3; }
.shape.side { fill: var(--box); }
.shape.top { fill: #f0d59a; }
.cut { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 5 4; }
.grid { stroke: var(--wood-dark); stroke-width: 1; opacity: .35; }
.wobble { animation: wobble .5s ease-in-out 2; transform-origin: 50% 90%; transform-box: fill-box; }
@keyframes wobble { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.awning { fill: var(--accent); }
.awning-stripe { fill: var(--bg); opacity: .8; }
.counter { fill: var(--wood); }
.goods { fill: var(--good); }
.tag { fill: var(--bg); stroke: var(--wood-dark); stroke-width: 2; }
.scene .tag-text { font-size: 14px; font-weight: 800; }
.axis { stroke: var(--ink); stroke-width: 2; fill: none; }
.bar { fill: var(--good); }
.ask-bar { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; }
.star-outline { fill: none; stroke: var(--line); stroke-width: 2; }
.star-axis { stroke: var(--line); stroke-width: 1.5; }
.star-fill { fill: var(--accent); opacity: .55; stroke: var(--accent); stroke-width: 2; }
.star .dim { font-size: 12px; }
.star-panel { margin-top: 12px; }
.places { padding-left: 22px; }

/* E5: the Bazar, the orders, the vehicles, the home workshop */
.goods, .orders, .vehicles { list-style: none; padding: 0; margin: 0; }
.good-row, .order, .vehicle { display: grid; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.good-row { grid-template-columns: 1fr auto; }
.good-row .note { grid-column: 1 / -1; margin: 0; font-size: 15px; }
.good-row .row { grid-column: 1 / -1; margin-top: 6px; }
.good-row .row button { padding: 6px 4px; font-size: 16px; }
.order p, .vehicle p { margin: 2px 0; }
.order .actions, .vehicle .actions { margin: 6px 0 0; }
select { font: inherit; min-height: 48px; width: 100%; padding: 6px 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); }
.post output.guess { display: block; margin: 4px 0; }
.chip.trust { background: var(--panel); }
.meter.wear { margin: 6px 0; }
.good-row button.small { min-height: 40px; padding: 4px 12px; font-size: 16px; }
.prof { display: grid; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.prof button { text-align: left; font-weight: 700; }
.prof .note { margin: 0 4px; }

/* Turnul de Știri */
.msg-card { margin: 8px 0; padding: 10px 12px; background: var(--panel); border-left: 4px solid var(--accent); border-radius: 10px; }
.msg-card p { margin: 4px 0; }
.msg-card .from { color: var(--muted); font-size: 15px; font-weight: 600; }
.question { font-weight: 600; }
.options { display: grid; gap: 8px; margin: 10px 0; }
.options.filters { grid-template-columns: 1fr 1fr; }
button.option { text-align: left; line-height: 1.3; }
button.option.right { border-color: var(--good); color: var(--good); font-weight: 700; opacity: 1; }
button.option.wrong { border-color: var(--bad); text-decoration: line-through; }
button.option.picked { border-color: var(--accent); font-weight: 700; opacity: 1; }
.why { border-left: 4px solid var(--good); padding-left: 10px; }
.urmare { border-left: 4px solid var(--accent); padding-left: 10px; font-style: italic; }
.speed { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 15px; }
.speed button[aria-pressed="true"] { border-color: var(--accent); font-weight: 700; }
.signal { margin: 0; font-weight: 600; letter-spacing: .05em; }
.legend { margin: 12px 0; }
.legend summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.legend dt { font-weight: 700; margin-top: 6px; }
.legend dd { margin: 0 0 4px; color: var(--muted); font-size: 16px; }
.antenna .tower { stroke: var(--metal); stroke-width: 4; fill: none; stroke-linecap: round; }
.antenna .tower-top { fill: var(--accent); }
.air-waves { stroke: var(--accent); stroke-width: 3; fill: none; stroke-linecap: round; }
.antenna .path { stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 6; }
.rumour rect { fill: var(--box); stroke: var(--wood-dark); stroke-width: 2; }
.rumour .fold { fill: none; stroke: var(--wood-dark); stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) { .rumour { transition: transform .1s linear; } }
button.option { display: flex; align-items: center; gap: 10px; }
.options.with-pics { grid-template-columns: 1fr 1fr; }
.options.with-pics button.option { flex-direction: column; text-align: center; }
.opt-pic { width: 72px; height: auto; flex: none; }
.timeline { list-style: decimal; margin: 4px 0 8px; padding-left: 28px; min-height: 48px; border-left: 3px dashed var(--line); }
.timeline li { padding: 6px 8px; margin: 4px 0; background: var(--panel); border-radius: 8px; }
.timeline li.right { outline: 2px solid var(--good); }
.timeline li.wrong { outline: 2px solid var(--bad); }
.timeline li.picked { outline: 2px solid var(--accent); }

/* Orașul Vechi: the workshops' pictures */
/* Drumurile: the maps (web/js/ui/pics/drumurile.js). */
.drumurile { --dr-land: #efe6cf; --dr-port: #ece4d2; --dr-munte: #e3e6d6; --dr-departe: #f1e2c8;
  --dr-l0: #cfe3b4; --dr-l1: #e8dd9c; --dr-l2: #d9b170; --dr-l3: #b07f4f;
  --dr-road: #fbf7ef; --dr-road-edge: #b9ab94; --dr-stone: #a59c90; --dr-paper: #fffaf0; --dr-tree: #5f9a4e; }
@media (prefers-color-scheme: dark) {
  .drumurile { --dr-land: #2f2b24; --dr-port: #2b2c2b; --dr-munte: #2a2e28; --dr-departe: #332c22;
    --dr-l0: #34472c; --dr-l1: #55522e; --dr-l2: #6e5531; --dr-l3: #8a6440;
    --dr-road: #4a4339; --dr-road-edge: #6b6155; --dr-stone: #7f786e; --dr-paper: #e9e1d2; --dr-tree: #5d8f4c; }
}
.drumurile-land { fill: var(--dr-land); }
.drumurile-land-port { fill: var(--dr-port); }
.drumurile-land-munte { fill: var(--dr-munte); }
.drumurile-land-departe { fill: var(--dr-departe); }
.drumurile-l0 { fill: var(--dr-l0); }
.drumurile-l1 { fill: var(--dr-l1); }
.drumurile-l2 { fill: var(--dr-l2); }
.drumurile-l3 { fill: var(--dr-l3); }
.drumurile-swatch { stroke: var(--line); stroke-width: 1; }
.drumurile-sea { fill: var(--water); opacity: .75; }
.drumurile-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.drumurile-frame { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.drumurile .drumurile-coord { font-size: 12px; fill: var(--muted); }
.drumurile-road { fill: none; stroke: var(--dr-road-edge); stroke-width: 9; stroke-linecap: round; }
.drumurile-river { fill: none; stroke: var(--water); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.drumurile-mark { fill: var(--ink); }
.drumurile .drumurile-label { font-size: 10px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.drumurile .drumurile-height { font-weight: 600; fill: var(--muted); }
.drumurile .drumurile-legend { font-size: 11px; font-weight: 600; fill: var(--ink); }
.drumurile .drumurile-letter { font-size: 12px; font-weight: 800; fill: var(--ink); }
.drumurile-rose { fill: var(--panel); stroke: var(--muted); stroke-width: 1; }
.drumurile-rose-n { fill: var(--accent); }
.drumurile-ring { fill: none; stroke: var(--accent); stroke-width: 3; }
.drumurile-wind path { fill: none; stroke: var(--water); stroke-width: 6; stroke-linecap: round; opacity: .85; }
.drumurile-wind .drumurile-wind-head { fill: var(--water); stroke: none; }
.drumurile-scale-a { fill: var(--ink); }
.drumurile-scale-b { fill: var(--panel); stroke: var(--ink); stroke-width: 1; }
/* Symbols */
.drumurile-wall { fill: var(--dr-paper); stroke: var(--wood-dark); stroke-width: 1; }
.drumurile-roof { fill: var(--accent); }
.drumurile-wood { fill: var(--wood); stroke: var(--wood-dark); stroke-width: 1; }
.drumurile-stone { fill: var(--dr-stone); stroke: var(--metal); stroke-width: 1; }
.drumurile-water { fill: var(--water); }
.drumurile-paper { fill: var(--dr-paper); stroke: var(--muted); stroke-width: 1; }
.drumurile-light { fill: var(--hat); }
.drumurile-sand { fill: var(--box); }
.drumurile-fish { fill: var(--metal); }
.drumurile-tree { fill: var(--dr-tree); }
.drumurile-meadow { fill: var(--zone); }
.drumurile-skin { fill: var(--skin); }
.drumurile-dark { fill: var(--ink); }
.drumurile-sign { fill: var(--water); }
.drumurile-line, .drumurile-person { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.drumurile-sail { fill: none; stroke: var(--wood-dark); stroke-width: 3; stroke-linecap: round; }
.drumurile-bridge { fill: none; stroke: var(--wood-dark); stroke-width: 3.5; stroke-linecap: round; }
.drumurile-river-line { fill: none; stroke: var(--water); stroke-width: 2.5; stroke-linecap: round; }
.opt-pic.drumurile { display: block; width: 96px; height: auto; margin: 0 auto 4px; }

/* Descifrarea: cards from the hill, tablets from Tolvera, a letter, a note.
   Only existing variables, so the dark theme follows on its own. */
.descifrarea .descifrarea-card { fill: var(--panel); stroke: var(--line); stroke-width: 2; }
.descifrarea .descifrarea-tablet { fill: var(--fog-map); stroke: var(--muted); stroke-width: 2; }
.descifrarea .descifrarea-letter { fill: var(--panel); stroke: var(--wood); stroke-width: 2; }
.descifrarea .descifrarea-note { fill: var(--bg); stroke: var(--line); stroke-width: 2; }
.descifrarea .descifrarea-target { stroke: var(--accent); stroke-dasharray: 6 4; }
.descifrarea .descifrarea-rule { stroke: var(--line); stroke-width: 1; }
.descifrarea .descifrarea-target-line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 4; }
.descifrarea text.descifrarea-label { font: 700 14px system-ui, sans-serif; fill: var(--ink); }
.descifrarea text.descifrarea-ask { font-size: 22px; fill: var(--accent); }
.descifrarea text.descifrarea-q { font: 800 16px system-ui, sans-serif; fill: var(--accent); }
.descifrarea .descifrarea-neg-halo { stroke: var(--bg); stroke-width: 8; stroke-linecap: round; }
.descifrarea .descifrarea-neg { stroke: var(--bad); stroke-width: 4; stroke-linecap: round; }

/* The drawn objects: an ink outline, then each part's colour. */
.descifrarea .descifrarea-thing * { stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.descifrarea .descifrarea-sun, .descifrarea .descifrarea-star, .descifrarea .descifrarea-center { fill: var(--hat); }
.descifrarea .descifrarea-thing .descifrarea-ray { stroke: var(--hat); stroke-width: 3; stroke-linecap: round; }
.descifrarea .descifrarea-wall, .descifrarea .descifrarea-bread { fill: var(--box); }
.descifrarea .descifrarea-roof, .descifrarea .descifrarea-apple { fill: var(--bad); }
.descifrarea .descifrarea-door { fill: var(--wood-dark); }
.descifrarea .descifrarea-fish { fill: var(--water); }
.descifrarea .descifrarea-eye, .descifrarea .descifrarea-spot { fill: var(--ink); stroke: none; }
.descifrarea .descifrarea-trunk, .descifrarea .descifrarea-hull { fill: var(--wood); }
.descifrarea .descifrarea-leaf { fill: var(--good); }
.descifrarea .descifrarea-sail, .descifrarea .descifrarea-cow { fill: var(--fog); }
.descifrarea .descifrarea-key { fill: var(--metal); }
.descifrarea .descifrarea-hole { fill: var(--panel); }
.descifrarea .descifrarea-cat { fill: var(--hat); }
.descifrarea .descifrarea-petal { fill: var(--accent); }
.descifrarea .descifrarea-thing .descifrarea-mast, .descifrarea .descifrarea-thing .descifrarea-cut,
.descifrarea .descifrarea-thing .descifrarea-stem { fill: none; stroke: var(--wood-dark); stroke-width: 2; stroke-linecap: round; }
.descifrarea .descifrarea-thing .descifrarea-tail { fill: none; stroke: var(--hat); stroke-width: 3; stroke-linecap: round; }
.descifrarea .descifrarea-thing .descifrarea-green { fill: none; stroke: var(--good); stroke-width: 2.5; }

/* An option that is a drawing sits above its word. */
.opt-pic.descifrarea { display: block; width: 72px; height: 54px; margin: 0 auto 2px; }

/* Muzeul (Orașul Vechi): the objects of band 0, drawn in web/js/ui/pics/muzeul.js. */
.opt-pic.muzeul { display: block; width: 72px; height: 72px; margin: 0 auto 4px; --muzeul-dark: #3a332b; }
.opt-pic.muzeul * { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.muzeul-line, .muzeul-wheel, .muzeul-frame, .muzeul-band { fill: none; }
.muzeul-wheel { stroke-width: 3; }
.muzeul-frame { stroke: var(--accent); stroke-width: 4; }
.muzeul-band { stroke-width: 6; }
.muzeul-paper { fill: var(--panel); }
.muzeul-wood { fill: var(--wood); }
.muzeul-metal { fill: var(--metal); }
.muzeul-gold { fill: var(--box); }
.muzeul-flame { fill: var(--hat); }
.muzeul-glass { fill: var(--sky); }
.muzeul-red { fill: var(--accent); }
.muzeul-blue { fill: var(--water); }
.muzeul-zone { fill: var(--zone); }
.muzeul-stone { fill: var(--fog-map); }
.muzeul-fog { fill: var(--fog); }
.muzeul-bw { fill: var(--line); }
.muzeul-gray { fill: var(--muted); }
.muzeul-dark { fill: var(--muzeul-dark); }
.opt-pic.muzeul .muzeul-digits { fill: none; stroke: var(--good); stroke-width: 3; }
.opt-pic.muzeul .muzeul-dot { fill: var(--good); stroke: none; }
.opt-pic.muzeul .muzeul-dash { fill: none; stroke: var(--hat); stroke-width: 3; }
@media (prefers-color-scheme: dark) {
  .opt-pic.muzeul { --muzeul-dark: #12100d; }
}


/* Restauratorul (Orașul Vechi). The palette c1-c6: roșu, portocaliu, galben
   (calde), verde, albastru, violet (reci). Each colour has its own mark
   (pictures/restauratorul.js), so colour is never the only cue. */
.scene.restauratorul, .opt-pic.restauratorul {
  --rest-c1: #c8372d; --rest-c2: #e07b22; --rest-c3: #e8c22e;
  --rest-c4: #3f8f4a; --rest-c5: #2f64b0; --rest-c6: #7b4fa6;
  --rest-mark-light: #ffffff; --rest-mark-dark: #2b2620;
  --rest-plaster: #efe3cc; --rest-wall: #cdb999; --rest-wool: #ead9bb; --rest-egg: #f6ecd9;
  --rest-house: #f4ecd8; --rest-ground: #cfe0b4; --rest-hill: #a9c98a; --rest-canvas: #f7f3ea;
  --rest-ink-fixed: #2b2620;
}
@media (prefers-color-scheme: dark) {
  .scene.restauratorul, .opt-pic.restauratorul {
    --rest-c1: #e05a4f; --rest-c2: #f0923d; --rest-c3: #f2d04f;
    --rest-c4: #5cad66; --rest-c5: #5a8ad6; --rest-c6: #a07ccc;
    --rest-mark-light: #ffffff; --rest-mark-dark: #1d1a16;
    --rest-plaster: #5a5044; --rest-wall: #3f372e; --rest-wool: #5b4a36; --rest-egg: #6a5f50;
    --rest-house: #8a7f6c; --rest-ground: #3e5530; --rest-hill: #4f6a3c; --rest-canvas: #e9e3d6;
  }
}
.opt-pic.restauratorul { display: block; width: 96px; height: auto; margin: 0 auto 4px; }

/* The palette: fill, and the mark in a colour that stands out on it. */
.restauratorul-c1 .restauratorul-fill { fill: var(--rest-c1); }
.restauratorul-c2 .restauratorul-fill { fill: var(--rest-c2); }
.restauratorul-c3 .restauratorul-fill { fill: var(--rest-c3); }
.restauratorul-c4 .restauratorul-fill { fill: var(--rest-c4); }
.restauratorul-c5 .restauratorul-fill { fill: var(--rest-c5); }
.restauratorul-c6 .restauratorul-fill { fill: var(--rest-c6); }
.restauratorul-c1 .restauratorul-mark, .restauratorul-c4 .restauratorul-mark,
.restauratorul-c5 .restauratorul-mark, .restauratorul-c6 .restauratorul-mark { fill: var(--rest-mark-light); stroke: var(--rest-mark-light); }
.restauratorul-c2 .restauratorul-mark, .restauratorul-c3 .restauratorul-mark { fill: var(--rest-mark-dark); stroke: var(--rest-mark-dark); }
.restauratorul-trasa, .restauratorul-inel { fill: none; }
.restauratorul-tile .restauratorul-fill { stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.restauratorul-pata .restauratorul-fill { stroke: var(--ink); stroke-width: .8; }

/* What the Fog wiped. */
.restauratorul-gap rect, .restauratorul-gap circle, .restauratorul-sters rect { fill: var(--fog-map); stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.scene.restauratorul .restauratorul-gap text, .scene.restauratorul .restauratorul-sters text { fill: var(--muted); font-weight: 800; font-size: 16px; }
.scene.restauratorul .restauratorul-sters text { font-size: 26px; }
.restauratorul-axa { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; fill: none; }
.restauratorul-grila { stroke: var(--line); stroke-width: 1; fill: none; }
.restauratorul-brau { fill: var(--bg); stroke: var(--line); stroke-width: 1; }
.scene.restauratorul circle.restauratorul-brau { fill: none; stroke: var(--bg); }
.restauratorul-chenar-mic { fill: none; stroke: var(--line); stroke-width: 1.5; }

/* Walls, objects, frames. */
.restauratorul-zid { fill: var(--rest-wall); }
.restauratorul-rost { stroke: var(--wood-dark); stroke-width: 1; opacity: .35; fill: none; }
.restauratorul-tencuiala { fill: var(--rest-plaster); }
.restauratorul-crapatura { stroke: var(--wood-dark); stroke-width: 1.2; fill: none; opacity: .6; }
.restauratorul-covor { fill: var(--rest-wool); stroke: var(--wood-dark); stroke-width: 2; }
.restauratorul-chenar { fill: none; stroke: var(--wood-dark); stroke-width: 3; }
.restauratorul-zigzag { fill: none; stroke: var(--wood-dark); stroke-width: 2; stroke-linejoin: round; }
.restauratorul-franjuri { stroke: var(--wood); stroke-width: 2; fill: none; }
.restauratorul-ou { fill: var(--rest-egg); }
.restauratorul-contur { fill: none; stroke: var(--wood-dark); stroke-width: 2; }
.restauratorul-farfurie { fill: var(--panel); stroke: var(--line); stroke-width: 3; }
.restauratorul-fund { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; }
.restauratorul-fereastra { fill: var(--metal); }
.restauratorul-sticla { fill: var(--sky); }
.restauratorul-rama { fill: var(--wood-dark); }
.restauratorul-panza { fill: var(--rest-canvas); }
.restauratorul-scandura { fill: var(--wood); }
.restauratorul-fibra { stroke: var(--wood-dark); stroke-width: 1.5; fill: none; opacity: .5; }
.restauratorul-rost-mozaic { fill: var(--line); }

/* Scenes. */
.restauratorul-cer { fill: var(--sky); }
.restauratorul-deal { fill: var(--rest-hill); }
.restauratorul-pamant { fill: var(--rest-ground); }
.restauratorul-casa { fill: var(--rest-house); stroke: var(--wood-dark); stroke-width: 2; }
.restauratorul-acoperis { fill: var(--accent); stroke: var(--wood-dark); stroke-width: 2; }
.restauratorul-usa { fill: var(--wood-dark); }
.restauratorul-geam { fill: var(--sky); stroke: var(--wood-dark); stroke-width: 1.5; }
.restauratorul-trunchi { fill: var(--wood); }
.restauratorul-coroana { fill: var(--good); }
.restauratorul-piatra { fill: var(--metal); }
.restauratorul-aripi { stroke: var(--wood-dark); stroke-width: 5; stroke-linecap: round; fill: none; }
.restauratorul-cruce-linie { stroke: var(--wood-dark); stroke-width: 2.5; fill: none; }

/* The marks of a fresco and of an abstract painting. */
.restauratorul-aureola { fill: var(--hat); }
.restauratorul-fata { fill: var(--skin); }
.restauratorul-haina { fill: var(--water); }
.restauratorul-cazut { fill: var(--rest-wall); stroke: var(--wood-dark); stroke-width: 1; }
.restauratorul-tusa { stroke: var(--rest-ink-fixed); stroke-width: 7; stroke-linecap: round; fill: none; }

/* Proiectul comun (Primăria): band 1's buildings and band 3's plans,
   drawn in web/js/ui/pics/proiectul-comun.js. A job already done has a
   check mark as well as its colour, so colour is never the only cue. */
.scene.proiectul-comun { --pc-azi: #f6e3b4; --pc-bar: #e7b46a; --pc-wall: #efe2c8; --pc-roof: #b2412b; }
@media (prefers-color-scheme: dark) {
  .scene.proiectul-comun { --pc-azi: #3d3424; --pc-bar: #a67a36; --pc-wall: #4a4236; --pc-roof: #a8452f; }
}
.scene.proiectul-comun * { stroke-linejoin: round; stroke-linecap: round; }
.proiectul-comun-sky { fill: var(--sky); }
.proiectul-comun-ground { fill: var(--zone); }
.proiectul-comun-water { fill: var(--water); }
.proiectul-comun-wave { fill: none; stroke: var(--fog); stroke-width: 2; opacity: .7; }
.proiectul-comun-tree { fill: var(--good); stroke: var(--ink); stroke-width: 1.2; }
.proiectul-comun-stone { fill: var(--fog-map); stroke: var(--ink); stroke-width: 1.5; }
.proiectul-comun-wood { fill: var(--wood); stroke: var(--ink); stroke-width: 1.2; }
.proiectul-comun-wood-dark { fill: var(--wood-dark); }
.proiectul-comun-roof { fill: var(--pc-roof); stroke: var(--ink); stroke-width: 1.5; }
.proiectul-comun-wall { fill: var(--pc-wall); stroke: var(--ink); stroke-width: 1.5; }
.proiectul-comun-glass { fill: var(--sky); stroke: var(--ink); stroke-width: 1.5; }
.proiectul-comun-metal { fill: var(--metal); stroke: var(--ink); stroke-width: 1.2; }
.proiectul-comun-line { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .55; }
.proiectul-comun-rope { fill: none; stroke: var(--wood-dark); stroke-width: 2; }

/* The plan. */
.proiectul-comun-paper { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.proiectul-comun-azi { fill: var(--pc-azi); }
.proiectul-comun-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.proiectul-comun-bar { fill: var(--pc-bar); stroke: var(--wood-dark); stroke-width: 1.5; }
.proiectul-comun-bar-gata { fill: var(--good); stroke: var(--good); stroke-width: 1.5; opacity: .85; }
.proiectul-comun-check { fill: none; stroke: var(--bg); stroke-width: 3; }
.proiectul-comun-termen { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 4; }
.proiectul-comun-flag { fill: var(--accent); }
.proiectul-comun-flag-pole { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.scene.proiectul-comun text.proiectul-comun-title { font: 700 14px system-ui, sans-serif; fill: var(--ink); }
.scene.proiectul-comun text.proiectul-comun-day { font: 600 12px system-ui, sans-serif; fill: var(--muted); }
.scene.proiectul-comun text.proiectul-comun-day-azi { font: 800 12px system-ui, sans-serif; fill: var(--ink); }
.scene.proiectul-comun text.proiectul-comun-day-termen { font: 800 12px system-ui, sans-serif; fill: var(--accent); }
.scene.proiectul-comun text.proiectul-comun-label { font: 600 12px system-ui, sans-serif; fill: var(--ink); }
.scene.proiectul-comun text.proiectul-comun-termen-text { font: 700 12px system-ui, sans-serif; fill: var(--accent); }
/* Legile orașului (Primăria): the votes of bands 0 and 1, drawn in web/js/ui/pics/legile-orasului.js.
   Every colour is an existing :root variable, so dark mode follows on its own; the four marks also
   differ in shape (circle, triangle, square, diamond). */
.scene.legile-orasului .legile-orasului-eticheta { font-size: 13px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.scene.legile-orasului .legile-orasului-legenda-text,
.scene.legile-orasului .legile-orasului-rand { font-size: 12px; font-weight: 700; fill: var(--ink); }
.scene.legile-orasului .legile-orasului-numar { font-size: 12px; font-weight: 700; fill: var(--muted); }
.scene.legile-orasului .legile-orasului-jumatate-text { font-size: 11px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.legile-orasului-panou { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.legile-orasului-piele { fill: var(--skin); stroke: var(--wood-dark); stroke-width: .6; }
.legile-orasului-maneca { fill: var(--water); }
.legile-orasului-hartie { fill: var(--bg); stroke: var(--muted); stroke-width: 1.2; }
.legile-orasului-semn { stroke: var(--ink); stroke-width: 1; }
.legile-orasului-m0 { fill: var(--accent); }
.legile-orasului-m1 { fill: var(--water); }
.legile-orasului-m2 { fill: var(--good); }
.legile-orasului-m3 { fill: var(--hat); }
.legile-orasului-jumatate { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 4; }
/* Roboții (Garajul): the map drawn in web/js/ui/robotii.js, the palette of blocks and the program.
   Colours are the :root variables, so dark mode follows; obstacles also carry a cross, the flag a
   pole, the robot a pointed front, and the running and failing blocks a marker, so nothing is told
   by colour alone. */
.scene.robotii { margin: 6px auto; }
.robotii-road { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.robotii-wall { fill: var(--line); }
.robotii-wall-mark { fill: none; stroke: var(--muted); stroke-width: 2; opacity: .6; }
.robotii-target { fill: none; stroke: var(--good); stroke-width: 2.5; stroke-dasharray: 5 3; }
.robotii-pole { fill: none; stroke: var(--ink); stroke-width: 2; }
.robotii-flag { fill: var(--accent); }
.robotii-sign rect { fill: var(--wood); stroke: var(--wood-dark); stroke-width: 1.2; }
.scene.robotii .robotii-sign text { font: 800 12px system-ui, sans-serif; fill: var(--accent-ink); }
.robotii-sign-arrow { fill: none; stroke: var(--accent-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.robotii-cargo rect { fill: var(--box); stroke: var(--wood-dark); stroke-width: 1.5; }
.robotii-cargo path { fill: none; stroke: var(--wood-dark); stroke-width: 1; opacity: .5; }
.robotii-body { fill: var(--metal); stroke: var(--ink); stroke-width: 1.2; }
.robotii-front { fill: var(--accent); stroke: var(--ink); stroke-width: 1; }
.robotii-eye { fill: var(--metal-ink); }
.robotii-days { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.robotii-days button, .robotii-slot button { min-height: 44px; padding: 4px 12px; font-size: 16px; }
.robotii-days button[aria-pressed="true"] { border-color: var(--accent); font-weight: 700; }
.robotii-days button[aria-pressed="true"]::before { content: "● "; }
.robotii-task .question { font-size: 17px; }
.robotii-count { margin: 0 0 6px; color: var(--muted); font-size: 16px; }
.robotii-count.robotii-over { color: var(--bad); font-weight: 700; }
.robotii-program { background: var(--panel); border-radius: 12px; padding: 6px 8px; margin: 4px 0 8px; }
.robotii-program .note { margin: 6px 4px; }
.robotii-list { list-style: none; margin: 0; padding: 0 0 0 16px; }
.robotii-list.robotii-top { padding-left: 0; }
.robotii-line { margin: 4px 0; }
.robotii-label { display: block; padding: 6px 8px; border-radius: 8px; background: var(--bg); border: 2px solid var(--line); font-size: 16px; line-height: 1.3; }
.robotii-box > .robotii-label { font-weight: 700; border-color: var(--metal); }
.robotii-box > .robotii-list { border-left: 3px solid var(--metal); margin: 2px 0 2px 8px; padding-left: 10px; }
.robotii-else { margin-top: 4px; }
.robotii-label.robotii-now { border-color: var(--accent); }
.robotii-label.robotii-now::before { content: "▶ "; color: var(--accent); }
.robotii-label.robotii-bad { border-color: var(--bad); }
.robotii-label.robotii-bad::before { content: "⚠ "; color: var(--bad); }
.robotii-cursor { margin: 4px 0; padding: 6px 8px; border: 2px dashed var(--accent); border-radius: 8px; color: var(--accent); font-weight: 700; font-size: 15px; }
.robotii-slot { margin: 4px 0; }
.robotii-slot button { width: 100%; text-align: left; border-style: dashed; background: transparent; color: var(--muted); }
.robotii-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.robotii-tools button[data-t="run"] { grid-column: 1 / -1; }
.robotii-palette, .robotii-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 12px; }
.robotii-choices.robotii-counts { grid-template-columns: repeat(3, 1fr); }
.robotii-palette button, .robotii-choices button { min-height: 48px; padding: 6px 8px; font-size: 16px; line-height: 1.25; text-align: left; }
.robotii-choices.robotii-counts button { text-align: center; }
button.robotii-blk-box { border-color: var(--metal); font-weight: 700; }
.robotii-shown .robotii-program { margin-top: 0; }
.robotii-palette[hidden], .robotii-params[hidden], .robotii-blocks[hidden] { display: none; }
/* Drona (Garajul): the maps, the drone and the programs, drawn in web/js/ui/pics/drona.js.
   The grounds and a few things have their own light and dark values; everything else is an
   existing :root variable, so dark mode follows on its own. Obstacles, the package and the
   platform differ in shape as well as colour. */
.drona { --drona-iarba: #cfe3b4; --drona-acoperis: #efcfb4; --drona-apa: #b9d4e4; --drona-podea: #eadcc4;
  --drona-livada: #dfe5c0; --drona-munte: #e3e6dc; --drona-frunze: #4f8f45; --drona-brad: #3d7a4a;
  --drona-caramida: #b5653f; --drona-lada: #d9a95b; --drona-raft: #c79a63; --drona-galben: #e0a52a;
  --drona-panza: #fffaf0; --drona-cort: #d8664a; --drona-zmeu: #d9534f; --drona-banda: #7d532a; }
@media (prefers-color-scheme: dark) {
  .drona { --drona-iarba: #34472c; --drona-acoperis: #4f372b; --drona-apa: #2b4859; --drona-podea: #3e352a;
    --drona-livada: #3a4229; --drona-munte: #33372f; --drona-frunze: #6cad5f; --drona-brad: #5d9a68;
    --drona-caramida: #c27a55; --drona-lada: #b98c45; --drona-raft: #a77d4c; --drona-galben: #d79d1f;
    --drona-panza: #e9e1d2; --drona-cort: #e0805f; --drona-zmeu: #ef7a62; --drona-banda: #4a3216; }
}
.drona-fond-iarba { fill: var(--drona-iarba); }
.drona-fond-acoperis { fill: var(--drona-acoperis); }
.drona-fond-apa { fill: var(--drona-apa); }
.drona-fond-podea { fill: var(--drona-podea); }
.drona-fond-livada { fill: var(--drona-livada); }
.drona-fond-munte { fill: var(--drona-munte); }
.drona-linie { fill: none; stroke: var(--line); stroke-width: 1; }
.drona-rama { fill: none; stroke: var(--muted); stroke-width: 1.5; }

.drona-pad { fill: var(--panel); stroke: var(--muted); stroke-width: 1.5; }
.drona-pad-inel { fill: none; stroke: var(--accent); stroke-width: 2; }
.drona-brat { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.drona-elice { fill: var(--sky); stroke: var(--ink); stroke-width: 1.4; }
.drona-corp { fill: var(--accent); stroke: var(--ink); stroke-width: 1.2; }
.drona-cutie { fill: var(--box); stroke: var(--wood-dark); stroke-width: 1.5; }
.drona-banda { fill: none; stroke: var(--drona-banda); stroke-width: 1.5; }

.drona-lemn { fill: var(--wood-dark); }
.drona-lemn-plin { fill: var(--wood); stroke: var(--wood-dark); stroke-width: 1; }
.drona-frunze { fill: var(--drona-frunze); }
.drona-brad { fill: var(--drona-brad); }
.drona-fruct { fill: var(--balloon); }
.drona-caramida { fill: var(--drona-caramida); stroke: var(--wood-dark); stroke-width: 1; }
.drona-capac { fill: var(--metal); }
.drona-rost { fill: none; stroke: var(--wood-dark); stroke-width: 1; }
.drona-metal { fill: var(--metal); }
.drona-val { fill: none; stroke: var(--water); stroke-width: 1.5; stroke-linecap: round; }
.drona-raft { fill: var(--drona-raft); stroke: var(--wood-dark); stroke-width: 1.2; }
.drona-polita { fill: none; stroke: var(--wood-dark); stroke-width: 1.5; }
.drona-zmeu { fill: var(--drona-zmeu); stroke: var(--ink); stroke-width: 1; }
.drona-fir { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.drona-galben { fill: var(--drona-galben); stroke: var(--wood-dark); stroke-width: .8; }
.drona-panza { fill: var(--drona-panza); stroke: var(--muted); stroke-width: 1; }
.drona-lada { fill: var(--drona-lada); stroke: var(--wood-dark); stroke-width: 1.2; }
.drona-scara { fill: none; stroke: var(--wood-dark); stroke-width: 2.2; stroke-linecap: round; }
.drona-cort { fill: var(--drona-cort); stroke: var(--wood-dark); stroke-width: 1; }
.drona-usa { fill: var(--ink); opacity: .55; }

.drona-semn-inel { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.scene.drona .drona-litera, .opt-pic.drona .drona-litera { font: 800 12px system-ui, sans-serif; fill: var(--ink); text-anchor: middle; }
.drona-x-linie { fill: none; stroke: var(--bad); stroke-width: 3.5; stroke-linecap: round; }
.drona-ales-rama { fill: var(--bg); fill-opacity: .55; stroke: var(--accent); stroke-width: 2.5; }

.scene.drona .drona-nr, .opt-pic.drona .drona-nr { font: 700 11px system-ui, sans-serif; fill: var(--muted); }
.scene.drona .drona-cod, .opt-pic.drona .drona-cod { font: 700 11px system-ui, sans-serif; fill: var(--ink); }
.scene.drona .drona-intrebare { font: 800 13px system-ui, sans-serif; fill: var(--bad); text-anchor: middle; }
.scene.drona .drona-ziua { font: 700 12px system-ui, sans-serif; fill: var(--ink); text-anchor: middle; }
.drona-sageata-linie { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.drona-gol { fill: none; stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 3 3; }
.drona-card { fill: var(--bg); stroke: var(--line); stroke-width: 1; }

.opt-pic.drona { display: block; width: 96px; height: auto; margin: 0 auto 4px; }
.opt-pic.drona-opt-sageata { width: 64px; }
.opt-pic.drona-opt-program { width: 100%; max-width: 150px; }
/* Atelierul de mașini (Garajul): levers, pulleys, circuits and testers, drawn in web/js/ui/pics/masini.js.
   Every colour is an existing :root variable, so dark mode follows on its own. The rope parts that hold
   a load look like every other rope part, so the picture never gives the count away. */
.scene.masini text { font: 700 12px system-ui, sans-serif; fill: var(--ink); text-anchor: middle; }
.scene.masini .masini-litera { font-size: 14px; font-weight: 800; fill: var(--accent); }
.scene.masini .masini-numar { font-size: 11px; font-weight: 700; fill: var(--muted); }
.scene.masini .masini-nume { font-size: 12px; font-weight: 700; fill: var(--ink); }
.scene.masini .masini-plus-minus { font-size: 16px; font-weight: 800; fill: var(--ink); }
.scene.masini .masini-gol-text { font-size: 18px; font-weight: 800; fill: var(--muted); }
.scene.masini .masini-material { font-size: 13px; font-weight: 700; fill: var(--ink); }
.masini-sol { fill: none; stroke: var(--line); stroke-width: 2; }
.masini-patrat, .masini-scandura { fill: var(--wood); stroke: var(--wood-dark); stroke-width: 1.2; }
.masini-loc { fill: var(--wood-dark); }
.masini-sprijin { fill: var(--metal); }
.masini-sprijin-posibil { fill: none; stroke: var(--metal); stroke-width: 2; stroke-dasharray: 4 3; }
.masini-lada { fill: var(--box); stroke: var(--wood-dark); stroke-width: 1.5; }
.masini-lada-cruce { fill: none; stroke: var(--wood-dark); stroke-width: 1; opacity: .4; }
.masini-lada-necunoscuta { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 3; }
.masini-semn { fill: var(--accent); }
.masini-sageata-linie { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.masini-sageata-varf { fill: var(--accent); }
.masini-cap { fill: var(--skin); stroke: var(--wood-dark); stroke-width: .8; }
.masini-corp { fill: var(--water); }
.masini-grinda { fill: var(--wood-dark); }
.masini-funie { fill: none; stroke: var(--hat); stroke-width: 2.5; stroke-linecap: round; }
.masini-scripete { fill: var(--panel); stroke: var(--metal); stroke-width: 2.5; }
.masini-ax, .masini-bloc { fill: var(--metal); }
.masini-agatatoare { fill: none; stroke: var(--metal); stroke-width: 2.5; }
.masini-mana { fill: var(--skin); stroke: var(--wood-dark); stroke-width: 1; }
.masini-sac { fill: var(--wood); stroke: var(--wood-dark); stroke-width: 1.5; }
.masini-cos { fill: var(--box); stroke: var(--wood-dark); stroke-width: 1.5; }
.masini-cos-impletit { fill: none; stroke: var(--wood-dark); stroke-width: 1; }
.masini-fir { fill: none; stroke: var(--metal); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.masini-capat { fill: var(--ink); }
.masini-baterie { fill: var(--good); stroke: var(--ink); stroke-width: 1.2; }
.masini-baterie-cap { fill: var(--metal); stroke: var(--ink); stroke-width: 1; }
.masini-bec-sticla { fill: var(--fog); stroke: var(--muted); stroke-width: 1.5; }
.masini-bec-filament { fill: none; stroke: var(--wood-dark); stroke-width: 1.5; stroke-linejoin: round; }
.masini-bec-soclu { fill: var(--metal); }
.masini-intrerupator { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.masini-intrerupator-baza { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.masini-cadru { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linejoin: round; }
.masini-clema { fill: var(--metal); }
.masini-gol { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.masini-rampa, .masini-bustean { fill: var(--wood); stroke: var(--wood-dark); stroke-width: 1.5; }
.masini-crapatura { fill: none; stroke: var(--wood-dark); stroke-width: 2; }
.masini-pana { fill: var(--metal); stroke: var(--ink); stroke-width: 1; }
.masini-surub-cap, .masini-surub-tija { fill: var(--metal); stroke: var(--ink); stroke-width: 1; }
.masini-filet { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.opt-pic.masini { display: block; width: 72px; height: 54px; margin: 0 auto 4px; }
/* Lacătul (Garajul): band 4's messages on a phone screen and band 3's
   permission icons, drawn in web/js/ui/pics/lacatul.js. The button of a
   message has its words on it, so colour is never the only cue. */
.scene.lacatul { max-width: 360px; margin-left: auto; margin-right: auto; }
.lacatul-phone { fill: var(--metal); }
.lacatul-speaker, .lacatul-home { fill: var(--line); }
.lacatul-screen { fill: var(--bg); }
.lacatul-head { fill: var(--panel); }
.lacatul-bubble { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.lacatul-btn { fill: var(--accent); }
.scene.lacatul .lacatul-from { font-size: 12px; fill: var(--muted); }
.scene.lacatul .lacatul-line { font-size: 13px; fill: var(--ink); }
.scene.lacatul .lacatul-btn-text { font-size: 14px; font-weight: 800; fill: var(--accent-ink); }
.opt-pic.lacatul { display: block; width: 64px; height: auto; margin: 0 auto 4px; }
.opt-pic.lacatul * { stroke-linejoin: round; stroke-linecap: round; }
.lacatul-icon-fill { fill: var(--water); stroke: var(--ink); stroke-width: 2.5; }
.lacatul-icon-hole { fill: var(--bg); stroke: var(--ink); stroke-width: 2.5; }
.lacatul-icon { fill: none; stroke: var(--ink); stroke-width: 4; }
.lacatul-no { fill: none; stroke: var(--bad); stroke-width: 6; }
/* Restaurarea (Laboratorul Verde): places, the plot and food chains. Colours
   come from the :root variables, so dark mode follows them. */
.scene.restaurarea .restaurarea-nume { font-size: 13px; font-weight: 700; fill: var(--ink); }
.scene.restaurarea .restaurarea-nume-lipsa { fill: var(--muted); font-style: italic; }
.restaurarea-cer { fill: var(--sky); }
.restaurarea-sol { fill: var(--zone); }
.restaurarea-stepa { fill: var(--box); opacity: .75; }
.restaurarea-soare { fill: var(--hat); }
.restaurarea-iarba { fill: none; stroke: var(--good); stroke-width: 1.6; stroke-linecap: round; }
.restaurarea-iarba-uscata { fill: none; stroke: var(--wood-dark); stroke-width: 1.6; stroke-linecap: round; }
.restaurarea-trunchi { fill: var(--wood-dark); }
.restaurarea-coroana { fill: var(--good); opacity: .85; }
.restaurarea-salcie { fill: var(--good); opacity: .6; }
.restaurarea-salcie-ramuri { fill: none; stroke: var(--good); stroke-width: 2; stroke-linecap: round; }
.restaurarea-floare { fill: var(--fog); stroke: var(--line); stroke-width: 1; }
.restaurarea-floare-mijloc { fill: var(--hat); }
.restaurarea-apa { fill: var(--water); }
.restaurarea-trestie { fill: none; stroke: var(--wood); stroke-width: 2.5; stroke-linecap: round; }
.restaurarea-fond { fill: var(--bg); }
.restaurarea-eticheta-fond { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.restaurarea-nod { fill: var(--panel); stroke: var(--wood-dark); stroke-width: 2; }
.restaurarea-nod-planta { fill: var(--zone); stroke: var(--good); }
.restaurarea-nod-lipsa { fill: var(--fog-map); stroke: var(--muted); stroke-dasharray: 5 4; opacity: .8; }
.restaurarea-sageata-linie { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.restaurarea-sageata-varf { fill: var(--accent); }
/* Experimentele (Laboratorul Verde): rulers, set-up tables and results, drawn in web/js/ui/pics/experimentele.js.
   Every colour is an existing :root variable, so dark mode follows on its own. Nothing in a table or a chart
   is highlighted, so the picture never gives the answer away. */
.scene.experimentele text { font: 600 11px system-ui, sans-serif; fill: var(--ink); text-anchor: middle; }
.scene.experimentele .experimentele-cifra { font-size: 9px; font-weight: 600; fill: var(--ink); text-anchor: end; }
.scene.experimentele .experimentele-zi { font-size: 12px; font-weight: 700; }
.scene.experimentele .experimentele-litera { font-size: 14px; font-weight: 800; fill: var(--accent); }
.scene.experimentele .experimentele-eticheta { font-size: 11px; font-weight: 700; fill: var(--muted); text-anchor: start; }
.scene.experimentele .experimentele-valoare { font-size: 11px; font-weight: 600; }
.scene.experimentele .experimentele-necunoscut { font-size: 14px; font-weight: 800; fill: var(--muted); }
.scene.experimentele .experimentele-rezultat { font-weight: 800; fill: var(--ink); }
.scene.experimentele .experimentele-titlu { font-size: 12px; font-weight: 700; text-anchor: start; }
.scene.experimentele .experimentele-rand-eticheta { font-size: 12px; text-anchor: start; }
.scene.experimentele .experimentele-rand-valoare { font-size: 14px; font-weight: 800; }
.scene.experimentele .experimentele-grila-text { font-size: 9px; font-weight: 600; fill: var(--muted); text-anchor: end; }
.scene.experimentele .experimentele-bara-text { font-size: 11px; font-weight: 700; }
.experimentele-rigla { fill: var(--box); stroke: var(--wood-dark); stroke-width: 1; }
/* The ruler is box-coloured in both modes, so its marks stay dark, like the labels of .box in style.css. */
.experimentele-gradatie { stroke: #2b2620; stroke-width: 1; }
.experimentele-termometru-gradatie { stroke: var(--muted); stroke-width: 1.5; }
.experimentele-ghiveci { fill: var(--wood); stroke: var(--wood-dark); stroke-width: 1.2; }
.experimentele-pamant { fill: var(--wood-dark); }
.experimentele-tulpina { fill: none; stroke: var(--good); stroke-width: 3; stroke-linecap: round; }
.experimentele-frunza { fill: var(--good); }
.experimentele-reper { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 2; }
.experimentele-pahar { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linejoin: round; }
.experimentele-apa { fill: var(--water); opacity: .75; }
.experimentele-pervaz { stroke: var(--line); stroke-width: 2; }
.experimentele-rand-fundal { fill: var(--panel); }
.experimentele-rand-gol { fill: none; }
.experimentele-rezultat-fundal { fill: var(--sky); }
.experimentele-linie { stroke: var(--line); stroke-width: 1; }
.experimentele-rampa { fill: var(--wood); stroke: var(--wood-dark); stroke-width: 1; }
.experimentele-masina { fill: var(--accent); }
.experimentele-roata { fill: var(--metal); }
.experimentele-farfurie { fill: var(--fog); stroke: var(--muted); stroke-width: 1.2; }
.experimentele-gheata { fill: var(--sky); stroke: var(--water); stroke-width: 1.2; }
.experimentele-grila { stroke: var(--line); stroke-width: 1; }
.experimentele-axa { stroke: var(--muted); stroke-width: 1.5; }
.experimentele-bara { fill: var(--good); }
.opt-pic.experimentele .experimentele-rigla { stroke-width: 1.5; }
.experimentele-termometru-tub { fill: var(--fog); stroke: var(--muted); stroke-width: 1.5; }
.experimentele-termometru-bila, .experimentele-termometru-coloana { fill: var(--bad); }
.experimentele-cantar-taler, .experimentele-cantar-picior { fill: var(--metal); }
.experimentele-cantar-corp { fill: var(--panel); stroke: var(--metal); stroke-width: 2; }
.experimentele-cantar-cadran { fill: var(--fog); stroke: var(--metal); stroke-width: 1.5; }
.experimentele-cantar-ac { stroke: var(--bad); stroke-width: 2; stroke-linecap: round; }
.experimentele-ceas-cadran { fill: var(--fog); stroke: var(--ink); stroke-width: 2.5; }
.experimentele-ceas-buton { fill: var(--ink); }
.experimentele-ceas-gradatie { stroke: var(--muted); stroke-width: 1.5; }
.experimentele-ceas-ac { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
/* Colecția (Laboratorul Verde): cards of phenomena and materials, shadows on squared ground, a mirror,
   a xylophone, an echo and a thunderclap, drawn in web/js/ui/pics/colectia.js. Every colour is an
   existing :root variable, so dark mode follows on its own. The vapour you cannot see is a dashed line;
   the cloud of tiny droplets you can see is drawn as droplets. */
.opt-pic.colectia { display: block; width: 72px; height: 54px; margin: 0 auto 2px; }
.scene.colectia text { font: 700 12px system-ui, sans-serif; fill: var(--ink); text-anchor: middle; }
.scene.colectia .colectia-nume { font-size: 11px; font-weight: 700; fill: var(--ink); }
.scene.colectia .colectia-necunoscut { font-size: 44px; font-weight: 800; fill: var(--muted); }
.scene.colectia .colectia-necunoscut-mic { font-size: 16px; font-weight: 800; fill: var(--accent); }
.scene.colectia .colectia-litera { font-size: 14px; font-weight: 800; fill: var(--accent); }

/* Cards */
.colectia-carte-fundal { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.colectia-carte-necunoscuta { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 6 4; }
.colectia-semn-plus, .colectia-semn-egal { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.colectia-gheata { fill: var(--fog); stroke: var(--water); stroke-width: 1.5; stroke-linejoin: round; }
.colectia-gheata-sus, .colectia-gheata-latura { fill: var(--sky); stroke: var(--water); stroke-width: 1.5; stroke-linejoin: round; }
.colectia-gheata-luciu { fill: none; stroke: var(--water); stroke-width: 1.5; stroke-linecap: round; }
.colectia-apa { fill: var(--water); }
.colectia-apa-luciu, .colectia-ulei-luciu { fill: none; stroke: var(--fog); stroke-width: 2; stroke-linecap: round; opacity: .75; }
.colectia-vapori { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 3 4; stroke-linecap: round; }
.colectia-flacara { fill: var(--accent); }
.colectia-flacara-miez { fill: var(--hat); }
.colectia-fulg { stroke: var(--water); stroke-width: 3; stroke-linecap: round; }
.colectia-picatura { fill: var(--water); opacity: .8; }
.colectia-vant { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; }
.colectia-sticla { fill: var(--sky); stroke: var(--water); stroke-width: 2; }
.colectia-sticla-luciu { fill: none; stroke: var(--fog); stroke-width: 2.5; stroke-linecap: round; }
.colectia-lemn { fill: var(--wood); stroke: var(--wood-dark); stroke-width: 1.5; }
.colectia-lemn-fibra { fill: none; stroke: var(--wood-dark); stroke-width: 1.2; }
.colectia-lemn-nod { fill: none; stroke: var(--wood-dark); stroke-width: 1.5; }
.colectia-fier { fill: var(--metal); }
.colectia-aluminiu { fill: var(--line); stroke: var(--metal); stroke-width: 1.5; }
.colectia-aluminiu-capac { fill: var(--fog); stroke: var(--metal); stroke-width: 1.5; }
.colectia-aluminiu-dunga { fill: var(--water); opacity: .6; }
.colectia-plastic { fill: var(--water); fill-opacity: .45; stroke: var(--water); stroke-width: 2; }
.colectia-plastic-dop { fill: var(--good); }
.colectia-hartie { fill: var(--fog); stroke: var(--muted); stroke-width: 1.2; stroke-linejoin: round; }
.colectia-hartie-colt { fill: var(--line); stroke: var(--muted); stroke-width: 1.2; stroke-linejoin: round; }
.colectia-hartie-rand { stroke: var(--line); stroke-width: 1.5; }
.colectia-lana { fill: var(--balloon); }
.colectia-lana-fir { fill: none; stroke: var(--panel); stroke-width: 1.8; stroke-linecap: round; }
.colectia-lana-coada { fill: none; stroke: var(--balloon); stroke-width: 2.5; stroke-linecap: round; }
.colectia-cauciuc { fill: var(--good); stroke-linejoin: round; }
.colectia-cauciuc-talpa { fill: var(--metal); }
.colectia-cauciuc-dunga { stroke: var(--fog); stroke-width: 2.5; }
.colectia-zahar { fill: var(--fog); stroke: var(--muted); stroke-width: 1; stroke-linejoin: round; }
.colectia-zahar-sus, .colectia-zahar-latura { fill: var(--line); stroke: var(--muted); stroke-width: 1; stroke-linejoin: round; }
.colectia-nisip { fill: var(--box); stroke: var(--wood-dark); stroke-width: 1; }
.colectia-nisip-bob { fill: var(--ink); opacity: .5; }
.colectia-ulei { fill: var(--hat); stroke: var(--wood-dark); stroke-width: 1; }
.colectia-soare { fill: var(--hat); }
.colectia-soare-raza { stroke: var(--hat); stroke-width: 3; stroke-linecap: round; }
.colectia-fulger { fill: var(--hat); stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.colectia-roata { fill: none; stroke: var(--metal); stroke-width: 3; }
.colectia-roata-anvelopa { fill: none; stroke: var(--ink); stroke-width: 2; }
.colectia-spita { stroke: var(--metal); stroke-width: 1.5; }
.colectia-ax { fill: var(--metal); }
.colectia-miscare-linie { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; }
.colectia-difuzor { fill: var(--metal); stroke-linejoin: round; }
.colectia-unda { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.colectia-panou { fill: var(--water); stroke: var(--metal); stroke-width: 2; stroke-linejoin: round; }
.colectia-panou-linie { fill: none; stroke: var(--fog); stroke-width: 1.5; }
.colectia-stalp { fill: var(--metal); }
.colectia-turbina-stalp, .colectia-turbina-pala { fill: var(--fog); stroke: var(--metal); stroke-width: 1.5; stroke-linejoin: round; }
.colectia-dinam { fill: var(--metal); }
.colectia-dinam-rola { fill: var(--wood-dark); }

/* Scenes */
.colectia-grila { stroke: var(--line); stroke-width: 1; }
.colectia-sol, .colectia-tavan { stroke: var(--wood-dark); stroke-width: 3; stroke-linecap: round; }
.colectia-agatatoare { stroke: var(--metal); stroke-width: 2; }
.colectia-lampa { fill: var(--hat); stroke: var(--wood-dark); stroke-width: 1.5; }
.colectia-bat { fill: var(--wood); stroke: var(--wood-dark); stroke-width: 1; }
.colectia-zapada { fill: var(--fog); stroke: var(--muted); stroke-width: 1.5; }
.colectia-ochi { fill: var(--ink); }
.colectia-umbra-stalp { fill: var(--muted); opacity: .55; }
.colectia-raza { fill: none; stroke: var(--hat); stroke-width: 2; stroke-dasharray: 5 4; }
.colectia-semn { fill: var(--accent); }
.colectia-oglinda-sticla { fill: var(--sky); stroke: var(--metal); stroke-width: 1.5; }
.colectia-raza-lanterna { stroke: var(--hat); stroke-width: 3; stroke-linecap: round; }
.colectia-lanterna-corp { fill: var(--metal); }
.colectia-lanterna-bec { fill: var(--hat); }
.colectia-sina, .colectia-cadru { fill: var(--wood-dark); }
.colectia-sfoara { stroke: var(--muted); stroke-width: 1.5; }
.colectia-bara { fill: var(--wood); stroke: var(--wood-dark); stroke-width: 1.5; }
.colectia-tub { fill: var(--metal); stroke: var(--metal); stroke-width: 1; }
.colectia-cap { fill: var(--skin); stroke: var(--wood-dark); stroke-width: .8; }
.colectia-corp { fill: var(--water); }
.colectia-stanca { fill: var(--muted); stroke: var(--wood-dark); stroke-width: 1; stroke-linejoin: round; }
.colectia-unda-linie { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.colectia-unda-varf { fill: var(--accent); }
.colectia-nor { fill: var(--fog-map); stroke: var(--muted); stroke-width: 1.5; }
.colectia-cota { stroke: var(--muted); stroke-width: 1.5; }
/* Laboratorul Verde: Atelierul de design (web/js/ui/pics/designul.js). Every
   material has its own texture as well as its own colour, so colour is never
   the only cue. */
.scene.designul, .opt-pic.designul {
  --dz-plastilina: #d9708b; --dz-metal: #8f99a4; --dz-metal-deschis: #c4cad1; --dz-sticla: #cfe6ef;
  --dz-hartie: #fffdf6; --dz-carton: #c9a06b; --dz-plastic: #4f9fd8; --dz-panza: #e7dcc4;
  --dz-cauciuc: #3d3f42; --dz-lana: #f4efe4; --dz-lut: #c46a3c; --dz-nisip: #e2c27a;
  --dz-mar: #cf3e33; --dz-frunza: #5f9a4e; --dz-iarba: #9cc47a; --dz-mal: #efe6cf;
  --dz-pene: #9b8c7a; --dz-cioc: #e0a43a; --dz-piatra: #b3aa9d; --dz-zapada: #f7fbff;
  --dz-pamant: #8a6440; --dz-scai: #8c7a4a;
}
@media (prefers-color-scheme: dark) {
  .scene.designul, .opt-pic.designul {
    --dz-plastilina: #c06078; --dz-metal: #7c8691; --dz-metal-deschis: #a4adb6; --dz-sticla: #4a6d7b;
    --dz-hartie: #e9e1d2; --dz-carton: #9a7a4f; --dz-plastic: #3f7fae; --dz-panza: #8a7f6a;
    --dz-cauciuc: #5a5e63; --dz-lana: #cfc6b6; --dz-lut: #a85a33; --dz-nisip: #b89a55;
    --dz-mar: #b8463c; --dz-frunza: #5d8f4c; --dz-iarba: #3f5a30; --dz-mal: #2f2b24;
    --dz-pene: #8a7d6c; --dz-cioc: #d2992f; --dz-piatra: #7f786e; --dz-zapada: #c9d3db;
    --dz-pamant: #6e5531; --dz-scai: #a08d5a;
  }
}
.opt-pic.designul { display: block; width: 88px; height: auto; margin: 0 auto 4px; }

/* Words */
.scene.designul .designul-antet { font-size: 12px; font-weight: 700; fill: var(--ink); }
.scene.designul .designul-unitate { font-size: 11px; font-weight: 600; fill: var(--muted); }
.scene.designul .designul-litera { font-size: 14px; font-weight: 800; fill: var(--accent); }
.scene.designul .designul-celula { font-size: 13px; font-weight: 600; fill: var(--ink); }
.scene.designul .designul-valoare { font-size: 11px; font-weight: 600; fill: var(--ink); }
.scene.designul .designul-limita-text { font-size: 11px; font-weight: 700; fill: var(--accent); }
.scene.designul .designul-punct { font-size: 13px; font-weight: 800; fill: var(--ink); }

/* Band 1: the table */
.designul-tabel-cap { fill: var(--panel); }
.designul-tabel-rand { fill: var(--panel); }
.designul-tabel-rand-2 { fill: var(--bg); }
.designul-tabel-linie { fill: none; stroke: var(--line); stroke-width: 1; }

/* Band 5: the bars */
.designul-bara-a { fill: var(--good); }
.designul-bara-b { fill: var(--water); }
.designul-limita { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; }

/* Materials */
.designul-m-sticla, .designul-sticla { fill: var(--dz-sticla); stroke: var(--water); stroke-width: 1.5; }
.designul-m-lemn, .designul-lemn { fill: var(--wood); stroke: var(--wood-dark); stroke-width: 1.2; }
.designul-lemn-capat { fill: var(--box); stroke: var(--wood-dark); stroke-width: 1.2; }
.designul-lemn-inchis { fill: var(--wood-dark); }
.designul-m-metal, .designul-metal { fill: var(--dz-metal); stroke: var(--metal); stroke-width: 1; }
.designul-metal-deschis { fill: var(--dz-metal-deschis); stroke: var(--metal); stroke-width: 1; }
.designul-m-nuiele { fill: var(--box); stroke: var(--wood-dark); stroke-width: 1.2; }
.designul-m-hartie { fill: var(--dz-hartie); stroke: var(--muted); stroke-width: 1.2; }
.designul-m-carton { fill: var(--dz-carton); stroke: var(--wood-dark); stroke-width: 1.2; }
.designul-m-plastic { fill: var(--dz-plastic); }
.designul-m-panza { fill: var(--dz-panza); stroke: var(--muted); stroke-width: 1; }
.designul-cauciuc { fill: var(--hat); stroke: var(--wood-dark); stroke-width: 1; }
.designul-m-cauciuc { fill: var(--dz-cauciuc); }
.designul-m-lana { fill: var(--dz-lana); stroke: var(--muted); stroke-width: 1; }
.designul-m-lut { fill: var(--dz-lut); stroke: var(--wood-dark); stroke-width: 1.2; }
.designul-m-lut-linie { fill: none; stroke: var(--dz-lut); stroke-width: 5; stroke-linecap: round; }
.designul-plastilina { fill: var(--dz-plastilina); stroke: var(--wood-dark); stroke-width: 1; }
.designul-fibra, .designul-inel, .designul-nervura { fill: none; stroke: var(--wood-dark); stroke-width: 1.2; opacity: .6; }
.designul-luciu { fill: none; stroke: var(--fog); stroke-width: 3; stroke-linecap: round; opacity: .8; }
.designul-nit { fill: var(--metal); }
.designul-pata { fill: var(--wood-dark); }
.designul-impletit { fill: none; stroke: var(--wood-dark); stroke-width: 3; stroke-linecap: round; }
.designul-indoitura { fill: var(--line); }
.designul-rand-scris { fill: none; stroke: var(--line); stroke-width: 2; }
.designul-ondula { fill: none; stroke: var(--wood-dark); stroke-width: 2; }
.designul-fir { fill: none; stroke: var(--muted); stroke-width: 1.5; opacity: .7; }
.designul-crestatura { fill: none; stroke: var(--muted); stroke-width: 2.5; }
.designul-cret { fill: none; stroke: var(--muted); stroke-width: 2; }
.designul-toarta { fill: none; stroke: var(--dz-lut); stroke-width: 5; stroke-linecap: round; }
.designul-sfoara { fill: none; stroke: var(--box); stroke-width: 8; stroke-linecap: round; }
.designul-rasucit { fill: none; stroke: var(--wood-dark); stroke-width: 1.5; }
.designul-sarma { fill: none; stroke: var(--metal); stroke-width: 2; stroke-linecap: round; }

/* Shapes */
.designul-perete { fill: var(--panel); stroke: var(--wood-dark); stroke-width: 1.5; }
.designul-acoperis { fill: var(--accent); stroke: var(--wood-dark); stroke-width: 1; }
.designul-balta { fill: none; stroke: var(--water); stroke-width: 3; stroke-linecap: round; }
.designul-sol { fill: none; stroke: var(--wood-dark); stroke-width: 3; }
.designul-roata { fill: var(--metal); stroke: var(--ink); stroke-width: 2; }
.designul-ax { fill: var(--fog); }
.designul-pamant { fill: var(--dz-pamant); }
.designul-apa { fill: var(--water); opacity: .8; }
.designul-apa-linie { fill: none; stroke: var(--water); stroke-width: 3; }
.designul-picatura { fill: var(--water); }
.designul-zapada { fill: var(--dz-zapada); stroke: var(--line); stroke-width: 1; }
.designul-talpa { fill: none; stroke: var(--metal); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.designul-lemn-linie { fill: none; stroke: var(--wood); stroke-width: 4; stroke-linecap: round; }

/* Band 2: the water */
.designul-mal { fill: var(--dz-mal); }
.designul-val { fill: none; stroke: var(--fog); stroke-width: 2; opacity: .7; }
.designul-gaura { fill: var(--ink); }
.designul-piatra { fill: var(--dz-piatra); stroke: var(--metal); stroke-width: 1; }
.designul-fereastra { fill: var(--dz-sticla); }
.designul-nisip { fill: var(--dz-nisip); }
.designul-dop { fill: var(--accent); }
.designul-mar { fill: var(--dz-mar); }
.designul-coada { fill: none; stroke: var(--wood-dark); stroke-width: 2; }
.designul-frunza, .designul-coroana { fill: var(--dz-frunza); }
.designul-margine { fill: none; stroke: var(--metal); stroke-width: 3; }
.designul-cioc { fill: var(--dz-cioc); stroke: var(--wood-dark); stroke-width: 1; }
.designul-ochi { fill: var(--ink); }
.designul-ochi-alb { fill: var(--fog); }

/* Band 3: the nest box */
.designul-cer { fill: var(--sky); }
.designul-iarba { fill: var(--dz-iarba); }
.designul-trunchi { fill: var(--wood-dark); }
.designul-tub { fill: var(--ink); stroke: var(--box); stroke-width: 1.5; }
.designul-busola { fill: var(--bg); stroke: var(--muted); stroke-width: 1.5; }
.designul-busola-ac { fill: var(--accent); opacity: .5; }
.designul-soare { fill: var(--hat); }
.designul-raza { fill: none; stroke: var(--hat); stroke-width: 2.5; stroke-linecap: round; }
.designul-vant { fill: none; stroke: var(--water); stroke-width: 3; stroke-linecap: round; }
.designul-vant-varf { fill: var(--water); }
.designul-ploaie { fill: none; stroke: var(--water); stroke-width: 2; stroke-linecap: round; }

/* Band 4: forms in nature */
.designul-pene { fill: var(--dz-pene); }
.designul-zimti { fill: none; stroke: var(--wood-dark); stroke-width: 1.5; }
.designul-mal-piatra { fill: var(--dz-mal); stroke: var(--line); stroke-width: 1; }
.designul-arc { fill: var(--dz-piatra); stroke: var(--metal); stroke-width: 1.5; }
.designul-arc-gol { fill: var(--sky); }
.designul-rost { fill: none; stroke: var(--metal); stroke-width: 1.5; }
.designul-drum { fill: var(--wood-dark); }
.designul-grinda { fill: none; stroke: var(--wood); stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; }
.designul-samanta { fill: var(--wood-dark); }
.designul-aripa { fill: var(--box); stroke: var(--wood-dark); stroke-width: 1; opacity: .9; }
.designul-rotire { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 3; }
.designul-rotire-varf { fill: var(--muted); }
.designul-tija { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.designul-puf { fill: none; stroke: var(--muted); stroke-width: 1; }
.designul-blana { fill: var(--metal); }
.designul-laba { fill: var(--skin); stroke: var(--wood-dark); stroke-width: 1; }
.designul-gheara { fill: var(--dz-lana); stroke: var(--muted); stroke-width: 1; }
.designul-val-alb { fill: none; stroke: var(--fog); stroke-width: 2.5; stroke-linecap: round; }
.designul-fagure { fill: var(--box); stroke: var(--wood-dark); stroke-width: 2; }
.designul-scai { fill: var(--dz-scai); }
.designul-carlig { fill: none; stroke: var(--dz-scai); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }