body {
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  margin: 0;
  background: #0b0f14;
  color: #e9eef5;
  background-image: var(--bg-pc, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}

.card {
  background: #111826;
  border: 1px solid #1f2a3a;
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}

.row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.row.space {
  justify-content: space-between;
}

input,
button,
label {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #2a3950;
  background: #0c1420;
  color: #e9eef5;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

button {
  cursor: pointer;
}

hr {
  border: none;
  border-top: 1px solid #1f2a3a;
  margin: 16px 0;
}

.hidden {
  display: none;
}

.announcement {
  background: #fbbf24;
  color: #1a202c;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.msg {
  margin-top: 10px;
  color: #9bdcff;
}

/* Result Content Wrapper (Frame) */
.resultContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  gap: 8px;
  padding: 0 0 calc(env(safe-area-inset-bottom, 20px) + 20px) 0;
  box-sizing: border-box;
}

.resultTitle {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
  text-align: center;
  width: 100%;
}

.resultRetryBtn {
  width: calc(100% - 32px);
  /* Add margin back for button */
  max-width: 400px;
  padding: 10px 0;
  font-size: 16px;
  font-weight: bold;
  margin-top: 4px;
  min-width: 200px;
}

/* Result Images Dynamic Sizing */
.images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  /* Reduced gap from 12px */
  width: 100%;
}

.imgbox {
  background: transparent;
  padding: 0;
  position: relative;
  overflow: visible;
  /* Changed for 3D spin */
  box-sizing: border-box;
  aspect-ratio: 1 / 1 !important;
  /* Square card ratio */
  display: block;
  perspective: 1000px;
  /* For 3D spin */
}

/* 1 items: almost full width (max 400px -> 800px) but fit within screen height */
.images[data-count="1"] .imgbox {
  width: min(100%, 50vh);
  /* Limit to 50% of screen height to avoid cutoff */
  max-width: 320px;
  /* Cap at 320px */
  margin: 0 auto;
  /* Center it */
}

.images[data-count="1"] img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 2 items: side by side */
.images[data-count="2"] .imgbox,
.images[data-count="4"] .imgbox {
  width: calc(50% - 4px);
  /* Adjust for 8px gap */
  max-width: 400px;
  /* Reduced from 600px */
}

.images[data-count="2"] img,
.images[data-count="4"] img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 3 or more: standard grid (auto-fit logic simulated with flex or strict) */
/* Fallback for count > 2 (excluding 4) */
/* Changed to 2 columns (50%) on mobile for larger images */
.images:not([data-count="1"]):not([data-count="2"]):not([data-count="4"]) .imgbox {
  width: calc(50% - 4px);
  /* 2 columns on mobile */
  max-width: 300px;
}

/* Desktop override for 3+ items: 3 columns */
@media (min-width: 640px) {
  .images:not([data-count="1"]):not([data-count="2"]):not([data-count="4"]) .imgbox {
    width: calc(33.333% - 6px);
    max-width: 220px;
  }
}

.images:not([data-count="1"]):not([data-count="2"]):not([data-count="4"]) img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.imgbox img {
  /* Default base styles */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  display: block;
  object-fit: cover;
  border: 2px solid #ffd700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.6),
    inset 0 0 10px rgba(255, 215, 0, 0.2);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.empty {
  padding: 16px;
  opacity: .8;
}

.list {
  display: grid;
  gap: 10px;
}

.item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 12px;
  align-items: center;
  background: #0c1420;
  border: 1px solid #1f2a3a;
  border-radius: 12px;
  padding: 10px;
}

.thumb img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.meta {
  font-size: 14px;
  line-height: 1.6;
}

.primary {
  padding: 12px 16px;
  font-weight: 700;
}

/* ===== 演出動画：PCもスマホも縦（9:16）で安定表示 ===== */
.videoBox {
  width: clamp(280px, 34vh, 520px);
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #1f2a3a;
  margin: 0 auto;
}

#effectVideo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* ===== 結果画面：金フラ演出（オーバーレイ） ===== */
#screenResult.resultFx {
  position: relative;
}

.kinFlaFx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.kinFlaFx.run {
  animation: kinFlaFlash 520ms ease-out forwards;
}

