/* games/runborg-lab.html: the Runborg prototype (js/games/runborg-lab.js). The field is one SVG (.rb-scene):
   both forts, the ground between them and the battle (#rb-fx), coloured by the board (body[data-board]); the cards are buttons (.rbc.c-t / .c-r / .c-w). */
.rb-wrap{max-width:1080px}
body[data-board=fjord]{--rb-tree:#2f5a3a;--rb-sky1:#8fb9d6;--rb-sky2:#e3edf2;--rb-earth:#4f6b3a;--rb-wood:#9a6a3c;--rb-wood2:#5a381d;--rb-roof:#3b2a1d;--rb-shield:#b8322a;--rb-shield2:#2f5fa8;--rb-text:#1b1208}
body[data-board=winter]{--rb-tree:#2f4a3a;--rb-sky1:#b9cfe2;--rb-sky2:#f6fafd;--rb-earth:#e8f0f6;--rb-wood:#7f5a3a;--rb-wood2:#4a3220;--rb-roof:#e9eef3;--rb-shield:#2f5fa8;--rb-shield2:#b8322a;--rb-text:#14202c}
body[data-board=aurora]{--rb-tree:#13261a;--rb-sky1:#071225;--rb-sky2:#163a3a;--rb-earth:#1c2a22;--rb-wood:#6e4a2c;--rb-wood2:#3a2414;--rb-roof:#24180f;--rb-shield:#3fbf7f;--rb-shield2:#b06ad8;--rb-text:#e9f6ef}
body[data-board=autumn]{--rb-tree:#c8641c;--rb-sky1:#f2c46a;--rb-sky2:#a8461a;--rb-earth:#7a3414;--rb-wood:#a7703f;--rb-wood2:#5e3a1d;--rb-roof:#3b2412;--rb-shield:#2f5fa8;--rb-shield2:#4f8a3a;--rb-text:#2a1404}
body[data-board=dusk]{--rb-tree:#38484f;--rb-sky1:#3a3a6a;--rb-sky2:#f6b77a;--rb-earth:#e9edf4;--rb-wood:#8a5a36;--rb-wood2:#4a2e1a;--rb-roof:#eef2f7;--rb-shield:#b8322a;--rb-shield2:#2f5fa8;--rb-text:#fff4ea}

.rb-switches{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;margin-bottom:14px}
.rb-switches label{display:flex;gap:6px;align-items:center;cursor:pointer}
.rb-switches select{font:inherit;padding:4px 8px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text)}

/* The table: resources on both sides, the two forts facing each other, the last card between them */
html{scrollbar-gutter:stable}                                       /* a scrollbar coming and going must not resize the field */
.rb-table{position:relative;overflow:hidden;isolation:isolate;border-radius:16px;
  background:linear-gradient(var(--rb-sky1),var(--rb-sky2) 75%);border:3px solid var(--rb-wood2);box-shadow:inset 0 0 40px rgba(0,0,0,.25)}
body[data-board=aurora] .rb-table{background:radial-gradient(ellipse at 30% 0%,rgba(80,255,170,.35),transparent 55%),radial-gradient(ellipse at 75% 10%,rgba(170,90,255,.3),transparent 50%),linear-gradient(var(--rb-sky1),var(--rb-sky2))}
.rb-field{position:relative;min-width:0}
.rb-scene{display:block;width:100%;height:auto;overflow:visible}
.rb-scene .hall-body{fill:var(--rb-wood)}
.rb-scene .plank{stroke:var(--rb-wood2);stroke-width:.6;opacity:.6}
.rb-scene .skirt,.rb-scene .roof{fill:var(--rb-roof);stroke:var(--rb-wood2);stroke-width:.8}
.rb-scene .shingle{stroke:rgba(0,0,0,.35);stroke-width:.8;fill:none}
.rb-scene .door{fill:var(--rb-wood2)}
.rb-scene .dragon{fill:none;stroke:var(--rb-wood2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rb-scene .log{fill:var(--rb-wood);stroke:var(--rb-wood2);stroke-width:.8}
.rb-scene .shield{fill:var(--rb-shield);stroke:#2a1a0c;stroke-width:.8}
.rb-scene .them .shield{fill:var(--rb-shield2)}
.rb-scene .boss{fill:#d8d2c4}
.rb-scene .earth{fill:var(--rb-earth)}
.rb-scene .earth-edge{fill:rgba(0,0,0,.12)}
.rb-scene .fortg{filter:drop-shadow(0 0 1.5px rgba(0,0,0,.6)) drop-shadow(0 3px 5px rgba(0,0,0,.35))}   /* stands out from the background */
.rb-scene .farshore{fill:color-mix(in srgb,var(--rb-earth),#000 18%)}
.rb-scene .tree .trunk{fill:#4a3220}
.rb-scene .tree .crown{fill:var(--rb-tree);stroke:color-mix(in srgb,var(--rb-tree),#000 30%);stroke-width:.5}
.rb-scene .tree .crown.pine{fill:color-mix(in srgb,var(--rb-tree),#000 15%)}
.rb-scene .tree .trunk.pine{fill:#8a4a2a}
.rb-scene .tree .trunk.birch{fill:#ecebe4}
.rb-scene .tree .birchmark{stroke:#333;stroke-width:.8}
.rb-scene .tree .crown.birch{fill:#8fbf52}
.rb-scene .tree .crown.oak{fill:#3f6b2a}
body[data-board=autumn] .rb-scene .tree .crown.birch{fill:#e8b93a}
body[data-board=autumn] .rb-scene .tree .crown.oak{fill:#b5651d}
body[data-board=aurora] .rb-scene .tree .crown.birch,body[data-board=aurora] .rb-scene .tree .crown.oak{fill:#1d3322}
body[data-board=winter] .rb-scene .tree .crown.birch,body[data-board=winter] .rb-scene .tree .crown.oak,
body[data-board=dusk] .rb-scene .tree .crown.birch,body[data-board=dusk] .rb-scene .tree .crown.oak{fill:#dde6ee}
.rb-scene .stone-band{fill:none;stroke:#5a5d63;stroke-width:.8}
.rb-scene .dummy line{stroke:#6b4423;stroke-width:1.6}
.rb-scene .dummy circle{fill:#c9a86a;stroke:#6b4423;stroke-width:.6}
.vk.spar .axe{animation-duration:.7s}
.vk.spar.late .axe{animation-delay:-.35s}
.vk.carver .axe{animation-duration:.9s}
body[data-board=winter] .rb-scene .tree .crown,body[data-board=dusk] .rb-scene .tree .crown{stroke:#f4f8fb;stroke-width:1.2}
.rb-scene .logpile{fill:var(--rb-wood);stroke:var(--rb-wood2);stroke-width:.5}
.rb-scene .stone-body{fill:#8d9096;stroke:#5a5d63;stroke-width:.6}
.rb-scene .stone-rune{fill:none;stroke:#3a3f45;stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke}
.rb-scene .runestone.glowing .stone-rune{stroke:#ffd36b;filter:drop-shadow(0 0 2px #ffb000);animation:rb-rune-glow .5s ease-in-out infinite alternate}
@keyframes rb-rune-glow{from{opacity:.6}to{opacity:1}}
/* Fjord: the water between the forts, and the longship crossing it there and back */
.rb-scene .water{fill:#3f80ad}
.rb-scene .ripple{fill:#d8efff;animation:rb-ripple 3s ease-in-out infinite}
@keyframes rb-ripple{0%,100%{opacity:.15;translate:0 0}50%{opacity:.9;translate:4px 0}}
.ship .hull{fill:#6b4423;stroke:#3a2414;stroke-width:.6}
.ship .prow{fill:none;stroke:#3a2414;stroke-width:1.6;stroke-linecap:round}
.ship .mast{stroke:#3a2414;stroke-width:1}
.ship .sail{fill:#f1e7d0}
.ship .sail-stripe{stroke:#b8322a;stroke-width:2.4}
.ship .oarshield{fill:var(--rb-shield);stroke:#2a1a0c;stroke-width:.4}
.ship-ambient{animation:rb-cross 16s ease-in-out infinite}
@keyframes rb-cross{0%{transform:translate(176px,258px) scale(1,1)}46%{transform:translate(224px,258px) scale(1,1)}46.1%{transform:translate(224px,258px) scale(-1,1)}96%{transform:translate(176px,258px) scale(-1,1)}96.1%{transform:translate(176px,258px) scale(1,1)}100%{transform:translate(176px,258px) scale(1,1)}}
.ship-ambient .bob{animation:bd-bob 3s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
body.still .ship-ambient,body.still .ship-ambient .bob,body.still .rb-scene .ripple,body.still .rb-scene .vk{animation-play-state:paused}
body.still .rb-scene .vk *{animation-play-state:paused}
.rb-scene .tuft{fill:none;stroke:color-mix(in srgb,var(--rb-earth),#000 25%);stroke-width:1}
.rb-scene .stone{fill:color-mix(in srgb,var(--rb-earth),#888 45%)}
.rb-scene .val{font:800 15px system-ui,sans-serif;fill:var(--rb-text);text-anchor:middle;paint-order:stroke;stroke:rgba(255,255,255,.35);stroke-width:3px}
body[data-board=aurora] .rb-scene .val,body[data-board=dusk] .rb-scene .val{stroke:rgba(0,0,0,.5)}
/* A fort that is hit shakes (translate: the enemy fort's mirror is its transform attribute) */
.fortg.hit{animation:rb-shake .28s ease-out}
@keyframes rb-shake{20%{translate:-1.6px 0}45%{translate:1.4px 0}70%{translate:-.8px 0}100%{translate:0 0}}

/* The battle */
.vk .leg{stroke:#3a2a1c;stroke-width:1.3;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 0}
.vk .tunic{fill:#7a4b2a}
.vk.them .tunic{fill:#4b5a7a}
.vk .face{fill:#f0c9a0}
.vk .helm{fill:#8d949c;stroke:#4b5158;stroke-width:.3}
.vk .vshield{fill:var(--rb-shield);stroke:#2a1a0c;stroke-width:.6}
.vk.them .vshield{fill:var(--rb-shield2)}
.vk .axe line{stroke:#5a381d;stroke-width:1;stroke-linecap:round}
.vk .blade{fill:#c9ced4;stroke:#555;stroke-width:.3}
.vk .axe{transform-origin:1.6px -8px}
.vk .bow{fill:none;stroke:#5a381d;stroke-width:1.1}
.vk .string{stroke:#e8e2d0;stroke-width:.4}
.vk.running .l1{animation:rb-leg .24s ease-in-out infinite alternate}
.vk.running .l2{animation:rb-leg .24s ease-in-out infinite alternate-reverse}
@keyframes rb-leg{from{rotate:-28deg}to{rotate:28deg}}
.vk.chopping .axe{animation:rb-chop .3s ease-in infinite}
.vk.chopping.slow .axe{animation-duration:1.1s}
.vk .hammerhead{fill:#8a929c;stroke:#444;stroke-width:.3}
.vk .logs rect{fill:var(--rb-wood);stroke:var(--rb-wood2);stroke-width:.5}
.ladder line{stroke:#6b4423;stroke-width:1.4;stroke-linecap:round}
.dust{fill:#d9c9a8}
@keyframes rb-chop{0%{rotate:-70deg}60%{rotate:40deg}100%{rotate:-70deg}}
.arrow line{stroke:#4a3020;stroke-width:.9}
.arrow path{fill:#bfc5cc}
.arrow .fletch{fill:none;stroke:#e8e2d0;stroke-width:.7}
.chip{fill:var(--rb-wood)}
.spark{fill:#fff3a6}
.mjolnir .head{fill:#8a929c;stroke:#3b3f45;stroke-width:.8}
.mjolnir .handle{fill:#6b4423}
.mjolnir .knot{stroke:#c9a227;stroke-width:1.2}
.mjolnir .glow,.runeshot .glow{fill:rgba(160,210,255,.35);filter:blur(2px)}
.runeshot .glow{fill:rgba(255,211,107,.5)}
.runeshot path{fill:none;stroke:#fff3c4;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bolt{fill:none;stroke:#eaf6ff;stroke-width:2.2;stroke-linejoin:round;filter:drop-shadow(0 0 3px #7cc4ff) drop-shadow(0 0 6px #4aa3ff)}
.flash{fill:#dff0ff;pointer-events:none}
.float{font:900 14px system-ui,sans-serif;text-anchor:middle;paint-order:stroke;stroke:rgba(0,0,0,.55);stroke-width:3px}
.float.up{fill:#7dff9a}
.float.down{fill:#ff7b6b}
.rb-mid{position:absolute;top:2px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;transition:opacity .3s}
.rb-mid:has(.dim){opacity:.25}
/* The end of the saga: a box over the field, gold for a win, red for a loss */
.rb-over{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:12px;
  background:rgba(8,6,18,.55);backdrop-filter:blur(2px);animation:rb-over-in .35s ease-out}
.rb-over[hidden]{display:none}
.rb-over-box{max-width:min(440px,100%);padding:16px 22px 18px;text-align:center;background:var(--card,#1c1830);color:var(--text,#e6edf3);
  border:2px solid #e8506a;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.rb-over.won .rb-over-box{border-color:#e3b341}
.rb-over-icon{font-size:44px;line-height:1}
.rb-over h2{margin:6px 0 4px;font-size:26px;color:#e8506a}
.rb-over.won h2{color:#e3b341}
.rb-over p{margin:4px 0}
.rb-over-more{color:var(--muted,#8b949e);font-size:13px}
.rb-over-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
@keyframes rb-over-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
body.still .rb-over{animation:none}
@media (prefers-reduced-motion:reduce){.rb-over{animation:none}}
@media (max-width:720px){.rb-over-box{padding:10px 14px 12px}.rb-over-icon{font-size:30px}.rb-over h2{font-size:20px;margin:2px 0}.rb-over p{font-size:14px}.rb-over-actions{margin-top:8px}}
.rb-mid small,.rb-last small{color:var(--rb-text);font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.rb-last{display:flex;flex-direction:column;align-items:center;gap:4px}
.rb-last .rbc{transform:rotate(-3deg);cursor:default}
.rb-last.discarded .rbc{filter:grayscale(.8) brightness(.8)}

.rb-res{display:flex;flex-direction:column;gap:6px;justify-content:center}
.res{border-radius:10px;padding:6px 8px;color:#fff;display:grid;grid-template-columns:1fr auto;align-items:baseline;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.res b{font-size:22px;line-height:1}
.res small{grid-column:1/-1;opacity:.85;font-size:11px}
.res .gen{font-size:12px;font-weight:700;opacity:.9}
.res-t{background:linear-gradient(#8a5a2b,#5e3b19)}
.res-r{background:linear-gradient(#2f5fa8,#1c3a6a)}
.res-w{background:linear-gradient(#a3322a,#661c16)}
/* How to win on this board, with how far each side is */
.rb-goal{margin-top:14px}
.rb-goal h2{font-size:15px;margin-bottom:8px}
.rb-goal h2 .muted{font-weight:600}
.rb-goal ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
.rb-goal li{font-size:14px}
.rb-goal li small{color:var(--muted)}
.rb-goal .prog{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px}
.rb-goal .prog .done{color:var(--green);font-weight:700}
.rb-goal .start{font-size:12px;color:var(--muted);margin-top:10px}
.rb-goal .start .changed{color:var(--accent);font-weight:700}
.rb-say{text-align:center;font-weight:700;min-height:2.8em;margin:10px 0;display:flex;align-items:center;justify-content:center}
/* The players' names in the top corners, the resource boxes under them, over the sky */
.rb-name{position:absolute;top:10px;z-index:2;font:900 21px/1.2 system-ui,sans-serif;color:var(--rb-text);
  text-shadow:0 0 6px color-mix(in srgb,var(--rb-sky2),transparent 30%),0 1px 2px rgba(0,0,0,.35)}
.rb-name small{font-size:14px;font-weight:800;color:inherit;opacity:.85}
.rb-name.me{left:14px}
.rb-name.them{right:14px;text-align:right}
.rb-res{position:absolute;top:46px;z-index:2;width:124px}
.rb-res.me{left:12px}
.rb-res.them{right:12px}

/* Cards */
.rb-hand{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding-bottom:6px}
.rb-hand.waiting .rbc{opacity:.6}
.rbc{--c:#8a5a2b;position:relative;width:118px;height:168px;flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 7px 6px;
  border-radius:10px;border:3px solid color-mix(in srgb,var(--c),#000 40%);cursor:pointer;color:#2a1a0c;font:inherit;text-align:center;
  background:linear-gradient(color-mix(in srgb,var(--c),#fff 72%),color-mix(in srgb,var(--c),#fff 55%));
  box-shadow:0 4px 10px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.35);transition:transform .15s,box-shadow .15s}
.rbc.c-r{--c:#2f5fa8}
.rbc.c-w{--c:#a3322a}
.rb-hand .rbc{z-index:0}
.rb-hand .rbc:hover,.rb-hand .rbc:focus-visible{transform:translateY(-20px) scale(1.08);z-index:3;box-shadow:0 18px 26px rgba(0,0,0,.5)}
.rb-hand .rbc.cant:hover{transform:translateY(-10px) scale(1.04)}
.rb-hand:has(.rbc:hover) .rbc:not(:hover){filter:brightness(.85) saturate(.85)}
.rb-hand:has(.rbc:hover) .rbc.cant:not(:hover){filter:saturate(.3) brightness(.75)}
.rbc.cant{filter:saturate(.35) brightness(.85);cursor:not-allowed}
/* Seeress's Vision: the card played is lifted, any other card can be picked to throw away */
.rb-hand.picking .rbc.chosen{transform:translateY(-22px);box-shadow:0 0 0 3px #e3b341,0 18px 26px rgba(0,0,0,.5)}
.rb-hand.picking .rbc.pick{filter:none !important;cursor:pointer;outline:2px dashed #e3b341;outline-offset:3px}
.rb-hand.picking .rbc.pick:hover,.rb-hand.picking .rbc.pick:focus-visible{transform:translateY(-14px) rotate(-4deg);filter:grayscale(.5) brightness(.8) !important}
.rbc .cost{position:absolute;top:-8px;left:-8px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:900;color:#fff;background:var(--c);border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.rbc .again{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background:#f0a500;color:#2a1a0c;font-weight:900;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.rbc .art{position:relative;width:100%;height:58px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,color-mix(in srgb,var(--c),#fff 30%),color-mix(in srgb,var(--c),#000 20%));box-shadow:inset 0 0 8px rgba(0,0,0,.5)}
.rbc .icon{font-size:30px;color:#fff;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.rbc .name{font-weight:800;font-size:12.5px;line-height:1.15}
.rbc .text{font-size:11px;line-height:1.25;color:#3a2614}
.rbc .border{display:none}

/* Rune cards (the Medium reward): the card's rune carved big in the picture, a row of runes along the foot,
   and the runes glow on a card that can be played */
.rune{fill:none;stroke-linecap:round;stroke-linejoin:round}
.rbc .rune.big{display:none;height:46px;stroke:#f6e7c1;stroke-width:1.6;filter:drop-shadow(0 0 1px #000)}
.rune-cards .rbc .rune.big{display:block}
.rune-cards .rbc .icon{display:none}
.rune-cards .rbc .border{display:flex;gap:4px;margin-top:auto;opacity:.7}
.rune-cards .rbc .border .rune{height:11px;stroke:color-mix(in srgb,var(--c),#000 45%);stroke-width:1.8}
.rune-cards .rbc{background:linear-gradient(135deg,#e9d7b0,#cdb284 60%,#b89766);border-image:none}
/* Blue (runes) and red (warriors) cards in their own colour, light at the top and dark at the foot, so the
   three kinds tell apart at a glance; brown (timber) and the cards you cannot pay for (grey) stay as they are */
.rbc.c-r,.rune-cards .rbc.c-r{background:linear-gradient(170deg,#d6e6fb 0%,#8fb4e8 38%,#3d6cb8 70%,#1e3f7a 100%)}
.rbc.c-w,.rune-cards .rbc.c-w{background:linear-gradient(170deg,#fbd9d3 0%,#e88f84 38%,#b8433a 70%,#6e1a14 100%)}
.rbc.c-r .name,.rbc.c-w .name,.rbc.c-r .text,.rbc.c-w .text{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.rune-cards .rbc.c-r .border .rune,.rune-cards .rbc.c-w .border .rune{stroke:rgba(255,255,255,.85)}
.rune-cards .rb-hand .rbc:not(.cant) .rune.big{animation:rb-glow 1.6s ease-in-out infinite alternate}
@keyframes rb-glow{from{filter:drop-shadow(0 0 1px #000)}to{filter:drop-shadow(0 0 5px #ffd36b) drop-shadow(0 0 2px #fff)}}
@media (prefers-reduced-motion:reduce){.rune-cards .rb-hand .rbc:not(.cant) .rune.big{animation:none;filter:drop-shadow(0 0 4px #ffd36b)}}

.rb-all{margin-top:16px}
.rb-all summary{cursor:pointer;font-weight:700}
.rb-cards{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;justify-content:center}
.rb-cards .rbc:hover{transform:translateY(-4px)}

/* Phones: names and resources above the field (the enemy first), the hand scrolls sideways */
@media (max-width:720px){
  .rb-table{display:flex;flex-direction:column;gap:6px;padding:8px 8px 0}
  .rb-name,.rb-res{position:static;width:auto}
  .rb-name{font-size:17px;text-align:center!important}
  .rb-name.them{order:-4}
  .rb-res.them{order:-3}
  .rb-name.me{order:-2}
  .rb-res.me{order:-1}
  .rb-res{display:flex;flex-direction:row;gap:6px}
  .rb-res .res{flex:1 1 0;min-width:0}
  .rb-field{margin:0 -8px}
  .rb-last .rbc{width:84px;height:116px;padding:6px 5px 4px}
  .rb-last .rbc .text,.rb-last .rbc .border{display:none!important}
  .rb-last .rbc .art{height:40px}
  .rb-last .rbc .rune.big{height:32px}
  .rb-last .rbc .name{font-size:11px}
  .rb-hand{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:24px 4px 10px}
}

/* Living backgrounds (js/games/runborg-backdrops.js): behind everything on the table. Each moving part
   has --d (how long one round takes) and --dl (a negative start, so it is already under way). */
.rb-backdrop{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.rb-backdrop *{animation-duration:var(--d,10s);animation-delay:var(--dl,0s);animation-iteration-count:infinite}
.bd-cloud{animation-name:bd-drift;animation-timing-function:linear}
@keyframes bd-drift{from{translate:-520px 0}to{translate:520px 0}}
.bd-gull{animation-name:bd-fly;animation-timing-function:linear}
@keyframes bd-fly{from{translate:-200px 10px}50%{translate:400px -10px}to{translate:1000px 12px}}
.bd-glint,.bd-star{animation-name:bd-twinkle;animation-timing-function:ease-in-out}
@keyframes bd-twinkle{0%,100%{opacity:.1}50%{opacity:1}}
.bd-boat{animation:bd-bob 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes bd-bob{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 2px;rotate:2deg}}
.bd-snow{animation-name:bd-fall;animation-timing-function:linear}
@keyframes bd-fall{from{translate:0 0}50%{translate:12px 210px}to{translate:-6px 420px}}
.bd-leaf{animation-name:bd-leaf;animation-timing-function:ease-in-out}
@keyframes bd-leaf{0%{translate:0 0;rotate:0deg}25%{translate:30px 105px;rotate:120deg}50%{translate:-10px 210px;rotate:200deg}75%{translate:35px 315px;rotate:320deg}100%{translate:5px 420px;rotate:420deg}}
.bd-smoke{animation-name:bd-smoke;animation-timing-function:ease-out;transform-box:fill-box;transform-origin:center}
@keyframes bd-smoke{from{translate:0 0;scale:.6;opacity:.8}to{translate:14px -70px;scale:2.2;opacity:0}}
.bd-window{animation:bd-flicker 2.6s steps(6) infinite}
@keyframes bd-flicker{0%,100%{opacity:1}40%{opacity:.82}60%{opacity:.95}80%{opacity:.75}}
.bd-aurora{transform-box:fill-box;transform-origin:50% 100%;animation-timing-function:ease-in-out;animation-direction:alternate}
.bd-aurora.a1{animation:bd-aurora 9s ease-in-out infinite alternate}
.bd-aurora.a2{animation:bd-aurora 13s ease-in-out -4s infinite alternate-reverse}
.bd-aurora.a3{animation:bd-aurora 17s ease-in-out -9s infinite alternate}
@keyframes bd-aurora{0%{transform:translateX(-30px) skewX(6deg) scaleY(.92);opacity:.65}50%{opacity:1}100%{transform:translateX(40px) skewX(-8deg) scaleY(1.08);opacity:.8}}
.bd-rays{animation:bd-rays 8s ease-in-out infinite alternate;transform-origin:420px 150px}
@keyframes bd-rays{from{rotate:-3deg;opacity:.7}to{rotate:3deg;opacity:1}}
.bd-sunglow{animation:bd-pulse 5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes bd-pulse{from{scale:.94}to{scale:1.06}}
body.still .rb-backdrop *{animation-play-state:paused}

/* What was paid, earned, taken or lost, rising from a resource box */
.res-float{position:absolute;z-index:5;transform:translateX(-50%);pointer-events:none;white-space:nowrap;font:900 16px system-ui,sans-serif;
  color:#7dff9a;text-shadow:0 1px 3px #000,0 0 2px #000;animation:rb-res-float 1.5s ease-out forwards}
.res-float.down{color:#ff8a7a}
@keyframes rb-res-float{0%{opacity:0;translate:0 6px}15%{opacity:1}70%{opacity:1}100%{opacity:0;translate:0 -26px}}
.rb-goal .start .won{color:var(--green)}
.rb-goal .start .not{opacity:.45}
/* The title before the member's name: purple, dark over a light sky and light over a dark one */
.rb-name .viking-av{vertical-align:middle;margin-right:4px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.rb-name .rb-title{font-size:1.1em;font-weight:900;color:var(--rb-title,#5b21b6)}
body[data-board=aurora],body[data-board=dusk]{--rb-title:#d9c2ff}
/* Against another player: the invite link and the challenge */
.rb-invite{display:flex;flex-direction:column;gap:8px}
.rb-invite-row{display:flex;gap:8px}
.rb-invite-row input{flex:1;min-width:0;font:inherit;font-size:13px;color:var(--text);background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:6px 10px}
.rb-challenge{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;flex-basis:100%}
.rb-challenge input{font:inherit;padding:5px 9px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text)}