/* ============================================
   渡瀬島 体験コンテンツ 共通スタイル v2
   - トンマナ: 正本11 フェイクサイト共通パレット (W1-W10)
     初秋・海・橋・山の空気 / 鬼灯橙は差し色
   - 白銀比 (√2 ≒ 1.414) スケール: 8 11 16 23 32 45 64
   - スマホレスポンシブ対応
   ============================================ */
:root {
  /* 正本パレット */
  --t-main: #5cb8b6;      /* W1 メイン (海・橋のティール) */
  --t-main-d: #2d6d72;    /* W5 見出し */
  --t-hover: #469a98;     /* W9 hover */
  --t-sub: #efe7d8;       /* W2 サブ (生成) */
  --t-bg: #fbf8f1;        /* W6 背景 */
  --t-bg-2: #eef6f4;      /* W7 背景サブ */
  --t-accent: #e0a86e;    /* W3 鬼灯橙 (差し色) */
  --t-text: #334248;      /* W4 本文 */
  --t-text-2: #5e6e74;
  --t-warn: #c97a68;      /* W8 */
  --t-ok: #6a9a78;
  --t-card: #ffffff;
  --t-border: #e2ded2;

  /* 白銀比スペーシング (×√2) */
  --s1: 8px;
  --s2: 11px;
  --s3: 16px;
  --s4: 23px;
  --s5: 32px;
  --s6: 45px;
  --s7: 64px;

  /* タイポ (黄金比半音階) */
  --f-xs: 12px;
  --f-sm: 13px;
  --f-base: 15px;
  --f-md: 19px;
  --f-lg: 24px;
  --f-xl: 31px;
  --f-2xl: 39px;

  --t-font: "Noto Sans JP", "游ゴシック体", YuGothic, sans-serif;
  --t-en: "DM Sans", "Helvetica Neue", sans-serif;

  /* 青海波 (渡瀬島の海モチーフ) — 薄く敷く */
  --seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cg fill='none' stroke='%235cb8b6' stroke-opacity='0.16' stroke-width='1.4'%3E%3Cpath d='M0 40a40 40 0 0 1 80 0M-20 40a40 40 0 0 1 80 0M20 40a40 40 0 0 1 80 0'/%3E%3Cpath d='M0 40a28 28 0 0 1 56 0M-28 40a28 28 0 0 1 56 0M28 40a28 28 0 0 1 56 0' transform='translate(12 0)'/%3E%3C/g%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--t-font);
  background:
    linear-gradient(180deg, var(--t-bg) 0%, var(--t-bg-2) 100%);
  color: var(--t-text);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ============ ヘッダー (橋のラインモチーフ) ============ */
.tk-header {
  background: #fff;
  border-bottom: 2px solid var(--t-main);
  position: relative;
  padding: var(--s3) var(--s4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}
/* 渡瀬大橋の主塔とケーブルを思わせる下端ライン */
.tk-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg,
    var(--t-main) 0%, var(--t-main) 30%,
    var(--t-accent) 30%, var(--t-accent) 34%,
    var(--t-main) 34%, var(--t-main) 66%,
    var(--t-accent) 66%, var(--t-accent) 70%,
    var(--t-main) 70%);
}
.tk-back {
  font-size: var(--f-sm);
  font-weight: 700;
  color: var(--t-text-2);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.tk-back:hover { color: var(--t-main-d); }
.tk-title {
  font-size: var(--f-base);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--t-main-d);
  margin: 0;
}
.tk-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--t-main-d);
  background: var(--t-bg-2);
  border: 1px solid var(--t-main);
  border-radius: 999px;
  padding: 4px var(--s2);
  white-space: nowrap;
}