@keyframes kinFlaFlash {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.kinFlaFx::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 240, 170, .95) 0%, rgba(255, 240, 170, 0) 55%),
    conic-gradient(from 0deg,
      rgba(255, 220, 120, 0) 0deg,
      rgba(255, 220, 120, .35) 12deg,
      rgba(255, 220, 120, 0) 24deg,
      rgba(255, 220, 120, .28) 40deg,
      rgba(255, 220, 120, 0) 56deg,
      rgba(255, 220, 120, .32) 72deg,
      rgba(255, 220, 120, 0) 88deg);
  mix-blend-mode: screen;
  filter: blur(0.15px);
  transform: scale(0.95);
  opacity: 0;
}

.kinFlaFx.run::before {
  animation: rays 520ms ease-out forwards;
}

@keyframes rays {
  0% {
    opacity: 0;
    transform: scale(.9) rotate(0deg);
  }

  15% {
    opacity: 1;
    transform: scale(1.05) rotate(8deg);
  }

  100% {
    opacity: 0;
    transform: scale(1.15) rotate(18deg);
  }
}

.kinFlaFx::after {
  content: "";
  position: absolute;
  top: -35%;
  left: -90%;
  width: 70%;
  height: 200%;
  transform: rotate(18deg);
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .55) 35%,
      rgba(255, 255, 255, .95) 45%,
      rgba(255, 236, 170, .95) 50%,
      rgba(255, 255, 255, .95) 55%,
      rgba(255, 255, 255, .55) 65%,
      rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: screen;
  opacity: 0;
}

.kinFlaFx.run::after {
  animation: sweep2 520ms ease-out forwards;
}

@keyframes sweep2 {
  0% {
    left: -90%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  100% {
    left: 160%;
    opacity: 0;
  }
}

#screenResult.shake {
  animation: shake 280ms ease-out;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-3px);
  }

  40% {
    transform: translateX(3px);
  }

  60% {
    transform: translateX(-2px);
  }

  80% {
    transform: translateX(2px);
  }

  100% {
    transform: translateX(0);
  }
}

/* ===== 確画像：光演出 ===== */
.imgbox.reveal .card-inner {
  transform: rotateY(0deg);
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  /* Start flipped (showing back) */
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 12px;
}

.card-front {
  transform: rotateY(0deg);
}

.card-back {
  transform: rotateY(180deg);
}

.imgbox.reveal .card-front::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -60%;
  width: 60%;
  height: 180%;
  transform: rotate(18deg);
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .55) 35%,
      rgba(255, 236, 170, .85) 50%,
      rgba(255, 255, 255, .55) 65%,
      rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: screen;
  animation: sweep 520ms ease-out forwards;
  pointer-events: none;
}

@keyframes sweep {
  0% {
    left: -80%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  100% {
    left: 140%;
    opacity: 0;
  }
}

.imgbox.reveal .card-front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(255, 220, 120, .65), 0 0 36px rgba(255, 170, 60, .35);
  opacity: 0;
  animation: glowPulse 900ms ease-out forwards;
  pointer-events: none;
}

@keyframes glowPulse {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  60% {
    opacity: .55;
  }

  100% {
    opacity: .25;
  }
}

.imgbox.reveal .card-front img {
  animation: imgBright 900ms ease-out forwards;
}

@keyframes imgBright {
  0% {
    filter: brightness(1) contrast(1);
  }

  20% {
    filter: brightness(1.25) contrast(1.05);
  }

  100% {
    filter: brightness(1.05) contrast(1.02);
  }
}

.powered {
  margin-top: 4px;
  margin-bottom: 0;
  opacity: .7;
  font-size: 12px;
  text-align: right;
}

.disclaimer {
  margin-top: 2px;
  margin-bottom: 0;
  font-size: 10px;
  color: #000;
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
  text-align: center;
  line-height: 1.4;
}


/* タップして結果へ（演出後） */
.tapBtn {
  display: block;
  width: min(420px, 100%);
  margin: 12px auto 0;
}


@media (max-width: 640px) {
  body {
    background-image: var(--bg-sp, var(--bg-pc, none));
    background-attachment: scroll;
  }
}


