/* STREET SOCCER — Fan Wall (public comments) */
#fanwall { justify-content: flex-start; padding-top: 130px; }
.fw-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin: 0 auto 26px; width: min(1280px, 100%); }
.fw-head .sec-head { margin-bottom: 0; max-width: 640px; }
.fw-stats { display: flex; align-items: center; gap: 22px; padding: 18px 22px; flex-wrap: wrap; }
.fw-avg { display: flex; align-items: center; gap: 10px; }
.fw-avg b { font-family: var(--display); font-weight: 400; font-size: 46px; line-height: 1; }
.stars, .fw-stars { color: var(--gold); letter-spacing: 2px; text-shadow: 0 0 10px rgba(255, 201, 60, .5); }
.fw-avg .stars { font-size: 20px; }
.fw-total { color: var(--muted); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; }
.fw-total b { color: #fff; font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .02em; }
.fw-list { width: min(1280px, 100%); margin: 0 auto; columns: 3 320px; column-gap: 14px; }
.fw-card { break-inside: avoid; margin-bottom: 14px; padding: 18px 18px 14px; display: block; }
.fw-card::before { background: var(--tc); box-shadow: 0 0 14px var(--tc); }
.fw-card.fresh { animation: fwIn .9s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes fwIn { from { opacity: 0; transform: translateY(-30px) scale(.9); } }
.fw-top { display: flex; align-items: center; gap: 12px; }
.fw-av { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 20px; color: #fff; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--tc) 85%, #fff), color-mix(in srgb, var(--tc) 55%, #000)); box-shadow: 0 0 14px -2px var(--tc); }
.fw-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fw-name { font-family: var(--display); font-weight: 400; letter-spacing: .05em; font-size: 18px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-meta { color: var(--muted); font-size: 13px; font-weight: 600; }
.fw-crest { width: 40px; height: 40px; object-fit: contain; flex: none; }
.fw-card .fw-stars { margin: 10px 0 6px; font-size: 15px; }
.fw-msg { color: #e3dcec; font-size: 16px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.fw-reply { margin-top: 12px; padding: 10px 12px; background: rgba(255, 255, 255, .04); border-left: 3px solid var(--red); }
.fw-reply-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.fw-reply-head b { font-family: var(--display); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.fw-reply-logo { width: 34px; height: auto; }
.fw-badge { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--red); padding: 1px 7px; }
.fw-reply-msg { color: #e3dcec; font-size: 15px; line-height: 1.45; margin-top: 6px; white-space: pre-line; overflow-wrap: anywhere; }
.fw-like { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--muted); padding: 4px 10px; border: 1px solid var(--line); border-radius: 20px; transition: color .2s, border-color .2s; }
.fw-like:hover, .fw-like.on { color: #ff4d6d; border-color: #ff4d6d; }
.fw-like.pop span { animation: bump .5s; display: inline-block; }
.fw-empty { text-align: center; color: var(--muted); font-size: 18px; padding: 30px; width: min(1280px, 100%); margin: 0 auto; background: var(--panel); border: 1px dashed var(--line); }
.fw-more { text-align: center; margin-top: 10px; }
.fw-more .btn[hidden], .fw-empty[hidden] { display: none; }

/* floating button */
.fab {
  position: fixed; right: clamp(16px, 2vw, 28px); bottom: 22px; z-index: 26;
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px;
  font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; font-size: 15px; color: #fff;
  background: linear-gradient(100deg, var(--red), var(--accent)); border-radius: 40px;
  box-shadow: 0 10px 30px -8px var(--accent), 0 0 0 1px rgba(255, 255, 255, .2) inset;
  transition: transform .2s, opacity .2s; animation: fabPulse 2.6s ease-in-out infinite;
}
.fab:hover { transform: translateY(-3px) scale(1.04); }
.fab i { font-style: normal; font-size: 12px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; background: #fff; color: #111; letter-spacing: 0; font-family: var(--body); font-weight: 700; }
.fab i[hidden] { display: none; }
@keyframes fabPulse { 0%, 100% { box-shadow: 0 10px 30px -8px var(--accent), 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 50% { box-shadow: 0 10px 30px -8px var(--accent), 0 0 0 12px transparent; } }

/* modal form */
.fw-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.fw-modal[hidden] { display: none; }
.fw-backdrop { position: absolute; inset: 0; background: rgba(4, 2, 8, .7); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.fw-form {
  position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 28px 26px 22px;
  background: rgba(16, 11, 22, .96); border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
  transform: translateY(30px) scale(.96); opacity: 0; transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), opacity .3s;
}
.fw-form::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--red), var(--accent), var(--accent2)); }
.fw-modal.open .fw-backdrop { opacity: 1; }
.fw-modal.open .fw-form { transform: none; opacity: 1; }
.fw-form h3 { font-size: 34px; margin-bottom: 14px; }
.fw-x { position: absolute; right: 14px; top: 10px; font-size: 32px; line-height: 1; color: var(--muted); padding: 4px 8px; }
.fw-x:hover { color: #fff; }
.fw-field { display: block; margin-bottom: 14px; }
.fw-field > span { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #cfc6da; margin-bottom: 6px; }
.fw-field small { font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--muted); }
.fw-form input, .fw-form textarea {
  width: 100%; font: inherit; font-size: 17px; color: #fff; background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  padding: 11px 13px; outline: none; transition: border-color .2s, box-shadow .2s; resize: vertical;
}
.fw-form input:focus, .fw-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.star-input { display: flex; gap: 4px; }
.si { font-size: 34px; line-height: 1; color: rgba(255, 255, 255, .18); transition: color .15s, transform .15s; padding: 0 2px; }
.si.on { color: var(--gold); text-shadow: 0 0 14px rgba(255, 201, 60, .6); }
.si:hover { transform: scale(1.18); }
.fw-teams { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.fw-team { aspect-ratio: 1; padding: 4px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); transition: border-color .2s, background .2s, transform .2s; }
.fw-team img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(.7) brightness(.75); transition: filter .2s; }
.fw-team:hover img, .fw-team.on img { filter: none; }
.fw-team.on { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 22%, transparent); transform: translateY(-2px); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.fw-err { min-height: 22px; color: #ff6b6b; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.fw-submit { width: 100%; }
.fw-note { color: var(--muted); font-size: 13px; text-align: center; margin-top: 12px; }
body.modal-open { overflow: hidden; }
body.modal-open .fab { opacity: 0; pointer-events: none; }

/* launch wishlist form (reuses the modal styles above) */
.wl-lead { color: #cfc6da; font-size: 16px; line-height: 1.45; margin: -6px 0 18px; }
.wl-req { color: var(--accent) !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; }
.fw-form input.bad { border-color: #ff6b6b; box-shadow: 0 0 0 3px rgba(255, 107, 107, .2); }
.wl-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #cfc6da; line-height: 1.4; margin: 4px 0 10px; cursor: pointer; }
.wl-consent input { width: 18px; height: 18px; flex: none; margin-top: 1px; padding: 0; accent-color: var(--accent); }
.wl-step[hidden] { display: none; }
.wl-done { text-align: center; padding: 10px 0 4px; }
.wl-done .wl-lead { margin: 0 auto 22px; max-width: 360px; }
.wl-check { width: 74px; height: 74px; margin: 6px auto 16px; border-radius: 50%; display: grid; place-items: center; font-size: 38px; color: #fff; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent)); box-shadow: 0 0 40px -6px var(--accent); animation: wlPop .6s cubic-bezier(.2, .9, .3, 1.5); }
@keyframes wlPop { from { transform: scale(0) rotate(-30deg); } }
.btn svg use, .fw-submit svg { fill: currentColor; }

.toast { position: fixed; left: 50%; top: 86px; z-index: 70; transform: translate(-50%, -20px); opacity: 0; pointer-events: none;
  background: rgba(16, 11, 22, .95); border: 1px solid var(--accent); color: #fff; font-weight: 700; letter-spacing: .04em; padding: 12px 20px; box-shadow: 0 0 30px -6px var(--accent); }
.toast.show { animation: toast 3.2s ease forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -20px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -10px); } }

@media (max-width: 820px) {
  .fab { padding: 12px 16px; bottom: 16px; right: 16px; }
  .fab span { display: none; }
  .fw-head { align-items: stretch; }
  .fw-stats { justify-content: space-between; }
  .fw-stats .btn { width: 100%; }
  .fw-teams { gap: 4px; }
  .fw-form { padding: 24px 18px 18px; }
}