/* Futbol Corner · estética verde y negro (MISSIO FUTBOL) */
:root {
  --vn-negre: #0b0d0b; --vn-placa: #0a0b08; --vn-verd: #25e24b; --vn-verd-fosc: #0f7a27;
  --vn-blanc: #f1f1f1; --vn-paper: #ececec; --vn-gris: #a9a9a9; --vn-suau: #b7c4b9;
  --bg: #070807; --surface: #111411; --surface-2: #181c18; --line: #263026; --muted: #8f9a90;
  --display: "Kanit", "Arial Black", Impact, sans-serif; --text: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --wrap: 1180px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--vn-blanc); font: 500 18px/1.45 var(--text); min-height: 100vh;
  background-image: radial-gradient(ellipse at 50% -10%, rgba(37,226,75,.13), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 14px); }
a { color: var(--vn-verd); }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: .005em; }
.fc-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.small { font-size: .85em; color: var(--muted); }
body.modal-open { overflow: hidden; }

/* Componentes de marca */
.vn-rotol { display: inline-block; background: var(--vn-placa); color: var(--vn-blanc); font: italic 900 1em/1 var(--display); text-transform: uppercase;
  padding: .22em .6em .28em; clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); box-shadow: inset 0 0 0 2px var(--vn-verd); }
.vn-rotol.big { font-size: 1.6em; margin: 0 auto .4em; display: table; }
.vn-placa-blanca { display: inline-flex; align-items: center; background: linear-gradient(180deg, #f6f6f6, var(--vn-paper) 55%, #dcdcdc); color: var(--vn-negre);
  font: italic 900 1em/.95 var(--display); text-transform: uppercase; padding: .3em .8em .35em 1em; clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); border-left: .3em solid var(--vn-verd); }
.vn-comptador { --cut: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%); position: relative; display: inline-flex; gap: .4em; align-items: center;
  padding: .35em .9em .42em; color: var(--vn-blanc); font: italic 900 1em/1 var(--display); font-variant-numeric: tabular-nums; isolation: isolate; }
.vn-comptador::before, .vn-comptador::after { content: ""; position: absolute; clip-path: var(--cut); z-index: -1; }
.vn-comptador::before { inset: 0; background: var(--vn-verd); }
.vn-comptador::after { inset: 2px; background: var(--vn-placa); }
.vn-boto { display: inline-block; font: italic 900 1.05rem/1 var(--display); text-transform: uppercase; text-decoration: none; background: var(--vn-verd); color: var(--vn-negre);
  border: 0; cursor: pointer; padding: .7em 1.3em .75em; transform: skewX(-8deg); transition: transform .15s, filter .15s; }
.vn-boto:hover { filter: brightness(1.1); transform: skewX(-8deg) translateY(-1px); }
.vn-boto:disabled { opacity: .45; cursor: default; }
.vn-boto-sec { display: inline-block; font: 700 .95rem/1 var(--text); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  background: var(--vn-negre); color: var(--vn-blanc); border: 2px solid #3a463b; padding: .6em 1.1em; cursor: pointer; }
.vn-boto-sec:hover { border-color: var(--vn-verd); color: var(--vn-verd); }
.vn-boto-sec:disabled { opacity: .4; cursor: default; }
.vn-boto:focus-visible, .vn-boto-sec:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--vn-blanc); outline-offset: 3px; }
.vn-panell { background: rgba(11,13,11,.97); color: var(--vn-blanc); border: 4px solid var(--vn-verd); box-shadow: 0 0 0 4px var(--vn-negre), 10px 10px 0 var(--vn-verd-fosc); padding: 1.4em; }

