:root{
  --bg:#FFF7F0;
  --radius:12px;
  --card-h:16vh;         /* ← 18vh → 16vh にだけ圧縮 */
  --header-font:1.25rem;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  overflow:hidden;
}

/* ───── ヘッダー ───── */
header{
  display:flex;align-items:center;gap:8px;
  padding:12px;
}
.logo{width:32px;height:32px;border-radius:8px;object-fit:cover;}
.appName{font-size:var(--header-font);font-weight:700;}

/* ───── レイアウト ───── */
main{
  /* 上はそのまま、下だけ余裕を 8vh 追加 */
  padding:4vh 4vw 8vh;
  height:calc(100vh - 60px);
  display:flex;flex-direction:column;justify-content:space-between;
}

/* ───── 総合評価 ───── */
#rankTitle{
  text-align:center;
  font-weight:700;
  margin:8px 0 2px;     /* タイトル回りをキュッと詰める */
}
#rankCard{
  border:4px solid #000;
  border-radius:var(--radius);
  background:#fff;
  height:var(--card-h);
  display:flex;align-items:center;justify-content:center;
}
#rankLetter{font-size:5.6rem;font-weight:700;}
.rank-F{color:#111}.rank-E{color:#555}.rank-D{color:#2F80ED}.rank-C{color:#27AE60}
.rank-B{color:#E2B93B}.rank-A{color:#F2994A}.rank-S{color:#C69900}

/* ───── 3 指数バー ───── */
.bars{display:flex;flex-direction:column;gap:4vh;}  /* 元の間隔 4vh を維持 */
.barWrap{font-size:0.9rem;}
.barTitle{
  display:block;
  font-size:var(--header-font);
  font-weight:700;
  margin-bottom:4px;
}
.bar{
  width:80vw;height:6px;background:#e0e0e0;border-radius:3px;
  margin:0 auto;position:relative;
}
.dot{
  position:absolute;top:-6px;width:18px;height:18px;border-radius:50%;
  background:#E53935;          /* 赤い丸 */
  transform:translateX(-50%);
}

/* ───── 投票ボタン ───── */
#voteArea{display:flex;gap:20px;justify-content:center;}
.vote{padding:12px 20px;border:none;color:#fff;font-size:1rem;cursor:pointer;}
.round{
  border-radius:50%;
  width:80px;height:80px;      /* ボタンサイズはそのまま */
  display:flex;align-items:center;justify-content:center;
  background:#2F80ED;
}
.vote.voted{background:#27AE60;}
#thanks{text-align:center;font-size:0.95rem;color:#555;margin-top:8px;}

/* ───── 高さ 700px 未満の端末向け微調整 ───── */
@media (max-height:700px){
  :root{ --card-h:15vh; }
  body{font-size:90%;}
  #rankLetter{font-size:5.2rem;}
}