/* Google Fonts (Poppins + Bungee) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&family=Bungee&display=swap");

.donorione-gq{
  /* Light gamer theme */
  --bgA:#f6fbff;
  --bgB:#fff7ff;
  --panel: rgba(255,255,255,.78);
  --panel2: rgba(255,255,255,.92);
  --stroke: rgba(26, 75, 140, .18);

  --text:#12304c;
  --muted:#4f6d8a;

  --neon1:#22d3ee;  /* cyan */
  --neon2:#a78bfa;  /* violet */
  --neon3:#34d399;  /* green */
  --neon4:#fb7185;  /* pink */

  --good:#22c55e;
  --bad:#fb7185;
  --warn:#fbbf24;

  --shadow: 0 18px 48px rgba(18,48,76,.12);
  --shadow2: 0 10px 22px rgba(18,48,76,.10);

  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);

  /* evita scroll horizontal por full-bleed */
  overflow-x: hidden;
}
@supports (overflow: clip){
  .donorione-gq{ overflow-x: clip; }
}

/* 100% del contenedor (Elementor), NO full-bleed viewport */
.donorione-gq .gq-shell{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  /* Quitar el “breakout” */
  position: relative;
  left: auto;
  right: auto;
  margin-left: 0;
  margin-right: 0;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px;

  padding: clamp(14px, 1.6vw, 22px);
  border-radius: 20px;

  background:
    radial-gradient(900px 420px at 10% 0%, rgba(34, 211, 238, .28), transparent 60%),
    radial-gradient(900px 420px at 90% 0%, rgba(167, 139, 250, .22), transparent 62%),
    radial-gradient(900px 420px at 50% 110%, rgba(52, 211, 153, .18), transparent 60%),
    linear-gradient(135deg, var(--bgA), var(--bgB));

  border: 1px solid rgba(26, 75, 140, .10);
  box-shadow: var(--shadow);
}


/* sutil “grid gamer” */
.donorione-gq .gq-shell::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background-image:
    linear-gradient(to right, rgba(26,75,140,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,75,140,.07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(closest-side at 50% 30%, rgba(0,0,0,.9), transparent 70%);
}

@media (max-width: 980px){
  .donorione-gq .gq-shell{ grid-template-columns: 1fr; }
}

/* Header */
.gq-header{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position: relative;
  z-index: 1;
}

.gq-title{
  font-family: "Bungee", system-ui, sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .4px;
  color: var(--text);
  text-shadow:
    0 2px 0 rgba(255,255,255,.75),
    0 10px 30px rgba(34,211,238,.18);
}

.gq-hud{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.gq-pill{
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--stroke);
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(18,48,76,.08);
}

/* Cards */
.gq-card{
  position: relative;
  z-index: 1;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 14px;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow2);
}

.gq-intro .gq-avatar{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.gq-avatar-img{
  width:92px;
  height:92px;
  object-fit:cover;
  border-radius: 18px;
  background: #fff;
  border: 2px solid rgba(34,211,238,.35);
  box-shadow: 0 12px 24px rgba(18,48,76,.10);
}

.gq-chat{
  padding:12px;
  border-radius: 16px;
  background: var(--panel2);
  border: 1px solid var(--stroke);
  line-height: 1.35;
  color: var(--text);
}

/* Start area */
.gq-start{
  margin-top: 12px;
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.gq-label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.gq-select, .gq-input{
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  color: var(--text);
  outline: none;
  min-width: 230px;
  box-shadow: 0 10px 18px rgba(18,48,76,.08);
}

.gq-select:focus, .gq-input:focus{
  border-color: rgba(34,211,238,.65);
  box-shadow: 0 0 0 4px rgba(34,211,238,.18), 0 10px 18px rgba(18,48,76,.08);
}

/* Buttons */
.gq-btn{
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  color: var(--text);
  cursor:pointer;
  font-weight: 800;
  letter-spacing: .2px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease;
  box-shadow: 0 12px 20px rgba(18,48,76,.10);
}

.gq-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.55);
  filter: saturate(1.05);
  box-shadow: 0 16px 26px rgba(18,48,76,.12);
}

