/* =========================
   HARULAB AMIDA
   Base Design
========================= */

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family:
    "Segoe UI",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;
  color: #ffffff;

  background:
    radial-gradient(circle at 20% 10%, rgba(0, 174, 255, 0.18), transparent 30%),
    radial-gradient(circle at 80% 30%, rgba(190, 70, 255, 0.16), transparent 35%),
    linear-gradient(180deg, #050816 0%, #080d22 55%, #03050e 100%);

  background-attachment: fixed;
}

/* =========================
   アプリ本体
========================= */

.app {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px 16px 50px;
}

/* =========================
   ヘッダー
========================= */

.header {
  text-align: center;
  margin-bottom: 28px;
}

.header h1 {
  margin: 0;

  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.08em;

  color: #57dcff;

  text-shadow:
    0 0 8px rgba(87, 220, 255, 0.8),
    0 0 22px rgba(0, 153, 255, 0.55);
}

.header h1 span {
  color: #e46cff;

  text-shadow:
    0 0 8px rgba(228, 108, 255, 0.9),
    0 0 22px rgba(180, 45, 255, 0.6);
}

.header p {
  margin: 8px 0 0;

  color: #aebbe0;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

/* =========================
   パネル
========================= */

.panel {
  margin-bottom: 18px;
  padding: 18px;

  border: 1px solid rgba(74, 187, 255, 0.35);
  border-radius: 16px;

  background: rgba(7, 14, 38, 0.72);

  box-shadow:
    inset 0 0 20px rgba(0, 132, 255, 0.04),
    0 0 20px rgba(0, 119, 255, 0.08);

  backdrop-filter: blur(10px);
}

.panel label {
  display: block;
  margin-bottom: 10px;

  color: #8de9ff;
  font-weight: 700;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.section-title label {
  margin: 0;
}

#participantCount {
  color: #8c9ac5;
  font-size: 0.8rem;
}

/* =========================
   入力欄
========================= */

input {
  width: 100%;
  height: 48px;

  margin-bottom: 10px;
  padding: 0 14px;

  color: #ffffff;
  font-size: 1rem;

  background: rgba(4, 10, 29, 0.85);

  border: 1px solid #275d9e;
  border-radius: 9px;

  outline: none;

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

input::placeholder {
  color: #64729a;
}

input:focus {
  border-color: #39d7ff;

  box-shadow:
    0 0 0 2px rgba(57, 215, 255, 0.08),
    0 0 14px rgba(57, 215, 255, 0.18);
}

/* =========================
   サブボタン
========================= */

.sub-button {
  width: 100%;
  min-height: 46px;

  color: #a8eaff;
  font-size: 0.95rem;
  font-weight: 700;

  background: rgba(7, 33, 66, 0.65);

  border: 1px solid #2e91d2;
  border-radius: 10px;

  cursor: pointer;

  transition:
    transform 0.15s,
    background 0.2s,
    box-shadow 0.2s;
}

.sub-button:hover {
  background: rgba(10, 60, 105, 0.75);

  box-shadow:
    0 0 15px rgba(0, 180, 255, 0.18);
}

.sub-button:active {
  transform: scale(0.98);
}

/* =========================
   メインボタン
========================= */

.main-button {
  width: 100%;
  min-height: 60px;

  margin: 6px 0 22px;

  color: #ffffff;

  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.05em;

  background:
    linear-gradient(
      100deg,
      rgba(0, 126, 255, 0.95),
      rgba(118, 70, 255, 0.95),
      rgba(214, 66, 255, 0.95)
    );

  border: 1px solid rgba(125, 225, 255, 0.8);
  border-radius: 13px;

  box-shadow:
    0 0 15px rgba(0, 174, 255, 0.28),
    0 0 28px rgba(155, 70, 255, 0.18);

  cursor: pointer;

  transition:
    transform 0.15s,
    box-shadow 0.2s;
}

.main-button:hover {
  box-shadow:
    0 0 20px rgba(0, 195, 255, 0.42),
    0 0 38px rgba(190, 65, 255, 0.3);
}

.main-button:active {
  transform: scale(0.98);
}

/* =========================
   あみだエリア
========================= */

.amida-area {
  min-height: 220px;

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

  padding: 20px;

  border: 1px solid rgba(101, 110, 255, 0.25);
  border-radius: 16px;

  background:
    linear-gradient(
      180deg,
      rgba(9, 16, 43, 0.75),
      rgba(4, 8, 25, 0.9)
    );

  box-shadow:
    inset 0 0 30px rgba(52, 108, 255, 0.05);
}

.waiting {
  margin: 0;

  color: #68759c;
  text-align: center;
  line-height: 1.8;
}

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

@media (max-width: 480px) {

  .app {
    padding: 22px 14px 40px;
  }

  .header {
    margin-bottom: 22px;
  }

  .panel {
    padding: 15px;
  }

  input {
    /* iPhoneで入力時に勝手にズームしにくくする */
    font-size: 16px;
  }
}

/* =========================
   あみだ本体
========================= */

.amida-wrapper {
  width: 100%;
}

.amida-prize {
  text-align: center;
  margin-bottom: 24px;
}

.amida-prize span {
  display: block;
  color: #ffd76a;
  font-size: 0.8rem;
  margin-bottom: 5px;
}

.amida-prize strong {
  color: #ffffff;
  font-size: 1.3rem;

  text-shadow:
    0 0 12px rgba(255, 196, 60, 0.5);
}


/* 名前 */

.amida-names {
  display: grid;
  grid-template-columns:
    repeat(var(--players, 2), 1fr);

  gap: 4px;
  margin-bottom: 12px;
}

.amida-name {
  min-width: 0;
  text-align: center;

  color: #bdefff;
  font-size: 0.75rem;
}

.player-number {
  display: flex;

  width: 26px;
  height: 26px;

  margin: 0 auto 5px;

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

  border: 1px solid #43dfff;
  border-radius: 50%;

  color: #ffffff;

  background: #071633;

  box-shadow:
    0 0 10px rgba(0, 207, 255, 0.35);
}

.player-name {
  display: block;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/* あみだ */

.ladder {
  position: relative;

  width: calc(100% - (100% / var(--players)));
  height: 330px;

  margin: 10px auto 0;
}


/* 縦線 */

.vertical-line {
  position: absolute;

  top: 0;
  bottom: 0;

  width: 2px;

  transform: translateX(-1px);

  background: #54dfff;

  box-shadow:
    0 0 6px #00bfff,
    0 0 13px rgba(0, 174, 255, 0.5);
}


/* 横線 */

.bridge {
  position: absolute;

  height: 2px;

  transform: translateY(-1px);

  background: #9e78ff;

  box-shadow:
    0 0 6px #895cff,
    0 0 12px rgba(162, 86, 255, 0.5);
}


/* ゴール */

.amida-goals {
  display: grid;

  grid-template-columns:
    repeat(var(--players, 2), 1fr);

  gap: 5px;

  margin-top: 5px;
}

.goal {
  display: flex;

  height: 42px;

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

  color: #7e8bad;

  font-weight: 800;

  border: 1px solid #263b70;
  border-radius: 8px;

  background: #070d21;
}


/* START */

.start-button {
  width: 100%;
  height: 58px;

  margin-top: 25px;

  color: #161000;

  font-size: 1.05rem;
  font-weight: 900;

  border: 1px solid #ffe184;
  border-radius: 12px;

  background:
    linear-gradient(
      100deg,
      #ffb928,
      #ffe36d
    );

  box-shadow:
    0 0 18px rgba(255, 190, 40, 0.32);

  cursor: pointer;
}

.start-button:active {
  transform: scale(0.98);
}


/* 10人でもスマホに収める */

@media (max-width: 480px) {

  .ladder {
    height: 300px;
  }

  .amida-name {
    font-size: 0.65rem;
  }

  .player-number {
    width: 23px;
    height: 23px;
    font-size: 0.7rem;
  }

  .goal {
    height: 38px;
    font-size: 0.8rem;
  }
}

/* =========================
   光の玉
========================= */

.runner {
  --runner-hue: 190;

  position: absolute;
  z-index: 10;

  width: 15px;
  height: 15px;

  border-radius: 50%;

  transform: translate(-50%, -50%);

  background:
    hsl(var(--runner-hue), 100%, 75%);

  box-shadow:
    0 0 6px
      hsl(var(--runner-hue), 100%, 70%),

    0 0 14px
      hsl(var(--runner-hue), 100%, 60%),

    0 0 25px
      hsl(var(--runner-hue), 100%, 55%);

  transition:
    left 0.28s linear,
    top 0.28s linear;
}


/* 当たりゴール */

.winning-goal {
  color: #ffd85b;

  border-color: #ffd85b;

  background:
    rgba(255, 190, 30, 0.12);

  box-shadow:
    0 0 18px
      rgba(255, 190, 30, 0.35);
}


/* =========================
   WINNER
========================= */

.winner-result {
  margin-top: 25px;
  padding: 30px 20px;

  text-align: center;

  border: 1px solid #ffd85b;
  border-radius: 16px;

  background:
    radial-gradient(
      circle at center,
      rgba(255, 185, 30, 0.15),
      rgba(7, 11, 30, 0.95) 65%
    );

  box-shadow:
    0 0 30px
      rgba(255, 185, 30, 0.18);

  animation:
    winnerAppear 0.5s ease-out;
}

.winner-crown {
  color: #ffd85b;

  font-size: 2.6rem;

  text-shadow:
    0 0 20px
      rgba(255, 210, 70, 0.8);
}

.winner-label {
  margin-top: 4px;

  color: #ffd85b;

  font-size: 1rem;
  font-weight: 900;

  letter-spacing: 0.25em;
}

.winner-name {
  margin-top: 12px;

  color: #ffffff;

  font-size: 2rem;
  font-weight: 900;

  text-shadow:
    0 0 18px
      rgba(255, 210, 70, 0.55);
}

.winner-prize {
  margin-top: 12px;

  color: #ffe88a;

  font-size: 1.15rem;
  font-weight: 800;
}

.winner-message {
  margin-top: 10px;

  color: #d7def5;

  font-size: 0.9rem;
}


@keyframes winnerAppear {

  from {
    opacity: 0;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* 抽選中ボタン */

.start-button:disabled {
  opacity: 0.65;
  cursor: default;
}

/* =========================
   結果ボタン
========================= */

.result-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 10px;

  margin-top: 24px;
}

.share-button,
.retry-button {
  min-height: 50px;

  padding: 10px;

  border-radius: 10px;

  font-size: 0.9rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.15s,
    box-shadow 0.2s;
}


/* 共有 */

.share-button {
  color: #ffffff;

  border: 1px solid #49dcff;

  background:
    linear-gradient(
      100deg,
      #087cff,
      #7452ff
    );

  box-shadow:
    0 0 15px
      rgba(40, 170, 255, 0.25);
}


/* もう一度 */

.retry-button {
  color: #d8e7ff;

  border: 1px solid #385b91;

  background:
    rgba(10, 24, 55, 0.9);
}


.share-button:active,
.retry-button:active {
  transform: scale(0.97);
}


/* 狭いスマホ */

@media (max-width: 380px) {

  .result-buttons {
    grid-template-columns: 1fr;
  }
}

/* =========================
   紙吹雪
========================= */

.confetti-layer {
  position: fixed;

  inset: 0;

  z-index: 9999;

  overflow: hidden;

  pointer-events: none;
}


/* 紙吹雪1枚 */

.confetti-piece {
  --drift: 0px;
  --rotation: 720deg;

  position: absolute;

  top: -30px;

  border-radius: 2px;

  opacity: 0;

  box-shadow:
    0 0 5px
    rgba(255, 255, 255, 0.25);

  animation-name: confettiFall;
  animation-timing-function: cubic-bezier(
    0.15,
    0.65,
    0.35,
    1
  );

  animation-fill-mode: forwards;
}


/* 落下 */

@keyframes confettiFall {

  0% {
    opacity: 0;

    transform:
      translate3d(0, -20px, 0)
      rotate(0deg);
  }

  8% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        var(--drift),
        105vh,
        0
      )
      rotate(var(--rotation));
  }
}

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

.winner-flash {
  position: fixed;
  inset: 0;

  z-index: 9998;

  pointer-events: none;

  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 210, 0.95) 0%,
      rgba(255, 215, 70, 0.65) 25%,
      rgba(255, 170, 0, 0.22) 55%,
      transparent 75%
    );

  animation:
    winnerFlash 0.9s ease-out forwards;
}


