/* =====================================================
   Space Adventure Quiz – quiz-warp.css
   プレフィックス: .qw-
   ===================================================== */

/* ── リセット・ルート ── */
.qw-root {
  position: relative;
  width: 100%;
  /* 画面全体を占有: WordPress テーマの余白を打ち消す */
  height: 100svh;
  overflow: hidden;
  /* 傾き演出時に端の白を隠すため背景色を統一 */
  background: #000 !important;
  background: #000;
  color: #fff;
  font-family: "BIZ UDPGothic", "Yu Gothic", system-ui, sans-serif;
  user-select: none;
  /* CSS 変数 */
  --qw-cyan:   #38d9ff;
  --qw-gold:   #facc15;
  --qw-red:    #fb7185;
  --qw-green:  #22c55e;
}
.qw-root *,
.qw-root *::before,
.qw-root *::after {
  box-sizing: border-box;
}
.qw-root button {
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}

/* ── 背景・canvas ── */
/* 宇宙船画像: 100% 100% で歪みなく画面全体に */
/* scale(1.08)で端の白を隠す */
.qw-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: 112% 112%;
  background-position: center center;
  background-repeat: no-repeat;
  /* 背景画像はJSでインラインstyleにセット（PHPでは設定しない） */
  /* ゆらぎで端が見えないよう少し大きく */
}

/* 星canvas: JSで窓の位置にぴったり配置 */
#qwWarp {
  position: absolute;
  z-index: 2;
  display: block;
  /* left/top/width/height/clip-path はJSで計算してstyleに書き込む */
}

/* ── グラスモーフィズム共通 ── */
.qw-glass {
  background: rgba(2, 6, 23, .65);
  border: 1px solid rgba(148, 227, 255, .28);
  backdrop-filter: blur(8px);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

/* ── HUD ── */
.qw-hud {
  position: absolute;
  z-index: 5;
  left:  clamp(10px, 2vw, 24px);
  right: clamp(10px, 2vw, 24px);
  top:   clamp(8px, 1.5vh, 18px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  pointer-events: none;
}
.qw-hud-status {
  justify-self: start;
  padding: 10px 14px;
  display: flex;
  gap: 12px;
  font-size: clamp(12px, 1.4vw, 19px);
  font-weight: 900;
}
.qw-hud-title {
  text-align: center;
  padding: 10px 20px;
  font-size: clamp(16px, 2vw, 28px);
  font-weight: 900;
  letter-spacing: .06em;
  text-shadow: 0 0 16px rgba(56, 217, 255, .9);
  border-color: rgba(250, 204, 21, .45);
}
.qw-hud-prog {
  justify-self: end;
  width: min(300px, 26vw);
  padding: 8px 12px;
}
.qw-prog-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 4px;
}
.qw-bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .24);
}
.qw-bar-in {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--qw-cyan), var(--qw-gold));
  box-shadow: 0 0 18px rgba(56, 217, 255, .7);
  transition: width .3s ease;
}
.qw-heart {
  color: var(--qw-red);
  letter-spacing: 2px;
}

/* ── メッセージ ── */
.qw-msg {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(.96);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transition: .25s;
  font-size: clamp(24px, 4vw, 58px);
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow: 0 0 18px rgba(56, 217, 255, .95), 0 5px 0 rgba(0, 0, 0, .8);
  white-space: nowrap;
}
.qw-msg.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.04);
}

