/* ============================================
   光を透かせ — 越前和紙 検品の眼
   style.css
   ============================================ */

:root {
  /* 越前和紙ブランド色 */
  --washi-base:      #F2EDE4;
  --washi-warm:      #EDE0CC;
  --light-core:      #FFF3E0;
  --light-halo:      #FFD6A5;
  --fiber-shadow:    #C5B8A6;
  --studio-dark:     #1A1412;
  --studio-mid:      #2E201A;
  --text-dark:       #3D2B1F;
  --text-sub:        #6B5B4E;
  --text-light:      #F2EDE4;
  --text-light-sub:  #C5B8A6;
  --pass-green:      #A8C97F;
  --fail-red:        #D4827A;
  --candle-amber:    #D4944A;

  /* 4ランク象徴色 */
  --rank-minarai:    #C5B8A6;
  --rank-josyoku:    #A8C97F;
  --rank-ichinin:    #C8DCE8;
  --rank-meiko:      #D4944A;
  --rank-current:    #C5B8A6;
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  background: var(--studio-dark);
  color: var(--text-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--candle-amber);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============ 画面切り替え ============ */
.screen {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 20px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  position: relative;
}
.screen[hidden] { display: none !important; }

/* ============ 音トグル ============ */
.sound-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 100;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-light-sub);
  background: rgba(46, 32, 26, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 200ms ease, background-color 200ms ease;
}
.sound-toggle:hover {
  color: var(--candle-amber);
  background: rgba(46, 32, 26, 0.85);
}

/* ============ 画面1: タイトル ============ */
.screen-title {
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* 写真B: 障子の和紙に透ける自然光（ヒーロー背景） */
.title-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--studio-dark);
  background-image: url('https://images.pexels.com/photos/33143524/pexels-photo-33143524.jpeg?auto=compress&cs=tinysrgb&w=1600&h=900&fit=crop');
  background-size: cover;
  background-position: center top;
  filter: brightness(0.55) saturate(0.75) sepia(0.18);
}

.title-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 48%,
      rgba(255, 214, 165, 0.45) 0%,
      rgba(255, 243, 224, 0.22) 35%,
      rgba(26, 20, 18, 0.00) 75%),
    linear-gradient(180deg,
      rgba(26, 20, 18, 0.55) 0%,
      rgba(26, 20, 18, 0.85) 100%);
  animation: lightPulse 4s ease-in-out infinite;
}

@keyframes lightPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.92; transform: scale(1.012); }
}

.fiber-overlay {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  animation: fiberDrift 8s ease-in-out infinite;
  will-change: transform;
}

@keyframes fiberDrift {
  0%, 100% { transform: translateX(0) translateY(0); }
  33%      { transform: translateX(2px) translateY(-1px); }
  66%      { transform: translateX(-2px) translateY(1px); }
}

.title-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 16px;
}

.title-hero {
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 9vw, 4.8rem);
  letter-spacing: 0.15em;
  margin: 0 0 24px;
  color: var(--text-light);
  text-shadow: 0 2px 30px rgba(212, 148, 74, 0.30);
  animation: titleReveal 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes titleReveal {
  from {
    opacity: 0;
    letter-spacing: 0.3em;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    letter-spacing: 0.15em;
    transform: translateY(0);
  }
}

.title-divider {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--candle-amber);
  opacity: 0.65;
  margin: 0 auto 20px;
}

.title-sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.20em;
  color: var(--text-light-sub);
  margin: 0 0 36px;
}

.title-lead {
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: clamp(0.95rem, 3vw, 1.05rem);
  line-height: 1.95;
  color: var(--text-light);
  margin: 0 0 44px;
  letter-spacing: 0.05em;
}

.btn-start {
  background: transparent;
  border: 1.5px solid rgba(212, 148, 74, 0.70);
  color: var(--text-light);
  min-height: 52px;
  padding: 14px 48px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  border-radius: 4px;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-start:hover {
  border-color: var(--candle-amber);
  color: var(--candle-amber);
  box-shadow: 0 0 0 3px rgba(212, 148, 74, 0.20);
}
.btn-start:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}