@keyframes winnerFlash {

  0% {
    opacity: 0;
    transform: scale(0.75);
  }

  15% {
    opacity: 1;
    transform: scale(1);
  }

  35% {
    opacity: 0.75;
  }

  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

/* =========================
   PCレイアウト
========================= */

@media (min-width: 900px) {

  /* 全体をPCサイズへ */
  .app {
    width: min(96%, 1280px);
    padding: 32px 24px 60px;
  }


  /* タイトル */
  .header {
    margin-bottom: 32px;
  }

  .header h1 {
    font-size: 3rem;
  }


  /* 左右レイアウト */
  .app-layout {
    display: grid;

    grid-template-columns:
      minmax(300px, 0.8fr)
      minmax(520px, 1.7fr);

    gap: 28px;

    align-items: start;
  }


  /* 左側 */
  .settings-area {
    position: sticky;
    top: 24px;
  }


  /* 作成ボタン */
  .settings-area .main-button {
    margin-bottom: 0;
  }


  /* 右側 */
  .lottery-area {
    min-width: 0;
  }


  /* あみだエリア */
  .lottery-area .amida-area {
    min-height: 600px;

    padding: 28px;
  }


  /* PCではあみだを少し高く */
  .lottery-area .ladder {
    height: 390px;
  }


  /* 名前 */
  .lottery-area .amida-name {
    font-size: 0.8rem;
  }


  /* ゴール */
  .lottery-area .goal {
    height: 46px;
  }


  /* 抽選ボタン */
  .lottery-area .start-button {
    height: 62px;
  }
}