.gq-btn:active{ transform: translateY(0px); }

.gq-btn-primary{
  border-color: rgba(34,211,238,.55);
  background: linear-gradient(135deg, rgba(34,211,238,.34), rgba(167,139,250,.22));
}

.gq-btn-danger{
  border-color: rgba(251,113,133,.35);
  background: linear-gradient(135deg, rgba(251,113,133,.14), rgba(255,255,255,.92));
}

/* Game question */
.gq-question{
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 1.35;
}

.gq-options{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

.gq-option{
  text-align:left;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.95);
  cursor:pointer;
  font-weight: 800;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  box-shadow: 0 10px 18px rgba(18,48,76,.07);
}

.gq-option:hover{
  transform: translateY(-1px);
  border-color: rgba(167,139,250,.55);
  box-shadow: 0 14px 22px rgba(18,48,76,.09);
}

.gq-option:disabled{
  opacity: .92;
  cursor: default;
  transform: none;
}

.gq-option.is-correct{
  border-color: rgba(34,197,94,.55);
  background: rgba(34,197,94,.10);
}

.gq-option.is-wrong{
  border-color: rgba(251,113,133,.55);
  background: rgba(251,113,133,.10);
}

.gq-feedback{
  margin-top: 10px;
  color: var(--muted);
  min-height: 18px;
  font-weight: 800;
}

/* Medal pill */
.gq-medal{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  margin-bottom: 10px;
  font-weight: 900;
  box-shadow: 0 12px 18px rgba(18,48,76,.08);
}

/* League colors (text) */
.is-bronze{ color: #9a5a2e; }
.is-silver{ color: #2b5d86; }
.is-gold{ color: #9a7600; }
.is-diamond{ color: #067e98; }

.gq-mini{
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

/* Ranking panel */
.gq-ranking{
  display:flex;
  flex-direction:column;
  gap:10px;
  position: relative;
  z-index: 1;
}

.gq-ranking-title{
  font-family: "Bungee", system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .3px;
}

.gq-filters{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.gq-tabs{
  display:flex;
  gap:8px;
}

.gq-tab{
  flex:1;
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.88);
  color: var(--muted);
  cursor:pointer;
  font-weight: 900;
  transition: transform .12s ease, border-color .12s ease;
}

.gq-tab:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.45);
}

.gq-tab.is-active{
  border-color: rgba(34,211,238,.55);
  background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(167,139,250,.14));
  color: var(--text);
}

/* Podium */
.gq-podium{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

.gq-podium-card{
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 18px rgba(18,48,76,.08);
}

.gq-podium-pos{
  font-weight: 900;
  font-size: 12px;
  color: var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
}

.gq-podium-name{
  font-weight: 1000;
  font-size: 14px;
  margin-top: 2px;
}

.gq-podium-score{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 900;
}

/* Best box */
.gq-best{
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 12px 18px rgba(18,48,76,.08);
}

/* List */
.gq-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.gq-row{
  display:grid;
  grid-template-columns: 56px 1fr auto;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 18px rgba(18,48,76,.07);
}

.gq-row-rank{ color: var(--muted); font-weight: 1000; }
.gq-row-name{ font-weight: 1000; }
.gq-row-score{
  color: var(--muted);
  font-weight: 1000;
  display:flex;
  align-items:center;
  gap:6px;
}

.gq-muted{ color: var(--muted); font-size: 13px; font-weight: 800; }

/* Emojis */
.gq-emoji{
  display:inline-block;
  font-size: 1.15em;
  line-height: 1;
  transform: translateY(1px);
  margin-right: 6px;
}

.gq-medal .gq-emoji{
  font-size: 1.35em;
  margin-right: 2px;
}

.gq-podium-pos .gq-emoji{
  font-size: 1.18em;
  margin-right: 0;
}

.gq-row-score .gq-emoji{
  font-size: 1.05em;
  margin-right: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .gq-btn, .gq-option, .gq-tab{ transition: none; }
}