.ff-game{max-width:1100px;margin:1rem auto;font-family:system-ui,Arial,sans-serif;color:#17283b}.ff-game *{box-sizing:border-box}.ff-hud{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px;background:#e8f1fc;border-radius:12px 12px 0 0;font-size:clamp(13px,2vw,18px)}.ff-hud strong{font-size:1.5em;color:#b42318}.ff-game button{background:#cf2926;color:#fff;border:0;border-radius:8px;padding:10px 16px;font-weight:700;cursor:pointer}.ff-game button:hover{background:#a71e1b}.ff-scene{position:relative;aspect-ratio:1000/650;overflow:hidden;touch-action:none;cursor:crosshair;user-select:none;background:linear-gradient(#81c9f8 0%,#d7f0ff 72%,#8da97d 73%)}.ff-sky{position:absolute;inset:0;background:radial-gradient(ellipse at 15% 18%,#fff9 0 6%,transparent 7%),radial-gradient(ellipse at 37% 12%,#fff9 0 5%,transparent 6%)}.ff-road{position:absolute;bottom:0;width:100%;height:13%;background:#5c666f;border-top:7px solid #d9d7c9}.ff-building{position:absolute;left:47%;top:7%;width:49%;height:80%;background:repeating-linear-gradient(0deg,#c8b69b 0 18%,#b2a189 18.3% 19%,#c8b69b 19.4% 20%);border:5px solid #665d53;box-shadow:9px 10px 0 #0002}.ff-roof{position:absolute;top:-3%;left:-3%;width:106%;height:5%;background:#343d48;border-bottom:4px solid #596574}.ff-windows{position:absolute;inset:5% 5% 7%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,1fr);gap:4% 7%}.ff-window{position:relative;border:5px solid #746c65;background:linear-gradient(120deg,#132f46,#305776 52%,#122c42);box-shadow:3px 4px 0 #0004;overflow:visible}.ff-window:before{content:"";position:absolute;left:47%;height:100%;border-left:3px solid #74889a}.ff-window:after{content:"";position:absolute;bottom:-8px;left:-12%;width:124%;height:6px;background:#8e8175}.ff-flame{display:none;position:absolute;inset:-10% 2% 0;background:radial-gradient(ellipse at 50% 95%,#fff4a2 0 13%,#ffbf22 27%,#ff5a00 55%,transparent 70%);clip-path:polygon(0 100%,6% 50%,23% 73%,33% 8%,48% 53%,63% 0,73% 63%,88% 20%,100% 100%);animation:ff-flicker .24s infinite alternate;filter:drop-shadow(0 0 8px orange)}.ff-window.burning .ff-flame{display:block}.ff-progress{position:absolute;left:0;bottom:0;height:6px;background:#40e6ff;width:0%;box-shadow:0 0 6px #fff}.ff-window.burning{box-shadow:0 0 14px 4px #ff7b21}.ff-door{position:absolute;bottom:0;left:43%;width:14%;height:10%;background:#40566a;border:5px solid #8a8175}.ff-truck{position:absolute;left:2%;bottom:12%;width:39%;height:18%;background:#d62b25;border:4px solid #a91d1b;border-radius:8px 23px 5px 5px;box-shadow:0 8px 0 #2a2e35}.ff-tank{position:absolute;left:3%;top:15%;width:58%;height:72%;border:3px solid #ddd;background:repeating-linear-gradient(0deg,#bbb 0 5px,#d5d9dc 6px 10px);color:#aa1919;text-align:center;font-size:clamp(8px,1.7vw,17px);font-weight:900;padding-top:5%}.ff-cab{position:absolute;right:0;top:0;width:36%;height:100%;background:#ed302b;border-left:3px solid #8c1c19}.ff-windshield{position:absolute;top:7%;right:8%;width:70%;height:43%;background:#72c2ed;border:4px solid #263747;transform:skew(8deg)}.ff-wheel{position:absolute;bottom:-22%;width:18%;aspect-ratio:1;background:#1b2025;border:8px solid #363d44;border-radius:50%;box-shadow:inset 0 0 0 7px #abb4b9}.ff-wheel.one{left:13%}.ff-wheel.two{right:11%}.ff-beacon{position:absolute;right:17%;top:-14%;width:12%;height:12%;background:#267fff;border-radius:5px;box-shadow:0 0 15px #1174ff;animation:ff-flicker .5s infinite alternate}.ff-water{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.ff-water path{fill:none;stroke-linecap:round;stroke-linejoin:round}.ff-water [data-stream-shadow]{stroke:#258dca;stroke-width:12;opacity:.45}.ff-water [data-stream]{stroke:#e6fbff;stroke-width:5;stroke-dasharray:13 6;animation:ff-flow .3s linear infinite}.ff-water [data-splash]{fill:#d9faff;stroke:#fff;stroke-width:4;opacity:.8}.ff-water:not(.active){display:none}.ff-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#10283db8;z-index:3;padding:15px}.ff-overlay[hidden]{display:none}.ff-overlay-box{max-width:420px;text-align:center;background:#fff;border-radius:14px;padding:clamp(12px,3vw,28px);box-shadow:0 12px 30px #0005}.ff-overlay-box h3{margin:0 0 12px;font-size:clamp(19px,3vw,28px)}.ff-overlay-box p{font-size:clamp(12px,1.6vw,16px)}.ff-help{font-size:14px;color:#40536a;margin:9px 0}@keyframes ff-flicker{from{transform:scale(.9) skew(-3deg);opacity:.8}to{transform:scale(1.08) skew(4deg);opacity:1}}@keyframes ff-flow{to{stroke-dashoffset:-19}}@media(max-width:600px){.ff-hud{gap:5px;padding:8px}.ff-game button{padding:7px 9px}.ff-window{border-width:2px}.ff-wheel{border-width:3px}.ff-tank{border-width:1px}.ff-overlay-box{max-width:85%}}

.ff-game .ff-overlay[hidden]{display:none!important}

/* Schwenkbarer Dachmonitor auf dem Tanklöschfahrzeug */
.ff-monitor{position:absolute;z-index:2;left:19%;top:-30%;width:24%;height:37%;pointer-events:none}
.ff-monitor-base{position:absolute;left:18%;bottom:0;width:38%;height:50%;background:#4b535d;border:2px solid #1d2630;border-radius:5px 5px 2px 2px}
.ff-monitor-arm{position:absolute;left:36%;bottom:43%;width:83%;height:30%;border:2px solid #24323c;border-radius:8px;background:linear-gradient(#c9d3d9,#657783 55%,#394b59);transform-origin:0% 50%;transform:rotate(var(--ff-monitor-angle,-42deg));box-shadow:0 2px 2px #0005}
.ff-monitor-nozzle{position:absolute;left:112%;bottom:48%;width:18%;height:19%;background:#283d49;border:2px solid #111e27;border-radius:3px;transform-origin:-380% 50%;transform:rotate(var(--ff-monitor-angle,-42deg))}

/* Monitorrohr: Düse ist Bestandteil des drehenden Rohres */
.ff-monitor-arm{left:36%;bottom:43%;width:83%;height:30%;transform-origin:0% 50%;}
.ff-monitor-nozzle{left:auto;right:-15%;top:12%;bottom:auto;width:19%;height:76%;transform:none;border-radius:2px 5px 5px 2px;}

.ff-difficulty{margin:0 0 12px}.ff-difficulty-options{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:10px 0}.ff-difficulty-options label{font-size:14px;cursor:pointer;background:#e9f1f8;border:1px solid #c8d8e5;border-radius:7px;padding:7px}.ff-difficulty-options label:has(input:checked){background:#c9e7ff;border-color:#3278b4}.ff-difficulty[hidden]{display:none}