/* ═══════════════════════════════════════════
   Cologne Quiz Night – Light Theme CSS
   All selectors scoped under .cqn-app
   ═══════════════════════════════════════════ */

.cqn-app{
  min-height:100vh;min-height:100dvh;
  background:#eaeaea;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  color:#1a1a1a;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  box-sizing:border-box;
  line-height:1.4;
}
.cqn-app *,.cqn-app *::before,.cqn-app *::after{box-sizing:border-box;margin:0;padding:0}
.cqn-app button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* HEADER IMAGE */
.cqn-app .hdr{flex-shrink:0;overflow:hidden}
.cqn-app .hdr img{width:100%;display:block;height:auto}

/* SETTINGS */
.cqn-app .settings{flex:1;overflow-y:auto;padding:12px;-webkit-overflow-scrolling:touch}
.cqn-app .s-card{background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:14px;margin-bottom:10px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cqn-app .s-label{font-size:13px;font-weight:700;margin-bottom:10px;color:#333}
.cqn-app .s-row{display:flex;gap:6px;flex-wrap:wrap}
.cqn-app .s-btn{padding:8px 16px;border-radius:8px;border:2px solid rgba(0,0,0,.1);background:transparent;color:#666;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
.cqn-app .s-btn.on{border-color:#c62828;background:rgba(198,40,40,.08);color:#c62828}
.cqn-app .s-toggle{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.04)}
.cqn-app .s-toggle:last-child{border:none}
.cqn-app .s-toggle-label{font-size:13px;color:#555}
.cqn-app .s-toggle-sw{width:44px;height:24px;border-radius:12px;background:rgba(0,0,0,.12);position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.cqn-app .s-toggle-sw.on{background:#2e7d32}
.cqn-app .s-toggle-sw::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.cqn-app .s-toggle-sw.on::after{transform:translateX(20px)}
.cqn-app .s-rule{display:flex;gap:8px;align-items:center;padding:6px 0;font-size:12px;color:#666}
.cqn-app .s-rule b{color:#333}

/* BIG BUTTON */
.cqn-app .big-btn{
  display:block;width:100%;padding:14px;border:none;border-radius:12px;
  background:linear-gradient(135deg,#c62828,#b71c1c);color:#fff;
  font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;
  box-shadow:0 4px 16px rgba(198,40,40,.3);margin-top:8px;
  transition:transform .1s;flex-shrink:0;text-align:center;
  line-height:1.4;
}
.cqn-app .big-btn:active{transform:scale(.97)}
.cqn-app .big-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* CATEGORY SPLASH */
.cqn-app .cat-splash{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(0,0,0,.8);z-index:10;color:#fff;
  animation:cqnCatIn .4s ease;
}
.cqn-app .cat-splash .icon{font-size:64px;margin-bottom:8px}
.cqn-app .cat-splash .name{font-size:22px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.cqn-app .cat-splash .diff{font-size:12px;margin-top:6px;opacity:.6}
.cqn-app .cat-splash .joker{font-size:16px;margin-top:10px;color:#ffc837;font-weight:700;animation:cqnPulse 1s infinite}

/* GAME */
.cqn-app .game{flex:1;display:flex;flex-direction:column;overflow:hidden}
.cqn-app .g-top{padding:8px 12px;flex-shrink:0}
.cqn-app .g-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-size:11px;color:#888}
.cqn-app .g-cat{display:flex;align-items:center;gap:4px;font-weight:600;color:#555}
.cqn-app .g-bar{height:3px;border-radius:2px;background:rgba(0,0,0,.08);overflow:hidden;margin-bottom:8px}
.cqn-app .g-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#c62828,#e53935);transition:width .4s}
.cqn-app .g-question{font-size:15px;font-weight:700;line-height:1.4;margin-bottom:8px;min-height:42px;color:#1a1a1a}
.cqn-app .g-answers{display:flex;gap:6px;margin-bottom:6px}
.cqn-app .g-ans{flex:1;padding:8px 4px;border-radius:8px;background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.06);text-align:center;font-size:12px;font-weight:600;line-height:1.3;color:#444;transition:all .2s}
.cqn-app .g-ans .letter{font-size:11px;font-weight:800;color:#aaa;display:block;margin-bottom:2px}
.cqn-app .g-ans.correct{background:rgba(46,125,50,.12);border-color:rgba(46,125,50,.3);color:#2e7d32}
.cqn-app .g-ans.wrong{opacity:.3}
.cqn-app .g-timer{text-align:center;font-size:20px;font-weight:800;color:#c62828;margin-bottom:4px;font-variant-numeric:tabular-nums}
.cqn-app .g-timer.urgent{color:#b71c1c;animation:cqnPulse .5s infinite}

/* PLAYER GRID */
.cqn-app .players{flex:1;overflow-y:auto;padding:0 12px;-webkit-overflow-scrolling:touch}
.cqn-app .p-row{display:flex;align-items:center;gap:0;margin-bottom:4px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.45);border:1px solid rgba(0,0,0,.05)}
.cqn-app .p-num{width:32px;text-align:center;font-size:13px;font-weight:800;color:#bbb;flex-shrink:0;padding:10px 0}
.cqn-app .p-num.active{color:#c62828}
.cqn-app .p-btns{display:flex;flex:1;gap:0}
.cqn-app .p-btn{flex:1;padding:12px 4px;border:none;background:transparent;color:#bbb;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .12s;border-left:1px solid rgba(0,0,0,.04)}
.cqn-app .p-btn.sel{color:#c62828;background:rgba(198,40,40,.08)}
.cqn-app .p-btn:active{background:rgba(0,0,0,.04)}
.cqn-app .p-btn.res-correct{color:#2e7d32;background:rgba(46,125,50,.1)}
.cqn-app .p-btn.res-wrong{color:#c62828;background:rgba(198,40,40,.06)}
.cqn-app .p-result{width:30px;text-align:center;font-size:14px;flex-shrink:0}
.cqn-app .p-streak{font-size:9px;color:#e65100;font-weight:700;padding-right:4px;flex-shrink:0}
.cqn-app .p-row.inactive{opacity:.25}

/* BOTTOM BAR */
.cqn-app .g-bottom{padding:8px 12px;flex-shrink:0;border-top:1px solid rgba(0,0,0,.06)}

/* RESULTS */
.cqn-app .results{flex:1;overflow-y:auto;padding:12px;-webkit-overflow-scrolling:touch}
.cqn-app .r-card{background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:14px;margin-bottom:8px}
.cqn-app .r-announce{text-align:center;padding:16px;font-size:16px;font-weight:700;border-radius:12px;margin-bottom:10px}
.cqn-app .r-winner{background:rgba(255,193,7,.12);border:1px solid rgba(255,193,7,.3);color:#f57f17}
.cqn-app .r-loser{background:rgba(198,40,40,.08);border:1px solid rgba(198,40,40,.2);color:#c62828}
.cqn-app .r-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.04)}
.cqn-app .r-row:last-child{border:none}
.cqn-app .r-rank{font-size:20px;width:32px;text-align:center}
.cqn-app .r-info{flex:1}
.cqn-app .r-name{font-size:14px;font-weight:700;color:#1a1a1a}
.cqn-app .r-stat{font-size:11px;color:#888}
.cqn-app .r-pts{font-size:20px;font-weight:800;text-align:right;color:#1a1a1a}
.cqn-app .r-drinks{font-size:11px;color:#2e7d32;text-align:right}

/* ROUND RESULT MESSAGES */
.cqn-app .rr-msg{padding:8px 12px;border-radius:8px;margin-bottom:6px;font-size:13px;font-weight:600}
.cqn-app .rr-drink{background:rgba(46,125,50,.08);border:1px solid rgba(46,125,50,.15);color:#2e7d32}
.cqn-app .rr-dry{background:rgba(198,40,40,.06);border:1px solid rgba(198,40,40,.12);color:#c62828}
.cqn-app .rr-special{background:rgba(255,193,7,.1);border:1px solid rgba(255,193,7,.2);color:#f57f17}
.cqn-app .rr-fact{background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.06);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.cqn-app .rr-fact-label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#c62828;font-weight:700;margin-bottom:3px}
.cqn-app .rr-fact-text{font-size:12px;line-height:1.5;color:#555}
.cqn-app .rr-standing{display:flex;gap:8px;overflow-x:auto;padding:4px 0;margin-bottom:6px}
.cqn-app .rr-chip{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.06);font-size:11px;font-weight:700;white-space:nowrap;flex-shrink:0}
.cqn-app .rr-chip .num{color:#999}
.cqn-app .rr-chip .pts{color:#c62828}

/* ANIMATIONS */
@keyframes cqnCatIn{from{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}
@keyframes cqnFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cqnPulse{0%,100%{opacity:1}50%{opacity:.5}}
.cqn-app .fade-in{animation:cqnFadeIn .3s ease}

/* SHARE BUTTONS */
.cqn-app .share-btn{flex:1;padding:10px 12px;border-radius:8px;border:none;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;text-align:center}
.cqn-app .share-btn:active{transform:scale(.97)}
.cqn-app .share-wa{background:#25D366;color:#fff}
.cqn-app .share-em{background:rgba(0,0,0,.06);color:#555;border:1px solid rgba(0,0,0,.1)}