/* ── 問題パネル ── */
.qw-q-panel {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: clamp(8px, 1.8vh, 20px);
  transform: translateX(-50%);
  width: min(980px, 94vw);
  display: none;
  background: rgba(255, 255, 255, .97);
  color: #102033;
  border-radius: 26px;
  padding: clamp(12px, 1.8vw, 20px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
  border: 4px solid rgba(56, 217, 255, .88);
}
.qw-q-panel.show {
  display: block;
  animation: qwPop .2s ease-out;
}
@keyframes qwPop {
  from { opacity: 0; transform: translateX(-50%) translateY(18px) scale(.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);   }
}
.qw-q-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-weight: 900;
  color: #475569;
}
.qw-qnum {
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: clamp(11px, 1.3vw, 15px);
}
.qw-timer {
  background: #fef3c7;
  color: #92400e;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: clamp(11px, 1.3vw, 15px);
  transition: background .3s, color .3s;
}
.qw-timer.urgent {
  background: #fee2e2;
  color: #991b1b;
  animation: qwTimerPulse .5s ease-in-out infinite;
}
@keyframes qwTimerPulse {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.07); }
}
.qw-q-text {
  font-size: clamp(24px, 3.8vw, 44px);
  font-weight: 900;
  text-align: center;
  margin: 6px 0 14px;
  line-height: 1.25;
  color: #0f172a;
  word-break: break-word;
}
.qw-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.8vw, 18px);
}
.qw-choice {
  min-height: clamp(60px, 10.5vh, 100px);
  border: 0;
  border-radius: 20px;
  color: #fff;
  font-size: clamp(18px, 3.2vw, 42px);
  overflow-wrap: break-word;
  word-break: break-word;
  padding: 6px 14px;
  line-height: 1.25;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .2), 0 16px 28px rgba(0, 0, 0, .18);
  transition: transform .08s, filter .15s;
}
.qw-choice:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .2);
}
.qw-choice:nth-child(1) { background: linear-gradient(180deg, #38bdf8, #2563eb); }
.qw-choice:nth-child(2) { background: linear-gradient(180deg, #fb923c, #ef4444); }
.qw-choice.correct { background: linear-gradient(180deg, #86efac, #16a34a) !important; }
.qw-choice.wrong   { background: linear-gradient(180deg, #fca5a5, #991b1b) !important; filter: grayscale(.2); }
.qw-hint {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}
.qw-hint kbd {
  background: #e2e8f0;
  color: #334155;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 10px;
  border: 1px solid #cbd5e1;
}

/* ── オーバーレイ共通 ── */
.qw-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 45%,
    rgba(15, 23, 42, .05),
    rgba(2, 6, 23, .85) 72%);
}
.qw-card {
  width: min(800px, 94vw);
  text-align: center;
  color: #eaf7ff;
  background: rgba(2, 6, 23, .80);
  border: 1px solid rgba(148, 227, 255, .3);
  border-radius: 32px;
  box-shadow: 0 24px 68px rgba(0, 0, 0, .55);
  backdrop-filter: blur(14px);
  padding: clamp(22px, 4vw, 42px);
}
.qw-card h1 {
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.08;
  margin: 0 0 10px;
  text-shadow: 0 0 18px rgba(56, 217, 255, .75);
}
.qw-card > p {
  font-size: clamp(14px, 1.8vw, 20px);
  line-height: 1.7;
  font-weight: 700;
  color: #cdefff;
  margin: 10px 0;
}

/* ── 教科選択グリッド ── */
.qw-subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: clamp(10px, 2vw, 18px);
  margin: 20px 0;
}
.qw-loading {
  color: #94a3b8;
  font-size: 14px;
  grid-column: 1 / -1;
  text-align: center;
}
.qw-subj-btn {
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 20px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  padding: clamp(14px, 2.5vw, 22px) 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: background .15s, transform .1s, border-color .15s;
}
.qw-subj-btn:hover {
  background: rgba(255, 255, 255, .16);
  transform: translateY(-3px);
}
.qw-subj-btn.selected {
  border-color: var(--qw-gold);
  background: rgba(250, 204, 21, .18);
  box-shadow: 0 0 18px rgba(250, 204, 21, .35);
}
.qw-subj-icon { display: none; }
.qw-subj-name { font-size: clamp(17px, 2.2vw, 24px); font-weight: 900; }
.qw-subj-count { font-size: 11px; opacity: .7; font-weight: 700; }

/* ── スタートボタン ── */
.qw-btn-start {
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  padding: 16px 42px;
  font-size: clamp(20px, 2.8vw, 34px);
  color: #231800;
  background: linear-gradient(180deg, #fde68a, #f59e0b);
  box-shadow: 0 9px 0 #b45309, 0 16px 30px rgba(0, 0, 0, .35);
}
.qw-btn-start:active {
  transform: translateY(6px);
  box-shadow: 0 3px 0 #b45309;
}
.qw-btn-start:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}

/* ── リザルト ── */
.qw-result-score {
  font-size: clamp(36px, 5.5vw, 76px);
  font-weight: 900;
  color: var(--qw-gold);
  text-shadow: 0 0 22px rgba(250, 204, 21, .7);
  margin: 10px 0;
}
.qw-result-detail {
  font-size: clamp(13px, 1.7vw, 19px);
  color: #94c8e8;
  margin-bottom: 5px;
}

/* ── ツールバー ── */
.qw-tools {
  position: absolute;
  z-index: 6;
  right: clamp(10px, 2vw, 24px);
  bottom: clamp(8px, 1.8vh, 20px);
  display: flex;
  gap: 8px;
}
.qw-tool-btn {
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(2, 6, 23, .62);
  color: #fff;
  border-radius: 999px;
  padding: 9px 13px;
  backdrop-filter: blur(8px);
  font-size: clamp(11px, 1.3vw, 14px);
}

/* ── アニメーション ── */
.qw-flash { animation: qwFlash .4s linear 2; }
@keyframes qwFlash {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.9) saturate(1.5); }
}
.qw-shake { animation: qwShake .42s linear; }
@keyframes qwShake {
  0%, 100% { transform: translateX(0);   }
  20%      { transform: translateX(-11px); }
  40%      { transform: translateX(9px);  }
  60%      { transform: translateX(-7px); }
  80%      { transform: translateX(6px);  }
}

/* ── レスポンシブ ── */
@media (max-width: 760px) {
  .qw-hud {
    grid-template-columns: 1fr;
    gap: 6px;
    top: 6px;
  }
  .qw-hud-title  { order: -1; padding: 6px 10px; }
  .qw-hud-status,
  .qw-hud-prog   { justify-self: stretch; width: auto; padding: 6px 10px; }
  .qw-hud-status { justify-content: center; flex-wrap: wrap; }
  .qw-q-panel    { bottom: 6px; padding: 8px; border-radius: 20px; }
  .qw-choices    { gap: 7px; }
  .qw-hint       { display: none; }
  .qw-subject-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── カウントダウン演出 ── */
.qw-countdown {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(2, 6, 23, .55);
}
.qw-countdown-num {
  font-size: clamp(100px, 22vw, 220px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 40px rgba(56,217,255,.9), 0 0 80px rgba(56,217,255,.5);
  animation: qwCdPop .85s ease-out forwards;
}
.qw-countdown-num.go {
  color: var(--qw-gold);
  text-shadow: 0 0 40px rgba(250,204,21,.9), 0 0 80px rgba(250,204,21,.5);
}
@keyframes qwCdPop {
  0%   { transform: scale(1.6); opacity: 0; }
  25%  { transform: scale(1.0); opacity: 1; }
  75%  { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(.4);  opacity: 0; }
}

/* ③ 方向演出: 星の放射中心オフセットはJSで処理、
      画面自体も微妙に傾く演出 */
/* drift-left/right はJS側のdriftX/Yで処理するためCSS animationは使用しない */
@keyframes qwDriftL {
  0%   { transform: scale(1.06) rotate(0deg)    translateX(0);     }
  20%  { transform: scale(1.06) rotate(-2.5deg) translateX(-10px); }
  100% { transform: scale(1.06) rotate(-2.5deg) translateX(-10px); }
}
@keyframes qwDriftR {
  0%   { transform: scale(1.06) rotate(0deg)   translateX(0);    }
  20%  { transform: scale(1.06) rotate(2.5deg) translateX(10px); }
  100% { transform: scale(1.06) rotate(2.5deg) translateX(10px); }
}

/* ── ゴール演出 ── */
.qw-goal {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}
.qw-goal-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.qw-goal-flash.on {
  opacity: 1;
}
.qw-goal-img {
  width: min(90vw, 85vh);
  height: min(90vw, 85vh);
  object-fit: cover;
  box-shadow: 0 0 80px rgba(255,255,180,.7), 0 0 160px rgba(255,255,100,.4);
  opacity: 0;
  transform: scale(.4);
  transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}
.qw-goal-img.show {
  opacity: 1;
  transform: scale(1);
}
.qw-goal-text {
  margin-top: 28px;
  font-size: clamp(28px, 5vw, 64px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 24px rgba(255,255,160,.9);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out .8s, transform 1s ease-out .8s;
  text-align: center;
  letter-spacing: .06em;
}
.qw-goal-text.show {
  opacity: 1;
  transform: translateY(0);
}

/* プログレスバー（エネルギーゲージ風）*/
.qw-bar-in {
  background: linear-gradient(90deg, #38d9ff, #facc15) !important;
}
/* エネルギー満タン時に金色に */
.qw-bar-in.full {
  background: linear-gradient(90deg, #facc15, #ff8c00, #facc15) !important;
  animation: qwEnergyFull .6s ease-in-out infinite alternate;
}
@keyframes qwEnergyFull {
  from { box-shadow: 0 0 12px rgba(250,204,21,.6); }
  to   { box-shadow: 0 0 28px rgba(255,140,0,.9);  }
}