:root {
  color-scheme: dark;
  --bg-deep: #010b16;
  --bg: #03182d;
  --panel: #082e52;
  --panel-strong: #073762;
  --panel-soft: rgba(255, 255, 255, .065);
  --line: rgba(145, 215, 250, .25);
  --text: #fffdf5;
  --muted: #b8d3e7;
  --sky: #63d3ff;
  --sky-strong: #2e9fdb;
  --gold: #f4c557;
  --gold-deep: #a96d13;
  --green: #51dc9d;
  --red: #ff6575;
  --shadow: 0 24px 70px rgba(0, 5, 14, .45);
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--bg-deep);
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-width: 300px;
  min-height: 100svh;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -12%, rgba(83, 182, 242, .26), transparent 32rem),
    linear-gradient(180deg, #0a3e6c 0%, #062948 38%, #03182d 68%, #010b16 100%);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid rgba(99, 211, 255, .85); outline-offset: 3px; }
button:disabled { cursor: default; }

#app,
.app-shell { min-height: 100svh; }

.app-shell { overflow-anchor: none; }
.icon { width: 1.25em; height: 1.25em; display: block; }
.mascot, .argentine-sun { display: block; overflow: visible; }

.screen {
  position: relative;
  isolation: isolate;
  width: min(100%, 760px);
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 14%, rgba(102, 199, 249, .11), transparent 31%),
    linear-gradient(120deg, transparent 0 47%, rgba(255, 255, 255, .018) 47% 52%, transparent 52%) 0 0 / 120px 120px;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.bg-shape {
  position: absolute;
  z-index: -2;
  border-radius: 999px;
  pointer-events: none;
}

.bg-shape-one { width: 240px; height: 240px; left: -135px; top: 25%; background: radial-gradient(circle, rgba(86, 204, 255, .12), transparent 70%); }
.bg-shape-two { width: 300px; height: 300px; right: -165px; bottom: 3%; background: radial-gradient(circle, rgba(244, 197, 87, .08), transparent 70%); }

/* Encabezados e identidad */
.topbar {
  position: relative;
  z-index: 5;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.topbar.compact { justify-content: flex-start; }
.brand { min-width: 0; display: flex; align-items: center; gap: 10px; }
.brand > div:last-child { min-width: 0; }
.brand strong { display: block; font-size: 1rem; line-height: 1.05; white-space: nowrap; }
.brand span { display: block; margin-top: 4px; color: var(--muted); font-size: .68rem; white-space: nowrap; }

.logo-mark {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 14px rgba(73, 183, 237, .25));
}

.logo-mark svg { width: 100%; height: 100%; display: block; }
.logo-mark .logo-sun { x: 46px; y: 3px; width: 23px; height: 23px; }
.top-actions { display: flex; align-items: center; gap: 8px; }

.version-pill {
  padding: 6px 9px;
  color: #102b48;
  font-size: .65rem;
  font-weight: 900;
  border: 1px solid rgba(255, 238, 171, .75);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe797, #f1bd45);
  box-shadow: 0 7px 16px rgba(189, 126, 19, .2);
}

.public-version-pill {
  position: absolute;
  top: 19px;
  right: 16px;
  z-index: 4;
  letter-spacing: .045em;
  white-space: nowrap;
}

.icon-btn,
.back-btn {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(3, 30, 54, .72);
  cursor: pointer;
}

.back-btn .icon { transform: rotate(180deg); }
.screen-title { flex: 1; min-width: 0; }
.screen-title strong { display: block; font-size: .96rem; }
.screen-title span { display: block; margin-top: 3px; color: var(--muted); font-size: .68rem; }

/* Inicio */
.home-screen { overflow-y: auto; }
.home-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding-top: 8px;
}

