/* Leyenda — app a pantalla completa, sin scroll de página */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; min-width: 0; touch-action: manipulation; }
:root {
  --bg: #0a0a0b; --panel: #101013; --panel2: #17171b; --panel3: #202026;
  --line: #26262c; --txt: #f5f5f7; --dim: #a6a6b0; --faint: #6b6b76;
  --green: #2ee56e; --gold: #f5c518; --red: #ff5a5a; --info: #7da2ff;
  --display: "Archivo Black", "Barlow Condensed", -apple-system, sans-serif;
  --cond: "Barlow Condensed", -apple-system, sans-serif;
}
h1, .om-ovr, .bignum, .legend-score, .cc-lvl, .duel-pts, .b-score, .cr-ovr, .dc-cta,
.sum-grid b, .statmini b, .age-chip, .ovr-chip, .fc-lvl, .points-break b { font-family: var(--display); font-weight: 400; }
.nh-title, .node-title, .cc-name, .oc-name, .topnav h2, .id-head h2, .modal-head h3, .verdict, .om-pos
  { font-family: var(--cond); font-weight: 800; letter-spacing: .3px; }
html, body { height: 100%; overflow: hidden; }
body { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg); color: var(--txt); }
#app { height: 100dvh; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column;
  padding: 10px 12px calc(8px + env(safe-area-inset-bottom)); overflow: hidden; }
