/* QRQ EINFACH – neon dark UI */
:root{
  --bg1:#0b0b14; --bg2:#1a0f2a;
  --card: rgba(10,14,30,.72);
  --border: rgba(255,255,255,.10);
  --text:#f3f5ff; --muted: rgba(243,245,255,.72);
  --pink1:#ff2ea6; --pink2:#ff78d2;
  --cyan1:#38e6ff; --cyan2:#00a6ff;
  --red1:#ff3b3b; --red2:#d6007a;
  --green1:#2cff7a; --green2:#00a86b;
}

.qrq-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text);}
.qrq-wrap *{box-sizing:border-box;}

.qrq-wrap{padding:16px; background: radial-gradient(1200px 600px at 20% 0%, rgba(124,58,237,.30), transparent 60%),
  radial-gradient(900px 500px at 80% 20%, rgba(255,46,166,.25), transparent 55%),
  linear-gradient(180deg, var(--bg2), var(--bg1));
  border-radius:18px;
}

.qrq-hero{display:flex; justify-content:center; margin: 8px 0 18px;}
.qrq-hero-inner{width:100%; max-width: 980px; padding:18px 18px 6px; border-radius:20px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.qrq-logo{min-height:72px; padding:10px; display:flex; justify-content:center; align-items:center; border-radius:16px; background:
  radial-gradient(180px 60px at 30% 30%, rgba(56,230,255,.35), transparent 60%),
  radial-gradient(180px 60px at 70% 60%, rgba(255,46,166,.30), transparent 60%),
  linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
}
/* Logo im Header: volle Breite nutzen (z.B. 800px Upload), aber responsiv bleiben */
.qrq-logo-img{
  width:100%;
  max-width:980px;
  height:auto;
  max-height:none;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));
  border-radius:14px;
}
.qrq-title{font-size:34px; font-weight:800; margin:12px 0 2px; letter-spacing:.5px;}
.qrq-subtitle{font-size:14px; color:var(--muted); margin-bottom:8px;}

.qrq-card{width:100%; max-width:980px; margin: 14px auto; padding:22px;
  border-radius:22px; background: var(--card);
  border:1px solid var(--border);
  box-shadow: 0 14px 45px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}
.qrq-card h2{margin:0 0 10px; font-size:34px; letter-spacing:.2px;}
.qrq-card p{margin:6px 0 14px; color:var(--muted);}

.qrq-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px;}
@media (max-width: 860px){ .qrq-grid{grid-template-columns:1fr;} }

.qrq-card label{display:block; font-size:14px; color:var(--muted); margin: 10px 0 6px;}
.qrq-card input, .qrq-card select{width:100%; padding:14px 14px; border-radius:16px; font-size:18px;
  color:var(--text); background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  outline:none;
}
.qrq-card input:focus, .qrq-card select:focus{border-color: rgba(56,230,255,.55); box-shadow: 0 0 0 4px rgba(56,230,255,.12);} 

.qrq-btn{width:100%; margin-top:14px; padding:14px 16px; border-radius:999px; border:none; cursor:pointer;
  font-weight:800; letter-spacing:1px; text-transform:uppercase; font-size:16px;
}
.qrq-btn-pink{background: linear-gradient(90deg, var(--pink1), var(--pink2));
  box-shadow: 0 12px 30px rgba(255,46,166,.25);
}
.qrq-btn-red{background: linear-gradient(90deg, var(--red1), var(--red2));
  box-shadow: 0 12px 30px rgba(255,59,59,.20);
}
.qrq-btn-green{background: linear-gradient(90deg, var(--green1), var(--green2));
  box-shadow: 0 12px 30px rgba(44,255,122,.18);
  color:#fff;
}
.qrq-btn:active{transform: translateY(1px);}

/* Mini-Memory cards */
.qrq-mem-card{
  height: 74px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .02em;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.qrq-mem-card:active{transform: translateY(1px);} 
.qrq-mem-card:not(.is-open){
  color: rgba(255,255,255,.55);
}
.qrq-mem-card.is-open{
  background: rgba(255,255,255,.16);
  border-color: rgba(56,230,255,.45);
  box-shadow: 0 14px 34px rgba(56,230,255,.10);
}
.qrq-mem-card.is-match{
  background: rgba(44,255,122,.18);
  border-color: rgba(44,255,122,.55);
  color: rgba(255,255,255,.95);
}

.qrq-row{margin-top:10px; display:flex; gap:10px; align-items:center;}
.qrq-inline{justify-content:flex-start;}
.qrq-check{display:flex; gap:10px; align-items:center; color:var(--muted);}
.qrq-check input{width:18px; height:18px;}

.qrq-msg{margin-top:10px; color: rgba(255,255,255,.85);}
.qrq-muted{color:var(--muted);}

.qrq-table-wrap{overflow:auto; border-radius:16px; border:1px solid rgba(255,255,255,.10);}
.qrq-table{width:100%; border-collapse:collapse; min-width: 560px;}
.qrq-table th, .qrq-table td{padding:14px 12px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left;}
.qrq-table th{font-size:13px; color: rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.8px;}
.qrq-table td{font-size:16px;}

.qrq-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:14px;}
.qrq-actions .qrq-btn{width:auto; flex:1 1 260px; margin-top:0;}