.hero-card {
  position: relative;
  min-height: 432px;
  overflow: hidden;
  padding: 19px 16px 112px;
  border: 1.5px solid rgba(244, 197, 87, .78);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 17%, rgba(115, 195, 245, .13), transparent 29%),
    repeating-conic-gradient(from 270deg at 50% 118%, rgba(255, 255, 255, .035) 0 6deg, transparent 6deg 12deg),
    linear-gradient(180deg, #104473 0%, #0b3157 51%, #072343 100%);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(135, 216, 252, .18), inset 0 1px 0 rgba(255, 255, 255, .16);
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    radial-gradient(circle at 20% 25%, #fff 0 1px, transparent 1.7px),
    radial-gradient(circle at 77% 15%, #fff 0 1px, transparent 1.7px),
    radial-gradient(circle at 90% 54%, #fff 0 1px, transparent 1.7px),
    radial-gradient(circle at 10% 66%, #fff 0 1px, transparent 1.7px);
  background-size: 80px 80px, 110px 110px, 92px 92px, 120px 120px;
}

.hero-copy,
.hero-arena,
.hero-badges { position: relative; z-index: 2; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffd766;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .11em;
}

.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #ffd766; box-shadow: 0 0 0 5px rgba(244, 197, 87, .1); }

.hero-copy h1,
.setup-intro h1,
.result-hero h1 {
  margin: 9px 0 8px;
  font-size: clamp(2rem, 10vw, 4rem);
  line-height: .97;
  letter-spacing: -.055em;
}

.hero-copy h1 em { color: #67d4ff; font-style: normal; text-shadow: 0 0 24px rgba(99, 211, 255, .2); }
.hero-copy p, .setup-intro p, .result-hero p { max-width: 35ch; margin: 0; color: #d0e3f2; font-size: .86rem; line-height: 1.46; }

.hero-arena {
  height: 140px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.arena-orbit { position: absolute; border: 1px solid rgba(126, 211, 252, .2); border-radius: 50%; }
.orbit-one { width: 190px; height: 78px; transform: rotate(-6deg); }
.orbit-two { display: none; }
.fighter { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; animation: float 3.2s ease-in-out infinite; }
.fighter-cpu { animation-delay: -.9s; }
.fighter .mascot { width: 84px; height: 84px; filter: drop-shadow(0 17px 17px rgba(0, 0, 0, .25)); }
.fighter span { margin-top: -6px; padding: 5px 10px; color: white; font-size: .58rem; font-weight: 950; letter-spacing: .14em; border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; background: rgba(2, 21, 39, .83); }

.versus {
  position: relative;
  z-index: 4;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: #35170f;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffdf75, #f2b63b);
  box-shadow: 0 12px 28px rgba(184, 121, 16, .28), 0 0 0 7px rgba(255, 255, 255, .055);
  transform: rotate(-5deg);
}

.versus small { position: absolute; top: -15px; color: #fff2c2; font-size: .44rem; font-weight: 950; letter-spacing: .14em; }
.versus strong { font-size: 1.05rem; font-style: italic; }
.versus i { position: absolute; z-index: -1; width: 80px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); transform: rotate(-45deg); }
.floating-card { display: none; }

.hero-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
.hero-badges span { min-height: 29px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; color: #ecf8ff; font-size: .62rem; font-weight: 850; border: 1px solid rgba(244, 197, 87, .38); border-radius: 999px; background: rgba(3, 26, 47, .76); }
.hero-badges .icon { width: 14px; height: 14px; color: var(--gold); }

.home-landmark-strip {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 126px;
  pointer-events: none;
  border-radius: 0 0 29px 29px;
  background:
    linear-gradient(180deg, rgba(8, 35, 64, 0) 0%, rgba(8, 35, 64, .08) 24%, rgba(8, 35, 64, .02) 100%),
    url('/assets/ref-crowd.png') center bottom / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(to top, #000 72%, rgba(0, 0, 0, .65) 87%, transparent 100%);
  mask-image: linear-gradient(to top, #000 72%, rgba(0, 0, 0, .65) 87%, transparent 100%);
}

.cta-button,
.start-button,
.ghost-button,
.text-button { border: 0; cursor: pointer; font-weight: 900; }

.cta-button {
  position: relative;
  width: 100%;
  min-height: 58px;
  overflow: hidden;
  padding: 0 18px 0 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #06182b;
  border-radius: 19px;
  background: linear-gradient(135deg, #64d6fa 0%, #3aaee6 56%, #f2c24d 100%);
  box-shadow: 0 15px 35px rgba(31, 117, 176, .3), inset 0 1px 0 rgba(255, 255, 255, .34);
}

.cta-button::before { content: ""; position: absolute; width: 90px; height: 130px; top: -42px; left: -38px; background: rgba(255, 255, 255, .16); transform: rotate(27deg); }
.cta-button span, .cta-button .icon { position: relative; }
.cta-button span { font-size: 1rem; }
.cta-button .icon { width: 24px; height: 24px; }
.cta-button:active, .start-button:active, .ghost-button:active, .category-card:active { transform: scale(.985); }

.home-play-section { display: grid; gap: 8px; }
.home-section-heading { padding: 0 3px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.home-section-heading strong { font-size: .78rem; }
.home-section-heading small { color: var(--muted); font-size: .58rem; text-align: right; }
.home-play-options { display: grid; gap: 9px; }
.guest-entry-card {
  padding: 16px;
  display: grid;
  gap: 13px;
  border: 1px solid rgba(126, 213, 252, .26);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(12, 72, 114, .94), rgba(4, 33, 63, .97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 30px rgba(0, 0, 0, .2);
}
.guest-entry-card h2 { margin: 6px 0 5px; font-size: 1.3rem; letter-spacing: -.025em; }
.guest-entry-card p { margin: 0; color: #b9d4e5; font-size: .7rem; line-height: 1.4; }
.free-note { padding: 2px 4px; display: flex; align-items: center; gap: 9px; color: #c8dcea; font-size: .66rem; line-height: 1.35; }
.free-note > span { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; color: var(--green); border-radius: 9px; background: rgba(81, 220, 157, .11); }
.free-note p { margin: 0; }
.free-note strong { color: #ecfff8; }

/* Selección de categoría */
.setup-screen { padding-bottom: calc(98px + env(safe-area-inset-bottom)); }
.setup-intro { margin: 14px 0; padding: 15px; display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 23px; background: linear-gradient(135deg, rgba(15, 72, 119, .85), rgba(5, 38, 70, .88)); box-shadow: 0 18px 55px rgba(0, 0, 0, .2); }
.setup-intro h1 { margin: 6px 0; font-size: clamp(1.65rem, 7.8vw, 2.7rem); }
.setup-intro p { font-size: .75rem; }
.mini-duel { position: relative; height: 78px; display: flex; align-items: center; justify-content: center; }
.mini-duel .mascot { position: absolute; width: 62px; height: 62px; }
.mini-duel .mascot-user { left: -3px; bottom: 0; transform: rotate(-10deg); }
.mini-duel .mascot-cpu { right: -3px; top: 0; transform: rotate(9deg); }
.mini-duel > span { position: relative; z-index: 3; width: 30px; height: 30px; display: grid; place-items: center; color: #381a0f; font-size: .58rem; font-weight: 950; border-radius: 50%; background: var(--gold); box-shadow: 0 7px 15px rgba(0, 0, 0, .28); }
.category-list { display: grid; grid-template-columns: 1fr; gap: 9px; }

.category-card {
  --accent: var(--sky);
  width: 100%;
  min-height: 71px;
  padding: 10px 12px 10px 10px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(10, 57, 96, .9), rgba(3, 28, 52, .9));
  cursor: pointer;
  transition: transform .12s ease, border-color .18s ease, background .18s ease;
}

.category-card.selected { border-color: var(--accent); background: linear-gradient(135deg, rgba(28, 104, 156, .85), rgba(4, 40, 71, .96)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 10px 26px rgba(0, 0, 0, .16); }
.category-art { width: 50px; height: 50px; display: grid; place-items: center; color: var(--accent); border: 1px solid rgba(255, 255, 255, .1); border-radius: 15px; background: rgba(1, 18, 34, .55); }
.category-art .icon { width: 26px; height: 26px; }
.category-copy { min-width: 0; }
.category-copy strong { display: block; font-size: .84rem; }
.category-copy small { display: block; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.category-check { width: 25px; height: 25px; display: grid; place-items: center; color: transparent; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; background: rgba(0, 0, 0, .14); }
.category-check .icon { width: 14px; height: 14px; }
.category-card.selected .category-check { color: #07121d; border-color: transparent; background: var(--accent); }
.accent-mix { --accent: #b992ff; }
.accent-sky { --accent: #76dcff; }
.accent-orange { --accent: #ffac69; }
.accent-gold { --accent: #ffd36b; }
.accent-blue { --accent: #65aaff; }
.accent-mint { --accent: #64ead0; }
.accent-pink { --accent: #ff8fc0; }
.accent-violet { --accent: #b18cff; }
.accent-rose { --accent: #ff8292; }
.accent-cyan { --accent: #75e8ff; }
.accent-purple { --accent: #d28bff; }

.sticky-action {
  position: fixed;
  z-index: 12;
  left: 50%;
  bottom: 0;
  width: min(100%, 760px);
  min-height: 85px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(1, 11, 22, 0), rgba(1, 11, 22, .97) 28%);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}

.sticky-action small { display: block; color: var(--muted); font-size: .58rem; }
.sticky-action strong { display: block; max-width: 180px; margin-top: 2px; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.start-button { min-height: 49px; padding: 0 15px 0 18px; display: inline-flex; align-items: center; gap: 10px; color: #071b2d; border-radius: 16px; background: linear-gradient(135deg, #65d5f7, #f2c24d); box-shadow: 0 10px 25px rgba(31, 117, 176, .24); }
.start-button .icon { width: 19px; height: 19px; }

/* Partida */
.game-screen {
  min-height: 100svh;
  padding: 0 14px calc(12px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 0%, rgba(90, 190, 247, .2), transparent 28rem),
    linear-gradient(180deg, #0a3a68 0%, #062846 44%, #03172d 76%, #010b16 100%);
}

.game-screen::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0 47%, rgba(255, 255, 255, .018) 47% 52%, transparent 52%) 0 0 / 120px 120px;
}

.game-brand-header {
  flex: 0 0 auto;
  width: calc(100% + 28px);
  height: clamp(76px, 21.8vw, 165px);
  margin: 0 -14px 4px;
  overflow: hidden;
  background: url('/assets/ref-header.png') center top / 100% 100% no-repeat;
}

.game-brand-header > * { display: none; }

.duel-hud {
  flex: 0 0 auto;
  margin: 0 8px 5px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.hud-player {
  min-width: 0;
  height: 68px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(244, 197, 87, .52);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(8, 52, 90, .96), rgba(3, 27, 51, .97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 24px rgba(0, 0, 0, .18);
}

.hud-player.cpu-side { justify-content: flex-end; text-align: right; }
.hud-avatar { width: 46px; height: 46px; flex: 0 0 46px; padding: 3px; display: grid; place-items: center; overflow: hidden; border: 2px solid rgba(111, 207, 255, .78); border-radius: 50%; background: radial-gradient(circle at 45% 36%, #154f82, #062543 74%); box-shadow: 0 0 0 3px rgba(4, 31, 57, .92), inset 0 1px 0 rgba(255, 255, 255, .16); }
.hud-player.cpu-side .hud-avatar { border-color: rgba(244, 197, 87, .78); }
.hud-avatar .mascot { width: 100%; height: 100%; max-width: 100%; max-height: 100%; filter: none; }
.hud-avatar .player-avatar { width: 100%; height: 100%; border: 0; box-shadow: none; font-size: 1.2rem; }
.hud-avatar .mascot-user { transform: scale(.88); }
.hud-avatar .mascot-cpu { transform: scale(.86); }
.hud-avatar i { display: none; }
.hud-name { min-width: 0; flex: 1; }
.hud-name strong { display: block; overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.hud-name span { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.hud-score { min-width: 23px; flex: 0 0 auto; color: #fff7dc; font-size: 1.42rem; font-weight: 950; text-align: center; }

.countdown {
  --timer: 100%;
  position: relative;
  z-index: 2;
  width: 76px;
  height: 76px;
  padding: 5px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#59dbff var(--timer), rgba(255, 255, 255, .12) 0);
  box-shadow: 0 0 0 3px #062849, 0 0 0 5px rgba(244, 197, 87, .78), 0 10px 25px rgba(0, 0, 0, .28);
  transition: filter .2s ease;
}

.countdown.danger { background: conic-gradient(var(--red) var(--timer), rgba(255, 255, 255, .1) 0); filter: drop-shadow(0 0 8px rgba(255, 101, 117, .38)); animation: pulse .58s ease-in-out infinite; }
.countdown > div { width: 100%; height: 100%; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #0d4778, #031a31 78%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.countdown strong { display: block; font-size: 1.55rem; line-height: .92; }
.countdown span { display: block; margin-top: 3px; color: #69d9ff; font-size: .42rem; font-weight: 950; letter-spacing: .13em; }

.round-progress {
  flex: 0 0 auto;
  min-height: 39px;
  margin: 0 12px 7px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
}

.round-progress > div:first-child { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.round-progress > div:first-child span { font-size: .72rem; font-weight: 950; }
.round-progress > div:first-child small { color: var(--muted); font-size: .53rem; }
.round-dots { display: flex; justify-content: center; gap: 4px; }
.round-dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(136, 203, 237, .2); }
.round-dots i.done { background: var(--green); }
.round-dots i.active { width: 20px; background: linear-gradient(90deg, #55d7fb, #88e8ff); box-shadow: 0 0 10px rgba(99, 211, 255, .28); }
.game-sound { width: 36px; height: 36px; border-radius: 12px; }
.game-sound .icon { width: 17px; height: 17px; }

.question-zone { flex: 0 0 auto; min-height: 0; padding: 0 4px; display: flex; flex-direction: column; gap: 8px; }
.question-panel { --accent: var(--sky); position: relative; min-height: clamp(168px, 27vh, 244px); overflow: hidden; padding: 20px 15px 17px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 2px solid rgba(244, 197, 87, .88); border-radius: 28px; background: repeating-conic-gradient(from 270deg at 50% 112%, rgba(132, 214, 255, .085) 0 5deg, transparent 5deg 11deg), radial-gradient(circle at 50% 46%, rgba(31, 119, 180, .36), transparent 55%), linear-gradient(180deg, #0b4779 0%, #08345c 62%, #062746 100%); box-shadow: 0 20px 45px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(131, 216, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .14); }
.question-panel::after { content: ""; position: absolute; inset: 9px; pointer-events: none; border: 1px solid rgba(139, 222, 255, .18); border-radius: 21px; }
.question-decoration { position: absolute; border: 1px solid rgba(112, 202, 248, .12); border-radius: 50%; }
.decoration-one { width: 120px; height: 120px; left: -60px; top: -48px; }
.decoration-two { width: 72px; height: 72px; right: -31px; top: 15px; }
.question-chip { position: relative; z-index: 2; min-height: 31px; max-width: 100%; padding: 0 10px; display: flex; align-items: center; gap: 6px; color: #79ddff; font-size: .62rem; font-weight: 900; letter-spacing: .02em; border: 1px solid rgba(244, 197, 87, .72); border-radius: 999px; background: rgba(3, 36, 65, .88); box-shadow: inset 0 0 0 1px rgba(87, 197, 246, .15); }
.question-chip span { width: 18px; height: 18px; display: grid; place-items: center; }
.question-chip .icon { width: 14px; height: 14px; }
.question-chip b { padding-left: 7px; color: #fff3c8; font-size: .51rem; font-weight: 850; border-left: 1px solid rgba(244, 197, 87, .34); }
.question-panel h1 { position: relative; z-index: 2; max-width: 27ch; margin: 14px auto 0; font-size: clamp(1.25rem, 4.8vw, 2.05rem); line-height: 1.14; letter-spacing: -.025em; text-shadow: 0 3px 12px rgba(0, 0, 0, .24); }
.question-sun-divider { position: relative; z-index: 2; width: min(86%, 310px); margin-top: 11px; display: grid; grid-template-columns: 1fr 22px 1fr; align-items: center; gap: 7px; }
.question-sun-divider i { height: 1px; background: linear-gradient(90deg, transparent, rgba(244, 197, 87, .58)); }
.question-sun-divider i:last-child { background: linear-gradient(90deg, rgba(244, 197, 87, .58), transparent); }
.question-sun-divider .mini-sun { width: 22px; height: 22px; }

.answer-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.answer-option { width: 100%; min-height: 58px; padding: 5px 9px 5px 5px; display: grid; grid-template-columns: 46px minmax(0, 1fr) 22px; align-items: center; gap: 10px; color: var(--text); text-align: left; border: 1.5px solid #62c7f1; border-radius: 18px; background: linear-gradient(100deg, #1e8fca 0 15%, #07345a 15% 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 7px 16px rgba(0, 0, 0, .14); cursor: pointer; transition: transform .11s ease, opacity .18s ease, border-color .18s ease, background .18s ease; }
.answer-option:active:not(:disabled) { transform: scale(.985); }
.answer-letter { width: 40px; height: 40px; display: grid; place-items: center; color: white; font-size: 1.05rem; font-weight: 950; border-radius: 12px 5px 5px 12px; background: linear-gradient(145deg, #69d4fb, #2b9bd2); text-shadow: 0 1px 2px rgba(0, 0, 0, .24); }
.answer-text { min-width: 0; font-size: .84rem; line-height: 1.22; font-weight: 800; }
.answer-state { display: grid; place-items: center; }
.answer-state .icon { width: 19px; height: 19px; }
.answer-option.correct { border-color: #8af0bc; background: linear-gradient(100deg, #17855e 0 15%, #0a523c 15% 100%); }
.answer-option.correct .answer-letter { background: linear-gradient(145deg, #78efb2, #22a36e); }
.answer-option.correct .answer-state { color: var(--green); }
.answer-option.wrong { border-color: #ff8490; background: linear-gradient(100deg, #a43d4f 0 15%, #5b2231 15% 100%); }
.answer-option.wrong .answer-letter { background: linear-gradient(145deg, #ff8a99, #cc4257); }
.answer-option.wrong .answer-state { color: #ffb0b8; }
.answer-option.faded { opacity: .46; }

/* Respuesta y resultado */
.feedback-overlay { position: fixed; z-index: 50; inset: 0; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); display: grid; place-items: center; overflow-y: auto; background: rgba(0, 10, 22, .8); backdrop-filter: blur(11px); animation: fadeIn .18s ease both; }
.burst { position: absolute; width: 470px; height: 470px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(99, 211, 255, .12) 0 8deg, transparent 8deg 17deg); -webkit-mask-image: radial-gradient(circle, transparent 0 23%, #000 24% 60%, transparent 75%); mask-image: radial-gradient(circle, transparent 0 23%, #000 24% 60%, transparent 75%); animation: spin 18s linear infinite; }
.feedback-bad .burst { background: repeating-conic-gradient(from 0deg, rgba(255, 101, 117, .11) 0 8deg, transparent 8deg 17deg); }
.feedback-card { position: relative; width: min(100%, 430px); padding: 19px 17px 18px; text-align: center; border: 1px solid rgba(244, 197, 87, .48); border-radius: 27px; background: linear-gradient(155deg, rgba(8, 55, 94, .98), rgba(3, 27, 51, .99)); box-shadow: 0 30px 90px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .08); animation: popIn .3s cubic-bezier(.2, .9, .2, 1.2) both; }
.feedback-mascots { height: 76px; display: flex; align-items: center; justify-content: center; gap: 17px; }
.feedback-mascots > b { color: var(--gold); font-size: .68rem; }
.feedback-player { display: flex; flex-direction: column; align-items: center; opacity: .62; transform: scale(.88); transition: .2s; }
.feedback-player.winner { opacity: 1; transform: scale(1.08); }
.feedback-player .mascot { width: 65px; height: 65px; filter: drop-shadow(0 8px 11px rgba(0, 0, 0, .25)); }
.feedback-player span { margin-top: -7px; padding: 3px 7px; font-size: .52rem; font-weight: 900; border-radius: 999px; background: rgba(3, 6, 15, .68); }
.feedback-symbol { width: 43px; height: 43px; margin: 4px auto 6px; display: grid; place-items: center; color: #06130d; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 7px rgba(81, 220, 157, .09); }
.feedback-bad .feedback-symbol { color: #26060c; background: var(--red); box-shadow: 0 0 0 7px rgba(255, 101, 117, .09); }
.feedback-symbol .icon { width: 25px; height: 25px; stroke-width: 2.5; }
.feedback-card h2 { margin: 0 0 4px; font-size: 1.52rem; }
.feedback-answer { display: block; color: #7fe2ff; font-size: .75rem; }
.feedback-bad .feedback-answer { color: #ffbdc7; }
.feedback-card p { max-width: 38ch; margin: 9px auto 0; color: var(--muted); font-size: .69rem; line-height: 1.42; }
.feedback-score { margin-top: 13px; padding: 9px 10px; display: grid; grid-template-columns: 1fr 25px 1fr; align-items: center; gap: 4px; border-radius: 14px; background: rgba(255, 255, 255, .045); }
.feedback-score span { color: var(--muted); font-size: .66rem; }
.feedback-score span:first-child { text-align: right; }
.feedback-score span:last-child { text-align: left; }
.feedback-score b { margin: 0 4px; color: white; font-size: 1rem; }
.feedback-score i { height: 1px; background: rgba(255, 255, 255, .12); }

.result-wrap { position: relative; flex: 1; width: 100%; padding-top: 10px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.result-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.result-confetti i { --x: calc((var(--i) * 37) % 100); position: absolute; left: calc(var(--x) * 1%); top: calc(((var(--i) * 53) % 90) * 1%); width: 7px; height: 13px; opacity: .55; border-radius: 2px; background: hsl(calc(var(--i) * 37deg) 88% 67%); transform: rotate(calc(var(--i) * 29deg)); animation: confettiFloat calc(3s + (var(--i) * .09s)) ease-in-out infinite alternate; }
.result-lose .result-confetti { opacity: .2; }
.result-hero { position: relative; z-index: 2; padding: 17px 15px 16px; text-align: center; border: 1px solid rgba(244, 197, 87, .42); border-radius: 27px; background: radial-gradient(circle at 50% -10%, rgba(99, 211, 255, .18), transparent 42%), linear-gradient(155deg, rgba(8, 55, 94, .96), rgba(3, 27, 51, .98)); box-shadow: var(--shadow); }
.result-duel { height: 103px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.result-duel > div { display: flex; flex-direction: column; align-items: center; }
.result-duel .mascot { width: 90px; height: 90px; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .28)); }
.result-duel > div > span { margin-top: -9px; padding: 4px 9px; font-size: .55rem; font-weight: 900; border: 1px solid rgba(255, 255, 255, .11); border-radius: 999px; background: rgba(5, 8, 18, .72); }
.result-duel > strong { font-size: 2rem; letter-spacing: -.04em; }
.result-duel > strong small { margin: 0 7px; color: var(--muted); }
.result-badge { margin-top: 7px; display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: .55rem; font-weight: 950; letter-spacing: .12em; }
.result-badge .icon { width: 15px; height: 15px; }
.result-hero h1 { margin: 8px 0 5px; font-size: clamp(1.8rem, 8.4vw, 3.2rem); }
.result-hero p { margin: 0 auto; font-size: .75rem; }
.result-stats { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.result-stats article { min-height: 64px; padding: 9px 11px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 17px; background: rgba(7, 50, 86, .78); }
.result-stats article > span { width: 31px; height: 31px; display: grid; place-items: center; color: var(--gold); border-radius: 10px; background: rgba(244, 197, 87, .1); }
.result-stats article > span .icon { width: 17px; height: 17px; }
.result-stats strong { display: block; font-size: .9rem; }
.result-stats small { display: block; margin-top: 2px; color: var(--muted); font-size: .56rem; }
.result-actions { position: relative; z-index: 2; display: grid; gap: 8px; }
.ghost-button { min-height: 49px; border: 1px solid var(--line); border-radius: 16px; background: rgba(7, 50, 86, .72); }
.text-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); background: transparent; }
.text-button .icon { width: 16px; height: 16px; }
.result-note { position: relative; z-index: 2; margin: -2px 0 0; color: var(--muted); font-size: .59rem; text-align: center; }

/* Carga y error */
.loading-screen,
.error-card { min-height: calc(100svh - 40px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.loading-screen .logo-mark { width: 78px; height: 78px; animation: float 2s ease-in-out infinite; }
.loading-screen h1 { margin: 12px 0 15px; font-size: 1.4rem; }
.loading-dots { display: flex; gap: 6px; }
.loading-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--sky); animation: loading .8s ease-in-out infinite alternate; }
.loading-dots i:nth-child(2) { animation-delay: .15s; }
.loading-dots i:nth-child(3) { animation-delay: .3s; }
.error-card { gap: 12px; }
.error-card .logo-mark { width: 70px; height: 70px; }
.error-card h1 { margin: 0; }
.error-card p { color: var(--muted); }
.error-card .cta-button { max-width: 320px; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.86) translateY(15px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes confettiFloat { from { translate: 0 -5px; rotate: -10deg; } to { translate: 8px 12px; rotate: 18deg; } }
@keyframes loading { from { transform: translateY(0); opacity: .35; } to { transform: translateY(-6px); opacity: 1; } }

@media (min-width: 560px) {
  .screen { padding-left: 20px; padding-right: 20px; box-shadow: 0 0 70px rgba(0, 0, 0, .18); }
  .hero-card { min-height: 408px; padding: 28px 28px 112px; }
  .public-version-pill { top: 28px; right: 28px; }
  .hero-copy { width: 52%; padding-top: 8px; }
  .hero-copy h1 { font-size: 3.15rem; }
  .hero-arena { position: absolute; right: 1%; bottom: 86px; width: 50%; height: 235px; }
  .hero-badges { position: absolute; z-index: 3; left: 28px; bottom: 82px; }
  .home-landmark-strip { height: 142px; }
  .home-play-options { grid-template-columns: minmax(0, 1.35fr) minmax(180px, .65fr); }
  .guest-entry-card { grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr); align-items: center; }
  .category-list { grid-template-columns: 1fr 1fr; }
  .category-card { min-height: 78px; }
  .game-screen { padding-left: 20px; padding-right: 20px; }
  .game-brand-header { width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; }
  .duel-hud { margin-left: 14px; margin-right: 14px; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); }
  .hud-player { height: 76px; padding: 7px 11px; }
  .hud-avatar { width: 54px; height: 54px; flex-basis: 54px; }
  .hud-name strong { font-size: .9rem; }
  .hud-score { font-size: 1.7rem; }
  .countdown { width: 88px; height: 88px; }
  .countdown strong { font-size: 1.85rem; }
  .round-progress { margin-left: 20px; margin-right: 20px; }
  .round-progress > div:first-child span { font-size: .88rem; }
  .answer-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .answer-option { min-height: 72px; grid-template-columns: 52px minmax(0, 1fr) 24px; }
  .answer-letter { width: 46px; height: 48px; font-size: 1.2rem; }
  .answer-text { font-size: .92rem; }
  .result-wrap { max-width: 620px; margin: 0 auto; }
}

@media (max-width: 480px) {
  .screen { padding-left: 10px; padding-right: 10px; }
  .brand strong { font-size: .92rem; }
  .brand span { font-size: .62rem; }
  .version-pill { font-size: .59rem; }
  .public-version-pill { top: 16px; right: 14px; padding: 5px 8px; }
  .hero-card { min-height: 404px; padding: 16px 14px 100px; border-radius: 28px; }
  .hero-copy h1 { font-size: clamp(1.75rem, 9vw, 2.7rem); }
  .hero-copy p { font-size: .82rem; }
  .hero-arena { height: 130px; }
  .fighter .mascot { width: 80px; height: 80px; }
  .home-landmark-strip { height: 112px; border-radius: 0 0 27px 27px; }
  .game-screen { padding-left: 10px; padding-right: 10px; }
  .game-brand-header { width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; }
  .question-zone { padding-left: 4px; padding-right: 4px; }
}

@media (max-width: 360px) {
  .screen { padding-left: 8px; padding-right: 8px; }
  .top-actions { gap: 5px; }
  .version-pill { padding-left: 7px; padding-right: 7px; }
  .public-version-pill { right: 12px; font-size: .55rem; }
  .hero-card { min-height: 386px; padding-left: 12px; padding-right: 12px; padding-bottom: 94px; }
  .hero-arena { height: 118px; gap: 10px; }
  .fighter .mascot { width: 70px; height: 70px; }
  .home-landmark-strip { height: 104px; }
  .setup-intro { grid-template-columns: 76px 1fr; padding-left: 10px; padding-right: 10px; }
  .duel-hud { grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr); margin-left: 3px; margin-right: 3px; gap: 4px; }
  .hud-player { height: 60px; padding: 5px; gap: 4px; border-radius: 19px; }
  .hud-avatar { width: 40px; height: 40px; flex-basis: 40px; }
  .hud-name span { display: none; }
  .hud-name strong { font-size: .7rem; }
  .hud-score { min-width: 18px; font-size: 1.2rem; }
  .countdown { width: 64px; height: 64px; }
  .countdown strong { font-size: 1.32rem; }
  .round-progress { margin-left: 6px; margin-right: 6px; }
  .round-progress > div:first-child span { font-size: .65rem; }
  .round-progress > div:first-child small { font-size: .48rem; }
  .round-dots { gap: 3px; }
  .round-dots i { width: 6px; height: 6px; }
  .round-dots i.active { width: 15px; }
  .question-panel { padding-left: 10px; padding-right: 10px; }
  .question-panel h1 { font-size: 1.16rem; }
  .answer-option { grid-template-columns: 42px minmax(0, 1fr) 20px; gap: 8px; }
  .answer-letter { width: 37px; height: 38px; }
  .answer-text { font-size: .78rem; }
}

@media (max-height: 780px) {
  .home-content { gap: 8px; padding-top: 5px; }
  .hero-card { min-height: 304px; padding-top: 13px; padding-bottom: 82px; }
  .hero-copy h1 { margin: 6px 0; font-size: clamp(1.42rem, 7.5vw, 2.2rem); }
  .hero-copy p { font-size: .73rem; }
  .hero-arena { height: 105px; }
  .fighter .mascot { width: 62px; height: 62px; }
  .versus { width: 48px; height: 48px; }
  .hero-badges span { min-height: 26px; font-size: .57rem; }
  .home-landmark-strip { height: 88px; }
  .free-note { font-size: .6rem; }
  .game-brand-header { height: 70px; }
  .duel-hud { grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr); margin-bottom: 4px; }
  .hud-player { height: 58px; padding: 5px 7px; border-radius: 20px; }
  .hud-avatar { width: 40px; height: 40px; flex-basis: 40px; }
  .hud-name strong { font-size: .72rem; }
  .hud-name span { font-size: .49rem; }
  .hud-score { font-size: 1.2rem; }
  .countdown { width: 66px; height: 66px; }
  .countdown strong { font-size: 1.35rem; }
  .round-progress { min-height: 32px; margin-bottom: 5px; }
  .question-panel { min-height: 154px; padding: 12px 10px 10px; border-radius: 22px; }
  .question-panel::after { inset: 7px; border-radius: 16px; }
  .question-chip { min-height: 27px; font-size: .57rem; }
  .question-panel h1 { max-width: 24ch; margin-top: 9px; font-size: clamp(1rem, 4.2vw, 1.42rem); }
  .question-sun-divider { margin-top: 6px; }
  .question-sun-divider .mini-sun { width: 17px; height: 17px; }
  .answer-grid { gap: 6px; }
  .answer-option { min-height: 50px; grid-template-columns: 40px minmax(0, 1fr) 19px; padding: 4px 7px 4px 4px; border-radius: 15px; }
  .answer-letter { width: 35px; height: 35px; font-size: .94rem; border-radius: 10px 4px 4px 10px; }
  .answer-text { font-size: .76rem; }
  .feedback-card { padding-top: 14px; padding-bottom: 14px; }
  .feedback-mascots { height: 65px; }
  .feedback-player .mascot { width: 55px; height: 55px; }
  .feedback-card p { font-size: .63rem; }
}

@media (min-width: 560px) and (max-height: 780px) {
  .hero-card { min-height: 300px; }
  .hero-arena { bottom: 66px; height: 165px; }
  .hero-badges { bottom: 66px; }
  .game-brand-header { height: 74px; }
  .duel-hud { grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); }
  .countdown { width: 74px; height: 74px; }
  .answer-option { min-height: 58px; }
}

@media (max-height: 620px) {
  .hero-card { min-height: 274px; }
  .hero-arena { height: 88px; }
  .home-landmark-strip { height: 76px; }
  .guest-entry-card { padding-top: 12px; padding-bottom: 12px; }
}

@media (min-height: 900px) {
  .home-content { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

/* v0.9 · Reporte de preguntas */
.feedback-report {
  border: 1px solid rgba(139,216,255,.24);
  border-radius: 999px;
  padding: 7px 12px;
  color: #ccecff;
  background: rgba(6,45,78,.7);
  cursor: pointer;
  font: inherit;
  font-size: .65rem;
  font-weight: 800;
}
.feedback-report:disabled { opacity: .65; cursor: default; }

/* ===== v0.9.1 · acceso administrativo desde el inicio ===== */
.admin-access-button {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px 1fr 24px;
  align-items: center;
  gap: 11px;
  padding: 8px 14px;
  border: 1px solid rgba(125, 205, 246, .24);
  border-radius: 18px;
  color: #e9f7ff;
  text-align: left;
  background: linear-gradient(145deg, rgba(9, 54, 92, .88), rgba(4, 31, 57, .92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.18);
  cursor: pointer;
}
.admin-access-button > span:first-child {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #f4c557;
  background: rgba(244,197,87,.1);
  border: 1px solid rgba(244,197,87,.24);
}
.admin-access-button > span:nth-child(2) { min-width: 0; }
.admin-access-button strong {
  display: block;
  font-size: .82rem;
}
.admin-access-button small {
  display: block;
  margin-top: 3px;
  color: #abc9dc;
  font-size: .61rem;
}
.admin-access-button > .icon:last-child {
  color: #77d7ff;
  justify-self: end;
}
.admin-access-button:active { transform: scale(.988); }

@media (max-height: 780px) {
  .admin-access-button {
    min-height: 50px;
    grid-template-columns: 36px 1fr 20px;
    padding: 6px 10px;
  }
  .admin-access-button > span:first-child {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }
  .admin-access-button strong { font-size: .74rem; }
  .admin-access-button small { font-size: .55rem; }
}

/* ===== v1.0 · cuentas, perfiles, historial y ranking ===== */
.player-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.45rem;
  line-height: 1;
  border: 2px solid rgba(126,213,252,.72);
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.26), transparent 30%),
    linear-gradient(145deg, #17669d, #062b53);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px rgba(0,0,0,.22);
}
.avatar-sol { border-color: rgba(245,200,88,.88); background: linear-gradient(145deg, #88651e, #17375b); }
.avatar-mate { border-color: rgba(99,218,172,.82); background: linear-gradient(145deg, #156b5a, #092c43); }
.avatar-pelota { border-color: rgba(255,255,255,.8); background: linear-gradient(145deg, #2e77a7, #0a2b4d); }
.avatar-libro { border-color: rgba(203,153,255,.82); background: linear-gradient(145deg, #63509c, #152b51); }
.avatar-cohete { border-color: rgba(255,130,142,.86); background: linear-gradient(145deg, #91465d, #173454); }
.avatar-copa { border-color: rgba(245,200,88,.9); background: linear-gradient(145deg, #88651e, #17375b); }
.tiny-avatar { width: 31px; height: 31px; font-size: 1rem; border-width: 1px; box-shadow: none; }
.access-avatar { width: 38px; height: 38px; font-size: 1.25rem; }
.large-avatar { width: 70px; height: 70px; font-size: 2.25rem; }
.profile-avatar { width: 88px; height: 88px; font-size: 2.8rem; }
.ranking-avatar { width: 46px; height: 46px; font-size: 1.4rem; }
.account-top-button { padding: 0; overflow: hidden; }
.account-top-button .player-avatar { margin: 0; }

.player-access-button {
  width: 100%;
  min-height: 68px;
  border: 1px solid rgba(112,207,250,.32);
  border-radius: 20px;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: 43px minmax(0,1fr) 22px;
  align-items: center;
  gap: 11px;
  color: #f7fcff;
  text-align: left;
  background:
    radial-gradient(circle at 12% 50%, rgba(91,211,255,.16), transparent 28%),
    linear-gradient(145deg, rgba(11,75,119,.93), rgba(4,35,67,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 22px rgba(0,0,0,.16);
  cursor: pointer;
}
.player-access-button > span:first-child { width: 43px; height: 43px; border-radius: 14px; display: grid; place-items: center; color: #82e2ff; background: rgba(3,25,47,.66); }
.player-access-button > span:nth-child(2) { min-width: 0; }
.player-access-button strong { display: block; font-size: .82rem; }
.player-access-button small { display: block; color: #accde0; font-size: .6rem; line-height: 1.25; margin-top: 4px; }
.player-access-button > .icon:last-child { width: 20px; height: 20px; color: #f4c557; }
.player-access-button:active { transform: scale(.988); }

.account-screen { overflow-y: auto !important; padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important; }
.account-screen .logo-mark { width: 40px; height: 40px; }
.account-screen-content { width: 100%; display: flex; flex-direction: column; gap: 14px; padding: 12px 0 0; }
.account-card,
.profile-panel,
.profile-hero {
  border: 1px solid rgba(117,205,246,.25);
  background:
    radial-gradient(circle at 100% 0%, rgba(244,197,87,.08), transparent 31%),
    linear-gradient(155deg, rgba(10,69,111,.95), rgba(4,31,59,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 20px 45px rgba(0,0,0,.24);
}
.account-card { border-radius: 28px; padding: 20px 18px; }
.auth-card { max-width: 560px; width: 100%; margin: 0 auto; }
.account-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.account-heading > div { min-width: 0; }
.account-heading h1 { margin: 5px 0 6px; font-size: clamp(1.55rem, 7vw, 2.35rem); line-height: 1; letter-spacing: -.04em; }
.account-heading p { margin: 0; color: #b8d4e6; font-size: .78rem; line-height: 1.4; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; border-radius: 16px; background: rgba(2,20,39,.6); margin-bottom: 16px; }
.auth-tabs button { min-height: 44px; border: 0; border-radius: 12px; color: #a9c8dd; background: transparent; font-weight: 850; cursor: pointer; }
.auth-tabs button.active { color: #092747; background: linear-gradient(135deg, #82ddff, #f3c557); box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.account-form { display: grid; gap: 13px; }
.account-form label { display: grid; gap: 6px; color: #dcecf6; font-size: .7rem; font-weight: 800; }
.account-form input,
.account-form select {
  width: 100%;
  min-height: 49px;
  border: 1px solid rgba(125,204,244,.25);
  border-radius: 14px;
  padding: 0 13px;
  color: #fff;
  background: rgba(2,23,44,.74);
  outline: none;
}
.account-form input:focus,
.account-form select:focus { border-color: rgba(244,197,87,.82); box-shadow: 0 0 0 3px rgba(244,197,87,.1); }
.account-form fieldset { margin: 0; border: 0; padding: 0; }
.account-form legend { color: #dcecf6; font-size: .7rem; font-weight: 800; margin-bottom: 9px; }
.account-submit { margin-top: 2px; }
.account-submit:disabled { opacity: .55; cursor: wait; }
.account-help { margin: 15px 0 0; color: #93b8ce; font-size: .65rem; line-height: 1.45; text-align: center; }
.account-error,
.account-success,
.account-loading,
.account-empty { border-radius: 14px; padding: 12px 13px; font-size: .72rem; line-height: 1.4; }
.account-error { color: #ffd7dc; border: 1px solid rgba(255,103,122,.35); background: rgba(114,28,49,.4); }
.account-success { color: #d8ffec; border: 1px solid rgba(83,226,157,.35); background: rgba(17,101,70,.35); }
.account-loading,
.account-empty { color: #b9d6e8; border: 1px solid rgba(126,213,252,.18); background: rgba(4,35,65,.55); text-align: center; }
.avatar-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.avatar-choice { min-width: 0; min-height: 86px; display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 6px !important; border: 1px solid rgba(126,213,252,.16); border-radius: 15px; background: rgba(3,29,54,.55); cursor: pointer; }
.avatar-choice input { position: absolute; opacity: 0; pointer-events: none; }
.avatar-choice .player-avatar { width: 46px; height: 46px; }
.avatar-choice small { color: #a9c8dc; font-size: .52rem; text-align: center; }
.avatar-choice.selected { border-color: rgba(244,197,87,.8); background: linear-gradient(145deg, rgba(25,92,137,.7), rgba(5,38,69,.8)); box-shadow: inset 0 0 0 1px rgba(244,197,87,.16); }

.profile-hero { border-radius: 26px; padding: 18px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 15px; }
.profile-hero h1 { margin: 4px 0 5px; font-size: clamp(1.45rem, 6vw, 2.2rem); }
.profile-hero p { margin: 0; color: #a9c8dc; font-size: .66rem; line-height: 1.35; }
.profile-level { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #092747; background: linear-gradient(180deg, #ffe594, #f2c050); font-size: .56rem; font-weight: 950; }
.secondary-profile-btn,
.small-profile-btn { border: 1px solid rgba(126,213,252,.25); color: #eaf8ff; background: rgba(3,30,56,.58); font-weight: 800; cursor: pointer; }
.secondary-profile-btn { min-height: 40px; padding: 0 11px; border-radius: 12px; display: inline-flex; align-items: center; gap: 6px; }
.secondary-profile-btn .icon,
.small-profile-btn .icon { width: 16px; height: 16px; }
.small-profile-btn { min-height: 38px; padding: 0 10px; border-radius: 11px; display: inline-flex; align-items: center; gap: 6px; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.profile-stats article { min-height: 86px; border: 1px solid rgba(126,213,252,.18); border-radius: 18px; padding: 11px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(4,39,72,.72); }
.profile-stats small { color: #9bbfd5; font-size: .54rem; }
.profile-stats strong { margin-top: 5px; color: #fff5d2; font-size: 1.08rem; }
.profile-panel { border-radius: 23px; padding: 16px; }
.profile-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 13px; }
.profile-panel-head h1,
.profile-panel-head h2 { margin: 0; font-size: 1rem; }
.profile-panel-head p { margin: 4px 0 0; color: #9dbed2; font-size: .62rem; }
.profile-panel-head > .icon { width: 30px; height: 30px; color: #f3c557; }
.profile-category-list { display: grid; gap: 9px; }
.profile-category-list article { position: relative; overflow: hidden; min-height: 58px; border: 1px solid rgba(126,213,252,.15); border-radius: 14px; padding: 10px 12px; background: rgba(3,29,54,.58); }
.profile-category-list article > div { position: relative; z-index: 2; }
.profile-category-list strong { display: block; font-size: .72rem; }
.profile-category-list small { display: block; margin-top: 4px; color: #9dbfd4; font-size: .55rem; }
.profile-category-list article > span { position: absolute; z-index: 1; left: 0; bottom: 0; width: var(--progress); height: 3px; background: linear-gradient(90deg, #52c9f2, #f3c557); }
.history-list { display: grid; gap: 8px; }
.history-row { min-height: 62px; display: grid; grid-template-columns: 62px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid rgba(126,213,252,.14); border-radius: 14px; padding: 9px 11px; background: rgba(3,29,54,.55); }
.history-result { min-height: 28px; display: grid; place-items: center; border-radius: 9px; color: #dceffc; background: rgba(80,127,160,.25); font-size: .56rem; font-weight: 900; }
.history-row.result-win .history-result { color: #d7ffec; background: rgba(46,185,121,.23); }
.history-row.result-loss .history-result { color: #ffd9df; background: rgba(218,74,98,.22); }
.history-row strong { display: block; font-size: .68rem; }
.history-row small { display: block; color: #94b8cf; font-size: .52rem; line-height: 1.3; margin-top: 3px; }
.history-row > b { color: #fff4c7; font-size: .92rem; }
.profile-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 3px 0 8px; }
.danger-text { color: #ff9cac !important; display: inline-flex; align-items: center; gap: 7px; }
.password-details { margin-top: 16px; border-top: 1px solid rgba(126,213,252,.17); padding-top: 13px; }
.password-details summary { cursor: pointer; color: #ffe292; font-size: .72rem; font-weight: 850; }
.compact-form { margin-top: 13px; }
.ranking-list { display: grid; gap: 8px; }
.ranking-row { min-height: 66px; display: grid; grid-template-columns: 38px 48px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid rgba(126,213,252,.15); border-radius: 15px; padding: 8px 10px; background: rgba(3,29,54,.57); }
.ranking-row.current { border-color: rgba(244,197,87,.72); box-shadow: inset 0 0 0 1px rgba(244,197,87,.12); }
.ranking-row > b { color: #8adfff; font-size: .8rem; text-align: center; }
.ranking-row strong { display: block; font-size: .7rem; }
.ranking-row div small { display: block; color: #96bbd0; font-size: .52rem; margin-top: 3px; }
.ranking-row > span { color: #fff3c5; font-size: .9rem; font-weight: 950; text-align: right; }
.ranking-row > span small { display: block; color: #9dbed2; font-size: .46rem; font-weight: 700; margin-top: 2px; }

@media (max-width: 480px) {
  .top-actions { gap: 5px; }
  .version-pill { padding-left: 7px; padding-right: 7px; }
  .player-access-button { min-height: 64px; }
  .account-card { border-radius: 24px; padding: 17px 14px; }
  .account-heading { gap: 12px; }
  .large-avatar { width: 60px; height: 60px; font-size: 1.95rem; }
  .avatar-picker { gap: 6px; }
  .avatar-choice { min-height: 78px; }
  .profile-hero { grid-template-columns: auto minmax(0,1fr); padding: 15px; }
  .profile-hero .secondary-profile-btn { grid-column: 1 / -1; justify-content: center; }
  .profile-avatar { width: 72px; height: 72px; font-size: 2.35rem; }
  .profile-stats article { min-height: 75px; }
  .history-row { grid-template-columns: 55px minmax(0,1fr) auto; padding: 8px; }
  .ranking-row { grid-template-columns: 32px 43px minmax(0,1fr) auto; padding: 7px; }
  .ranking-avatar { width: 40px; height: 40px; font-size: 1.2rem; }
}

@media (max-width: 350px) {
  .avatar-picker { grid-template-columns: repeat(2, 1fr); }
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .history-row { grid-template-columns: 50px minmax(0,1fr); }
  .history-row > b { grid-column: 2; }
}

/* ===== v1.0.1 · foto de perfil y más avatares argentinos ===== */
.avatar-bandera { border-color: rgba(126,213,252,.88); background: linear-gradient(145deg, #1d7db7, #072d55); }
.avatar-gaucho { border-color: rgba(244,197,87,.84); background: linear-gradient(145deg, #8a6431, #17375b); }
.avatar-escarapela { border-color: rgba(176,231,255,.86); background: linear-gradient(145deg, #2d7aac, #072d55); }
.avatar-obelisco { border-color: rgba(199,236,255,.82); background: linear-gradient(145deg, #6886a1, #183454); }
.avatar-camiseta { border-color: rgba(152,228,255,.88); background: linear-gradient(145deg, #2d83ba, #10355a); }
.avatar-empanada { border-color: rgba(255,206,120,.9); background: linear-gradient(145deg, #8f6330, #17375b); }
.avatar-alfajor { border-color: rgba(219,180,139,.86); background: linear-gradient(145deg, #8a5f42, #1d3758); }
.avatar-tango { border-color: rgba(255,129,162,.86); background: linear-gradient(145deg, #9a4766, #183454); }
.avatar-carpincho { border-color: rgba(219,188,140,.9); background: linear-gradient(145deg, #8a6a3d, #183454); }
.avatar-dulce { border-color: rgba(248,188,123,.9); background: linear-gradient(145deg, #8f5b39, #183454); }
.player-avatar.has-image {
  overflow: hidden;
  padding: 0;
  font-size: 0;
  background: linear-gradient(145deg, #205783, #0b2748);
}
.player-avatar.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-picker {
  grid-template-columns: repeat(4, 1fr);
}
.custom-avatar-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(126,213,252,.16);
  border-radius: 18px;
  background: rgba(3,29,54,.55);
}
.custom-avatar-preview {
  display: flex;
  justify-content: center;
}
.empty-avatar {
  color: #8edcff;
  background: rgba(4,35,65,.65);
  border-style: dashed;
  font-weight: 900;
}
.custom-avatar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.upload-avatar-btn {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: .7rem;
  font-weight: 900;
  color: #092747;
  background: linear-gradient(135deg, #82ddff, #f3c557);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}
.upload-avatar-btn input { display: none; }
.custom-avatar-box small {
  text-align: center;
  color: #9fc5db;
  font-size: .58rem;
  line-height: 1.4;
}
@media (max-width: 560px) {
  .avatar-picker { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 430px) {
  .avatar-picker { grid-template-columns: repeat(2, 1fr); }
}

/* ===== v1.1 · multijugador 1 contra 1 ===== */
.online-entry-button {
  width: 100%;
  min-height: 78px;
  border: 1px solid rgba(244,197,87,.82);
  border-radius: 20px;
  padding: 13px 15px;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) 22px;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-align: left;
  background:
    radial-gradient(circle at 9% 35%, rgba(255,255,255,.22), transparent 26%),
    radial-gradient(circle at 88% 55%, rgba(244,197,87,.26), transparent 32%),
    linear-gradient(135deg, #177fb9 0%, #0b649e 58%, #164c75 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 16px 34px rgba(15,112,168,.34), 0 0 0 3px rgba(91,211,251,.07);
  cursor: pointer;
}
.online-entry-button > span:first-child { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: #ffe084; background: rgba(2,25,48,.62); }
.online-entry-button > span:first-child .icon { width: 24px; height: 24px; }
.online-entry-button strong { display: block; font-size: .96rem; }
.online-entry-button small { display: block; margin-top: 4px; color: #d4effb; font-size: .62rem; line-height: 1.25; }
.online-entry-button > .icon:last-child { width: 20px; height: 20px; color: #f4c557; }
.online-entry-button:active { transform: scale(.988); }

.home-byte-button {
  width: 100%;
  min-height: 70px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 39px minmax(0,1fr) 18px;
  align-items: center;
  gap: 10px;
  color: #e4f3fb;
  text-align: left;
  border: 1px solid rgba(126,213,252,.22);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(8,55,91,.76), rgba(3,29,55,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 22px rgba(0,0,0,.16);
  cursor: pointer;
}
.home-byte-button > span:first-child { width: 39px; height: 39px; display: grid; place-items: center; color: #8adfff; border-radius: 12px; background: rgba(2,25,48,.58); }
.home-byte-button > span:first-child .icon { width: 21px; height: 21px; }
.home-byte-button strong { display: block; font-size: .78rem; }
.home-byte-button small { display: block; margin-top: 4px; color: #96b9ce; font-size: .55rem; }
.home-byte-button > .icon:last-child { width: 18px; height: 18px; color: #87dafa; }
.home-byte-button:active { transform: scale(.985); }

.online-setup-screen { padding-bottom: calc(30px + env(safe-area-inset-bottom)) !important; }
.online-setup-intro { padding: 14px 2px 8px; }
.online-setup-intro h1 { margin: 6px 0 7px; font-size: clamp(1.75rem, 8vw, 2.65rem); letter-spacing: -.045em; }
.online-setup-intro p { margin: 0; color: #b4d1e3; font-size: .76rem; line-height: 1.45; }
.online-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.online-category-card {
  position: relative;
  min-height: 104px;
  border: 1px solid rgba(126,213,252,.18);
  border-radius: 18px;
  padding: 13px 11px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  color: #fff;
  text-align: left;
  background: linear-gradient(145deg, rgba(8,63,103,.88), rgba(3,30,58,.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  cursor: pointer;
}
.online-category-card > span { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 11px; color: #85ddff; background: rgba(2,24,46,.58); }
.online-category-card > span .icon { width: 19px; height: 19px; }
.online-category-card strong { font-size: .72rem; }
.online-category-card small { color: #9fc4d9; font-size: .53rem; line-height: 1.25; }
.online-category-card > i { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; display: none; place-items: center; border-radius: 50%; color: #092747; background: #f4c557; }
.online-category-card > i .icon { width: 14px; height: 14px; }
.online-category-card.selected { border-color: rgba(244,197,87,.84); background: linear-gradient(145deg, rgba(28,104,151,.96), rgba(5,39,72,.98)); box-shadow: inset 0 0 0 1px rgba(244,197,87,.14), 0 9px 20px rgba(0,0,0,.18); }
.online-category-card.selected > i { display: grid; }
.online-category-card.mixed { grid-column: 1 / -1; min-height: 88px; display: grid; grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; column-gap: 11px; }
.online-category-card.mixed > span { grid-row: 1 / 3; width: 42px; height: 42px; }
.online-category-card.mixed strong { align-self: end; }
.online-category-card.mixed small { align-self: start; }
.online-selection-summary { margin: 12px 0; padding: 12px 14px; border: 1px solid rgba(126,213,252,.2); border-radius: 16px; background: rgba(3,31,58,.62); }
.online-selection-summary small { display: block; color: #8eb9d1; font-size: .55rem; text-transform: uppercase; letter-spacing: .08em; }
.online-selection-summary strong { display: block; margin-top: 5px; color: #fff1ba; font-size: .72rem; line-height: 1.35; }
.online-mode-actions { display: grid; gap: 9px; }
.online-private-create { width: 100%; }
.online-code-entry { display: grid; grid-template-columns: minmax(0,1fr) 100px; gap: 8px; }
.online-code-entry input { min-width: 0; height: 48px; border: 1px solid rgba(126,213,252,.28); border-radius: 14px; padding: 0 13px; color: #fff; text-align: center; letter-spacing: .18em; text-transform: uppercase; background: rgba(2,24,46,.74); outline: none; }
.online-code-entry input:focus { border-color: rgba(244,197,87,.82); }
.online-code-entry button { border: 0; border-radius: 14px; color: #082849; font-weight: 900; background: linear-gradient(135deg, #82ddff, #f3c557); cursor: pointer; }

.online-waiting-screen, .online-match-screen { min-height: 100dvh; }
.online-waiting-card, .online-preparation-card, .online-feedback-card, .online-result-card {
  width: 100%;
  margin: auto 0;
  border: 1px solid rgba(126,213,252,.24);
  border-radius: 28px;
  padding: 24px 18px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(72,190,240,.14), transparent 37%),
    linear-gradient(155deg, rgba(10,69,111,.96), rgba(3,28,55,.99));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 24px 50px rgba(0,0,0,.28);
}
.online-waiting-card h1, .online-preparation-card h1, .online-feedback-card h1, .online-result-card h1 { margin: 12px 0 8px; font-size: clamp(1.7rem, 8vw, 2.5rem); letter-spacing: -.045em; }
.online-waiting-card p, .online-preparation-card p, .online-result-card p { max-width: 410px; margin: 0 auto; color: #b4d2e4; font-size: .72rem; line-height: 1.5; }
.online-radar { position: relative; width: 145px; height: 145px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(55,178,229,.22), rgba(55,178,229,.04) 45%, transparent 68%); }
.online-radar > i { position: absolute; inset: 0; border: 1px solid rgba(126,213,252,.22); border-radius: 50%; animation: radarPulse 2.4s infinite ease-out; }
.online-radar > i:nth-child(2) { animation-delay: .8s; }
.online-radar > i:nth-child(3) { animation-delay: 1.6s; }
@keyframes radarPulse { 0% { transform: scale(.35); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.private-room-code { margin: 12px auto; padding: 13px 16px; width: min(270px, 100%); border: 1px solid rgba(244,197,87,.65); border-radius: 16px; color: #ffe89b; font-size: 2rem; font-weight: 950; letter-spacing: .18em; background: rgba(2,24,46,.7); }
.waiting-dots { display: flex; justify-content: center; gap: 7px; margin: 20px 0; }
.waiting-dots i { width: 8px; height: 8px; border-radius: 50%; background: #7ed8ff; animation: waitingDot 1.1s infinite ease-in-out; }
.waiting-dots i:nth-child(2) { animation-delay: .18s; }
.waiting-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes waitingDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-6px); opacity: 1; } }

.online-duel-header { display: grid; grid-template-columns: minmax(0,1fr) 38px minmax(0,1fr); align-items: center; gap: 7px; margin: 10px 0 14px; padding: 10px; border: 1px solid rgba(126,213,252,.2); border-radius: 18px; background: rgba(2,26,49,.65); }
.online-duel-header > div { min-width: 0; display: flex; align-items: center; gap: 8px; }
.online-duel-header > div:last-child { flex-direction: row-reverse; text-align: right; }
.online-duel-header span { min-width: 0; }
.online-duel-header strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .67rem; }
.online-duel-header small { display: block; margin-top: 3px; color: #9fc4d9; font-size: .5rem; }
.online-duel-header > b { color: #f4c557; font-size: .65rem; }
.online-game-hud .hud-avatar { padding: 2px; }
.online-game-hud .hud-name span { color: #a9c9dc; }
.online-clock-ring { --progress:100%; width: 132px; height: 132px; margin: 18px auto; position: relative; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#f4c557 var(--progress), rgba(126,213,252,.12) 0); }
.online-clock-ring::before { content:""; position:absolute; inset:9px; border-radius:50%; background: linear-gradient(145deg,#0c5688,#062b52); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.online-clock-ring strong, .online-clock-ring small { position: relative; z-index: 1; }
.online-clock-ring strong { font-size: 3.25rem; line-height: 1; }
.online-clock-ring small { position: absolute; top: 88px; color: #a9cce0; font-size: .55rem; text-transform: uppercase; }
.online-brand-header { position: relative !important; }
.online-mini-clock { width: 48px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #f4c557; border-radius: 50%; color: #fff; background: rgba(3,31,58,.88); }
.online-mini-clock strong { font-size: 1.25rem; line-height: 1; }
.online-mini-clock small { color: #f4c557; font-size: .42rem; font-weight: 900; }
.online-question-card { margin-top: 2px; }
.online-answers-list { margin-top: 10px; }
.online-answers-list .answer-button.selected { border-color: #f4c557; background: linear-gradient(145deg, rgba(25,96,143,.98), rgba(4,37,70,.98)); }
.online-opponent-status { margin-top: 10px; padding: 10px 12px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(126,213,252,.18); border-radius: 14px; color: #a9cce0; font-size: .62rem; background: rgba(2,26,50,.62); }
.online-opponent-status .icon { width: 16px; height: 16px; }
.online-opponent-status.answered { color: #d8ffec; border-color: rgba(83,226,157,.35); background: rgba(17,101,70,.3); }
.online-feedback-card.correct { border-color: rgba(83,226,157,.45); }
.online-feedback-card.wrong { border-color: rgba(255,103,122,.42); }
.online-feedback-card .feedback-symbol { width: 58px; height: 58px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; background: rgba(4,35,65,.7); }
.online-feedback-card .feedback-symbol .icon { width: 31px; height: 31px; }
.online-feedback-card.correct .feedback-symbol { color: #63e3a2; }
.online-feedback-card.wrong .feedback-symbol { color: #ff788b; }
.online-feedback-card > p { margin: 0 0 7px; color: #a9c8dc; font-size: .66rem; }
.online-feedback-card > strong { display: block; color: #ffe28a; font-size: 1rem; line-height: 1.35; }
.online-feedback-card > small { display: block; margin-top: 10px; color: #b6d2e2; font-size: .62rem; line-height: 1.45; }
.online-round-comparison { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.online-round-comparison span { padding: 9px 7px; border-radius: 12px; color: #cbe4f1; font-size: .57rem; background: rgba(2,26,50,.65); }
.online-final-score { margin: 14px auto 18px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.online-final-score strong { font-size: 3rem; }
.online-final-score span { color: #f4c557; font-size: 1.5rem; }
.online-result-card.win { border-color: rgba(244,197,87,.55); }
.online-result-card.loss { border-color: rgba(126,213,252,.25); }
.online-profile-panel { padding-bottom: 14px; }
.online-profile-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.online-profile-stats article { min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 14px; background: rgba(2,28,53,.58); }
.online-profile-stats small { color: #9fc4d9; font-size: .5rem; }
.online-profile-stats strong { margin-top: 4px; font-size: 1.05rem; }

@media (max-width: 430px) {
  .online-category-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .online-category-card { min-height: 98px; padding: 11px 9px; }
  .online-category-card strong { font-size: .66rem; }
  .online-category-card small { font-size: .49rem; }
  .online-duel-header { grid-template-columns: minmax(0,1fr) 30px minmax(0,1fr); padding: 8px; }
  .online-duel-header .access-avatar { width: 34px; height: 34px; font-size: 1.1rem; }
  .online-profile-stats { grid-template-columns: repeat(2,1fr); }
}
.online-answers-list .answer-option.selected {
  border-color: #f4c557;
  box-shadow: inset 0 0 0 1px rgba(244,197,87,.2), 0 7px 16px rgba(0,0,0,.2);
}
.online-answers-list .answer-option.selected .answer-letter {
  background: linear-gradient(145deg, #ffe28a, #d9a733);
  color: #092747;
}
.online-round-progress .online-mini-clock { width: 38px; height: 38px; border-width: 1.5px; }
.online-round-progress .online-mini-clock strong { font-size: 1rem; }
.online-question-zone { padding-bottom: 0; }

/* ===== v1.1.2 · salas públicas visibles y feedback online reforzado ===== */
.public-rooms-section {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding: 14px;
  border: 1px solid rgba(126,213,252,.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(244,197,87,.08), transparent 30%),
    linear-gradient(155deg, rgba(9,63,102,.92), rgba(3,28,55,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 34px rgba(0,0,0,.18);
}
.public-rooms-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
}
.public-rooms-heading h2 {
  margin: 4px 0 4px;
  font-size: 1.25rem;
  letter-spacing: -.03em;
}
.public-rooms-heading p {
  margin: 0;
  color: #a9c9dc;
  font-size: .62rem;
  line-height: 1.4;
}
.public-rooms-heading > button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(126,213,252,.25);
  border-radius: 13px;
  color: #91e4ff;
  background: rgba(2,25,48,.62);
  cursor: pointer;
}
.public-rooms-heading > button .icon { width: 19px; height: 19px; }
.public-room-list { display: grid; gap: 9px; }
.public-rooms-empty {
  padding: 17px 13px;
  border: 1px dashed rgba(126,213,252,.22);
  border-radius: 16px;
  color: #a9c9dc;
  background: rgba(2,25,48,.42);
  font-size: .66rem;
  line-height: 1.45;
  text-align: center;
}
.public-rooms-empty.error { color: #ffd3d9; border-color: rgba(255,103,122,.34); }
.public-room-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas: "host join" "topics join";
  align-items: center;
  gap: 8px 12px;
  padding: 12px;
  border: 1px solid rgba(126,213,252,.2);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(8,62,101,.86), rgba(3,31,59,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.public-room-card.own-room { opacity: .72; }
.public-room-host {
  grid-area: host;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.public-room-host > span:last-child { min-width: 0; }
.public-room-host strong,
.public-room-host small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.public-room-host strong { color: #f7fcff; font-size: .73rem; }
.public-room-host small { margin-top: 3px; color: #9ec3d8; font-size: .54rem; }
.public-room-topics { grid-area: topics; min-width: 0; }
.public-room-topics small,
.public-room-topics strong { display: block; }
.public-room-topics small { color: #89b4cd; font-size: .49rem; text-transform: uppercase; letter-spacing: .07em; }
.public-room-topics strong { margin-top: 3px; color: #ffe08a; font-size: .62rem; line-height: 1.35; }
.public-room-join {
  grid-area: join;
  min-width: 78px;
  min-height: 43px;
  padding: 0 12px;
  border: 0;
  border-radius: 13px;
  color: #092747;
  background: linear-gradient(135deg, #85ddff, #f3c557);
  font-size: .68rem;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.public-room-join:disabled { color: #9fc2d5; background: rgba(2,25,48,.72); cursor: default; box-shadow: none; }
.online-waiting-card.public-waiting > p strong { color: #ffe08a; }

.online-feedback-card {
  padding-top: 22px;
}
.online-correct-answer {
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(83,226,157,.46);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(22,112,78,.55), rgba(5,49,48,.62));
  box-shadow: inset 0 0 0 1px rgba(83,226,157,.08);
}
.online-correct-answer small {
  display: block;
  color: #a9e9c9;
  font-size: .55rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.online-correct-answer strong {
  margin-top: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  color: #d9ffeb;
  font-size: .9rem;
  line-height: 1.35;
}
.online-correct-answer strong .icon { width: 19px; height: 19px; color: #63e3a2; flex: 0 0 auto; }
.online-feedback-explanation {
  margin: 10px 0 0 !important;
  color: #b8d5e5 !important;
  font-size: .62rem !important;
  line-height: 1.45;
}
.online-round-comparison {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.online-answer-outcome {
  min-height: 92px;
  padding: 11px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px solid transparent;
  border-radius: 16px;
  text-align: center;
}
.online-answer-outcome > span {
  width: 31px;
  height: 31px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(2,24,45,.45);
}
.online-answer-outcome > span .icon { width: 20px; height: 20px; }
.online-answer-outcome small {
  color: rgba(255,255,255,.8);
  font-size: .52rem;
  font-weight: 750;
}
.online-answer-outcome strong {
  font-size: .82rem;
  letter-spacing: -.01em;
}
.online-answer-outcome.correct {
  border-color: rgba(83,226,157,.72);
  color: #d8ffea;
  background: linear-gradient(145deg, rgba(24,131,86,.72), rgba(7,68,55,.82));
  box-shadow: 0 9px 20px rgba(14,105,71,.2), inset 0 0 0 1px rgba(255,255,255,.05);
}
.online-answer-outcome.correct > span { color: #75efb1; }
.online-answer-outcome.wrong {
  border-color: rgba(255,103,122,.74);
  color: #ffe1e5;
  background: linear-gradient(145deg, rgba(145,42,64,.75), rgba(73,22,43,.84));
  box-shadow: 0 9px 20px rgba(119,29,52,.2), inset 0 0 0 1px rgba(255,255,255,.05);
}
.online-answer-outcome.wrong > span { color: #ff8998; }

@media (max-width: 390px) {
  .public-room-card { grid-template-columns: minmax(0,1fr) 72px; padding: 10px; }
  .public-room-join { min-width: 72px; padding: 0 8px; }
  .online-answer-outcome { min-height: 86px; }
  .online-answer-outcome strong { font-size: .74rem; }
}

/* ===== v1.1.3 · lobby con salas primero y perfil online prioritario ===== */
.online-lobby-head {
  display: grid;
  gap: 13px;
  padding: 14px 2px 2px;
}
.online-lobby-head h1 {
  margin: 6px 0 6px;
  font-size: clamp(1.75rem, 8vw, 2.65rem);
  letter-spacing: -.045em;
}
.online-lobby-head p {
  margin: 0;
  color: #b4d1e3;
  font-size: .76rem;
  line-height: 1.45;
}
.create-room-main {
  width: 100%;
  min-height: 54px;
}
.create-room-main .icon {
  width: 19px;
  height: 19px;
}
.public-rooms-section.lobby-first {
  margin-top: 8px;
}
.room-creator-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  background: rgba(1, 13, 27, .82);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.room-creator-sheet {
  width: min(620px, 100%);
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(126,213,252,.3);
  border-radius: 27px 27px 20px 20px;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 100% 0%, rgba(244,197,87,.09), transparent 28%),
    linear-gradient(160deg, #0a4a76, #031d39 74%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.5);
}
.room-creator-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start;
  gap: 12px;
  margin-bottom: 14px;
}
.room-creator-head h2 {
  margin: 5px 0 5px;
  font-size: clamp(1.45rem, 7vw, 2rem);
  letter-spacing: -.04em;
}
.room-creator-head p {
  margin: 0;
  color: #b3d1e3;
  font-size: .68rem;
  line-height: 1.4;
}
.room-creator-head > button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(126,213,252,.24);
  border-radius: 13px;
  color: #eaf8ff;
  font-size: 1.55rem;
  line-height: 1;
  background: rgba(2,25,48,.62);
  cursor: pointer;
}
.private-code-divider {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8eb9d1;
  font-size: .56rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.private-code-divider::before,
.private-code-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: rgba(126,213,252,.16);
}
.profile-primary-label {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 0;
}
.profile-primary-label strong {
  color: #fff1ba;
  font-size: .78rem;
}
.online-primary-stats article {
  border-color: rgba(244,197,87,.25);
  background:
    radial-gradient(circle at 50% 0%, rgba(244,197,87,.1), transparent 45%),
    rgba(4,39,72,.82);
}
.online-primary-stats article:nth-child(2) strong,
.online-primary-stats article:nth-child(3) strong {
  color: #9df1c2;
}
.practice-profile-panel {
  opacity: .94;
}
.practice-profile-stats article {
  background: rgba(3,31,59,.55);
}
@media (min-width: 700px) {
  .room-creator-overlay { align-items: center; }
  .room-creator-sheet { border-radius: 27px; }
}


/* ===== v1.1.4 · perfil exclusivamente online y acceso privado desde el lobby ===== */
.online-entry-button > span:first-child {
  color: #91e9ff;
  background:
    radial-gradient(circle at 50% 30%, rgba(126, 225, 255, .18), transparent 48%),
    linear-gradient(145deg, rgba(14, 82, 128, .92), rgba(2, 25, 48, .92));
  border: 1px solid rgba(126, 225, 255, .28);
}
.online-entry-button > span:first-child .icon { width: 27px; height: 27px; stroke-width: 1.75; }
.private-room-join-card {
  display: grid; gap: 11px; margin-top: 9px; border: 1px solid rgba(126, 213, 252, .22);
  border-radius: 20px; padding: 13px;
  background: radial-gradient(circle at 0 0, rgba(126, 213, 252, .1), transparent 38%), linear-gradient(150deg, rgba(7, 57, 94, .92), rgba(3, 29, 55, .96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px rgba(0,0,0,.16);
}
.private-room-join-copy { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; }
.private-room-join-copy > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #f4cb63; background: rgba(2, 24, 46, .62); }
.private-room-join-copy .icon { width: 20px; height: 20px; }
.private-room-join-copy strong { display: block; font-size: .76rem; }
.private-room-join-copy small { display: block; margin-top: 3px; color: #a9c9dc; font-size: .58rem; line-height: 1.35; }
.lobby-code-entry { width: 100%; }
.online-profile-summary { border-color: rgba(126, 213, 252, .22); }
.online-profile-summary .profile-panel-head > .icon { width: 28px; height: 28px; color: #91e9ff; }
.online-profile-message { border: 1px solid rgba(126, 213, 252, .16); border-radius: 15px; padding: 13px; color: #b9d8e9; font-size: .72rem; line-height: 1.5; background: rgba(2, 28, 54, .5); }
.online-profile-message strong { color: #fff1ba; }
@media (min-width: 620px) { .private-room-join-card { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: center; } }
@media (max-width: 390px) { .lobby-code-entry { grid-template-columns: minmax(0,1fr) 88px; } }

/* ===== v1.1.6 · estabilidad online, reconexión, abandono, revancha e historial ===== */
.online-connection-panel {
  width: min(100%, 620px);
  margin: 8px auto 12px;
  min-height: 43px;
  padding: 7px 9px 7px 12px;
  border: 1px solid rgba(126,213,252,.2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(3,29,54,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.online-connection-state {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #dcecf6;
  font-size: .64rem;
  font-weight: 850;
}
.online-connection-state i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #55dfa0;
  box-shadow: 0 0 0 4px rgba(85,223,160,.12), 0 0 12px rgba(85,223,160,.4);
}
.online-connection-panel.reconnecting {
  border-color: rgba(244,197,87,.38);
  background: rgba(79,57,15,.54);
}
.online-connection-panel.reconnecting .online-connection-state i {
  background: #f4c557;
  box-shadow: 0 0 0 4px rgba(244,197,87,.12), 0 0 12px rgba(244,197,87,.42);
  animation: online-connection-pulse 1s infinite alternate;
}
.online-connection-panel.disconnected {
  border-color: rgba(255,103,122,.4);
  background: rgba(92,24,42,.54);
}
.online-connection-panel.disconnected .online-connection-state i {
  background: #ff677a;
  box-shadow: 0 0 0 4px rgba(255,103,122,.12);
}
.online-leave-button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255,129,143,.3);
  border-radius: 9px;
  color: #ffdbe0;
  background: rgba(114,28,49,.34);
  font-size: .56rem;
  font-weight: 900;
  cursor: pointer;
}
.online-leave-button:active { transform: scale(.97); }
.rematch-invitation {
  margin: 4px auto 2px;
  padding: 10px 12px;
  border: 1px solid rgba(244,197,87,.38);
  border-radius: 13px;
  color: #ffe7a5;
  background: rgba(97,70,18,.45);
  font-size: .68rem;
  font-weight: 850;
}
#online-rematch:disabled {
  opacity: .68;
  cursor: wait;
}
.online-history-list {
  display: grid;
  gap: 8px;
}
.online-history-row {
  min-height: 68px;
  padding: 9px 10px;
  border: 1px solid rgba(126,213,252,.16);
  border-radius: 15px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  background: rgba(3,29,54,.58);
}
.online-history-row > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.online-history-row .history-result {
  width: max-content;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: .46rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.online-history-row strong { font-size: .72rem; }
.online-history-row small {
  color: #9fc5db;
  font-size: .52rem;
  line-height: 1.35;
  white-space: normal;
}
.online-history-row > b {
  font-size: 1rem;
  color: #f6d372;
}
.online-history-row.result-win .history-result { color: #d8ffec; background: rgba(36,139,92,.5); }
.online-history-row.result-loss .history-result { color: #ffd7dc; background: rgba(143,45,64,.5); }
.online-history-row.result-draw .history-result { color: #fff0bc; background: rgba(130,94,29,.5); }
@keyframes online-connection-pulse {
  from { transform: scale(.8); opacity: .6; }
  to { transform: scale(1.1); opacity: 1; }
}
@media (max-width: 430px) {
  .online-connection-panel { margin-top: 5px; }
  .online-connection-state { font-size: .57rem; }
  .online-leave-button { padding-inline: 8px; }
  .online-history-row { grid-template-columns: 40px minmax(0,1fr) auto; }
  .online-history-row .ranking-avatar { width: 40px; height: 40px; }
}

/* ===== v1.2 · créditos, pagos y partidas competitivas ===== */
.wallet-home-button,
.profile-wallet-card {
  width: 100%; min-height: 66px; border: 1px solid rgba(245,198,75,.42); border-radius: 19px;
  padding: 11px 13px; display: grid; grid-template-columns: 43px minmax(0,1fr) 22px; align-items: center; gap: 11px;
  color: #fff; text-align: left; cursor: pointer;
  background: radial-gradient(circle at 10% 50%, rgba(245,198,75,.18), transparent 31%), linear-gradient(145deg, rgba(15,76,112,.96), rgba(4,31,60,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 28px rgba(0,0,0,.18);
}
.wallet-home-button > span:first-child,
.profile-wallet-card > span:first-child { width:43px; height:43px; border-radius:14px; display:grid; place-items:center; color:#f5c64b; background:rgba(2,24,45,.7); }
.wallet-home-button .icon,
.profile-wallet-card .icon { width:22px; height:22px; }
.wallet-home-button small,
.profile-wallet-card small { display:block; color:#a9c8dc; font-size:.58rem; }
.wallet-home-button strong,
.profile-wallet-card strong { display:block; margin-top:3px; font-size:.85rem; }
.wallet-home-button > .icon:last-child,
.profile-wallet-card > .icon:last-child { color:#f5c64b; }

.wallet-balance-card {
  border:1px solid rgba(245,198,75,.42); border-radius:27px; padding:20px; display:flex; align-items:center; gap:16px;
  background:radial-gradient(circle at 15% 20%,rgba(245,198,75,.18),transparent 34%),linear-gradient(145deg,#0d527e,#062c53);
  box-shadow:0 18px 42px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.12);
}
.wallet-balance-card > span { width:64px; height:64px; border-radius:20px; display:grid; place-items:center; color:#f7cf62; background:rgba(2,25,47,.58); }
.wallet-balance-card .icon { width:34px; height:34px; }
.wallet-balance-card small { color:#b8d4e6; font-size:.62rem; }
.wallet-balance-card strong { display:block; margin:3px 0; font-size:clamp(1.65rem,7vw,2.35rem); color:#fff; }
.wallet-balance-card p { margin:0; color:#e8cf86; font-size:.65rem; }
.wallet-panel { display:grid; gap:14px; }
.wallet-package-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.wallet-package-card { min-width:0; border:1px solid rgba(126,213,252,.19); border-radius:18px; padding:14px 11px; display:grid; gap:9px; text-align:center; background:rgba(3,30,56,.62); }
.wallet-package-card > strong { font-size:.82rem; }
.wallet-package-card > small { color:#f4c557; font-weight:900; }
.wallet-payment-link,
.wallet-package-card button,
.upload-avatar-btn { min-height:40px; border-radius:11px; border:0; display:flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; font-size:.62rem; font-weight:900; }
.wallet-payment-link { width:100%; color:#092747; background:linear-gradient(135deg,#84e1ff,#f4c557); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.wallet-package-card button { color:#eaf8ff; background:rgba(19,83,126,.8); border:1px solid rgba(126,213,252,.22); }
.wallet-link-pending { min-height:40px; border-radius:11px; display:grid; place-items:center; color:#8aaec3; background:rgba(2,20,38,.5); font-size:.56rem; }
.bank-details-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.bank-details-grid > div { border:1px solid rgba(126,213,252,.16); border-radius:14px; padding:11px; background:rgba(3,29,54,.5); overflow:hidden; }
.bank-details-grid small { display:block; color:#91b8d0; font-size:.54rem; }
.bank-details-grid strong { display:block; margin-top:4px; font-size:.7rem; word-break:break-word; }
.wallet-transfer-report { margin-top:2px; }
.wallet-request-list,.wallet-movement-list { display:grid; gap:8px; }
.wallet-request-row,.wallet-movement-row { border:1px solid rgba(126,213,252,.16); border-radius:14px; padding:11px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:rgba(3,29,54,.52); }
.wallet-request-row strong,.wallet-movement-row strong { display:block; font-size:.72rem; }
.wallet-request-row small,.wallet-movement-row small { display:block; margin-top:4px; color:#98bdd3; font-size:.54rem; line-height:1.35; }
.wallet-request-row em { display:block; margin-top:5px; color:#80dfff; font-size:.52rem; font-style:normal; line-height:1.35; }
.wallet-request-row > span { flex:0 0 auto; padding:5px 8px; border-radius:999px; font-size:.54rem; font-weight:900; }
.wallet-request-row.status-pending > span { color:#f7d476; background:rgba(117,83,17,.45); }
.wallet-request-row.status-approved > span { color:#bcffdd; background:rgba(18,101,68,.42); }
.wallet-request-row.status-rejected > span { color:#ffd3da; background:rgba(120,31,48,.42); }
.wallet-movement-row > span { font-size:.78rem; font-weight:950; }
.wallet-movement-row.positive > span { color:#79efb2; }
.wallet-movement-row.negative > span { color:#ff9dad; }
.wallet-modal-backdrop { position:fixed; inset:0; z-index:5000; padding:18px; display:grid; place-items:center; background:rgba(0,11,23,.78); backdrop-filter:blur(8px); }
.wallet-report-modal { width:min(100%,520px); max-height:calc(100dvh - 30px); overflow:auto; border:1px solid rgba(126,213,252,.28); border-radius:25px; padding:19px; background:linear-gradient(155deg,#0b4b78,#041f3c); box-shadow:0 28px 70px rgba(0,0,0,.48); }
.wallet-report-head { display:flex; align-items:start; justify-content:space-between; gap:15px; margin-bottom:17px; }
.wallet-report-head h2 { margin:5px 0 0; font-size:1.35rem; }
.wallet-report-head p { margin:7px 0 0; color:#b7d1e0; font-size:.62rem; line-height:1.45; }
.wallet-report-head button { width:38px; height:38px; border:0; border-radius:12px; color:#fff; background:rgba(2,22,42,.6); font-size:1.4rem; cursor:pointer; }
.account-form label > small { color:#9fc2d7; font-size:.55rem; font-weight:600; }
.receipt-upload-field { border:1px dashed rgba(126,213,252,.38); border-radius:15px; padding:12px; background:rgba(2,24,45,.42); }
.receipt-upload-field > strong { color:#f4c557; font-size:.55rem; text-transform:uppercase; letter-spacing:.04em; }
.receipt-upload-field input[type="file"] { padding:9px; cursor:pointer; }
.receipt-upload-field > span { color:#9dbfd3; font-size:.52rem; font-weight:600; }

.economy-mode-selector { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }
.economy-mode-card { min-width:0; min-height:78px; border:1px solid rgba(126,213,252,.17); border-radius:16px; padding:11px; display:grid; grid-template-columns:36px minmax(0,1fr) 20px; align-items:center; gap:9px; text-align:left; color:#fff; background:rgba(3,29,54,.58); cursor:pointer; }
.economy-mode-card > span { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; color:#82ddff; background:rgba(2,22,42,.62); }
.economy-mode-card > span .icon { width:21px; height:21px; }
.economy-mode-card strong { display:block; font-size:.68rem; }
.economy-mode-card small { display:block; margin-top:3px; color:#99bed4; font-size:.5rem; line-height:1.3; }
.economy-mode-card > i { opacity:0; color:#f5c64b; }
.economy-mode-card.selected { border-color:rgba(245,198,75,.75); background:linear-gradient(145deg,rgba(26,94,137,.8),rgba(5,37,69,.9)); box-shadow:inset 0 0 0 1px rgba(245,198,75,.13); }
.economy-mode-card.selected > i { opacity:1; }
.competitive-stake-panel { margin-top:10px; border:1px solid rgba(245,198,75,.28); border-radius:18px; padding:13px; display:grid; gap:11px; background:rgba(81,57,13,.2); }
.competitive-stake-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.competitive-stake-head small,.stake-label { color:#b4d0e1; font-size:.55rem; }
.competitive-stake-head strong { display:block; margin-top:3px; font-size:.75rem; }
.competitive-stake-head button { border:0; color:#092747; background:#f5c64b; padding:8px 10px; border-radius:10px; font-size:.55rem; font-weight:900; cursor:pointer; }
.stake-input-label { display:grid; gap:4px; }
.stake-input-label > span { color:#fff; font-size:.7rem; font-weight:900; }
.stake-input-label > small { color:#b4d0e1; font-size:.55rem; line-height:1.4; }
.stake-input-wrap { min-height:58px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid rgba(245,198,75,.6); border-radius:15px; padding:7px 12px; background:rgba(2,24,45,.72); box-shadow:inset 0 0 0 1px rgba(245,198,75,.08); }
.stake-input-wrap input { min-width:0; width:100%; border:0; padding:4px 0; color:#fff; background:transparent; font-size:1.35rem; font-weight:950; outline:0; }
.stake-input-wrap:focus-within { border-color:#ffe18a; box-shadow:0 0 0 3px rgba(245,198,75,.13); }
.stake-input-wrap > span { color:#f6d576; font-size:.62rem; font-weight:900; }
.stake-input-help { color:#98bed4; font-size:.51rem; line-height:1.45; }
.competitive-prize-preview,.waiting-economy,.online-match-economy-bar,.online-credit-result,.public-room-economy { border-radius:14px; display:flex; align-items:center; gap:10px; }
.competitive-prize-preview { padding:10px 11px; color:#fff; background:rgba(2,24,45,.63); }
.competitive-prize-preview > span,.waiting-economy > span,.online-credit-result > span,.public-room-economy > span { width:34px; height:34px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center; }
.competitive-prize-preview > span { color:#f5c64b; background:rgba(102,73,15,.45); }
.competitive-prize-preview small,.waiting-economy small,.online-credit-result small,.public-room-economy small { display:block; color:#a8c7d9; font-size:.5rem; }
.competitive-prize-preview strong,.waiting-economy strong,.online-credit-result strong,.public-room-economy strong { display:block; margin-top:3px; font-size:.68rem; }
.public-room-economy { padding:9px; border:1px solid rgba(126,213,252,.14); background:rgba(2,25,47,.5); }
.public-room-economy.competitive { border-color:rgba(245,198,75,.32); }
.public-room-economy.competitive > span { color:#f5c64b; background:rgba(103,74,16,.4); }
.public-room-economy.free > span { color:#84e1ff; background:rgba(14,77,116,.48); }
.public-room-economy em { display:block; margin-top:3px; color:#f5d578; font-size:.68rem; line-height:1.2; font-style:normal; font-weight:800; }
.public-room-card.competitive-room { border-color:rgba(245,198,75,.31); }
.waiting-economy { margin:14px auto 2px; max-width:360px; padding:10px 12px; text-align:left; border:1px solid rgba(126,213,252,.16); background:rgba(2,24,45,.56); }
.waiting-economy.competitive { border-color:rgba(245,198,75,.35); }
.waiting-economy.competitive > span { color:#f5c64b; background:rgba(99,71,15,.43); }
.waiting-economy.free > span { color:#84e1ff; background:rgba(13,76,116,.44); }
.online-match-economy-bar { margin:8px 0 11px; padding:8px 11px; justify-content:center; border:1px solid rgba(126,213,252,.14); color:#dff5ff; background:rgba(2,25,47,.62); font-size:.6rem; }
.online-match-economy-bar.competitive { border-color:rgba(245,198,75,.35); color:#f7d977; }
.online-match-economy-bar .icon { width:18px; height:18px; }
.online-credit-result { margin:13px auto; width:min(100%,360px); padding:11px 13px; text-align:left; border:1px solid rgba(126,213,252,.18); background:rgba(3,29,54,.56); }
.online-credit-result.won { border-color:rgba(78,225,151,.4); }
.online-credit-result.won > span { color:#75efaf; background:rgba(18,100,68,.45); }
.online-credit-result.refunded > span,.online-credit-result.free > span { color:#86deff; background:rgba(14,77,116,.45); }
.online-credit-result.lost > span { color:#ff9bab; background:rgba(116,28,48,.42); }
.profile-wallet-card { margin-top:0; }
.free-online-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.free-online-stats span { min-width:0; border:1px solid rgba(126,213,252,.14); border-radius:13px; padding:10px 7px; text-align:center; background:rgba(3,29,54,.48); }
.free-online-stats small { display:block; color:#94b9d0; font-size:.5rem; }
.free-online-stats strong { display:block; margin-top:4px; font-size:.78rem; }
.online-history-row.competitive { border-color:rgba(245,198,75,.23); }

@media (max-width:600px) {
  .wallet-package-grid { grid-template-columns:1fr; }
  .economy-mode-selector { grid-template-columns:1fr; }
  .bank-details-grid { grid-template-columns:1fr; }
  .free-online-stats { grid-template-columns:repeat(2,1fr); }
}

/* ===== v1.3.2 · premio visible y pausa segura por desconexión ===== */
.public-room-economy.competitive > div > strong,
.public-room-economy.competitive > div > em {
  font-size: .82rem !important;
  line-height: 1.22;
  font-weight: 900;
}
.public-room-economy.competitive > div > em {
  margin-top: 5px;
  color: #f5d578;
}
.online-pause-card {
  border-color: rgba(245,198,75,.38);
  background:
    radial-gradient(circle at 50% 20%, rgba(245,198,75,.11), transparent 35%),
    linear-gradient(155deg, rgba(10,69,111,.96), rgba(4,31,59,.99));
}
.online-pause-card.is-paused .online-clock-ring {
  --ring-color: #f5c64b;
}
.online-pause-card.is-resuming {
  border-color: rgba(80,225,157,.42);
  background:
    radial-gradient(circle at 50% 20%, rgba(80,225,157,.12), transparent 35%),
    linear-gradient(155deg, rgba(10,79,105,.96), rgba(4,31,59,.99));
}
.online-pause-card.is-resuming .online-clock-ring {
  --ring-color: #69e9a7;
}
.online-paused-screen .online-preparation-card p {
  max-width: 520px;
}

/* ===== v1.4 · ranking competitivo y temporadas ===== */
.competitive-home-card{width:100%;border:1px solid rgba(244,197,87,.38);border-radius:20px;padding:13px 14px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;color:#fff;text-align:left;background:linear-gradient(145deg,rgba(12,81,125,.96),rgba(4,34,65,.98));box-shadow:inset 0 1px rgba(255,255,255,.1),0 14px 28px rgba(0,0,0,.2);cursor:pointer}.competitive-home-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:1.45rem;background:linear-gradient(145deg,#f4c557,#c88b22);box-shadow:inset 0 1px rgba(255,255,255,.35)}.competitive-home-card strong{display:block;font-size:.84rem}.competitive-home-card small{display:block;color:#b9d7e9;font-size:.6rem;line-height:1.35;margin-top:4px}.competitive-home-card>span:last-child{font-weight:950;color:#f7d575;font-size:.74rem}.hero-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.hero-badges span,.public-room-ranking{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 8px;font-size:.54rem;font-weight:900}.hero-badges span{color:#062a4c;background:linear-gradient(135deg,#8fe4ff,#f3c557)}.public-room-ranking{margin-top:7px}.public-room-ranking.eligible{color:#ffe89c;border:1px solid rgba(244,197,87,.38);background:rgba(92,65,10,.28)}.public-room-ranking.not-eligible{color:#b3d0e2;border:1px solid rgba(126,213,252,.2);background:rgba(3,30,56,.5)}
.ranking-result-card{margin:12px auto 0;max-width:420px;border-radius:18px;padding:14px 16px;display:grid;gap:4px;text-align:center;border:1px solid rgba(126,213,252,.24);background:rgba(3,30,56,.68)}.ranking-result-card strong{font-size:1.15rem}.ranking-result-card span{font-size:.7rem}.ranking-result-card small{font-size:.58rem;opacity:.78}.ranking-result-card.positive{border-color:rgba(72,222,148,.45);background:rgba(20,112,75,.32)}.ranking-result-card.positive strong{color:#85ffc1}.ranking-result-card.negative{border-color:rgba(255,105,127,.42);background:rgba(123,32,53,.33)}.ranking-result-card.negative strong{color:#ffadba}.ranking-result-card.neutral strong{color:#b8d6e8}
.competitive-profile-card{border:1px solid rgba(244,197,87,.34);border-radius:25px;padding:18px;background:radial-gradient(circle at 100% 0%,rgba(244,197,87,.14),transparent 38%),linear-gradient(155deg,rgba(12,76,119,.97),rgba(4,31,59,.98));box-shadow:0 20px 42px rgba(0,0,0,.24)}.competitive-profile-card.inactive{border-color:rgba(126,213,252,.22)}.competitive-rank-emblem{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;font-size:2rem;border:3px solid #f4c557;background:linear-gradient(145deg,#9d6f18,#163d66);box-shadow:0 10px 25px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.35)}.competitive-profile-main{display:flex;align-items:center;gap:15px}.competitive-profile-main>div{min-width:0}.competitive-profile-main h1{margin:4px 0;font-size:clamp(1.4rem,6vw,2.2rem)}.competitive-profile-main p{margin:0;color:#b6d3e5;font-size:.67rem;line-height:1.4}.competitive-profile-main .rating-value{display:block;color:#ffe087;font-size:1.15rem;font-weight:950;margin-top:6px}.competitive-primary-stats{margin-top:12px}.competitive-primary-stats article{border-color:rgba(244,197,87,.18)}.rank-progress{margin-top:14px}.rank-progress-head{display:flex;justify-content:space-between;gap:10px;color:#c8ddea;font-size:.6rem}.rank-progress-track{height:9px;margin-top:7px;border-radius:99px;overflow:hidden;background:rgba(1,20,39,.65)}.rank-progress-track i{display:block;height:100%;width:var(--progress,0%);border-radius:inherit;background:linear-gradient(90deg,#74d9ff,#f3c557)}
.badge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.badge-card{border:1px solid rgba(244,197,87,.22);border-radius:16px;padding:12px;display:grid;grid-template-columns:38px 1fr;align-items:center;gap:9px;background:rgba(4,37,69,.68)}.badge-card>span{font-size:1.45rem}.badge-card strong{display:block;font-size:.68rem}.badge-card small{display:block;color:#9ebfd4;font-size:.54rem;line-height:1.35;margin-top:3px}.season-history-list{display:grid;gap:8px}.season-history-list article{border:1px solid rgba(126,213,252,.16);border-radius:15px;padding:11px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;background:rgba(3,29,54,.55)}.season-history-list strong{font-size:.68rem}.season-history-list span{color:#f7d575;font-size:.66rem;font-weight:900}.season-history-list small{grid-column:1/-1;color:#9cbdd2;font-size:.54rem}
.ranking-season-hero{border:1px solid rgba(244,197,87,.34);border-radius:23px;padding:17px;text-align:center;background:radial-gradient(circle at 50% 0%,rgba(244,197,87,.16),transparent 42%),linear-gradient(155deg,rgba(12,76,119,.95),rgba(4,31,59,.98))}.ranking-season-hero h1{margin:5px 0;font-size:clamp(1.6rem,7vw,2.4rem)}.ranking-season-hero p{margin:0;color:#b7d4e6;font-size:.66rem}.ranking-tabs{display:flex;gap:6px;overflow-x:auto;padding:4px 0 7px;scrollbar-width:none}.ranking-tabs::-webkit-scrollbar{display:none}.ranking-tabs button{white-space:nowrap;border:1px solid rgba(126,213,252,.2);border-radius:12px;min-height:40px;padding:0 12px;color:#b4d2e3;background:rgba(3,29,54,.62);font-weight:850;font-size:.62rem}.ranking-tabs button.active{color:#092747;border-color:transparent;background:linear-gradient(135deg,#82ddff,#f3c557)}.ranking-category-select{width:100%;min-height:44px;margin-bottom:10px;border:1px solid rgba(126,213,252,.22);border-radius:13px;padding:0 12px;color:#fff;background:#062b50}.competitive-ranking-list{display:grid;gap:7px}.competitive-ranking-list .ranking-row{grid-template-columns:38px 46px minmax(0,1fr) auto}.competitive-ranking-list .ranking-row>span:last-child{font-size:.78rem;color:#f7d575}.my-ranking-summary{margin-top:10px;border:1px solid rgba(244,197,87,.26);border-radius:15px;padding:11px;text-align:center;color:#d9ebf5;background:rgba(86,60,10,.2);font-size:.65rem}.history-ranking{display:inline-flex;align-items:center;border-radius:999px;padding:4px 7px;font-size:.52rem;font-weight:900;margin-top:5px}.history-ranking.positive{color:#8fffc5;background:rgba(20,112,75,.35)}.history-ranking.negative{color:#ffb4c0;background:rgba(123,32,53,.35)}.history-ranking.neutral{color:#b4d0e2;background:rgba(4,35,65,.62)}
@media(max-width:520px){.competitive-profile-main{align-items:flex-start}.competitive-rank-emblem{width:64px;height:64px}.badge-grid{grid-template-columns:1fr}.competitive-home-card{grid-template-columns:43px minmax(0,1fr) auto;padding:11px}.competitive-home-icon{width:43px;height:43px}.competitive-ranking-list .ranking-row{grid-template-columns:30px 40px minmax(0,1fr) auto}}
.ranking-archive-button{margin-top:12px;min-height:38px;border:1px solid rgba(244,197,87,.34);border-radius:11px;padding:0 12px;color:#ffe38a;background:rgba(82,57,8,.28);font-size:.62rem;font-weight:900;cursor:pointer}.my-ranking-summary{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;text-align:left}.my-ranking-summary>span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#f5d475;background:rgba(244,197,87,.12)}.my-ranking-summary small,.my-ranking-summary strong,.my-ranking-summary p{display:block;margin:0}.my-ranking-summary small{color:#9dbed2;font-size:.52rem}.my-ranking-summary strong{font-size:.7rem;margin:3px 0}.my-ranking-summary p{color:#f5d475;font-size:.65rem}.season-archive-list{display:grid;gap:12px}.season-archive-list>article{border:1px solid rgba(126,213,252,.18);border-radius:18px;padding:13px;background:rgba(3,29,54,.58)}.season-archive-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.season-archive-head strong,.season-archive-head small{display:block}.season-archive-head small{color:#9ebfd4;font-size:.55rem;margin-top:3px}.season-archive-head>span{font-size:.54rem;color:#f5d475}.season-archive-leaders{display:grid;gap:6px}.season-archive-leaders>div{display:grid;grid-template-columns:30px 40px minmax(0,1fr);align-items:center;gap:8px;border-radius:12px;padding:7px 8px;background:rgba(4,39,72,.68)}.season-archive-leaders b{color:#f5d475}.season-archive-leaders strong,.season-archive-leaders small{display:block}.season-archive-leaders small{color:#9ebfd4;font-size:.52rem;margin-top:2px}

/* ===== v1.5 · privacidad de perfiles y armonización competitiva ===== */
.competitive-profile-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}
.competitive-profile-card.inactive { grid-template-columns: 44px minmax(0, 1fr) auto; }
.competitive-profile-card.inactive > span:first-child {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #f4d36d;
  background: rgba(244, 197, 87, .12);
}
.competitive-profile-main { display: block; min-width: 0; }
.competitive-profile-main > small { color: #9fc4d9; font-size: .58rem; font-weight: 850; letter-spacing: .04em; }
.competitive-profile-main h2 { margin: 4px 0 5px; font-size: clamp(1rem, 4.5vw, 1.45rem); line-height: 1.15; }
.competitive-profile-main p { margin: 0; }
.competitive-profile-main em { display: block; margin-top: 7px; color: #a9cadc; font-size: .56rem; font-style: normal; line-height: 1.4; }
.competitive-profile-card > button {
  min-height: 42px;
  border: 1px solid rgba(244, 197, 87, .34);
  border-radius: 12px;
  padding: 0 13px;
  color: #ffe38a;
  background: rgba(82, 57, 8, .28);
  font-size: .62rem;
  font-weight: 900;
  cursor: pointer;
}
.rank-progress {
  display: block;
  height: 8px;
  margin-top: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(1, 20, 39, .72);
}
.rank-progress > i {
  display: block;
  width: var(--rank-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #74d9ff, #f3c557);
}
.badge-grid > article {
  min-width: 0;
  border: 1px solid rgba(244, 197, 87, .22);
  border-radius: 16px;
  padding: 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  background: rgba(4, 37, 69, .68);
}
.badge-grid > article > span { font-size: 1.45rem; }
.badge-grid > article strong,
.badge-grid > article small { display: block; }
.badge-grid > article strong { font-size: .68rem; }
.badge-grid > article small { margin-top: 3px; color: #9ebfd4; font-size: .54rem; line-height: 1.35; }
.season-history-list article { grid-template-columns: 48px minmax(0, 1fr); align-items: center; }
.season-history-list article > span { grid-row: 1; text-align: center; }
.season-history-list article > div { min-width: 0; }
.season-history-list article small { grid-column: auto; }
.ranking-row {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ranking-row:hover,
.ranking-row:focus-visible,
.season-archive-leaders > button:hover,
.season-archive-leaders > button:focus-visible {
  border-color: rgba(244, 197, 87, .62);
  background: rgba(10, 62, 101, .84);
  outline: none;
}
.season-archive-leaders > button {
  width: 100%;
  border: 1px solid transparent;
  display: grid;
  grid-template-columns: 30px 40px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  padding: 7px 8px;
  color: inherit;
  background: rgba(4, 39, 72, .68);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.season-archive-leaders > button strong,
.season-archive-leaders > button small { display: block; }
.season-archive-leaders > button small { margin-top: 2px; color: #9ebfd4; font-size: .56rem; }
.public-profile-badge {
  justify-self: end;
  border: 1px solid rgba(126, 213, 252, .28);
  border-radius: 999px;
  padding: 7px 10px;
  color: #aee8ff;
  background: rgba(4, 42, 75, .68);
  font-size: .56rem;
  font-weight: 900;
}
.public-results-list { display: grid; gap: 8px; }
.competitive-primary-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.public-result-row {
  min-height: 64px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(126, 213, 252, .16);
  border-radius: 15px;
  padding: 10px 12px;
  background: rgba(3, 29, 54, .56);
}
.public-result-row.result-win { border-color: rgba(80, 225, 157, .28); }
.public-result-row.result-loss { border-color: rgba(255, 112, 132, .25); }
.public-result-row > div strong { display: block; color: #fff4ca; font-size: .88rem; }
.public-result-row > div small { display: block; margin-top: 4px; color: #9dbfd3; font-size: .56rem; line-height: 1.4; }

@media (max-width: 520px) {
  .competitive-profile-card,
  .competitive-profile-card.inactive { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .competitive-profile-card.inactive { grid-template-columns: 44px minmax(0, 1fr); }
  .competitive-profile-card > button { grid-column: 1 / -1; width: 100%; }
  .ranking-tabs { flex-wrap: wrap; overflow: visible; }
  .ranking-tabs button { flex: 1 1 100px; }
  .competitive-primary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-profile-hero { grid-template-columns: auto minmax(0, 1fr); }
  .public-profile-badge { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}

@media (max-width: 380px) {
  .competitive-ranking-list .ranking-row { grid-template-columns: 28px 38px minmax(0, 1fr); }
  .competitive-ranking-list .ranking-row > span:last-child { display: none; }
  .public-result-row { grid-template-columns: 72px minmax(0, 1fr); }
}

/* ===== v1.5.1 · billetera, retiros, salas compactas y mejor de 3 ===== */
.wallet-payment-link {
  color: #052a49;
  background: linear-gradient(135deg, #8ae8ff 0%, #51c9f4 48%, #28a9e0 100%);
  border: 1px solid rgba(161,238,255,.72);
  box-shadow: 0 8px 18px rgba(21,154,211,.22), inset 0 1px 0 rgba(255,255,255,.45);
}
.wallet-payment-link:hover { filter: brightness(1.04); }
.wallet-package-card button:not(.wallet-payment-link),
.receipt-upload-field {
  background: rgba(3,32,59,.78);
}
.wallet-balance-card {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr) auto;
}
.wallet-withdraw-button {
  min-height: 43px;
  padding: 0 14px;
  border: 1px solid rgba(245,198,75,.5);
  border-radius: 13px;
  color: #fff4c4;
  background: rgba(104,75,17,.42);
  font-size: .62rem;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.wallet-withdraw-button:hover { background: rgba(127,91,19,.58); }
.withdrawal-modal select {
  width: 100%;
  min-height: 49px;
  border: 1px solid rgba(125,204,244,.25);
  border-radius: 14px;
  padding: 0 13px;
  color: #fff;
  background: rgba(2,23,44,.74);
}
.withdrawal-row.status-paid > span { color:#bcffdd; background:rgba(18,101,68,.42); }
.withdrawal-row.status-pending > span { color:#f7d476; background:rgba(117,83,17,.45); }
.withdrawal-row.status-rejected > span { color:#ffd3da; background:rgba(120,31,48,.42); }

.season-lobby-note {
  margin: 3px 0 9px;
  padding: 8px 11px;
  border: 1px solid rgba(126,213,252,.14);
  border-radius: 12px;
  color: #9fc5da;
  background: rgba(2,24,45,.42);
  font-size: .54rem;
  line-height: 1.35;
  text-align: center;
}
.public-room-card {
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas:
    "host join"
    "economy join"
    "format join"
    "topics join";
  gap: 6px 11px;
  padding: 10px 11px;
}
.public-room-host { grid-area: host; }
.public-room-economy {
  grid-area: economy;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  padding: 6px 8px;
  gap: 7px;
  border-radius: 11px;
}
.public-room-economy > span { width: 28px; height: 28px; border-radius: 9px; }
.public-room-economy small { font-size: .46rem; }
.public-room-economy.competitive > div > strong,
.public-room-economy.competitive > div > em {
  font-size: .72rem !important;
  line-height: 1.15;
}
.public-room-economy.competitive > div > em { margin-top: 3px; }
.public-room-format {
  grid-area: format;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.public-room-format small {
  color: #86aec5;
  font-size: .45rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.public-room-format strong { color: #d9effb; font-size: .55rem; }
.public-room-topics { grid-area: topics; }
.public-room-join { grid-area: join; }
.public-room-ranking { margin-left: auto; flex: 0 0 auto; }

.series-format-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.series-format-card {
  min-width: 0;
  min-height: 78px;
  border: 1px solid rgba(126,213,252,.18);
  border-radius: 16px;
  padding: 11px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 18px;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-align: left;
  background: rgba(3,29,54,.58);
  cursor: pointer;
}
.series-format-card > span { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; color:#83dfff; background:rgba(2,22,42,.62); }
.series-format-card .icon { width:21px; height:21px; }
.series-format-card strong { display:block; font-size:.68rem; }
.series-format-card small { display:block; margin-top:3px; color:#99bed4; font-size:.49rem; line-height:1.3; }
.series-format-card > i { opacity:0; color:#f5c64b; }
.series-format-card.selected { border-color:rgba(245,198,75,.75); background:linear-gradient(145deg,rgba(26,94,137,.8),rgba(5,37,69,.9)); box-shadow:inset 0 0 0 1px rgba(245,198,75,.13); }
.series-format-card.selected > i { opacity:1; }
.waiting-format { margin: 8px 0 0; color:#d7edf8; font-size:.58rem; font-weight:850; }

@media (max-width: 600px) {
  .wallet-balance-card { grid-template-columns: 56px minmax(0,1fr); padding:16px; }
  .wallet-balance-card > span { width:56px; height:56px; }
  .wallet-withdraw-button { grid-column:1/-1; width:100%; }
  .series-format-selector { grid-template-columns:1fr; }
}
@media (max-width: 390px) {
  .public-room-card { grid-template-columns:minmax(0,1fr) 70px; padding:9px; }
  .public-room-economy.competitive > div > strong,
  .public-room-economy.competitive > div > em { font-size:.67rem !important; }
}
.wallet-package-card .wallet-payment-link {
  color: #052a49;
  background: linear-gradient(135deg, #9ceeff 0%, #61d5f7 48%, #30b5e8 100%);
  border: 1px solid rgba(184,243,255,.82);
  box-shadow: 0 8px 18px rgba(21,154,211,.24), inset 0 1px 0 rgba(255,255,255,.52);
}
.season-lobby-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
}
.season-lobby-note > .icon { width: 17px; height: 17px; flex: 0 0 auto; color: #83dcff; }
.season-lobby-note span { min-width: 0; }
.season-lobby-note strong { display: block; color: #d9edf8; font-size: .57rem; }
.season-lobby-note small { display: block; margin-top: 2px; color: #91b7cc; font-size: .49rem; line-height: 1.3; }

/* ===== v1.6 · torneos dentro de Jugar Online ===== */
.online-section-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  margin: 8px 0 14px;
  border: 1px solid rgba(126,213,252,.18);
  border-radius: 16px;
  background: rgba(2,21,41,.62);
}
.online-section-tabs button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  color: #a9c9dc;
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}
.online-section-tabs button.active {
  color: #082746;
  background: linear-gradient(135deg,#82ddff,#f3c557);
  box-shadow: 0 8px 18px rgba(0,0,0,.2);
}
.tournament-hero,
.tournament-detail-hero {
  border: 1px solid rgba(126,213,252,.25);
  border-radius: 24px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: radial-gradient(circle at 100% 0%,rgba(244,197,87,.13),transparent 35%),linear-gradient(145deg,rgba(11,75,119,.95),rgba(4,31,59,.98));
  box-shadow: 0 18px 40px rgba(0,0,0,.2);
}
.tournament-hero > span,
.tournament-detail-trophy {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #f8cf63;
  background: rgba(4,30,56,.72);
  border: 1px solid rgba(244,197,87,.32);
}
.tournament-hero .icon,
.tournament-detail-trophy .icon { width: 31px; height: 31px; }
.tournament-hero h1,
.tournament-detail-hero h1 { margin: 4px 0 5px; font-size: clamp(1.55rem,7vw,2.3rem); }
.tournament-hero p,
.tournament-detail-hero p { margin: 0; color: #b4d2e4; font-size: .7rem; line-height: 1.45; }
.tournament-group { margin-top: 16px; }
.tournament-group-head { display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 10px; }
.tournament-group-head h2 { margin:0;font-size:1rem; }
.tournament-group-head > span { min-width:29px;height:29px;border-radius:50%;display:grid;place-items:center;color:#072744;background:#f3c557;font-size:.65rem;font-weight:950; }
.tournament-grid { display:grid;gap:11px; }
.tournament-card {
  border: 1px solid rgba(126,213,252,.22);
  border-radius: 21px;
  padding: 15px;
  background: linear-gradient(150deg,rgba(9,65,105,.96),rgba(3,28,55,.98));
  box-shadow: 0 13px 30px rgba(0,0,0,.2);
}
.tournament-card.enrolled { border-color: rgba(244,197,87,.62); box-shadow: inset 0 0 0 1px rgba(244,197,87,.13),0 13px 30px rgba(0,0,0,.2); }
.tournament-card-top { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.tournament-card-top > small { color:#86abc2;font-size:.55rem; }
.tournament-status { display:inline-flex;padding:5px 9px;border-radius:999px;color:#d7f7ff;background:rgba(38,143,193,.24);border:1px solid rgba(126,213,252,.23);font-size:.55rem;font-weight:900; }
.status-active .tournament-status { color:#fff3c2;background:rgba(167,117,21,.3);border-color:rgba(244,197,87,.35); }
.status-completed .tournament-status { color:#d6ffea;background:rgba(31,139,91,.3);border-color:rgba(75,220,148,.34); }
.tournament-card h2 { margin:10px 0 4px;font-size:1.2rem; }
.tournament-card > p { margin:0;color:#a9c8dc;font-size:.65rem;line-height:1.4; }
.tournament-card-stats { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px; }
.tournament-card-stats span { padding:10px;border-radius:14px;background:rgba(2,25,48,.58);border:1px solid rgba(126,213,252,.12); }
.tournament-card-stats small { display:block;color:#8fb5cb;font-size:.52rem;margin-bottom:3px; }
.tournament-card-stats strong { display:block;font-size:.82rem; }
.tournament-prize-line { margin-top:9px;display:flex;align-items:flex-start;gap:7px;color:#f4cc62;font-size:.61rem;line-height:1.4; }
.tournament-prize-line .icon { width:16px;height:16px;flex:0 0 auto; }
.tournament-progress { height:6px;border-radius:999px;overflow:hidden;background:rgba(2,19,37,.75);margin:12px 0; }
.tournament-progress i { display:block;width:var(--tournament-progress);height:100%;border-radius:inherit;background:linear-gradient(90deg,#71d7ff,#f3c557); }
.tournament-open-button { width:100%;min-height:43px;border:0;border-radius:13px;color:#082746;background:linear-gradient(135deg,#82ddff,#f3c557);font-weight:950;cursor:pointer; }
.tournament-detail-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px; }
.tournament-detail-stats article { min-width:0;padding:11px 6px;text-align:center;border-radius:15px;border:1px solid rgba(126,213,252,.16);background:rgba(4,39,72,.72); }
.tournament-detail-stats small { display:block;color:#91b7cd;font-size:.5rem;margin-bottom:4px; }
.tournament-detail-stats strong { display:block;font-size:.67rem;overflow-wrap:anywhere; }
.tournament-detail-prizes { margin-top:10px;padding:13px;border-radius:16px;border:1px solid rgba(244,197,87,.25);background:rgba(95,69,16,.2); }
.tournament-detail-prizes > div { display:flex;align-items:center;gap:10px;color:#f5d16f; }
.tournament-detail-prizes .icon { width:23px;height:23px; }
.tournament-detail-prizes small { display:block;color:#d7bf83;font-size:.5rem; }
.tournament-detail-prizes strong { display:block;margin-top:3px;font-size:.64rem;line-height:1.35; }
.tournament-enrollment-card { margin-top:11px;padding:14px;border-radius:18px;display:grid;gap:12px;border:1px solid rgba(126,213,252,.22);background:rgba(4,42,77,.8); }
.tournament-enrollment-card.enrolled { border-color:rgba(244,197,87,.42);background:rgba(95,69,16,.2); }
.tournament-enrollment-card strong { display:block;font-size:.82rem; }
.tournament-enrollment-card small { display:block;margin-top:4px;color:#a8c9dc;font-size:.61rem;line-height:1.4; }
.tournament-participants,.tournament-bracket { margin-top:16px; }
.tournament-participant-list { display:grid;gap:7px; }
.tournament-participant-list article { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 11px;border-radius:15px;border:1px solid rgba(126,213,252,.13);background:rgba(3,29,55,.62); }
.tournament-participant-list article div { min-width:0; }
.tournament-participant-list strong { display:block;font-size:.7rem; }
.tournament-participant-list small { display:block;color:#8fb5cb;font-size:.52rem;margin-top:2px; }
.tournament-participant-list article > span:last-child { color:#f2cd69;font-size:.55rem;font-weight:900; }
.tournament-bracket-list { display:grid;gap:10px; }
.tournament-match-card { border-radius:18px;padding:11px;border:1px solid rgba(126,213,252,.18);background:rgba(3,29,55,.7); }
.tournament-match-card.status-active { border-color:rgba(244,197,87,.42); }
.tournament-match-label { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px; }
.tournament-match-label span { color:#f0cc68;font-size:.58rem;font-weight:950;text-transform:uppercase; }
.tournament-match-label small { color:#8fb5cb;font-size:.5rem; }
.tournament-player { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px;border-radius:13px;background:rgba(7,50,85,.65); }
.tournament-player.winner { background:rgba(25,116,79,.36);box-shadow:inset 0 0 0 1px rgba(79,226,152,.25); }
.tournament-player strong { display:block;font-size:.66rem; }
.tournament-player small { display:block;color:#8fb5cb;font-size:.49rem; }
.tournament-player > .icon { width:18px;height:18px;color:#79f0b3; }
.tournament-vs { text-align:center;color:#7198b0;font-size:.48rem;font-weight:950;padding:4px; }
.tournament-player-pending { color:#86aabc;font-size:.58rem;padding:7px; }
.tournament-next-edition { margin-top:16px;width:100%; }
.online-credit-result.tournament { border-color:rgba(244,197,87,.4);background:rgba(112,79,17,.28); }
.online-credit-result.tournament strong { color:#f5d16f; }
@media (min-width:700px){
  .tournament-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tournament-enrollment-card { grid-template-columns:minmax(0,1fr) auto;align-items:center; }
}

/* ===== v1.6.1 · inscripciones definitivas y actividad desplegable ===== */
.in-progress-disclosure {
  margin-top: 14px;
  border: 1px solid rgba(126,213,252,.2);
  border-radius: 18px;
  background: rgba(3,29,54,.62);
  overflow: hidden;
}
.in-progress-disclosure summary {
  min-height: 54px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  color: #eaf8ff;
  font-weight: 850;
}
.in-progress-disclosure summary::-webkit-details-marker { display: none; }
.in-progress-disclosure summary > span { display: inline-flex; align-items: center; gap: 9px; }
.in-progress-disclosure summary .icon { width: 20px; height: 20px; color: #72d8ff; }
.in-progress-disclosure summary > b {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #092747;
  background: linear-gradient(180deg,#ffe38b,#efbd45);
  font-size: .68rem;
}
.in-progress-disclosure[open] summary { border-bottom: 1px solid rgba(126,213,252,.15); }
.in-progress-list { display: grid; gap: 9px; padding: 12px; }
.in-progress-room-card {
  padding: 12px;
  border: 1px solid rgba(126,213,252,.16);
  border-radius: 15px;
  background: rgba(4,39,72,.72);
}
.in-progress-room-players { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 8px; }
.in-progress-room-players > span { min-width: 0; display: flex; align-items: center; gap: 7px; }
.in-progress-room-players > span:last-child { justify-content: flex-end; text-align: right; }
.in-progress-room-players strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
.in-progress-room-players > b { color: #f4c557; font-size: .58rem; }
.in-progress-room-meta { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(126,213,252,.12); display: grid; gap: 3px; }
.in-progress-room-meta > span { color: #7fe3ff; font-size: .66rem; font-weight: 900; }
.in-progress-room-meta small { color: #a8c9dc; font-size: .57rem; line-height: 1.35; }
.in-progress-room-meta em { color: #f4c557; font-size: .59rem; font-style: normal; font-weight: 850; }
.tournament-progress-disclosure { margin-top: 16px; }
.tournament-progress-disclosure .tournament-grid { padding: 12px; }
.tournament-enrollment-locked {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #f4c557;
  border: 1px solid rgba(244,197,87,.28);
  background: rgba(95,69,16,.2);
  font-size: .64rem;
  font-weight: 900;
}
.tournament-enrollment-locked .icon { width: 15px; height: 15px; }


/* ===== v1.7.2 · saldo superior y términos ===== */
.top-wallet-button {
  min-height: 40px;
  max-width: 142px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 224, 127, .56);
  border-radius: 13px;
  color: #fff8df;
  background: linear-gradient(180deg, rgba(77, 54, 10, .88), rgba(37, 29, 10, .88));
  box-shadow: 0 7px 16px rgba(0, 0, 0, .2);
  cursor: pointer;
}
.top-wallet-button > span:first-child { color: var(--gold); }
.top-wallet-button .icon { width: 18px; height: 18px; }
.top-wallet-button small { display:block; color:#e7cc82; font-size:.51rem; line-height:1; text-align:left; }
.top-wallet-button strong { display:block; max-width:86px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; color:#fff; font-size:.69rem; line-height:1; white-space:nowrap; }
.top-wallet-button:hover { filter:brightness(1.06); }
.site-footer { margin-top:auto; padding:26px 4px 3px; text-align:center; }
.site-footer a { color:rgba(184,211,231,.72); font-size:.58rem; text-decoration:none; }
.site-footer a:hover, .site-footer a:focus-visible { color:#fff; text-decoration:underline; }
.terms-acceptance { display:flex!important; flex-direction:row!important; align-items:flex-start; gap:9px; font-size:.62rem; line-height:1.45; }
.terms-acceptance input { width:17px!important; height:17px; margin:2px 0 0; flex:0 0 auto; }
.terms-acceptance a { color:var(--sky); font-weight:850; }
@media(max-width:430px){
  .top-wallet-button { max-width:112px; padding:6px 8px; }
  .top-wallet-button strong { max-width:61px; font-size:.63rem; }
}

/* ===== v1.7.2 · página pública de términos ===== */
.terms-public-shell { width:min(100%,820px); min-height:100svh; margin:0 auto; padding:calc(18px + env(safe-area-inset-top)) 16px calc(30px + env(safe-area-inset-bottom)); }
.terms-public-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.terms-back-link { color:#b8d3e7; font-size:.72rem; font-weight:800; text-decoration:none; }
.terms-back-link:hover { color:#fff; }
.terms-public-brand { display:flex; align-items:center; gap:9px; text-align:right; }
.terms-public-brand img { width:39px; height:39px; }
.terms-public-brand strong,.terms-public-brand span { display:block; }
.terms-public-brand strong { font-size:.82rem; }
.terms-public-brand span { margin-top:3px; color:#a8c7db; font-size:.56rem; }
.terms-public-card { border:1px solid rgba(126,213,252,.18); border-radius:24px; padding:clamp(19px,4vw,38px); background:linear-gradient(160deg,rgba(8,55,94,.95),rgba(2,24,45,.96)); box-shadow:var(--shadow); }
.terms-document-meta { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid rgba(126,213,252,.14); color:#9fc3d9; font-size:.58rem; }
.terms-document h1 { margin:0 0 24px; font-size:clamp(1.55rem,5vw,2.25rem); line-height:1.1; }
.terms-document h2 { margin:29px 0 10px; color:#f5d273; font-size:1rem; line-height:1.25; }
.terms-document p,.terms-document li { color:#d8e9f3; font-size:.72rem; line-height:1.72; }
.terms-document p { margin:0 0 13px; }
.terms-document ul { margin:0 0 15px; padding-left:21px; }
.terms-loading,.terms-unavailable { min-height:260px; display:grid; place-content:center; text-align:center; color:#b8d3e7; }
.terms-unavailable h1 { margin:0 0 10px; color:#fff; }
.terms-unavailable p { margin:0 0 18px; }
.terms-unavailable a,.terms-unavailable button { justify-self:center; border:0; border-radius:12px; padding:10px 15px; color:#062846; background:#f4c557; font-weight:900; text-decoration:none; cursor:pointer; }
@media(max-width:520px){ .terms-public-header { align-items:flex-start; } .terms-public-brand span { display:none; } .terms-public-card { border-radius:19px; } }

/* v1.7.7 · recuperación de contraseña */
.auth-recovery-link { appearance:none; border:0; background:transparent; color:#f4c557; font:inherit; font-size:.68rem; font-weight:800; text-decoration:underline; text-underline-offset:3px; cursor:pointer; justify-self:end; padding:0; }
.auth-recovery-link:hover { color:#ffe29b; }
.recovery-back-login { justify-self:center; margin-top:14px; }
.recovery-card .account-success, .recovery-card .account-error { line-height:1.45; }