:root{
  --ink:#33261a;         /* 文字色 */
  --gold:#a87337;        /* 縁色系 */
  --paper:#fff8e8;       /* 予備背景 */
  --page-max: 620px;     /* 本体最大幅（スマホ中心） */
  --wheel-max: 520px;    /* ルーレット最大サイズ */
  --pad: clamp(8px, 2.8vw, 16px);
  --heading-w: 100%;  /* 見出しの横幅 */
  --bottom-w: 70%;  /* 結果枠の横幅 */

  /* safe-area を変数化（古い端末でも 0px フォールバック） */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  
  /* ★ここが新規/変更：JSから供給される実表示高を優先し、なければ100svh */
  --vh: var(--real-vh, 100svh);

  /* 画面高ベースの設計値 */
  --h-header: clamp(84px, 18svh, 140px);
  --bottom-min: clamp(140px, 26svh, 200px);

  /* ★残り高さ計算を --vh 起点に変更 */
  --app-h: calc(var(--vh-unified) - var(--safe-t) - var(--safe-b));

  /* ホイールは、幅/上限/残り高さの最小値 */
  --wheel-max: 520px;
  --wheel-size: min(
    78vw,
    var(--wheel-max),
    calc(var(--app-h) - var(--h-header) - var(--bottom-min))
  );
}

*{ 
  box-sizing:border-box 
}
html,body{ 
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
img{ 
  max-width:100%; 
  height:auto; 
  display:block 
}

body{
  margin:0; 
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Arial,sans-serif;
  --tile: 20px;      /* マス目の一辺 */
  --red:  #e60012;
  --white:#ffffff;
  background:
    repeating-conic-gradient(
      var(--red) 0 90deg,
      var(--white) 0 180deg
    );
  background-size: calc(var(--tile) * 2) calc(var(--tile) * 2);
  overflow:hidden; /* スクロール無し */
}

/* ===== アプリ全体：上中下の3行を“可変”で構成 ===== */
.app{
  height: var(--app-h);
  display: grid;
  grid-template-rows: var(--h-header) minmax(0, 1fr) var(--bottom-min) !important;
  width:100%;
  max-width:var(--page-max);
  margin:0 auto;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}

/* ── 見出し ───────────────────────────── */
header{
  grid-row: 1;
}
.heading{
  position: relative;
  width: var(--heading-w);
  aspect-ratio: 2.8 / 1;     /*見出し枠のだいたいの比率*/
  background: url("./parts/NFC_midashi_DX.png") center/cover no-repeat;
  margin: 0 auto;  
}

/* ── ルーレット行 ─────────────────────── */
.top{ 
  grid-row: 2;
  position:relative; 
  display:grid; 
  place-items:center; 
  padding: var(--pad); 
  height:100%; 
  min-height:0 !important;
}

.roulette-area{
  width:  var(--wheel-size) !important;
  height: var(--wheel-size) !important;
  padding: var(--pad); 
  aspect-ratio: 1 / 1;
  position: relative;
}
.roulette-frame{ 
  position:absolute; 
  inset:0; 
  background:url("./parts/NFC_rouletteRAN.png") center/contain no-repeat; 
}
.pointer{ 
  position:absolute; 
  left:50%; 
  transform:translateX(-50%); 
  top:clamp(-8px,-1.5vw,-4px); 
  width:clamp(24px,6vw,56px); 
  height:auto; 
  z-index:50; 
}
.wheel{ 
  position:absolute; 
  inset:7%; 
  background:url("./parts/NFC_roulette.png") center/contain no-repeat; 
  transform:rotate(0deg); 
  z-index:1; 
}
.hub{ 
  position:absolute; 
  inset:0; 
  display:grid; 
  place-items:center; 
  pointer-events:none; 
}


/* ── 結果行（最小高を保証） ───────────────── */
.bottom {
  grid-row: 3;
  position: relative;
  display: grid;
  grid-template-areas: "panel";
  place-items: start center; /* 上端寄せ・中央揃え */
  grid-template-rows: 1fr;
  height: var(--bottom-min) !important;
  min-height: var(--bottom-min) !important;
  padding: 0 var(--pad) 0 var(--pad) 0 var(--pad);
}

.comment-frame,
.result-wrap{ 
  grid-area: panel; 
  align-self: end;
}

/* 枠＝パネル（2:1） */
.comment-frame {
  z-index: 0;
  width: var(--bottom-w);
  aspect-ratio: 1.64 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("./parts/NFC_commentRAN.png") center/contain no-repeat;
}

/* 枠内のテキスト配置 */
.result-wrap {
  z-index: 1;
  max-width: 90%;
  height: 100%;
  display:flex; 
  flex-direction:column; 
  justify-content:center;
  align-items: center; 
  box-sizing: border-box;
  text-align: center;
}

.result {
  font-weight: 900;
  font-size: clamp(22px, 6vw, 40px);
  letter-spacing: .08em;
  margin-bottom: clamp(6px, 1.6vw, 10px);
}

.comment{
  font-size:clamp(13px, 3.8vw, 18px);
  line-height:1.6;
  white-space:pre-line;         /* \n を改行で表示 */
}

/* ===== ビューポート高の統一（アドレスバー差吸収） ===== */
@supports (height: 100dvh) {
  :root{ --vh-unified: 100dvh; }
}
@supports not (height: 100dvh) {
  :root{ --vh-unified: var(--real-vh, 100svh); }
}



/* ── ブレークポイント ───────────────────── */
@media (min-width: 768px){
  .app{ --page-max: 740px; }
  .comment-frame{ inset: clamp(12px, 5vw, 22%); }
}

/* モーション弱め設定のユーザーには短めに */
@media (prefers-reduced-motion: reduce){
  .wheel{ transition-duration: 800ms !important; }
}