/* ==========================================================
   聴力検査れんしゅう（1年生向け） - スタイル
   すべてのクラスに .choryoku-kensa- プレフィックスを付け、
   テーマ側のCSSと干渉しないようにスコープ化しています。
   ========================================================== */

.choryoku-kensa-root{
  --ck-navy:#1e3a5f; --ck-navy-dark:#16304d;
  --ck-gold:#d4af37; --ck-gold-dark:#b8941f;
  --ck-bg:#f7fbff; --ck-ink:#0f172a; --ck-muted:#64748b;

  box-sizing:border-box;
  font-family:"Noto Sans JP",system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color:var(--ck-ink);
  background:var(--ck-bg);
  border-radius:16px;
  overflow:hidden;
  position:relative;
  width:100%;
  /* 画面いっぱい(100dvh)に広げる。100vhはフォールバック。
     単独ページに置く前提のアプリでは、これにより下に空白が残らない。 */
  height:100vh;
  height:100dvh;
}
.choryoku-kensa-root *{box-sizing:border-box}

/* WordPress管理者バー（ログイン時に上部に出る帯）の高さ分を差し引く */
body.admin-bar .choryoku-kensa-root{
  height:calc(100vh - 32px);
  height:calc(100dvh - 32px);
}
@media screen and (max-width:782px){
  body.admin-bar .choryoku-kensa-root{
    height:calc(100vh - 46px);
    height:calc(100dvh - 46px);
  }
}

.choryoku-kensa-app{display:flex;flex-direction:column;height:100%}

/* ===== ヘッダー ===== */
.choryoku-kensa-header{
  background:var(--ck-navy);color:#fff;
  padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  z-index:10;
}
.choryoku-kensa-title{
  display:flex;align-items:center;gap:8px;
  font-size:clamp(16px,3vw,22px);font-weight:700;white-space:nowrap;
}
.choryoku-kensa-hint{
  font-size:12px;color:#cbd5e1;margin-left:4px;font-weight:400;display:none;
}
@media (min-width:640px){ .choryoku-kensa-hint{display:inline} }
.choryoku-kensa-status{
  background:rgba(255,255,255,.16);
  border-radius:999px;padding:6px 14px;
  font-size:13px;white-space:nowrap;
}

/* ===== ステージ ===== */
.choryoku-kensa-stage{
  flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  position:relative;
}
.choryoku-kensa-card{
  background:#fff;border-radius:16px;
  box-shadow:0 8px 24px rgba(2,6,23,.08), inset 0 0 0 2px #e5e7eb;
  width:100%;max-width:520px;height:100%;max-height:520px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  padding:32px;
}

.choryoku-kensa-indicator{
  width:min(200px, 34vw);
  height:min(200px, 34vw);
  border-radius:50%;
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  display:flex;align-items:center;justify-content:center;
  font-size:min(4rem, 12vw);
  color:#fff;
  box-shadow:0 8px 32px rgba(59,130,246,.3);
  transition:all .3s ease;
}
.choryoku-kensa-indicator.choryoku-kensa-playing{
  transform:scale(1.1);
  box-shadow:0 12px 48px rgba(59,130,246,.5);
  animation:ck-pulse 1s infinite;
}
@keyframes ck-pulse{
  0%,100%{transform:scale(1.1)}
  50%{transform:scale(1.2)}
}

.choryoku-kensa-instruction{
  font-size:clamp(1.05rem, 3vw, 1.5rem);
  color:var(--ck-muted);
  text-align:center;
  margin:0;
  font-weight:700;
}

/* ===== 右下フロートボタン（縦一列） ===== */
.choryoku-kensa-fabs{
  position:absolute;
  right:16px;
  bottom:16px;
  z-index:50;
}

.choryoku-kensa-tools{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
}

.choryoku-kensa-fab{
  width:56px;height:56px;
  border:none;border-radius:50%;
  background:#fff;color:var(--ck-navy);
  box-shadow:0 6px 16px rgba(2,6,23,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .12s ease, background .15s ease, color .15s ease, opacity .15s ease;
}
.choryoku-kensa-fab:active{transform:scale(.92)}
.choryoku-kensa-fab.choryoku-kensa-on{background:var(--ck-gold);color:var(--ck-navy-dark)}
.choryoku-kensa-fab-icon{width:26px;height:26px;fill:currentColor;display:block}

@media (max-width:480px){
  .choryoku-kensa-fab{width:48px;height:48px;font-size:18px}
  .choryoku-kensa-fab-icon{width:22px;height:22px}
  .choryoku-kensa-card{padding:20px;gap:20px}
}