/* 工作ジオラマの画面部品（Manus 版 src/styles/main.css から移植・2026-10-28）
   html.craft のときだけ効く（?classic で従来の見た目）。
   切り紙のボタン（こげ茶の縁＋下に固い影）／マスキングテープで留めた紙のカード／丸ゴシック（Zen Maru Gothic・OFL） */
@font-face {
  font-family: "Zen Maru";
  src: url("./fonts/ZenMaruGothic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Zen Maru";
  src: url("./fonts/ZenMaruGothic-Black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

html.craft {
  --ink: #3a2a26;
  --paper: #fbf5e8;
  --paper2: #f3e8d2;
  --kraft: #e2c597;
  --coral-d: #d96d61;
  --teal-d: #157873;
}
html.craft,
html.craft body {
  background: #d9ccb2 radial-gradient(circle at 50% 40%, #eadfca, #cbbb9c);
  font-family:
    "Zen Maru", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP",
    sans-serif;
  font-weight: 700;
}
/* ページそのものは動かさない（iPhone のアプリ内ブラウザで、重ね画面のスクロール後にページ全体が上にずれたまま残った） */
html.craft body {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
html.craft button,
html.craft input {
  font-family: inherit;
}

/* ---- ボタン：切り紙＋固い影 ---- */
html.craft .overlay button,
html.craft #hud button {
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 5px 0 var(--ink);
  font-weight: 900;
  transition:
    transform 0.06s,
    box-shadow 0.06s;
}
html.craft .overlay button:active,
html.craft #hud button:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--ink);
}
html.craft #start,
html.craft #submit,
html.craft #confirmYes,
html.craft #resumeBtn,
html.craft #howtoGo,
html.craft #retry:not(.secondary) {
  background: var(--coral);
  color: #fff;
  text-shadow: 0 2px 0 var(--coral-d);
}
html.craft #title #start {
  box-shadow: 0 5px 0 var(--ink);
  border-radius: 20px;
}
html.craft #hud button {
  font-size: 0.62em;
  padding: 5px 10px;
  border-width: 2px;
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--ink);
}

/* ---- 重ね画面とカード：テープで留めた紙 ---- */
html.craft .overlay {
  background: #eadfcae6;
}
html.craft .overlay .card,
html.craft .rankCard {
  background: var(--paper);
  background-image: radial-gradient(
    rgba(150, 120, 80, 0.07) 1px,
    transparent 1px
  );
  background-size: 6px 6px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow:
    0 8px 0 rgba(58, 42, 38, 0.85),
    0 14px 30px rgba(60, 40, 20, 0.25);
  padding: 1em 1.1em;
  position: relative;
}
html.craft .overlay .card::before,
html.craft .overlay .card::after,
html.craft .rankCard::before,
html.craft .rankCard::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 74px;
  height: 22px;
  background: rgba(239, 226, 189, 0.92);
  border-left: 2px dashed rgba(200, 180, 140, 0.6);
  border-right: 2px dashed rgba(200, 180, 140, 0.6);
}
html.craft .overlay .card::before,
html.craft .rankCard::before {
  left: 18px;
  transform: rotate(-5deg);
}
html.craft .overlay .card::after,
html.craft .rankCard::after {
  right: 18px;
  transform: rotate(4deg);
}
html.craft .overlay h1 {
  color: var(--teal-d);
}

/* ---- タイトル：表紙の上だけ紙色にして、下の 3D を見せる ---- */
html.craft #title {
  background: linear-gradient(
    180deg,
    #eadfcaf2 0%,
    #eadfcae0 32%,
    #eadfca00 46%
  );
}
html.craft #title .burst {
  opacity: 0.45;
}
html.craft #title .tag:not(.hint) {
  display: inline-block;
  background: var(--teal);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 0.2em 0.9em;
  box-shadow: 0 4px 0 var(--ink);
  transform: rotate(-2deg);
  margin-bottom: 12px;
  font-size: clamp(11px, 1.75vh, 15px);
  white-space: nowrap;
}
/* 日本語は文節（ひらがなの区切りの空白）でだけ折り返す */
html.craft #title .hint,
html.craft #title .sub .ctl {
  word-break: keep-all;
  line-break: strict;
  font-size: clamp(11px, 1.8vh, 15px);
}
html.craft #title .sub .ctl,
html.craft #title .hint {
  background: rgba(251, 245, 232, 0.94);
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 0.35em 0.9em;
  box-shadow: 0 4px 0 var(--ink);
}
html.craft #title .hint {
  margin-top: 12px;
  transform: rotate(1deg);
}
html.craft #title .sub .ctl {
  transform: rotate(-1.5deg);
}

/* ---- HUD：紙の札 ---- */
html.craft #hud {
  text-shadow: none;
}
html.craft #hud .score,
html.craft #hud .mult,
html.craft #hud #wave,
html.craft #hud #hearts {
  background: rgba(251, 245, 232, 0.94);
  border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  border-radius: 12px;
  padding: 2px 10px;
}
html.craft #hud .score {
  min-width: 0;
}
html.craft #hud .mult {
  padding: 2px 8px;
  font-size: 0.9em;
  line-height: 1.25;
}
html.craft #hud #hearts {
  flex: 0 1 auto;
}
html.craft #hud .bar {
  height: 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
}

/* ---- クイズの選択肢：紙の札 ---- */
html.craft #quiz .choice {
  background: var(--paper);
  color: var(--ink);
  text-align: left;
}
html.craft #quiz .choice.ok {
  background: var(--teal);
  color: #fff;
}
html.craft #quiz .choice.ng {
  background: var(--paper2);
}
html.craft #quizBar {
  border: 2px solid var(--ink);
  background: var(--paper);
}