.bgPreview {
  width: 220px;
  aspect-ratio: 16/9;
  background: #000;
  border: 1px solid #1f2a3a;
  border-radius: 12px;
  overflow: hidden;
}

.bgPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* スタート画面 背景（PC/SP 固定） */
.startScreen {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.startScreen>* {
  position: relative;
  z-index: 2;
}

.startScreen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/start-bg-pc.png") center/cover no-repeat;
  z-index: 0;
}

@media (max-width: 640px) {
  .startScreen::before {
    background-image: url("/start-bg-sp.png");
  }
}

/* 読みやすさ用のうっすら暗幕（不要なら消せます） */
.startScreen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  z-index: 1;
}


/* 共通：演出・結果・スタート画面 背景（PC/SP 固定） */
.goldBg {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.goldBg>* {
  position: relative;
  z-index: 2;
}

.goldBg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/start-bg-pc.png") center/cover no-repeat;
  z-index: 0;
}

@media (max-width: 640px) {
  .goldBg::before {
    background-image: url("/start-bg-sp.png");
  }
}

/* 読みやすさ用のうっすら暗幕（不要なら透明に） */
.goldBg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  z-index: 1;
}


.startBtnImg {
  width: 92%;
}


/* ロゴ分の余白（ボタンや説明がロゴに被らない） */
.startDecor .center {
  padding-top: 220px;
}

@media (max-width: 640px) {
  .startDecor .center {
    padding-top: 180px;
  }
}

.resultTitle {
  font-size: 32px;
  font-weight: 900;
  margin: 0;
  text-align: center;
  width: 100%;
  width: 100%;
  color: transparent;
  /* Gold gradient text */
  background: linear-gradient(to bottom, #fff 0%, #ffeb3b 50%, #fbc02d 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Stroke effect workaround */
  filter: drop-shadow(0 3px 0 #000) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.9));
}


/* 演出後「タップで結果!!」ボタン画像 */
.tapBtnImg {
  width: min(820px, 92%);
  aspect-ratio: 2048 / 550;
  background: url("/after-btn.png") center/contain no-repeat;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
  margin: 12px auto 0;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .45));
  background-color: transparent;
}

.tapBtnImg:active {
  transform: translateY(1px);
}

@media (max-width: 640px) {
  .tapBtnImg {
    width: 92%;
  }
}


/* Disabled Start Button */
.startBtnImg.disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(1);
}

.disabledMsg {
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px 20px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

/* ボタン 金フラ風（帯2回＋フラッシュ） */
.shineBtn {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  /* ボタンの角丸に追従 */
}

/* 走る帯 */
.shineBtn::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -55%;
  width: 12%;
  height: 190%;
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 248, 220, .18) 30%,
      rgba(255, 255, 255, .80) 50%,
      rgba(255, 248, 220, .18) 70%,
      rgba(255, 255, 255, 0) 100%);
  transform: skewX(-15deg);
  filter: blur(0.35px);
  opacity: 0;
  animation: goldSweep 2.8s ease-in-out infinite;
  pointer-events: none;
}

/* 最後のフラッシュ（面発光） */
.shineBtn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%,
      rgba(255, 255, 255, .95) 0%,
      rgba(255, 235, 160, .55) 28%,
      rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  mix-blend-mode: screen;
  animation: goldFlash 2.8s ease-in-out infinite;
  pointer-events: none;
}

/* 2回走って最後にフラッシュ */
@keyframes goldSweep {

  /* sweep #1 */
  0% {
    left: -70%;
    opacity: 0;
  }

  8% {
    opacity: .95;
  }

  22% {
    left: 120%;
    opacity: .55;
  }

  28% {
    opacity: 0;
    left: 120%;
  }

  /* small pause */
  40% {
    left: -70%;
    opacity: 0;
  }

  /* sweep #2 */
  48% {
    opacity: .95;
  }

  62% {
    left: 120%;
    opacity: .55;
  }

  68% {
    opacity: 0;
    left: 120%;
  }

  /* tail */
  100% {
    left: 120%;
    opacity: 0;
  }
}

@keyframes goldFlash {

  0%,
  70% {
    opacity: 0;
  }

  76% {
    opacity: .15;
  }

  82% {
    opacity: .65;
  }

  86% {
    opacity: .20;
  }

  100% {
    opacity: 0;
  }
}

/* 押したときは一旦止める */
.shineBtn:active::before,
.shineBtn:active::after {
  animation-play-state: paused;
  opacity: 0;
}

/* 端末の省電力設定（動きを減らす）に対応 */
@media (prefers-reduced-motion: reduce) {

  .shineBtn::before,
  .shineBtn::after {
    animation: none;
    opacity: 0;
  }
}

/* 押したときの沈み込みを帯にも反映 */
.shineBtn:active::before {
  animation-play-state: paused;
  opacity: 0;
}

/* 端末の省電力設定（動きを減らす）に対応 */
@media (prefers-reduced-motion: reduce) {
  .shineBtn::before {
    animation: none;
    opacity: 0;
  }
}


/* =========================
   レイアウト：フルスクリーン化
   ========================= */
body.page-game {
  min-height: 100vh;
}

body.page-game {
  margin: 0;
}

body.page-game .wrap {
  min-height: 100vh;
  max-width: none;
  padding: 0;
}

body.page-game .wrap>h1 {
  display: none;
}

/* ゲームページのみ */

body.page-game .card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

body.page-game .screen {
  border-radius: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


/* 透明ボタンの青いアウトラインを消す */
body.page-game .startBtnHotspot:focus {
  outline: none;
}

body.page-game .startBtnHotspot {
  -webkit-tap-highlight-color: transparent;
}


/* =========================
   スタート画面：ポスター画像（見切れ防止）
   - PCは16:9の枠で全体表示（contain）
   - SPは縦長（9:16）で全体表示
   ========================= */
body.page-game .posterStage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  margin: 0 auto;
  display: grid;
  place-items: center;
}

@media (max-width: 640px) {
  body.page-game .posterStage {
    width: min(100vw, calc(100vh * 9 / 16));
    height: min(100vh, calc(100vw * 16 / 9));
  }
}

body.page-game .posterStage picture,
body.page-game .posterStage .posterImg {
  width: 100%;
  height: 100%;
  display: block;
}

body.page-game .posterImg {
  object-fit: contain;
  /* ここが見切れ防止 */
}



/* =========================
   スタートボタン：画像＋光（ボタンに完全一致）
   ========================= */
body.page-game .startBtnImg {
  /* ポスター内のボタン位置：必要ならここだけ微調整 */
  --btn-w: 82%;
  --btn-bottom: 20%;

  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--btn-bottom);

  width: var(--btn-w);
  aspect-ratio: 2048 / 550;

  background: url("/start-btn.png") center/contain no-repeat;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 22px;

  /* 光をボタン内だけに閉じ込める */
  overflow: hidden;

  /* 余計な枠を消す */
  outline: none;
  -webkit-tap-highlight-color: transparent;

  /* ほんのり浮かせる（不要なら消してOK） */
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .30));
}

body.page-game .startBtnImg:focus,
body.page-game .startBtnImg:focus-visible {
  outline: none;
}

@media (max-width: 640px) {
  body.page-game .startBtnImg {
    --btn-w: 86%;
    --btn-bottom: 20%;
    border-radius: 20px;
  }
}


/* =========================
   Start Screen BG + Bottom Button (startbgbtn_1770833390)
   ========================= */
body.page-game #screenStart {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

body.page-game #screenStart .startBg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

body.page-game #screenStart .startBg picture,
body.page-game #screenStart .startBg img {
  width: 100%;
  height: 100%;
  display: block;
}

body.page-game #screenStart .startBg img {
  object-fit: cover;
  /* フル画面にフィット */
  object-position: center;
}

/* UI layer */
body.page-game #screenStart .startUi {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 12vh;
  /* 下段に配置 (Raised from 6vh) */
}

/* start button image */
body.page-game .startBtnImg {
  width: min(64vw, 720px);
  aspect-ratio: 2048 / 550;
  background: url("/start-btn.png") center/contain no-repeat;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 22px;
  overflow: hidden;
  /* 光を中に閉じ込める */
  outline: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .30));
}

