/* =========================================================
   assets/style.css — Pixelated horror doors
   - 赤・紫・青・黄の4扉
   - 小型化（PC: 96px）
   - 右開き統一
   - スマホでも横並び（2列）
   ========================================================= */

body {
  margin: 0;
  background: #0f1116;
  color: #fff;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* スクリーンリーダー用 */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Main ===== */
.home-root {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 28px 16px;
}

/* ===== 扉グリッド ===== */
.doors {
  --door-w: 96px;
  --door-gap: 56px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, var(--door-w)));
  justify-content: center;
  gap: var(--door-gap);
  width: min(96vw, 1080px);
  perspective: 900px;
}

@media (max-width: 960px) {
  .doors {
    --door-w: 92px;
    --door-gap: 52px;
    width: min(94vw, 860px);
  }
}

@media (max-width: 640px) {
  .doors {
    grid-template-columns: repeat(2, var(--door-w)); /* 2列表示 */
    --door-w: min(40vw, 120px);
    --door-gap: 6vw;
    width: 100%;
    justify-content: center;
  }
}

/* ===== 扉共通 ===== */
.door {
  position: relative;
  display: block;
  width: var(--door-w);
  aspect-ratio: 3 / 5;
  text-decoration: none;
  border: 3px solid #b8a24b; /* 真鍮枠 */
  border-radius: 2px;
  image-rendering: pixelated;
  transform-style: preserve-3d;
  box-shadow: 0 8px 0 0 #443714;
}

.door .door-panel {
  position: absolute;
  inset: 0;
  --px: 22px;
  image-rendering: pixelated;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 2px, transparent 2px var(--px)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.30) 0 2px, transparent 2px var(--px));
  box-shadow:
    inset 0 0 0 4px rgba(0,0,0,.55),
    inset 0 0 60px rgba(0,0,0,.55),
    inset 0 10px 0 rgba(255,255,255,.06);
  transform-origin: left center; /* 右開き */
  transition: transform .18s steps(4, end), filter .18s;
}

/* 赤 */
.door--red .door-panel {
  background-color: #7a0e12;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 2px, transparent 2px var(--px)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.30) 0 2px, transparent 2px var(--px)),
    repeating-linear-gradient(90deg, #7a0e12 0 var(--px), #520a0c var(--px) calc(var(--px)*2));
}

/* 紫 */
.door--purple .door-panel {
  background-color: #371a52;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 2px, transparent 2px var(--px)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.30) 0 2px, transparent 2px var(--px)),
    repeating-linear-gradient(90deg, #4a2370 0 var(--px), #2b143f var(--px) calc(var(--px)*2));
}

/* 青 */
.door--blue .door-panel {
  background-color: #0d1b44;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 2px, transparent 2px var(--px)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.30) 0 2px, transparent 2px var(--px)),
    repeating-linear-gradient(90deg, #0d1b44 0 var(--px), #07122e var(--px) calc(var(--px)*2));
}

/* 黄（buddha-shmup） */
.door--yellow .door-panel {
  background-color: #b08c12;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px var(--px)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 2px, transparent 2px var(--px)),
    repeating-linear-gradient(90deg, #d4b12a 0 var(--px), #7a6112 var(--px) calc(var(--px)*2));
}

/* ノブ */
.door .door-panel::after {
  content: "";
  position: absolute;
  right: 16%;
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--px) - 6px);
  height: calc(var(--px) - 6px);
  border: 2px solid #5f4e1e;
  background: radial-gradient(circle at 35% 35%, #9d8b3b 35%, #4a3b16 70%);
  box-shadow: 0 0 0 1px #3a2f12, 0 0 6px rgba(157,139,59,.35);
  image-rendering: pixelated;
  pointer-events: none;
}

/* 傷 */
.door .door-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .10;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 1px, transparent 1px 12px);
  pointer-events: none;
}

/* hover */
.door:hover .door-panel {
  transform: translateY(-2px);
  filter: contrast(1.06) saturate(1.02);
}

/* focus */
.door:focus-visible {
  outline: 2px dashed #ffe08a;
  outline-offset: 6px;
}

/* ===== 開扉アニメ（右開き統一） ===== */
@keyframes door-open-rightHinge {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(-88deg); }
}

.door.is-opening .door-panel { filter: brightness(1.03) contrast(1.08); }

.door--red.is-opening .door-panel,
.door--purple.is-opening .door-panel,
.door--blue.is-opening .door-panel,
.door--yellow.is-opening .door-panel {
  animation: door-open-rightHinge 560ms steps(7, end) forwards;
}

/* ===== ホワイトアウト ===== */
.whiteout {
  position: fixed;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms steps(7, end);
}
.whiteout.show { opacity: 1; }

/* 低モーション対応 */
@media (prefers-reduced-motion: reduce) {
  .door .door-panel { transition: none !important; }
  .door.is-opening .door-panel { animation: none !important; }
  .whiteout { transition: none !important; }
}