/* ===============================
   DBQ Theme Z - DragonBall-ish UI
=============================== */
.dbq-wrap{ max-width: 980px; margin: 0 auto; }

.dbq-card{
  border-radius: 22px;
  padding: 16px;
  color: rgba(255,255,255,.92);
  font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, sans-serif;

  background:
    radial-gradient(900px 520px at 18% 0%, rgba(255,170,0,.34), rgba(255,170,0,0) 55%),
    radial-gradient(900px 520px at 92% 10%, rgba(60,160,255,.28), rgba(60,160,255,0) 58%),
    linear-gradient(180deg, rgba(10,12,18,.98), rgba(7,9,14,.98));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 50px rgba(0,0,0,.42);
  position: relative;
  overflow: hidden;
}

/* subtle ?manga? dot + energy fog */
.dbq-card::before{
  content:"";
  position:absolute;
  inset:-20px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,220,140,.16), rgba(255,220,140,0) 48%),
    radial-gradient(circle at 80% 35%, rgba(140,220,255,.12), rgba(140,220,255,0) 55%),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.035) 0 1px,
      rgba(255,255,255,0) 1px 7px);
  opacity: .60;
  pointer-events:none;
}
.dbq-card > *{ position: relative; }

.dbq-hr{ height: 1px; background: rgba(255,255,255,.10); margin: 14px 0; }

.dbq-top{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  align-items:center;
  margin-bottom: 12px;
}

/* Pills */
.dbq-pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
}
.dbq-pillQuest{ background: rgba(255,255,255,.07); }
.dbq-pillHud{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.10);
}

.dbq-label{ font-size: 12px; opacity: .92; margin-bottom: 6px; }
.dbq-note{ font-size: 12px; opacity: .78; line-height: 1.55; }
.dbq-h2{ font-size: 18px; margin: 0 0 8px; font-weight: 1000; }

/* ===============================
   Game Header (Title)
=============================== */
.dbq-gameHeader{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;

  margin-bottom: 12px;
  padding: 14px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(255,170,0,.34), rgba(255,95,0,.20), rgba(60,160,255,.18)),
    rgba(255,255,255,.04);
  box-shadow: 0 18px 34px rgba(0,0,0,.34);
  position: relative;
  overflow: hidden;
}
.dbq-gameHeader::after{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,240,180,.38), rgba(255,240,180,0) 56%),
    radial-gradient(circle at 85% 30%, rgba(140,220,255,.22), rgba(140,220,255,0) 58%);
  transform: rotate(6deg);
  pointer-events:none;
}
.dbq-gameHeaderInner{
  position: relative;
  display:flex;
  align-items:center;
  gap: 12px;
}
.dbq-dbBall{
  width: 50px; height: 50px; border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.60), rgba(255,255,255,0) 38%),
    radial-gradient(circle at 60% 70%, rgba(0,0,0,.14), rgba(0,0,0,0) 45%),
    linear-gradient(180deg, rgba(255,140,0,.98), rgba(255,85,0,.94));
  border: 2px solid rgba(255,255,255,.22);
  box-shadow: 0 14px 26px rgba(0,0,0,.28);
  display:grid;
  place-items:center;
  position: relative;
}
.dbq-dbBall::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  opacity:.7;
}
.dbq-dbStar{
  font-size: 18px;
  font-weight: 1000;
  color: rgba(150,0,0,.95);
  text-shadow: 0 2px 0 rgba(255,255,255,.25);
}
.dbq-gameTitleArea{ display:flex; flex-direction: column; gap: 4px; min-width: 0; }
.dbq-gameTitle{
  display:block !important;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: .02em;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.dbq-gameSub{ font-size: 12px; opacity: .84; }
.dbq-gameBadge{
  margin-left:auto;
  width: 42px; height: 42px;
  border-radius: 14px;
  display:grid; place-items:center;
  font-weight: 1000;
  font-size: 16px;
  letter-spacing: .04em;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 22px rgba(0,0,0,.22);
}

/* ===============================
   Summary
=============================== */
.dbq-hero{
  margin-bottom:14px;
  padding:12px 12px;
  border-radius:18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.dbq-heroTitle{ font-weight:1000; font-size:14px; margin-bottom: 6px; }
.dbq-heroMeta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size:13px;
  color:rgba(255,255,255,.88);
}
.dbq-heroTotal{ font-weight:1000; }
.dbq-heroNote{ margin-top:6px; font-size:12px; color:rgba(255,255,255,.66); }

/* ===============================
   Mode buttons - Capsule style
=============================== */
.dbq-modeGrid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 780px){ .dbq-modeGrid{ grid-template-columns: 1fr; } }

.dbq-modeBtn{
  padding: 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
  transition: transform .10s ease, box-shadow .12s ease, filter .12s ease;

  background:
    radial-gradient(circle at 25% 15%, rgba(255,220,140,.18), rgba(255,220,140,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
  position: relative;
  overflow: hidden;
}
.dbq-modeBtn::after{
  content:"";
  position:absolute;
  inset:-50px;
  background: radial-gradient(circle at 30% 20%, rgba(60,160,255,.12), rgba(60,160,255,0) 55%);
  transform: rotate(8deg);
  opacity:.8;
  pointer-events:none;
}
.dbq-modeBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(0,0,0,.34);
  filter: brightness(1.06);
}
.dbq-modeTitle{ font-weight: 1000; font-size: 14px; }
.dbq-modeDesc{ margin-top: 6px; font-size: 12px; opacity: .82; }

/* ===============================
   Quiz layout
=============================== */
.dbq-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 14px; }
@media (max-width: 900px){ .dbq-grid{ grid-template-columns: 1fr; } }

