/* ============================================================
   割合感覚トレーニング v3（ピタッとストップ！）
   固定ヘッダー＋全画面メインエリア＋見た目選択モーダル（風船/ゲージメーター/ビーカー）
   全て .rps-root 配下にスコープ
   ============================================================ */

.rps-root, .rps-root *{ margin:0; padding:0; box-sizing:border-box; }

.rps-root{
  --rps-main:#1e3a5f; --rps-main-light:#2d5a8f; --rps-main-dark:#0f1e3a;
  --rps-accent:#d4af37; --rps-accent-light:#f4cf5f; --rps-accent-dark:#b8941f;
  --rps-base:#FFFFFF; --rps-base-light:#FAFAFA; --rps-base-dark:#F5F5F5;
  --rps-text:#2C3E50; --rps-muted:#7F8C8D; --rps-border:#E8E8E8;
  --rps-liquid:#2d8fd8; --rps-liquid-light:#5fb3f0;
  --rps-shadow: 0 4px 20px rgba(30,58,95,.10);

  font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  color:var(--rps-text);
  background:#fff;
  min-height:100vh;
  overflow:hidden;
  position:relative;
  display:flex; flex-direction:column;
  /* 修正: テーマの本文カラム幅に閉じ込められないよう画面全幅に */
  width:100vw;
  margin-left:calc(50% - 50vw);
}