.screen { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.screen.hidden, .hidden { display: none !important; }
.scroll-y { overflow-y: auto; min-height: 0; }
.nowrap { white-space: nowrap; }
.one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

button { font-family: inherit; color: inherit; background: none; border: none; }
.ic { display: inline-flex; width: 16px; height: 16px; vertical-align: -3px; flex: none; }
.ic svg { width: 100%; height: 100%; stroke-width: 2; }
.big-ic { width: 28px; height: 28px; color: var(--faint); }
.logo-ic { width: 54px; height: 54px; color: var(--gold); }
i[data-icon] { display: inline-flex; font-style: normal; vertical-align: -3px; flex: none; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
label { display: block; font-size: 10px; color: var(--dim); margin: 8px 2px 3px; text-transform: uppercase; letter-spacing: .7px; font-weight: 700; }
input, select { width: 100%; padding: 11px 13px; margin: 3px 0; border-radius: 11px; font-size: 16px;
  background: var(--panel2); color: var(--txt); border: 1px solid var(--line); outline: none; }
input::placeholder { color: var(--faint); }
input:focus { border-color: #4a7dff; }
.err { color: var(--red); font-size: 12px; min-height: 16px; flex: 1; text-align: center; align-self: center; }
.hint { color: var(--dim); font-size: 11px; margin: 3px 2px 5px; }
.row2 { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 12px 16px; margin: 6px 0;
  border-radius: 999px; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .08s; color: var(--txt); }
.btn:active { transform: scale(.97); }
.btn.primary { background: #f5f5f7; color: #101013; }
.btn.ghost { border: 1px solid var(--panel3); }
.btn.mini { width: auto; padding: 8px 13px; font-size: 12.5px; margin: 0 2px; }
.btn.big { font-size: 16px; flex: none; }

/* ---------- auth / home ---------- */
.hero-auth { text-align: center; padding: 7dvh 0 18px; }
.logo { display: flex; justify-content: center; }
h1 { font-size: 36px; letter-spacing: 8px; }
.tag { color: var(--dim); margin-top: 4px; font-size: 13px; }
.auth-panel { max-width: 400px; margin: 0 auto; width: 100%; }
.topnav { display: flex; justify-content: space-between; align-items: center; padding: 6px 2px 10px; flex: none; }
.topnav h2 { font-size: 19px; }

/* ---------- identidad ---------- */
.id-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.id-head { padding: 14px 18px 10px; border-bottom: 1px solid var(--line); flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.id-head h2 { font-size: 19px; }
.id-tabs { display: none; background: var(--panel2); border-radius: 999px; padding: 3px; }
.id-tabs button { padding: 8px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--dim); cursor: pointer; }
.id-tabs button.on { background: #f5f5f7; color: #101013; }
.id-grid { flex: 1; display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 16px; padding: 14px 18px; min-height: 0; }
.id-col { display: flex; flex-direction: column; min-height: 0; }
.shirt-wrap { display: flex; justify-content: center; flex: none; }
.shirt-svg { width: min(170px, 26dvh); filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)); }
.toggle2 { display: grid; grid-template-columns: 1fr 1fr; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.toggle2 button { padding: 10px; border-radius: 999px; color: var(--dim); font-size: 14px; font-weight: 700; cursor: pointer; }
.toggle2 button.on { background: #f5f5f7; color: #101013; }
.nat-list { flex: 1; background: var(--panel2); border: 1px solid var(--line); border-radius: 13px; padding: 5px; }
.nat-item { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px; cursor: pointer; font-size: 14px; border: 1px solid transparent; color: var(--txt); }
.nat-item:hover { background: var(--panel3); }
.nat-item.sel { border-color: #f5f5f7; background: var(--panel3); }
.nat-item .mark { margin-left: auto; font-size: 12px; color: var(--gold); font-weight: 800; }
.flag-img { width: 24px; height: 17px; border-radius: 3px; object-fit: cover; background: #333; flex: none; }
.pitch { position: relative; flex: 1; min-height: 0; border-radius: 13px; border: 1px solid #2c4a35;
  background: linear-gradient(180deg, #16351f 0%, #1d4a2a 40%, #16351f 100%); overflow: hidden; }
.pitch::before, .pitch::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border: 2px solid rgba(255,255,255,.32); }
.pitch::before { top: -1px; width: 46%; height: 11%; border-top: none; }
.pitch::after { bottom: -1px; width: 46%; height: 11%; border-bottom: none; }
.pos-pill { position: absolute; transform: translate(-50%, -50%); padding: clamp(6px, 1.2dvh, 10px) clamp(10px, 1.8dvh, 15px);
  border-radius: 999px; background: #10281c; color: #d9f2e3; border: 1px solid rgba(255,255,255,.22); font-weight: 800;
  font-size: clamp(11px, 1.6dvh, 14px); cursor: pointer; }
.pos-pill.sel { background: #f5f5f7; color: #101013; box-shadow: 0 0 20px rgba(255,255,255,.45); }
.id-foot { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); flex: none; }
.id-foot .btn { width: auto; padding: 11px 22px; margin: 0; }

/* ---------- juego: shell sin scroll ---------- */
.game-shell { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.pcard { display: flex; gap: 10px; align-items: stretch; flex: none; }
.ovr-mini { min-width: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 6px 12px;
  background: linear-gradient(160deg, #f0d98c 0%, #dcbb5f 45%, #b8933d 100%);
  clip-path: polygon(12% 0, 88% 0, 100% 8%, 100% 82%, 50% 100%, 0 82%, 0 8%); color: #3a2d10; }
.om-ovr { font-size: 28px; font-weight: 900; line-height: 1; }
.om-pos { font-size: 11px; font-weight: 800; letter-spacing: 1px; border-top: 1.5px solid rgba(58,45,16,.45); padding-top: 2px; margin-top: 2px; }
.pcard-mid { flex: 1; background: var(--panel2); border-radius: 13px; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.chip-row { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; }
.chip { display: inline-flex; align-items: center; gap: 5px; background: var(--panel3); border-radius: 999px; padding: 4px 9px;
  font-size: 11.5px; font-weight: 700; color: var(--txt); white-space: nowrap; flex: none; }
.chip .ic { width: 13px; height: 13px; }
.chip-pos { background: #14532d; color: #d9fbe5; }
.chip-troph { cursor: pointer; color: var(--gold); }
.clubline { display: flex; align-items: center; gap: 8px; font-size: 17px; min-width: 0; }
.clubline b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-sm { width: 20px; height: 20px; object-fit: contain; flex: none; }
.shield-fb { display: inline-flex; flex: none; }
.pcard-right { display: flex; flex-direction: column; justify-content: center; gap: 4px; text-align: right; flex: none; }
.pcard-right label { margin: 0; }
.bignum { font-size: 18px; font-weight: 900; }

.statmeters { display: grid; grid-template-columns: repeat(3, auto) repeat(3, 1fr); gap: 10px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 7px 12px; flex: none; }
.statmini { text-align: center; }
.statmini label { margin: 0; font-size: 9px; }
.statmini b { font-size: 15px; }
.meter { min-width: 0; }
.meter label { margin: 0 0 3px; display: flex; justify-content: center; }
.meter .ic { width: 13px; height: 13px; color: var(--dim); }
.mbar { height: 6px; background: var(--panel3); border-radius: 6px; overflow: hidden; }
.mbar div { height: 100%; width: 50%; border-radius: 6px; background: linear-gradient(90deg, #ff5a5a, #f5c518, #2ee56e); background-size: 240px 100%; transition: width .6s ease; }

.game-grid { flex: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 14px; min-height: 0; }
.game-left { display: flex; flex-direction: column; min-height: 0; gap: 7px; overflow-y: auto; scrollbar-width: none; }
.game-left::-webkit-scrollbar { display: none; }
.game-right { min-height: 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px; }

/* hero de situación / estadio */
.node-hero { flex: none; border-radius: 14px; padding: 10px 14px; min-height: clamp(72px, 12dvh, 118px);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  background: linear-gradient(160deg, #1c2433, #101013); background-size: cover !important; background-position: center !important; }
.nh-title { font-size: clamp(16px, 2.4dvh, 21px); font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.nh-text { font-size: 12.5px; color: #d6d6dd; text-shadow: 0 1px 6px rgba(0,0,0,.9); line-height: 1.35; }

.reel { flex: none; }
.reel-title { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; margin: 2px 2px 3px; }
.hl { display: flex; align-items: center; gap: 9px; background: var(--panel2); border-left: 3px solid var(--green); border-radius: 9px;
  padding: 6px 10px; margin: 4px 0; opacity: 0; transform: translateY(8px); animation: pop .35s forwards; min-width: 0; }
.hl.bad { border-left-color: var(--red); }
.hl-ic { flex: none; display: inline-flex; }
.hl-ic .ic { width: 19px; height: 19px; color: var(--green); }
.hl.bad .hl-ic .ic { color: var(--red); }
.hl > div { min-width: 0; }
.hl .hl-m { font-size: 10px; color: var(--dim); }
.hl .hl-t { font-size: 12.5px; color: var(--txt); line-height: 1.3; }
@keyframes pop { to { opacity: 1; transform: none; } }

.summary { flex: none; background: var(--panel2); border: 1px solid var(--line); border-radius: 13px; padding: 9px 12px; color: var(--txt); }
.summary > b { font-size: 13px; display: block; }
.sum-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; margin: 6px 0 2px; }
.sum-grid b { display: block; font-size: 16px; }
.sum-grid small { color: var(--dim); font-size: 9px; text-transform: uppercase; }
.trophy-line { display: flex; align-items: center; gap: 8px; background: rgba(245,197,24,.1); border: 1px solid rgba(245,197,24,.4);
  color: #ffd95e; border-radius: 9px; padding: 5px 10px; margin: 4px 0; font-weight: 700; font-size: 12.5px; min-width: 0; }
.trophy-line img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.trophy-line .ic { width: 17px; height: 17px; flex: none; color: #ffd95e; }
.trophy-line span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-line { color: var(--dim); font-size: 12px; margin: 3px 2px; line-height: 1.35; }
.note-line.with-ic .ic { width: 13px; height: 13px; color: var(--faint); }

/* tarjetas FUT */
.offer-grid { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; padding-top: 4px; }
.fut-card { cursor: pointer; padding: 12px 8px 24px; text-align: center; transition: transform .1s;
  clip-path: polygon(8% 0, 92% 0, 100% 6%, 100% 86%, 50% 100%, 0 86%, 0 6%);
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.45)); display: flex; flex-direction: column; min-width: 0; }
.fut-card:hover { transform: translateY(-2px); }
.fut-card:active, .fut-card.picked { transform: scale(.97); }
.fut-card:disabled { opacity: .55; }
.fut-card.gold { background: linear-gradient(165deg, #f6e6ae 0%, #e3c368 40%, #b8933d 100%); color: #3a2d10; }
.fut-card.silver { background: linear-gradient(165deg, #e8ecf1 0%, #bfc7d1 45%, #8d97a3 100%); color: #23282e; }
.fut-card.bronze { background: linear-gradient(165deg, #e2b48c 0%, #c58f5f 45%, #8f5f3c 100%); color: #33210f; }
.fc-top { display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px; opacity: .8; padding: 0 3px; white-space: nowrap; }
.fc-lvl { font-size: 15px; font-weight: 900; }
.fc-badge { height: clamp(64px, 11dvh, 100px); display: flex; align-items: center; justify-content: center; margin: 7px 0 6px; }
.fc-badge img, .fc-badge .shield-fb svg { max-height: 100%; max-width: 104px; object-fit: contain; }
.fc-name { font-size: 15.5px; font-weight: 900; line-height: 1.15; padding: 0 6px; overflow-wrap: break-word; }
.fc-league { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11.5px; font-weight: 700; opacity: .85; margin-top: 6px; white-space: nowrap; overflow: hidden; }
.fc-league img { width: 16px; height: 16px; object-fit: contain; flex: none; }
.fc-league .ic { width: 13px; height: 13px; }
.fc-exp { font-size: 11.5px; font-weight: 800; margin: 6px 6px 0; padding: 5px 8px; border-radius: 8px; background: rgba(0,0,0,.14); line-height: 1.3; }
.fc-desc { font-size: 11.5px; font-weight: 600; opacity: .85; margin-top: 5px; padding: 0 6px; line-height: 1.3; }

.offer-card.text-card { background: var(--panel2); border: 1px solid #34343c; border-radius: 14px; padding: 12px 14px;
  text-align: left; cursor: pointer; color: var(--txt) !important; transition: border-color .15s, transform .08s; min-width: 0; }
.offer-card.text-card:hover { border-color: #8a8a95; }
.offer-card.text-card:active { transform: scale(.97); }
.offer-card.text-card:disabled { opacity: .55; }
.offer-card .oc-name { font-size: 14.5px; font-weight: 800; color: #fff; margin-bottom: 3px; }
.offer-card .oc-desc { font-size: 12px; color: #b9b9c3; line-height: 1.35; }

.game-foot { flex: none; display: flex; justify-content: center; gap: 4px; padding-top: 2px; }
.only-mobile { display: none; }

/* timeline */
.timeline { width: 100%; border-collapse: collapse; table-layout: fixed; }
.timeline th { font-size: 9px; color: var(--faint); text-transform: uppercase; letter-spacing: 1px; text-align: left; padding: 4px 6px; }
.timeline th:first-child { width: 44px; }
.timeline th.tr-r, .timeline td.tr-r { text-align: right; width: 36px; }
.timeline th:nth-child(3) { width: 42px; }
.timeline td { padding: 5px 6px; font-size: 12.5px; }
.timeline tr.tl-done td { background: var(--panel2); }
.timeline tr.tl-now td { background: var(--panel3); }
.timeline tr { border-bottom: 4px solid var(--panel); }
.timeline tr td:first-child { border-radius: 8px 0 0 8px; }
.timeline tr td:last-child { border-radius: 0 8px 8px 0; }
.age-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 4px 0;
  border-radius: 8px; font-weight: 900; font-size: 12.5px; background: var(--panel3); color: var(--faint); }
.tl-done .age-chip { background: var(--gold); color: #101013; }
.tl-now .age-chip { background: #f5f5f7; color: #101013; }
.tl-club { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tl-club span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.ovr-chip { display: inline-block; min-width: 30px; text-align: center; padding: 3px 5px; border-radius: 7px; font-weight: 900; font-size: 12px;
  background: linear-gradient(160deg, #f0d98c, #b8933d); color: #3a2d10; }
.tl-future td { color: var(--faint); }
.tl-dim { color: var(--dim); font-size: 12px; }

/* final */
.end-card { text-align: center; overflow-y: auto; }
.points-break { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 8px 0; }
.points-break > div { background: var(--panel3); border-radius: 11px; padding: 7px; }
.points-break b { display: block; font-size: 19px; }
.points-break small { color: var(--dim); font-size: 9px; text-transform: uppercase; }
.legend-score { font-size: 46px; font-weight: 900; color: var(--gold); line-height: 1; margin: 4px 0 0; }
.verdict { font-size: 16px; font-weight: 800; margin: 4px 0 8px; }
.ach-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--panel3); border: 1px solid var(--line);
  border-radius: 18px; padding: 5px 10px; margin: 2px; font-size: 12px; color: var(--txt); white-space: nowrap; }
.ach-chip .ic { width: 13px; height: 13px; color: var(--gold); }

/* home / ranking */
.career-row { display: flex; justify-content: space-between; align-items: center; background: var(--panel); border: 1px solid var(--line);
  border-radius: 15px; padding: 13px; margin: 7px 0; cursor: pointer; }
.career-row .cr-sub { color: var(--dim); font-size: 12px; margin-top: 2px; }
.career-row .cr-ovr { font-size: 20px; font-weight: 900; color: var(--gold); }
.career-row .cr-ovr .ic { width: 20px; height: 20px; }
.board-row { display: flex; align-items: center; gap: 9px; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; min-width: 0; }
.board-row:last-child { border-bottom: none; }
.board-row .rank { width: 22px; color: var(--dim); font-weight: 800; flex: none; }
.board-row .b-name { flex: 1; min-width: 0; }
.board-row .b-name b { white-space: nowrap; }
.board-row .b-user { color: var(--dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-row .b-score { font-weight: 900; color: var(--gold); font-size: 18px; }
.board-row .b-break { font-size: 9.5px; color: var(--faint); text-align: right; white-space: nowrap; }

/* modales */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.74); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 14px; }
.modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; max-width: 480px; width: 100%;
  max-height: 86dvh; display: flex; flex-direction: column; padding: 14px; }
.modal-head { flex: none; display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.modal-body { flex: 1; }
.palm-sec { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; margin: 10px 2px 5px; }
.palm-empty { color: var(--dim); text-align: center; padding: 22px 0; }

#ovr-pop { position: fixed; top: 16%; left: 50%; transform: translateX(-50%); font-size: 36px; font-weight: 900; pointer-events: none; opacity: 0; z-index: 50; }
#ovr-pop.show { animation: rise 1.4s ease forwards; }
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.6); }
  25% { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -50px) scale(1); } }

/* ---------- móvil ---------- */
@media (max-width: 900px) {
  #app { padding: 8px 8px calc(6px + env(safe-area-inset-bottom)); }
  .id-tabs { display: flex; }
  .id-grid { grid-template-columns: 1fr; padding: 10px 14px; }
  .id-col { display: none; }
  .id-col.active { display: flex; }
  .game-grid { grid-template-columns: 1fr; }
  .game-right { display: none; }
  .only-mobile { display: inline-flex; }
  .offer-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .offer-grid:has(.text-card) { grid-template-columns: 1fr; }
  .fc-desc { display: none; }
  .fc-name { font-size: 12.5px; }
  .fc-top { font-size: 9px; }
  .pcard-right { display: none; }
  .chip-row { flex-wrap: nowrap; }
  .clubline { font-size: 15px; }
  .om-ovr { font-size: 25px; }
  .ovr-mini { min-width: 60px; }
  .statmeters { gap: 7px; padding: 6px 10px; }
  .nh-title { font-size: 16px; }
  .hl .hl-t { font-size: 12px; }
  .sum-grid b { font-size: 14px; }
}
@media (max-height: 660px) {
  .node-hero { min-height: 62px; }
  .nh-text { -webkit-line-clamp: 1; }
  .hint { display: none; }
  .hl { padding: 4px 9px; margin: 3px 0; }
  .fc-badge { height: 42px; }
  .summary .sum-grid b { font-size: 13px; }
}
@media (min-width: 901px) {
  .offer-grid:has(.text-card) { grid-template-columns: 1fr 1fr; }
  .offer-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* míster y expectativa */
.chip-coach { background: #2a1f3d; color: #d8c7f7; margin-left: 8px; }
.expect-line { font-size: 11.5px; color: var(--gold); line-height: 1.25; }

/* panel de atributos */
.attr-panel, .create-attrs { background: var(--panel2); border: 1px solid var(--line); border-radius: 13px; padding: 10px 12px; margin: 8px 0; }
.create-attrs { margin-top: 12px; }
.attr-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.attr-head b { color: var(--gold); }
.attr-head .btn { margin: 0; }
.attr-row { display: grid; grid-template-columns: 1fr 70px 26px 30px 30px; align-items: center; gap: 7px; padding: 3px 0; }
.attr-name { font-size: 12px; color: var(--dim); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attr-bar { height: 6px; background: var(--panel3); border-radius: 5px; overflow: hidden; }
.attr-bar span { display: block; height: 100%; background: linear-gradient(90deg, #4a7dff, #2ee56e); border-radius: 5px; }
.attr-val { font-size: 13px; text-align: center; }
.attr-val.up { color: var(--green); }
.attr-btn { width: 28px; height: 28px; border-radius: 8px; background: var(--panel3); color: var(--txt); font-size: 16px; font-weight: 900; cursor: pointer; }
.attr-btn:active { background: #34343e; }

/* pill de riesgo + ruleta */
.oc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.oc-head .oc-name { margin-bottom: 0; flex: 1; }
.risk-pill { flex: none; font-size: 12px; font-weight: 900; padding: 4px 9px; border-radius: 999px; }
.risk-pill.ok { background: rgba(46,229,110,.15); color: var(--green); border: 1px solid rgba(46,229,110,.5); }
.risk-pill.mid { background: rgba(245,197,24,.13); color: var(--gold); border: 1px solid rgba(245,197,24,.5); }
.risk-pill.bad { background: rgba(255,90,90,.13); color: var(--red); border: 1px solid rgba(255,90,90,.5); }

@keyframes roulette-blink {
  0%, 100% { background: rgba(46,229,110,.22); border-color: var(--green); box-shadow: 0 0 18px rgba(46,229,110,.35); }
  50% { background: rgba(255,90,90,.22); border-color: var(--red); box-shadow: 0 0 18px rgba(255,90,90,.35); }
}
.offer-card.roulette { animation: roulette-blink .16s linear infinite; }
.offer-card.win { background: rgba(46,229,110,.16) !important; border-color: var(--green) !important; box-shadow: 0 0 24px rgba(46,229,110,.4); }
.offer-card.lose { background: rgba(255,90,90,.16) !important; border-color: var(--red) !important; box-shadow: 0 0 24px rgba(255,90,90,.4); animation: shake .4s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.outcome-tag { margin-top: 8px; font-size: 13px; font-weight: 800; padding: 6px 10px; border-radius: 9px; }
.outcome-tag.win { background: rgba(46,229,110,.18); color: var(--green); }
.outcome-tag.lose { background: rgba(255,90,90,.18); color: var(--red); }

/* carrusel snap en móvil (técnica de card-games móviles) */
@media (max-width: 900px) {
  .offer-grid.snap { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 4px 2px 10px;
    scrollbar-width: none; }
  .offer-grid.snap::-webkit-scrollbar { display: none; }
  .offer-grid.snap .fut-card { min-width: 62%; scroll-snap-align: center; }
  .offer-grid.snap .offer-card.text-card { min-width: 78%; scroll-snap-align: center; }
  .fut-card { padding-bottom: 26px; }
  .fc-badge { height: clamp(70px, 12dvh, 96px); }
}

/* ---------- slides móviles: una cosa por pantalla ---------- */
.slide-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 6px; }
.slide-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--dim); }
.slide-dots { display: flex; gap: 6px; }
.slide-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--panel3); }
.slide-dots span.on { background: var(--gold); }
.slide-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; }
.slide-body::-webkit-scrollbar { display: none; }
.slide-center { margin: auto 0; display: flex; flex-direction: column; gap: 10px; }
.slide-next { margin-top: auto; }

/* momento clave */
.offer-card.moment-go { border-color: var(--gold); background: linear-gradient(160deg, rgba(245,197,24,.12), var(--panel2)); }
.perk-note { color: var(--gold) !important; font-weight: 800; }
.perk-note .ic { color: var(--gold) !important; }

/* modal de rasgos */
.perk-row { display: flex; align-items: center; gap: 11px; padding: 11px 10px; border-radius: 12px; border: 1px solid var(--line);
  margin: 7px 0; cursor: pointer; background: var(--panel2); }
.perk-row.active { border-color: var(--gold); background: rgba(245,197,24,.08); }
.perk-row.locked { opacity: .55; cursor: default; }
.perk-ic { flex: none; }
.perk-ic .ic { width: 22px; height: 22px; color: var(--gold); }
.perk-info { flex: 1; min-width: 0; }
.perk-info b { display: block; font-size: 14px; }
.perk-info span { font-size: 12px; color: var(--dim); line-height: 1.3; }
.perk-state { flex: none; font-size: 10.5px; font-weight: 900; letter-spacing: .5px; color: var(--gold); }
.lock-ic { color: var(--faint); }

/* edad en móvil + vitrina en miniatura */
.chip-age { background: #1c2a3f; color: #cfe3ff; }
.mini-vitrina { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mini-vitrina img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.mini-vitrina .mv-label .ic { width: 15px; height: 15px; color: var(--gold); }
.mini-vitrina .mv-fb .ic { width: 20px; height: 20px; color: var(--gold); }
.mini-vitrina .mv-more { font-size: 11.5px; font-weight: 800; color: var(--dim); flex: none; }

/* ---------- móvil: aprovechar todo el espacio ---------- */
@media (max-width: 900px) {
  /* pie tipo tab-bar: icono arriba, etiqueta debajo — nunca se solapan */
  .game-foot { gap: 2px; justify-content: space-around; padding-top: 6px; }
  .game-foot .btn.mini { flex: 1 1 0; flex-direction: column; gap: 3px; font-size: 9.5px;
    padding: 6px 2px; margin: 0; border: none; color: var(--dim); letter-spacing: .3px; }
  .game-foot .btn.mini .ic { width: 21px; height: 21px; }
  .game-foot .btn.mini .chip { position: absolute; transform: translate(16px, -6px); font-size: 8.5px; padding: 1px 5px; }
  .game-foot .btn.mini { position: relative; }

  /* slides: contenido centrado y a tamaño completo, sin vacíos */
  .slide-center { gap: 12px; }
  .slide-body .node-hero { flex: none; min-height: clamp(120px, 22dvh, 200px); }
  .slide-body .offer-grid { margin-top: 0; }
  .slide-body .offer-grid:not(.snap) { gap: 12px; }
  .offer-card.text-card { padding: 18px 16px; }
  .offer-card .oc-name { font-size: 16px; }
  .offer-card .oc-desc { font-size: 13px; }

  /* carrusel de fichajes: cartas grandes que llenan la altura */
  .offer-grid.snap { align-items: center; }
  .offer-grid.snap .fut-card { min-width: 68%; height: min(54dvh, 420px); justify-content: center; gap: 4px; }
  .offer-grid.snap .fut-card .fc-badge { height: clamp(90px, 16dvh, 140px); }
  .offer-grid.snap .fut-card .fc-badge img, .offer-grid.snap .fut-card .fc-badge .shield-fb svg { max-width: 140px; }
  .offer-grid.snap .fc-name { font-size: 18px; }
  .offer-grid.snap .fc-exp, .offer-grid.snap .fc-desc { font-size: 12.5px; }

  /* highlights centrados y más presentes */
  .slide-body .reel { display: flex; flex-direction: column; justify-content: center; }
  .slide-body .hl { padding: 12px 14px; margin: 6px 0; }
  .slide-body .hl .hl-t { font-size: 14px; }
  .slide-body .hl .hl-m { font-size: 11px; }
}

/* redondel bajo los logos de trofeos: contraste garantizado sobre cualquier fondo */
.trophy-line img, .mini-vitrina img {
  background: #ececf0; border-radius: 50%; padding: 3px; box-sizing: content-box;
  width: 22px; height: 22px; box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.mini-vitrina img { width: 22px; height: 22px; }

/* ---------- capa de competición ---------- */
.daily-card { display: flex; align-items: center; gap: 12px; padding: 13px 15px; margin: 4px 0 10px; cursor: pointer;
  background: linear-gradient(120deg, #1b2340, #12172b); border: 1px solid #2c3a66; border-radius: 16px; }
.daily-card .dc-ic { width: 26px; height: 26px; color: var(--gold); }
.dc-mid { flex: 1; min-width: 0; }
.dc-mid b { display: block; font-size: 15px; }
.dc-mid span { font-size: 12px; color: var(--dim); }
.dc-cta { flex: none; background: #f5f5f7; color: #101013; font-weight: 800; font-size: 13px; padding: 8px 15px; border-radius: 999px; }
.mode-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; flex: none; }
.mode-btn { flex-direction: column; gap: 4px; padding: 10px 4px; font-size: 10.5px; margin: 0; }
.mode-btn .ic { width: 19px; height: 19px; }
.mode-chip { display: inline-block; font-size: 9px; font-weight: 900; letter-spacing: .5px; padding: 2px 7px; border-radius: 999px; vertical-align: 2px; }
.m-daily { background: rgba(74,125,255,.18); color: #8fb0ff; }
.m-duel { background: rgba(255,90,90,.15); color: #ff9d9d; }
.m-ironman { background: rgba(245,197,24,.14); color: var(--gold); }
.row-right { display: flex; align-items: center; gap: 8px; }

.board-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; flex: none; scrollbar-width: none; }
.board-tabs::-webkit-scrollbar { display: none; }
.bt-tab { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line);
  color: var(--dim); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.bt-tab.on { background: #f5f5f7; color: #101013; border-color: #f5f5f7; }

.duel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.duel-col { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; text-align: center; }
.duel-col.done { border-color: var(--gold); }
.duel-pts { font-size: 34px; font-weight: 900; color: var(--gold); margin: 6px 0 2px; }
.lg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.lg-actions .btn { margin: 0; }

/* racha en momentos */
.streak-line { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 12.5px; font-weight: 900;
  color: #ff9d4d; background: rgba(255,140,50,.14); border: 1px solid rgba(255,140,50,.4); border-radius: 999px; padding: 4px 11px; }
.streak-line .ic { width: 15px; height: 15px; }

/* carta evolutiva */
.ovr-mini.t-bronze { background: linear-gradient(160deg, #d9a06a 0%, #a06a3c 45%, #6e441f 100%); color: #33210f; }
.ovr-mini.t-silver { background: linear-gradient(160deg, #e8ecf1 0%, #bfc7d1 45%, #8d97a3 100%); color: #23282e; }
.ovr-mini.t-gold { background: linear-gradient(160deg, #f0d98c 0%, #dcbb5f 45%, #b8933d 100%); color: #3a2d10; }
.ovr-mini.t-elite { background: linear-gradient(160deg, #34343c 0%, #17171c 60%, #000 100%); color: var(--gold);
  box-shadow: 0 0 18px rgba(245,197,24,.35); }
.ovr-mini.t-elite .om-pos { border-top-color: rgba(245,197,24,.5); }
@keyframes tierup { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.18) rotate(-3deg); }
  40% { transform: scale(1.08) rotate(2deg); } 60% { transform: scale(1.14); } }
.ovr-mini.tier-up { animation: tierup 1.6s ease; box-shadow: 0 0 34px rgba(245,197,24,.8); }

.share-link { display: inline-block; margin-top: 6px; padding: 8px 11px; background: var(--panel3); border-radius: 9px;
  font-size: 13px; color: #8fb0ff; word-break: break-all; user-select: all; -webkit-user-select: all; cursor: pointer; }

@media (max-height: 700px) {
  .attr-row { grid-template-columns: 1fr 54px 24px 28px 28px; padding: 2px 0; }
  .attr-btn { width: 26px; height: 26px; }
  .attr-panel { padding: 8px 10px; }
}
/* escritorio: las slides ocupan bien la columna izquierda */
@media (min-width: 901px) {
  .slide-center { max-width: 620px; width: 100%; margin-left: auto; margin-right: auto; }
}

/* ---------- tarjetas de club: verticales, minimalistas, acento por tier ---------- */
.offer-grid { display: flex; flex-direction: column; gap: 9px; }
.club-card { display: flex; align-items: center; gap: 13px; text-align: left; cursor: pointer; min-width: 0;
  background: var(--panel2); border: 1px solid var(--line); border-left-width: 4px; border-radius: 14px;
  padding: 12px 14px; transition: transform .08s, border-color .15s; }
.club-card:active { transform: scale(.98); }
.club-card:disabled { opacity: .55; }
.club-card.bronze { border-left-color: #b07a45; }
.club-card.silver { border-left-color: #a8b2bd; }
.club-card.gold { border-left-color: var(--gold); }
.club-card.elite { border-left-color: var(--gold); box-shadow: 0 0 14px rgba(245,197,24,.18); }
.cc-badge { flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: #ececf0; border-radius: 50%; padding: 5px; box-sizing: border-box; }
.cc-badge img, .cc-badge .shield-fb svg { max-width: 46px; max-height: 46px; object-fit: contain; }
.cc-info { flex: 1; min-width: 0; }
.cc-prefix { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
.cc-name { font-size: 16.5px; font-weight: 900; color: var(--txt); line-height: 1.2; }
.cc-league { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--dim); margin-top: 3px; flex-wrap: wrap; }
.cc-league img { width: 15px; height: 15px; object-fit: contain; flex: none; }
.cc-league .ic { width: 13px; height: 13px; }
.cc-desc { color: var(--dim); }
.cc-exp { font-size: 11.5px; font-weight: 700; color: var(--gold); margin-top: 4px; line-height: 1.3; }
.cc-lvl { flex: none; font-size: 20px; font-weight: 900; padding: 7px 11px; border-radius: 11px; background: var(--panel3); }
.club-card.bronze .cc-lvl { color: #d9a06a; }
.club-card.silver .cc-lvl { color: #c9d1da; }
.club-card.gold .cc-lvl, .club-card.elite .cc-lvl { color: var(--gold); }

/* la lista vertical sustituye al carrusel */
@media (max-width: 900px) {
  .offer-grid.snap { display: flex; flex-direction: column; overflow-x: visible; }
  .offer-grid.snap .fut-card { min-width: 0; height: auto; }
}
@media (min-width: 901px) {
  .offer-grid { grid-template-columns: none; }
  .offer-grid:has(.text-card) { grid-template-columns: none; }
}

.code-box { display: flex; align-items: center; justify-content: space-between; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 15px; margin: 7px 0; }
.code-box span { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; }
.code-box b { font-size: 18px; letter-spacing: 1px; user-select: all; -webkit-user-select: all; }

/* toasts no bloqueantes */
#toast-zone { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 6px; width: min(92vw, 400px); pointer-events: none; }
.toast { background: #23232b; border: 1px solid #3a3a44; color: var(--txt); border-radius: 12px; padding: 11px 14px;
  font-size: 13.5px; font-weight: 600; opacity: 0; transform: translateY(-8px); transition: all .3s; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.toast.bad { border-color: rgba(255,90,90,.5); }
.toast.show { opacity: 1; transform: none; }

.cc-id { font-size: 11px; font-weight: 800; color: #8fb0ff; margin-top: 4px; text-transform: uppercase; letter-spacing: .4px; }
.cc-fit { font-size: 11.5px; font-weight: 700; color: var(--green); margin-top: 3px; }
.cc-fit .ic { width: 13px; height: 13px; }
.delta-detail { color: #8fb0ff; font-weight: 600; }
.shop-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px;
  border: 1px solid var(--line); border-radius: 12px; margin: 6px 0; background: var(--panel3); cursor: pointer; color: var(--txt); }
.shop-row.poor { opacity: .5; cursor: default; }
.shop-cost { flex: none; font-weight: 900; color: var(--gold); font-size: 14px; }

/* ---------- transiciones de slides ---------- */
.slide-in { animation: slidein .28s cubic-bezier(.2,.8,.3,1); }
.slide-in.back { animation: slideback .28s cubic-bezier(.2,.8,.3,1); }
@keyframes slidein { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes slideback { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }

/* ---------- modo cine (momentos, Mundial, legado) ---------- */
.slide-center.cine { position: relative; }
.slide-center.cine .node-hero { min-height: clamp(180px, 34dvh, 300px); box-shadow: 0 0 0 1px rgba(245,197,24,.25), 0 0 44px rgba(245,197,24,.12); animation: heartbeat 1.6s ease-in-out infinite; }
.slide-center.cine .nh-title { font-size: clamp(20px, 3.4dvh, 28px); }
@keyframes heartbeat { 0%, 100% { box-shadow: 0 0 0 1px rgba(245,197,24,.22), 0 0 30px rgba(245,197,24,.08); }
  50% { box-shadow: 0 0 0 1px rgba(245,197,24,.5), 0 0 54px rgba(245,197,24,.22); } }

/* ---------- confeti ---------- */
.confetti { position: fixed; top: -12px; width: 9px; height: 14px; z-index: 95; pointer-events: none;
  animation: cfall 2.1s linear forwards; border-radius: 2px; }
@keyframes cfall { to { transform: translateY(105vh) rotate(720deg); opacity: .7; } }

/* ---------- splash de título ---------- */
.trophy-splash { text-align: center; padding: 4dvh 0; }
.ts-item { margin: 12px 0; animation: tspop .6s cubic-bezier(.2,.9,.3,1.4); }
.ts-img { width: clamp(110px, 24dvh, 190px); height: auto; object-fit: contain; background: #ececf0;
  border-radius: 50%; padding: 16px; box-sizing: border-box; box-shadow: 0 0 60px rgba(245,197,24,.45); }
.ts-fallback { width: 90px; height: 90px; color: var(--gold); }
.ts-label { font-family: var(--cond); font-weight: 800; font-size: 19px; margin-top: 12px; color: var(--gold); }
.ts-shout { font-family: var(--display); font-size: 15px; letter-spacing: 3px; color: var(--dim); margin-top: 10px; }
@keyframes tspop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- spinner de carga en la opción pulsada ---------- */
.loading { position: relative; }
.loading::after { content: ""; position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border: 2.5px solid rgba(255,255,255,.25); border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- tira de trayectoria (móvil) ---------- */
.timeline-strip { display: none; }
@media (max-width: 900px) {
  .timeline-strip { display: flex; gap: 5px; overflow-x: auto; padding: 2px 1px; flex: none; scrollbar-width: none; cursor: pointer; }
  .timeline-strip::-webkit-scrollbar { display: none; }
  .tls-node { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; }
  .tls-node span { font-size: 10px; font-weight: 800; color: var(--faint); }
  .tls-node img { width: 20px; height: 20px; object-fit: contain; }
  .tls-node.done { background: #ececf0; border-color: var(--gold); }
  .tls-node.now { border-color: var(--gold); box-shadow: 0 0 8px rgba(245,197,24,.5); }
  .tls-node.now span { color: var(--gold); }
}

/* ---------- onboarding ---------- */
.onboard { position: fixed; inset: 0; background: rgba(5,5,7,.86); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ob-card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 22px; max-width: 380px; width: 100%; text-align: center; }
.ob-card h3 { font-family: var(--cond); font-size: 22px; margin: 6px 0; }
.ob-card p { color: var(--dim); font-size: 14.5px; line-height: 1.5; margin-bottom: 10px; }
.ob-step { font-family: var(--display); color: var(--gold); font-size: 13px; }

/* ---------- recap final ---------- */
.end-card.reveal .points-break, .end-card.reveal .verdict, .end-card.reveal .sum-grid,
.end-card.reveal .trophy-line, .end-card.reveal .note-line, .end-card.reveal .ach-chip
  { animation: fadeup .5s both; }
.end-card.reveal .points-break { animation-delay: .9s; }
.end-card.reveal .verdict { animation-delay: 1.2s; }
.end-card.reveal .sum-grid { animation-delay: 1.4s; }
.end-card.reveal .trophy-line { animation-delay: 1.6s; }
.end-card.reveal .ach-chip { animation-delay: 1.9s; }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }