/* 『詰んでないもん！』公開ページ共通CSS。外部CDN・外部フォント・スクリプトは使わない */
:root {
  --curtain: #670201;
  --curtain-deep: #3a0000;
  --gold: #d9a441;
  --gold-light: #f2d27a;
  --green: #1c5a2b;
  --green-deep: #0f3a1b;
  --lime: #8cd40f;
  --yellow: #fdd00a;
  --wood: #a54804;
  --cream: #fbf3dc;
  --paper: #fffaf0;
  --ink: #2b1a10;
  --ink-soft: #5a4636;
  --radius: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  line-height: 1.8;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 18px, rgba(255,60,40,.07) 18px 40px, rgba(0,0,0,.1) 40px 64px),
    linear-gradient(180deg, var(--curtain) 0%, var(--curtain-deep) 100%);
  background-color: var(--curtain-deep);
  min-height: 100vh;
}
a { color: var(--green); }
img { max-width: 100%; height: auto; }
.wrap { width: min(100% - 32px, 960px); margin-inline: auto; }

/* 幕の飾りは見出し周辺だけ */
.stage-top { position: relative; overflow: hidden; border-bottom: 4px solid var(--gold); background: linear-gradient(180deg, #4d0000, var(--curtain)); }
.stage-top::before, .stage-top::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 46%; background-size: auto 100%; background-repeat: no-repeat; pointer-events: none;
}
.stage-top::before { left: 0; background-image: url(assets/curtain-left.jpg); background-position: left top; }
.stage-top::after { right: 0; background-image: url(assets/curtain-right.jpg); background-position: right top; }
.stage-top > * { position: relative; z-index: 1; }
.logo { display: block; width: min(86vw, 520px); margin: 0 auto; padding: 22px 0 16px; }
.logo img { display: block; width: 100%; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.site-nav { text-align: center; padding-bottom: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.site-nav a {
  color: var(--cream); background: rgba(15,58,27,.9); border: 1px solid var(--gold); border-radius: 999px;
  padding: 4px 16px; text-decoration: none; font-weight: 700; font-size: .92rem;
}
.site-nav a:hover, .site-nav a:focus-visible { background: var(--green); outline: 2px solid var(--gold-light); }

/* ファーストビュー */
.hero { padding: 28px 0 36px; text-align: center; color: var(--cream); }
.hero-stage { display: flex; align-items: flex-end; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hero-stage img { height: 240px; width: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.bubble {
  position: relative; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 26px;
  padding: 14px 22px; max-width: 420px; text-align: left; margin-bottom: 70px;
}
.bubble::after { content: ""; position: absolute; left: -17px; bottom: 26px; width: 22px; height: 22px; background: var(--paper); border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); }
.bubble .copy { font-size: clamp(1.45rem, 5.6vw, 2.1rem); font-weight: 900; line-height: 1.35; margin: 0; }
.bubble .sub { margin: 6px 0 0; font-size: .95rem; color: var(--ink-soft); line-height: 1.6; }
.lead { max-width: 640px; margin: 18px auto 0; font-size: 1.02rem; text-shadow: 0 1px 3px rgba(0,0,0,.7); }

.btn {
  display: inline-block; background: var(--green); color: #fff; font-weight: 800; text-decoration: none; text-align: center;
  padding: 12px 26px; border-radius: 999px; border: 3px solid var(--gold); box-shadow: 0 4px 0 var(--green-deep);
  margin-top: 20px; line-height: 1.4;
}
.btn:hover, .btn:focus-visible { background: #257a39; outline: 2px solid var(--gold-light); outline-offset: 2px; }

/* 紙面パネル */
.panel { background: var(--paper); border: 3px solid var(--gold); border-radius: var(--radius); padding: 24px clamp(18px, 4vw, 36px); margin: 28px 0; box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.panel h2 { margin: 0 0 12px; font-size: 1.4rem; line-height: 1.4; color: var(--green-deep); }
.panel h3 { margin: 22px 0 6px; font-size: 1.1rem; color: var(--green); }
.panel p, .panel li { margin: .5em 0; }
.panel ul, .panel ol { padding-left: 1.4em; }
.points { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); list-style: none; padding: 0 !important; }
.points li { background: var(--cream); border: 2px solid var(--gold); border-radius: 12px; padding: 14px 16px; }
.points strong { display: block; color: var(--green-deep); margin-bottom: 4px; }
.teasers { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.screen { border: 4px solid var(--gold); border-radius: 8px; background: var(--cream); padding: 14px; text-align: center; }
.screen .tag { display: inline-block; background: var(--cream); border: 1px solid var(--gold); color: var(--wood); font-size: .78rem; font-weight: 700; padding: 0 10px; border-radius: 999px; }
.screen img { height: 150px; width: auto; display: block; margin: 8px auto; }
.screen .btn { margin-top: 10px; font-size: .95rem; padding: 10px 18px; }
.cta-center { text-align: center; }
.note { font-size: .88rem; color: var(--ink-soft); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { border: 1px solid #d8c9a6; padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: var(--cream); white-space: nowrap; }
.en { border-top: 2px dashed var(--gold); margin-top: 28px; padding-top: 4px; }
.en h2 { font-size: 1.15rem; }

/* フッター */
.site-footer { background: linear-gradient(180deg, #2a1204, #120700); border-top: 8px solid var(--wood); color: var(--cream); padding: 22px 0 34px; margin-top: 40px; font-size: .92rem; }
.site-footer a { color: var(--gold-light); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 10px; }
.site-footer p { margin: .4em 0; }

@media (max-width: 720px) {
  .points { grid-template-columns: 1fr; }
  .hero-stage img { height: 190px; }
  .bubble { margin-bottom: 0; }
  .bubble::after { display: none; }
  .btn { display: block; }
  .stage-top::before, .stage-top::after { width: 60%; opacity: .55; }
}

/* 標準動画のスクリーンショット */
.open-shot { display: block; border: 4px solid var(--gold); border-radius: 8px; overflow: hidden; margin: 8px 0 14px; box-shadow: 0 6px 14px rgba(0,0,0,.4); }
.open-shot img { display: block; width: 100%; }
.shots { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 14px 0; }
.shot { margin: 0; }
.shot a { display: block; border: 3px solid var(--gold); border-radius: 6px; overflow: hidden; }
.shot a:hover, .shot a:focus-visible { outline: 3px solid var(--green); }
.shot img { display: block; width: 100%; }
.shot figcaption { text-align: center; font-weight: 700; font-size: .9rem; color: var(--wood); }

/* ランキング */
.rank { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 16px; }
.rank-item { display: grid; grid-template-columns: 52px minmax(0, 260px) 1fr; gap: 14px; align-items: center; background: var(--cream); border: 2px solid var(--gold); border-radius: 12px; padding: 12px; }
.rank-no { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: #fff; border: 3px solid var(--gold); font-weight: 900; font-size: 1.4rem; }
.rank-item:nth-child(1) .rank-no { background: var(--yellow); color: var(--ink); }
.rank-img { display: block; border: 3px solid var(--gold); border-radius: 6px; overflow: hidden; }
.rank-img img { display: block; width: 100%; height: auto; }
.rank-title { font-weight: 800; margin: 0 0 4px; }
.rank-body p { margin: .2em 0; }
.rank-body .btn { margin-top: 8px; font-size: .92rem; padding: 8px 18px; }
@media (max-width: 720px) {
  .rank-item { grid-template-columns: 44px 1fr; }
  .rank-no { width: 40px; height: 40px; font-size: 1.15rem; }
  .rank-img { grid-column: 2; }
  .rank-body { grid-column: 1 / -1; }
}

.app-note { font-size: .82rem; color: var(--cream); opacity: .85; margin: 20px 0 0; text-align: center; }
.app-note a { color: var(--gold-light); }