/* ========================================
   基本
======================================== */

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;

  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow-x: hidden;

  color: #fff;

  font-family:
    "Arial Black", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  background:
    radial-gradient(circle at 50% 20%, rgba(110, 0, 25, 0.4), transparent 38%),
    radial-gradient(circle at 15% 80%, rgba(20, 0, 80, 0.35), transparent 35%),
    radial-gradient(circle at 85% 75%, rgba(0, 40, 80, 0.25), transparent 35%),
    linear-gradient(180deg, #170002 0%, #080004 48%, #020203 100%);
}

/* ========================================
   筐体
======================================== */

main {
  position: relative;

  width: min(92%, 560px);

  padding: 32px;

  text-align: center;

  border: 5px solid transparent;

  border-radius: 30px;

  background:
    linear-gradient(180deg, #303033 0%, #161619 18%, #09090b 65%, #020203 100%)
      padding-box,
    linear-gradient(135deg, #fff4a8, #c99319, #fff0a0, #7b4900, #ffd75c)
      border-box;

  box-shadow:
    0 0 0 3px #4d0700,
    0 0 0 6px #180000,
    0 16px 45px rgba(0, 0, 0, 0.75),
    0 0 24px rgba(255, 35, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 30px rgba(255, 180, 0, 0.05);

  transition:
    box-shadow 0.3s ease,
    filter 0.3s ease;
}

main::after {
  content: "";

  position: absolute;

  inset: 10px;

  border: 1px solid rgba(255, 220, 120, 0.2);

  border-radius: 19px;

  pointer-events: none;
}

/* ========================================
   タイトル
======================================== */

h1 {
  position: relative;

  margin: 2px 0 26px;

  color: #ffe97a;

  font-size: clamp(28px, 6vw, 44px);

  font-weight: 900;

  letter-spacing: 1px;

  text-shadow:
    0 1px 0 #9b5b00,
    0 2px 0 #684000,
    0 0 4px rgba(255, 255, 255, 0.55),
    0 0 9px rgba(255, 190, 0, 0.65);
}

/* ========================================
   名前入力
======================================== */

textarea {
  width: 100%;

  height: 145px;

  padding: 16px;

  margin-bottom: 26px;

  resize: vertical;

  color: #111;

  font-family: sans-serif;

  font-size: 17px;

  outline: none;

  border: 3px solid #bb8618;

  border-radius: 12px;

  background: linear-gradient(180deg, #fffef3 0%, #eee9d5 100%);

  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, 0.22),
    0 0 0 2px rgba(255, 213, 70, 0.06);

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

textarea:focus {
  border-color: #ffe67b;

  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, 0.2),
    0 0 10px rgba(255, 210, 50, 0.35);
}

/* ========================================
   トグル
======================================== */

.toggle-text {
  letter-spacing: 1px;
}

.toggle-switch {
  position: relative;

  width: 52px;
  height: 28px;

  flex-shrink: 0;
}

.toggle-switch input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
}

.toggle-slider {
  position: absolute;

  inset: 0;

  border: 2px solid #675522;

  border-radius: 999px;

  background: #1b1b1b;

  box-shadow:
    inset 0 0 6px #000,
    0 0 4px rgba(255, 210, 50, 0.15);

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.toggle-slider::before {
  content: "";

  position: absolute;

  top: 3px;
  left: 3px;

  width: 18px;
  height: 18px;

  border-radius: 50%;

  background: linear-gradient(180deg, #aaa, #555);

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.toggle-switch input:checked + .toggle-slider {
  border-color: #ffd84d;

  background: #6b1200;

  box-shadow:
    inset 0 0 8px rgba(255, 50, 0, 0.6),
    0 0 10px rgba(255, 210, 40, 0.45);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(24px);

  background: linear-gradient(180deg, #fff4a5, #ffb400);
}

/* ========================================
   設定エリア
======================================== */

.settings-area {
  margin: -5px auto 24px;
}

.settings-row {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 34px;

  margin-bottom: 16px;
}

.push-mode-toggle,
.sound-toggle {
  display: flex;
  align-items: center;

  gap: 10px;

  color: #d8c372;

  font-size: 14px;
  font-weight: bold;

  cursor: pointer;

  user-select: none;
}

.toggle-text {
  letter-spacing: 1px;
}

/* ========================================
   音量
======================================== */

.volume-control {
  width: min(100%, 330px);

  display: flex;
  align-items: center;

  gap: 12px;

  margin: 0 auto;

  transition:
    opacity 0.2s ease,
    filter 0.2s ease;
}

.volume-label {
  flex-shrink: 0;

  color: #d8c372;

  font-size: 13px;
  font-weight: bold;

  letter-spacing: 1px;
}

.volume-value {
  width: 42px;

  flex-shrink: 0;

  color: #ffe675;

  font-size: 12px;
  font-weight: bold;

  text-align: right;
}

/* バー */
.volume-slider {
  flex: 1;

  height: 6px;

  appearance: none;
  -webkit-appearance: none;

  border-radius: 999px;

  outline: none;

  background: linear-gradient(90deg, #ffb000, #ffe45c);

  box-shadow:
    inset 0 0 4px #000,
    0 0 6px rgba(255, 200, 30, 0.3);

  cursor: pointer;
}

/* Chrome / Edge / Safari */
.volume-slider::-webkit-slider-thumb {
  width: 18px;
  height: 18px;

  appearance: none;
  -webkit-appearance: none;

  border: 2px solid #ffd84d;
  border-radius: 50%;

  background: radial-gradient(
    circle at 35% 30%,
    #fff,
    #ffd84d 35%,
    #d47800 100%
  );

  box-shadow: 0 0 7px rgba(255, 210, 50, 0.75);

  cursor: pointer;
}

/* Firefox */
.volume-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;

  border: 2px solid #ffd84d;
  border-radius: 50%;

  background: #ffcb32;

  cursor: pointer;
}

/* 効果音OFF */
.volume-control.disabled {
  opacity: 0.3;

  filter: grayscale(1);

  pointer-events: none;
}

/* スマホ */
@media (max-width: 600px) {
  .settings-row {
    gap: 18px;
  }

  .push-mode-toggle,
  .sound-toggle {
    gap: 7px;

    font-size: 12px;
  }

  .volume-control {
    width: 100%;
  }
}

/* ========================================
   操作パネル
======================================== */

.control-panel {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 20px;

  margin: 8px 0 30px;
}

/* ========================================
   PUSH
======================================== */

.push-unit {
  display: flex;

  flex-direction: column;

  align-items: center;
}

.start-button {
  position: relative;

  width: 126px;
  height: 126px;

  display: flex;

  justify-content: center;
  align-items: center;

  padding: 0;

  color: #fff;

  border: 7px solid transparent;

  border-radius: 50%;

  background:
    radial-gradient(
        circle at 37% 28%,
        #fff 0%,
        #ffaea4 5%,
        #ff4333 16%,
        #e40000 40%,
        #940000 66%,
        #420000 100%
      )
      padding-box,
    linear-gradient(145deg, #fff5a0, #ffc72e, #835000, #fff09a, #9e5800)
      border-box;

  box-shadow:
    0 9px 0 #572000,
    0 12px 0 #140700,
    0 14px 18px rgba(0, 0, 0, 0.75),
    0 0 12px rgba(255, 35, 0, 0.35),
    inset 0 4px 7px rgba(255, 255, 255, 0.55),
    inset 0 -8px 12px rgba(80, 0, 0, 0.7);

  cursor: pointer;

  transition:
    transform 0.09s ease,
    box-shadow 0.09s ease,
    filter 0.15s ease;
}

.start-button::after {
  content: "";

  position: absolute;

  top: 11px;
  left: 22px;

  width: 66px;
  height: 28px;

  border-radius: 50%;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), transparent);

  transform: rotate(-8deg);

  pointer-events: none;
}

.button-main-text {
  position: relative;

  z-index: 2;

  font-size: 28px;

  font-weight: 900;

  letter-spacing: 1px;

  text-shadow:
    0 2px 1px #5d0000,
    0 0 5px rgba(255, 255, 255, 0.75);
}

.start-button:disabled {
  filter: brightness(0.48) saturate(0.65);

  cursor: not-allowed;
}

.start-button.ready {
  filter: none;

  animation: pushReady 0.42s ease-in-out infinite alternate;

  cursor: pointer;
}

.start-button:active:not(:disabled),
.start-button.pressed {
  transform: translateY(8px) scale(0.98);

  box-shadow:
    0 1px 0 #572000,
    0 3px 0 #140700,
    0 0 28px rgba(255, 60, 0, 0.9),
    inset 0 7px 12px rgba(70, 0, 0, 0.55);
}

/* ========================================
   レバー
======================================== */

.lever-button {
  position: relative;

  width: 105px;
  height: 120px;

  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;
}

.lever-button:disabled {
  cursor: not-allowed;
}

.lever-assembly {
  position: absolute;

  top: 6px;
  left: 50%;

  width: 80px;
  height: 110px;

  transform: translateX(-50%);
}

.lever-knob {
  position: absolute;

  top: 0;
  left: 50%;

  width: 48px;
  height: 48px;

  transform: translateX(-50%);

  border: 4px solid #d3a733;

  border-radius: 50%;

  background: radial-gradient(
    circle at 36% 28%,
    #fff 0%,
    #ff9c91 8%,
    #ef1b10 32%,
    #8b0000 70%,
    #350000 100%
  );

  box-shadow:
    0 5px 7px rgba(0, 0, 0, 0.65),
    0 0 10px rgba(255, 40, 0, 0.35),
    inset 0 3px 4px rgba(255, 255, 255, 0.42);

  z-index: 3;

  transition:
    transform 0.12s cubic-bezier(0.2, 0.8, 0.3, 1),
    filter 0.12s ease-out,
    box-shadow 0.12s ease-out;
}

.lever-stick {
  position: absolute;

  top: 40px;
  left: 50%;

  width: 12px;
  height: 52px;

  transform: translateX(-50%);

  border-radius: 5px;

  background: linear-gradient(90deg, #4c4c4c, #eee, #777, #222);

  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

  transition:
    transform 0.12s cubic-bezier(0.2, 0.8, 0.3, 1),
    height 0.12s ease-out;
}

.lever-base {
  position: absolute;

  bottom: 0;
  left: 50%;

  width: 70px;
  height: 32px;

  transform: translateX(-50%);

  border: 3px solid #ad7814;

  border-radius: 50%;

  background: radial-gradient(
    ellipse at center,
    #444 0%,
    #151515 62%,
    #050505 100%
  );

  box-shadow:
    inset 0 0 7px #000,
    0 4px 7px rgba(0, 0, 0, 0.7);
}

.lever-button.pulled .lever-knob {
  transform: translateX(-50%) translateY(24px) scale(0.96);
}

.lever-button.pulled .lever-stick {
  transform: translateX(-50%) translateY(16px);

  height: 36px;
}

/* ========================================
   リール
======================================== */

.reel-window {
  position: relative;

  height: 100px;

  overflow: hidden;

  border: 4px solid transparent;

  border-radius: 15px;

  background:
    linear-gradient(180deg, #010101 0%, #101014 48%, #010101 100%) padding-box,
    linear-gradient(135deg, #fff29c, #b87800, #ffe35e, #7f4700, #ffd95a)
      border-box;

  box-shadow:
    0 0 0 2px #351000,
    inset 0 0 22px rgba(255, 0, 0, 0.18),
    0 0 10px rgba(255, 190, 0, 0.25);

  transition:
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.reel-window::before,
.reel-window::after {
  content: "";

  position: absolute;

  left: 0;

  width: 100%;
  height: 30px;

  z-index: 4;

  pointer-events: none;
}

.reel-window::before {
  top: 0;

  background: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, 0.75) 45%,
    transparent 100%
  );
}

.reel-window::after {
  bottom: 0;

  background: linear-gradient(
    to top,
    #000 0%,
    rgba(0, 0, 0, 0.75) 45%,
    transparent 100%
  );
}

.reel-center-line {
  position: absolute;

  top: 50%;
  left: 0;
  right: 0;

  height: 68px;

  transform: translateY(-50%);

  z-index: 3;

  pointer-events: none;
}

.reel-center-line::before,
.reel-center-line::after {
  content: "";

  position: absolute;

  top: 50%;

  width: 0;
  height: 0;

  transform: translateY(-50%);

  border-top: 8px solid transparent;

  border-bottom: 8px solid transparent;
}

.reel-center-line::before {
  left: 7px;

  border-left: 11px solid #ffd84d;
}

.reel-center-line::after {
  right: 7px;

  border-right: 11px solid #ffd84d;
}

.reel-track {
  transform: translateY(0);

  will-change: transform;
}

.reel-item {
  height: 100px;

  display: flex;

  justify-content: center;
  align-items: center;

  padding: 0 35px;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  font-size: clamp(30px, 8vw, 52px);

  font-weight: 900;

  color: #fff1a6;

  text-shadow:
    0 1px 0 #8f4800,
    0 0 4px #fff,
    0 0 7px rgba(255, 40, 0, 0.8);

  user-select: none;
}

/* ========================================
   回転中
======================================== */

.reel-window.spinning {
  animation:
    spinningBorder 0.8s linear infinite,
    reelPulse 0.32s ease-in-out infinite alternate;
}

.reel-window.spinning .reel-track {
  filter: blur(1.15px);
}

main:has(.reel-window.spinning) {
  animation: cabinetRainbow 1.7s linear infinite;
}

/* ========================================
   PUSH待ち
======================================== */

.reel-window.push-ready {
  animation: pushReadyReel 0.42s ease-in-out infinite alternate;
}

/* ========================================
   当選リール
======================================== */

.reel-window.winner {
  animation: reelWinner 0.45s ease-out 2;
}

/* ========================================
   当選オーバーレイ
======================================== */

.winner-overlay {
  position: fixed;

  inset: 0;

  display: flex;

  justify-content: center;
  align-items: center;

  overflow: hidden;

  opacity: 0;

  visibility: hidden;

  z-index: 1000;

  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 210, 0, 0.08) 20%,
    rgba(10, 0, 15, 0.93) 58%,
    #000 100%
  );
}

.winner-overlay::before {
  content: "";

  position: absolute;

  width: 160vmax;
  height: 160vmax;

  background: repeating-conic-gradient(
    from 0deg,

    rgba(255, 0, 65, 0.32) 0deg 10deg,

    rgba(255, 145, 0, 0.29) 10deg 20deg,

    rgba(255, 235, 0, 0.26) 20deg 30deg,

    rgba(0, 255, 125, 0.23) 30deg 40deg,

    rgba(0, 195, 255, 0.25) 40deg 50deg,

    rgba(120, 60, 255, 0.27) 50deg 60deg,

    rgba(255, 0, 225, 0.3) 60deg 70deg
  );

  opacity: 0;

  filter: blur(5px);

  pointer-events: none;
}

.winner-overlay::after {
  content: "";

  position: absolute;

  inset: 0;

  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 35%,
    rgba(0, 0, 0, 0.72) 100%
  );

  pointer-events: none;
}

.winner-overlay.show {
  opacity: 1;

  visibility: visible;
}

.winner-overlay.show::before {
  opacity: 0.58;

  animation:
    rainbowRotate 4s linear infinite,
    rainbowBreath 0.7s ease-in-out infinite alternate;
}

/* ========================================
   当選中央
======================================== */

.winner-content {
  position: relative;

  z-index: 2;

  width: min(88%, 900px);

  padding: 44px 40px 40px;

  text-align: center;

  background: rgba(0, 0, 0, 0.78);

  border: 3px solid rgba(255, 215, 70, 0.95);

  border-radius: 28px;

  box-shadow:
    0 0 0 2px rgba(120, 60, 0, 0.7),
    0 0 35px rgba(255, 190, 0, 0.42),
    inset 0 0 35px rgba(255, 180, 0, 0.08);

  backdrop-filter: blur(5px);
}

.winner-overlay.show .winner-content {
  animation: winnerAppear 0.52s cubic-bezier(0.16, 1.32, 0.3, 1);
}

.winner-label {
  margin-bottom: 28px;

  color: #ffe75a;

  font-size: clamp(28px, 5vw, 48px);

  font-weight: 900;

  letter-spacing: 14px;

  -webkit-text-stroke: 1px #8a3c00;

  text-shadow:
    0 2px 0 #7a3500,
    0 0 4px #fff,
    0 0 10px rgba(255, 215, 0, 0.8);
}

/* ========================================
   当選者名
======================================== */

.winner-name {
  width: 100%;

  margin: 0 auto;

  white-space: nowrap;

  overflow: hidden;

  text-align: center;

  font-size: clamp(85px, 18vw, 190px);

  font-weight: 900;

  line-height: 1.05;

  letter-spacing: 0.03em;

  background: linear-gradient(
    180deg,
    #fff 0%,
    #fffbd0 15%,
    #ffe35c 38%,
    #ffad16 60%,
    #fff0a3 82%,
    #fff 100%
  );

  background-clip: text;

  -webkit-background-clip: text;

  color: transparent;

  -webkit-text-stroke: 2px rgba(120, 45, 0, 0.9);

  filter: drop-shadow(0 4px 0 #711c00)
    drop-shadow(0 0 8px rgba(255, 210, 0, 0.85));

  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.7),
    0 0 14px rgba(255, 215, 0, 0.6);
}

/* ========================================
   閉じる
======================================== */

.close-winner-button {
  margin-top: 75px;

  min-width: 190px;

  padding: 15px 34px;

  color: #fff;

  font-size: 17px;

  font-weight: bold;

  letter-spacing: 2px;

  border: 2px solid #ffd750;

  border-radius: 999px;

  background: linear-gradient(180deg, #333 0%, #171717 55%, #080808 100%);

  box-shadow:
    0 4px 0 #4a3000,
    0 0 10px rgba(255, 210, 50, 0.28);

  cursor: pointer;
}

.close-winner-button:hover {
  filter: brightness(1.25);

  box-shadow:
    0 4px 0 #4a3000,
    0 0 18px rgba(255, 210, 50, 0.55);
}

.close-winner-button:active {
  transform: translateY(3px);
}

/* ========================================
   白フラッシュ
======================================== */

.screen-flash {
  position: fixed;

  inset: 0;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  z-index: 2000;

  background: #fff;
}

.screen-flash.active {
  visibility: visible;

  animation: screenFlash 0.28s ease-out;
}

/* ========================================
   レバー発光
======================================== */

main.lever-fired {
  animation: leverIgnition 0.32s ease-out;
}

main.lever-fired .lever-knob {
  animation: leverKnobIgnition 0.32s ease-out;
}

main.lever-fired h1 {
  animation: titleIgnition 0.32s ease-out;
}

/* ========================================
   PUSHアニメーション
======================================== */

@keyframes pushReady {
  from {
    filter: brightness(0.9);

    box-shadow:
      0 9px 0 #572000,
      0 12px 0 #140700,
      0 0 10px rgba(255, 20, 0, 0.4),
      inset 0 4px 7px rgba(255, 255, 255, 0.5);
  }

  to {
    filter: brightness(1.35);

    box-shadow:
      0 9px 0 #572000,
      0 12px 0 #140700,
      0 0 30px rgba(255, 230, 40, 1),
      0 0 50px rgba(255, 40, 0, 0.65),
      inset 0 4px 8px rgba(255, 255, 255, 0.75);
  }
}

@keyframes pushReadyReel {
  from {
    box-shadow:
      0 0 7px rgba(255, 180, 0, 0.3),
      inset 0 0 12px rgba(255, 0, 0, 0.1);
  }

  to {
    box-shadow:
      0 0 22px rgba(255, 215, 0, 0.85),
      inset 0 0 20px rgba(255, 170, 0, 0.2);
  }
}

/* ========================================
   リール回転
======================================== */

@keyframes spinningBorder {
  0% {
    border-color: #ff004c;

    box-shadow: 0 0 16px #ff004c;
  }

  16% {
    border-color: #ff8a00;

    box-shadow: 0 0 16px #ff8a00;
  }

  33% {
    border-color: #ffe600;

    box-shadow: 0 0 16px #ffe600;
  }

  50% {
    border-color: #00e673;

    box-shadow: 0 0 16px #00e673;
  }

  66% {
    border-color: #00c8ff;

    box-shadow: 0 0 16px #00c8ff;
  }

  83% {
    border-color: #ad42ff;

    box-shadow: 0 0 16px #ad42ff;
  }

  100% {
    border-color: #ff004c;

    box-shadow: 0 0 16px #ff004c;
  }
}

@keyframes reelPulse {
  from {
    filter: brightness(0.95);
  }

  to {
    filter: brightness(1.14);
  }
}

@keyframes cabinetRainbow {
  0% {
    box-shadow:
      0 0 0 3px #ff004c,
      0 0 22px rgba(255, 0, 76, 0.7);
  }

  25% {
    box-shadow:
      0 0 0 3px #ffd000,
      0 0 22px rgba(255, 208, 0, 0.7);
  }

  50% {
    box-shadow:
      0 0 0 3px #00d8ff,
      0 0 22px rgba(0, 216, 255, 0.7);
  }

  75% {
    box-shadow:
      0 0 0 3px #ad42ff,
      0 0 22px rgba(173, 66, 255, 0.7);
  }

  100% {
    box-shadow:
      0 0 0 3px #ff004c,
      0 0 22px rgba(255, 0, 76, 0.7);
  }
}

/* ========================================
   当選
======================================== */

@keyframes reelWinner {
  0% {
    transform: scale(1);
  }

  55% {
    transform: scale(1.05);

    box-shadow:
      0 0 25px rgba(255, 230, 0, 0.9),
      0 0 45px rgba(255, 0, 65, 0.65);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes winnerAppear {
  0% {
    opacity: 0;

    transform: perspective(800px) scale(2.5) rotateX(-18deg);
  }

  46% {
    opacity: 1;

    transform: perspective(800px) scale(0.9) rotateX(0);
  }

  70% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes rainbowRotate {
  from {
    transform: rotate(0deg) scale(1.1);
  }

  to {
    transform: rotate(360deg) scale(1.1);
  }
}

@keyframes rainbowBreath {
  from {
    filter: brightness(0.75) saturate(1.3);
  }

  to {
    filter: brightness(1.25) saturate(1.6);
  }
}

/* ========================================
   フラッシュ
======================================== */

@keyframes screenFlash {
  0% {
    opacity: 1;
  }

  35% {
    opacity: 0.88;
  }

  100% {
    opacity: 0;
  }
}

/* ========================================
   レバー演出
======================================== */

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

  20% {
    filter: brightness(1.45);

    box-shadow:
      0 0 0 3px #ff1c00,
      0 0 18px #ff2500,
      0 0 42px rgba(255, 0, 0, 0.9),
      inset 0 0 35px rgba(255, 30, 0, 0.35);
  }

  100% {
    filter: brightness(1);
  }
}

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

  20% {
    filter: brightness(1.8) saturate(1.4);

    box-shadow:
      0 0 12px #fff,
      0 0 24px #ff2b00,
      0 0 38px rgba(255, 0, 0, 0.85);
  }

  100% {
    filter: brightness(1);
  }
}

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

  25% {
    color: #fff4a0;

    filter: brightness(1.5);

    text-shadow:
      0 0 4px #fff,
      0 0 10px #ffd400,
      0 0 22px #ff2800;
  }

  100% {
    filter: brightness(1);
  }
}

/* ========================================
   画面揺れ
======================================== */

body.shake {
  animation: screenShake 0.34s ease-out;
}

@keyframes screenShake {
  0% {
    transform: translate(0, 0);
  }

  12% {
    transform: translate(-9px, 3px);
  }

  25% {
    transform: translate(8px, -5px);
  }

  38% {
    transform: translate(-7px, -2px);
  }

  52% {
    transform: translate(6px, 4px);
  }

  68% {
    transform: translate(-4px, 2px);
  }

  84% {
    transform: translate(2px, -1px);
  }

  100% {
    transform: translate(0, 0);
  }
}

/* ========================================
   スマホ
======================================== */

@media (max-width: 600px) {
  body {
    align-items: flex-start;

    padding: 24px 0;
  }

  main {
    width: 92%;

    padding: 24px 18px;
  }

  h1 {
    font-size: 27px;
  }

  textarea {
    height: 125px;

    font-size: 16px;
  }

  .start-button {
    width: 105px;

    height: 105px;
  }

  .button-main-text {
    font-size: 24px;
  }

  .winner-name {
    font-size: clamp(68px, 19vw, 120px);
  }

  .winner-content {
    padding: 35px 20px;
  }

  .close-winner-button {
    margin-top: 50px;
  }
}

/* ========================================
   動きを減らす設定
======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;
  }
}

/* ========================================
   公開用説明
======================================== */

.tool-intro {
  margin: -12px 0 22px;

  color: #cfc7ae;

  font-family: sans-serif;

  font-size: 14px;

  font-weight: normal;

  line-height: 1.7;
}

/* スクリーンリーダー用 */
.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}

/* ========================================
   使い方・説明
======================================== */

.tool-guide,
.tool-about {
  margin-top: 32px;

  padding: 20px 18px;

  text-align: left;

  border: 1px solid rgba(255, 215, 90, 0.25);

  border-radius: 14px;

  background: rgba(0, 0, 0, 0.32);
}

.tool-guide h2,
.tool-about h2 {
  margin: 0 0 14px;

  color: #ffe675;

  font-size: 18px;

  text-align: center;

  letter-spacing: 1px;
}

.tool-guide p,
.tool-about p {
  margin: 8px 0;

  color: #d8d4c7;

  font-family: sans-serif;

  font-size: 14px;

  font-weight: normal;

  line-height: 1.7;
}

.tool-note {
  margin-top: 14px !important;

  padding-top: 12px;

  color: #bdb49b !important;

  font-size: 12px !important;

  border-top: 1px solid rgba(255, 215, 90, 0.15);
}

@media (max-width: 600px) {
  .tool-intro {
    font-size: 13px;
  }

  .tool-guide,
  .tool-about {
    margin-top: 24px;

    padding: 16px 14px;
  }

  .tool-guide p,
  .tool-about p {
    font-size: 13px;
  }
}