.qrq-btn-orange{background: linear-gradient(90deg, #ffb44a, #ff7a18);
  box-shadow: 0 12px 30px rgba(255, 152, 46, .18);
  color:#fff;
}

/* Player UI */
.qrq-player .qrq-player-card{max-width:720px;}
.qrq-topbar{display:flex; flex-direction:column; gap:12px; align-items:stretch; margin-bottom:16px;}
.qrq-topbar-row{display:flex; gap:12px; align-items:center; justify-content:space-between;}
.qrq-pill{flex:1; padding:14px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  font-weight:800; letter-spacing:.8px; text-transform:uppercase; font-size:14px;
}
.qrq-pill-btn{flex:0 0 auto; padding:9px 18px; cursor:pointer; color: var(--text);
  background: radial-gradient(120px 60px at 30% 20%, rgba(56,230,255,.35), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: 0 12px 26px rgba(0,166,255,.12);
}
.qrq-pill-player{flex:0 0 auto; min-width: 140px; text-align:center;
  background: radial-gradient(120px 60px at 60% 10%, rgba(255,46,166,.35), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

/* Prominent countdown (Timed mode) */
.qrq-pill-countdown{
  font-size:20px;
  padding:18px 18px;
  text-align:center;
  letter-spacing:1px;
}
.qrq-countdown-wrap{
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  overflow:hidden;
}
.qrq-countdown-bar{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(56,230,255,.85), rgba(255,46,166,.85));
  box-shadow: 0 10px 22px rgba(0,166,255,.18);
  transition: width .35s ease;
}
.qrq-countdown-warn{
  box-shadow: 0 14px 30px rgba(255, 189, 46, .18);
}
.qrq-countdown-crit{
  box-shadow: 0 14px 30px rgba(255, 77, 109, .20);
  animation: qrqPulse 1.2s ease-in-out infinite;
}
@keyframes qrqPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.02);}
}

.qrq-h1{font-size:46px; font-weight:900; margin: 10px 0 10px; letter-spacing:.2px;}
.qrq-h1-task{font-size:30px;}
.qrq-h1-question{font-size:21px;}

.qrq-task{font-size:22px; line-height:1.35; margin: 10px 0 10px; color: rgba(243,245,255,.92);} 
.qrq-error{color: #ff4d6d; font-weight:800; font-size:22px; line-height:1.25; margin: 14px 0;}

.qrq-answers{display:grid; gap:14px; margin-top:16px;}
.qrq-answer{display:flex; gap:14px; align-items:center; padding:16px; border-radius:18px;
  border:1px solid rgba(0,0,0,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88));
  color:#101324;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  cursor:pointer;
}
.qrq-answer .qrq-letter{width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  font-weight:900; background: linear-gradient(180deg, rgba(56,230,255,.85), rgba(0,166,255,.85)); color:#03111a;
}
.qrq-answer .qrq-text{font-size:18px; font-weight:800; line-height:1.15;}
.qrq-answer:active{transform: translateY(1px);}

.qrq-answer.qrq-answer-input-dark{
  background: linear-gradient(180deg, rgba(18,22,52,.96), rgba(10,14,34,.94));
  border:1px solid rgba(56,230,255,.18);
  color:var(--text);
}
.qrq-answer.qrq-answer-input-dark .qrq-text{
  color:var(--text);
}
.qrq-answer.qrq-answer-input-dark .qrq-input-dark{
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.10) !important;
  font-weight:700;
}
.qrq-answer.qrq-answer-input-dark .qrq-input-dark::placeholder{
  color: rgba(255,255,255,.52) !important;
}

.qrq-small{font-size:14px; color: var(--muted);}

