/*全端末で同じ見た目にするためのスケール単位（390x844基準の1px = --u）*/
:root {
  --u: min(calc(100vw / 390), calc(100vh / 844), 1.3px);
}
@supports (height: 100dvh) {
  :root {
    --u: min(calc(100vw / 390), calc(100dvh / 844), 1.3px);
  }
}
html {
  font-size: calc(16 * var(--u));
}

/*これ、タッチスクロール用*/
html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* 共通スタイル */
* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f4f9;
  color: #333;
  display: flex;
  flex-direction: column;
  height: 100dvh;
}
body {
  background: #fff url("images/kabegami.png") no-repeat center / cover;
  background-attachment: fixed;
  background-size: auto 100%;
}

/*トップバー*/
#topbar {
  flex: 0 0 auto;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(14 * var(--u)) calc(20 * var(--u));
}
#topbar h1 {
  margin: 0;
  font-size: 1em;
  color: #333;
  font-weight: 600;
}

/* メインコンテンツ */
#main {
  flex: 1 1 auto;
  min-height: 0;
  padding: calc(6 * var(--u)) calc(16 * var(--u)); /* 8px → 6px 気持ち削る */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto; /* ← hidden から auto に変更（保険） */
  -webkit-overflow-scrolling: touch;
}

#progress {
  text-align: center;
  font-size: 0.95em;
  color: #888;
  margin: 0 0 calc(8 * var(--u));
}

/*スタンプ一覧カード*/
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(12 * var(--u)); /* 6px→4px */
  max-width: calc(400 * var(--u));
  width: 100%;
  margin: 0 auto;
}
.card {
  background: #fff;
  border-radius: calc(12 * var(--u));
  border: 1px solid #e0e0e0;
  padding: calc(16 * var(--u)); /* 8px→6px */
  text-align: center;
}
.stamp-icon {
  width: calc(56 * var(--u)); /* 36px→30px */
  height: calc(56 * var(--u));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto calc(10 * var(--u));
  overflow: hidden;
}
.stamp-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.stamp-icon.pending img {
  filter: grayscale(100%);
  opacity: 0.4;
}
.stamp-icon.cleared img {
  filter: grayscale(0%);
  opacity: 1;
}

.card-name {
  font-size: calc(14 * var(--u));
  font-weight: 600;
  margin: 0 0 calc(3 * var(--u));
}
.card-status {
  font-size: calc(12 * var(--u));
  margin: 0;
}
.card-status.cleared {
  color: #2e7d32;
}
.card-status.pending {
  color: #aaa;
}

.complete-msg {
  text-align: center;
  margin: calc(20 * var(--u)) auto 0;
  max-width: calc(400 * var(--u));
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: calc(10 * var(--u));
  padding: calc(14 * var(--u));
  font-size: 0.95em;
  color: #856404;
}

.actions {
  text-align: center;
  margin-top: calc(24 * var(--u));
}
.reset-btn {
  display: inline-block;
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  background: transparent;
  color: #999;
  border: 1px solid #ccc;
  border-radius: calc(8 * var(--u));
  font-size: 0.9em;
  cursor: pointer;
}

.footer {
  color: #aaa;
  font-size: 0.7em;
  text-align: center;
  margin: calc(2 * var(--u));
}

/*下部固定メニュー*/
#btm-ui {
  flex: 0 0 auto;
  display: flex;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  padding: calc(10 * var(--u)) 0
    max(calc(10 * var(--u)), env(safe-area-inset-bottom));
  box-shadow: 0 calc(-2 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.05);
}
.menu-item-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
  text-decoration: none;
  color: #333;
  font-size: calc(12 * var(--u));
  font-weight: bold;
}
.menu-item-nav .icon img {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
}

/*クイズページ共通：白い箱（中身が多ければ箱の中だけスクロール）*/
.quiz-box {
  max-width: calc(400 * var(--u));
  width: 100%;
  margin: calc(20 * var(--u)) auto;
  background: #ffffff;
  padding: calc(24 * var(--u)) calc(20 * var(--u));
  border-radius: calc(16 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.08);
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.illust {
  width: calc(150 * var(--u));
  height: calc(150 * var(--u));
  background-color: #b3d1e5;
  border-radius: 20%;
  margin: auto;
}
.illust img {
  border-radius: 20%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#main-s {
  text-align: center;
}

.quiz-choice-label {
  display: block;
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  margin-bottom: calc(8 * var(--u));
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: calc(8 * var(--u));
  cursor: pointer;
  font-size: calc(15 * var(--u));
}

.quiz-submit-btn {
  padding: calc(10 * var(--u)) calc(24 * var(--u));
  background: #4a90d9;
  color: #fff;
  border: none;
  border-radius: calc(8 * var(--u));
  font-size: 1em;
  cursor: pointer;
}

/*スキャナー専用スタイル*/
#wrapper {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: calc(400 * var(--u));
}
#canvas {
  display: block;
  width: 100%;
  border-radius: calc(12 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.2);
  background: #000;
}
#msg {
  margin-top: calc(15 * var(--u));
  font-size: 1.1em;
  color: #555;
}
.border-frame {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border: calc(2 * var(--u)) solid rgba(0, 255, 0, 0.5);
  box-sizing: border-box;
  border-radius: calc(10 * var(--u));
  pointer-events: none;
}