/* Cabecera */
.fc-header { position: sticky; top: 0; z-index: 50; background: rgba(7,8,7,.94); backdrop-filter: blur(8px); border-bottom: 3px solid var(--vn-verd); }
.fc-header-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 62px; }
.fc-logo { display: inline-flex; gap: .25em; text-decoration: none; font: italic 900 1.55rem/1 var(--display); letter-spacing: -.01em; }
.fc-logo .a { color: var(--vn-blanc); }
.fc-logo .b { color: var(--vn-negre); background: var(--vn-verd); padding: .04em .3em .08em; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }
.fc-header-cd { font: 600 .95rem var(--text); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.fc-header-cd b { color: var(--vn-verd); font: italic 900 1.05rem var(--display); font-variant-numeric: tabular-nums; }
.fc-burger { display: none; background: none; border: 2px solid #3a463b; width: 42px; height: 42px; font-size: 1.3rem; cursor: pointer; }
.fc-nav { border-top: 1px solid #1c231d; }
.fc-nav .fc-wrap { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.fc-nav a { flex: none; color: var(--vn-suau); text-decoration: none; font: 700 .9rem/1 var(--text); letter-spacing: .07em; text-transform: uppercase; padding: 12px 12px 11px; border-bottom: 3px solid transparent; }
.fc-nav a:hover, .fc-nav a[aria-current] { color: var(--vn-verd); border-bottom-color: var(--vn-verd); }

/* Anuncios */
.fc-ad { margin: 18px auto; text-align: center; min-height: 90px; position: relative; }
.fc-ad-label { display: block; font: 600 .65rem var(--text); letter-spacing: .15em; text-transform: uppercase; color: #59625a; margin-bottom: 2px; }
.fc-ad.placeholder { display: grid; place-items: center; border: 1px dashed #2c362d; background: repeating-linear-gradient(-45deg, #0c0f0c 0 10px, #0f130f 10px 20px); }
.fc-ad.placeholder span { font: 600 .75rem var(--text); letter-spacing: .2em; text-transform: uppercase; color: #4c564d; }
.fc-ad-top { max-width: 970px; min-height: 90px; }
.fc-ad-sidebar { min-height: 600px; width: 300px; margin: 0; }
.fc-ad-sidebar.sticky { position: sticky; top: 130px; }
.fc-ad-inGame { margin: 36px auto 24px; min-height: 250px; }
.fc-ad-home, .fc-ad-bottom { min-height: 250px; }

/* Portada */
.fc-hero { text-align: center; padding: 28px 0 12px; }
.fc-kicker { font: 700 .95rem var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--vn-verd); margin: 0 0 8px; }
.fc-hero h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); margin: 0; }
.fc-hero h1 em { color: var(--vn-negre); background: var(--vn-verd); padding: 0 .18em; display: inline-block; clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); }
.fc-hero-sub { color: var(--vn-suau); margin: 14px auto 18px; max-width: 520px; }
.fc-hero-cd { font-size: 1.15rem; }
.fc-hero-cd span { font: 600 .85rem var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fc-sec { font-size: 1.5rem; margin: 34px 0 14px; display: flex; align-items: center; gap: 12px; }
.fc-sec::after { content: ""; flex: 1; height: 3px; background: linear-gradient(90deg, var(--vn-verd), transparent); }

.fc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.fc-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; text-decoration: none; color: var(--vn-blanc);
  background: linear-gradient(135deg, var(--surface-2), var(--surface)); border: 2px solid var(--line); transition: transform .18s, border-color .18s, box-shadow .18s; }
.fc-card:hover { transform: translateY(-3px); border-color: var(--vn-verd); box-shadow: 6px 6px 0 var(--vn-verd-fosc); }
.fc-card-icon { flex: none; width: 64px; height: 64px; display: grid; place-items: center; background: var(--vn-verd); color: var(--vn-negre);
  font: italic 900 1.35rem/1 var(--display); clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.fc-card-txt b { display: block; font: italic 900 1.2rem/1.05 var(--display); text-transform: uppercase; }
.fc-card-txt small { display: block; color: var(--muted); font-size: .92rem; line-height: 1.25; margin-top: 4px; }
.fc-card-tag { position: absolute; top: 8px; right: 10px; font: 700 .65rem var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--vn-suau); }
.fc-card-done { display: none; position: absolute; bottom: 8px; right: 10px; font: italic 800 .75rem var(--display); color: var(--vn-verd); text-transform: uppercase; }
.fc-card.is-played .fc-card-done { display: block; }
.fc-card.is-played .fc-card-icon { background: #1c3a22; color: var(--vn-verd); }
.fc-cards.small { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.fc-cards.small .fc-card-icon { width: 48px; height: 48px; font-size: 1rem; }
.fc-cards.small .fc-card-txt small { display: none; }

.fc-soon { margin: 40px 0; padding: 28px; text-align: center; border: 3px solid var(--vn-verd); box-shadow: 10px 10px 0 var(--vn-verd-fosc);
  background: linear-gradient(135deg, #0d140e, #070807); }
.fc-soon h2 { font-size: clamp(1.8rem, 5vw, 3rem); margin: 14px 0 8px; color: var(--vn-verd); }
.fc-soon p { color: var(--vn-suau); margin: 0; }
.fc-seo { margin: 40px 0; color: var(--vn-suau); max-width: 860px; }
.fc-seo h2 { color: var(--vn-blanc); font-size: 1.5rem; margin-top: 28px; }
.fc-faq { border-bottom: 1px solid var(--line); padding: 10px 0; }
.fc-faq summary { cursor: pointer; font-weight: 700; color: var(--vn-blanc); }
.fc-faq p { margin: 8px 0 4px; }

/* Página de juego */
.fc-game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.fc-game-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 14px; }
.fc-game-head h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin: 0; }
.fc-howto-btn { margin-left: auto; }
.fc-game { background: var(--surface); border: 3px solid var(--vn-verd); box-shadow: 8px 8px 0 var(--vn-verd-fosc); padding: 18px; min-height: 380px; }
.fc-gamebar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; color: var(--vn-suau); font-weight: 600; }
.fc-gamebar b { color: var(--vn-verd); font: italic 900 1.15em var(--display); }
.fc-gamebar .row { display: flex; gap: 8px; }
.fc-text { color: var(--vn-suau); margin-top: 26px; }
.fc-text h2 { color: var(--vn-blanc); font-size: 1.5rem; margin: 26px 0 10px; }
.fc-text ol li { margin-bottom: 6px; }
.fc-text.page { max-width: 780px; padding-top: 20px; padding-bottom: 40px; }
.fc-text.page h1 { font-size: 2.4rem; color: var(--vn-blanc); }
.pill { display: inline-block; background: var(--vn-paper); color: var(--vn-negre); font-weight: 700; padding: 3px 10px; margin: 3px; clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); }

/* Etiquetas de categoría */
.fc-cat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; font: italic 800 .9rem/1.05 var(--display); text-transform: uppercase; }
.fc-cat .crest { width: 30px; height: 34px; background: linear-gradient(90deg, var(--c1) 50%, var(--c2) 50%); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); box-shadow: inset 0 0 0 2px rgba(0,0,0,.4); }
.fc-cat .flag { font-style: normal; font-size: 1.7rem; line-height: 1; }

/* Buscador */
.fc-search { position: relative; margin: 6px 0 14px; }
.fc-search-input { width: 100%; padding: 14px 16px; font: 600 1.15rem var(--text); color: var(--vn-blanc); background: var(--vn-negre); border: 2px solid #3a463b; outline: none; }
.fc-search-input:focus { border-color: var(--vn-verd); }
.fc-search-list { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #0d100d; border: 2px solid var(--vn-verd); border-top: 0; max-height: 340px; overflow: auto; }
.fc-search-list:empty { display: none; }
.fc-search-list li { display: flex; gap: 10px; align-items: center; padding: 10px 14px; cursor: pointer; border-top: 1px solid #1a201a; }
.fc-search-list li.on, .fc-search-list li:hover { background: #163019; }
.fc-search-list li.empty { color: var(--muted); cursor: default; }
.fc-search-list .nm { font-weight: 700; flex: 1; }
.fc-search-list .meta { color: var(--muted); font-size: .85rem; }
.fc-modal .fc-search-list { position: static; }

/* Modal */
.fc-modal { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.78); display: grid; place-items: start center; padding: 9vh 16px 16px; overflow: auto; animation: fade .2s; }
.fc-modal-box { position: relative; width: 100%; max-width: 480px; animation: pop .3s cubic-bezier(.2,1.4,.4,1); }
.fc-modal-box h2 { margin: 0 0 6px; font-size: 1.7rem; color: var(--vn-verd); }
.fc-modal-box .sub { color: var(--vn-suau); margin: 0 0 12px; }
.fc-modal-x { position: absolute; top: 6px; right: 10px; background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--vn-suau); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }
.fc-result { text-align: center; }
.fc-result h2 { font-size: 2.1rem; }
.fc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0; }
.fc-stats div { background: var(--vn-negre); border: 1px solid var(--line); padding: 8px 4px; }
.fc-stats b { display: block; font: italic 900 1.6rem var(--display); color: var(--vn-verd); }
.fc-stats span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fc-result-actions { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.fc-result .next { color: var(--muted); margin: 16px 0 0; }
.fc-result .next b { color: var(--vn-verd); font: italic 900 1.1rem var(--display); }
.fc-toast { position: fixed; left: 50%; bottom: 24px; z-index: 200; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; background: var(--vn-paper); color: var(--vn-negre);
  font: italic 800 1rem var(--display); text-transform: uppercase; padding: 12px 20px; border-left: 6px solid var(--vn-verd); transition: .25s; max-width: calc(100% - 32px); }
.fc-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Grid y Tres en raya */
.fc-grid { display: grid; grid-template-columns: minmax(56px, .8fr) repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 560px; margin: 0 auto; }
.fc-grid-corner { display: grid; place-items: center; font: italic 900 1.2rem var(--display); color: var(--vn-verd); }
.fc-grid-head { display: grid; place-items: center; padding: 8px 4px; min-height: 86px; }
.fc-grid-cell { aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 4px; padding: 6px; background: var(--vn-negre); border: 2px solid var(--line); cursor: pointer; transition: border-color .15s, transform .15s; }
.fc-grid-cell:not(:disabled):hover { border-color: var(--vn-verd); transform: scale(1.03); }
.fc-grid-cell .plus { font: italic 900 2rem var(--display); color: #2f3a30; }
.fc-grid-cell .nm { font: italic 800 clamp(.72rem, 2.4vw, .95rem)/1.05 var(--display); text-transform: uppercase; text-align: center; }
.fc-grid-cell .hint { font-size: .78rem; color: var(--muted); text-align: center; line-height: 1.1; }
.fc-grid-cell.ok { background: var(--vn-verd); color: var(--vn-negre); border-color: var(--vn-verd); animation: pop .35s; }
.fc-grid-cell:disabled { cursor: default; }
.fc-grid-cell.own-x { background: var(--vn-verd); color: var(--vn-negre); border-color: var(--vn-verd); }
.fc-grid-cell.own-o { background: var(--vn-paper); color: var(--vn-negre); border-color: var(--vn-paper); }
.fc-grid-cell .mark { font: italic 900 2rem/1 var(--display); }
.fc-turn { text-align: center; font: italic 900 1.3rem var(--display); text-transform: uppercase; margin: 0 0 14px; padding: 8px; background: var(--vn-negre); }
.fc-turn.x { color: var(--vn-negre); background: var(--vn-verd); }
.fc-turn.o { color: var(--vn-negre); background: var(--vn-paper); }
.fc-score { font: italic 900 1.4rem var(--display); }
.fc-score .x { color: var(--vn-verd); }

/* Adivina */
.fc-mystery { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.fc-mystery .sil { flex: none; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--vn-placa); border: 3px solid var(--vn-verd);
  font: italic 900 2.6rem var(--display); color: #3a463b; }
.fc-mystery .sil.shown { font-size: 2.6rem; color: inherit; }
.fc-mystery .vn-rotol { font-size: 1.5rem; }
.fc-mystery p { margin: 6px 0 0; }
.legend { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.legend i { width: 14px; height: 14px; display: inline-block; }
.legend i.ok, .c.ok { background: var(--vn-verd); color: var(--vn-negre); }
.legend i.near, .c.near { background: var(--vn-paper); color: var(--vn-negre); }
.fc-guess-table { display: grid; gap: 5px; overflow-x: auto; }
.fc-guess-row { display: grid; grid-template-columns: minmax(110px, 1.5fr) repeat(6, minmax(58px, 1fr)); gap: 4px; min-width: 520px; animation: pop .3s; }
.fc-guess-row > div { display: grid; place-items: center; text-align: center; padding: 8px 3px; background: #1a1f1a; font: 700 .85rem/1.1 var(--text); }
.fc-guess-row .nm { place-items: center start; padding-left: 10px; font: italic 800 .85rem var(--display); text-transform: uppercase; background: var(--vn-negre); }
.fc-guess-row.head > div { background: none; color: var(--muted); font: 700 .7rem var(--text); letter-spacing: .1em; text-transform: uppercase; padding: 2px; }
.fc-guess-row .c:first-of-type { font-size: 1.3rem; }

/* Palabra */
.fc-word { display: grid; gap: 6px; justify-content: center; margin: 4px 0 18px; }
.fc-word .row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 54px)); gap: 6px; }
.fc-word .row.shake { animation: shake .35s; }
.fc-word .t { aspect-ratio: 1; display: grid; place-items: center; font: italic 900 clamp(1.2rem, 5vw, 1.9rem)/1 var(--display); border: 2px solid #2a332a; background: var(--vn-negre); }
.fc-word .t.typed { border-color: var(--vn-suau); animation: pop .12s; }
.fc-word .t.ok { background: var(--vn-verd); border-color: var(--vn-verd); color: var(--vn-negre); }
.fc-word .t.near { background: var(--vn-paper); border-color: var(--vn-paper); color: var(--vn-negre); }
.fc-word .t.no { background: #2a2f2a; border-color: #2a2f2a; color: #8b938c; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.fc-kb { display: grid; gap: 6px; max-width: 520px; margin: 0 auto; }
.fc-kb .row { display: flex; gap: 5px; justify-content: center; }
.fc-kb .k { flex: 1; min-width: 0; height: 52px; border: 0; background: #2b332c; font: italic 800 1rem var(--display); cursor: pointer; padding: 0; }
.fc-kb .k.wide { flex: 1.6; font-size: 1.2rem; }
.fc-kb .k.ok { background: var(--vn-verd); color: var(--vn-negre); }
.fc-kb .k.near { background: var(--vn-paper); color: var(--vn-negre); }
.fc-kb .k.no { background: #151815; color: #555c56; }

/* Trayectoria */
.fc-career { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; counter-reset: c; }
.fc-career li { display: grid; grid-template-columns: 100px 26px 1fr; align-items: center; gap: 12px; padding: 10px 14px; background: var(--vn-negre); border-left: 4px solid var(--vn-verd); animation: pop .3s; }
.fc-career li.off { border-left-color: #2a332a; color: #4a544b; animation: none; }
.fc-career .yrs { font: italic 800 .95rem var(--display); color: var(--vn-verd); font-variant-numeric: tabular-nums; }
.fc-career li.off .yrs { color: #3a443b; }
.fc-career .crest { width: 22px; height: 26px; background: linear-gradient(90deg, var(--c1, #222) 50%, var(--c2, #2a2a2a) 50%); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.fc-career .club { font: italic 800 1.05rem var(--display); text-transform: uppercase; }
.fc-hints { text-align: center; margin-bottom: 8px; }
.fc-tried { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-tried span { padding: 4px 10px; font-weight: 700; font-size: .9rem; }
.fc-tried .no { background: #2a1616; color: #ff8d8d; }
.fc-tried .ok { background: var(--vn-verd); color: var(--vn-negre); }
.fc-all { width: 100%; margin-top: 12px; color: var(--vn-suau); }
.fc-all summary { cursor: pointer; color: var(--vn-verd); font-weight: 700; }

/* Top 10 */
.fc-cat-title { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.fc-cat-title .fc-cat span { display: none; }
.fc-cat-title h2 { font-size: clamp(1.2rem, 4vw, 1.7rem); margin: 0; }
.lives { letter-spacing: 2px; }
.fc-slots { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; counter-reset: s; }
.fc-slots li { counter-increment: s; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--vn-negre); border: 1px dashed #2a332a; font: italic 800 .95rem var(--display); text-transform: uppercase; }
.fc-slots li::before { content: counter(s); color: #3a463b; font-size: 1.1rem; width: 22px; }
.fc-slots li.ok { background: var(--vn-verd); color: var(--vn-negre); border: 0; animation: pop .3s; }
.fc-slots li.ok::before { color: var(--vn-verd-fosc); }
.fc-top10 .fc-tried { margin-top: 10px; }
#game .fc-tried { margin-top: 10px; }

/* Bingo */
.fc-bingo-now { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; background: var(--vn-paper); color: var(--vn-negre); border-left: 6px solid var(--vn-verd); }
.fc-bingo-now .who { display: flex; align-items: center; gap: 12px; }
.fc-bingo-now .flag { font-size: 2rem; }
.fc-bingo-now b { display: block; font: italic 900 1.4rem/1 var(--display); text-transform: uppercase; }
.fc-bingo-now small { font-weight: 600; color: #444; }
.fc-bingo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fc-bingo-cell { min-height: 96px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 6px 4px; background: var(--vn-negre); border: 2px solid var(--line); cursor: pointer; }
.fc-bingo-cell:not(:disabled):hover { border-color: var(--vn-verd); }
.fc-bingo-cell .fc-cat { font-size: .76rem; }
.fc-bingo-cell .fc-cat .crest { width: 22px; height: 26px; }
.fc-bingo-cell .fc-cat .flag { font-size: 1.3rem; }
.fc-bingo-cell.ok { background: var(--vn-verd); color: var(--vn-negre); border-color: var(--vn-verd); }
.fc-bingo-cell .nm { font-weight: 700; font-size: .75rem; }
.fc-bingo-cell:disabled { cursor: default; }

/* Conexiones */
.fc-conn-solved { display: grid; gap: 6px; margin-bottom: 6px; }
.fc-conn-group { padding: 12px; text-align: center; color: var(--vn-negre); animation: pop .35s; }
.fc-conn-group b { display: block; font: italic 900 1.05rem var(--display); text-transform: uppercase; }
.fc-conn-group span { font-weight: 600; }
.fc-conn-group.g0 { background: var(--vn-verd); }
.fc-conn-group.g1 { background: var(--vn-paper); }
.fc-conn-group.g2 { background: #8fe6a0; }
.fc-conn-group.g3 { background: #b7c4b9; }
.fc-conn-group.missed { opacity: .7; }
.fc-conn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fc-conn-tile { min-height: 72px; padding: 6px 3px; overflow-wrap: anywhere; hyphens: auto; background: #1f251f; border: 2px solid transparent; cursor: pointer; font: italic 800 clamp(.62rem, 2.1vw, .95rem)/1.05 var(--display); text-transform: uppercase; }
.fc-conn-tile:hover { border-color: var(--vn-verd); }
.fc-conn-tile.on { background: var(--vn-blanc); color: var(--vn-negre); }
.fc-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Impostor */
.dots { display: flex; gap: 5px; }
.dots i { width: 12px; height: 12px; background: #2a332a; transform: skewX(-12deg); }
.dots i.ok { background: var(--vn-verd); }
.dots i.no { background: #a33; }
.fc-imp { text-align: center; }
.fc-imp-q { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--vn-suau); font-weight: 700; }
.fc-imp-q .vn-placa-blanca { font-size: 1.6rem; }
.fc-imp-opts { display: grid; gap: 8px; margin-bottom: 16px; }
.fc-imp-opt { display: grid; grid-template-columns: 40px 1fr; align-items: center; text-align: left; gap: 2px 10px; padding: 12px 14px; background: var(--vn-negre); border: 2px solid var(--line); cursor: pointer; }
.fc-imp-opt:not(:disabled):hover { border-color: var(--vn-verd); }
.fc-imp-opt .flag { font-size: 1.6rem; grid-row: span 2; }
.fc-imp-opt b { font: italic 900 1.1rem var(--display); text-transform: uppercase; }
.fc-imp-opt small { color: var(--muted); grid-column: 2; }
.fc-imp-opt.imp { background: var(--vn-verd); color: var(--vn-negre); border-color: var(--vn-verd); }
.fc-imp-opt.imp small { color: #0b3a14; }
.fc-imp-opt.wrong { border-color: #c33; background: #2a1414; }
.fc-imp-opt.fine { opacity: .6; }
.fc-imp-opt:disabled { cursor: default; }

/* Más o menos */
.fc-hl { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.fc-hl-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px 12px; background: var(--vn-negre); border: 2px solid var(--line); }
.fc-hl-card .flag { font-size: 2.6rem; }
.fc-hl-card h3 { font-size: 1.5rem; margin: 8px 0 4px; }
.fc-hl-card p { margin: 0 0 10px; }
.fc-hl-card .yr { font: italic 900 2.6rem var(--display); color: var(--vn-verd); font-variant-numeric: tabular-nums; }
.fc-hl-card .yr.hidden { color: #2f3a30; }
.fc-hl-card.good { border-color: var(--vn-verd); box-shadow: 0 0 24px rgba(37,226,75,.45); }
.fc-hl-card.bad { border-color: #c33; }
.fc-hl-q { display: flex; flex-direction: column; justify-content: center; gap: 12px; max-width: 220px; text-align: center; }
.fc-hl-q p { margin: 0; color: var(--vn-suau); }
.fc-hl-q b { color: var(--vn-blanc); }

/* Pie */
.fc-footer { margin-top: 50px; border-top: 3px solid var(--vn-verd); background: #050605; padding: 34px 0 24px; color: var(--muted); }
.fc-footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
.fc-footer h4 { font: italic 900 1rem var(--display); text-transform: uppercase; color: var(--vn-blanc); margin: 4px 0 10px; }
.fc-footer-cols a:not(.fc-logo) { display: block; color: var(--muted); text-decoration: none; padding: 3px 0; }
.fc-footer-cols a:hover { color: var(--vn-verd); }
.fc-legal { font-size: .8rem; margin-top: 26px; border-top: 1px solid #161b16; padding-top: 16px; }

/* Responsive */
@media (max-width: 960px) {
  .fc-game-layout { grid-template-columns: minmax(0, 1fr); }
  .fc-side { display: none; }
  .fc-footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .fc-header-cd { display: none; }
  .fc-burger { display: block; }
  .fc-nav { display: none; }
  body.nav-open .fc-nav { display: block; }
  body.nav-open .fc-nav .fc-wrap { flex-direction: column; }
  .fc-logo { font-size: 1.3rem; }
  .fc-game { padding: 12px; box-shadow: 5px 5px 0 var(--vn-verd-fosc); }
  .fc-grid { grid-template-columns: 56px repeat(3, minmax(0, 1fr)); gap: 4px; }
  .fc-grid-head { min-height: 70px; padding: 4px 2px; }
  .fc-cat { font-size: .7rem; }
  .fc-cat .flag { font-size: 1.35rem; }
  .fc-cat .crest { width: 22px; height: 26px; }
  .fc-bingo-cell { min-height: 80px; }
  .fc-bingo-cell .fc-cat { font-size: .62rem; }
  .fc-hl { grid-template-columns: 1fr 1fr; }
  .fc-hl-q { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .fc-hl-card h3 { font-size: 1.1rem; }
  .fc-hl-card .yr { font-size: 2rem; }
  .fc-slots { grid-template-columns: 1fr; }
  .fc-guess-row { grid-template-columns: 70px repeat(6, minmax(0, 1fr)); min-width: 0; gap: 3px; }
  .fc-guess-row > div { font-size: .68rem; padding: 6px 1px; word-break: break-word; }
  .fc-guess-row .nm { font-size: .68rem; padding-left: 5px; }
  .fc-guess-row.head > div { font-size: .55rem; letter-spacing: .02em; }
  .fc-stats b { font-size: 1.3rem; }
  .fc-ad-top { min-height: 60px; }
  .fc-howto-btn { margin-left: 0; }
  .fc-footer-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