/* Host winner highlight */
.qrq-winner{
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.qrq-winner-row{
  background: rgba(255,255,255,.06);
}

.qrq-team-summary{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
  margin: 0 0 16px;
}
@media (max-width: 860px){
  .qrq-team-summary{grid-template-columns:1fr;}
}

.qrq-team-card{
  padding:14px 16px;
  border-radius:18px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.qrq-team-card.is-winner{
  background: rgba(255,255,255,.08);
  border-color: rgba(56,230,255,.35);
  box-shadow: 0 16px 40px rgba(56,230,255,.12);
}

.qrq-team-title{
  font-size:20px;
  font-weight:900;
  margin-bottom:6px;
}

.qrq-team-meta{
  font-size:13px;
  color: var(--muted);
  margin-bottom:10px;
}

.qrq-team-stats{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:8px;
  font-size:15px;
}

/* Host: QR slide deck */
.qrq-qrslides{margin-top:80px; padding-top:16px; border-top:1px solid rgba(255,255,255,.10);} 
.qrq-qrslides-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.qrq-qrslides-head h3{margin:0 0 4px; font-size:20px; letter-spacing:.2px;}
.qrq-qrslides-nav{display:flex; gap:10px; align-items:center;}

.qrq-btn-ghost{width:auto; margin-top:0; padding:10px 14px; border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  color: rgba(243,245,255,.92);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  font-size:18px;
}

.qrq-btn-small{padding:7px 10px; font-size:12px; letter-spacing:.6px; text-transform:uppercase;}

/* Host: K-Faktor control */
.qrq-kfactor{margin: 10px 0 14px; padding: 14px; border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.qrq-kfactor-top{display:flex; justify-content:flex-end; margin-bottom:8px;}
.qrq-kfactor label{display:block; margin:0 0 8px; font-weight:900;}
.qrq-kfactor select{width:100%;}
.qrq-kfactor-hint{margin-top:8px;}

.qrq-slide{margin-top:14px; border-radius:22px; padding:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  outline:none;
}
.qrq-slide:focus{box-shadow: 0 0 0 4px rgba(56,230,255,.14), 0 18px 50px rgba(0,0,0,.35);} 
.qrq-slide-title{font-weight:900; letter-spacing:1px; text-transform:uppercase; font-size:27px;}
.qrq-slide-qr{width:280px; max-width: 100%; padding:12px; border-radius:18px;
  background: rgba(255,255,255,.92);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 14px 28px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
}
.qrq-slide-url{font-size:13px; color: rgba(243,245,255,.75); word-break:break-all; text-align:center;}

.qrq-dots{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; justify-content:center;}
.qrq-dot{width:12px; height:12px; border-radius:999px; border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); cursor:pointer; padding:0;
}
.qrq-dot.is-active{background: linear-gradient(180deg, rgba(56,230,255,.85), rgba(0,166,255,.85)); border-color: rgba(56,230,255,.55);} 

/* In-app modal (used for "SPIEL BEENDEN") */
.qrq-modal-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  z-index: 99999;
}
.qrq-modal-overlay.is-open{display:flex;}

.qrq-modal{
  width: min(560px, 100%);
  border-radius: 22px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.qrq-modal-title{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .3px;
  margin: 2px 0 8px;
}
.qrq-modal-desc{
  font-size: 16px;
  color: rgba(243,245,255,.82);
  line-height: 1.35;
  margin: 0 0 14px;
}
.qrq-modal-actions{
  display:flex;
  gap: 12px;
  justify-content: flex-end;
}
.qrq-modal-actions .qrq-btn{
  width: auto;
  margin-top: 0;
  padding: 12px 16px;
  font-size: 14px;
}



/* Small INFO button for tablet controls */
.qrq-info-btn{ padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color:#eaf1ff; font-weight:800; letter-spacing:.4px; cursor:pointer; }
.qrq-info-btn:hover{ background: rgba(255,255,255,.10); }


/* Simon Says – bessere Sichtbarkeit bei Sonnenlicht */
.qrq-simon-pad{
  color: rgba(0,0,0,.80);
}
.qrq-simon-pad.qrq-simon-active{
  outline: 4px solid rgba(255,255,255,0.95);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.35), 0 0 18px rgba(255,255,255,0.55);
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.85);
}
.qrq-simon-pad.qrq-simon-active *{
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.85);
}

/* Input fields (e.g. Zahlenblitz) */
.qrq-input{
  width:100%;
  padding:14px 14px;
  border-radius:14px;
  font-size:18px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.92);
  color:#111;
  outline:none;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.qrq-input::placeholder{color:rgba(0,0,0,.45);}
.qrq-input:focus{
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 0 0 3px rgba(0,180,255,.18), 0 10px 24px rgba(0,0,0,.25);
}