.title-keyhint {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 0.72rem;
  color: rgba(197, 184, 166, 0.55);
  letter-spacing: 0.08em;
  margin: 28px 0 0;
}

.title-footer {
  position: absolute;
  bottom: 16px;
  left: 0; right: 0;
  z-index: 2;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 0.78rem;
  color: rgba(197, 184, 166, 0.50);
  text-align: center;
  padding: 0 20px;
}

/* ============ 画面2: 検品 ============ */
.screen-inspect {
  align-items: center;
  justify-content: flex-start;
  max-width: 640px;
  margin: 0 auto;
}

.inspect-header {
  width: 100%;
  max-width: 480px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 8px 0 16px;
}

.counter {
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--candle-amber);
  letter-spacing: 0.1em;
}
.counter-sep { margin: 0 4px; opacity: 0.7; }
.counter-total { color: var(--text-light-sub); font-size: 0.9rem; }

.score-display {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-light-sub);
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.score-divider { opacity: 0.5; }

.lightbox-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.canvas-wrapper {
  position: relative;
  width: min(90vw, 360px);
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(197, 184, 166, 0.30);
  box-shadow:
    0 0 60px rgba(212, 148, 74, 0.20),
    0 4px 24px rgba(0, 0, 0, 0.60);
  background: var(--washi-warm);
}

#washi-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.canvas-wrapper.is-leaving { animation: canvasFadeOut 150ms ease-out forwards; }
.canvas-wrapper.is-entering { animation: canvasFadeIn 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes canvasFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes canvasFadeIn  { from { opacity: 0; } to { opacity: 1; } }

.feedback-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  background-color: transparent;
  gap: 4px;
}

.feedback-overlay.is-pass {
  background-color: rgba(168, 201, 127, 0.45);
  animation: passFlash 700ms ease-out forwards;
}
.feedback-overlay.is-fail {
  background-color: rgba(212, 130, 122, 0.45);
  animation: failFlash 800ms ease-out forwards;
}