/* ============ メインステージ ============ */
.tk-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--s4) var(--s3) var(--s6);
  position: relative;
}
/* 画面下に薄い青海波 (海) */
.tk-main::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: var(--seigaiha);
  background-size: 80px 40px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000);
  mask-image: linear-gradient(180deg, transparent, #000);
}
.tk-stage {
  width: min(100%, 640px);   /* 640 ÷ √2 ≒ 453 (白銀比領域) */
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: 8px;
  box-shadow: 0 12px 36px -16px rgba(45, 109, 114, 0.25);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* ============ 画面切替 ============ */
.tk-screen { display: none; padding: var(--s5) var(--s4) var(--s5); text-align: center; }
.tk-screen.active { display: block; }

.tk-screen h2 {
  font-size: var(--f-lg);
  letter-spacing: 0.1em;
  color: var(--t-main-d);
  margin: 0 0 var(--s2);
}
.tk-title-art {
  /* シート行1〜3(0818): タイトル画は3ゲームとも 3:1 の公式バナーになった。
     各ページでインライン上書きしていたのをここに集約する。 */
  width: min(100%, 600px);
  aspect-ratio: 3 / 1;
  margin: 0 auto var(--s4);
  border-radius: 8px;
  border: 1px solid rgba(45, 109, 114, 0.18);
  overflow: hidden;
  box-shadow: 0 12px 28px -18px rgba(45, 109, 114, 0.45);
  background: var(--t-bg-2);
}
.tk-title-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.tk-lead {
  font-size: var(--f-sm);
  line-height: 2;
  color: var(--t-text-2);
  margin: 0 0 var(--s4);
}
.tk-howto {
  text-align: left;
  background: var(--t-bg-2);
  border-left: 3px solid var(--t-main);
  border-radius: 6px;
  padding: var(--s3) var(--s4);
  margin: 0 0 var(--s4);
  font-size: var(--f-sm);
  line-height: 2;
  color: var(--t-text-2);
}
.tk-howto strong { color: var(--t-main-d); }

/* ============ ボタン (タッチ44px確保) ============ */
.tk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;             /* 白銀比 s6 */
  padding: var(--s2) var(--s5);
  background: var(--t-main);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--f-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  margin: 4px;
}
.tk-btn:hover { background: var(--t-hover); transform: translateY(-1px); }
.tk-btn--ghost {
  background: transparent;
  color: var(--t-text);
  border: 1px solid var(--t-border);
}
.tk-btn--ghost:hover { background: var(--t-bg-2); color: var(--t-main-d); transform: translateY(-1px); }

/* ============ HUD ============ */
.tk-hud {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s4);
  font-size: var(--f-xs);
  font-weight: 700;
  color: var(--t-text-2);
  margin-bottom: var(--s3);
  flex-wrap: wrap;
}
.tk-hud b { color: var(--t-main-d); font-family: var(--t-en); font-size: var(--f-base); }

/* ============ リザルト ============ */
.tk-clear {
  font-family: var(--t-en);
  font-size: var(--f-2xl);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--t-main-d);
  margin: 4px 0;
  animation: tkPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tkPop {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}
.tk-result-note {
  font-size: var(--f-sm);
  color: var(--t-text-2);
  margin: var(--s2) 0;
}
/* 案内板: 木枠 + 海ティールの掲示面 (島の案内板) */
.tk-signboard {
  margin: var(--s3) auto var(--s4);
  max-width: 360px;
  background: linear-gradient(180deg, #fdfbf5, var(--t-sub));
  border: 2px solid #b5a87f;
  border-radius: 6px;
  padding: var(--s3) var(--s4);
  box-shadow: inset 0 0 0 4px #fff, 0 6px 16px -8px rgba(80, 60, 20, 0.3);
  position: relative;
}
.tk-signboard::before {
  content: "周辺のご案内";
  display: block;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--t-main-d);
  margin-bottom: var(--s1);
}
/* 青海波の隅飾り */
.tk-signboard::after {
  content: "";
  position: absolute;
  right: 6px; bottom: 6px;
  width: 45px; height: 23px;
  background: var(--seigaiha);
  background-size: 45px 23px;
  opacity: 0.7;
}
.tk-signboard .kw {
  font-size: var(--f-lg);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--t-text);
  display: block;
}
.tk-signboard .kw-sub {
  font-size: var(--f-xs);
  color: var(--t-text-2);
  letter-spacing: 0.2em;
  display: block;
  margin-top: 4px;
}

/* 紙吹雪 */
.tk-confetti {
  position: absolute;
  width: 8px; height: 11px;     /* 白銀比 8:11 */
  pointer-events: none;
  animation: tkConfetti 1.6s ease-out forwards;
  z-index: 30;
}
@keyframes tkConfetti {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(180px) rotate(540deg); }
}

/* フッターノート */
.tk-note {
  text-align: center;
  font-size: 11px;
  color: var(--t-text-2);
  padding: 0 var(--s3) var(--s4);
  position: relative;
  z-index: 1;
}

/* ============ スマホレスポンシブ ============ */
@media (max-width: 600px) {
  .tk-header {
    padding: var(--s2) var(--s3);
    gap: var(--s1);
  }
  .tk-title { font-size: var(--f-sm); order: -1; width: 100%; text-align: center; }
  .tk-back { font-size: var(--f-xs); min-height: 36px; }
  .tk-badge { font-size: 10px; }
  .tk-main { padding: var(--s3) var(--s2) var(--s5); }
  .tk-screen { padding: var(--s4) var(--s3); }
  .tk-screen h2 { font-size: var(--f-md); }
  .tk-clear { font-size: var(--f-xl); }
  .tk-btn { width: 100%; margin: 4px 0; }
  .tk-hud { gap: var(--s3); }
  .tk-signboard { max-width: 100%; }
}