/* ひとり用ページ（100マス計算）の見た目。site.css を前提にする。 */

.lead-box{padding:34px 0 24px}
.lead-box h1{font-size:clamp(28px,7.2vw,34px);margin-bottom:16px}
.lead-box .lead{margin-bottom:24px}
.best-intro{font-size:20px;color:var(--sub);margin-top:14px;min-height:1.2em}

.assure{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.assure span{
  background:var(--green-soft);color:var(--green-deep);border-radius:999px;
  padding:11px 18px;font-size:20px;font-weight:700;
}

/* 遊ぶところ */
#play{background:var(--card);border:3px solid var(--line);border-radius:20px;padding:20px 18px}
.timer{display:flex;justify-content:space-between;align-items:baseline;font-size:20px;color:var(--sub)}
.timer b{font-size:28px;color:var(--ink);font-variant-numeric:tabular-nums}
.bar{height:16px;background:var(--chip);border-radius:99px;overflow:hidden;margin:10px 0 6px}
.bar i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .25s linear}
.bar i.low{background:var(--aka)}

#problem{
  font-size:clamp(48px,15vw,72px);font-weight:800;text-align:center;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;padding:16px 0 2px;line-height:1.25;
}
#answer{
  font-size:clamp(38px,12vw,56px);font-weight:800;text-align:center;color:var(--green);
  min-height:1.3em;font-variant-numeric:tabular-nums;line-height:1.3;
}
#answer.wrong{color:var(--aka)}

/* 数字ボタン: 48px以上・間隔10px以上 */
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.pad button{
  font-family:inherit;font-size:34px;font-weight:800;min-height:66px;padding:14px 0;
  border-radius:16px;background:var(--paper);border:3px solid var(--line);cursor:pointer;color:var(--ink);
}
.pad button:active{background:var(--green-soft);border-color:var(--green)}
.pad .zero{grid-column:2}
.pad .del{font-size:22px;color:var(--sub)}

/* 結果 */
.score{text-align:center;padding:14px 0}
.score .n{font-size:80px;font-weight:800;color:var(--green);line-height:1.1;font-variant-numeric:tabular-nums}
.score .u{font-size:21px;color:var(--sub)}
.score .msg{font-size:21px;margin-top:12px;font-weight:700;max-width:none}
.score .best{font-size:20px;color:var(--sub);margin-top:6px;max-width:none}

/* 家族への導線 */
.invite-box{background:var(--green-soft);border-radius:18px;padding:24px 20px}
.invite-box h2{margin-bottom:10px}
.invite-box p{font-size:20px;color:var(--sub);margin-bottom:18px}

/* 画面写真（本物のスクリーンショット。CSSで描いた偽物は置かない） */
figure{margin:18px 0 0}
figure img{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;
  border-radius:16px;border:2px solid var(--line);background:var(--card)}
figcaption{font-size:19px;color:var(--sub);margin-top:10px;text-align:center;line-height:1.7}

/* ほかの計算へのリンク */
.relnav{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.relnav a{
  background:var(--card);border:3px solid var(--line);border-radius:999px;
  padding:13px 20px;font-size:20px;font-weight:700;text-decoration:none;color:var(--ink);
  min-height:52px;display:flex;align-items:center;
}
.relnav a:hover{border-color:var(--green);color:var(--green)}