@keyframes passFlash {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes failFlash {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  60%  { opacity: 0.8; }
  100% { opacity: 0; }
}

.feedback-icon {
  font-size: 3rem;
  font-weight: 300;
  color: var(--text-light);
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
  line-height: 1;
}
.feedback-text {
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: var(--text-light);
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.defect-highlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.defect-highlight.is-visible {
  animation: highlightReveal 280ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes highlightReveal {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

.timer-bar-wrap {
  width: min(90vw, 360px);
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.timer-bar {
  flex: 1;
  height: 8px;
  background: rgba(197, 184, 166, 0.15);
  border-radius: 4px;
  overflow: hidden;
}

.timer-fill {
  width: 100%;
  height: 100%;
  background-color: var(--pass-green);
  transform: scaleX(1);
  transform-origin: left center;
  transition: background-color 300ms ease;
  will-change: transform, background-color;
}
.timer-fill.is-warn { background-color: var(--candle-amber); }
.timer-fill.is-urgent { background-color: var(--fail-red); }

.timer-text {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 0.78rem;
  color: var(--text-light-sub);
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.urgent-text {
  margin: 6px 0 0;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--fail-red);
  letter-spacing: 0.15em;
  opacity: 0;
  transition: opacity 200ms ease;
  height: 1em;
}
.urgent-text.is-visible { opacity: 0.9; }

.judge-buttons {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 480px;
  margin-top: 24px;
}

.btn-judge {
  flex: 1;
  min-height: 56px;
  padding: 14px 12px;
  background: var(--studio-mid);
  border: 1.5px solid rgba(197, 184, 166, 0.35);
  color: var(--text-light);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.05em;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    background-color 150ms ease-out,
    border-color 150ms ease-out,
    color 150ms ease-out,
    transform 100ms ease-out,
    box-shadow 150ms ease-out;
}

.judge-icon {
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.btn-pass:hover {
  border-color: var(--pass-green);
  color: var(--pass-green);
  box-shadow: inset 0 0 0 1px rgba(168, 201, 127, 0.25);
}
.btn-pass:hover .judge-icon { opacity: 1; }

.btn-fail:hover {
  border-color: var(--fail-red);
  color: var(--fail-red);
  box-shadow: inset 0 0 0 1px rgba(212, 130, 122, 0.25);
}
.btn-fail:hover .judge-icon { opacity: 1; }

.btn-judge:active { transform: scale(0.97); transition-duration: 80ms; }

.btn-judge[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.6;
}

/* ============ 画面3: 計算中 ============ */
.screen-calc {
  align-items: center;
  justify-content: center;
}
.calc-text {
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--text-light-sub);
  letter-spacing: 0.10em;
  margin: 0;
  animation: calcTextIn 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 100ms;
}
@keyframes calcTextIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ 画面4: 結果 ============ */
.screen-result {
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.screen-result.result--minarai  { --rank-current: var(--rank-minarai); }
.screen-result.result--josyoku  { --rank-current: var(--rank-josyoku); }
.screen-result.result--ichinin  { --rank-current: var(--rank-ichinin); }
.screen-result.result--meiko    { --rank-current: var(--rank-meiko); }

/* 写真A: 手漉き和紙の繊維テクスチャ（結果画面背景） */
.result-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--studio-dark);
  background-image: url('https://images.pexels.com/photos/5993559/pexels-photo-5993559.jpeg?auto=compress&cs=tinysrgb&w=1600&h=900&fit=crop');
  background-size: cover;
  background-position: center;
  filter: brightness(0.40) saturate(0.65) sepia(0.15);
}

.result-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(26, 20, 18, 0.75) 0%,
    rgba(26, 20, 18, 0.92) 100%);
  transition: background 400ms ease;
}

/* ランク別ティント（象徴色を中央に薄く重ねる） */
.screen-result.result--minarai .result-photo-overlay {
  background: linear-gradient(180deg,
    rgba(26, 20, 18, 0.78) 0%,
    rgba(197, 184, 166, 0.10) 50%,
    rgba(26, 20, 18, 0.92) 100%);
}
.screen-result.result--josyoku .result-photo-overlay {
  background: linear-gradient(180deg,
    rgba(26, 20, 18, 0.78) 0%,
    rgba(168, 201, 127, 0.10) 50%,
    rgba(26, 20, 18, 0.92) 100%);
}
.screen-result.result--ichinin .result-photo-overlay {
  background: linear-gradient(180deg,
    rgba(26, 20, 18, 0.75) 0%,
    rgba(200, 220, 232, 0.12) 50%,
    rgba(26, 20, 18, 0.92) 100%);
}
.screen-result.result--meiko .result-photo-overlay {
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%,
      rgba(212, 148, 74, 0.18) 0%,
      rgba(212, 148, 74, 0.00) 70%),
    linear-gradient(180deg,
      rgba(26, 20, 18, 0.72) 0%,
      rgba(26, 20, 18, 0.90) 100%);
}

.result-inner {
  position: relative;
  z-index: 2;
  max-width: 600px;
  width: 100%;
  text-align: center;
  padding: 24px 0;
}

@keyframes resultItemIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.result-score {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  color: var(--text-light);
  margin: 0 0 20px;
  letter-spacing: 0.04em;
  animation: resultItemIn 400ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}

.result-rank {
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 9vw, 4.6rem);
  color: var(--rank-current);
  letter-spacing: 0.12em;
  margin: 0 0 32px;
  line-height: 1.1;
  text-shadow: 0 0 40px color-mix(in srgb, var(--rank-current) 30%, transparent);
  animation: resultItemIn 500ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;
}

.result-poem {
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: clamp(0.95rem, 2.8vw, 1.05rem);
  line-height: 1.95;
  color: var(--text-light);
  letter-spacing: 0.06em;
  margin: 0 0 28px;
  animation: resultItemIn 400ms ease-out 900ms both;
}