body.page-game .startBtnImg:focus,
body.page-game .startBtnImg:focus-visible {
  outline: none;
}

@media (max-width: 640px) {
  body.page-game #screenStart .startUi {
    padding-bottom: 40vh;
    /* Raised even further */
  }

  body.page-game .startBtnImg {
    width: 88vw;
    border-radius: 20px;
    margin-bottom: 5vh;
    /* Extra push */
  }
}

/* Round PUSH artwork: use its native proportions and a larger touch target. */
body.page-game #screenStart #startBtn {
  width: min(68vw, 46vh, 540px);
  height: auto;
  aspect-ratio: 1374 / 1145;
  top: 70%;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border-radius: 50%;
}

/* ensure shine follows radius */
.shineBtn {
  border-radius: inherit;
}


/* Desktop tuning (startbgbtn_tuned_1770834452) */
@media (min-width: 1024px) {
  body.page-game #screenStart .startUi {
    padding-bottom: 4vh;
    /* Lowered from 12vh to 4vh */
  }

  body.page-game .startBtnImg {
    width: min(52vw, 640px);
    border-radius: 22px;
  }
}


/* =========================
   Shine override (narrower) shineShort_1770834742
   ========================= */
body.page-game .shineBtn::before {
  width: 7% !important;
  /* ← 超細く */
  left: -40% !important;
  top: -25% !important;
  filter: blur(0.10px) !important;
}

/* 帯を“短く見せる”ために光の中心を細めに */
body.page-game .shineBtn::before {
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 248, 220, .10) 42%,
      rgba(255, 255, 255, .85) 50%,
      rgba(255, 248, 220, .10) 58%,
      rgba(255, 255, 255, 0) 100%) !important;
}



/* =========================
   Flow update: video fullscreen + black bg (flowVideoBlack_1770835860)
   ========================= */
body.page-game #screenVideo {
  position: fixed;
  inset: 0;
  background: #000;
  /* 演出中は黒背景 */
  display: none;
  z-index: 50;
}

body.page-game #screenVideo.active {
  display: block;
}

body.page-game #screenVideo .videoWrap {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.page-game #effectVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* スマホは全画面 */
  background: #000;
}

@media (min-width: 768px) {
  body.page-game #effectVideo {
    width: auto;
    height: 100%;
    max-height: 100vh;
    max-width: min(60vh, 520px);
    /* PCは中央に縦動画 */
    object-fit: contain;
    /* 見切れ防止 */
  }
}

body.page-game #screenAfter {
  position: fixed;
  inset: 0;
  background: transparent;
  display: none;
  z-index: 60;
}

body.page-game #screenAfter.active {
  display: block;
}

body.page-game #screenAfter .afterUi {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 7vh;
}

body.page-game .afterBtnImg {
  width: min(86vw, 980px);
  aspect-ratio: 2048 / 550;
  background: url("/after-btn.png") center/contain no-repeat;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 22px;
  overflow: hidden;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .35));
}

@media (min-width: 1024px) {
  body.page-game .afterBtnImg {
    width: min(52vw, 640px);
  }
}

@media (max-width: 640px) {
  body.page-game .afterBtnImg {
    width: 88vw;
    border-radius: 20px;
  }
}


/* =========================
   Tap flow fullscreen video (tapflowFull_1770836681)
   ========================= */
body.page-game #screenVideo {
  position: fixed;
  inset: 0;
  background: #000;
  display: none;
  z-index: 90;
}

body.page-game #screenVideo.active {
  display: block;
}

body.page-game #screenVideo .videoWrap {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.page-game #effectVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* SP: 全画面 */
  background: #000;
}

@media (min-width: 768px) {
  body.page-game #effectVideo {
    width: auto;
    height: 100%;
    max-height: 100vh;
    max-width: min(62vh, 560px);
    /* PC: 真ん中に縦動画 */
    object-fit: contain;
  }
}

body.page-game .videoTapOverlay {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.page-game .videoTapOverlay:focus,
body.page-game .videoTapOverlay:focus-visible {
  outline: none;
}

body.page-game .videoTapHint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 7vh;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .92);
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
  pointer-events: none;
}


