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

.shiryoku-kensa-root{
  --sk-navy:#1e3a5f; --sk-navy-dark:#16304d;
  --sk-gold:#d4af37; --sk-gold-dark:#b8941f;
  --sk-bg:#f7fbff; --sk-ink:#0f172a; --sk-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(--sk-ink);
  background:var(--sk-bg);
  border-radius:16px;
  overflow:hidden;
  position:relative;
  width:100%;
  /* 修正: 固定上限(min(80vh,720px))だと設置ページによって下に空白が残るため、
     画面の高さいっぱい(100dvh)に広げる方式に変更。100vhはフォールバック。 */
  height:100vh;
  height:100dvh;
}
.shiryoku-kensa-root *{box-sizing:border-box}

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

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

/* ===== ヘッダー ===== */
.shiryoku-kensa-header{
  background:var(--sk-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;
}
.shiryoku-kensa-title{
  display:flex;align-items:center;gap:8px;
  font-size:clamp(16px,3vw,22px);font-weight:700;white-space:nowrap;
}
.shiryoku-kensa-hint{
  font-size:12px;color:#cbd5e1;margin-left:4px;font-weight:400;display:none;
}
@media (min-width:640px){ .shiryoku-kensa-hint{display:inline} }
.shiryoku-kensa-status{
  background:rgba(255,255,255,.16);
  border-radius:999px;padding:6px 14px;
  font-size:13px;white-space:nowrap;
}

/* ===== ステージ ===== */
.shiryoku-kensa-stage{
  flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  position:relative;
}
.shiryoku-kensa-canvas{
  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:100%;max-height:100%;aspect-ratio:4/3;
}

/* ===== 右下フロートボタン ===== */
/* 修正: 方向こたえボタン（上下左右）を廃止し、操作4つだけの構成に変更 */
.shiryoku-kensa-fabs{
  position:absolute;
  right:16px;
  bottom:16px;
  z-index:50;
}

.shiryoku-kensa-fab{
  width:56px;height:56px;
  border:none;border-radius:50%;
  background:#fff;color:var(--sk-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;
}
.shiryoku-kensa-fab:active{transform:scale(.92)}
.shiryoku-kensa-fab:disabled{opacity:.35;cursor:default}
.shiryoku-kensa-fab:disabled:active{transform:none}
.shiryoku-kensa-fab.shiryoku-kensa-on{background:var(--sk-gold);color:var(--sk-navy-dark)}
.shiryoku-kensa-fab-icon{width:28px;height:28px;fill:currentColor;display:block}

/* 修正: 操作ボタン（全画面／つぎへ／モード①②）を縦一列に配置 */
.shiryoku-kensa-tools{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
}

@media (max-width:480px){
  .shiryoku-kensa-fab{width:48px;height:48px;font-size:18px}
  .shiryoku-kensa-fab-icon{width:22px;height:22px}
}