/* ---------- 固定ヘッダー ---------- */
.rps-root .rps-header{
  flex-shrink:0;
  display:flex; align-items:center; gap:16px;
  padding:12px 20px;
  background:var(--rps-main);
  color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.rps-root .rps-title-bar{ font-size:17px; font-weight:900; letter-spacing:.02em; white-space:nowrap; }
.rps-root .rps-title-bar span{ color:var(--rps-accent); }
.rps-root .rps-instruction{ flex:1; text-align:right; font-size:13px; font-weight:600; opacity:.9; white-space:nowrap; }
.rps-root .rps-status{ display:flex; gap:8px; flex-shrink:0; }
.rps-root .rps-stat{
  display:flex; flex-direction:column; align-items:center;
  background:rgba(255,255,255,.12);
  border-radius:12px; padding:4px 14px; min-width:60px;
}
.rps-root .rps-stat-label{ font-size:10px; font-weight:700; opacity:.8; letter-spacing:.04em; }
.rps-root .rps-stat-value{ font-size:16px; font-weight:900; line-height:1.3; white-space:nowrap; }
.rps-root .rps-stat-target{ background:rgba(212,175,55,.28); }
.rps-root .rps-stat-target .rps-stat-value{ color:var(--rps-accent); }

/* ---------- 全画面メインエリア ---------- */
.rps-root .rps-main{
  flex:1; min-height:0;
  display:flex; align-items:stretch; justify-content:center; /* 修正: centerだとheight伝播が壊れるためstretch */
  padding:20px;
}
.rps-root .rps-main-card{
  background:#fff;
  border-radius:16px;
  border:2px solid var(--rps-border);
  box-shadow:var(--rps-shadow);
  flex:1; /* 修正: height:100%ではなくflex:1で高さを確保 */
  max-width:640px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative;
  padding:24px;
}

.rps-root .rps-visual-wrap{
  position:relative;
  width:min(70vw, 380px);
  height:min(48vh, 340px);
  display:flex; align-items:center; justify-content:center;
}
.rps-root .rps-visual-mode{ display:none; align-items:center; justify-content:center; position:relative; width:100%; height:100%; }
.rps-root .rps-visual-mode.rps-active{ display:flex; }

/* ---------- 風船（空気を抜いてしぼませるタイプ） ---------- */
.rps-root .rps-balloon-string{
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  width:2px; height:36px;
  background:var(--rps-muted);
}
.rps-root .rps-balloon-knot{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  width:0; height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-top:14px solid var(--rps-liquid);
  z-index:2;
}
.rps-root .rps-balloon{
  position:relative;
  width:230px; height:270px;
  background:radial-gradient(circle at 34% 30%, var(--rps-liquid-light) 0%, var(--rps-liquid) 68%);
  border-radius:50% 50% 50% 50% / 56% 56% 44% 44%;
  box-shadow:
    inset -14px -18px 30px rgba(0,0,0,.14),
    inset 14px 14px 24px rgba(255,255,255,.35);
  transform-origin:center bottom;
  transform:scale(1);
  transition:transform .05s linear;
}

/* ---------- ゲージメーター ---------- */
.rps-root .rps-gauge-svg{ width:min(100%, 320px); height:auto; }

/* ---------- ビーカー ---------- */
.rps-root .rps-beaker{
  position:relative;
  width:100%; height:100%;
  background:var(--rps-base-light);
  border:6px solid var(--rps-main);
  border-radius:10px 10px 32px 32px;
  overflow:hidden;
  box-shadow:inset 0 4px 10px rgba(0,0,0,.08);
}
.rps-root .rps-beaker-liquid{
  position:absolute; left:0; right:0; bottom:0;
  height:0%;
  background:linear-gradient(180deg, var(--rps-liquid-light) 0%, var(--rps-liquid) 100%);
  transition:height .05s linear;
  border-radius:0 0 26px 26px;
}
.rps-root .rps-beaker-liquid::before{
  content:'';
  position:absolute; top:-6px; left:0; right:0; height:12px;
  background:radial-gradient(ellipse at center, var(--rps-liquid-light) 0%, transparent 70%);
  opacity:.8;
}

.rps-root .rps-prompt-text{
  margin-top:20px;
  font-size:15px; font-weight:800; color:var(--rps-main);
  text-align:center;
  min-height:1.4em;
}

.rps-root .rps-action-row{ margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.rps-root .rps-action-main{
  min-width:160px; height:56px; padding:0 32px; border-radius:50px;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:900;
  font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  background:var(--rps-accent); color:var(--rps-main-dark);
  box-shadow:0 4px 14px rgba(0,0,0,.2);
  transition:transform .15s, box-shadow .15s, background .15s;
}
.rps-root .rps-action-main:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.28); }
.rps-root .rps-action-main:active:not(:disabled){ transform:translateY(0); }
.rps-root .rps-action-main:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.rps-root .rps-action-main.rps-stopping{ background:#ef4444; color:#fff; }

.rps-root .rps-change-look-link{
  background:none; border:none; cursor:pointer;
  font-size:11px; color:var(--rps-muted); font-weight:700;
  text-decoration:underline;
}

/* ---------- 結果・お題ポップアップ ---------- */
.rps-root .rps-result-popup, .rps-root .rps-target-popup{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.7);
  background:rgba(15,23,42,.9);
  color:#fff;
  padding:22px 34px;
  border-radius:20px;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
  z-index:40;
  min-width:220px;
}
.rps-root .rps-result-popup.rps-show, .rps-root .rps-target-popup.rps-show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.rps-root .rps-rp-judgment{ font-size:22px; font-weight:900; margin-bottom:6px; }
.rps-root .rps-rp-judgment.rps-ok{ color:#4ade80; }
.rps-root .rps-rp-judgment.rps-warn{ color:#fbbf24; }
.rps-root .rps-rp-judgment.rps-bad{ color:#f87171; }
.rps-root .rps-rp-detail{ font-size:13px; font-weight:700; opacity:.9; line-height:1.7; }
.rps-root .rps-rp-score{ font-size:34px; font-weight:900; color:var(--rps-accent-light); margin-top:8px; }
.rps-root .rps-target-popup{ z-index:35; padding:18px 36px; }
.rps-root .rps-tp-label{ font-size:12px; font-weight:700; opacity:.75; letter-spacing:.05em; margin-bottom:4px; }
.rps-root .rps-tp-value{ font-size:48px; font-weight:900; color:var(--rps-accent); line-height:1; }

/* ---------- 見た目選択モーダル ---------- */
.rps-root .rps-modal-overlay{
  position:fixed; inset:0;
  background:rgba(15,30,58,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:200;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .2s;
  backdrop-filter:blur(4px);
}
.rps-root .rps-modal-overlay.rps-show{ opacity:1; pointer-events:auto; }
.rps-root .rps-modal{
  background:#fff;
  border-radius:20px;
  padding:30px 32px;
  width:min(520px, 92vw);
  max-height:90vh; overflow:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.3);
  text-align:center;
}
.rps-root .rps-modal-badge{
  display:inline-block;
  background:var(--rps-accent); color:var(--rps-main-dark);
  font-size:11px; font-weight:900;
  padding:4px 14px; border-radius:999px;
  margin-bottom:12px;
}
.rps-root .rps-modal-title{ font-size:20px; font-weight:900; color:var(--rps-main); margin-bottom:6px; }
.rps-root .rps-modal-subtitle{ font-size:12px; color:var(--rps-muted); font-weight:700; margin-bottom:20px; }

.rps-root .rps-mode-gallery{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  margin-bottom:24px;
}
.rps-root .rps-mode-card{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 8px;
  border:2px solid var(--rps-border); border-radius:14px;
  background:#fff; cursor:pointer;
  transition:all .18s ease;
}
.rps-root .rps-mode-card:hover{ border-color:var(--rps-accent); background:#fffcf5; transform:translateY(-2px); }
.rps-root .rps-mode-card.rps-selected{
  border-color:var(--rps-main); background:var(--rps-main);
  box-shadow:0 6px 16px rgba(30,58,95,.28);
}
.rps-root .rps-mode-card-icon{ font-size:32px; }

/* 修正: 設定モーダルのアイコンを実際の見た目のミニチュア(静止)に変更 */
.rps-root .rps-preview{
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}

/* 風船プレビュー */
.rps-root .rps-preview-balloon{
  width:38px; height:44px;
  background:radial-gradient(circle at 34% 30%, var(--rps-liquid-light) 0%, var(--rps-liquid) 68%);
  border-radius:50% 50% 50% 50% / 56% 56% 44% 44%;
  box-shadow:
    inset -4px -5px 8px rgba(0,0,0,.14),
    inset 4px 4px 7px rgba(255,255,255,.35);
  position:relative;
}
.rps-root .rps-preview-balloon::after{
  content:'';
  position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
  width:1.5px; height:9px;
  background:var(--rps-muted);
}

/* ゲージメータープレビュー */
.rps-root .rps-preview-gauge{ width:56px; height:38px; }

/* ビーカープレビュー */
.rps-root .rps-preview-beaker{
  width:34px; height:44px;
  background:var(--rps-base-light);
  border:3px solid var(--rps-main);
  border-radius:5px 5px 12px 12px;
  overflow:hidden;
  position:relative;
}
.rps-root .rps-preview-beaker-liquid{
  position:absolute; left:0; right:0; bottom:0; height:45%;
  background:linear-gradient(180deg, var(--rps-liquid-light) 0%, var(--rps-liquid) 100%);
}
.rps-root .rps-mode-card-label{ font-size:12px; font-weight:800; color:var(--rps-text); }
.rps-root .rps-mode-card.rps-selected .rps-mode-card-label{ color:var(--rps-accent); }

.rps-root .rps-modal-start-btn{
  width:100%; padding:14px; border:none; border-radius:50px;
  font-size:15px; font-weight:900; cursor:pointer;
  font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  background:linear-gradient(135deg, var(--rps-accent-light) 0%, var(--rps-accent) 100%);
  color:var(--rps-main-dark);
  box-shadow:0 6px 18px rgba(212,175,55,.35);
  transition:all .2s;
}
.rps-root .rps-modal-start-btn:hover:not(:disabled){
  transform:translateY(-2px);
  background:linear-gradient(135deg, var(--rps-accent) 0%, var(--rps-accent-dark) 100%);
}
.rps-root .rps-modal-start-btn:disabled{ background:#cfd8dc; color:#90a4ae; cursor:not-allowed; box-shadow:none; }

@media (max-width:640px){
  .rps-root .rps-instruction{ display:none; }
  .rps-root .rps-title-bar{ font-size:15px; }
  .rps-root .rps-visual-wrap{ width:min(85vw, 300px); height:min(42vh, 300px); }
  .rps-root .rps-balloon{ width:190px; height:220px; }
}