.result-breakdown {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 0.82rem;
  color: var(--text-light-sub);
  text-align: center;
  animation: resultItemIn 400ms ease-out 1000ms both;
}
.result-breakdown li {
  padding: 4px 0;
  letter-spacing: 0.04em;
}

.result-bestscore {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  color: var(--text-light-sub);
  margin: 0 0 24px;
  letter-spacing: 0.04em;
  animation: resultItemIn 400ms ease-out 1100ms both;
}

.result-eclink {
  margin: 0 0 32px;
  animation: resultItemIn 400ms ease-out 1100ms both;
}
.result-cta-text {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--text-light);
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 1.8;
}

.result-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  animation: resultItemIn 300ms ease-out 1200ms both;
}

.btn-retry, .btn-share {
  min-height: 52px;
  padding: 14px 24px;
  border-radius: 4px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  transition:
    background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 200ms ease,
    color 200ms ease;
}

.btn-retry {
  background: color-mix(in srgb, var(--rank-current) 12%, transparent);
  border: 1.5px solid var(--rank-current);
  color: var(--rank-current);
}
.btn-retry:hover {
  background: color-mix(in srgb, var(--rank-current) 22%, transparent);
  transform: translateY(-2px);
}
.btn-retry:active { transform: scale(0.97) translateY(0); transition-duration: 100ms; }

.btn-share {
  background: transparent;
  border: 1.5px solid rgba(197, 184, 166, 0.40);
  color: var(--text-light);
}
.btn-share:hover {
  border-color: var(--candle-amber);
  color: var(--candle-amber);
}
.btn-share:active { transform: scale(0.97); transition-duration: 100ms; }

.result-tour {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 0.78rem;
  color: var(--text-light-sub);
  line-height: 1.85;
  letter-spacing: 0.04em;
  margin: 0 0 24px;
  animation: resultItemIn 400ms ease-out 1300ms both;
}

.result-footer {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 0.78rem;
  color: rgba(197, 184, 166, 0.45);
  line-height: 1.7;
  padding: 16px 0;
  margin: 0;
}

/* ============ レスポンシブ ============ */
@media (max-width: 480px) {
  .title-photo-bg {
    background-image: url('https://images.pexels.com/photos/33143524/pexels-photo-33143524.jpeg?auto=compress&cs=tinysrgb&w=800&h=600&fit=crop');
  }
  .result-photo-bg {
    background-image: url('https://images.pexels.com/photos/5993559/pexels-photo-5993559.jpeg?auto=compress&cs=tinysrgb&w=800&h=600&fit=crop');
  }
}

@media (min-width: 481px) {
  .canvas-wrapper { width: 420px; }
  .timer-bar-wrap { width: 420px; }
}

@media (min-width: 769px) {
  .canvas-wrapper { width: 480px; }
  .timer-bar-wrap { width: 480px; }
  .btn-judge { min-height: 60px; font-size: 1.05rem; }
  .screen { padding: 32px 40px; }
}

@media (max-width: 380px) {
  .judge-buttons { flex-direction: column; }
  .btn-judge { min-height: 52px; }
}

/* ============ prefers-reduced-motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .title-bg, .fiber-overlay { animation: none !important; }
  .canvas-wrapper.is-leaving { animation: none !important; opacity: 0; }
  .canvas-wrapper.is-entering { animation: none !important; opacity: 1; }
  .feedback-overlay.is-pass,
  .feedback-overlay.is-fail {
    animation: none !important;
    opacity: 0.35 !important;
    transition: none !important;
  }
  .timer-fill { transition: none !important; }
  .defect-highlight.is-visible {
    animation: none !important;
    opacity: 1 !important;
    transform: scale(1) !important;
  }
  .result-score, .result-rank, .result-poem,
  .result-breakdown, .result-bestscore, .result-eclink,
  .result-cta, .result-tour {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}