:root{
  --body:#203864; --card:#fff; --ink:#203864; --muted:#7f93c9;
  --pri:#203864; --pri-ink:#fff; --radius:14px; --shadow:0 6px 18px rgba(0,0,0,.18);
  --maxw:480px; --pad:16px; --gap:12px;
  --result-bg:#000; --result-ink:#e6ecff; --result-dim:#b8c4ff;
}
*{box-sizing:border-box}
html{touch-action:manipulation}
html,body{height:100%}
body{
  min-height:100svh; margin:0; display:flex; flex-direction:column;
  background:var(--body); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
}
.stage{
  flex:1 0 auto; max-width:var(--maxw); width:100%; margin:0 auto;
  display:flex; flex-direction:column; gap:8px; padding:10px 12px;
}
.site-footer{flex:0 0 auto; text-align:center; padding:10px 12px; padding-bottom:calc(10px + env(safe-area-inset-bottom,0))}
.credit{margin:0; color:#fff; opacity:.9; font-size:.9rem}
.is-hidden{display:none !important}

/* カード */
.card{
  background:var(--card); color:var(--ink);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:var(--pad); display:flex; flex-direction:column; gap:var(--gap);
}
.title{margin:0; font-size:1.2rem; font-weight:700; line-height:1.35}
.actions{display:flex; gap:12px; justify-content:center}
.btn{appearance:none;border:0;border-radius:10px;padding:12px 20px;font-weight:800;cursor:pointer;transition:transform .05s ease}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--pri); color:var(--pri-ink)}

/* 広告 */
.ad-slot{max-width:var(--maxw); width:100%; background:rgba(255,255,255,.12); color:#dbe5ff; text-align:center; border-radius:10px; padding:8px 6px}

/* 問題 */
#problemCard{position:relative; text-align:left}
.close-problem{position:absolute; top:8px; right:8px; width:32px; height:32px; border:0; border-radius:8px; background:transparent; color:var(--ink); font-size:1.1rem; cursor:pointer}
.meta{font-size:1rem; opacity:.95}
.equation{display:flex; gap:8px; align-items:baseline; font-size:2rem}
.equation .op{opacity:.85; font-weight:600}
#answer{display:inline-block; min-width:2.6ch; border-bottom:2px solid #dbe3f8; padding:0 2px 2px; font-weight:700}
.mark{margin-left:8px; font-size:1.8rem}
.mark.circle{color:#16a34a}.mark.cross{color:#dc2626}
.next{color:var(--muted); font-size:.95rem}

/* テンキー */
.keypad{display:grid; grid-template-columns:repeat(4,1fr); gap:3px; width:100%}
.key{background:#eef2fb; border:1px solid #dbe3f8; border-radius:12px; font-size:1.6rem; font-weight:600; padding:18px 0; cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.06); transition:transform .05s}
.key:active{transform:translateY(1px)}
.key.enter{background:var(--pri); color:var(--pri-ink); grid-row:span 3}
.key.danger{background:#fde2e2; border-color:#f9caca}
.key.spacer{visibility:hidden; border:none; background:transparent}

/* ========= 結果：上段（中央）＋下段（花火） ========= */
.result{
  background:var(--result-bg); color:var(--result-ink); box-shadow:none;
  display:flex; flex-direction:column; gap:14px;
  min-height: clamp(480px, 72vh, 680px);
}

/* 上段（タイトル左寄せ／他は中央） */
.result-top{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center;
}
.result .title{
  color:#fff; text-align:left; align-self:flex-start; /* タイトルだけ左寄せ */
}
.result-count{font-size:clamp(36px,10vw,64px); font-weight:900; color:#fff}
.result-datetime{color:var(--result-dim); font-size:.95rem}

/* ランク文字の輝き（A=金、B=銀、C=銅） */
.result-rank{font-weight:900; font-size:clamp(22px,8vw,36px); line-height:1.1}
.rank-A,.rank-B,.rank-C{
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:rankShimmer 2.5s linear infinite;
  text-shadow:0 0 6px rgba(255,255,255,.25), 0 0 12px rgba(255,255,255,.12);
}
.rank-A{ /* 金 */
  background-image:linear-gradient(90deg,#b8860b,#ffd700,#fff7a0,#b8860b);
  text-shadow:0 0 10px rgba(255,215,0,.45), 0 0 18px rgba(255,215,0,.25);
}
.rank-B{ /* 銀 */
  background-image:linear-gradient(90deg,#7f7f85,#d9d9df,#ffffff,#7f7f85);
  text-shadow:0 0 10px rgba(230,230,235,.45), 0 0 18px rgba(230,230,235,.25);
}
.rank-C{ /* 銅 */
  background-image:linear-gradient(90deg,#7a3e06,#cd7f32,#f1b37a,#7a3e06);
  text-shadow:0 0 10px rgba(205,127,50,.45), 0 0 18px rgba(205,127,50,.25);
}
@keyframes rankShimmer{
  0%{background-position-x:0%}
  100%{background-position-x:200%}
}

/* 下段（花火） */
.result-fw{
  position:relative; overflow:hidden; border-radius:12px;
  min-height: clamp(260px, 40vh, 420px);
  /* 枠は完全に非表示 */
  border:none; outline:none; box-shadow:none;
}
.fw-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  border-radius:inherit; display:block;
}

/* アクション */
.result-actions{display:flex; justify-content:center; gap:12px}
.result-actions .btn{background:#fff; color:#203864; border:1px solid rgba(32,56,100,.15)}

@media (min-width:768px){ :root{--maxw:720px} .key{font-size:1.8rem; padding:22px 0} }
@media (min-width:1024px){ :root{--maxw:900px} .key{font-size:2rem;  padding:24px 0} }

.ad1{
  width: 100%;
  height: 100px;
  background-color: #203864;
}

/* すでにある全体設定はそのまま活かす */
html{ touch-action: manipulation; }

/* 問題カードに触れている間の拡大/スクロールを全面禁止 */
#problemCard,
#problemCard *{
  touch-action: none;               /* ダブルタップ拡大/ピンチ/パン無効 */
  -webkit-user-select: none;        /* 長押しの選択防止 */
  user-select: none;
  -webkit-touch-callout: none;      /* iOSのコールアウト抑止 */
  -webkit-tap-highlight-color: transparent; /* タップ強調を消す（iOS） */
}

/* スクロール伝播を止める（カード上ドラッグで外側がスクロールしない） */
#problemCard{ overscroll-behavior: contain; }