.dbq-imgBox{
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 10%, rgba(60,160,255,.18), rgba(60,160,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  padding: 12px;
  min-height: 280px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 12px 26px rgba(0,0,0,.26);
}
.dbq-scouterBar{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}
.dbq-scouterDot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(120,255,170,.92);
  box-shadow: 0 0 18px rgba(120,255,170,.55);
}
.dbq-scouterTxt{
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .12em;
  opacity: .9;
}

.dbq-imgBox img{
  width: 100%;
  max-height: 340px;
  object-fit: contain;
  display:block;
  border-radius: 14px;
  background: rgba(0,0,0,.14);
}
.dbq-imgBox > div:last-child{
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .02em;
}

/* ===============================
   Inputs / buttons
=============================== */
.dbq-controls{ display:flex; flex-direction: column; gap: 10px; }

.dbq-input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.96);
  outline: none;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}
.dbq-input:focus{
  border-color: rgba(255,185,90,.68);
  box-shadow: 0 0 0 3px rgba(255,185,90,.14), 0 10px 20px rgba(0,0,0,.18);
}
.dbq-input::placeholder{ color: rgba(255,255,255,.55); }

.dbq-row{ display:flex; gap: 8px; flex-wrap: wrap; }

.dbq-btn{
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.96);
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 1000;
  letter-spacing: .01em;
  box-shadow: 0 12px 22px rgba(0,0,0,.22);
  transition: transform .08s ease, filter .12s ease;
  position: relative;
  overflow:hidden;
}
.dbq-btn:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.dbq-btn:active{ transform: translateY(0px); }
.dbq-btn:disabled{ opacity: .45; cursor: not-allowed; box-shadow: none; }

.dbq-btnMain{
  background: linear-gradient(180deg, rgba(255,170,0,.98), rgba(255,95,0,.94));
  border-color: rgba(255,255,255,.18);
}
.dbq-btnMain::after{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), rgba(255,255,255,0) 58%);
  transform: rotate(8deg);
  opacity:.7;
  pointer-events:none;
}
.dbq-btnSub{ background: rgba(0,0,0,.16); }

/* ===============================
   Messages / choices
=============================== */
.dbq-msg{ min-height: 22px; font-size: 13px; font-weight: 900; }
.dbq-msg.ok{ color: rgba(140,255,190,.95); }
.dbq-msg.ng{ color: rgba(255,150,150,.95); }

.dbq-choices{ display:none; gap: 8px; flex-wrap: wrap; }
.dbq-choices.show{ display:flex; }
.dbq-choiceBtn{ flex: 1 1 45%; }

/* ===============================
   Result
=============================== */
.dbq-resultText{ font-size: 14px; line-height: 1.6; }

/* ===============================
   Ranking (tabs)
=============================== */
.dbq-rankHeader{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.dbq-rankTitle{ font-weight: 1000; font-size: 16px; }
.dbq-rankSub{ font-size: 12px; opacity: .72; }

.dbq-rankTabs{ display:flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.dbq-rankTab{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.12);
  color: rgba(255,255,255,.94);
  cursor: pointer;
  font-weight: 1000;
  font-size: 12px;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}
.dbq-rankTab.is-active{
  background: linear-gradient(180deg, rgba(60,160,255,.24), rgba(60,160,255,.10));
  border-color: rgba(60,160,255,.35);
}
.dbq-liveRankBox{
  border-radius: 18px;
  padding: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
}

.dbq-rank table{ width:100%; border-collapse: collapse; }
.dbq-rank th, .dbq-rank td{
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  font-size: 13px;
}
.dbq-col-name{ color: rgba(255,255,255,.96); font-weight: 900; }
.dbq-col-score{ text-align:right; font-weight: 1000; }

.dbq-crown{ margin-left: 6px; }
.dbq-glow{ animation: dbqGlow 1.2s ease-in-out infinite alternate; }
@keyframes dbqGlow{
  from{ background: rgba(255,230,120,.06); }
  to{ background: rgba(255,230,120,.16); }
}

/* ===============================
   ? KI (Aura) effect ? ???
=============================== */
.dbq-aura{
  position: absolute;
  inset: -20px;
  border-radius: 26px;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.dbq-aura.is-on{
  opacity: 1;
  animation: dbqAuraPulse 780ms ease-out forwards;
}

/* blue/orange mixed ?ki? */
.dbq-aura::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 26px;
  background:
    radial-gradient(circle at 40% 30%, rgba(120,210,255,.38), rgba(120,210,255,0) 55%),
    radial-gradient(circle at 65% 60%, rgba(255,200,120,.30), rgba(255,200,120,0) 58%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), rgba(255,255,255,0) 62%);
  filter: blur(1px);
}

/* ?flame spikes? ring */
.dbq-aura::after{
  content:"";
  position:absolute;
  inset: 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 0 24px rgba(120,210,255,.35),
    0 0 40px rgba(255,200,120,.22);
  background:
    conic-gradient(from 0deg,
      rgba(120,210,255,.0),
      rgba(120,210,255,.22),
      rgba(255,200,120,.18),
      rgba(120,210,255,.22),
      rgba(120,210,255,.0));
  opacity: .8;
  mask: radial-gradient(circle, transparent 52%, #000 60%);
}

@keyframes dbqAuraPulse{
  0%   { transform: scale(.98); opacity: .0; }
  20%  { transform: scale(1.00); opacity: 1; }
  70%  { transform: scale(1.01); opacity: .85; }
  100% { transform: scale(1.02); opacity: 0; }
}

/* ?shake? tiny feedback */
.dbq-card.dbq-hit{
  animation: dbqHit 180ms ease-out;
}
@keyframes dbqHit{
  0%{ transform: translateX(0); }
  35%{ transform: translateX(-2px); }
  70%{ transform: translateX(2px); }
  100%{ transform: translateX(0); }
}