/* Warfront styles. Ported from design/warfront/ (the design is binding - see
   specs/warfront-specs.md "Look & feel"). Rules copied from a mockup keep its
   exact values; the mockup's `.sc` wrapper is `.wf` here. Loaded after
   theme-afterglow.css. */

/* ---------- Full-screen shell (Warfront screens take over the viewport, like Menifot) ---------- */

#wf-team-screen,
#wf-screen,
#wf-gameover-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #020306;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: none;
}

#wf-team-screen:not(.hidden),
#wf-screen:not(.hidden),
#wf-gameover-screen:not(.hidden) {
  display: block;
}

:is(#wf-team-screen, #wf-screen, #wf-gameover-screen) .wf {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  min-height: 100%;
  box-sizing: border-box;
  background: #020306;
  color: #d6e2ec;
  font-family: Bahnschrift, 'DIN Alternate', 'Arial Narrow', 'Segoe UI', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Room under the last row for the floating reaction row (style.css .reaction-row). */
  padding: 0 0 calc(76px + env(safe-area-inset-bottom));
  text-align: left;
}

/* Every rule is scoped through an id (`:is(#wf-team-screen)`, `:is(#wf-screen, #wf-gameover-screen)`, or
   both for shared rules) so it beats style.css's global `button` /
   `button:hover:not(:disabled)` rules (otherwise a tapped button keeps the app's
   hover shadow on phones). Each mockup gets its own screen id because the two
   reuse class names (.cam, .world, .ptop ...) with different values. The game-over
   screen shares the battlefield's rules (its scene is the final map, built by the
   same code) and adds its own overrides from 4-game-over.html at the end. */

/* ---------- Ported from 1-team-select.html ---------- */

