/* ======================================================================
   Quiz Duell – board like in the show: red topics, blue fields with glow
   ====================================================================== */

/* Team colors */
.qd-c-red { --tc: #ef4444; } .qd-c-blue { --tc: #3b82f6; } .qd-c-green { --tc: #22c55e; } .qd-c-yellow { --tc: #facc15; }
.qd-c-purple { --tc: #a855f7; } .qd-c-orange { --tc: #f97316; } .qd-c-pink { --tc: #ec4899; } .qd-c-teal { --tc: #14b8a6; }
.qd-c-lime { --tc: #84cc16; } .qd-c-brown { --tc: #a16207; } .qd-c-sky { --tc: #38bdf8; } .qd-c-gray { --tc: #9ca3af; }
.qd-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tc, #888); flex: none; }

/* ---------- Menu card & logo ---------- */
.gc-qd { background: #0b1222; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 7px; }
.gc-qd i {
  display: grid; place-items: center; border-radius: 4px; font: italic 900 8px/1 system-ui, sans-serif; color: #fff;
  background: linear-gradient(160deg, #2b63b8, #142a52); box-shadow: inset 0 0 0 1px #4aa3ff;
}
.gc-qd i.h { background: linear-gradient(160deg, #d3123d, #7c0a20); box-shadow: 0 0 6px rgba(255, 40, 80, .6); }
.gc-qd i.x { background: #0f1830; box-shadow: inset 0 0 0 1px rgba(74, 163, 255, .3); }
.qd-logo { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.qd-logo-top, .qd-logo-bot { font: italic 900 46px/1 system-ui, sans-serif; letter-spacing: 2px; color: #fff; }
.qd-logo-top { text-shadow: 0 0 18px rgba(255, 40, 80, .8), 0 3px 0 #7c0a20; }
.qd-logo-bot { color: #d6ecff; text-shadow: 0 0 18px rgba(74, 163, 255, .9), 0 3px 0 #142a52; }
.qd-logo-tiles { display: flex; gap: 5px; margin-top: 10px; }
.qd-logo-tiles i {
  font: italic 900 13px/1 system-ui, sans-serif; color: #fff; padding: 7px 9px; border-radius: 8px;
  background: linear-gradient(160deg, #2b63b8, #142a52); box-shadow: inset 0 0 0 1.5px #4aa3ff, 0 0 10px rgba(74, 163, 255, .45);
}

/* ---------- Setup: teams ---------- */
.qd-teamprev { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }
.qd-tp { padding: 8px; border-radius: 12px; background: var(--panel); border: 2px solid var(--tc); }
.qd-tp > b { display: block; font-size: 13px; color: var(--tc); margin-bottom: 6px; }
.qd-tp > div { display: flex; flex-wrap: wrap; gap: 4px; }
.qd-tp-p {
  appearance: none; font: inherit; font-size: 13px; color: var(--text); cursor: pointer;
  padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid var(--line);
}
.qd-tp-p:disabled { cursor: default; }
.qd-tp-tools { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.qd-boardinfo { margin-top: 12px; }

/* ---------- Game screen ---------- */
#screen-qd-game.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "board" "status";
  height: 100dvh;
  padding: var(--safe-top) max(10px, var(--safe-right)) max(8px, var(--safe-bottom)) max(10px, var(--safe-left));
  background: radial-gradient(ellipse at 50% 30%, #13223f 0%, #0a0f1c 75%);
  position: relative; overflow: hidden;
}
#screen-qd-game .topbar { grid-area: top; padding: 8px 0 6px; }
#screen-qd-game .status { grid-area: status; display: block; text-align: center; font-size: 14px; padding: 6px 4px 2px; min-height: 0; }
.qd-teams { flex: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.qd-teams::-webkit-scrollbar { display: none; }
.qd-team {
  flex: none; display: flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: 12px;
  background: var(--panel); border: 1.5px solid var(--line); transition: border-color 150ms, box-shadow 150ms;
}
.qd-team .qd-dot { background: var(--tc); }
.qd-tn { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.qd-tn b { font-size: 13px; white-space: nowrap; }
.qd-tn small { font-size: 10.5px; color: var(--muted); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.qd-ts { font: italic 900 18px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; margin-left: 2px; }
.qd-team.active { border-color: var(--tc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc) 35%, transparent), 0 0 14px color-mix(in srgb, var(--tc) 55%, transparent); }
.qd-team.me .qd-tn b::after { content: " (du)"; color: var(--muted); font-weight: 400; }
.qd-who { font-weight: 800; color: var(--tc); }
.qd-x2 { color: #ffd23f; }

/* Board */
.qd-board-area { grid-area: board; min-height: 0; display: flex; align-items: stretch; justify-content: center; }
.qd-board {
  flex: 1; max-width: 1200px; min-height: 0;
  display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr));
  grid-template-rows: minmax(34px, auto) repeat(4, minmax(0, 130px));
  align-content: center;
  gap: clamp(5px, 1.2vmin, 12px);
  padding: clamp(4px, 1vmin, 10px);
}
.qd-cat {
  display: grid; place-items: center; text-align: center; padding: 6px 4px; border-radius: 14px;
  background: linear-gradient(160deg, #e0153f 0%, #a50d2c 55%, #6b0719 100%);
  box-shadow: 0 0 16px rgba(255, 30, 70, .45), inset 0 1px 0 rgba(255,255,255,.25);
  color: #fff; font-weight: 900; text-transform: uppercase; letter-spacing: .5px;
  font-size: clamp(9px, 1.6vmin + .3vw, 16px); line-height: 1.1; word-break: break-word; hyphens: auto;
}
.qd-cell {
  appearance: none; border: 0; font: inherit; color: #fff; cursor: pointer; min-height: 0;
  display: grid; place-items: center; border-radius: 14px; position: relative;
  background: linear-gradient(160deg, #2c66bd 0%, #1a3f7d 50%, #0f2348 100%);
  box-shadow: inset 0 0 0 1.5px #4aa3ff, 0 0 12px rgba(74, 163, 255, .35), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform 120ms, box-shadow 160ms, filter 160ms;
}
.qd-cell span { font: italic 900 clamp(16px, 3.4vmin + .4vw, 38px)/1 "Arial Black", system-ui, sans-serif; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.qd-cell:not(:disabled):not(.done):hover { transform: scale(1.03); box-shadow: inset 0 0 0 2px #8cc8ff, 0 0 20px rgba(74, 163, 255, .7); }
.qd-cell:not(:disabled):not(.done):active { transform: scale(.97); }
.qd-cell:disabled:not(.done) { cursor: default; }
.qd-cell.open { animation: qd-open 900ms ease-in-out infinite alternate; }
@keyframes qd-open { to { box-shadow: inset 0 0 0 2px #ffd23f, 0 0 26px rgba(255, 210, 63, .7); } }
.qd-cell.done { cursor: default; background: #0d1528; box-shadow: inset 0 0 0 1px rgba(74, 163, 255, .18); }
.qd-cell.done span { font-size: clamp(12px, 2.2vmin + .3vw, 22px); opacity: .55; }
.qd-cell.done.won { background: color-mix(in srgb, var(--tc) 22%, #0d1528); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tc) 70%, transparent); }
.qd-cell.done.won span { opacity: 1; color: var(--tc); text-shadow: none; }
.qd-cell.done i { position: absolute; bottom: 4px; left: 4px; right: 4px; text-align: center; font-style: normal; font-size: clamp(8px, 1.2vmin, 11px); color: var(--tc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qd-cell.done.miss span { color: #64748b; opacity: .6; }
/* Extension: gold glow */
.qd-board.double .qd-cell:not(.done) { background: linear-gradient(160deg, #7a3fc8 0%, #45208a 55%, #23104f 100%); box-shadow: inset 0 0 0 1.5px #ffd23f, 0 0 14px rgba(255, 210, 63, .4); }
.qd-board.flip .qd-cell, .qd-board.flip .qd-cat { animation: qd-flip 650ms ease-out backwards; }
@keyframes qd-flip { from { transform: rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* Question */
.qd-q {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px;
  background: rgba(5, 9, 18, .78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: fade 160ms ease-out;
}
.qd-card {
  width: min(680px, 100%); max-height: 100%; overflow-y: auto;
  background: linear-gradient(170deg, #182a4f, #0d1730); border-radius: 22px; padding: 16px;
  border: 2px solid var(--tc); box-shadow: 0 0 30px color-mix(in srgb, var(--tc) 40%, transparent), 0 20px 50px rgba(0,0,0,.5);
  animation: qd-pop 260ms cubic-bezier(.2,.9,.3,1.2);
}
@keyframes qd-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.qd-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.qd-card-head span { font-weight: 900; text-transform: uppercase; letter-spacing: .5px; color: #ff6b85; font-size: 14px; }
.qd-card-head b { font: italic 900 26px/1 "Arial Black", system-ui, sans-serif; color: #fff; }
.qd-card-head b small { font-size: 13px; color: #ffd23f; }
.qd-timer { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 10px; }
.qd-timer i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #facc15, #ef4444); animation: qd-time linear forwards; transform-origin: left; }
@keyframes qd-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.qd-question { font-size: clamp(18px, 2.6vmin + .5vw, 28px); font-weight: 800; line-height: 1.3; margin: 14px 2px 16px; text-align: center; }
.qd-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qd-ans {
  appearance: none; font: inherit; color: #fff; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px; border-radius: 14px;
  background: linear-gradient(160deg, #2c66bd, #142f61); border: 0;
  box-shadow: inset 0 0 0 1.5px #4aa3ff; transition: transform 100ms, box-shadow 150ms, background 150ms, opacity 200ms;
}
.qd-ans b { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(0,0,0,.3); font-weight: 900; }
.qd-ans span { font-size: 15px; font-weight: 700; line-height: 1.25; }
.qd-ans:not(:disabled):hover { box-shadow: inset 0 0 0 2px #8cc8ff, 0 0 16px rgba(74, 163, 255, .5); }
.qd-ans:not(:disabled):active { transform: scale(.97); }
.qd-ans:disabled { cursor: default; }
.qd-ans.picked { box-shadow: inset 0 0 0 3px #ffd23f; }
.qd-ans.right { background: linear-gradient(160deg, #16a34a, #0b5c2a); box-shadow: inset 0 0 0 2px #4ade80, 0 0 20px rgba(74, 222, 128, .5); animation: qd-right 500ms ease-out; }
.qd-ans.wrong { background: linear-gradient(160deg, #dc2626, #7f1414); box-shadow: inset 0 0 0 2px #f87171; animation: qd-wrong 380ms ease-out; }
.qd-ans.dim { opacity: .4; }
@keyframes qd-right { 40% { transform: scale(1.05); } }
@keyframes qd-wrong { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } }
.qd-turn, .qd-res { text-align: center; margin-top: 14px; font-size: 15px; }
.qd-res.good { color: #4ade80; font-weight: 700; }
.qd-res.bad { color: #ff8a8a; font-weight: 700; }
.qd-next { display: block; margin: 12px auto 0; min-width: 160px; }

@media (max-width: 520px) {
  .qd-answers { grid-template-columns: 1fr; gap: 8px; }
  .qd-ans { min-height: 48px; }
  .qd-cat { border-radius: 9px; padding: 4px 2px; letter-spacing: 0; }
  .qd-cell { border-radius: 9px; }
}
@media (min-aspect-ratio: 4001/3000) {
  #screen-qd-game .topbar { padding: max(4px, var(--safe-top)) 0 2px; }
  #screen-qd-game.active { padding-top: 0; }
}
@media (min-aspect-ratio: 4001/3000) and (max-height: 450px) {
  .qd-question { margin: 8px 2px 10px; font-size: 18px; }
  .qd-ans { min-height: 44px; padding: 6px 10px; }
  .qd-card { padding: 12px; }
}