/* Cabezazo — noche de estadio. Tiza (crema) para bordes y texto, bengala para jugar,
   celeste acero para lo online, oro para lo elegido. El "trapo" es la firma: el título
   pintado como trapo de hinchada con los colores de tu club. */
:root {
  --noche: #0c0f0a; --tribuna: #161b11; --tribuna-2: #20271a; --linea: #3b4430; --linea-2: #59603f;
  --tiza: #efe8d2; --tiza-2: #cdc6ad; --mut: #9c9d86;
  --bengala: #e5481f; --bengala-2: #b52f17;
  --acero: #2c5574; --acero-2: #3f7aa6;
  --oro: #f2c63b; --cesped: #4cc766; --rojo: #ef5350;
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --ui: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --cl: 0px; --ct: 0px; --cw: 100vw; --ch: 56vw;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--noche); color: var(--tiza); font-family: var(--ui); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body { overflow: hidden; overscroll-behavior: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
kbd { display: inline-block; min-width: 1.7em; padding: 0 .35em; margin: 0 .1em; border: 1.5px solid var(--linea-2); border-bottom-width: 3px; border-radius: 6px; font: 600 .8em var(--ui); text-align: center; color: var(--tiza); background: var(--tribuna-2); }

/* ---------- botones ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .55em 1.4em; border-radius: 999px; border: 3px solid var(--tiza); background: linear-gradient(#5d614a, #3a3e2c); color: var(--tiza); font-weight: 800; letter-spacing: .02em; box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 3px 0 rgba(0,0,0,.5); transition: transform .08s, filter .15s; }
.pill:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 1px 0 rgba(0,0,0,.5); }
.pill:hover { filter: brightness(1.08); }
.pill.hot { background: linear-gradient(#f0663a, var(--bengala) 45%, var(--bengala-2)); }
.pill.online { background: linear-gradient(#4f87b3, var(--acero-2) 40%, var(--acero)); }
.pill.small { min-height: 36px; padding: .3em .9em; border-width: 2px; font-size: .88rem; font-weight: 700; }
.pill.big { min-height: 60px; padding: .6em 2.2em; font-size: 1.25rem; font-family: var(--ui); }
.pill:disabled { opacity: .5; cursor: default; }
.round { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid var(--tiza); background: rgba(16,20,12,.82); color: var(--tiza); padding: 0; }
.round.hot { background: linear-gradient(var(--bengala), var(--bengala-2)); }
.round .ic { width: 22px; height: 22px; }

/* ---------- pantallas ---------- */
.screen { position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; z-index: 10; }
.screen.modal { display: grid; place-items: center; padding: 16px; background: rgba(4,6,3,.72); z-index: 40; }
.screen.sheet { z-index: 45; background: rgba(4,6,3,.6); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.mark { font-family: var(--display); font-size: 1.5rem; letter-spacing: .06em; }
.topbar-btns { display: flex; gap: 8px; align-items: center; }

/* inicio: la cancha de fondo se ve detrás del trapo */
#home { background: linear-gradient(rgba(12,15,10,.12) 0, rgba(12,15,10,.3) 40vw, rgba(12,15,10,.92) 64vw, var(--noche) 80vw) local; }
@media (min-width: 760px) { #home { background: linear-gradient(rgba(12,15,10,.1) 0, rgba(12,15,10,.45) 260px, rgba(12,15,10,.95) 430px, var(--noche) 520px) local; } }
.hero { display: grid; justify-items: center; gap: 10px; padding: 18vw 16px 6vw; }
@media (min-width: 760px) { .hero { padding: 110px 16px 40px; } }
.hero-sub { margin: 0; font-weight: 600; color: var(--tiza); text-shadow: 0 2px 8px rgba(0,0,0,.8); }

/* EL TRAPO */
.trapo { --t1: #103f91; --t2: #f5c400; position: relative; padding: .16em .55em .1em; transform: rotate(-2.5deg); filter: drop-shadow(0 8px 14px rgba(0,0,0,.55));
  background: var(--trapo-bg, linear-gradient(var(--t1) 0 36%, var(--t2) 36% 64%, var(--t1) 64%));
  clip-path: polygon(0% 6%, 8% 1%, 17% 5%, 26% 0%, 35% 4%, 44% 0%, 53% 5%, 62% 1%, 71% 5%, 80% 0%, 89% 4%, 100% 1%, 99% 94%, 90% 99%, 81% 95%, 72% 100%, 63% 96%, 54% 100%, 45% 95%, 36% 100%, 27% 96%, 18% 100%, 9% 95%, 1% 99%);
  animation: flamea 5s ease-in-out infinite; }
.trapo span { display: block; font-family: var(--display); font-size: clamp(3rem, 15vw, 7.5rem); line-height: 1; letter-spacing: .03em; color: var(--trapo-ink, #fff); -webkit-text-stroke: .045em var(--trapo-stroke, rgba(0,0,0,.6)); paint-order: stroke fill; }
@keyframes flamea { 0%, 100% { transform: rotate(-2.5deg) skewX(0deg); } 50% { transform: rotate(-1.5deg) skewX(-2deg); } }

.panel { width: min(1120px, 100%); margin: 0 auto; padding: 18px 16px 24px; border-top: 1px solid var(--linea); }
@media (min-width: 760px) { .panel { border: 2px solid var(--linea-2); border-radius: 18px; background: rgba(22,27,17,.92); padding: 24px 28px 28px; } }
.lbl { margin: 22px 0 10px; font-size: .9rem; font-weight: 600; color: var(--tiza-2); letter-spacing: .02em; }

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 760px) { .modes { grid-template-columns: repeat(4, 1fr); } }
.mode { position: relative; display: flex; align-items: center; justify-content: center; gap: .55em; min-height: 58px; padding: .5em .6em; border-radius: 12px; border: 2.5px solid var(--tiza-2); background: linear-gradient(#3a3f2e, #262a1d); color: var(--tiza); font-weight: 700; font-size: clamp(.86rem, 3.9vw, 1.02rem); white-space: nowrap; box-shadow: 0 3px 0 rgba(0,0,0,.45); }
.mode.hot { background: linear-gradient(#ee5c30, var(--bengala-2)); border-color: var(--tiza); }
.mode.online { background: linear-gradient(#3c6c93, var(--acero)); border-color: #b9d3e6; font-weight: 800; letter-spacing: .03em; }
.mode em.live { background: var(--cesped); color: #06260f; }
.lbl small { font-weight: 500; color: var(--mut); }
.mode em, .cup em { position: absolute; top: -8px; right: 8px; font-style: normal; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; background: var(--oro); color: #221a00; }
.mode[data-soon] { opacity: .8; } .cup[data-soon] { opacity: .62; }
.mode .ic { width: 22px; height: 22px; }

.cups { display: flex; gap: 10px; overflow-x: auto; padding: 14px 2px 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.cups::-webkit-scrollbar, .countries::-webkit-scrollbar, .leagues::-webkit-scrollbar { display: none; }
.cup { position: relative; flex: none; min-height: 50px; padding: .4em 1em; border-radius: 10px; border: 2px solid var(--tiza-2); background: linear-gradient(#2b3122, #1d2117); color: var(--tiza); font-weight: 700; font-size: .92rem; }
.cup.gold { background: linear-gradient(#8a6a12, #5a430a); border-color: #f2d36b; }
.cup.bronze { background: linear-gradient(#7d5a2b, #4e3516); border-color: #d9b277; }
.cup.steel { background: linear-gradient(#4a5463, #2c3440); border-color: #b9c3d3; }
.cup.ice { background: linear-gradient(#dfe6ff, #aab7ef); color: #13235c; border-color: #fff; }
.cup.sky { background: linear-gradient(#2c86b8, #1b5c83); border-color: #bfe6ff; }

.countries { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; }
.country { flex: none; display: grid; justify-items: center; gap: 4px; width: 92px; padding: 10px 6px 8px; border-radius: 10px; border: 2px solid var(--linea-2); background: var(--tribuna-2); color: var(--tiza); }
.country img, .country .flagbox { width: 30px; height: 21px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.country b { font-size: .82rem; font-weight: 700; line-height: 1.1; text-align: center; }
.country small { font-size: .68rem; color: var(--mut); }
.country.on { border-color: var(--oro); background: linear-gradient(#8a4a22, #5c2d14); box-shadow: 0 0 0 2px rgba(242,198,59,.25); }
.country.on small { color: #ffd9a8; }
@media (min-width: 900px) { #home .countries { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } #home .country { width: calc((100% - 8px * 8) / 9); } }

.leagues { display: flex; gap: 8px; overflow-x: auto; margin: 6px -16px 0; padding: 4px 16px 4px; scrollbar-width: none; }
.league { flex: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--linea-2); background: var(--tribuna); color: var(--tiza); font-weight: 700; font-size: .88rem; }
.league img { width: 22px; height: 22px; object-fit: contain; }
.league small { color: var(--mut); font-weight: 600; }
.league.on { border-color: var(--oro); background: linear-gradient(#6d3a1c, #4b2510); }

.versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 22px; }
.teamcard { display: grid; justify-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 14px; border: 2px solid var(--linea-2); background: linear-gradient(#20271a, #151a10); color: var(--tiza); text-align: center; min-width: 0; }
.teamcard small { font-size: .74rem; font-weight: 700; color: var(--tiza-2); text-transform: uppercase; letter-spacing: .08em; }
.teamcard b { font-size: 1rem; line-height: 1.15; overflow-wrap: anywhere; }
.teamcard em { font-style: normal; font-size: .74rem; color: var(--mut); }
.teamcard:active { transform: translateY(1px); }
.teamcard.flat { grid-template-columns: auto 1fr; justify-items: start; text-align: left; padding: 10px 12px; }
.teamcard.flat em { grid-column: 2; color: var(--oro); font-weight: 700; }
.teamcard.flat .crest { grid-row: span 2; }
.vs { font-family: var(--display); font-size: 2.1rem; color: var(--oro); transform: skewX(-10deg); text-shadow: 0 3px 0 rgba(0,0,0,.5); }
.crest { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; }
.crest img, .crest svg { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.crest.big { width: 76px; height: 76px; }
.crest.flagc img { object-fit: contain; border-radius: 4px; }

.mecard { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; margin-top: 18px; padding: 12px; border-radius: 14px; border: 2px solid var(--linea); background: var(--tribuna); }
#lookCv { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(#2c3a23, #141a0f); border: 2px solid var(--linea-2); }
.me-fields { display: grid; gap: 10px; min-width: 0; }
.looks { display: grid; gap: 8px; }
.lookrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lookrow > span { flex: 0 0 100%; font-size: .74rem; color: var(--mut); font-weight: 600; }
@media (min-width: 640px) { .lookrow > span { flex: 0 0 64px; } }
.sw { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); padding: 0; }
.sw.on { border-color: var(--oro); box-shadow: 0 0 0 2px rgba(242,198,59,.35); }
.chip { flex: none; min-height: 30px; padding: 2px 10px; border-radius: 999px; border: 2px solid var(--linea-2); background: var(--tribuna-2); font-size: .8rem; font-weight: 600; }
.chip.on { border-color: var(--oro); color: #fff; background: #4b2510; }

.field { display: grid; gap: 5px; }
.field > span { font-size: .8rem; font-weight: 600; color: var(--tiza-2); }
.field input, .field select, .search input, .chat-form input { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--linea-2); background: #0f130b; color: var(--tiza); outline: none; }
.field input:focus, .field select:focus, .search input:focus, .chat-form input:focus { border-color: var(--oro); }
.code-in { font-family: var(--display); font-size: 1.35rem !important; letter-spacing: .32em; text-transform: uppercase; }
.check { display: flex; gap: 10px; align-items: center; font-size: .9rem; }
.check input { width: 22px; height: 22px; accent-color: var(--bengala); }
.check small { color: var(--mut); }

.playrow { display: grid; place-items: center; margin-top: 22px; }
.playrow .pill { width: min(420px, 100%); }
.keys { margin: 14px 0 0; text-align: center; font-size: .82rem; color: var(--mut); line-height: 2; }
.foot { padding: 18px 16px calc(24px + var(--safe-b)); text-align: center; font-size: .78rem; color: var(--mut); }
body.touch .desk-only { display: none; }

/* ---------- modales ---------- */
.card { position: relative; border: 2px solid var(--linea-2); border-radius: var(--r); background: linear-gradient(160deg, #1d2617, #12170d); padding: 18px; }
.modal .card { width: min(560px, 100%); padding: 0 20px 22px; text-align: center; border-color: #7a7f5c; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.ribbon { position: relative; margin: 18px -32px 14px; padding: 14px 18px 12px; background: #e04c40; color: #fff8ec; font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 600; transform: rotate(-1deg); box-shadow: 8px 8px 0 #9c2b23; }
.ribbon.blue { background: #2f6d97; box-shadow: 8px 8px 0 #1c4562; }
.ribbon.gold { background: #d9a520; color: #2a1c00; box-shadow: 8px 8px 0 #8a6510; }
.sub { margin: 10px 0; color: var(--tiza-2); }
.row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
.col { display: grid; gap: 12px; margin-top: 16px; }
.radios { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; text-align: left; margin: 8px 0 14px; }
.radios label { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; cursor: pointer; }
.radios input { appearance: none; width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--oro); background: #3f4235; display: grid; place-items: center; margin: 0; flex: none; }
.radios input:checked::after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--oro); }
.seg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 4px; border-radius: 16px; background: #0f130b; border: 2px solid var(--linea-2); }
.seg button { min-height: 38px; padding: 4px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--tiza-2); font-weight: 700; font-size: .9rem; }
.seg button.on { background: var(--oro); color: #241a00; }
.final { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 12px 0 4px; }
.final b { font-family: var(--display); font-size: 3.6rem; letter-spacing: .04em; }

/* ---------- elegir equipo ---------- */
.sheet-card { width: min(980px, 100%); min-height: 100%; margin: 0 auto; padding: 0 16px calc(24px + var(--safe-b)); background: var(--noche); }
@media (min-width: 760px) { .sheet-card { min-height: auto; margin: 4vh auto; border: 2px solid var(--linea-2); border-radius: 18px; } }
.sheet-card header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 0; background: var(--noche); }
.sheet-card h2 { margin: 0; font-size: 1.3rem; }
.search { position: relative; display: block; margin-bottom: 12px; }
.search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--mut); }
.search input { padding-left: 42px; }
.teamgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 12px; }
.tg { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 10px 6px; border-radius: 12px; border: 2px solid var(--linea); background: var(--tribuna); color: var(--tiza); min-height: 112px; }
.tg .crest { width: 52px; height: 52px; }
.tg b { font-size: .78rem; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.tg.on { border-color: var(--oro); background: #3e220f; }
.tg small { font-size: .66rem; color: var(--mut); }

/* ---------- online ---------- */
#online { background: var(--noche); }
.link { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--mut); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mut); }
.link.on .dot, .live .dot, .badge .dot { background: var(--cesped); box-shadow: 0 0 0 3px rgba(76,199,102,.18); }
.link.on { color: var(--cesped); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; max-width: 1280px; margin: 0 auto; }
.tab { min-height: 50px; border-radius: 10px; border: 2.5px solid var(--tiza-2); background: linear-gradient(#3a3f2e, #262a1d); color: var(--tiza); font-weight: 800; font-size: .86rem; letter-spacing: .02em; padding: 4px 8px; }
.tab.on { background: linear-gradient(#ee5c30, var(--bengala-2)); border-color: var(--tiza); }
.online-grid { display: grid; gap: 14px; padding: 14px 16px calc(28px + var(--safe-b)); max-width: 1280px; margin: 0 auto; }
@media (min-width: 900px) { .online-grid { grid-template-columns: 250px 1fr 320px; align-items: start; } }
.online-grid h3 { margin: 0 0 12px; font-size: 1.12rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.mine { display: grid; gap: 12px; }
.mine h3 { margin: 0; }
.tabpane { display: grid; gap: 14px; min-width: 0; }
.live { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--cesped); }
.hint { margin: 0; font-size: .8rem; color: var(--mut); }
.two { display: grid; gap: 14px; }
@media (min-width: 640px) { .two { grid-template-columns: 1fr 1fr; } }
.two .card { display: grid; gap: 12px; align-content: start; }
.two .card h3 { margin: 0; }
.count { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--tribuna-2); border: 1.5px solid var(--linea-2); font-size: .78rem; }
.rows { display: grid; gap: 8px; }
.rowitem { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--tribuna); border: 1.5px solid var(--linea); }
.rowitem b { display: block; font-size: .95rem; }
.rowitem small { color: var(--mut); font-size: .76rem; }
.rowitem .pill { min-height: 40px; padding: .3em 1.1em; border-width: 2px; }
.empty { margin: 0; color: var(--mut); font-size: .88rem; }
.flag { width: 18px; height: 13px; border-radius: 2px; vertical-align: -1px; margin-left: 4px; object-fit: cover; }
.chat { display: flex; flex-direction: column; gap: 10px; height: min(70vh, 640px); }
.chat .msgs { flex: 1; }
@media (min-width: 900px) { .chat { position: sticky; top: 12px; height: calc(100vh - 150px); } }
.badge { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--linea-2); font-size: .74rem; font-weight: 600; color: var(--tiza-2); }
.pinned { padding: 10px 12px; border-radius: 10px; border-left: 3px solid var(--oro); background: #241f0d; font-size: .82rem; }
.pinned small { display: block; color: var(--oro); font-weight: 700; margin-bottom: 3px; }
.msgs { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; min-height: 0; }
.msg { display: grid; grid-template-columns: 28px 1fr; gap: 8px; font-size: .88rem; line-height: 1.35; }
.msg .crest { width: 28px; height: 28px; }
.msg b { font-weight: 700; }
.msg time { color: var(--mut); font-size: .7rem; margin-left: 6px; }
.msg p { margin: 2px 0 0; overflow-wrap: anywhere; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

/* torneo */
.tourhead { display: grid; gap: 8px; }
.tourhead h2 { margin: 0; font-family: var(--display); font-size: 1.8rem; letter-spacing: .03em; }
.tourmeta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .82rem; color: var(--tiza-2); }
.tag { padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--linea-2); background: var(--tribuna-2); font-weight: 700; }
.tag.gold { border-color: var(--oro); color: var(--oro); }
.groups { display: grid; gap: 12px; }
@media (min-width: 640px) { .groups { grid-template-columns: 1fr 1fr; } }
table.tabla { width: 100%; border-collapse: collapse; font-size: .82rem; font-variant-numeric: tabular-nums; }
.tabla caption { text-align: left; font-weight: 800; padding: 0 0 6px; color: var(--oro); }
.tabla th, .tabla td { padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--linea); }
.tabla th:first-child, .tabla td:first-child { text-align: left; }
.tabla tr.q td { background: rgba(76,199,102,.08); }
.tabla .me td { color: var(--oro); font-weight: 700; }
.fix { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--tribuna); border: 1.5px solid var(--linea); font-size: .86rem; }
.fix .a { text-align: right; } .fix .sc { font-family: var(--display); font-size: 1.1rem; min-width: 54px; text-align: center; }
.fix.live { border-color: var(--bengala); } .fix.mine { box-shadow: inset 3px 0 0 var(--oro); }
.champ { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: linear-gradient(#5a430a, #2e2205); border: 2px solid var(--oro); font-weight: 800; }

/* ---------- copas ---------- */
.cup-opts { display: grid; gap: 12px; margin: 10px 0 4px; }
@media (min-width: 700px) { .cup-opts { grid-template-columns: 1fr 1fr; } }
.cup-opts .seg { justify-content: flex-start; }

/* ---------- campeonato ---------- */
#camp { background: var(--noche); }
.camp-wrap { display: grid; gap: 14px; width: min(1000px, 100%); margin: 0 auto; padding: 0 16px calc(28px + var(--safe-b)); }
.camp-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.camp-head h2 { margin: 0; font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2.4rem); letter-spacing: .02em; line-height: 1.05; }
.camp-head p { margin: 4px 0 0; color: var(--tiza-2); font-size: .9rem; }
.nextmatch { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 18px; border-radius: var(--r); border: 2px solid var(--oro); background: linear-gradient(160deg, #3a2a0c, #1a1406); }
.vsgrid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; }
.vsteam { display: grid; justify-items: center; gap: 6px; text-align: center; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.vsteam .crest { width: 58px; height: 58px; }
.vsgrid .vs { font-size: 1.8rem; }
.nextmatch small { color: var(--oro); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nextmatch .pill { width: min(360px, 100%); }
.tabwrap { overflow-x: auto; }
details.fixtures summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
details.fixtures[open] summary { margin-bottom: 10px; }

/* ---------- partido ---------- */
#stage { position: fixed; inset: 0; background: #050704; z-index: 1; }
#cv { position: absolute; left: var(--cl); top: var(--ct); width: var(--cw); height: var(--ch); display: block; touch-action: none; }
body.menu #stage { background: var(--noche); }
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
#hud button { pointer-events: auto; }
.hud-top { position: absolute; left: var(--cl); top: calc(var(--ct) + 8px); width: var(--cw); display: flex; justify-content: space-between; padding: 0 8px; }
.hud-btns { display: flex; gap: 8px; margin-left: auto; }
.hud-btns .round { width: clamp(34px, calc(var(--cw) * .045), 50px); height: clamp(34px, calc(var(--cw) * .045), 50px); }
.netchip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 999px; background: rgba(10,12,8,.72); border: 1.5px solid rgba(255,255,255,.25); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.netchip[data-q="good"] .ic { color: var(--cesped); } .netchip[data-q="ok"] .ic { color: var(--oro); } .netchip[data-q="bad"] .ic { color: var(--rojo); }
.board { --u: calc(var(--cw) * .0105); position: absolute; left: calc(var(--cl) + var(--cw) / 2); top: calc(var(--ct) + var(--ch) * .9); transform: translate(-50%, -50%); display: grid; grid-template-columns: auto auto auto auto auto; grid-template-rows: auto auto; align-items: stretch; column-gap: calc(var(--u) * .5); font-size: calc(var(--u) * 2); white-space: nowrap; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.board .liga { grid-row: 1; display: grid; place-items: center; width: calc(var(--u) * 3.6); }
.board .liga img { width: 100%; height: auto; }
.board .clock { grid-row: 1; display: grid; place-items: center; padding: 0 calc(var(--u) * 1.6); background: #ece9df; color: #10162a; font-weight: 800; font-variant-numeric: tabular-nums; border-radius: calc(var(--u) * .3); min-width: calc(var(--u) * 9); }
.board .clock.gold { background: var(--oro); }
.board .side { grid-row: 1; display: flex; align-items: center; gap: calc(var(--u) * .7); padding: calc(var(--u) * .45) calc(var(--u) * 1.4); background: #111a3f; color: #fff; font-weight: 800; letter-spacing: .03em; min-width: calc(var(--u) * 13); }
.board .side.l { justify-content: flex-end; } .board .side.r { justify-content: flex-start; }
.board .side .crest { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); }
.board .score { grid-row: 1; display: flex; align-items: center; gap: calc(var(--u) * .6); padding: 0 calc(var(--u) * 1.3); background: #ece9df; color: #10162a; font-weight: 800; font-variant-numeric: tabular-nums; border-left: calc(var(--u) * .35) solid var(--k0, #c00); border-right: calc(var(--u) * .35) solid var(--k1, #00c); }
.board .score i { font-style: normal; opacity: .6; }
.board .pow { grid-row: 2; height: calc(var(--u) * .5); margin-top: calc(var(--u) * .35); background: rgba(0,0,0,.45); border-radius: 99px; overflow: hidden; }
.board .pow.l { grid-column: 3; } .board .pow.r { grid-column: 5; }
.board .pow i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb31a, var(--oro)); border-radius: 99px; transition: width .2s; }
.board .pow.full i { background: linear-gradient(90deg, #ff6a00, #ffd23f, #fff2b0); animation: chispa .5s linear infinite alternate; }
@keyframes chispa { to { filter: brightness(1.5); } }
#msg { position: absolute; left: var(--cl); top: calc(var(--ct) + var(--ch) * .17); width: var(--cw); padding: calc(var(--cw) * .012) 0 calc(var(--cw) * .016); background: linear-gradient(90deg, rgba(5,8,16,0), rgba(5,8,16,.62) 22%, rgba(5,8,16,.62) 78%, rgba(5,8,16,0)); text-align: center; pointer-events: none; z-index: 4; font-family: var(--display); color: #fff; font-size: calc(var(--cw) * .085); line-height: 1; -webkit-text-stroke: calc(var(--cw) * .0035) rgba(0,0,0,.75); paint-order: stroke fill; text-shadow: 0 6px 18px rgba(0,0,0,.55); }
#msg:empty { background: none; padding: 0; }
#msg small { display: block; font-family: var(--ui); font-weight: 800; font-size: .28em; letter-spacing: .08em; -webkit-text-stroke: 0; margin-top: .3em; }
#msg.pop { animation: pop .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#qc { position: absolute; z-index: 7; right: calc(100vw - var(--cl) - var(--cw) + 8px); top: calc(var(--ct) + 56px); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; border-radius: 14px; background: rgba(10,12,8,.92); border: 2px solid var(--linea-2); max-height: calc(var(--ch) - 70px); overflow-y: auto; }
body.touch #qc button { min-height: 36px; font-size: .82rem; padding: 2px 10px; }
#qc button { min-height: 40px; padding: 4px 14px; border-radius: 999px; border: 2px solid var(--linea-2); background: var(--tribuna-2); color: var(--tiza); font-weight: 700; text-align: left; }
#qc button:active { background: var(--oro); color: #1c1400; }
#qc kbd { margin-right: 6px; }
.toggles .chip { min-height: 40px; padding: 4px 16px; }
#banner { position: absolute; left: 50%; top: calc(var(--ct) + 52px); transform: translateX(-50%); z-index: 5; padding: 8px 16px; border-radius: 999px; background: rgba(10,12,8,.85); border: 1.5px solid var(--oro); font-weight: 700; font-size: .88rem; }
#debug { position: absolute; left: calc(var(--cl) + 8px); top: calc(var(--ct) + 46px); z-index: 6; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.7); font: 12px/1.45 ui-monospace, Consolas, monospace; white-space: pre; pointer-events: none; }

/* controles del celular (como el original: costados de la cancha) */
#pad { position: absolute; inset: 0; z-index: 5; pointer-events: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.pad-side { position: absolute; bottom: calc(14% + var(--safe-b)); display: flex; gap: 10px; pointer-events: auto; touch-action: none; }
.pad-side.l { left: max(8px, env(safe-area-inset-left)); }
.pad-side.r { right: max(8px, env(safe-area-inset-right)); }
.pad-side button { display: grid; place-items: center; align-content: center; gap: 2px; width: var(--padw, 70px); height: calc(var(--padw, 70px) * 1.18); border-radius: 18px; border: 3px solid rgba(239,232,210,.92); background: rgba(14,32,26,.86); color: var(--tiza); font-weight: 800; font-size: calc(var(--padw, 70px) * .155); letter-spacing: 0; padding: 0; touch-action: none; overflow: hidden; }
.pad-side button .ic { width: calc(var(--padw, 70px) * .48); height: calc(var(--padw, 70px) * .48); stroke-width: 2.6; }
.pad-side button.kick { background: rgba(124,40,20,.9); }
.pad-side button.jump { background: rgba(20,58,36,.9); }
.pad-side button.on { transform: scale(.94); background: rgba(242,198,59,.95); color: #1c1400; border-color: #fff; }
#rotate { position: absolute; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; background: rgba(5,8,12,.94); text-align: center; }
#rotate .ic { width: 84px; height: 84px; color: #9fd8ee; stroke-width: 1.6; animation: girar 2.2s ease-in-out infinite; }
#rotate p { margin: 0; font-size: 1.4rem; font-weight: 600; } #rotate small { font-size: .95rem; color: var(--tiza-2); font-weight: 500; }
@keyframes girar { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* aviso y cargando */
#toast { position: fixed; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%); z-index: 60; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px; background: #f6efd9; color: #1d1a10; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.status { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 4px; font-weight: 600; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(239,232,210,.25); border-top-color: var(--oro); animation: rueda .8s linear infinite; }
@keyframes rueda { to { transform: rotate(360deg); } }
.codebox { display: grid; gap: 6px; margin: 8px 0; }
.codebox small { color: var(--tiza-2); font-weight: 600; }
.codebox b { font-family: var(--display); font-size: clamp(2.6rem, 13vw, 4rem); letter-spacing: .18em; color: var(--oro); }
.vsline { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 0; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .trapo, #rotate .ic, .board .pow.full i, .spin { animation: none; } #msg.pop { animation: none; } }

/* celular acostado en el inicio: trapo más chico y fondo opaco antes, para que los botones se lean */
@media (orientation: landscape) and (max-height: 520px) {
  .hero { padding: 54px 16px 18px; }
  .trapo span { font-size: clamp(2.4rem, 17vh, 4.4rem); }
  #home { background: linear-gradient(rgba(12,15,10,.15) 0, rgba(12,15,10,.45) 130px, rgba(12,15,10,.96) 215px, var(--noche) 260px) local; }
}

/* barra de arriba en el celu: pantalla completa solo con el ícono para que entre todo en un renglón */
.topbar .pill.small { white-space: nowrap; }
@media (max-width: 560px) {
  #btnFull { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
  #btnFull span { display: none; }
}