/*
 * ひどいパワーポイント風。わざとダサくしている。
 * - 外部のフォント・画像は読まない。フォントは端末にあるものを並べるだけ（無い端末向けの代わりも並べる）
 * - 図形（爆発・矢印・吹き出し）は CSS だけで描く
 * - ダーク表示には合わせない。どちらの環境でも同じ見た目になるよう、色はすべて明示する
 * - 動きは prefers-reduced-motion: reduce のときは止める。点滅は 1 秒に 1 回まで
 * - 光過敏への配慮: 明暗の切り替わりは 1 秒に 3 回まで（WCAG 2.3.1）。速く大きく動かさない（下の「入り方」の決まり）
 */

:root {
  color-scheme: light;

  --f-pop: "HG創英角ﾎﾟｯﾌﾟ体", "HGSoeiKakupoptai", "HGP創英角ﾎﾟｯﾌﾟ体", "HGPSoeiKakupoptai", "HG創英角ポップ体",
    "Comic Sans MS", "Chalkboard SE", "Marker Felt", "Hiragino Maru Gothic ProN", "Yu Gothic UI", sans-serif;
  --f-comic: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO",
    "Hiragino Maru Gothic ProN", cursive, sans-serif;
  --f-mincho: "MS P明朝", "MS PMincho", "ＭＳ Ｐ明朝", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --f-gothic: "MS PGothic", "ＭＳ Ｐゴシック", "MS Pゴシック", "Osaka", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --f-impact: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", "Franklin Gothic Bold", sans-serif;
  --f-times: "Times New Roman", Times, "MS PMincho", serif;

  --rainbow: linear-gradient(90deg, #ff0000, #ff9900, #ffff00, #33ff00, #00ffff, #0033ff, #cc00ff, #ff0000);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: #000000;
  background-color: #ff00ff;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0 12px, rgba(255, 255, 255, 0) 12px 24px),
    linear-gradient(135deg, #ff0080 0%, #ff8c00 18%, #ffef00 36%, #00e640 54%, #00b3ff 72%, #7a00ff 90%, #ff0080 100%);
  font-family: var(--f-gothic);
  line-height: 1.5;
  text-align: center;
  word-break: auto-phrase;
  overflow-wrap: break-word;
}

p,
ul,
h1 {
  margin: 0;
}

a {
  color: #0000ee;
  text-decoration: underline;
}

a:visited {
  color: #551a8b;
}

a:hover {
  color: #ff0000;
}

:focus-visible {
  outline: 4px dashed #0000ff;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px #ffffff;
}

/* スライドの並び。横から飛んでくるものが横スクロールを生まないよう、はみ出しは切る */

.deck {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  overflow-x: hidden;
  overflow-x: clip;
  container-type: inline-size;
}

/* 16:9 を最小の形にし、中身が多いとき（スマホ幅など）は縦に伸ばす。
   aspect-ratio と overflow: hidden を組み合わせると中身が切れるので、幅から最小の高さを決める */
.slide {
  position: relative;
  min-height: calc(100cqi * 9 / 16);
  margin: 0 auto 28px;
  padding: 92px 18px 52px;
  overflow: hidden;
  background-color: #ffff99;
  background-image: radial-gradient(circle at 20% 15%, #ffffff 0%, #ffffcc 18%, #ffff66 40%, #66ffff 75%, #ff99ff 100%);
  border: 8px double #0000cc;
  box-shadow: 0 0 0 4px #ff0000, 10px 10px 0 4px #000000;
}

@media (min-width: 640px) {
  .slide {
    padding: 36px 28px 52px;
  }
}

.page-no {
  position: absolute;
  right: 10px;
  bottom: 8px;
  padding: 1px 8px;
  font-family: var(--f-times);
  font-size: 0.875rem;
  color: #000000;
  background: #ffffff;
  border: 1px solid #000000;
}

/* 爆発の図形 */

.burst {
  position: absolute;
  top: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  font-family: var(--f-impact);
  font-size: 1rem;
  line-height: 1;
  clip-path: polygon(
    50% 0%, 61% 18%, 79% 7%, 79% 28%, 98% 30%, 86% 46%, 100% 62%, 80% 67%, 84% 88%, 64% 82%,
    50% 100%, 37% 82%, 16% 88%, 20% 67%, 0% 62%, 14% 46%, 2% 30%, 21% 28%, 21% 7%, 39% 18%
  );
}

.burst span {
  display: block;
  rotate: -12deg;
}

.burst-new {
  left: 6px;
  color: #ffff00;
  background: #ff0000;
  animation: spin 7s linear infinite;
}

.burst-free {
  right: 6px;
  color: #ff0000;
  background: #ffff00;
  animation: pulse 1.6s ease-in-out infinite;
}

@media (min-width: 640px) {
  .burst {
    top: 10px;
    width: 124px;
    height: 124px;
    font-size: 1.5rem;
  }
}

/* WordArt 風のタイトル */

.wordart {
  position: relative;
  z-index: 1;
  font-family: var(--f-pop);
  font-weight: 900;
  line-height: 1.15;
  animation: wobble 2.6s ease-in-out infinite;
}

.wordart-line {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  font-size: clamp(1.9rem, 9vw, 4rem);
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: var(--rainbow);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px #000000;
  filter: drop-shadow(3px 3px 0 #ffffff) drop-shadow(4px 4px 0 #000080);
  animation: rainbow 3s linear infinite;
}

.wordart-1 {
  transform: perspective(300px) rotateX(18deg) rotate(-4deg) skewX(-8deg);
}

.wordart-2 {
  transform: rotate(3deg) skewX(10deg) scaleY(1.15);
}

.subtitle {
  margin-top: 14px;
  font-family: var(--f-mincho);
  font-size: 1.1rem;
  font-weight: bold;
  color: #ff0000;
  text-decoration: underline wavy #0000ff;
  text-shadow: 1px 1px 0 #ffffff;
}

.blink {
  animation: blink 1s steps(1) infinite;
}

/* 意味のない箇条書き。横から飛んでくる */

.bullets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  margin-top: 10px;
  padding: 0;
  list-style: none;
}

.bullet {
  font-weight: bold;
  text-decoration: underline;
  animation: fly-in-left 1s ease-out both;
}

.bullet::before {
  content: "◆";
  margin-right: 2px;
  color: #ff00ff;
}

.b1 {
  font-family: var(--f-pop);
  font-size: 1.15rem;
  color: #ff0000;
  rotate: -3deg;
}

.b2 {
  font-family: var(--f-comic);
  font-size: 1.3rem;
  color: #0000ff;
  rotate: 2deg;
  animation-delay: 0.3s;
}

.b3 {
  font-family: var(--f-impact);
  font-size: 1.2rem;
  color: #008000;
  rotate: -1deg;
  animation-delay: 0.6s;
}

.notice {
  margin: 12px auto 0;
  padding: 8px 12px;
  font-weight: bold;
  color: #ffffff;
  background: #cc0000;
  border: 3px solid #000000;
}

/* 矢印 */

.arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  animation: bounce 1s ease-in-out infinite;
}

.arrow-label {
  font-family: var(--f-pop);
  font-size: 1.25rem;
  font-weight: bold;
  color: #ff0000;
  text-decoration: underline;
  text-shadow: 2px 2px 0 #ffff00, -1px -1px 0 #ffff00;
}

.arrow-shape {
  display: block;
  width: 56px;
  height: 40px;
  background: linear-gradient(#ff0000, #ff9900);
  clip-path: polygon(30% 0, 70% 0, 70% 50%, 100% 50%, 50% 100%, 0 50%, 30% 50%);
}

/* 入力 */

.check-form {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 6px auto 0;
  padding: 14px;
  background: #ffffff;
  border: 4px dashed #ff00ff;
  box-shadow: 6px 6px 0 #00cc00;
  rotate: -1deg;
}

.field-label {
  display: block;
  font-family: var(--f-impact);
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: #0000ff;
  text-decoration: underline;
}

.field-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.field-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px;
  font-family: var(--f-gothic);
  font-size: 1.125rem; /* 16px 未満だと iOS で拡大されるため */
  text-align: center;
  color: #000000;
  background: #ffffcc;
  border: 3px inset #808080;
  border-radius: 0;
}

button {
  font: inherit;
  cursor: pointer;
}

.toggle {
  flex: 0 0 auto;
  padding: 0 12px;
  font-family: var(--f-gothic);
  font-size: 1rem;
  color: #000000;
  background: #c0c0c0;
  border: 3px outset #ffffff;
  border-radius: 0;
}

.toggle:active {
  border-style: inset;
}

.hint {
  margin-top: 8px;
  font-family: var(--f-comic);
  font-size: 0.875rem;
  font-weight: bold;
  color: #800080;
}

.primary {
  display: block;
  width: 100%;
  margin: 12px auto 0;
  padding: 8px 16px;
  font-family: var(--f-pop);
  font-size: 1.6rem;
  font-weight: 900;
  color: #ff0000;
  text-shadow: 2px 2px 0 #ffffff;
  background: linear-gradient(180deg, #ffff66 0%, #ffcc00 45%, #ff9900 55%, #ffff00 100%);
  border: 5px outset #ffcc00;
  border-radius: 18px;
  animation: pulse 1.6s ease-in-out infinite;
}

.primary span {
  text-decoration: underline;
}

.primary:active {
  border-style: inset;
}

.primary:disabled,
.primary[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
  animation: none;
}

.primary:disabled {
  cursor: not-allowed;
}

@media (min-width: 640px) {
  .primary {
    width: auto;
    min-width: 14rem;
  }
}

.status {
  margin-top: 10px;
  font-family: var(--f-pop);
  font-size: 1.1rem;
  font-weight: bold;
  color: #ff0000;
  text-decoration: underline;
  text-shadow: 1px 1px 0 #ffffff;
}

.status:empty {
  margin-top: 0;
}

/* 意味のない吹き出し */

.bubble {
  position: relative;
  display: inline-block;
  margin: 22px auto 10px;
  padding: 10px 18px;
  font-family: var(--f-comic);
  font-weight: bold;
  color: #0000ff;
  background: #ffffff;
  border: 3px solid #000000;
  border-radius: 50% / 45%;
  rotate: 4deg;
  animation: wobble 2s ease-in-out infinite;
}

.bubble::after {
  content: "";
  position: absolute;
  left: 22%;
  bottom: -18px;
  border-style: solid;
  border-width: 18px 8px 0 8px;
  border-color: #000000 transparent transparent transparent;
}

.bubble-head {
  display: block;
  font-family: var(--f-pop);
  font-size: 1.2rem;
  color: #ff0000;
  text-decoration: underline;
}

/* 送らないことの一文とスライド番号 */

.privacy {
  max-width: 34em;
  margin: 10px auto 0;
  padding: 4px 8px;
  font-family: var(--f-mincho);
  font-size: 0.95rem;
  font-weight: bold;
  color: #0000cc;
  text-decoration: underline;
  background: #ffffff;
  border: 2px solid #0000cc;
}

.slide-footer {
  margin-top: 14px;
  font-family: var(--f-times);
  font-size: 0.8125rem;
  color: #000000;
}

/* 結果のスライド */

/* 放射模様の 2 色は、明るさ（相対輝度）の差が 0.1 未満の組にする。動いても明暗の点滅にならないように */
.slide-result {
  padding-top: 28px;
  background-color: #ffff99;
  background-image: repeating-conic-gradient(from 0deg at 50% 40%, #ffff00 0deg 15deg, #ccffff 15deg 30deg);
  border-color: #ff0000;
  box-shadow: 0 0 0 4px #0000cc, 10px 10px 0 4px #000000;
}

.slide-result[hidden] {
  display: none;
}

.kicker {
  display: inline-block;
  padding: 6px 18px;
  font-family: var(--f-impact);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  color: #ffff00;
  background: #cc0000;
  border: 3px solid #000000;
  box-shadow: 4px 4px 0 #000000;
  transform: skewX(-12deg) rotate(-3deg);
}

.headline {
  margin: 14px auto 8px;
  max-width: 100%;
  font-family: var(--f-impact);
  font-size: clamp(2.2rem, 11vw, 5.5rem);
  line-height: 1.05;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: var(--rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px #000000;
  filter: drop-shadow(4px 4px 0 #ffffff) drop-shadow(3px 3px 0 #000000);
  overflow-wrap: anywhere;
  animation: pulse 2.4s ease-in-out infinite;
}

/* エラーの文は長いので、読める色と大きさにする */
.slide-result[data-tone="error"] .headline {
  padding: 6px 10px;
  font-family: var(--f-pop);
  font-size: clamp(1.3rem, 6vw, 2.4rem);
  color: #cc0000;
  -webkit-text-fill-color: #cc0000;
  background: #ffffff;
  -webkit-text-stroke: 0;
  border: 3px solid #000000;
  filter: none;
  animation: none;
}

.slide-result[data-tone="error"] .kicker {
  color: #ffffff;
  background: #333333;
}

.slide-result[data-tone="not-found"] .kicker {
  color: #000000;
  background: #c0c0c0;
}

.taunt-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.taunt-line {
  max-width: 100%;
  padding: 6px 12px;
  font-weight: bold;
  background: #ffffff;
  border: 3px solid #000000;
  box-shadow: 4px 4px 0 #000000;
  overflow-wrap: anywhere;
  animation: fly-in-right 1s ease-out both;
}

.taunt-line:nth-child(2) {
  animation-delay: 0.25s;
}

.taunt-line:nth-child(3) {
  animation-delay: 0.5s;
}

.taunt-line:nth-child(4) {
  animation-delay: 0.75s;
}

.tl-0 {
  font-family: var(--f-pop);
  font-size: 1.25rem;
  color: #ff0000;
  text-decoration: underline;
  rotate: -2deg;
}

.tl-1 {
  font-family: var(--f-mincho);
  font-size: 1.1rem;
  font-style: italic;
  color: #0000cc;
  background: #ffff00;
  rotate: 1.5deg;
}

.tl-2 {
  font-family: var(--f-comic);
  font-size: 1.15rem;
  color: #008000;
  text-decoration: underline wavy #ff00ff;
  rotate: -1deg;
}

.tl-3 {
  font-family: var(--f-impact);
  font-size: 1.35rem;
  color: #800080;
  background: #ccffcc;
  rotate: 2deg;
}

/*
 * 結果のスライドの入り方（スライド切り替え風）
 * 光過敏への配慮で、速く大きく動かさない（WCAG 2.3.1: 明暗の切り替わりは 1 秒に 3 回まで）。
 * - fly-right / fly-left: ワイプ。中身は動かさず、見える範囲を右から / 左から広げる（各画素は 1 回変わるだけ）
 * - spin: フェード＋少しだけ傾いた所から戻る / bounce: フェード＋少し上から落ちて小さく弾む / zoom: フェード＋少し大きい所から縮む
 * - 時間は 1.2 秒以上。回転は 4 度まで、移動は 16px まで、拡大・縮小は 0.96〜1.08 倍まで（tests/static.test.mjs で確かめる）
 * - 影まで見えるよう、ワイプの切り抜きはスライドの外側 24px まで広げる
 */

.slide-result[data-transition="fly-right"] {
  animation: enter-fly-right 1.2s ease-in-out both;
}

.slide-result[data-transition="fly-left"] {
  animation: enter-fly-left 1.2s ease-in-out both;
}

.slide-result[data-transition="spin"] {
  animation: enter-spin 1.4s ease-out both;
}

.slide-result[data-transition="bounce"] {
  animation: enter-bounce 1.4s ease-out both;
}

.slide-result[data-transition="zoom"] {
  animation: enter-zoom 1.2s ease-out both;
}

@keyframes enter-fly-right {
  from {
    clip-path: polygon(calc(100% + 24px) -24px, calc(100% + 24px) -24px, calc(100% + 24px) calc(100% + 24px), calc(100% + 24px) calc(100% + 24px));
  }
  to {
    clip-path: polygon(-24px -24px, calc(100% + 24px) -24px, calc(100% + 24px) calc(100% + 24px), -24px calc(100% + 24px));
  }
}

@keyframes enter-fly-left {
  from {
    clip-path: polygon(-24px -24px, -24px -24px, -24px calc(100% + 24px), -24px calc(100% + 24px));
  }
  to {
    clip-path: polygon(-24px -24px, calc(100% + 24px) -24px, calc(100% + 24px) calc(100% + 24px), -24px calc(100% + 24px));
  }
}

@keyframes enter-spin {
  from { transform: rotate(-4deg) scale(0.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes enter-bounce {
  0% { transform: translateY(-16px); opacity: 0; }
  60% { transform: translateY(4px); opacity: 1; }
  80% { transform: translateY(-2px); }
  100% { transform: none; opacity: 1; }
}

@keyframes enter-zoom {
  from { transform: scale(1.08); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* 動きの部品（ずっと動くもの）。1 周は 1 秒以上、回転は 1 秒に 60 度まで */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes wobble {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

@keyframes rainbow {
  to { background-position: 200% 0; }
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* 箇条書きと結果の文は、透明から少しだけ横にずれた所から出る（画面の幅ぶんは飛ばさない） */

@keyframes fly-in-left {
  from { transform: translateX(-16px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes fly-in-right {
  from { transform: translateX(16px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* 動きを控える設定のときは、すべて止める（最後の形のまま出す） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}