/* =========================
   Tap-flow FINAL (repairFinal_1770837808)
   ========================= */
body.page-game #screenVideo {
  position: fixed;
  inset: 0;
  background: #000;
  display: none;
  z-index: 90;
}

body.page-game #screenVideo.active {
  display: block;
}

body.page-game #screenVideo .videoWrap {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.page-game #effectVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* SP full */
  background: #000;
}

@media (min-width: 768px) {
  body.page-game #effectVideo {
    width: auto;
    height: 100%;
    max-height: 100vh;
    max-width: min(62vh, 560px);
    /* PC centered vertical */
    object-fit: contain;
  }
}

body.page-game .videoTapOverlay {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.page-game .videoTapHint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 7vh;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
  pointer-events: none;
}


/* FORCE_HIDE_AFTER_SCREEN (flowSVR_1770838041) */
#screenAfter {
  display: none !important;
}

/* SCREEN_VISIBILITY_RULES (flowSVR_1770838041) */
#screenStart {
  display: block;
}

#screenVideo {
  display: none;
}

#screenResult {
  display: none;
}

#screenVideo.active {
  display: block;
}

#screenResult.active {
  display: block;
}


/* =========================
   FULLSCREEN SCREEN STACK (cleanNoBottom_1770838422)
   Prevent "bottom screen" showing under start.
   ========================= */
.screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: none !important;
  overflow: hidden !important;
}

#screenResult.active {
  overflow-y: auto !important;
  display: block !important;
  padding-top: 50px;
}

.screen.active {
  display: flex !important;
}

/* make sure removed screenAfter cannot appear even if cached html */
#screenAfter,
#afterBtn,
.afterBtnImg,
.afterUi {
  display: none !important;
}


/* REMOVE_TAP_TO_RESULT (autoResultNoTap_1770838740) */
#videoTapOverlay,
.videoTapHint {
  display: none !important;
}

/* Sound Toggle Button */
.soundToggle {
  position: absolute;
  bottom: 128px;
  /* Moved down 1.5 buttons (72px) from 200px */
  right: 20px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.soundToggle:active {
  background: rgba(255, 255, 255, 0.2);
}

/* =========================
   Tap Screen (Black & Pulse)
   ========================= */
#screenTap {
  background-color: #000;
  background-image: url("/tap-bg.jpg");
  background-size: cover;
  /* Default cover for mobile */
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

@media (min-width: 1024px) {
  #screenTap {
    background-size: contain;
    /* Contain for PC to prevent cutoff */
  }
}

.tapContent {
  width: 100%;
  display: flex;
  justify-content: center;
}

.tapPulseBtn {
  background: none;
  border: 2px solid #fff;
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  padding: 1rem 3rem;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  animation: tapPulse 1.5s infinite;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@keyframes tapPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }

  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* Per-image points, below the card and revealed with its result. */
.images .imgbox.has-points { margin-bottom: 72px; }
.result-points {
  position: absolute; top: 100%; left: 0; width: 100%;
  margin: 8px 0 0; color: #ffe480; font-size: clamp(18px, 4vw, 28px);
  font-weight: 900; text-align: center; overflow-wrap: anywhere;
  line-height: 1.2; text-shadow: 0 2px 4px #000; visibility: hidden;
}
.imgbox.reveal .result-points { visibility: visible; transition-delay: .4s; }
.image-points-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.image-points-field input { width: 110px; box-sizing: border-box; }
.image-points-editors { width: 100%; margin-bottom: 12px; }
.image-points-editor { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.image-points-editor img { object-fit: cover; border-radius: 4px; }
.image-points-editor label { display: flex; flex-direction: column; font-size: 12px; gap: 4px; }
.image-points-editor input { width: 140px; }
.points-status { font-size: 12px; }

.img-slot { display: flex; flex-direction: column; gap: 6px; }
.img-slot .img-slot-preview { order: -1; }

.image-points-editor .history-display-label { flex-direction: row; align-items: center; }
.image-points-editor .history-display-label input { width: auto; }
#previousResults { width: 100%; margin-top: 16px; }
#previousResults h3 { text-align: center; color: #ffe480; }