/* Host layout closer to original compact dashboard */
.qrq-wrap.qrq-host{
  max-width:780px;
  margin:0 auto;
  padding:0;
  background:transparent;
  border-radius:0;
}
.qrq-wrap.qrq-host .qrq-hero{margin:0 0 16px;}
.qrq-wrap.qrq-host .qrq-hero-inner,
.qrq-wrap.qrq-host .qrq-card{
  max-width:760px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(5,10,34,.96), rgba(2,7,28,.97));
  border:1px solid rgba(87,118,255,.18);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  backdrop-filter:none;
}
.qrq-wrap.qrq-host .qrq-hero-inner{padding:12px 12px 8px;}
.qrq-wrap.qrq-host .qrq-logo{
  min-height:auto;
  padding:8px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
}
.qrq-wrap.qrq-host .qrq-logo-img{max-width:720px; border-radius:10px; filter:none;}
.qrq-wrap.qrq-host .qrq-subtitle{font-size:10px; margin-top:4px; color:rgba(208,220,255,.72);}
.qrq-wrap.qrq-host .qrq-card{padding:16px; margin:14px auto;}
.qrq-wrap.qrq-host .qrq-card h2{font-size:18px; margin:0 0 8px; color:#f4f7ff;}
.qrq-wrap.qrq-host .qrq-card p,
.qrq-wrap.qrq-host .qrq-muted,
.qrq-wrap.qrq-host .qrq-kfactor-hint,
.qrq-wrap.qrq-host .qrq-team-meta{font-size:11px; line-height:1.45; color:rgba(210,220,245,.78);}
.qrq-wrap.qrq-host .qrq-card label,
.qrq-wrap.qrq-host .qrq-field-label{font-size:10px; margin:6px 0 5px; color:rgba(210,220,245,.72); letter-spacing:0;}
.qrq-wrap.qrq-host .qrq-card input,
.qrq-wrap.qrq-host .qrq-card select{
  padding:10px 12px;
  border-radius:8px;
  font-size:13px;
  min-height:40px;
  background:rgba(9,15,45,.96);
  color:#ffffff;
  border:1px solid rgba(95,116,214,.28);
  box-shadow:none;
}
.qrq-wrap.qrq-host .qrq-card input:focus,
.qrq-wrap.qrq-host .qrq-card select:focus{
  border-color:rgba(98,218,255,.45);
  box-shadow:0 0 0 3px rgba(98,218,255,.08);
}
.qrq-wrap.qrq-host .qrq-grid{gap:10px;}
.qrq-wrap.qrq-host .qrq-btn{font-size:11px; padding:11px 14px; border-radius:999px;}
.qrq-wrap.qrq-host .qrq-btn-pink{
  background:linear-gradient(90deg, #ff53b6, #ff4fa7);
  color:#140716;
  box-shadow:none;
}
.qrq-wrap.qrq-host .qrq-btn-green{
  background:linear-gradient(90deg, #26f37c, #10d563);
  color:#fff;
  box-shadow:none;
}
.qrq-wrap.qrq-host .qrq-btn-orange{
  background:linear-gradient(90deg, #ffba41, #ff9226);
  color:#fff;
  box-shadow:none;
}
.qrq-wrap.qrq-host .qrq-btn-red{
  background:linear-gradient(90deg, #f45f78, #da3f6d);
  color:#fff;
  box-shadow:none;
}
.qrq-wrap.qrq-host .qrq-btn-small{padding:6px 10px; font-size:10px;}
.qrq-wrap.qrq-host .qrq-btn-ghost{
  font-size:12px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#eef3ff;
  box-shadow:none;
}
.qrq-wrap.qrq-host .qrq-row{margin-top:8px;}
.qrq-wrap.qrq-host .qrq-check{font-size:12px;}
.qrq-wrap.qrq-host .qrq-kfactor,
.qrq-wrap.qrq-host .qrq-winner,
.qrq-wrap.qrq-host .qrq-team-card,
.qrq-wrap.qrq-host .qrq-slide,
.qrq-wrap.qrq-host .qrq-table-wrap{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(110,138,255,.18);
  box-shadow:none;
}
.qrq-wrap.qrq-host .qrq-team-card.is-winner{
  background:rgba(0,185,255,.08);
  border-color:rgba(55,221,255,.42);
}
.qrq-wrap.qrq-host .qrq-winner-row{background:rgba(255,255,255,.04);}
.qrq-wrap.qrq-host .qrq-qrslides{margin-top:22px; padding-top:14px; border-top:1px solid rgba(110,138,255,.16);}
.qrq-wrap.qrq-host .qrq-qrslides-head h3{font-size:14px; color:#f4f7ff;}
.qrq-wrap.qrq-host .qrq-slide{padding:16px; border-radius:14px;}
.qrq-wrap.qrq-host .qrq-slide-title{font-size:16px; color:#dbe6ff;}
.qrq-wrap.qrq-host .qrq-slide-url{color:rgba(214,224,255,.72);}
.qrq-wrap.qrq-host .qrq-slide-qr{width:220px; padding:10px; border-radius:12px;}
.qrq-wrap.qrq-host .qrq-table{min-width:640px;}
.qrq-wrap.qrq-host .qrq-table th,
.qrq-wrap.qrq-host .qrq-table td{padding:10px 8px; font-size:11px;}
.qrq-wrap.qrq-host .qrq-table th{color:rgba(208,220,255,.66);}
.qrq-wrap.qrq-host .qrq-table td{color:#f4f7ff;}
.qrq-wrap.qrq-host .qrq-team-title{font-size:16px; color:#f4f7ff;}
.qrq-wrap.qrq-host .qrq-team-stats{font-size:12px;}
.qrq-wrap.qrq-host .qrq-dot{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14);}
.qrq-wrap.qrq-host .qrq-dot.is-active{background:#26d9ff; border-color:#26d9ff;}
.qrq-wrap.qrq-host .qrq-info-btn{
  background:#ffffff;
  color:#1d2438;
  border:1px solid rgba(0,0,0,.05);
}
@media (max-width: 860px){
  .qrq-wrap.qrq-host{max-width:100%;}
  .qrq-wrap.qrq-host .qrq-hero-inner,
  .qrq-wrap.qrq-host .qrq-card{max-width:100%;}
}

.qrq-input-dark{
  background: rgba(7,12,36,.92);
  color: #f3f5ff;
  border: 1px solid rgba(56,230,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 24px rgba(0,0,0,.28);
}
.qrq-input-dark::placeholder{color:rgba(243,245,255,.55);}
.qrq-input-dark:focus{
  border-color: rgba(56,230,255,.55);
  box-shadow: 0 0 0 3px rgba(0,180,255,.14), 0 10px 24px rgba(0,0,0,.28);
}
.qrq-variant-lock{margin-top:10px;}
.qrq-variant-lock-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.qrq-variant-lock-row input{flex:1 1 220px;}
.qrq-variant-lock-row .qrq-btn{width:auto; margin-top:0; padding:10px 16px;}


/* Host proportion rebalance: config area less compressed, mobile/tablet grids calmer */
.qrq-wrap.qrq-host > .qrq-card:first-of-type{
  padding:20px;
}
.qrq-wrap.qrq-host > .qrq-card:first-of-type h2{
  font-size:22px;
  margin-bottom:10px;
}
.qrq-wrap.qrq-host > .qrq-card:first-of-type .qrq-grid{
  gap:12px;
}
.qrq-wrap.qrq-host > .qrq-card:first-of-type label,
.qrq-wrap.qrq-host > .qrq-card:first-of-type .qrq-field-label{
  font-size:11px;
  margin:7px 0 6px;
}
.qrq-wrap.qrq-host > .qrq-card:first-of-type input,
.qrq-wrap.qrq-host > .qrq-card:first-of-type select{
  min-height:44px;
  font-size:14px;
  padding:11px 13px;
}
.qrq-wrap.qrq-host > .qrq-card:first-of-type .qrq-btn{
  font-size:12px;
  padding:12px 15px;
}
.qrq-wrap.qrq-host > .qrq-card:first-of-type .qrq-variant-lock .qrq-muted{
  font-size:12px;
  line-height:1.45;
}
.qrq-wrap.qrq-host > .qrq-card:first-of-type .qrq-variant-lock-row{
  display:flex;
  gap:10px;
  align-items:center;
}
.qrq-wrap.qrq-host > .qrq-card:first-of-type .qrq-variant-lock-row input{
  flex:1 1 auto;
}
.qrq-wrap.qrq-host > .qrq-card:first-of-type .qrq-variant-lock-row .qrq-btn{
  width:auto;
  margin-top:0;
  flex:0 0 auto;
}
.qrq-wrap.qrq-host > .qrq-card:nth-of-type(2){
  padding:18px;
}
.qrq-wrap.qrq-host > .qrq-card:nth-of-type(2) h2{
  font-size:20px;
}
.qrq-wrap.qrq-host > .qrq-card:nth-of-type(2) .qrq-actions .qrq-btn{
  flex:1 1 180px;
}
.qrq-wrap.qrq-host > .qrq-card:nth-of-type(2) .qrq-qrslides{
  margin-top:16px;
}
@media (max-width: 1200px){
  .qrq-wrap.qrq-host .qrq-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 760px){
  .qrq-wrap.qrq-host > .qrq-card:first-of-type,
  .qrq-wrap.qrq-host > .qrq-card:nth-of-type(2){padding:16px;}
  .qrq-wrap.qrq-host .qrq-grid{grid-template-columns:1fr;}
  .qrq-wrap.qrq-host > .qrq-card:first-of-type h2,
  .qrq-wrap.qrq-host > .qrq-card:nth-of-type(2) h2{font-size:18px;}
  .qrq-wrap.qrq-host > .qrq-card:first-of-type .qrq-variant-lock-row{flex-direction:column; align-items:stretch;}
  .qrq-wrap.qrq-host > .qrq-card:first-of-type .qrq-variant-lock-row .qrq-btn{width:100%;}
}


/* v1.6.3 stronger host proportion fix */
.qrq-wrap.qrq-host > .qrq-card:first-of-type{
  padding:24px !important;
  margin-bottom:18px !important;
}
.qrq-wrap.qrq-host > .qrq-card:first-of-type h2{
  font-size:26px !important;
  margin-bottom:16px !important;
}
.qrq-wrap.qrq-host > .qrq-card:first-of-type .qrq-grid{
  gap:14px !important;
}
.qrq-wrap.qrq-host > .qrq-card:first-of-type label,
.qrq-wrap.qrq-host > .qrq-card:first-of-type .qrq-field-label{
  font-size:12px !important;
  margin:8px 0 7px !important;
}
.qrq-wrap.qrq-host > .qrq-card:first-of-type input,
.qrq-wrap.qrq-host > .qrq-card:first-of-type select{
  min-height:54px !important;
  height:54px !important;
  padding:14px 16px !important;
  font-size:15px !important;
}
.qrq-wrap.qrq-host > .qrq-card:first-of-type .qrq-btn{
  min-height:42px;
}
.qrq-wrap.qrq-host > .qrq-card:nth-of-type(2){
  padding:16px !important;
}
.qrq-wrap.qrq-host > .qrq-card:nth-of-type(2) h2{
  font-size:18px !important;
  margin-bottom:8px !important;
}
.qrq-wrap.qrq-host > .qrq-card:nth-of-type(2) .qrq-muted,
.qrq-wrap.qrq-host > .qrq-card:nth-of-type(2) .qrq-kfactor-hint,
.qrq-wrap.qrq-host > .qrq-card:nth-of-type(2) .qrq-team-meta{
  font-size:10px !important;
}
.qrq-wrap.qrq-host > .qrq-card:nth-of-type(2) .qrq-table th,
.qrq-wrap.qrq-host > .qrq-card:nth-of-type(2) .qrq-table td{
  padding:8px 6px !important;
  font-size:10px !important;
}
.qrq-wrap.qrq-host > .qrq-card:nth-of-type(2) .qrq-slide{
  padding:12px !important;
}
@media (max-width: 900px){
  .qrq-wrap.qrq-host > .qrq-card:first-of-type .qrq-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width: 640px){
  .qrq-wrap.qrq-host > .qrq-card:first-of-type{
    padding:20px !important;
  }
  .qrq-wrap.qrq-host > .qrq-card:first-of-type h2{
    font-size:22px !important;
  }
  .qrq-wrap.qrq-host > .qrq-card:first-of-type .qrq-grid,
  .qrq-wrap.qrq-host > .qrq-card:nth-of-type(2) .qrq-grid{
    grid-template-columns:1fr !important;
  }
  .qrq-wrap.qrq-host > .qrq-card:first-of-type input,
  .qrq-wrap.qrq-host > .qrq-card:first-of-type select{
    min-height:50px !important;
    height:50px !important;
    font-size:15px !important;
  }
  .qrq-wrap.qrq-host > .qrq-card:nth-of-type(2){
    padding:14px !important;
  }
}


/* v1.7.20 tablet/layout color harmonization + player dropdown theme */
/* Outdoor host on tablet/desktop should match the darker indoor dashboard look without changing layout/function. */
.qrq-wrap.qrq-host .qrq-card,
.qrq-wrap.qrq-host .qrq-hero-inner{
  background:
    radial-gradient(1200px 420px at 0% 0%, rgba(28,54,132,.18), transparent 58%),
    linear-gradient(180deg, rgba(5,10,34,.98), rgba(3,8,29,.985));
}
.qrq-wrap.qrq-host .qrq-logo{
  background:
    radial-gradient(220px 90px at 18% 30%, rgba(56,230,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}
.qrq-wrap.qrq-host .qrq-kfactor,
.qrq-wrap.qrq-host .qrq-winner,
.qrq-wrap.qrq-host .qrq-team-card,
.qrq-wrap.qrq-host .qrq-slide,
.qrq-wrap.qrq-host .qrq-table-wrap,
.qrq-wrap.qrq-host .qrq-card#qrq-hybrid-box{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border-color: rgba(87,118,255,.22);
}
.qrq-wrap.qrq-host .qrq-winner-row{
  background: rgba(56,230,255,.05);
}
.qrq-wrap.qrq-host .qrq-table th,
.qrq-wrap.qrq-host .qrq-table td{
  border-bottom-color: rgba(110,138,255,.14);
}
.qrq-wrap.qrq-host .qrq-card p,
.qrq-wrap.qrq-host .qrq-muted,
.qrq-wrap.qrq-host .qrq-kfactor-hint,
.qrq-wrap.qrq-host .qrq-team-meta,
.qrq-wrap.qrq-host .qrq-slide-url{
  color: rgba(219,228,255,.80);
}
.qrq-wrap.qrq-host .qrq-card label,
.qrq-wrap.qrq-host .qrq-field-label,
.qrq-wrap.qrq-host .qrq-table th{
  color: rgba(208,220,255,.74);
}
.qrq-wrap.qrq-host .qrq-card input,
.qrq-wrap.qrq-host .qrq-card select,
.qrq-wrap.qrq-host .qrq-input-dark{
  background:
    linear-gradient(180deg, rgba(13,21,56,.98), rgba(8,14,40,.98));
  color:#f7f9ff;
  border:1px solid rgba(88,114,214,.34);
}
.qrq-wrap.qrq-host .qrq-card input::placeholder,
.qrq-wrap.qrq-host .qrq-input-dark::placeholder{
  color: rgba(232,238,255,.48);
}
.qrq-wrap.qrq-host .qrq-card select option,
.qrq-wrap.qrq-host .qrq-card select optgroup{
  background:#0c1435;
  color:#f3f5ff;
}
.qrq-wrap.qrq-host .qrq-card select{
  -webkit-appearance:none;
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.9) 50%),
    linear-gradient(135deg, rgba(255,255,255,.9) 50%, transparent 50%),
    linear-gradient(180deg, rgba(13,21,56,.98), rgba(8,14,40,.98));
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    0 0;
  background-size:6px 6px, 6px 6px, 100% 100%;
  background-repeat:no-repeat;
  padding-right:34px !important;
}
.qrq-wrap.qrq-host .qrq-btn-ghost{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
}
/* Tablet tuning: preserve compact layout but use the darker indoor visual balance. */
@media (min-width: 641px) and (max-width: 1100px){
  .qrq-wrap.qrq-host .qrq-hero-inner,
  .qrq-wrap.qrq-host .qrq-card{
    max-width: 100%;
    border-radius: 18px;
  }
  .qrq-wrap.qrq-host > .qrq-card:first-of-type,
  .qrq-wrap.qrq-host > .qrq-card:nth-of-type(2){
    padding:18px !important;
  }
  .qrq-wrap.qrq-host > .qrq-card:first-of-type .qrq-grid{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap:12px !important;
  }
  .qrq-wrap.qrq-host > .qrq-card:first-of-type input,
  .qrq-wrap.qrq-host > .qrq-card:first-of-type select{
    min-height:46px !important;
    height:46px !important;
    padding:12px 14px !important;
    font-size:14px !important;
  }
  .qrq-wrap.qrq-host > .qrq-card:nth-of-type(2) .qrq-actions{
    gap:12px;
  }
  .qrq-wrap.qrq-host > .qrq-card:nth-of-type(2) .qrq-actions .qrq-btn{
    min-height:46px;
    font-size:11px;
  }
}

/* Player number dropdown: dark theme matching the player UI. */
.qrq-player .qrq-player-select,
.qrq-player #qrq-pno{
  width:100%;
  padding:14px 16px;
  border-radius:16px;
  font-size:18px;
  font-weight:700;
  line-height:1.2;
  border:1px solid rgba(56,230,255,.28);
  color:#f3f5ff;
  background:
    linear-gradient(180deg, rgba(15,20,50,.98), rgba(10,15,40,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 22px rgba(0,0,0,.18);
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.92) 50%),
    linear-gradient(135deg, rgba(255,255,255,.92) 50%, transparent 50%),
    linear-gradient(180deg, rgba(15,20,50,.98), rgba(10,15,40,.98));
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    0 0;
  background-size:6px 6px, 6px 6px, 100% 100%;
  background-repeat:no-repeat;
  padding-right:36px;
}
.qrq-player .qrq-player-select:focus,
.qrq-player #qrq-pno:focus{
  border-color: rgba(56,230,255,.55);
  box-shadow: 0 0 0 4px rgba(56,230,255,.12), inset 0 1px 0 rgba(255,255,255,.03), 0 8px 22px rgba(0,0,0,.18);
}
.qrq-player .qrq-player-select option,
.qrq-player .qrq-player-select optgroup,
.qrq-player #qrq-pno option,
.qrq-player #qrq-pno optgroup{
  background:#0d1538;
  color:#f3f5ff;
}
.qrq-player .qrq-player-select option[value=""],
.qrq-player #qrq-pno option[value=""]{
  color: rgba(243,245,255,.78);
}


/* v1.7.21 closer outdoor-host alignment to original indoor palette + player tip contrast */
.qrq-wrap.qrq-host .qrq-hero-inner,
.qrq-wrap.qrq-host .qrq-card,
.qrq-wrap.qrq-host > .qrq-card:first-of-type,
.qrq-wrap.qrq-host > .qrq-card:nth-of-type(2),
.qrq-wrap.qrq-host > .qrq-card:nth-of-type(3){
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(35,63,157,.16), transparent 55%),
    linear-gradient(180deg, rgba(4,9,31,.985), rgba(2,6,24,.99)) !important;
  border:1px solid rgba(64,101,230,.24) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.34) !important;
}
.qrq-wrap.qrq-host .qrq-card h2,
.qrq-wrap.qrq-host .qrq-qrslides-head h3,
.qrq-wrap.qrq-host .qrq-team-title,
.qrq-wrap.qrq-host .qrq-slide-title,
.qrq-wrap.qrq-host .qrq-table td,
.qrq-wrap.qrq-host .qrq-winner,
.qrq-wrap.qrq-host .qrq-card{
  color:#f4f7ff;
}
.qrq-wrap.qrq-host .qrq-kfactor,
.qrq-wrap.qrq-host .qrq-winner,
.qrq-wrap.qrq-host .qrq-team-card,
.qrq-wrap.qrq-host .qrq-slide,
.qrq-wrap.qrq-host .qrq-table-wrap,
.qrq-wrap.qrq-host .qrq-card#qrq-hybrid-box,
.qrq-wrap.qrq-host .qrq-modal{
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)) !important;
  border:1px solid rgba(93,121,229,.22) !important;
}
.qrq-wrap.qrq-host .qrq-table th,
.qrq-wrap.qrq-host .qrq-table td{
  border-bottom:1px solid rgba(118,142,229,.14) !important;
}
.qrq-wrap.qrq-host .qrq-card p,
.qrq-wrap.qrq-host .qrq-muted,
.qrq-wrap.qrq-host .qrq-kfactor-hint,
.qrq-wrap.qrq-host .qrq-team-meta,
.qrq-wrap.qrq-host .qrq-slide-url,
.qrq-wrap.qrq-host .qrq-card label,
.qrq-wrap.qrq-host .qrq-field-label,
.qrq-wrap.qrq-host .qrq-table th{
  color:rgba(224,232,255,.78) !important;
}
.qrq-wrap.qrq-host .qrq-card input,
.qrq-wrap.qrq-host .qrq-card select,
.qrq-wrap.qrq-host .qrq-input-dark,
.qrq-wrap.qrq-host .qrq-kfactor select{
  background:
    linear-gradient(180deg, rgba(10,18,52,.985), rgba(7,13,39,.985)) !important;
  border:1px solid rgba(85,112,214,.34) !important;
  color:#f7f9ff !important;
}
.qrq-wrap.qrq-host .qrq-card select option,
.qrq-wrap.qrq-host .qrq-card select optgroup{
  background:#09112f !important;
  color:#f4f7ff !important;
}
.qrq-wrap.qrq-host .qrq-btn-ghost{
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04)) !important;
  color:#eef3ff !important;
}
.qrq-wrap.qrq-host .qrq-dot{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.14) !important;
}
.qrq-wrap.qrq-host .qrq-dot.is-active{
  background:#40d9ff !important;
  border-color:#40d9ff !important;
}
/* Player picker helper text should stay readable on the light selection card. */
.qrq-player #qrq-pick .qrq-small,
.qrq-player #qrq-pick .qrq-small b{
  color:rgba(19,24,44,.48) !important;
}
.qrq-player #qrq-pick .qrq-small b{
  font-weight:800;
}