/* style.css - 全文 */
/* ベーシックリセットとレスポンシブ基盤 */
:root{
  --brand-blue: #1a73e8;
  --accent-1: #ff6b6b;
  --accent-2: #34c759;
  --accent-3: #ffcc00;
  --accent-4: #7c4dff;
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --card-radius: 10px;
  --max-width: 1100px;
  --gap: 12px;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Roboto, system-ui, -apple-system, "Yu Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: light;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background: linear-gradient(180deg,#fbfdff,#f7fbff);
  color:var(--text);
  line-height:1.4;
  padding:20px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

/* 中央コンテナ */
.container{
  width:100%;
  max-width:var(--max-width);
  background:var(--bg);
  border-radius:16px;
  box-shadow:0 6px 20px rgba(15,23,42,0.08);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* レスポンシブ: スマホ横向きで左右いっぱいに見えるように */
@media (orientation: landscape) and (max-width: 900px){
  .container{
    width:100vw;
    height:100vh;
    border-radius:0;
    padding:14px;
    justify-content:flex-start;
  }
}

/* ヘッダーとタイトル */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.title{
  display:flex;
  flex-direction:column;
}
h1{
  font-size:1.5rem;
  color:var(--brand-blue);
  margin-bottom:6px;
}
.tagline{
  font-size:0.9rem;
  color:var(--muted);
}

/* シェアボタン群 */
.share-row{
  display:flex;
  gap:8px;
  align-items:center;
}
.share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  width:40px;
  border-radius:8px;
  border:none;
  color:white;
  cursor:pointer;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
}
.share-x{background:#1da1f2}
.share-fb{background:#1877f2}
.share-line{background:#00c300}
.share-mail{background:#ff7043}

/* メイン問題ブロック */
.card{
  background:linear-gradient(180deg,#ffffff,#fbfbff);
  padding:14px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}

/* 問題表示 */
.problem{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:1.6rem;
  font-weight:700;
}
.slot{
  min-width:56px;
  min-height:56px;
  padding:8px 12px;
  border-radius:10px;
  background:linear-gradient(180deg,#f6f9ff,#ffffff);
  box-shadow:0 3px 8px rgba(15,23,42,0.06), inset 0 -1px 0 rgba(0,0,0,0.02);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  color:var(--brand-blue);
}

/* 等号・掛け記号 */
.symbol{font-size:1.4rem;color:var(--muted)}

/* 回答表示 */
.answer-area{
  display:flex;
  gap:10px;
  align-items:center;
  width:100%;
  justify-content:center;
  flex-wrap:wrap;
}
.answer-box{
  min-width:140px;
  padding:10px 14px;
  border-radius:10px;
  background:#f3f4f6;
  text-align:center;
  font-size:1.6rem;
  font-weight:700;
  color:#0f172a;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02);
}

/* フィードバック */
.feedback{
  font-size:1.8rem;
  font-weight:800;
  margin-top:6px;
  min-height:36px;
  transition:all .18s ease;
}
.feedback.correct{color:var(--accent-2)}
.feedback.wrong{color:var(--accent-1)}

/* キーパッド */
.keypad{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  width:100%;
  max-width:520px;
}
.keypad button{
  height:56px;
  border-radius:10px;
  border:none;
  font-size:1.2rem;
  font-weight:700;
  background:linear-gradient(180deg,#ffffff,#f3f6ff);
  box-shadow:0 6px 10px rgba(11,20,55,0.06);
  cursor:pointer;
  color:var(--brand-blue);
}
.keypad button[data-value="0"]{grid-column:1 / span 3}
.btn-submit{background:var(--accent-2); color:white}
.btn-clear{background:#f3f4f6; color:var(--muted)}
.btn-del{background:#ffd6d6; color:var(--accent-1)}

/* スコア */
.score-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
}
.score{
  font-size:1rem;
  color:var(--muted);
}
.score strong{color:var(--brand-blue); font-size:1.2rem;}

/* 下部テキスト（SEO向けの長い説明） */
.long-text{
  font-size:0.95rem;
  color:#111827;
  line-height:1.8;
  padding:12px;
}
.long-text h2, .long-text h3{color:var(--brand-blue); margin:10px 0}
.long-text p{margin:8px 0}

/* リンクと関連リンク */
.links{display:flex;flex-direction:column;gap:6px}
.links a{color:var(--brand-blue); text-decoration:underline; font-weight:600}

/* フッターのナビ */
.footer{
  display:flex;
  gap:12px;
  margin-top:8px;
  flex-wrap:wrap;
}
.footer a{color:var(--brand-blue); text-decoration:underline;}

/* 小さい画面調整 */
@media (max-width:600px){
  .slot{min-width:48px; min-height:48px; font-size:1.1rem}
  .answer-box{min-width:120px; font-size:1.2rem}
  .keypad button{height:52px}
  h1{font-size:1.2rem}
}