:is(#wf-team-screen, #wf-screen, #wf-gameover-screen) .wf button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;width:auto;min-height:0;border-radius:0;letter-spacing:normal;box-shadow:none;transition:none;transform:none}
:is(#wf-team-screen, #wf-screen, #wf-gameover-screen) .wf button:hover:not(:disabled),:is(#wf-team-screen, #wf-screen, #wf-gameover-screen) .wf button:active:not(:disabled){transform:none}
:is(#wf-team-screen, #wf-screen, #wf-gameover-screen) .wf button:focus-visible{outline:2px solid #4dff7a;outline-offset:2px}
:is(#wf-team-screen) .wf .lbl{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#8fa3b5}
:is(#wf-team-screen) .wf .grn{color:#4dff7a;text-shadow:0 0 6px rgba(77,255,122,.55)}
:is(#wf-team-screen) .wf .amb{color:#ffcc33;text-shadow:0 0 6px rgba(255,204,51,.5)}
:is(#wf-team-screen) .wf .pnl{position:relative;background:linear-gradient(180deg,#2b323b 0%,#1a1f26 45%,#11151a 100%);box-shadow:inset 0 0 0 1px #4f5c69,inset 0 1px 0 1px #93a4b4,inset 0 0 0 3px #0b0e12,inset 0 0 0 4px #2a323b;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
:is(#wf-team-screen) .wf .slot{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 8px 0 4px;font-size:13px;font-weight:700;letter-spacing:.06em;background:#05080b;box-shadow:inset 0 0 0 1px #2c3640}
:is(#wf-team-screen) .wf .slot .ri{width:34px;height:40px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 85%,rgba(150,140,90,.35),transparent 60%),#10151b;box-shadow:inset 0 0 0 1px #3a4652;flex:none}
:is(#wf-team-screen) .wf .slot .ri svg{width:28px;height:35px;overflow:visible}
:is(#wf-team-screen) .wf .empty{color:#4c5b69;font-weight:600;font-style:italic;padding-left:12px}
:is(#wf-team-screen) .wf .race{position:relative;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;text-align:left;min-height:100px;box-sizing:border-box;background:#05080b;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
:is(#wf-team-screen) .wf .race .stage{position:relative;width:128px;height:84px;flex:none;overflow:hidden}
:is(#wf-team-screen) .wf .race .stage .fig{position:absolute;bottom:4px;width:46px;height:57px}
:is(#wf-team-screen) .wf .race .stage svg{width:46px;height:57px;display:block;overflow:visible;animation:wfBob 1.6s ease-in-out infinite}
:is(#wf-team-screen) .wf .race .stage .fig:nth-child(2) svg{animation-delay:-.5s}.wf .race .stage .fig:nth-child(3) svg{animation-delay:-1s}
:is(#wf-team-screen) .wf .race .nm{font-size:18px;font-weight:700;letter-spacing:.24em}
:is(#wf-team-screen) .wf .race .ds{font-size:11.5px;line-height:1.35;margin-top:3px}
:is(#wf-team-screen) .wf .race .pick{position:absolute;top:8px;right:12px;font-size:9px;font-weight:700;letter-spacing:.2em;opacity:0}
:is(#wf-team-screen) .wf .r-forge{box-shadow:inset 0 0 0 1px #4a3f2a}
:is(#wf-team-screen) .wf .r-forge .stage{background:radial-gradient(ellipse 80% 26% at 50% 92%,rgba(140,120,80,.55),transparent 70%),radial-gradient(ellipse at 50% 40%,rgba(245,158,11,.3),transparent 70%),#120e06}
:is(#wf-team-screen) .wf .r-forge .nm{color:#ffbf3c}.wf .r-forge .ds{color:#cfc3a6}
:is(#wf-team-screen) .wf .r-horde{box-shadow:inset 0 0 0 1px #4a1f1f}
:is(#wf-team-screen) .wf .r-horde .stage{background:radial-gradient(ellipse 80% 26% at 50% 92%,rgba(140,110,80,.55),transparent 70%),radial-gradient(ellipse at 50% 40%,rgba(220,38,38,.32),transparent 70%),#140606}
:is(#wf-team-screen) .wf .r-horde .nm{color:#efe3cc}.wf .r-horde .ds{color:#d6b9a9}
:is(#wf-team-screen) .wf .r-arcane{box-shadow:inset 0 0 0 1px #3b2a6b}
:is(#wf-team-screen) .wf .r-arcane .stage{background:radial-gradient(ellipse 80% 26% at 50% 92%,rgba(120,110,140,.5),transparent 70%),radial-gradient(ellipse at 50% 40%,rgba(168,85,247,.38),transparent 70%),#0e0819}
:is(#wf-team-screen) .wf .r-arcane .nm{color:#cfb0ff}.wf .r-arcane .ds{color:#c9bde6}
:is(#wf-team-screen) .wf .r-forge.on{box-shadow:inset 0 0 0 2px #ffbf3c,inset 0 0 30px rgba(245,158,11,.25)}
:is(#wf-team-screen) .wf .r-horde.on{box-shadow:inset 0 0 0 2px #ff4d4d,inset 0 0 30px rgba(220,38,38,.3)}
:is(#wf-team-screen) .wf .r-arcane.on{box-shadow:inset 0 0 0 2px #b57cff,inset 0 0 30px rgba(181,124,255,.35)}
:is(#wf-team-screen) .wf .race.on .pick{opacity:1;color:#4dff7a;text-shadow:0 0 6px rgba(77,255,122,.6)}
:is(#wf-team-screen) .wf .race:not(.on) .stage svg{filter:saturate(.55) brightness(.75)}
:is(#wf-team-screen) .wf .seg{display:grid;gap:3px;padding:3px;background:#05080b;box-shadow:inset 0 0 0 1px #2c3640}
:is(#wf-team-screen) .wf .seg button{min-height:44px;font-size:14px;font-weight:700;letter-spacing:.1em;color:#8fa3b5;background:linear-gradient(180deg,#1b2128,#0d1115);box-shadow:inset 0 0 0 1px #2c3640}
:is(#wf-team-screen) .wf .seg button.on{color:#4dff7a;text-shadow:0 0 6px rgba(77,255,122,.6);box-shadow:inset 0 0 0 1px #4dff7a,inset 0 0 12px rgba(77,255,122,.25)}
:is(#wf-team-screen) .wf .mbtn{min-height:44px;padding:0 12px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#cfe0ee;background:linear-gradient(180deg,#2b333d,#141920);box-shadow:inset 0 0 0 1px #4f5c69,inset 0 1px 0 1px rgba(255,255,255,.08);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
/* sprites */
:is(#wf-team-screen) .wf .tm-red .tc{fill:#e5484d}.wf .tm-red .tcd{fill:#9e2328}
:is(#wf-team-screen) .wf .tm-blue .tc{fill:#3b82f6}.wf .tm-blue .tcd{fill:#1d4fb0}
:is(#wf-team-screen) .wf .ln{fill:none;stroke-width:1.8px;stroke-linecap:round}
:is(#wf-team-screen) .wf .str{fill:none;stroke:#f2ecff;stroke-width:.6px}
:is(#wf-team-screen) .wf .rim{fill:none;stroke:#f59e0b;stroke-width:1.2px}
:is(#wf-team-screen) .wf .orb{filter:drop-shadow(0 0 3px #c084fc);animation:wfOrb 1.4s ease-in-out infinite}
:is(#wf-team-screen) .wf .fire{filter:drop-shadow(0 0 4px #ff8a00);animation:wfOrb .9s ease-in-out infinite}
:is(#wf-team-screen) .wf .aura{fill:rgba(192,132,252,.28);filter:drop-shadow(0 0 4px #c084fc);animation:wfOrb 1.8s ease-in-out infinite}
:is(#wf-team-screen) .wf .axe{transform-box:fill-box;transform-origin:50% 100%;animation:wfSway 2.2s ease-in-out infinite}
:is(#wf-team-screen) .wf .flag{transform-box:fill-box;transform-origin:0 50%;animation:wfFlag 1.1s ease-in-out infinite}
:is(#wf-team-screen) .wf .sh{fill:rgba(0,0,0,.45)}
/* vista */
:is(#wf-team-screen) .wf .cam{position:relative;overflow:hidden;perspective:900px;perspective-origin:50% 20%;background:linear-gradient(180deg,#0a1222,#1a1410 70%,#000)}
:is(#wf-team-screen) .wf .world{position:absolute;transform-origin:50% 100%;transform:rotateX(40deg);transform-style:preserve-3d}
:is(#wf-team-screen) .wf .terrain{position:absolute;inset:0;overflow:hidden;background-color:#4f6a2a;background-image:radial-gradient(ellipse 300px 220px at 140px 160px,rgba(255,236,170,.16),transparent 70%),radial-gradient(rgba(0,0,0,.2) 1px,transparent 1.7px),radial-gradient(rgba(190,230,120,.12) 1px,transparent 1.7px),radial-gradient(rgba(30,50,15,.35) 2px,transparent 3.2px);background-size:auto,4px 4px,7px 7px,17px 13px}
:is(#wf-team-screen) .wf .shore{position:absolute;width:108px;height:100px;border-radius:50%;background:radial-gradient(ellipse,#c2ad78 0 40%,rgba(194,173,120,0) 70%)}
:is(#wf-team-screen) .wf .water{position:absolute;width:88px;height:82px;background-color:#135a80;background-image:repeating-linear-gradient(165deg,rgba(170,230,255,.24) 0 1px,transparent 1px 8px),radial-gradient(ellipse,#08324f 0%,#0f4a6e 40%,#1b7096 75%);-webkit-mask-image:radial-gradient(ellipse,#000 50%,transparent 70%);mask-image:radial-gradient(ellipse,#000 50%,transparent 70%);animation:wfRipple 3s linear infinite}
:is(#wf-team-screen) .wf .plat{position:absolute;transform-style:preserve-3d}
:is(#wf-team-screen) .wf .ptop{position:absolute;inset:0;border-radius:4px;background-color:#6d7a4a;background-image:radial-gradient(ellipse 46% 44% at 50% 50%,rgba(150,150,128,.95) 0 92%,transparent 100%),repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 1px,transparent 1px 22px);box-shadow:inset 0 0 0 2px rgba(25,35,12,.55)}
:is(#wf-team-screen) .wf .pw{position:absolute;background-color:#5a4a36}
:is(#wf-team-screen) .wf .pw-f{left:0;top:100%;width:100%;transform-origin:50% 0;transform:rotateX(-90deg);background-image:linear-gradient(180deg,#58772f 0 3px,rgba(0,0,0,0) 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.3) 0 2px,transparent 2px 7px),linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.5));filter:brightness(.82)}
:is(#wf-team-screen) .wf .pw-l,:is(#wf-team-screen) .wf .pw-r{top:0;height:100%;transform-origin:0 50%;transform:rotateY(90deg);background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 2px,transparent 2px 7px),linear-gradient(90deg,rgba(255,255,255,.06),rgba(0,0,0,.5))}
:is(#wf-team-screen) .wf .pw-l{left:0}.wf .pw-r{left:100%;filter:brightness(.6)}
:is(#wf-team-screen) .wf .ent{position:absolute;width:0;height:0;transform-style:preserve-3d}
:is(#wf-team-screen) .wf .dec{position:absolute;left:0;top:0;transform:translate(-50%,-50%) translateZ(1px);border-radius:50%;pointer-events:none}
:is(#wf-team-screen) .wf .bb{position:absolute;left:0;bottom:0;transform-origin:50% 100%;transform:translateX(-50%) rotateX(-40deg)}
:is(#wf-team-screen) .wf .bb > svg{display:block;width:100%;height:100%;overflow:visible}
:is(#wf-team-screen) .wf .torch{fill:#ffb347;filter:drop-shadow(0 0 3px #ff8a00);animation:wfFlick .35s steps(2) infinite}
:is(#wf-team-screen) .wf .aura-red{width:200px;height:200px;background:radial-gradient(circle,rgba(229,72,77,.35),transparent 70%)}
:is(#wf-team-screen) .wf .aura-blue{width:200px;height:200px;background:radial-gradient(circle,rgba(59,130,246,.35),transparent 70%)}
:is(#wf-team-screen) .wf .tshadow{width:46px;height:24px;margin-left:12px;margin-top:3px;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%)}
@keyframes wfBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes wfOrb{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes wfFlick{0%{opacity:1}100%{opacity:.6}}
@keyframes wfSway{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}
@keyframes wfFlag{0%,100%{transform:scaleX(1) skewY(0)}50%{transform:scaleX(.8) skewY(8deg)}}
@keyframes wfRipple{to{background-position:48px 0,0 0}}

/* ---------- Team select: dynamic parts the static mockup only draws once ---------- */

:is(#wf-team-screen) .wf .wf-vista { position: relative; }
:is(#wf-team-screen) .wf .wf-vista .cam { width: 100%; height: 250px; }
:is(#wf-team-screen) .wf .wf-vista .world { left: calc(50% - 250px); top: -130px; width: 500px; height: 380px; }
:is(#wf-team-screen) .wf .wf-head {
  position: absolute; left: 0; right: 0; top: 0; padding: 14px 14px 30px;
  display: flex; justify-content: space-between; align-items: flex-start;
  background: linear-gradient(180deg, rgba(2,3,6,.85), transparent);
}
:is(#wf-team-screen) .wf .wf-title { font-weight: 700; font-size: 26px; letter-spacing: .3em; color: #fff; text-shadow: 0 0 14px rgba(229,72,77,.5), 0 2px 0 #000; }
:is(#wf-team-screen) .wf .wf-title span { color: #ff5a5f; }
:is(#wf-team-screen) .wf .wf-badge { font-size: 10px; font-weight: 700; letter-spacing: .2em; padding: 6px 9px; background: rgba(26,19,5,.9); box-shadow: inset 0 0 0 1px #8a6a1a; }
:is(#wf-team-screen) .wf .wf-vista-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(0deg, #020306, transparent); }

:is(#wf-team-screen) .wf .wf-teams { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
:is(#wf-team-screen) .wf .wf-team { display: flex; flex-direction: column; gap: 6px; }
/* Keep both Join buttons level when the teams are uneven. */
:is(#wf-team-screen) .wf .wf-team > .mbtn { margin-top: auto; }
:is(#wf-team-screen) .wf .wf-team-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; }
:is(#wf-team-screen) .wf .wf-team-head > span:first-child { font-size: 15px; font-weight: 700; letter-spacing: .26em; color: #fff; }
:is(#wf-team-screen) .wf .wf-team-red .wf-team-head { background: linear-gradient(90deg, #7c1418, #2a0c0e); box-shadow: inset 0 0 0 1px #ff5a5f; }
:is(#wf-team-screen) .wf .wf-team-blue .wf-team-head { background: linear-gradient(270deg, #1d4fb0, #0b1a33); box-shadow: inset 0 0 0 1px #4f93ff; }
:is(#wf-team-screen) .wf .wf-join-red { color: #fff; background: linear-gradient(180deg, #ff5a5f, #a8262b); box-shadow: inset 0 0 0 1px #ffb3b6; }
:is(#wf-team-screen) .wf .wf-join-blue { color: #fff; background: linear-gradient(180deg, #4f93ff, #1d4fb0); box-shadow: inset 0 0 0 1px #b3d0ff; }
:is(#wf-team-screen) .wf .slot.wf-you { box-shadow: inset 0 0 0 1px #b57cff; }
:is(#wf-team-screen) .wf .slot .wf-pname { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
:is(#wf-team-screen) .wf .slot .wf-pname > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
:is(#wf-team-screen) .wf .slot .wf-prace { font-size: 9px; letter-spacing: .16em; color: #8fa3b5; }
:is(#wf-team-screen) .wf .slot .wf-prace.wf-none { color: #ffcc33; }
:is(#wf-team-screen) .wf .mbtn:disabled, :is(#wf-team-screen) .wf .mbtn.wf-on { opacity: .45; cursor: default; }
:is(#wf-team-screen) .wf .wf-captain-btn { width: 100%; margin-top: 10px; color: #ffcc33; box-shadow: inset 0 0 0 1px #8a6a1a; }
:is(#wf-team-screen) .wf .wf-bench { margin-top: 10px; line-height: 1.5; }
:is(#wf-team-screen) .wf .wf-bench b { color: #d6e2ec; font-weight: 700; }

:is(#wf-team-screen) .wf .wf-section-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px; }
:is(#wf-team-screen) .wf .wf-section-head > span:first-child { font-size: 14px; font-weight: 700; letter-spacing: .24em; color: #fff; }
:is(#wf-team-screen) .wf .wf-settings .wf-section-head { align-items: center; padding: 0; }
:is(#wf-team-screen) .wf .wf-settings .wf-section-head > span:first-child { font-size: 13px; }
:is(#wf-team-screen) .wf .wf-field { display: flex; flex-direction: column; gap: 5px; }
:is(#wf-team-screen) .wf .wf-settings.wf-locked .seg button:not(.on) { opacity: .55; }

:is(#wf-team-screen) .wf .wf-start {
  min-height: 70px; margin: 0 10px; display: flex; align-items: center; justify-content: center; gap: 14px;
  color: #fff; background: linear-gradient(180deg, #ff5a5f 0%, #c4262c 55%, #7c1418 100%);
  box-shadow: inset 0 0 0 1px #ffb3b6, inset 0 2px 0 1px rgba(255,255,255,.35);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
}
:is(#wf-team-screen) .wf .wf-start > span:first-child { font-size: 24px; }
:is(#wf-team-screen) .wf .wf-start > span:last-child { font-size: 22px; font-weight: 700; letter-spacing: .28em; }
:is(#wf-team-screen) .wf .wf-start:disabled { filter: saturate(.35) brightness(.6); cursor: default; }
:is(#wf-team-screen) .wf .wf-status { text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 0 14px; }
:is(#wf-team-screen) .wf .wf-error { min-height: 1em; text-align: center; font-size: 11px; letter-spacing: .1em; color: #ff8a8d; padding: 0 14px; }
:is(#wf-team-screen) .wf .wf-error.wf-notice { color: #4dff7a; text-shadow: 0 0 6px rgba(77,255,122,.45); }
:is(#wf-team-screen) .wf .wf-footer { display: flex; justify-content: center; margin: 4px 10px 0; }
:is(#wf-team-screen) .wf .wf-footer .mbtn { min-width: 160px; }

/* ---------- Ported from 2-battlefield.html (source/Main.dc.html) ---------- */

:is(#wf-screen, #wf-gameover-screen) .wf .lbl{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#8fa3b5}
:is(#wf-screen, #wf-gameover-screen) .wf .grn{color:#4dff7a;text-shadow:0 0 6px rgba(77,255,122,.55)}
:is(#wf-screen, #wf-gameover-screen) .wf .amb{color:#ffcc33;text-shadow:0 0 6px rgba(255,204,51,.5)}
:is(#wf-screen, #wf-gameover-screen) .wf .pnl{position:relative;background:linear-gradient(180deg,#2e3640 0%,#1a1f26 40%,#0f1318 100%);box-shadow:inset 0 0 0 1px #4f5c69,inset 0 1px 0 1px #9fb0c0,inset 0 0 0 3px #0b0e12,inset 0 0 0 4px #2a323b}
:is(#wf-screen, #wf-gameover-screen) .wf .chamf{clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
:is(#wf-screen, #wf-gameover-screen) .wf .well{background:#05080b;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #2c3640,inset 0 0 18px rgba(0,0,0,.95)}
:is(#wf-screen, #wf-gameover-screen) .wf .scan{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px)}
:is(#wf-screen, #wf-gameover-screen) .wf .hpseg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px}
:is(#wf-screen, #wf-gameover-screen) .wf .hpseg span{height:8px;transform:skewX(-20deg)}
/* ===== 2.5D camera ===== */
:is(#wf-screen, #wf-gameover-screen) .wf .vp{position:relative;width:390px;height:470px;overflow:auto;scrollbar-width:thin;scrollbar-color:#4f5c69 #05080b;background:#000}
:is(#wf-screen, #wf-gameover-screen) .wf .cam{position:relative;width:1120px;height:540px;overflow:hidden;perspective:1800px;perspective-origin:50% 45%;background:radial-gradient(ellipse 80% 60% at 50% 0%,#0b1220,#000 70%)}
:is(#wf-screen, #wf-gameover-screen) .wf .world{position:absolute;left:0;top:-230px;width:1120px;height:770px;transform-origin:50% 100%;transform:rotateX(40deg);transform-style:preserve-3d}
:is(#wf-screen, #wf-gameover-screen) .wf .terrain{position:absolute;inset:0;overflow:hidden;background-color:#4f6a2a;background-image:radial-gradient(ellipse 520px 380px at 260px 200px,rgba(255,236,170,.16),transparent 70%),radial-gradient(ellipse 300px 220px at 620px 560px,rgba(120,96,58,.45),transparent 70%),radial-gradient(ellipse 260px 200px at 560px 300px,rgba(130,104,62,.35),transparent 70%),radial-gradient(ellipse 340px 240px at 900px 680px,rgba(40,70,25,.55),transparent 70%),radial-gradient(ellipse 260px 180px at 380px 470px,rgba(96,128,48,.5),transparent 70%),radial-gradient(rgba(0,0,0,.2) 1px,transparent 1.7px),radial-gradient(rgba(190,230,120,.12) 1px,transparent 1.7px),radial-gradient(rgba(30,50,15,.35) 2px,transparent 3.2px),radial-gradient(rgba(150,120,70,.25) 3px,transparent 5px);background-size:auto,auto,auto,auto,auto,4px 4px,7px 7px,17px 13px,41px 37px;background-position:0 0,0 0,0 0,0 0,0 0,0 0,2px 3px,5px 1px,11px 7px}
:is(#wf-screen, #wf-gameover-screen) .wf .lake-sh{position:absolute;left:-90px;top:-90px;width:350px;height:270px;border-radius:50%;background:radial-gradient(ellipse,#bfae7a 0 52%,rgba(191,174,122,0) 70%)}
:is(#wf-screen, #wf-gameover-screen) .wf .lake{position:absolute;left:-70px;top:-70px;width:310px;height:230px;border-radius:50%;background-color:#0e4d73;background-image:repeating-linear-gradient(170deg,rgba(170,230,255,.2) 0 1px,transparent 1px 9px),radial-gradient(ellipse at 40% 40%,#062a44 0%,#0c4669 45%,#1d7aa0 75%);-webkit-mask-image:radial-gradient(ellipse,#000 52%,transparent 70%);mask-image:radial-gradient(ellipse,#000 52%,transparent 70%);animation:wfRipple 4s linear infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .shore{position:absolute;width:108px;height:100px;border-radius:50%;background:radial-gradient(ellipse,#c2ad78 0 40%,rgba(194,173,120,0) 70%)}
:is(#wf-screen, #wf-gameover-screen) .wf .water{position:absolute;width:88px;height:82px;background-color:#135a80;background-image:repeating-linear-gradient(165deg,rgba(170,230,255,.24) 0 1px,transparent 1px 8px),radial-gradient(ellipse,#08324f 0%,#0f4a6e 40%,#1b7096 75%);-webkit-mask-image:radial-gradient(ellipse,#000 50%,transparent 70%);mask-image:radial-gradient(ellipse,#000 50%,transparent 70%);animation:wfRipple 3s linear infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .ford{position:absolute;width:96px;height:76px;background:radial-gradient(ellipse,rgba(120,200,220,.55) 0 30%,rgba(120,200,220,.2) 55%,transparent 70%)}
:is(#wf-screen, #wf-gameover-screen) .wf .road{position:absolute;height:34px;border-radius:17px;transform-origin:0 50%;background-color:#8a7350;background-image:radial-gradient(rgba(0,0,0,.22) 1px,transparent 1.6px),radial-gradient(rgba(255,240,200,.14) 1px,transparent 1.6px),linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.18) 32%,rgba(0,0,0,0) 36%,rgba(0,0,0,0) 64%,rgba(0,0,0,.18) 68%,rgba(0,0,0,0) 70%);background-size:5px 5px,9px 9px,auto;filter:blur(1.5px);opacity:.85}
:is(#wf-screen, #wf-gameover-screen) .wf .floor{position:absolute;border-radius:50%;background:radial-gradient(ellipse,rgba(20,38,14,.9) 0 45%,rgba(20,38,14,0) 70%)}
:is(#wf-screen, #wf-gameover-screen) .wf .scorch{position:absolute;width:110px;height:90px;border-radius:50%;background:radial-gradient(ellipse,#120c08 0 20%,rgba(40,25,12,.85) 35%,rgba(60,40,20,.4) 55%,transparent 72%)}
:is(#wf-screen, #wf-gameover-screen) .wf .tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(16,70px);grid-template-rows:repeat(11,70px)}
:is(#wf-screen, #wf-gameover-screen) .wf .tile{background:transparent}
/* plateaus */
:is(#wf-screen, #wf-gameover-screen) .wf .plat{position:absolute;transform-style:preserve-3d}
:is(#wf-screen, #wf-gameover-screen) .wf .ptop{position:absolute;inset:0;border-radius:4px;box-shadow:inset 0 0 0 2px rgba(25,35,12,.55),inset 0 0 22px rgba(0,0,0,.35)}
:is(#wf-screen, #wf-gameover-screen) .wf .pt-grass{background-color:#5c7b31;background-image:radial-gradient(ellipse at 30% 25%,rgba(255,240,170,.22),transparent 65%),radial-gradient(rgba(0,0,0,.2) 1px,transparent 1.7px),radial-gradient(rgba(200,240,130,.14) 1px,transparent 1.7px),radial-gradient(rgba(30,50,15,.3) 2px,transparent 3.2px);background-size:auto,4px 4px,7px 7px,17px 13px}
:is(#wf-screen, #wf-gameover-screen) .wf .pt-stone{background-color:#6d7a4a;background-image:radial-gradient(ellipse 46% 44% at 50% 50%,rgba(150,150,128,.95) 0 92%,transparent 100%),repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 1px,transparent 1px 22px),radial-gradient(ellipse at 30% 25%,rgba(255,240,190,.25),transparent 70%),radial-gradient(rgba(0,0,0,.18) 1px,transparent 1.6px);background-size:auto,auto,auto,auto,5px 5px}
:is(#wf-screen, #wf-gameover-screen) .wf .pt-rock{background-color:#7a6a4c;background-image:radial-gradient(ellipse at 30% 25%,rgba(255,235,190,.22),transparent 65%),linear-gradient(135deg,rgba(255,255,255,.07) 0 25%,transparent 25% 50%,rgba(0,0,0,.08) 50% 75%,transparent 75%),radial-gradient(rgba(0,0,0,.22) 1px,transparent 1.7px);background-size:auto,26px 26px,5px 5px}
:is(#wf-screen, #wf-gameover-screen) .wf .pw{position:absolute;background-color:#5a4a36}
:is(#wf-screen, #wf-gameover-screen) .wf .pw-f{left:0;top:100%;width:100%;transform-origin:50% 0;transform:rotateX(-90deg);background-image:linear-gradient(180deg,#58772f 0 3px,rgba(0,0,0,0) 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.3) 0 2px,transparent 2px 7px,rgba(255,255,255,.07) 7px 8px,transparent 8px 13px),linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.5));filter:brightness(.82)}
:is(#wf-screen, #wf-gameover-screen) .wf .pw-l,:is(#wf-screen, #wf-gameover-screen) .wf .pw-r{top:0;height:100%;transform-origin:0 50%;transform:rotateY(90deg);background-image:linear-gradient(90deg,#58772f 0 3px,rgba(0,0,0,0) 3px),repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 2px,transparent 2px 7px,rgba(255,255,255,.07) 7px 8px,transparent 8px 13px),linear-gradient(90deg,rgba(255,255,255,.06),rgba(0,0,0,.5))}
:is(#wf-screen, #wf-gameover-screen) .wf .pw-l{left:0;filter:brightness(1.05)}
:is(#wf-screen, #wf-gameover-screen) .wf .pw-r{left:100%;filter:brightness(.6)}
:is(#wf-screen, #wf-gameover-screen) .wf .ramp{position:absolute;background-color:#8f8a70;background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 2px,transparent 2px 10px),linear-gradient(180deg,rgba(0,0,0,.25),transparent 20%,transparent 80%,rgba(0,0,0,.3));box-shadow:inset 0 0 0 2px rgba(0,0,0,.3)}
/* billboards */
:is(#wf-screen, #wf-gameover-screen) .wf .ent{position:absolute;width:0;height:0;transform-style:preserve-3d}
:is(#wf-screen, #wf-gameover-screen) .wf .dec{position:absolute;left:0;top:0;transform:translate(-50%,-50%) translateZ(1px);border-radius:50%;pointer-events:none}
:is(#wf-screen, #wf-gameover-screen) .wf .bb{position:absolute;left:0;bottom:0;transform-origin:50% 100%;transform:translateX(-50%) rotateX(-40deg)}
:is(#wf-screen, #wf-gameover-screen) .wf .bb svg{display:block;width:100%;height:100%;overflow:visible}
:is(#wf-screen, #wf-gameover-screen) .wf .dim svg{filter:brightness(.5) saturate(.6)}
:is(#wf-screen, #wf-gameover-screen) .wf .tshadow{width:46px;height:24px;margin-left:12px;margin-top:3px;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%)}
:is(#wf-screen, #wf-gameover-screen) .wf .cglow{width:110px;height:80px;background:radial-gradient(ellipse,rgba(90,216,255,.55),rgba(90,216,255,.12) 45%,transparent 70%);animation:wfPulse 2.2s ease-in-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .cring{width:150px;height:150px;border:2px solid #5ad8ff;box-shadow:0 0 18px rgba(90,216,255,.8),inset 0 0 18px rgba(90,216,255,.5);animation:wfPulse 2.2s ease-in-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .glowc{filter:drop-shadow(0 0 6px rgba(90,216,255,.9))}
:is(#wf-screen, #wf-gameover-screen) .wf .twk{animation:wfOrb 2.4s ease-in-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .aura-red{width:230px;height:230px;background:radial-gradient(circle,rgba(229,72,77,.35),rgba(229,72,77,.1) 45%,transparent 70%)}
:is(#wf-screen, #wf-gameover-screen) .wf .aura-blue{width:230px;height:230px;background:radial-gradient(circle,rgba(59,130,246,.35),rgba(59,130,246,.1) 45%,transparent 70%)}
:is(#wf-screen, #wf-gameover-screen) .wf .bshadow{width:170px;height:80px;margin-left:24px;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%)}
:is(#wf-screen, #wf-gameover-screen) .wf .torch{fill:#ffb347;filter:drop-shadow(0 0 3px #ff8a00);animation:wfFlick .35s steps(2) infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .rn{filter:drop-shadow(0 0 3px #c084fc);animation:wfOrb 1.6s ease-in-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .forge{filter:drop-shadow(0 0 5px #ff8a00);animation:wfOrb 1s ease-in-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .beam{position:absolute;left:50%;bottom:58px;width:8px;height:120px;margin-left:-4px;border-radius:4px;background:linear-gradient(0deg,rgba(192,132,252,.9),rgba(192,132,252,0));filter:blur(2px);animation:wfOrb 1.8s ease-in-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .smoke{position:absolute;left:50%;bottom:0;width:0;height:0}
:is(#wf-screen, #wf-gameover-screen) .wf .smoke span{position:absolute;left:-10px;bottom:0;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,rgba(110,110,110,.75),rgba(70,70,70,0) 70%);animation:wfSmoke 3.2s linear infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .smoke span:nth-child(2){animation-delay:-1.1s}.sc .smoke span:nth-child(3){animation-delay:-2.2s}
:is(#wf-screen, #wf-gameover-screen) .wf .clabel{font-size:9px;font-weight:700;letter-spacing:.22em;color:#5ad8ff;padding:2px 6px;background:rgba(2,6,10,.8);box-shadow:inset 0 0 0 1px #2a6c85;white-space:nowrap;text-shadow:0 0 6px rgba(90,216,255,.8)}
:is(#wf-screen, #wf-gameover-screen) .wf .ping{width:30px;height:30px;position:relative}
:is(#wf-screen, #wf-gameover-screen) .wf .ping::before{content:"";position:absolute;inset:0;border:2px solid #ffcc33;animation:wfPing 1.4s ease-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .ping::after{content:"!";position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:15px;color:#ffcc33;text-shadow:0 0 6px #ffcc33}
/* ground orders */
:is(#wf-screen, #wf-gameover-screen) .wf .gline{position:absolute;height:0;border-top:4px dashed #4dff7a;transform:translateZ(2px);filter:drop-shadow(0 0 4px #4dff7a);transform-origin:0 50%}
:is(#wf-screen, #wf-gameover-screen) .wf .gline::after{content:"";position:absolute;right:-12px;top:-11px;border-left:14px solid #4dff7a;border-top:9px solid transparent;border-bottom:9px solid transparent}
:is(#wf-screen, #wf-gameover-screen) .wf .gline.ally{border-top:3px dashed rgba(255,122,126,.9);filter:drop-shadow(0 0 3px #ff5a5f)}
:is(#wf-screen, #wf-gameover-screen) .wf .gline.ally::after{border-left-color:rgba(255,122,126,.95);top:-10px}
:is(#wf-screen, #wf-gameover-screen) .wf .gline.foe{border-top:3px dashed rgba(255,122,126,.9);filter:drop-shadow(0 0 3px #ff5a5f)}
:is(#wf-screen, #wf-gameover-screen) .wf .gline.foe::after{border-left-color:rgba(255,122,126,.95);top:-10px}
:is(#wf-screen, #wf-gameover-screen) .wf .click{position:absolute;width:52px;height:52px;margin:-26px 0 0 -26px;border:3px solid #4dff7a;border-radius:50%;box-shadow:0 0 12px #4dff7a;transform:translateZ(2px);animation:wfClick 1.4s ease-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .range{position:absolute;border-radius:50%;border:2px dashed rgba(77,255,122,.6);background:radial-gradient(circle,rgba(77,255,122,.1),transparent 70%);transform:translateZ(1px)}
:is(#wf-screen, #wf-gameover-screen) .wf .fogp{position:absolute;inset:0;transform:translateZ(110px);pointer-events:none;background:radial-gradient(circle 150px at 1090px 60px,rgba(0,0,0,.96) 35%,transparent 100%),radial-gradient(circle 140px at 1110px 740px,rgba(0,0,0,.96) 35%,transparent 100%),linear-gradient(90deg,transparent 0 76%,rgba(2,3,6,.45) 84%,rgba(2,3,6,.7) 100%)}
/* squads */
:is(#wf-screen, #wf-gameover-screen) .wf .tm-red .tc{fill:#e5484d}.sc .tm-red .tcd{fill:#9e2328}
:is(#wf-screen, #wf-gameover-screen) .wf .tm-blue .tc{fill:#3b82f6}.sc .tm-blue .tcd{fill:#1d4fb0}
:is(#wf-screen, #wf-gameover-screen) .wf .ln{fill:none;stroke-width:1.8px;stroke-linecap:round}
:is(#wf-screen, #wf-gameover-screen) .wf .str{fill:none;stroke:#f2ecff;stroke-width:.6px}
:is(#wf-screen, #wf-gameover-screen) .wf .rim{fill:none;stroke:#f59e0b;stroke-width:1.2px}
:is(#wf-screen, #wf-gameover-screen) .wf .orb{filter:drop-shadow(0 0 3px #c084fc);animation:wfOrb 1.4s ease-in-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .fire{filter:drop-shadow(0 0 4px #ff8a00);animation:wfOrb .9s ease-in-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .rune{fill:none;stroke:#c084fc;stroke-width:.9px;stroke-dasharray:2 1.5;filter:drop-shadow(0 0 2px #c084fc);animation:wfRune 3s linear infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .aura{fill:rgba(192,132,252,.28);filter:drop-shadow(0 0 4px #c084fc);animation:wfOrb 1.8s ease-in-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .float{animation:wfFloat 2s ease-in-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .axe{transform-box:fill-box;transform-origin:50% 100%;animation:wfSway 2.2s ease-in-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .flag{transform-box:fill-box;transform-origin:0 50%;animation:wfFlag 1.1s ease-in-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .sqbb{width:76px;height:74px;transform:translateX(-50%) rotateX(-40deg) scale(1.28)}
:is(#wf-screen, #wf-gameover-screen) .wf .fig{position:absolute;width:34px;height:42px}
:is(#wf-screen, #wf-gameover-screen) .wf .spw{position:absolute;inset:0}
:is(#wf-screen, #wf-gameover-screen) .wf .flip .spw{transform:scaleX(-1)}
:is(#wf-screen, #wf-gameover-screen) .wf .sqbb .sp{width:34px;height:42px;display:block;overflow:visible;animation:wfSqBob 1.6s ease-in-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .d1 .sp{animation-delay:-.4s}.sc .d2 .sp{animation-delay:-.8s}.sc .d3 .sp{animation-delay:-1.2s}
:is(#wf-screen, #wf-gameover-screen) .wf .unk svg *{fill:#05080b !important;stroke:#05080b !important}
:is(#wf-screen, #wf-gameover-screen) .wf .unk .spw{filter:drop-shadow(0 0 1.5px #9fb3c6);opacity:.85}
:is(#wf-screen, #wf-gameover-screen) .wf .hpb{position:absolute;left:16px;right:16px;top:0;height:5px;background:#050505;box-shadow:0 0 0 1px #000}
:is(#wf-screen, #wf-gameover-screen) .wf .hpb span{display:block;height:100%}
:is(#wf-screen, #wf-gameover-screen) .wf .hp-g{background:repeating-linear-gradient(90deg,#4dff7a 0 5px,#0a2a12 5px 6px)}
:is(#wf-screen, #wf-gameover-screen) .wf .hp-y{background:repeating-linear-gradient(90deg,#ffcc33 0 5px,#2a2005 5px 6px)}
:is(#wf-screen, #wf-gameover-screen) .wf .chip{position:absolute;top:-5px;right:-14px;font-size:10px;font-weight:800;padding:1px 6px 1px 4px;color:#fff;white-space:nowrap;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
:is(#wf-screen, #wf-gameover-screen) .wf .c-red{background:linear-gradient(180deg,#ff5a5f,#a8262b)}
:is(#wf-screen, #wf-gameover-screen) .wf .c-blue{background:linear-gradient(180deg,#4f93ff,#1d4fb0)}
:is(#wf-screen, #wf-gameover-screen) .wf .c-unk{background:#1a2028;color:#9fb3c6}
:is(#wf-screen, #wf-gameover-screen) .wf .sqsh{width:84px;height:46px;background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%)}
:is(#wf-screen, #wf-gameover-screen) .wf .rg-red{width:70px;height:70px;border:1.5px solid rgba(255,90,95,.75);background:radial-gradient(circle,rgba(255,90,95,.14),transparent 70%)}
:is(#wf-screen, #wf-gameover-screen) .wf .rg-blue{width:70px;height:70px;border:1.5px solid rgba(79,147,255,.75);background:radial-gradient(circle,rgba(79,147,255,.14),transparent 70%)}
:is(#wf-screen, #wf-gameover-screen) .wf .rg-unk{display:none}
:is(#wf-screen, #wf-gameover-screen) .wf .selr{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2.5px solid #4dff7a;box-shadow:0 0 8px #4dff7a;transform:translateZ(2px)}
/* overlays + console */
:is(#wf-screen, #wf-gameover-screen) .wf .vign{position:absolute;inset:0;pointer-events:none;z-index:8;background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 60%,rgba(0,0,0,.55) 100%)}
:is(#wf-screen, #wf-gameover-screen) .wf .edge{position:absolute;z-index:9;display:grid;place-items:center;color:#cfe0ee;font-size:12px;pointer-events:none;text-shadow:0 0 6px #000}
:is(#wf-screen, #wf-gameover-screen) .wf .mmap{position:relative;width:112px;height:77px;overflow:hidden;background:#4f6a2a}
:is(#wf-screen, #wf-gameover-screen) .wf .mmap span{position:absolute}
:is(#wf-screen, #wf-gameover-screen) .wf .cmd{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-height:78px;padding-bottom:5px;box-sizing:border-box;background:radial-gradient(ellipse at 50% 40%,#2a1d48 0%,#141020 60%,#0b0f13 100%);box-shadow:inset 0 0 0 1px #46525e,inset 0 0 0 2px #06080a,inset 0 0 14px rgba(0,0,0,.9);border-radius:3px}
:is(#wf-screen, #wf-gameover-screen) .wf .cmd .hk{position:absolute;top:3px;left:5px;font-size:10px;font-weight:800;color:#ffcc33}
:is(#wf-screen, #wf-gameover-screen) .wf .cmd .cc{position:absolute;top:3px;right:4px;font-size:10px;font-weight:800;color:#ffcc33}
:is(#wf-screen, #wf-gameover-screen) .wf .cmd .cs{width:30px;height:38px;position:relative}
:is(#wf-screen, #wf-gameover-screen) .wf .cmd .cs .sp{width:30px;height:38px;display:block;overflow:visible}
:is(#wf-screen, #wf-gameover-screen) .wf .cmd .cn{font-size:8.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#cdb8ff;line-height:1.1;text-align:center;padding:0 2px}
:is(#wf-screen, #wf-gameover-screen) .wf .cmd.dim{opacity:.38;filter:grayscale(.85)}
:is(#wf-screen, #wf-gameover-screen) .wf .cmd.on{box-shadow:inset 0 0 0 1px #4dff7a,inset 0 0 0 2px #06080a,inset 0 0 16px rgba(77,255,122,.35),0 0 10px rgba(77,255,122,.4)}
:is(#wf-screen, #wf-gameover-screen) .wf .cmd.sys{min-height:44px;flex-direction:row;justify-content:center;gap:6px;padding:0;background:linear-gradient(180deg,#222a34,#0b0f13)}
:is(#wf-screen, #wf-gameover-screen) .wf .cmd.sys .ci{font-size:16px;filter:drop-shadow(0 0 6px rgba(77,255,122,.7))}
:is(#wf-screen, #wf-gameover-screen) .wf .cmd.sys .cn{color:#9fe8b4;font-size:9px}
:is(#wf-screen, #wf-gameover-screen) .wf .qc{min-height:36px;padding:0 10px;font-size:11px;font-weight:700;letter-spacing:.06em;color:#cfe0ee;background:linear-gradient(180deg,#252d36,#12171d);box-shadow:inset 0 0 0 1px #3d4955;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
:is(#wf-screen, #wf-gameover-screen) .wf .rdy{display:flex;align-items:center;gap:4px;padding:3px 6px;font-size:10px;font-weight:700;letter-spacing:.06em;background:rgba(3,5,8,.8);box-shadow:inset 0 0 0 1px #2c3640}
:is(#wf-screen, #wf-gameover-screen) .wf .led{width:6px;height:6px;border-radius:50%}
@keyframes wfSqBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@keyframes wfOrb{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes wfFlick{0%{opacity:1}100%{opacity:.6}}
@keyframes wfSway{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}
@keyframes wfFlag{0%,100%{transform:scaleX(1) skewY(0)}50%{transform:scaleX(.8) skewY(8deg)}}
@keyframes wfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes wfRune{to{stroke-dashoffset:-14}}
@keyframes wfRipple{to{background-position:48px 0,0 0}}
@keyframes wfSmoke{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translateY(-70px) translateX(12px) scale(2.4);opacity:0}}
@keyframes wfClick{0%{transform:translateZ(2px) scale(1.3);opacity:1}100%{transform:translateZ(2px) scale(.6);opacity:.25}}
@keyframes wfPing{0%{transform:rotate(45deg) scale(.6);opacity:1}100%{transform:rotate(45deg) scale(1.5);opacity:0}}
@keyframes wfPulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes wfBlink{0%,100%{opacity:1}50%{opacity:.4}}

/* ---------- Battlefield: parts the mockup draws inline or doesn't need ---------- */

:is(#wf-screen, #wf-gameover-screen) .wf .vp { width: 100%; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-units { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
:is(#wf-screen, #wf-gameover-screen) .wf .ent { pointer-events: none; }
:is(#wf-screen, #wf-gameover-screen) .wf .mmap { cursor: pointer; }
:is(#wf-screen, #wf-gameover-screen) .wf .edge.hidden { display: none; }
:is(#wf-screen, #wf-gameover-screen) .wf .scan svg { display: block; }
/* Taps go to the .tiles grid under raised ground, not to the plateaus drawn over it. */
:is(#wf-screen, #wf-gameover-screen) .wf .plat { pointer-events: none; }
:is(#wf-screen, #wf-gameover-screen) .wf .tile { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-orders { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
/* Multi-leg march lines: only the last leg carries the arrowhead. */
:is(#wf-screen, #wf-gameover-screen) .wf .gline.wf-noarrow::after { display: none; }
/* A teammate's orders in blue when your team is blue (the mockup's .ally is red's). */
:is(#wf-screen, #wf-gameover-screen) .wf .gline.ally.wf-ally-blue { border-top-color: rgba(127,176,255,.9); filter: drop-shadow(0 0 3px #4f93ff); }
:is(#wf-screen, #wf-gameover-screen) .wf .gline.ally.wf-ally-blue::after { border-left-color: rgba(127,176,255,.95); }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-units .ent { transition: none; will-change: transform; }
/* A stack's labels (HP bar, count chip, load crystal) float a little toward the camera
   inside the billboard, so the browser's 3D sort never draws the castle, a tree or the
   fog haze over them (they were cut off near the castle). The figures stay in place. */
:is(#wf-screen, #wf-gameover-screen) .wf .wf-units .sqbb { transform-style: preserve-3d; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-units .sqbb > .hpb,
:is(#wf-screen, #wf-gameover-screen) .wf .wf-units .sqbb > .chip,
:is(#wf-screen, #wf-gameover-screen) .wf .wf-units .sqbb > .wf-load { transform: translateZ(40px); }
/* Fog of war: a haze plane over unseen ground (fills set per tile). */
:is(#wf-screen, #wf-gameover-screen) .wf .wf-fog { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-fog rect { fill: rgba(3,5,10,0); transition: fill .4s; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-fog rect.on { fill: rgba(3,5,10,.58); }

/* ---------- Ported from 3-resolution.html (source/Resolution.dc.html): live combat effects ---------- */

:is(#wf-screen, #wf-gameover-screen) .wf .hp-r{background:repeating-linear-gradient(90deg,#ff5a5f 0 5px,#2a0808 5px 6px)}
:is(#wf-screen, #wf-gameover-screen) .wf .dust span{background:radial-gradient(circle,rgba(200,175,120,.7),rgba(200,175,120,0) 70%);animation-duration:1.6s}
:is(#wf-screen, #wf-gameover-screen) .wf .boom{position:absolute;border-radius:50%;background:radial-gradient(circle,#fff 0 10%,#ffe58a 18%,rgba(255,150,40,.92) 32%,rgba(229,72,77,.45) 50%,transparent 66%);animation:wfBoom 1.1s ease-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .shock{position:absolute;border-radius:50%;border:3px solid #ffe58a;box-shadow:0 0 12px #ff9a3c;animation:wfShock 1.1s ease-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .bolt{position:absolute;height:5px;border-radius:3px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(255,154,60,0),#ff9a3c 45%,#fff1b8);box-shadow:0 0 12px #ff8a00,0 0 4px #fff;animation:wfBolt .5s linear infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .bolt.v{background:linear-gradient(90deg,rgba(192,132,252,0),#c084fc 45%,#f3e8ff);box-shadow:0 0 12px #a855f7,0 0 4px #fff}
:is(#wf-screen, #wf-gameover-screen) .wf .spk{position:absolute;left:50%;top:50%;width:0;height:0}
:is(#wf-screen, #wf-gameover-screen) .wf .spk i{position:absolute;left:-1.5px;top:0;width:3px;height:11px;border-radius:2px;background:#fff1b0;box-shadow:0 0 6px #ffb347;animation:wfSpark .7s ease-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .flame{position:absolute;width:18px;height:30px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 72%,#fff3b0 0 14%,#ffb347 34%,#ff5a1f 58%,rgba(255,60,0,0) 74%);transform-origin:50% 100%;animation:wfFlame .38s ease-in-out infinite alternate}
:is(#wf-screen, #wf-gameover-screen) .wf .dmg{position:absolute;font-size:30px;font-weight:800;color:#ff5a5f;text-shadow:0 0 14px rgba(229,72,77,.95),0 2px 0 #000;white-space:nowrap;animation:wfRise 1.4s ease-out infinite}
:is(#wf-screen, #wf-gameover-screen) .wf .loss{position:absolute;font-size:15px;font-weight:800;padding:2px 7px;color:#fff;white-space:nowrap;animation:wfRise 1.6s ease-out infinite}
@keyframes wfBoom{0%{transform:scale(.45);opacity:1}70%{opacity:1}100%{transform:scale(1.15);opacity:.55}}
@keyframes wfShock{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.5);opacity:0}}
@keyframes wfBolt{0%{opacity:.35}50%{opacity:1}100%{opacity:.35}}
@keyframes wfSpark{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-30px);opacity:0}}
@keyframes wfFlame{0%{transform:scaleY(.82) scaleX(1.05)}100%{transform:scaleY(1.18) scaleX(.92)}}
@keyframes wfRise{0%{transform:translateY(6px);opacity:0}20%{opacity:1}100%{transform:translateY(-14px);opacity:.85}}
@keyframes wfDrain{0%{width:80%}60%,100%{width:65%}}

/* Live effects: the mockup's looping frames play once on the map, then fade and go. */
:is(#wf-screen, #wf-gameover-screen) .wf .wf-fx { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-fx * { animation-iteration-count: 1 !important; animation-fill-mode: forwards; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-fx .bb { animation: wfFxOut var(--life, 1.4s) linear forwards; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-fx .bolt { animation-duration: .45s; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-fx .dmg.wf-unit { font-size: 22px; }
:is(#wf-screen, #wf-gameover-screen) .wf .loss.c-red { background: #a8262b; box-shadow: inset 0 0 0 1px #ff8a8e; }
:is(#wf-screen, #wf-gameover-screen) .wf .loss.c-blue { background: #1d4fb0; box-shadow: inset 0 0 0 1px #8cb6ff; }
@keyframes wfLoadFloat { 0%, 100% { transform: translateZ(40px) translateY(0); } 50% { transform: translateZ(40px) translateY(-3px); } }
@keyframes wfFxOut { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
/* Floating numbers sit in front of the stacks' labels (see .sqbb above). */
:is(#wf-screen, #wf-gameover-screen) .wf .wf-fx .bb { transform-style: preserve-3d; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-fx .bb > .dmg, :is(#wf-screen, #wf-gameover-screen) .wf .wf-fx .bb > .loss { translate: 0 0 56px; }
/* A burning castle (below half HP): the siege frame's flames and smoke, kept lit. */
:is(#wf-screen, #wf-gameover-screen) .wf .wf-burn { position: absolute; inset: 0; pointer-events: none; }
/* HUD: the base bar blinks as it drops (the siege frame's draining bar). */
:is(#wf-screen, #wf-gameover-screen) .wf .hpseg.wf-hpdrop { animation: wfBlink .25s steps(1) 4; }
/* Under attack: the HUD-panel banner over the map, the mockup's amber ping on tile + minimap. */
:is(#wf-screen, #wf-gameover-screen) .wf .wf-alert { position: absolute; left: 50%; top: 52px; z-index: 10; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 7px 14px; border: 0; color: inherit; cursor: pointer; white-space: nowrap; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-alert.hidden { display: none; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-alert .amb { font-size: 12px; font-weight: 700; letter-spacing: .24em; animation: wfBlink 1s steps(1) infinite; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-alert .lbl { font-size: 8.5px; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-mping { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 1.5px solid #ffcc33; box-shadow: 0 0 6px #ffcc33; box-sizing: border-box; transform: rotate(45deg); animation: wfBlink .5s steps(1) infinite; }

/* ---------- Ported from 2c-command-cards.html (source/Rosters.dc.html): per-race command cards ---------- */

:is(#wf-screen, #wf-gameover-screen) .wf .f .cmd{background:radial-gradient(ellipse 80% 22% at 50% 70%,rgba(150,130,90,.45),transparent 70%),radial-gradient(ellipse at 50% 40%,#3a2a0e 0%,#1a1308 60%,#0b0f13 100%)}
:is(#wf-screen, #wf-gameover-screen) .wf .h .cmd{background:radial-gradient(ellipse 80% 22% at 50% 70%,rgba(150,120,90,.45),transparent 70%),radial-gradient(ellipse at 50% 40%,#3e1010 0%,#1c0808 60%,#0b0f13 100%)}
:is(#wf-screen, #wf-gameover-screen) .wf .f .cn{color:#f1d9a6}
:is(#wf-screen, #wf-gameover-screen) .wf .h .cn{color:#efe3cc}
:is(#wf-screen, #wf-gameover-screen) .wf .cmd.struct{box-shadow:inset 0 0 0 2px #8b93a1,inset 0 0 0 3px #06080a,inset 0 0 14px rgba(245,158,11,.25);border-radius:0}
:is(#wf-screen, #wf-gameover-screen) .wf .cmd .tag{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:6.5px;font-weight:800;letter-spacing:.14em;color:#8b93a1}
:is(#wf-screen, #wf-gameover-screen) .wf .cmd.on{box-shadow:inset 0 0 0 1px #4dff7a,inset 0 0 0 2px #06080a,inset 0 0 16px rgba(77,255,122,.35),0 0 10px rgba(77,255,122,.4)}
:is(#wf-screen, #wf-gameover-screen) .wf .cmd.dim{opacity:.38;filter:grayscale(.85)}

/* ---------- Command console: real-time parts the mockups don't draw ---------- */

/* The 💎 price under the 🔩 one (advanced units), in the HUD's mineral cyan. */
:is(#wf-screen, #wf-gameover-screen) .wf .cmd .wf-cm { position: absolute; top: 16px; right: 4px; font-size: 8.5px; font-weight: 800; color: #5ad8ff; text-shadow: 0 0 5px rgba(90,216,255,.6); }
/* A structure card's tag sits under its prices so the two never touch. */
:is(#wf-screen, #wf-gameover-screen) .wf .cmd.struct .tag { top: 28px; }
/* Queue: how many are coming (under the hotkey) and the one being built (a bar like the stacks' HP). */
:is(#wf-screen, #wf-gameover-screen) .wf .cmd .wf-q { position: absolute; top: 15px; left: 5px; font-size: 9px; font-weight: 800; color: #4dff7a; text-shadow: 0 0 6px rgba(77,255,122,.6); }
:is(#wf-screen, #wf-gameover-screen) .wf .cmd .wf-qbar { position: absolute; left: 4px; right: 4px; bottom: 2px; height: 3px; background: #050505; box-shadow: 0 0 0 1px #000; }
:is(#wf-screen, #wf-gameover-screen) .wf .cmd .wf-qbar span { display: block; height: 100%; background: repeating-linear-gradient(90deg,#4dff7a 0 5px,#0a2a12 5px 6px); transition: width .2s linear; }
:is(#wf-screen, #wf-gameover-screen) .wf .cmd.wf-busy { box-shadow: inset 0 0 0 1px #2f8a4a, inset 0 0 0 2px #06080a, inset 0 0 14px rgba(77,255,122,.18); }
:is(#wf-screen, #wf-gameover-screen) .wf .cmd.struct.wf-busy { box-shadow: inset 0 0 0 2px #8b93a1, inset 0 0 0 3px #06080a, inset 0 0 14px rgba(77,255,122,.3); }
:is(#wf-screen, #wf-gameover-screen) .wf .cmd .cn { hyphens: manual; }
:is(#wf-screen, #wf-gameover-screen) .wf .cmd:disabled { cursor: default; }
:is(#wf-screen, #wf-gameover-screen) .wf .cmd.sys.dim { opacity: .38; filter: grayscale(.85); }
/* A loaded hauler carries a crystal over its stack; a dropped load lies on the ground. */
:is(#wf-screen, #wf-gameover-screen) .wf .wf-load { position: absolute; top: 6px; left: 31px; width: 14px; height: 16px; animation: wfLoadFloat 2s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(90,216,255,.95)); }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-load svg { width: 100%; height: 100%; display: block; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-dropglow { width: 54px; height: 34px; background: radial-gradient(ellipse, rgba(90,216,255,.5), rgba(90,216,255,.1) 45%, transparent 70%); animation: wfPulse 2.2s ease-in-out infinite; }
/* Gains float up like the damage numbers, in mineral cyan. */
:is(#wf-screen, #wf-gameover-screen) .wf .dmg.wf-gain { font-size: 20px; color: #5ad8ff; text-shadow: 0 0 12px rgba(90,216,255,.95), 0 2px 0 #000; }
/* Notice lines over the map, in the mockup's "[Team] …" overlay style. */
:is(#wf-screen, #wf-gameover-screen) .wf #wf-feed > span { animation: wfFxOut 3.5s linear forwards; }

/* ---------- Lighthouses (Step 8b): drawn in the sprites' language, not in the mockups yet ---------- */

/* The lamp burns in the holder's colour and throws a pulsing pool of light on the
   ground like a vein's glow; unlit grey while neutral. */
:is(#wf-screen, #wf-gameover-screen) .wf .tm-none .tc { fill: #5d636d; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-lh.tm-red .wf-lamp { filter: drop-shadow(0 0 4px #ff5a5f) drop-shadow(0 0 2px #ffd0d2); animation: wfOrb 1.8s ease-in-out infinite; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-lh.tm-blue .wf-lamp { filter: drop-shadow(0 0 4px #4f93ff) drop-shadow(0 0 2px #d0e2ff); animation: wfOrb 1.8s ease-in-out infinite; }
:is(#wf-screen, #wf-gameover-screen) .wf .lglow { width: 130px; height: 92px; animation: wfPulse 2.2s ease-in-out infinite; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-lh.tm-red .lglow { background: radial-gradient(ellipse, rgba(255,90,95,.5), rgba(255,90,95,.12) 45%, transparent 70%); }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-lh.tm-blue .lglow { background: radial-gradient(ellipse, rgba(79,147,255,.5), rgba(79,147,255,.12) 45%, transparent 70%); }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-lh.tm-none .lglow { display: none; }
/* A flip: the new colour flashes out from the lamp (the siege frame's shock ring, tinted). */
:is(#wf-screen, #wf-gameover-screen) .wf .wf-lflash { position: absolute; left: 20px; top: 0; width: 100px; height: 100px; border-radius: 50%; animation: wfShock 1.1s ease-out forwards; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-lf-red { border: 3px solid #ff8a8e; background: radial-gradient(circle, rgba(255,90,95,.55), transparent 65%); box-shadow: 0 0 16px #ff5a5f; }
:is(#wf-screen, #wf-gameover-screen) .wf .wf-lf-blue { border: 3px solid #8cb6ff; background: radial-gradient(circle, rgba(79,147,255,.55), transparent 65%); box-shadow: 0 0 16px #4f93ff; }
/* Minimap: a small diamond in the holder's colour, grey while neutral. */
:is(#wf-screen) .wf .wf-mlh { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; transform: rotate(45deg); box-sizing: border-box; border: 1px solid #fff; background: #5d636d; }
:is(#wf-screen) .wf .wf-mlh.tm-red { background: #ff5a5f; box-shadow: 0 0 4px #ff5a5f; }
:is(#wf-screen) .wf .wf-mlh.tm-blue { background: #4f93ff; box-shadow: 0 0 4px #4f93ff; }

/* ---------- Ported from 4-game-over.html (source/GameOver.dc.html) ---------- */

/* The victory scene: the final map (battlefield rules above) seen through the mockup's
   390x330 camera window, centred on the fallen base. No panning, no taps. */
#wf-gameover-screen .wf .wf-go-vp{width:100%;height:330px;overflow:hidden;pointer-events:none}
#wf-gameover-screen .wf .cam{background:radial-gradient(ellipse 90% 60% at 50% 0%,#2a0d10,#000 75%)}
#wf-gameover-screen .wf.wf-go-blue-won .cam{background:radial-gradient(ellipse 90% 60% at 50% 0%,#0d1a2e,#000 75%)}
#wf-gameover-screen .wf.wf-go-draw .cam{background:radial-gradient(ellipse 90% 60% at 50% 0%,#0b1220,#000 75%)}
#wf-gameover-screen .wf .tiles{pointer-events:none}
#wf-gameover-screen .wf .fireglow{width:260px;height:220px;background:radial-gradient(ellipse,rgba(255,120,30,.45),rgba(255,80,20,.12) 45%,transparent 70%);animation:wfOrb 1.2s ease-in-out infinite}
#wf-gameover-screen .wf .wf-ruin .smoke span{animation-name:wfSmokeGo}
#wf-gameover-screen .wf .confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
#wf-gameover-screen .wf .confetti i{position:absolute;top:-10px;width:5px;height:9px;animation:wfFall 3.2s linear infinite}
/* The winners cheer (the mockup's victorious army). */
#wf-gameover-screen .wf.wf-go-red-won .sqbb.tm-red .sp,
#wf-gameover-screen .wf.wf-go-blue-won .sqbb.tm-blue .sp{animation:wfCheer .9s ease-in-out infinite}
#wf-gameover-screen .wf.wf-go-red-won .sqbb.tm-red .d1 .sp,#wf-gameover-screen .wf.wf-go-blue-won .sqbb.tm-blue .d1 .sp{animation-delay:-.25s}
#wf-gameover-screen .wf.wf-go-red-won .sqbb.tm-red .d2 .sp,#wf-gameover-screen .wf.wf-go-blue-won .sqbb.tm-blue .d2 .sp{animation-delay:-.5s}
#wf-gameover-screen .wf.wf-go-red-won .sqbb.tm-red .d3 .sp,#wf-gameover-screen .wf.wf-go-blue-won .sqbb.tm-blue .d3 .sp{animation-delay:-.7s}
#wf-gameover-screen .wf .wf-go-title{animation:goPulse 2s ease-in-out infinite}
#wf-gameover-screen .wf.wf-go-blue-won .wf-go-title{animation-name:goPulseBlue}
#wf-gameover-screen .wf.wf-go-draw .wf-go-title{animation-name:goPulseDraw}
/* Final base HP */
#wf-gameover-screen .wf .wf-go-bar{height:100%;background:repeating-linear-gradient(90deg,#4dff7a 0 6px,#0a2a12 6px 7px);box-shadow:0 0 8px #4dff7a}
/* Stats table */
#wf-gameover-screen .wf .row{display:grid;grid-template-columns:42px minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:4px;align-items:center;min-height:50px;padding:0 10px 0 4px;font-size:13px}
#wf-gameover-screen .wf .row > span:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums}
#wf-gameover-screen .wf .por{width:38px;height:44px;display:grid;place-items:center;background:#0b0f14;box-shadow:inset 0 0 0 1px #2c3640}
#wf-gameover-screen .wf .por svg{width:32px;height:40px;overflow:visible}
#wf-gameover-screen .wf .mbtn{min-height:56px;padding:0 12px;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#cfe0ee;background:linear-gradient(180deg,#2b333d,#141920);box-shadow:inset 0 0 0 1px #4f5c69,inset 0 1px 0 1px rgba(255,255,255,.08);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
#wf-gameover-screen .wf .mbtn.wf-go-red{color:#fff;background:linear-gradient(180deg,#ff5a5f 0%,#c4262c 55%,#7c1418 100%);box-shadow:inset 0 0 0 1px #ffb3b6,inset 0 2px 0 1px rgba(255,255,255,.3)}
#wf-gameover-screen .wf .mbtn.wf-go-blue{color:#fff;background:linear-gradient(180deg,#4f93ff 0%,#2563d8 55%,#123a8c 100%);box-shadow:inset 0 0 0 1px #b3d0ff,inset 0 2px 0 1px rgba(255,255,255,.3)}
@keyframes wfCheer{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes wfSmokeGo{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translateY(-110px) translateX(18px) scale(3);opacity:0}}
@keyframes wfFall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(280px) rotate(540deg);opacity:.2}}
@keyframes goPulse{0%,100%{text-shadow:0 0 18px rgba(255,90,95,.9),0 0 40px rgba(229,72,77,.6),0 3px 0 #000}50%{text-shadow:0 0 28px rgba(255,150,150,1),0 0 70px rgba(229,72,77,.9),0 3px 0 #000}}

/* ---------- Game over: parts the mockup doesn't draw, in its style ---------- */

/* Blue's and a draw's title glow (the mockup only draws Red winning). */
@keyframes goPulseBlue{0%,100%{text-shadow:0 0 18px rgba(79,147,255,.9),0 0 40px rgba(59,130,246,.6),0 3px 0 #000}50%{text-shadow:0 0 28px rgba(160,200,255,1),0 0 70px rgba(59,130,246,.9),0 3px 0 #000}}
@keyframes goPulseDraw{0%,100%{text-shadow:0 0 18px rgba(255,204,51,.7),0 0 40px rgba(255,204,51,.35),0 3px 0 #000}50%{text-shadow:0 0 28px rgba(255,224,140,.9),0 0 70px rgba(255,204,51,.6),0 3px 0 #000}}
/* Play Again for someone who can't start it: dimmed like the console's unaffordable cards. */
#wf-gameover-screen .wf .mbtn:disabled{opacity:.45;filter:grayscale(.7);cursor:default}
#wf-gameover-screen .wf .wf-error{min-height:1em;text-align:center;font-size:11px;letter-spacing:.1em;color:#ff8a8d;padding:0 14px}
#wf-gameover-screen .wf .wf-error.wf-notice{color:#8fa3b5;text-shadow:none}
/* The room's shared scoreboard (renderScoreboard's <li><span>name</span><span.sb-points>) as wells. */
#wf-gameover-screen .wf .wf-go-scores{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
#wf-gameover-screen .wf .wf-go-scores li{display:flex;justify-content:space-between;align-items:center;min-height:36px;padding:0 12px;font-size:13px;font-weight:700;letter-spacing:.06em;background:#05080b;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #2c3640,inset 0 0 18px rgba(0,0,0,.95)}
#wf-gameover-screen .wf .wf-go-scores .sb-points{color:#4dff7a;text-shadow:0 0 6px rgba(77,255,122,.55);font-variant-numeric:tabular-nums}
#wf-gameover-screen .wf .wf-go-scores .sb-points.negative{color:#ff5a5f;text-shadow:0 0 6px rgba(255,90,95,.5)}
#wf-gameover-screen .wf .wf-go-scores:empty::after{content:'No points yet';display:block;padding:0 10px;font-size:11px;color:#4c5b69;font-style:italic}

@media (prefers-reduced-motion: reduce) {
  :is(#wf-team-screen, #wf-screen, #wf-gameover-screen) .wf *,
  :is(#wf-team-screen, #wf-screen, #wf-gameover-screen) .wf *::before,
  :is(#wf-team-screen, #wf-screen, #wf-gameover-screen) .wf *::after { animation: none !important; }
}