:root{ --c1:#1d3557; --c2:#457b9d; --c3:#a8dadc; --c4:#f1faee; --accent:#e63946; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",sans-serif;background:#fafafa;color:#112}
.container{max-width:960px;margin:0 auto;padding:24px}
.site-header,.site-footer{background:var(--c1);color:#fff}
.site-header .inner,.site-footer .inner{max-width:960px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:16px}
.site-header .brand{color:#fff;text-decoration:none;font-weight:700}
.btn{padding:.6em 1em;border:1px solid #ccc;border-radius:6px;background:#fff;cursor:pointer}
.btn:hover{background:#f7f7f7}
.btn-primary{background:var(--c2);color:#fff;border-color:var(--c2)}
.btn-primary:hover{background:#3a6b87}
.btn-light{background:#fff;color:#333;border-color:#ddd}

/* --- Restored Home & Modal Styles --- */
.modal{position:fixed;inset:0;z-index:1000;display:block}
.modal[hidden]{display:none}
.modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.modal__content{position:relative;max-width:420px;margin:10vh auto 0;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);overflow:hidden}
.modal__body{padding:16px}
.modal__actions{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid #eee}

body.home .site-header, body.home .site-footer{display:none}
.home-hero{position:relative;min-height:100vh;width:100%;background:#333;display:flex;align-items:center;justify-content:center}
.home-hero__stage{position:relative;display:inline-block;line-height:0;background:#fff}
.home-hero__image{display:block;max-width:100vw;max-height:100vh;height:auto;width:auto;background:#fff}

.hotspot{position:absolute;display:block;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:var(--w,18%);}
.hotspot > img{display:block;width:100%;height:auto}
.hotspot:hover{filter:brightness(1.05)}

.hotspot--text{pointer-events:none;font-size: 25px;transform: translate(0, -50%);}
.hotspot--text::before{content:attr(data-text);display:block;width:100%;color:#333;line-height:1.1;text-align:left;white-space:nowrap;font-size:clamp(12px,2vw,64px)}
@supports (font-size: 1cqi){
    .hotspot--text::before{font-size:clamp(12px, max(3vw, var(--fs,3)cqi), 64px)}
}
.hotspot--text-topright{--x:3.5%;--y:4%;--w:40%}

.hotspot--beginner{--x:14%;--y:87%;--w:15%}
.hotspot--intermediate{--x:34%;--y:87%;--w:15%}
.hotspot--advanced{--x:54%;--y:87%;--w:15%}
.hotspot--sugoroku{--x:81.4%;--y:70%;--w:34%}

.home-actions{position:absolute;left:0;right:0;bottom:24px;display:flex;justify-content:space-evenly;align-items:center;gap:16px;padding:0 24px}
.circle-btn{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.62);backdrop-filter:saturate(120%) blur(2px);border:1px solid rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;text-decoration:none;color:#111;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.circle-btn:hover{background:rgba(255,255,255,.75)}
.circle-btn.is-locked,[aria-disabled="true"].circle-btn{opacity:.55}
.circle-btn[aria-disabled="true"]{pointer-events:none}

.sugoroku{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px}
.sugoroku .cell{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border:1px solid #ddd;border-radius:6px;background:#fff}
.sugoroku .cell.done{background:var(--c3);border-color:var(--c2);font-weight:700}
/* --- End Restored Home & Modal Styles --- */

.ieyasu .hero{margin-bottom:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.card{display:flex;flex-direction:column;gap:4px;align-items:flex-start;justify-content:center;border:1px solid #e5e5e5;border-radius:12px;padding:16px;background:#fff;text-align:left;cursor:pointer}
.card.is-locked{opacity:.5;cursor:not-allowed}
.panel{border:1px solid #e5e5e5;border-radius:12px;padding:16px;background:#fff}
.panel+.panel{margin-top:16px}
.panel-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.qa .qnum{
    font-family: "kokuryu", sans-serif;
    font-weight:800;
    letter-spacing:.02em;
    font-size:2.4rem;
    margin-bottom:0px;
    /* Diamond shape */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    color: #fff;
    position: relative;
    z-index: 1;
}
.qa .qnum::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 65%;
    height: 65%;
    background: #000;
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: -1;
}
.qa h3{margin:0;text-align:center;font-size:3.8rem;line-height:1.2}
.qa .desc{font-family: "Shippori Mincho B1", serif; font-weight:bold; padding: 0px 30px; margin:5px 0 10px 0; text-align:center; color:#000; font-size:2.6rem; line-height: 2;}
/* Ruby styling */
ruby { font-family: inherit; }
rt { font-size: 0.6em; font-weight: 400; line-height: 1; }

.choices{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2, minmax(240px, 1fr));gap:36px;justify-items:stretch;min-width: 90%;}
/* Gridアイテム(li)をFlexにして中身の高さを揃える */
.choices li { display: flex; }

.choice{font-family: "Shippori Mincho B1", serif; font-weight:bold; position:relative;display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid #fff;border-radius:12px;background:#fff;padding:48px 60px 48px 112px;cursor:pointer;font-size:2.4rem; width:100%; height:100%;}
.choice:hover{background:#f7fcff}
.choice::before{content:attr(data-index);position:absolute;left:32px;top:50%;transform:translateY(-50%);color:#1d3557;display:block;font-weight:800;font-size:2.4rem;line-height:1}

/* 画像番号付き選択肢 */
.choice.has-image {
    padding-left: 60px;
    padding-right: 60px;
    gap: 0;
    justify-content: center;
    text-align: center;
}
.choice.has-image::before {
    display: none;
}
.choice-num-img {
    height: clamp(24px, 3.2vw, 45px);
    width: auto;
    flex-shrink: 0;
    position: absolute;
    left: clamp(16px, 2.4vw, 30px);
}

/* チャレンジ出題時の配色（レベル内に挿入時） */
body.ieyasu-quiz-page.challenge-mode{ background:#ffe7c6; border-color:#c46b1a }
body.ieyasu-quiz-page.challenge-mode .choice{ border-color:#c46b1a; background:#fff8f0 }
body.ieyasu-quiz-page.challenge-mode .choice:hover{ background:#fff2e3 }
body.ieyasu-quiz-page.challenge-mode .choice::before{ color:#8a3f00 }

/* モーダルの文字も拡大（クイズページのみ） */
body.ieyasu-quiz-page .modal__content{font-size:2rem}

/* 小さい画面向けの縮小調整 */
@media (max-width: 480px){
	.qa .qnum{font-size:1.6rem}
	.qa h3{font-size:3rem}
	.qa .desc{font-size:1.4rem}
	.choices{grid-auto-rows:minmax(160px,auto);gap:20px}
		.choice{font-size:1.6rem;padding:32px 40px 32px 88px}
		.choice::before{left:24px;font-size:1.8rem}
}

/* ロック中のホットスポット（明るさ低下＋クリック不可） */
.hotspot.is-locked{filter:brightness(.6) grayscale(.2);pointer-events:none}
.hotspot.is-locked > img{filter:brightness(.6) grayscale(.2);cursor:not-allowed}

/* Sugoroku hotspots (位置・サイズは%で調整してください) */
.hotspot--sg1{ 
	--x: 38.6%;
    --y: 36%;
    --w: 13%; 
}
.hotspot--sg2{ 
	--x: 60%;
    --y: 18%;
    --w: 13%;
 }
.hotspot--sg3{     
	--x: 87%;
    --y: 18.5%;
    --w: 16%;}
.hotspot--sg4{     
	--x: 53.8%;
    --y: 64%;
    --w: 16%;
}
.hotspot--sg5{ 
	--x: 16%;
    --y: 79%;
    --w: 19%;
 }
.hotspot--sg6{     
	--x: 85%;
    --y: 70%;
    --w: 19%;
 }

/* 双六カード（矩形） */
.hotspot-card{
  display:block;
  width:100%; aspect-ratio: 1 / 1.4; /* 縦長 */
  padding:0; border:none;
  background:transparent; color:#1d3557; font-weight:700; cursor:pointer;
  box-shadow:none;
  font-size:0; /* Remove text space */
  position: relative; z-index: 10; /* 背景より前に */
}
.hotspot-card img{
  display:block; width:100%; object-fit:contain;
  transition: transform .2s;
}
.hotspot-card:hover img{ transform:scale(1.05); z-index:10; }
.hotspot.is-locked .hotspot-card,
.hotspot-card:disabled{ opacity:.6; cursor:not-allowed }
.hotspot.is-locked .hotspot-card img { filter: grayscale(1); }

/* 最新カード強調（背景画像） */
.is-latest::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 180%; height: 180%; /* カードより少し大きく */
  background: url(../img/sugoroku/card-bg.png) no-repeat center center;
  background-size: contain;
  z-index: 3;
  pointer-events: none;
}

/* 双六カードの表示制御（初期は非表示） */
.hotspot[data-step]{ display:none; }
.hotspot.is-unlocked{ display:block; }
/* 1番目は常時表示 */
.hotspot[data-step="1"]{ display:block; }

/* Correct Overlay (正解時の画像背景＋相対ボタン) */
.correct-overlay__hotspot{     
	--x: 50%;
    --y: 76%;
    --w: 40%;
}
/* ここを正解/不正解で共通化 */
.correct-overlay,
.incorrect-overlay{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.4)}
.correct-overlay.is-open,
.incorrect-overlay.is-open{display:flex}
.correct-overlay__stage{position:relative;display:inline-block;line-height:0}
.correct-overlay__image{display:block;max-width:100vw;max-height:100vh;width:auto;height:100vh; aspect-ratio:4/3; object-fit: contain;}
.correct-overlay__hotspot{position:absolute;left:var(--x,50%);top:var(--y,50%);transform:translate(-50%,-50%);width:var(--w,30%)}
button.correct-overlay__hotspot-btn {
    font-size: 30px;
    background: #fff;
    border: none;
    border-radius: 15px;
    padding: 0.6em 2.4em;
    width: 100%;
}
/* 複数ボタンの間隔 */
.correct-overlay__hotspot .correct-overlay__hotspot-btn + .correct-overlay__hotspot-btn{
  margin-top: 12px;
}

/* ===== 初級ページ専用（TOP同様のフル背景） ===== */
/* 変更: 初級だけでなく中級・上級も共通のステージデザイン（quiz-has-stage）を適用 */
body.ieyasu-quiz-page.quiz-has-stage{
  background:#333;           /* 画像が足りない部分は#333 */
  border:none;               /* 既存の枠線を廃止（初級のみ） */
  min-height:100vh;
}
/* ヘッダー・フッター非表示（PHPクラスで判定） */
body.ieyasu-quiz-page.quiz-level-beginner .site-header,
body.ieyasu-quiz-page.quiz-level-beginner .site-footer,
body.ieyasu-quiz-page.quiz-level-intermediate .site-header,
body.ieyasu-quiz-page.quiz-level-intermediate .site-footer,
body.ieyasu-quiz-page.quiz-level-advanced .site-header,
body.ieyasu-quiz-page.quiz-level-advanced .site-footer{ display:none }

body.ieyasu-quiz-page.quiz-has-stage .ieyasu-quiz-stage{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:0; width: 100%;
}
body.ieyasu-quiz-page.quiz-has-stage .quiz-box{ 
  /* 画像ステージを確実に中央寄せ */
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 背景ステージ（TOPのhome-hero__stage相当） */
.quiz-stage{ position:relative; display:inline-block; line-height:0; background:#333; }
.quiz-stage__image{ display:block; max-width:100vw; max-height:100vh; width:auto; height:100vh;  aspect-ratio: 4/3; object-fit:contain; background:#333; }
.quiz-stage__overlay{ position:absolute; inset:0 }


/* 初級ページの問題UIを背景に対して相対配置・相対サイズに */
body.ieyasu-quiz-page.quiz-has-stage .qa{
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block; /* Flex解除して絶対配置の基準とする */
}

/* コンテナクエリでフォントなどを相対スケール（画像幅基準） */
@supports (font-size: 1cqi){
  /* 問題番号: 上部固定 */
  body.ieyasu-quiz-page.quiz-has-stage .qa .qnum{ 
    position: absolute;
    top: 24%;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(14px, 3cqi, 38px);
    margin: 0;
    z-index: 2;
  }
  
  /* 説明文: 中央エリア固定 */
  body.ieyasu-quiz-page.quiz-has-stage .qa .desc{ 
    position: absolute;
    top: 34%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 25%; /* 高さ固定 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 2.4cqi, 40px);
    line-height: 1.8; /* ルビがあっても崩れないように行間確保 */
    margin: 0;
    padding: 0;
    z-index: 2;
    text-align: center;
  }
  
  /* 追加: 説明文内のspan（JSで追加）のスタイル */
  body.ieyasu-quiz-page.quiz-has-stage .qa .desc span {
    display: inline-block;
    max-width: 100%;
  }

  /* 選択肢: 下部エリア固定 */
  body.ieyasu-quiz-page.quiz-has-stage .choices{
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 86%;
    height: 32%; /* 高さ固定 */
    grid-template-columns:repeat(2,1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: clamp(8px, 1.5cqi, 24px);
    margin: 0;
    padding: 0;
    z-index: 2;
  }
  
  body.ieyasu-quiz-page.quiz-has-stage .choice{
    width: 100%;
    height: 100%;
    font-size: clamp(16px, 2.2cqi, 34px);
    padding: 0 clamp(10px, 2.0cqi, 32px) 0 clamp(36px, 5.0cqi, 80px);
    border-radius: clamp(4px, 1.0cqi, 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4; /* 選択肢もルビ考慮 */
    text-align: center;
  }
  
  body.ieyasu-quiz-page.quiz-has-stage .choice::before{
    left: clamp(10px, 1.5cqi, 24px);
    font-size: clamp(16px, 2.5cqi, 40px);
  }
}

/* 任意で配置を調整したい場合は以下のCSS変数を上書きしてください
   --qa-x:50%; --qa-y:40%; --qa-w:78%;
*/