/* Food Web Builder: a light woodland stage + white side cards (the same frame as the other science games). */
.fw-head{max-width:1080px;margin:0 auto;padding:4px 16px 0}
.fw-head h1{margin:6px 0 4px;font-size:clamp(24px,6vw,34px)}
.fw-head p{margin:0 0 10px;color:#4b5563;font-size:15px}
#fw-wrap{position:relative;max-width:1080px;margin:0 auto;padding:0 8px;user-select:none;-webkit-user-select:none}
.fw-bar{display:flex;align-items:center;gap:8px;padding:0 4px 8px}
.fw-bar .sp{flex:1}
.fw-bar button{height:40px;min-width:40px;padding:0 12px;border-radius:12px;border:0;background:#fff;box-shadow:0 1px 3px #0002;font:600 14px/1 system-ui,sans-serif;color:#1f2a3a;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.fw-main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
#fw-stage{position:relative;border-radius:22px;background:linear-gradient(#e3f1fb,#eef6e4 50%,#dcebc8);box-shadow:0 6px 16px #0002;overflow:hidden}
#fw-svg{display:block;width:100%;height:auto;max-height:calc(100vh - 230px);min-height:250px;margin:0 auto}
#fw-svg .fw-thing,#fw-svg .fw-badge{cursor:pointer}
.fw-band{font:700 10.5px system-ui,sans-serif;fill:#6b7280;letter-spacing:.6px}
.fw-small{font:600 10px system-ui,sans-serif;fill:#6b7280}
.fw-ghost{font:700 12px system-ui,sans-serif;fill:#6b7280}
.fw-arrow{font:800 13px system-ui,sans-serif}
.fw-hand{pointer-events:none;animation:fwtap 1s ease-in-out infinite}
@keyframes fwtap{50%{transform:translate(-3px,-5px)}}
#fw-banner{position:absolute;top:10px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);box-sizing:border-box;text-align:center;background:#fff8e6;box-shadow:0 0 0 2px #f2b53a,0 4px 10px #0002;color:#7a4b00;font:800 16px/1.3 system-ui,sans-serif;padding:7px 16px;border-radius:14px;pointer-events:none}
#fw-banner.pop{animation:fwpop .45s}
@keyframes fwpop{30%{transform:translateX(-50%) scale(1.08)}}
#fw-banner[hidden],#fw-float[hidden],#fw-out[hidden]{display:none}
#fw-tray{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:10px 12px 12px;background:#ffffffb8;border-top:1px solid #0001;scrollbar-width:thin}
.fw-it{flex:0 0 auto;width:66px;height:68px;border-radius:14px;border:0;background:#fff;box-shadow:0 1px 3px #0002;display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 11px system-ui,sans-serif;color:#1f2a3a;gap:3px;cursor:grab;touch-action:pan-x;position:relative;padding:0}
.fw-it img{height:38px;max-width:58px;object-fit:contain;pointer-events:none}
.fw-it.on{opacity:.5}.fw-it.on::after{content:'✓';position:absolute;top:3px;right:6px;color:#3f8a2a;font-size:13px}
.fw-it.sel{box-shadow:0 0 0 3px #f2b53a,0 1px 3px #0002;opacity:1}
#fw-float{position:fixed;z-index:50;pointer-events:none;filter:drop-shadow(0 6px 8px #0004)}
#fw-float img{width:80px;height:80px;object-fit:contain}
.fw-side{display:flex;flex-direction:column;gap:12px}
/* board, then the pack as a wide strip under it (keeps the side column from running far below the board); phones: the
   wrapper dissolves and the pack goes back to the end */
.fw-left{display:flex;flex-direction:column;gap:12px;min-width:0}
.fw-card{background:#fff;border-radius:18px;box-shadow:0 1px 4px #0002;padding:14px 16px}
.fw-nm{display:flex;align-items:center;gap:10px;font:800 22px system-ui,sans-serif}
.fw-nm img{height:46px;width:56px;object-fit:contain}
#fw-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
#fw-chips span{font:700 12px system-ui,sans-serif;padding:3px 8px;border-radius:999px;background:#e8f3df;color:#2f6b1f}
#fw-chips .c1{background:#fdf0d8;color:#8a5300}#fw-chips .c2{background:#fde2e2;color:#9b1c1c}
.fw-ln{font:14px/1.5 system-ui,sans-serif;color:#374151;margin:8px 0 0}
.fw-ln:empty{display:none}
.fw-ln .off{color:#9ca3af}.fw-ln .on{color:#1f2a3a;font-weight:600}
#fw-line{font:14px/1.5 system-ui,sans-serif;color:#374151;margin:8px 0 0}
#fw-out{margin-top:10px;height:38px;padding:0 14px;border-radius:12px;border:2px solid #e5e7eb;background:#fff;font:700 14px system-ui,sans-serif;color:#1f2a3a;cursor:pointer}
#fw-out:hover{border-color:#f2b53a}
.fw-lab{font:700 12px system-ui,sans-serif;color:#6b7280;text-transform:uppercase;letter-spacing:.6px;display:flex;justify-content:space-between;margin-bottom:6px}
#fw-graph{display:block;width:100%;height:auto}
.fw-gl{font:600 9px system-ui,sans-serif;fill:#6b7280}
#fw-key{display:flex;flex-wrap:wrap;gap:4px 12px;font:700 12px system-ui,sans-serif;margin-top:4px}
#fw-key i{display:inline-block;width:12px;height:4px;border-radius:2px;margin-right:4px;vertical-align:middle}
#fw-finds{display:flex;flex-direction:column;gap:4px}
#fw-finds div{display:flex;align-items:center;gap:8px;border-radius:8px;padding:5px 8px;background:#f3f4f6;color:#4b5563;font:600 13px/1.3 system-ui,sans-serif}
#fw-finds i{flex:0 0 auto;width:16px;height:16px;border-radius:5px;border:2px solid #cbd5e1;background:#fff;font:800 12px/14px system-ui,sans-serif;font-style:normal;text-align:center;color:#fff}
#fw-finds .got{background:#e3f1d8;color:#2f6b1f}#fw-finds .got i{background:#3f8a2a;border-color:#3f8a2a}
#fw-finds .now{box-shadow:0 0 0 2px #3f8a2a}
#fw-health{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:12px;background:#fff;box-shadow:0 1px 3px #0002;font:700 13px system-ui,sans-serif;color:#4b5563}
#fw-health b{font-size:15px;min-width:78px}
#fw-health .bar{width:90px;height:9px;border-radius:5px;background:#e5e7eb;overflow:hidden}
#fw-hbar{display:block;height:100%;border-radius:5px;transition:width .6s,background .6s}
.fw-h-thriving b{color:#2f7a1f}.fw-h-thriving #fw-hbar{background:#4caf3a}
.fw-h-stressed b{color:#b26a00}.fw-h-stressed #fw-hbar{background:#e8a020}
.fw-h-collapsing b{color:#b91c1c}.fw-h-collapsing #fw-hbar{background:#d9534f}
.fw-pack a{display:flex;gap:12px;align-items:center;background:#fff;border-radius:16px;box-shadow:0 1px 4px #0002;padding:12px 14px;text-decoration:none;color:#1f2a3a}
.fw-pack img{flex:0 0 auto;width:52px;height:auto;border-radius:6px;box-shadow:0 1px 4px #0003}
.fw-pack .tag{display:block;font:700 12px system-ui,sans-serif;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}
.fw-pack b{display:block;color:#0f6b4f;font-size:15px;margin:2px 0;line-height:1.3}
.fw-pack .ln{display:block;font-size:13px;color:#4b5563;line-height:1.4}
.fw-info{max-width:820px;margin:26px auto 0;padding:0 16px 30px}
.fw-info h2{font-size:22px;margin:26px 0 8px}.fw-info h3{font-size:17px;margin:18px 0 4px}
.fw-info p,.fw-info li{font-size:16px;line-height:1.6;color:#374151}
.fw-info ul{margin:0;padding-left:22px}
.fw-info li{margin:4px 0;padding-left:2px}
@media (max-width:820px){.fw-main{grid-template-columns:1fr}.fw-left{display:contents}.fw-pack{order:1}#fw-svg{max-height:none}#fw-tray{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto}}
@media (max-width:640px){.fw-bar{flex-wrap:wrap}#fw-health{order:5;flex:1 1 100%;box-sizing:border-box}#fw-health .bar{flex:1;width:auto}}
@media (max-width:420px){.fw-bar button .lbl{display:none}#fw-banner{font-size:13px;padding:6px 10px}.fw-it{width:62px;height:70px}}