@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300;400;500;700&display=swap");

/* ===============================
   components / utilities 分割CSS
   =============================== */

/*** ====== ボタン ====== */

/* ====== ボタン ====== ***/

/* 進む操作が1つに絞られる場面だけで使う、共通のタップ誘導。 */

.tap-guide-target {
  isolation: isolate;
  overflow: visible;
}

.tap-guide {
  --tap-guide-repeat-count: 5;
  position: absolute;
  right: 1.25rem;
  bottom: -0.65rem;
  z-index: 10;
  display: block;
  width: clamp(2.5rem, 11vw, 3rem);
  aspect-ratio: 1;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.tap-guide__hand {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 3px rgba(67, 49, 25, 0.3));
  transform-origin: 50% 12%;
  animation: tap-guide-hand 1.55s ease-in-out 0.8s
    var(--tap-guide-repeat-count) both;
}

.tap-guide__ripple {
  position: absolute;
  top: 0.1rem;
  left: 50%;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 246, 194, 0.95);
  border-radius: 9999px;
  box-shadow: 0 0 7px rgba(242, 193, 72, 0.7);
  opacity: 0;
  transform: translateX(-50%) scale(0.35);
  animation: tap-guide-ripple 1.55s ease-out 0.8s
    var(--tap-guide-repeat-count) both;
}

/* disabled中は進行を消費させず、有効化された時点からアニメーションを始める。 */

.tap-guide-target:disabled .tap-guide,
.tap-guide-target[aria-disabled="true"] .tap-guide,
.tap-guide-target[aria-busy="true"] .tap-guide,
.tap-guide-target:active .tap-guide,
form[aria-busy="true"] .tap-guide,
body.worlds-tutorial-open .tap-guide,
body.question-tutorial-open .tap-guide,
body.learning-tutorial-open .tap-guide {
  display: none;
}

@keyframes tap-guide-hand {
  0%,
  12% {
    opacity: 0;
    transform: translate3d(0.18rem, 0.35rem, 0) scale(0.94);
  }

  24%,
  38% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  52% {
    opacity: 1;
    transform: translate3d(0.06rem, 0.16rem, 0) scale(0.97);
  }

  68% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  84%,
  100% {
    opacity: 0;
    transform: translate3d(0.18rem, 0.35rem, 0) scale(0.94);
  }
}

@keyframes tap-guide-ripple {
  0%,
  34% {
    opacity: 0;
    transform: translateX(-50%) scale(0.35);
  }

  44% {
    opacity: 0.95;
  }

  68%,
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tap-guide {
    display: none;
  }
}

/* =====================
   登録フォーム専用アニメーション
   ===================== */

.learning-text-wrapper {
  position: relative;
  overflow: hidden;
  border: 1px solid #d1d5db;
  border-radius: 1rem;
  background-color: #f7f7f7;
}

.learning-text-body {
  position: relative;
  z-index: 0;
  max-height: 420px;
  overflow-y: scroll;
  padding: 1rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.9;
  color: #111827;
  word-break: break-word;
}

/* 段落余白 */

.learning-text-body p {
  margin: 0 0 0.75rem 0;
}

.learning-text-body p:last-child {
  margin-bottom: 0;
}

/* 赤文字 */

.learning-text-body .text-red-500 {
  transition: color 0.18s ease, text-shadow 0.18s ease, opacity 0.18s ease;
}

/* 赤シートON時に赤文字だけ見えなくする */

.learning-text-body.is-masked .text-red-500 {
  color: transparent !important;
  text-shadow: none !important;
}

/* 赤シート本体 */

.learning-text-mask {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: 1rem;
  /* 初期は右外 */
  transform: translateX(100%);
  transition:
    transform 0.3s ease-in-out,
    background-color 0.2s ease-in-out;
}

/* スライド中・閉じる直前の濃い赤 */

.learning-text-mask.is-sliding {
  background-color: rgba(239, 68, 68, 0.95);
}

/* シート表示状態 */

.learning-text-mask.is-active {
  transform: translateX(0);
}

/* スライド完了後の半透明 */

.learning-text-mask.is-soft {
  background-color: rgba(248, 113, 113, 0.45);
}

/* ボタン */

.learning-text-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #4b5563;
}

.learning-text-toggle-icon {
  display: inline-flex;
  height: 1.25rem;
  width: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #6b7280;
  font-size: 10px;
  color: #ffffff;
}

/* スクロールバー */

.learning-text-body {
  scrollbar-width: thin;
  scrollbar-color: #9ca3af #f3f4f6;
}

.learning-text-body::-webkit-scrollbar {
  width: 8px;
}

.learning-text-body::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 9999px;
}

.learning-text-body::-webkit-scrollbar-thumb {
  background: #9ca3af;
  border-radius: 9999px;
}

.learning-text-body::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* チャレンジ（問題回答）：進捗・問題用紙・選択肢 */

.quest-attempt__page {
  position: relative;
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 1.25rem) 1rem
    calc(env(safe-area-inset-bottom) + 2rem);
}

.quest-attempt__inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
}

.quest-attempt__page-title {
  margin-bottom: clamp(1.25rem, 5vw, 2rem);
}

.quest-attempt__quest-title {
  display: block;
  max-width: min(92vw, 34rem);
  overflow: hidden;
  color: #655b52;
  font-weight: 700;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-attempt__form {
  width: 100%;
}

.quest-attempt__progress {
  position: sticky;
  top: calc(env(safe-area-inset-top) + 0.5rem);
  z-index: 30;
  width: calc(100% - 1rem);
  margin: 0 auto clamp(1.25rem, 5vw, 1.8rem);
  border: 1px solid rgba(207, 198, 186, 0.72);
  border-radius: 1rem;
  background-color: rgba(244, 241, 234, 0.9);
  padding: 0.65rem 0.75rem 0.75rem;
  box-shadow:
    0 6px 16px rgba(83, 68, 52, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
}

.quest-attempt__progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  color: color-mix(in srgb, var(--quest-attempt-theme) 74%, #514b44);
  font-size: clamp(0.76rem, 3.2vw, 0.9rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.quest-attempt__progress-counts {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  letter-spacing: 0.04em;
}

.quest-attempt__progress-remaining {
  color: #655b52;
  font-weight: 700;
  letter-spacing: 0;
}

.quest-attempt__progress-track {
  width: 100%;
  height: 0.6rem;
  overflow: hidden;
  border: 1px solid rgba(111, 99, 84, 0.08);
  border-radius: 9999px;
  background-color: rgba(224, 217, 206, 0.68);
  box-shadow:
    inset 0 1px 3px rgba(91, 73, 53, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.55);
}

.quest-attempt__progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--quest-attempt-theme) 82%, #fff) 0%,
    var(--quest-attempt-theme) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 0 10px color-mix(in srgb, var(--quest-attempt-theme) 28%, transparent);
  transition: width 0.25s ease;
}

.quest-attempt__questions {
  display: grid;
  gap: clamp(1.25rem, 5vw, 2rem);
}

.quest-attempt__paper {
  position: relative;
  width: 100%;
  padding: clamp(2.7rem, 10vw, 4rem) clamp(1.25rem, 5.5vw, 2.2rem)
    clamp(2.8rem, 10vw, 4.2rem);
  background-image: var(--quest-attempt-paper);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 7px 9px rgba(105, 77, 45, 0.14));
}

.quest-attempt__question-number {
  color: color-mix(in srgb, var(--quest-attempt-theme) 78%, #514940);
  font-size: clamp(0.72rem, 3.2vw, 0.86rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
}

.quest-attempt__question-number span {
  font-size: 1.15em;
}

.quest-attempt__question {
  margin: clamp(0.9rem, 4vw, 1.4rem) auto 0;
  color: #3f352d;
  font-size: clamp(0.92rem, 4vw, 1.08rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.7;
  text-align: left;
  overflow-wrap: anywhere;
}

.quest-attempt__divider {
  display: block;
  width: min(8rem, 42%);
  height: 1px;
  margin: clamp(1rem, 4vw, 1.5rem) auto;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--quest-attempt-theme) 42%, transparent) 45%,
    color-mix(in srgb, var(--quest-attempt-theme) 58%, transparent) 50%,
    color-mix(in srgb, var(--quest-attempt-theme) 42%, transparent) 55%,
    transparent
  );
}

.quest-attempt__choices {
  display: grid;
  gap: 0.7rem;
}

.choice-btn {
  display: flex;
  min-height: 3.7rem;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--quest-attempt-theme) 24%, #d8d0c5);
  border-radius: 1.15rem;
  background-color: rgba(255, 252, 246, 0.58);
  padding: 0.75rem 0.9rem;
  color: #3f3832;
  text-align: left;
  box-shadow:
    0 2px 6px rgba(86, 67, 47, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.choice-btn:hover {
  background-color: color-mix(
    in srgb,
    var(--quest-attempt-theme) 7%,
    rgba(255, 252, 246, 0.76)
  );
}

.choice-btn:active {
  transform: scale(0.99);
}

.choice-btn:focus-visible {
  outline: 3px solid
    color-mix(in srgb, var(--quest-attempt-theme) 32%, transparent);
  outline-offset: 2px;
}

.choice-btn-active {
  border-color: color-mix(in srgb, var(--quest-attempt-theme) 72%, #62594f);
  background-color: color-mix(
    in srgb,
    var(--quest-attempt-theme) 14%,
    rgba(255, 253, 248, 0.9)
  );
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--quest-attempt-theme) 14%, transparent),
    0 4px 10px rgba(76, 63, 48, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.choice-btn-label {
  display: inline-flex;
  width: 2.35rem;
  min-width: 2.35rem;
  height: 2.35rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--quest-attempt-theme) 11%, #e8e1d7);
  color: #51483f;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.choice-btn-active .choice-btn-label {
  background-color: color-mix(in srgb, var(--quest-attempt-theme) 82%, #4b4a43);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 5px color-mix(in srgb, var(--quest-attempt-theme) 24%, transparent);
}

.choice-btn-text {
  color: inherit;
  font-size: clamp(0.82rem, 3.6vw, 0.96rem);
  font-weight: 500;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.quest-attempt__actions {
  display: grid;
  gap: 0.75rem;
  width: min(92%, 31rem);
  margin: clamp(1.5rem, 6vw, 2.25rem) auto 0;
}

.quest-attempt__action {
  min-height: 3rem;
  width: 100%;
}

.quest-attempt__action-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  fill: currentColor;
}

.quest-attempt__action:disabled {
  cursor: not-allowed;
  filter: grayscale(0.38);
  opacity: 0.52;
  transform: none;
}

/* チュートリアルではdisabledを維持したまま、全問回答後の見た目だけ示す。 */

.quest-attempt__action:disabled.quest-attempt__action--tutorial-active {
  filter: none;
  opacity: 1;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.72),
    0 0 22px color-mix(in srgb, var(--quest-attempt-theme) 52%, transparent);
}

/* 10枚の用紙とstickyバーの合成負荷を、チュートリアル表示中だけ抑える。 */

body.question-tutorial-open .quest-attempt__paper {
  filter: none;
}

body.question-tutorial-open .quest-attempt__progress {
  backdrop-filter: none;
  background-color: rgba(244, 241, 234, 0.97);
}

@media (max-width: 360px) {
  .quest-attempt__page {
    padding-inline: 0.75rem;
  }

  .quest-attempt__paper {
    padding-inline: 1rem;
  }

  .choice-btn {
    padding-inline: 0.7rem;
  }

  .quest-attempt__progress-counts {
    gap: 0.35rem;
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .choice-btn,
  .quest-attempt__progress-fill {
    transition: none;
  }
}

/* 回答・解説：結果サマリー・正誤・解説 */

.quest-answer-result {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  padding: calc(env(safe-area-inset-top) + 1rem) 0 0;
  background:
    radial-gradient(
      circle at 50% 4rem,
      color-mix(in srgb, var(--quest-answer-theme) 10%, transparent),
      transparent 18rem
    ),
    linear-gradient(180deg, #f4f1ea 0%, #f8f5ee 58%, #f3efe6 100%);
  color: #514a42;
}

.quest-answer-result__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.quest-answer-result__header {
  position: relative;
  display: grid;
  min-height: clamp(4.8rem, 20vw, 6.3rem);
  place-items: center;
  overflow: visible;
  margin-bottom: clamp(0.15rem, 1vw, 0.3rem);
}

.quest-answer-result__header .client-page-title {
  position: relative;
  z-index: 2;
}

.quest-answer-result__title {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #463f38;
  font-size: clamp(1.35rem, 6.4vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-indent: 0.08em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95),
    0 0.3rem 0.8rem rgba(75, 65, 51, 0.09);
}

.quest-answer-result__title-leaf,
.quest-answer-result__question-leaf {
  background-color: color-mix(in srgb, var(--quest-answer-theme) 72%, #6f765f);
  -webkit-mask-image: var(--quest-answer-leaf-image);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--quest-answer-leaf-image);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  pointer-events: none;
}

.quest-answer-result__title-leaf {
  position: absolute;
  top: 40%;
  width: clamp(5.4rem, 24vw, 8rem);
  height: clamp(5.4rem, 24vw, 8rem);
  opacity: 0.22;
  filter: drop-shadow(0 2px 3px rgba(78, 84, 47, 0.08));
}

.quest-answer-result__title-leaf--left {
  left: clamp(0.85rem, 8vw, 3.25rem);
  transform: translateY(-50%) rotate(-30deg);
}

.quest-answer-result__title-leaf--right {
  right: clamp(0.85rem, 8vw, 3.25rem);
  transform: translateY(-50%) scaleX(-1) rotate(-30deg);
}

.quest-answer-result__summary,
.quest-answer-result__question-card {
  border: 1px solid rgba(202, 192, 179, 0.72);
  background-color: rgba(255, 253, 248, 0.88);
  box-shadow:
    0 0.55rem 1.2rem rgba(82, 66, 48, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.quest-answer-result__summary {
  border-radius: 1.3rem;
  padding: clamp(1rem, 4.5vw, 1.45rem);
}

.quest-answer-result__summary-main {
  display: grid;
  justify-items: center;
  text-align: center;
}

.quest-answer-result__score {
  display: flex;
  align-items: baseline;
  gap: 0.22rem;
  justify-content: center;
  margin: 0.5rem 0 0;
  color: #3f3a35;
  font-variant-numeric: tabular-nums;
}

.quest-answer-result__score-number {
  color: color-mix(in srgb, var(--quest-answer-theme) 78%, #4d5645);
  font-size: clamp(1.75rem, 8.5vw, 2.65rem);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.82);
}

.quest-answer-result__score-detail {
  font-size: clamp(0.98rem, 4.2vw, 1.18rem);
  font-weight: 800;
}

.quest-answer-result__outcome {
  display: inline-flex;
  min-height: 2.2rem;
  align-items: center;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 9999px;
  padding: 0.28rem 1.05rem;
  font-size: clamp(1rem, 4.3vw, 1.18rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-indent: 0.05em;
}

.quest-answer-result__rate {
  margin: 0.35rem 0 0;
  color: #696159;
  font-size: clamp(0.78rem, 3.25vw, 0.9rem);
  font-weight: 650;
  line-height: 1.55;
}

.quest-answer-result__rate span {
  white-space: nowrap;
}

.quest-answer-result__points {
  margin-top: 1rem;
  border-top: 1px solid rgba(195, 185, 172, 0.52);
  padding-top: 0.85rem;
  text-align: center;
}

.quest-answer-result__points-label {
  margin: 0;
  color: #847b71;
  font-size: clamp(0.76rem, 3.3vw, 0.88rem);
  font-weight: 650;
  letter-spacing: 0.055em;
}

.quest-answer-result__points-total {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.45rem, 2.5vw, 0.8rem);
  margin: 0.25rem 0 0;
  color: color-mix(in srgb, var(--quest-answer-theme) 78%, #4d633f);
  font-size: clamp(2rem, 10vw, 3.1rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.9),
    0 0.35rem 0.8rem
      color-mix(in srgb, var(--quest-answer-theme) 13%, transparent);
}

.quest-answer-result__points-total.is-negative {
  color: #bc6760;
}

.quest-answer-result__points-sparkle {
  color: #d8bb61;
  font-size: 0.42em;
  filter: drop-shadow(0 1px 1px rgba(137, 106, 38, 0.15));
}

.quest-answer-result__breakdown {
  display: grid;
  gap: 0.35rem;
  margin: 0.9rem 0 0;
}

.quest-answer-result__breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.75rem;
  font-size: clamp(0.76rem, 3.3vw, 0.9rem);
  line-height: 1.45;
}

.quest-answer-result__breakdown-row dt {
  min-width: 0;
  color: #645d56;
  font-weight: 600;
}

.quest-answer-result__breakdown-row dd {
  margin: 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.quest-answer-result__breakdown-row dd.is-positive {
  color: #579262;
}

.quest-answer-result__breakdown-row dd.is-negative {
  color: #c65d5d;
}

.quest-answer-result__questions {
  display: grid;
  gap: clamp(1rem, 4vw, 1.4rem);
  margin-top: clamp(1rem, 4vw, 1.4rem);
}

.quest-answer-result__question-card {
  overflow: hidden;
  border-radius: 1.25rem;
}

.quest-answer-result__question-header {
  position: relative;
  min-height: 4rem;
  overflow: hidden;
  background: linear-gradient(
    105deg,
    color-mix(in srgb, var(--quest-answer-theme) 17%, #fffdf8) 0%,
    color-mix(in srgb, var(--quest-answer-theme) 27%, #f4f0e6) 100%
  );
  padding: 0.9rem clamp(3.4rem, 14vw, 4.6rem) 0.9rem 1rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0
      color-mix(in srgb, var(--quest-answer-theme) 20%, transparent);
}

.quest-answer-result__question-header h2 {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  color: #464039;
  font-size: clamp(0.83rem, 3.65vw, 1rem);
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1.65;
}

.quest-answer-result__question-number {
  flex: 0 0 auto;
  font-size: 1.08em;
  font-weight: 800;
}

.quest-answer-result__question-leaf {
  position: absolute;
  top: 50%;
  right: -1.1rem;
  width: clamp(5.4rem, 24vw, 7.4rem);
  height: clamp(5.4rem, 24vw, 7.4rem);
  opacity: 0.18;
  transform: translateY(-50%) rotate(-25deg);
}

.quest-answer-result__question-body {
  padding: clamp(0.85rem, 3.8vw, 1.2rem);
}

.quest-answer-result__status {
  display: inline-flex;
  min-height: 1.45rem;
  align-items: center;
  margin: 0 0 0.65rem;
  border-radius: 9999px;
  padding: 0.12rem 0.55rem;
  font-size: clamp(0.7rem, 3vw, 0.8rem);
  font-weight: 800;
  line-height: 1.2;
}

.quest-answer-result__status.is-correct {
  background-color: #e3f0dc;
  color: #4d8256;
}

.quest-answer-result__status.is-incorrect {
  background-color: #f5ded9;
  color: #b35d58;
}

.quest-answer-result__outcome.is-correct {
  border-color: #bed8b4;
  background: linear-gradient(180deg, #edf7e8 0%, #d9ecd1 100%);
  color: #477a50;
  box-shadow:
    0 0.3rem 0.75rem rgba(86, 139, 91, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
}

.quest-answer-result__outcome.is-incorrect {
  border-color: #e8c1ba;
  background: linear-gradient(180deg, #fbefec 0%, #f3d9d4 100%);
  color: #a95752;
  box-shadow:
    0 0.3rem 0.75rem rgba(179, 93, 88, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76);
}

.quest-answer-result__choices {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quest-answer-result__choice {
  display: grid;
  min-height: 2.65rem;
  grid-template-columns: 1.65rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(207, 198, 187, 0.72);
  border-radius: 0.75rem;
  background-color: rgba(255, 253, 248, 0.78);
  padding: 0.5rem 0.65rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.quest-answer-result__choice.is-correct {
  border-color: #bcd9b4;
  background-color: #edf6e9;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 0 0 1px rgba(135, 181, 125, 0.06);
}

.quest-answer-result__choice.is-selected-incorrect {
  border-color: #e2b5af;
  background-color: #fbefec;
}

.quest-answer-result__choice-label {
  color: #554f48;
  font-size: clamp(0.78rem, 3.35vw, 0.9rem);
  font-weight: 800;
}

.quest-answer-result__choice-text {
  min-width: 0;
  color: #514b45;
  font-size: clamp(0.75rem, 3.25vw, 0.88rem);
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.quest-answer-result__choice-notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 0.45rem;
}

.quest-answer-result__choice-note {
  font-size: clamp(0.61rem, 2.55vw, 0.71rem);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.quest-answer-result__choice-note.is-selected {
  color: #6082a2;
}

.quest-answer-result__choice-note.is-correct {
  color: #4f965c;
}

.quest-answer-result__choice.is-selected-incorrect
  .quest-answer-result__choice-note.is-selected {
  color: #bb625b;
}

.quest-answer-result__explanation {
  margin-top: 0.8rem;
  border: 1px solid rgba(210, 198, 179, 0.55);
  border-radius: 0.9rem;
  background: linear-gradient(
    145deg,
    rgba(251, 247, 239, 0.94),
    rgba(246, 240, 230, 0.8)
  );
  padding: 0.8rem 0.9rem;
}

.quest-answer-result__explanation-heading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.quest-answer-result__explanation-heading svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  fill: #c4a553;
}

.quest-answer-result__explanation-heading h3 {
  margin: 0;
  color: #554f47;
  font-size: clamp(0.78rem, 3.3vw, 0.9rem);
  font-weight: 800;
}

.quest-answer-result__explanation > p {
  margin: 0.45rem 0 0;
  color: #5f5850;
  font-size: clamp(0.76rem, 3.25vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.8;
}

.quest-answer-result__actions {
  display: grid;
  gap: 0.75rem;
  width: min(92%, 31rem);
  margin: clamp(1.25rem, 5vw, 1.8rem) auto 0;
}

.quest-answer-result__action {
  width: 100%;
  min-height: 3rem;
  font-size: clamp(0.82rem, 3.6vw, 0.96rem);
}

.quest-answer-result__action svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  fill: currentColor;
}

.quest-answer-result__forest {
  position: relative;
  z-index: 1;
  width: min(100%, 48rem);
  aspect-ratio: 4 / 1;
  margin: clamp(-2.4rem, -6vw, -1.2rem) auto 0;
  background-image: var(--quest-answer-forest);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 -0.25rem 0.65rem rgba(108, 111, 69, 0.08));
  pointer-events: none;
}

@media (max-width: 380px) {
  .quest-answer-result__inner {
    padding-inline: 0.75rem;
  }

  .quest-answer-result__question-header {
    padding-left: 0.8rem;
  }

  .quest-answer-result__question-body {
    padding-inline: 0.7rem;
  }

  .quest-answer-result__choice {
    grid-template-columns: 1.45rem minmax(0, 1fr);
    padding-inline: 0.55rem;
  }

  .quest-answer-result__choice-notes {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quest-answer-result,
  .quest-answer-result * {
    scroll-behavior: auto;
  }
}

.answer-result-enter {
  opacity: 0;
  transform: translateX(24px);
}

.answer-result-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 420ms ease,
    transform 420ms ease;
}

@keyframes battle-ripple {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }

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

.battle-ripple-active {
  animation: battle-ripple 0.9s ease-out 2;
}

/* ========================================
   Battle matching
   ======================================== */

html:has(.battle-matching-screen:not(.hidden)),
body:has(.battle-matching-screen:not(.hidden)) {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #f4f1ea;
  scrollbar-width: none;
}

html:has(.battle-matching-screen:not(.hidden))::-webkit-scrollbar,
body:has(.battle-matching-screen:not(.hidden))::-webkit-scrollbar {
  display: none;
}

body:has(.battle-matching-screen:not(.hidden)) {
  padding-bottom: 0;
}

body:has(.battle-matching-screen:not(.hidden)) main {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.battle-matching-screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  isolation: isolate;
  box-sizing: border-box;
  width: auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
  color: #4a3a28;
  background-color: #f4f1ea;
  background-image:
    linear-gradient(
      to bottom,
      #f4f1ea 0,
      rgba(244, 241, 234, 0.98) calc(env(safe-area-inset-top) + 0.5rem),
      rgba(244, 241, 234, 0.82) calc(env(safe-area-inset-top) + 2.4rem),
      rgba(244, 241, 234, 0.42) calc(env(safe-area-inset-top) + 4.6rem),
      rgba(244, 241, 234, 0.12) calc(env(safe-area-inset-top) + 5.8rem),
      transparent calc(env(safe-area-inset-top) + 7rem)
    ),
    linear-gradient(rgba(255, 252, 241, 0.04), rgba(244, 232, 201, 0.1)),
    var(--battle-matching-background);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.battle-matching-screen::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to bottom,
      transparent calc(100% - 8rem),
      rgba(244, 241, 234, 0.18) calc(100% - 5.5rem),
      rgba(244, 241, 234, 0.72) calc(100% - 2.25rem),
      #f4f1ea 100%
    ),
    radial-gradient(
      circle at 50% 43%,
      rgba(255, 255, 244, 0.2),
      transparent 52%
    );
  content: "";
  pointer-events: none;
}

.battle-matching-screen__inner {
  width: 100%;
  max-width: 30rem;
  height: 100%;
  min-height: 0;
  margin-inline: auto;
}

.battle-matching-panel {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + clamp(1.15rem, 3.4svh, 2rem)) 1rem
    calc(env(safe-area-inset-bottom) + clamp(0.85rem, 2.2svh, 1.35rem));
  text-align: center;
}

.battle-matching-panel--searching {
  padding-top: calc(env(safe-area-inset-top) + clamp(2.45rem, 6.4svh, 3.55rem));
}

.battle-matching-header {
  position: relative;
  z-index: 2;
  width: 100%;
  flex: 0 0 auto;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76);
}

.battle-matching-header__title {
  margin: 0;
  font-size: clamp(1.28rem, 5.8vw, 1.62rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.045em;
  color: #91651e;
}

.battle-matching-header__title-row {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.battle-matching-header__leaf {
  position: relative;
  top: -0.15rem;
  width: clamp(1.35rem, 6vw, 1.65rem);
  height: clamp(2.15rem, 9vw, 2.65rem);
  flex: 0 0 auto;
  opacity: 0.84;
  background: linear-gradient(155deg, #fff0a8 4%, #d9a83f 48%, #8a5a1e 100%);
  -webkit-mask-image: var(--battle-matching-leaf-decoration);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--battle-matching-leaf-decoration);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  filter: drop-shadow(0 0.08rem 0.1rem rgba(104, 65, 17, 0.2));
}

.battle-matching-header__title-row > .battle-matching-header__leaf:first-child {
  margin-right: -0.38rem;
}

.battle-matching-header__leaf--right {
  margin-left: -0.38rem;
  transform: scaleX(-1);
}

.battle-matching-header--confirmed .battle-matching-header__title {
  font-size: clamp(1.18rem, 5.3vw, 1.5rem);
  white-space: nowrap;
}

.battle-matching-header--confirmed .battle-matching-header__lead {
  transform: translateY(clamp(-0.85rem, -1.55svh, -0.58rem));
}

.battle-matching-header__lead {
  margin-top: clamp(0.38rem, 1.15svh, 0.68rem);
  font-size: clamp(0.78rem, 3.35vw, 0.92rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.035em;
  color: rgba(91, 67, 37, 0.78);
}

.battle-matching-arena {
  display: grid;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(6.7rem, 1fr) auto minmax(11rem, 1.28fr);
  align-items: center;
  justify-items: center;
  gap: clamp(0.12rem, 0.8svh, 0.48rem);
  padding-block: clamp(0.35rem, 1.2svh, 0.75rem);
}

.battle-matching-arena--confirmed {
  position: relative;
  grid-template-rows: minmax(13rem, 1fr) auto minmax(13rem, 1fr);
  gap: clamp(1.55rem, 3.2svh, 1.9rem);
  isolation: isolate;
}

.battle-matching-arena--confirmed > :not(.battle-matching-confirmed-leaves) {
  position: relative;
  z-index: 2;
}

.battle-matching-arena--confirmed .battle-matching-player--opponent {
  align-self: end;
}

.battle-matching-arena--confirmed > .battle-matching-player:last-child {
  align-self: start;
}

.battle-matching-arena--confirmed .battle-matching-vs,
.battle-matching-arena--confirmed > .battle-matching-player:last-child {
  transform: translateY(clamp(0.65rem, 1.35svh, 0.9rem));
}

.battle-matching-confirmed-leaves {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(145%, 42rem);
  max-width: none;
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.28);
  transform-origin: center;
  pointer-events: none;
  animation:
    battle-matching-confirmed-leaves-zoom 1.65s
      cubic-bezier(0.12, 0.72, 0.18, 1) both,
    battle-matching-confirmed-leaves-fade 1.65s linear both;
}

@keyframes battle-matching-confirmed-leaves-zoom {
  0% {
    transform: translate(-50%, -50%) scale(0.28);
  }

  100% {
    transform: translate(-50%, -50%) scale(1.72);
  }
}

@keyframes battle-matching-confirmed-leaves-fade {
  0% {
    opacity: 0;
  }

  18% {
    opacity: 0.86;
  }

  68% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
  }
}

.battle-matching-panel--searching .battle-matching-arena {
  transform: translateY(clamp(-0.9rem, -1.7svh, -0.65rem));
}

.battle-matching-panel--searching .battle-matching-vs {
  transform: translateY(-1rem);
}

.battle-matching-glow-stage {
  position: relative;
  display: grid;
  width: 100%;
  place-items: center;
  isolation: isolate;
}

.battle-matching-glow-stage::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: var(--battle-matching-glow-size);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 252, 226, 0.88) 35%,
    rgba(242, 213, 139, 0.58) 58%,
    rgba(221, 174, 64, 0.27) 72%,
    transparent 88%
  );
  filter: blur(0.85rem);
  content: "";
  pointer-events: none;
}

.battle-matching-glow-stage > * {
  position: relative;
  z-index: 1;
}

.battle-matching-glow-stage--candidates {
  --battle-matching-candidate-size: clamp(4.3rem, 22.5vw, 6.15rem);
  --battle-matching-candidate-gap: clamp(0.25rem, 1.25vw, 0.4rem);
  --battle-matching-glow-size: calc(
    var(--battle-matching-candidate-size) * 1.72
  );
}

.battle-matching-glow-stage--self {
  --battle-matching-glow-size: clamp(12rem, 54vw, 14.5rem);
  flex: 0 0 auto;
}

.battle-matching-candidates {
  position: relative;
  width: min(calc(100% + 2rem), 30rem);
  overflow: hidden;
  justify-self: center;
  margin-block: -0.7rem;
  padding-block: 0.7rem;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.68) 2.5%,
    black 7%,
    black 93%,
    rgba(0, 0, 0, 0.68) 97.5%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.68) 2.5%,
    black 7%,
    black 93%,
    rgba(0, 0, 0, 0.68) 97.5%,
    transparent 100%
  );
}

.battle-matching-candidates__track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  align-items: center;
  gap: var(--battle-matching-candidate-gap);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.battle-matching-candidates__item {
  --battle-matching-candidate-scale: 0.52;
  --battle-matching-candidate-shift-x: 0%;
  position: relative;
  z-index: 0;
  width: var(--battle-matching-candidate-size);
  height: var(--battle-matching-candidate-size);
  flex: 0 0 auto;
  opacity: 0;
  transform: translateX(var(--battle-matching-candidate-shift-x))
    scale(var(--battle-matching-candidate-scale));
  transition:
    opacity 280ms ease,
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.battle-matching-candidates__item.is-far {
  --battle-matching-candidate-scale: 0.64;
  z-index: 1;
  opacity: 0.3;
}

.battle-matching-candidates__item.is-far-left {
  --battle-matching-candidate-shift-x: 22%;
}

.battle-matching-candidates__item.is-far-right {
  --battle-matching-candidate-shift-x: -22%;
}

.battle-matching-candidates__item.is-near {
  --battle-matching-candidate-scale: 0.82;
  z-index: 2;
  opacity: 0.56;
}

.battle-matching-candidates__item.is-current {
  --battle-matching-candidate-scale: 1.15;
  z-index: 3;
  opacity: 1;
}

.battle-matching-avatar {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 1;
  filter: drop-shadow(0 0.38rem 0.5rem rgba(111, 74, 22, 0.18));
}

.battle-matching-avatar--candidate {
  width: 100%;
}

.battle-matching-panel--searching .battle-matching-avatar--candidate,
.battle-matching-panel--searching .battle-matching-avatar--self {
  filter: none;
}

.battle-matching-avatar--self,
.battle-matching-avatar--opponent,
.battle-matching-avatar--self-confirmed {
  width: clamp(9.5rem, 43vw, 11.8rem);
}

.battle-matching-avatar__image {
  position: absolute;
  inset: 11.8%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  color: rgba(96, 75, 48, 0.56);
  background: rgba(255, 253, 244, 0.88);
}

.battle-matching-avatar__picture {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.battle-matching-avatar__placeholder {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.battle-matching-avatar__frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.battle-matching-avatar__ripple {
  position: absolute;
  inset: 8%;
  z-index: 1;
  border: 0.2rem solid rgba(218, 174, 75, 0.7);
  border-radius: 50%;
  pointer-events: none;
}

.battle-matching-player {
  display: flex;
  width: 100%;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.battle-matching-player__name {
  max-width: min(86%, 20rem);
  margin-top: clamp(0.08rem, 0.5svh, 0.32rem);
  overflow: hidden;
  font-size: clamp(1.08rem, 4.9vw, 1.35rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.025em;
  color: #493a27;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68);
  white-space: nowrap;
}

.battle-matching-panel--searching .battle-matching-player__name,
.battle-matching-panel--confirmed .battle-matching-player__name {
  max-width: min(100%, 23rem);
  margin-top: clamp(0.42rem, 0.95svh, 0.6rem);
}

.battle-matching-player__identity {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  transform: translateY(clamp(0.5rem, 1.4svh, 0.75rem));
}

.battle-matching-ribbon {
  position: relative;
  width: clamp(8.5rem, 38vw, 11rem);
  aspect-ratio: 3.6 / 1;
  margin-top: clamp(0.12rem, 0.55svh, 0.34rem);
}

.battle-matching-panel--searching .battle-matching-ribbon,
.battle-matching-panel--confirmed .battle-matching-ribbon {
  margin-top: clamp(0.22rem, 0.7svh, 0.42rem);
}

.battle-matching-ribbon__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.battle-matching-ribbon__text {
  position: absolute;
  top: 49%;
  left: 50%;
  z-index: 1;
  width: 60%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  font-size: clamp(0.78rem, 3.3vw, 0.96rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.07em;
  color: #fff9e6;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(22, 53, 31, 0.72);
  white-space: nowrap;
}

.battle-matching-vs {
  position: relative;
  display: grid;
  width: min(100%, 25rem);
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-self: center;
  gap: clamp(0.35rem, 2vw, 0.75rem);
  isolation: isolate;
}

.battle-matching-vs__emblem {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: clamp(6.2rem, 27vw, 8.2rem);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 1;
  filter: sepia(0.28) saturate(1.6) brightness(1.06)
    drop-shadow(0 0 0.42rem rgba(218, 166, 50, 0.38));
  pointer-events: none;
}

.battle-matching-vs__ornament {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
}

.battle-matching-vs__ornament--right {
  transform: scaleX(-1);
}

.battle-matching-vs__text {
  position: relative;
  z-index: 2;
  font-size: clamp(2.15rem, 9.7vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #a27327;
  text-shadow:
    0 1px 0 #fff8db,
    0 0.18rem 0.35rem rgba(115, 77, 24, 0.16);
}

.battle-matching-status {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(1rem, 4.35vw, 1.18rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
  color: rgba(79, 61, 40, 0.82);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76);
  animation: battle-matching-status-pulse 1.8s ease-in-out infinite;
}

.battle-matching-status--confirmed {
  font-size: clamp(0.85rem, 3.6vw, 1rem);
  letter-spacing: 0.04em;
  transform: translateY(clamp(2rem, 6svh, 3rem));
}

.battle-matching-panel--searching > .battle-matching-status {
  transform: translateY(clamp(0.45rem, 1.2svh, 0.7rem));
  animation-duration: 1.2s;
}

@keyframes battle-matching-status-pulse {
  0%,
  100% {
    opacity: 0.52;
  }

  50% {
    opacity: 1;
  }
}

@media (max-height: 740px) {
  .battle-matching-panel {
    padding-top: calc(env(safe-area-inset-top) + 0.72rem);
    padding-bottom: calc(env(safe-area-inset-bottom) + 0.58rem);
  }

  .battle-matching-panel--searching {
    padding-top: calc(env(safe-area-inset-top) + 1.65rem);
  }

  .battle-matching-header__title {
    font-size: clamp(1.12rem, 5.2vw, 1.35rem);
  }

  .battle-matching-header__lead {
    margin-top: 0.28rem;
    font-size: 0.76rem;
  }

  .battle-matching-arena {
    grid-template-rows: minmax(5.45rem, 1fr) auto minmax(8.8rem, 1.12fr);
    padding-block: 0.2rem;
  }

  .battle-matching-arena--confirmed {
    grid-template-rows: minmax(11rem, 1fr) auto minmax(11rem, 1fr);
  }

  .battle-matching-status--confirmed {
    transform: translateY(0.55rem);
  }

  .battle-matching-panel--searching .battle-matching-vs {
    transform: translateY(-0.68rem);
  }

  .battle-matching-panel--searching > .battle-matching-status {
    transform: translateY(0);
  }

  .battle-matching-glow-stage--candidates {
    --battle-matching-candidate-size: clamp(4.3rem, 21.5vw, 5.25rem);
    --battle-matching-candidate-gap: clamp(0.2rem, 1vw, 0.3rem);
  }

  .battle-matching-glow-stage--self {
    --battle-matching-glow-size: clamp(10.5rem, 48vw, 12.5rem);
  }

  .battle-matching-candidates__item.is-far {
    --battle-matching-candidate-scale: 0.66;
  }

  .battle-matching-candidates__item.is-current {
    --battle-matching-candidate-scale: 1.13;
  }

  .battle-matching-avatar--self,
  .battle-matching-avatar--opponent,
  .battle-matching-avatar--self-confirmed {
    width: clamp(8rem, 36vw, 9.3rem);
  }

  .battle-matching-player__name {
    font-size: clamp(0.98rem, 4.2vw, 1.14rem);
  }

  .battle-matching-ribbon {
    width: clamp(7.7rem, 34vw, 9.2rem);
  }

  .battle-matching-vs__text {
    font-size: clamp(1.9rem, 8.6vw, 2.45rem);
  }

  .battle-matching-status {
    font-size: 0.94rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .battle-matching-candidates__item,
  .battle-matching-status {
    animation: none;
    transition: none;
  }

  .battle-matching-status {
    opacity: 1;
  }

  .battle-matching-confirmed-leaves {
    display: none;
  }
}

/* ========================================
   Battle playing
   ======================================== */

html:has(.battle-playing-screen:not(.hidden)),
body:has(.battle-playing-screen:not(.hidden)) {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #f4f1ea;
  scrollbar-width: none;
}

html:has(.battle-playing-screen:not(.hidden))::-webkit-scrollbar,
body:has(.battle-playing-screen:not(.hidden))::-webkit-scrollbar {
  display: none;
}

body:has(.battle-playing-screen:not(.hidden)) {
  padding-bottom: 0;
}

body:has(.battle-playing-screen:not(.hidden)) main {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.battle-playing-screen {
  --battle-playing-theme: #8fb996;
  --battle-playing-gold: #b6842f;
  --battle-playing-gold-deep: #80602d;
  --battle-playing-gold-light: #e5c66f;
  position: fixed;
  inset: 0;
  z-index: 30;
  isolation: isolate;
  width: auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
  color: #443426;
  background: #f4f1ea;
}

.battle-playing-screen::before {
  position: absolute;
  top: calc(env(safe-area-inset-top) + clamp(5.1rem, 10svh, 6.2rem));
  left: 50%;
  z-index: -3;
  width: 120%;
  height: 150vw;
  background-image: var(--battle-playing-world-background);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  content: "";
  opacity: 0.56;
  filter: saturate(0.76) contrast(0.96);
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.16) 10%,
    rgba(0, 0, 0, 0.62) 24%,
    #000 38%,
    #000 62%,
    rgba(0, 0, 0, 0.62) 76%,
    rgba(0, 0, 0, 0.16) 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.16) 10%,
    rgba(0, 0, 0, 0.62) 24%,
    #000 38%,
    #000 62%,
    rgba(0, 0, 0, 0.62) 76%,
    rgba(0, 0, 0, 0.16) 90%,
    transparent 100%
  );
}

.battle-playing-screen::after {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(
      to bottom,
      rgba(244, 241, 234, 0.96) 0,
      rgba(244, 241, 234, 0.9) calc(env(safe-area-inset-top) + 0.3rem),
      rgba(255, 252, 242, 0.64) calc(env(safe-area-inset-top) + 4.5rem),
      rgba(255, 252, 242, 0.48) 46%,
      rgba(244, 241, 234, 0.72) calc(100% - env(safe-area-inset-bottom) - 4.5rem),
      rgba(244, 241, 234, 0.94) 100%
    ),
    radial-gradient(
      circle at 50% 43%,
      rgba(255, 249, 226, 0.2) 0,
      rgba(255, 253, 244, 0.28) 35%,
      rgba(244, 241, 234, 0.46) 76%
    );
  content: "";
  pointer-events: none;
}

.battle-playing-screen__leaves {
  position: absolute;
  top: calc(env(safe-area-inset-top) + clamp(10rem, 22svh, 13rem));
  left: 50%;
  z-index: -1;
  width: min(100%, 30rem);
  height: auto;
  opacity: 0.7;
  filter: saturate(0.72) sepia(0.15);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.battle-playing-screen__inner {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 30rem);
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: clamp(0.75rem, 2svh, 1.15rem);
  margin-inline: auto;
  padding: calc(env(safe-area-inset-top) + clamp(0.7rem, 2svh, 1.15rem))
    clamp(0.9rem, 4vw, 1.2rem)
    calc(env(safe-area-inset-bottom) + clamp(0.65rem, 1.8svh, 1rem));
}

.battle-playing-timer {
  --battle-timer-progress: 100%;
  position: relative;
  padding: clamp(0.68rem, 1.7svh, 0.9rem) clamp(0.85rem, 4vw, 1.15rem)
    clamp(0.75rem, 1.8svh, 0.95rem);
  border: 1px solid
    rgba(180, 137, 56, 0.72);
  border-radius: 1.1rem;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.91),
      rgba(255, 251, 237, 0.78)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 0 1.4rem rgba(205, 168, 89, 0.08),
    0 0.3rem 0.85rem rgba(72, 52, 30, 0.1);
  backdrop-filter: blur(7px);
  margin-bottom: clamp(0.15rem, 1.4svh, 0.7rem);
}

.battle-playing-timer::before,
.battle-playing-timer::after {
  position: absolute;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border: 1px solid rgba(157, 111, 40, 0.62);
  background: #f4d77f;
  content: "";
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 0.35rem rgba(206, 161, 67, 0.28);
}

.battle-playing-timer::before {
  left: -0.24rem;
}

.battle-playing-timer::after {
  right: -0.24rem;
}

.battle-playing-timer__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.battle-playing-timer__label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: clamp(0.78rem, 3.5vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.035em;
  color: #58442e;
}

.battle-playing-timer__icon {
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  border-radius: 50%;
  color: var(--battle-playing-gold-deep);
  background: conic-gradient(
    var(--battle-playing-gold) var(--battle-timer-progress),
    rgba(190, 171, 139, 0.24) 0
  );
  box-shadow:
    inset 0 0 0 0.22rem rgba(255, 252, 241, 0.94),
    0 0 0.5rem rgba(190, 139, 48, 0.18);
  transition: background 300ms ease;
}

.battle-playing-timer__icon svg {
  width: 1.08rem;
  height: 1.08rem;
}

.battle-playing-timer__value {
  display: inline-flex;
  min-width: 4.3rem;
  align-items: baseline;
  justify-content: flex-end;
  font-size: clamp(1.35rem, 6vw, 1.7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--battle-playing-gold-deep);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  font-variant-numeric: tabular-nums;
}

.battle-playing-timer__unit {
  margin-left: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.battle-playing-timer__track {
  position: relative;
  height: 0.72rem;
  overflow: hidden;
  margin-top: 0.65rem;
  border: 1px solid rgba(151, 112, 53, 0.24);
  border-radius: 9999px;
  padding: 0.12rem;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(10% - 1px),
      rgba(139, 104, 53, 0.12) calc(10% - 1px),
      rgba(139, 104, 53, 0.12) 10%
    ),
    rgba(222, 213, 190, 0.48);
  box-shadow:
    inset 0 1px 3px rgba(87, 64, 37, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.8);
}

.battle-playing-timer__bar {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    var(--battle-playing-gold-deep),
    var(--battle-playing-gold),
    var(--battle-playing-gold-light)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 0 0.55rem rgba(183, 130, 40, 0.3);
  transition:
    width 1s linear,
    background 240ms ease;
}

.battle-playing-timer__bar::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 15%,
    rgba(255, 255, 255, 0.44) 42%,
    transparent 70%
  );
  content: "";
  transform: translateX(-100%);
  animation: battle-playing-timer-shine 2.8s ease-in-out infinite;
}

.battle-playing-timer.is-urgent {
  border-color: rgba(190, 90, 65, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0.8rem rgba(194, 72, 50, 0.16);
}

.battle-playing-timer.is-urgent .battle-playing-timer__value {
  color: #a74434;
  animation: battle-playing-timer-urgent 1s ease-in-out infinite;
}

.battle-playing-timer.is-urgent .battle-playing-timer__icon {
  color: #8f392f;
  background: conic-gradient(
    #c65b49 var(--battle-timer-progress),
    rgba(190, 171, 139, 0.24) 0
  );
  box-shadow:
    inset 0 0 0 0.22rem rgba(255, 252, 241, 0.94),
    0 0 0.5rem rgba(184, 65, 45, 0.2);
}

.battle-playing-timer.is-urgent .battle-playing-timer__bar {
  background: linear-gradient(90deg, #a94b3d, #dc7760);
  box-shadow: 0 0 0.55rem rgba(184, 65, 45, 0.24);
}

.battle-playing-duel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(4.1rem, 18vw, 5.6rem)
    minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(0.2rem, 1.5vw, 0.55rem);
  margin-bottom: clamp(0.45rem, 4.5svh, 2.35rem);
  padding-inline: clamp(0.2rem, 2vw, 0.7rem);
}

.battle-playing-player {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: center;
}

.battle-playing-player__avatar {
  position: relative;
  width: clamp(6.25rem, 27vw, 7.6rem);
  aspect-ratio: 1;
  isolation: isolate;
  filter: drop-shadow(
    0 0.25rem 0.38rem
      color-mix(in srgb, var(--battle-playing-theme) 18%, rgba(77, 52, 25, 0.18))
  );
}

.battle-playing-player__avatar::before {
  position: absolute;
  inset: -5%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 253, 229, 0.9) 44%,
    rgba(244, 217, 144, 0.55) 64%,
    rgba(218, 169, 57, 0.2) 76%,
    transparent 90%
  );
  content: "";
  filter: blur(0.25rem);
}

.battle-playing-player__image {
  position: absolute;
  inset: 8.5%;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 252, 240, 0.88);
}

.battle-playing-player__picture {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.battle-playing-player__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
}

.battle-playing-player__placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  font-size: 0.55rem;
  color: rgba(87, 68, 45, 0.46);
}

.battle-playing-player__name {
  width: min(100%, 8.6rem);
  overflow: hidden;
  margin-top: clamp(0.42rem, 1.15svh, 0.68rem);
  font-size: clamp(0.72rem, 3.35vw, 0.88rem);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #483628;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92),
    0 0 0.35rem rgba(255, 251, 229, 0.78);
}

.battle-playing-vs {
  position: relative;
  display: grid;
  width: clamp(4.1rem, 18vw, 5.6rem);
  aspect-ratio: 1;
  place-items: center;
}

.battle-playing-vs__emblem {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0.82;
  filter: drop-shadow(0 0 0.3rem rgba(211, 166, 67, 0.25));
}

.battle-playing-vs__text {
  position: relative;
  z-index: 1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 8vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  color: #aa7829;
  text-shadow:
    0 1px 0 #fff3b0,
    0 0 0.6rem rgba(226, 184, 84, 0.4),
    0 0.14rem 0.15rem rgba(92, 59, 19, 0.14);
}

.battle-playing-action-area {
  display: grid;
  gap: clamp(0.75rem, 2svh, 1.15rem);
}

.battle-playing-question-shell {
  position: relative;
  display: grid;
  min-height: clamp(9.5rem, 22svh, 12.5rem);
  margin-bottom: clamp(3.1rem, 8.5svh, 4.6rem);
}

.battle-playing-question {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(196, 151, 70, 0.58);
  border-radius: 1.05rem;
  padding: clamp(1.7rem, 3.5svh, 2rem) clamp(1rem, 5vw, 1.5rem)
    clamp(0.9rem, 2svh, 1.2rem);
  background:
    linear-gradient(145deg, rgba(255, 253, 247, 0.94), rgba(250, 247, 237, 0.88));
  box-shadow:
    inset 0 0 0 0.2rem rgba(255, 255, 255, 0.42),
    inset 0 0 2rem
      color-mix(in srgb, var(--battle-playing-theme) 5%, transparent),
    0 0.28rem 0.65rem rgba(85, 58, 26, 0.1);
  backdrop-filter: blur(7px);
}

.battle-playing-question__ornament {
  position: absolute;
  z-index: 8;
  width: 1.05rem;
  height: 1.05rem;
  background: linear-gradient(145deg, #fff0ad 4%, #d3a23f 52%, #8f6327 100%);
  clip-path: polygon(
    50% 0,
    60% 39%,
    100% 50%,
    60% 61%,
    50% 100%,
    40% 61%,
    0 50%,
    40% 39%
  );
  filter: drop-shadow(0 0.08rem 0.12rem rgba(117, 77, 24, 0.28));
  pointer-events: none;
}

.battle-playing-question__ornament::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 50%;
  background: #fff5c4;
  box-shadow: 0 0 0.22rem rgba(255, 243, 178, 0.7);
  content: "";
  transform: translate(-50%, -50%);
}

.battle-playing-question__ornament--top {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.battle-playing-question__ornament--right {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}

.battle-playing-question__ornament--bottom {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

.battle-playing-question__ornament--left {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.battle-playing-question__compass {
  position: absolute;
  right: -1.4rem;
  bottom: -1.65rem;
  width: clamp(7.2rem, 34vw, 9.5rem);
  height: auto;
  opacity: 0.13;
  filter: sepia(0.12);
  pointer-events: none;
}

.battle-playing-question__number {
  position: absolute;
  top: clamp(0.72rem, 1.8svh, 0.95rem);
  left: clamp(1rem, 5vw, 1.5rem);
  z-index: 2;
  font-size: clamp(0.7rem, 3vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #72532e;
}

.battle-playing-question__text {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: clamp(5rem, 12svh, 6.7rem);
  align-items: center;
  font-size: clamp(1.02rem, 4.75vw, 1.28rem);
  font-weight: 600;
  line-height: 1.62;
  letter-spacing: 0.02em;
  color: #3f2f22;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76);
}

.battle-playing-question__feedback {
  position: absolute;
  top: 0.65rem;
  right: 1rem;
  z-index: 7;
  font-size: clamp(1.55rem, 6.7vw, 2rem);
  font-weight: 700;
  text-shadow:
    0 1px 0 white,
    0 0 0.5rem rgba(255, 255, 255, 0.92);
}

.battle-playing-question__result {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(255, 253, 245, 0.54);
  backdrop-filter: blur(1px);
}

.battle-playing-question__result svg {
  width: clamp(8.5rem, 41vw, 12rem);
  height: clamp(8.5rem, 41vw, 12rem);
}

.battle-playing-answers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(2rem, 9vw, 2.75rem)
    minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.12rem, 0.6vw, 0.28rem);
}

.battle-playing-answer {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 1.44;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 1rem;
  padding: 0;
  color: white;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform 130ms ease,
    filter 160ms ease,
    opacity 160ms ease;
}

.battle-playing-answer__surface {
  position: absolute;
  inset: 7% 5.5% 7.5%;
  z-index: 0;
  overflow: hidden;
  border-radius: 0.72rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -0.3rem 0.6rem rgba(40, 24, 13, 0.18);
}

.battle-playing-answer__surface::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.28), transparent 34%),
    linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.16), transparent 67%);
  content: "";
}

.battle-playing-answer--true .battle-playing-answer__surface {
  background: linear-gradient(145deg, #5f9f52, #39763e 72%, #2f6536);
}

.battle-playing-answer--false .battle-playing-answer__surface {
  background: linear-gradient(145deg, #ce5549, #a83c36 72%, #8c302f);
}

.battle-playing-answer__frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
     object-fit: fill;
  pointer-events: none;
}

.battle-playing-answer__text {
  position: relative;
  z-index: 2;
  display: block;
  width: min(56%, 3.9rem);
  aspect-ratio: 1;
  font-size: 0;
  color: #fff8df;
  filter: drop-shadow(0 0.14rem 0.12rem rgba(63, 39, 18, 0.22))
    drop-shadow(0 0 0.3rem rgba(255, 240, 176, 0.18));
}

.battle-playing-answer--true .battle-playing-answer__text {
  border: clamp(0.28rem, 1.2vw, 0.38rem) solid currentColor;
  border-radius: 50%;
}

.battle-playing-answer--false .battle-playing-answer__text::before,
.battle-playing-answer--false .battle-playing-answer__text::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 105%;
  height: clamp(0.3rem, 1.3vw, 0.4rem);
  border-radius: 9999px;
  background: currentColor;
  content: "";
}

.battle-playing-answer--false .battle-playing-answer__text::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.battle-playing-answer--false .battle-playing-answer__text::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.battle-playing-answers__separator {
  width: 100%;
  max-width: 2.65rem;
  height: auto;
  justify-self: center;
  opacity: 0.86;
  filter: drop-shadow(0 0.12rem 0.18rem rgba(105, 70, 25, 0.18));
  pointer-events: none;
}

.battle-playing-answer:active:not(:disabled) {
  filter: brightness(1.05);
  transform: translateY(0.14rem) scale(0.975);
}

.battle-playing-answer:focus-visible {
  border-radius: 0.75rem;
  outline: 3px solid
    color-mix(in srgb, var(--battle-playing-theme) 62%, #d3aa51);
  outline-offset: 0.15rem;
}

.battle-playing-answer:disabled {
  cursor: wait;
  filter: saturate(0.78) brightness(0.96);
  opacity: 0.86;
}

@keyframes battle-playing-timer-shine {
  0%,
  46% {
    transform: translateX(-110%);
  }

  72%,
  100% {
    transform: translateX(115%);
  }
}

@keyframes battle-playing-timer-urgent {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.72;
    transform: scale(1.035);
  }
}

@media (max-height: 760px) {
  .battle-playing-screen__inner {
    grid-template-rows: auto auto auto;
    gap: 0.48rem;
    padding-top: calc(env(safe-area-inset-top) + 0.5rem);
    padding-bottom: calc(env(safe-area-inset-bottom) + 0.45rem);
  }

  .battle-playing-timer {
    padding-block: 0.58rem 0.65rem;
  }

  .battle-playing-timer__track {
    height: 0.62rem;
    margin-top: 0.48rem;
  }

  .battle-playing-player__avatar {
    width: clamp(4.8rem, 21vw, 5.65rem);
  }

  .battle-playing-player__name {
    margin-top: 0.32rem;
    font-size: 0.7rem;
  }

  .battle-playing-question-shell {
    min-height: clamp(7.8rem, 20svh, 9rem);
  }

  .battle-playing-question {
    padding-top: 1.45rem;
    padding-bottom: 0.75rem;
  }

  .battle-playing-question__text {
    min-height: 3.9rem;
    font-size: clamp(0.92rem, 4vw, 1.08rem);
    line-height: 1.48;
  }

  .battle-playing-answer__text {
    width: min(56%, 3.5rem);
  }
}

@media (max-height: 660px) {
  .battle-playing-screen__inner {
    grid-template-rows: auto auto auto;
    gap: 0.3rem;
  }

  .battle-playing-timer__icon {
    width: 1.6rem;
    height: 1.6rem;
  }

  .battle-playing-player__avatar {
    width: 4.45rem;
  }

  .battle-playing-question-shell {
    min-height: 6.6rem;
  }

  .battle-playing-question {
    padding-top: 1.3rem;
  }

  .battle-playing-question__number {
    top: 0.55rem;
  }

  .battle-playing-question__text {
    min-height: 3.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .battle-playing-timer__bar,
  .battle-playing-timer__icon,
  .battle-playing-answer {
    transition-duration: 0.01ms !important;
  }

  .battle-playing-timer__bar::after,
  .battle-playing-timer.is-urgent .battle-playing-timer__value {
    animation: none;
  }
}

/* ========================================
   Battle result summary
   ======================================== */

html:has(.battle-result-screen:not(.hidden)),
body:has(.battle-result-screen:not(.hidden)) {
  width: 100%;
  height: calc(100dvh + env(safe-area-inset-top));
  min-height: calc(100dvh + env(safe-area-inset-top));
  overflow: hidden;
  overscroll-behavior: none;
  background: #31432a;
  scrollbar-width: none;
}

html:has(.battle-result-screen:not(.hidden))::-webkit-scrollbar,
body:has(.battle-result-screen:not(.hidden))::-webkit-scrollbar {
  display: none;
}

body:has(.battle-result-screen:not(.hidden)) {
  padding-bottom: 0;
}

body:has(.battle-result-screen:not(.hidden)) main {
  width: 100%;
  height: calc(100dvh + env(safe-area-inset-top));
  min-height: calc(100dvh + env(safe-area-inset-top));
  overflow: hidden;
}

.battle-result-screen {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  isolation: isolate;
  width: 100%;
  /* iOS standalone表示では100dvhが上部セーフエリア分だけ短くなるため補う */
  height: calc(100dvh + env(safe-area-inset-top));
  min-height: calc(100dvh + env(safe-area-inset-top));
  overflow: hidden;
  color: #3e2d1e;
  background-color: #31432a;
  background-image:
    linear-gradient(
      to bottom,
      rgba(244, 241, 234, 0.4) 0,
      rgba(255, 246, 218, 0.14) calc(env(safe-area-inset-top) + 2.8rem),
      transparent calc(env(safe-area-inset-top) + 6rem)
    ),
    var(--battle-result-background);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.battle-result-screen::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      ellipse at 50% 42%,
      rgba(255, 250, 230, 0.22) 0,
      rgba(255, 247, 218, 0.1) 38%,
      transparent 70%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 68%,
      rgba(244, 241, 234, 0.18) 76%,
      rgba(244, 241, 234, 0.68) 89%,
      #f4f1ea 100%
    ),
    linear-gradient(
      to bottom,
      rgba(255, 250, 232, 0.08),
      transparent 64%,
      rgba(28, 43, 23, 0.12)
    );
  content: "";
  pointer-events: none;
}

.battle-result-screen__content {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 30rem);
  height: 100dvh;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}

.battle-result-summary {
  --battle-result-phase-color: #2d6c3b;
  --battle-result-phase-shadow: rgba(45, 108, 59, 0.2);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto auto;
  row-gap: clamp(3.15rem, 6.6svh, 3.55rem);
  align-content: start;
  padding: calc(env(safe-area-inset-top) + clamp(2.85rem, 6.2svh, 3.45rem))
    clamp(0.8rem, 3.8vw, 1.15rem)
    calc(env(safe-area-inset-bottom) + clamp(0.65rem, 1.8svh, 1rem));
  text-align: center;
}

.battle-result-summary:not(.hidden) {
  display: grid;
}

.battle-result-summary[data-phase="penalty"] {
  --battle-result-phase-color: #a53f32;
  --battle-result-phase-shadow: rgba(165, 63, 50, 0.2);
}

.battle-result-summary[data-phase="final"] {
  --battle-result-phase-color: #1c5794;
  --battle-result-phase-shadow: rgba(28, 87, 148, 0.2);
}

.battle-result-header {
  position: relative;
  z-index: 3;
  isolation: isolate;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  color: #3d2b1b;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72),
    0 0 0.55rem rgba(255, 248, 220, 0.82);
}

.battle-result-header::before {
  position: absolute;
  inset: -0.7rem -0.45rem -1rem;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 250, 232, 0.92) 0,
    rgba(255, 246, 218, 0.66) 48%,
    rgba(255, 246, 218, 0) 80%
  );
  content: "";
  filter: blur(0.35rem);
  pointer-events: none;
}

.battle-result-header__ornament {
  display: block;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 0.08rem 0.08rem rgba(91, 58, 19, 0.12));
}

.battle-result-header__ornament--top {
  width: min(68%, 18rem);
}

.battle-result-header__ornament--bottom {
  width: min(88%, 25rem);
  margin-top: 0.32rem;
}

.battle-result-header__title-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: clamp(-0.22rem, -0.4svh, -0.08rem);
}

.battle-result-header__title {
  margin: 0;
  font-size: clamp(1.75rem, 8.3vw, 2.28rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
  color: #6a4218;
}

.battle-result-header__title-main {
  position: relative;
  display: block;
  color: #24160f;
  background: none;
  text-shadow:
    0 1px 0 rgba(255, 238, 190, 0.18),
    0 0.08rem 0.1rem rgba(35, 19, 9, 0.34);
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: #24160f;
}

.battle-result-header__title-main::after {
  position: absolute;
  inset: 0;
  color: transparent;
  background: linear-gradient(
    108deg,
    transparent 0%,
    transparent 27%,
    rgba(190, 149, 66, 0.95) 34%,
    transparent 41%,
    transparent 66%,
    rgba(163, 120, 45, 0.9) 73%,
    transparent 80%,
    transparent 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  content: attr(data-title);
  opacity: 0.78;
  pointer-events: none;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.battle-result-header .battle-result-header__subtitle {
  isolation: isolate;
  margin-top: 0.08rem;
  font-size: clamp(0.62rem, 2.8vw, 0.76rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  color: #735021;
  background: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88);
  -webkit-text-fill-color: currentColor;
}

.battle-result-header .battle-result-header__subtitle::before {
  width: calc(100% + 2.5rem);
  background: radial-gradient(
    circle,
    rgba(242, 207, 126, 0.9) 0%,
    rgba(221, 172, 73, 0.5) 54%,
    rgba(193, 132, 37, 0) 100%
  );
}

.battle-result-header__leaf {
  width: clamp(1.6rem, 7.8vw, 2.15rem);
  height: clamp(2.55rem, 12.2vw, 3.3rem);
  flex: 0 0 auto;
  margin-right: 0.22rem;
  color: #9a6d24;
  background: linear-gradient(155deg, #e4bd61 4%, #a97225 58%, #634117 100%);
  -webkit-mask-image: var(--battle-result-leaf-decoration);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--battle-result-leaf-decoration);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  filter: drop-shadow(0 0.08rem 0.1rem rgba(88, 53, 16, 0.2));
  transform: translateY(0.12rem) rotate(-7deg);
}

.battle-result-header__leaf--right {
  margin-right: 0;
  margin-left: 0.22rem;
  transform: translateY(0.12rem) scaleX(-1) rotate(-7deg);
}

.battle-result-duel {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) clamp(3.7rem, 18vw, 4.8rem)
    minmax(0, 1fr);
  align-items: start;
  justify-items: center;
  gap: clamp(0.08rem, 0.8vw, 0.3rem);
  margin-top: 0;
}

.battle-result-player {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-rows: auto auto auto;
  justify-items: center;
}

.battle-result-player__avatar-stage {
  position: relative;
  width: clamp(8rem, 35vw, 9.75rem);
  aspect-ratio: 1;
  isolation: isolate;
  filter: drop-shadow(0 0.32rem 0.42rem rgba(75, 49, 17, 0.2));
  transform: scale(1);
  transform-origin: center;
  transition: transform 620ms cubic-bezier(0.18, 0.9, 0.28, 1.16);
}

.battle-result-player__winner-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250%;
  height: 250%;
  max-width: none;
  z-index: 4;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 480ms ease;
}

.battle-result-player__avatar {
  position: absolute;
  inset: 11.8%;
  z-index: 1;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 253, 244, 0.9);
  box-shadow: 0 0.2rem 0.48rem rgba(40, 31, 19, 0.18);
  transition:
    box-shadow 480ms ease,
    filter 480ms ease;
}

.battle-result-player__avatar-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
}

.battle-result-player__picture {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.battle-result-player__placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: rgba(76, 58, 37, 0.5);
}

.battle-result-player__crown {
  position: absolute;
  top: clamp(-1.95rem, -7.6vw, -1.5rem);
  left: 50%;
  z-index: 5;
  width: clamp(5.1rem, 23vw, 6.25rem);
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 0.2rem 0.18rem rgba(103, 63, 7, 0.28));
  transform: translate(-50%, 0.5rem) scale(0.78);
  transform-origin: center bottom;
  transition:
    opacity 440ms ease,
    transform 540ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.battle-result-summary[data-winner="self"]
  .battle-result-player--self
  .battle-result-player__avatar-stage,
.battle-result-summary[data-winner="opponent"]
  .battle-result-player--opponent
  .battle-result-player__avatar-stage {
  transform: scale(1.045);
}

.battle-result-summary[data-winner="self"]
  .battle-result-player--self
  .battle-result-player__crown,
.battle-result-summary[data-winner="opponent"]
  .battle-result-player--opponent
  .battle-result-player__crown {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.battle-result-summary[data-winner="self"]
  .battle-result-player--self
  .battle-result-player__winner-glow,
.battle-result-summary[data-winner="opponent"]
  .battle-result-player--opponent
  .battle-result-player__winner-glow {
  opacity: 1;
}

.battle-result-player__name {
  overflow: hidden;
  width: min(100%, 10rem);
  margin: clamp(1.05rem, 2.8svh, 1.4rem) 0 0;
  padding: 0.12rem 0.3rem 0.18rem;
  border-radius: 9999px;
  font-size: clamp(0.76rem, 3.6vw, 0.9rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.015em;
  color: #35271c;
  background: rgba(255, 249, 230, 0.4);
  box-shadow: 0 0 0.72rem 0.32rem rgba(255, 247, 219, 0.58);
  text-overflow: ellipsis;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96),
    0 0 0.36rem rgba(255, 250, 232, 0.92);
  white-space: nowrap;
  backdrop-filter: blur(1.5px);
}

.battle-result-score {
  position: relative;
  display: grid;
  width: clamp(7.2rem, 31vw, 8.8rem);
  aspect-ratio: 2 / 1;
  place-items: center;
  margin-top: clamp(1.2rem, 3.25svh, 1.6rem);
  color: var(--battle-result-phase-color);
  filter: drop-shadow(0 0.24rem 0.2rem rgba(66, 43, 18, 0.12));
}

.battle-result-score__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
     object-fit: fill;
  pointer-events: none;
}

.battle-result-score__value {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: inherit;
  font-size: clamp(2.15rem, 11.5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: currentColor;
  transform: scale(1);
  transform-origin: center;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0.48rem var(--battle-result-phase-shadow);
  transition:
    color 360ms ease,
    transform 260ms ease;
}

.battle-result-score__value.is-emphasized {
  transform: scale(1.08);
  animation: battle-result-score-emphasize 620ms
    cubic-bezier(0.18, 0.9, 0.28, 1.18) both;
}

@keyframes battle-result-score-emphasize {
  0% {
    transform: scale(1);
  }

  48% {
    transform: scale(1.16);
  }

  74% {
    transform: scale(1.055);
  }

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

.battle-result-vs {
  position: relative;
  display: grid;
  width: clamp(3.7rem, 18vw, 4.8rem);
  aspect-ratio: 1;
  place-items: center;
  align-self: start;
  margin-top: clamp(2.7rem, 12vw, 3.45rem);
}

.battle-result-vs__emblem {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  max-width: none;
  height: 200%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 1;
  filter:
    sepia(0.62) saturate(2.15) brightness(0.78) contrast(1.42)
    drop-shadow(0 0 0.46rem rgba(190, 139, 47, 0.4));
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%);
}

.battle-result-vs__text {
  position: relative;
  z-index: 1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.9rem, 9vw, 2.55rem);
  font-weight: 700;
  line-height: 1;
  color: #a97926;
  text-shadow:
    0 1px 0 #fff6d7,
    0 0.16rem 0.2rem rgba(83, 53, 15, 0.2);
}

.battle-result-phase {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(100%, 28rem);
  aspect-ratio: 5 / 1;
  place-items: center;
  justify-self: center;
  margin-top: 0;
  filter: drop-shadow(0 0.3rem 0.28rem rgba(69, 45, 16, 0.2));
}

.battle-result-phase__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0;
  transform: scale(0.975);
  transition:
    opacity 320ms ease,
    transform 440ms cubic-bezier(0.2, 0.9, 0.3, 1);
  pointer-events: none;
}

.battle-result-summary[data-phase="correct"]
  .battle-result-phase__image--correct,
.battle-result-summary[data-phase="penalty"]
  .battle-result-phase__image--penalty,
.battle-result-summary[data-phase="final"]
  .battle-result-phase__image--final {
  opacity: 1;
  transform: scale(1);
}

.battle-result-phase__text {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-left: clamp(1rem, 7vw, 2.4rem);
  font-size: clamp(1.15rem, 6.1vw, 1.68rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: var(--battle-result-phase-color);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    0 0 0.48rem var(--battle-result-phase-shadow);
  transition: color 360ms ease;
}

.battle-result-summary[data-phase="final"] .battle-result-phase__text {
  padding-left: 0;
  font-size: clamp(1.28rem, 6.7vw, 1.85rem);
}

@media (max-width: 360px) {
  .battle-result-duel {
    grid-template-columns: minmax(0, 1fr) 3.35rem minmax(0, 1fr);
  }

  .battle-result-vs {
    width: 3.55rem;
  }
}

@media (max-height: 760px) {
  .battle-result-summary {
    row-gap: 1.65rem;
    padding-top: calc(env(safe-area-inset-top) + 1.4rem);
  }

  .battle-result-header__ornament--top {
    width: min(58%, 15rem);
  }

  .battle-result-header__title {
    font-size: clamp(1.55rem, 7.6vw, 2rem);
  }

  .battle-result-header__leaf {
    width: 1.35rem;
    height: 2.15rem;
  }

  .battle-result-header__subtitle {
    font-size: 0.61rem;
  }

  .battle-result-duel {
    margin-top: 0;
  }

  .battle-result-player__avatar-stage {
    width: clamp(7.35rem, 31.5vw, 8.5rem);
  }

  .battle-result-player__name {
    margin-top: 0.8rem;
    font-size: 0.75rem;
  }

  .battle-result-score {
    width: clamp(6.8rem, 29vw, 8rem);
    margin-top: 0.85rem;
  }

  .battle-result-score__value {
    font-size: clamp(1.95rem, 10vw, 2.55rem);
  }

  .battle-result-vs {
    margin-top: 2.35rem;
  }

  .battle-result-phase {
    margin-top: 0;
  }
}

@media (max-height: 660px) {
  .battle-result-summary {
    row-gap: 0.85rem;
    padding-top: calc(env(safe-area-inset-top) + 1.35rem);
  }

  .battle-result-header__ornament--top {
    width: 50%;
  }

  .battle-result-header__ornament--bottom {
    width: 76%;
  }

  .battle-result-header__title {
    font-size: 1.45rem;
  }

  .battle-result-header__subtitle {
    font-size: 0.56rem;
  }

  .battle-result-duel {
    margin-top: 0;
  }

  .battle-result-player__avatar-stage {
    width: 6.7rem;
  }

  .battle-result-player__crown {
    top: -1.4rem;
    width: 4.5rem;
  }

  .battle-result-score {
    width: 6.3rem;
  }

  .battle-result-phase {
    width: 92%;
    margin-top: 0;
  }

  .battle-result-phase__text {
    font-size: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .battle-result-player__avatar-stage,
  .battle-result-player__winner-glow,
  .battle-result-player__avatar,
  .battle-result-player__crown,
  .battle-result-score__value,
  .battle-result-phase__image,
  .battle-result-phase__text {
    transition-duration: 0.01ms !important;
  }

  .battle-result-score__value.is-emphasized {
    animation: none !important;
    transform: scale(1.08);
  }
}

/* ========================================
   Battle outcome (WIN / DRAW / LOSE)
   ======================================== */

.battle-outcome {
  --battle-outcome-accent: #af7a22;
  --battle-outcome-accent-light: #f4d77c;
  --battle-outcome-accent-dark: #5c3a11;
  --battle-outcome-text: #4a321b;
  position: absolute;
  inset: 0;
  z-index: 10;
  isolation: isolate;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--battle-outcome-text);
  background: #f3ead2;
}

.battle-outcome[data-outcome="draw"] {
  --battle-outcome-accent: #5f773b;
  --battle-outcome-accent-light: #cad996;
  --battle-outcome-accent-dark: #2f4024;
  --battle-outcome-text: #334326;
  background: #dce6c6;
}

.battle-outcome[data-outcome="lose"] {
  --battle-outcome-accent: #687078;
  --battle-outcome-accent-light: #d6d9d8;
  --battle-outcome-accent-dark: #30363b;
  --battle-outcome-text: #edf0ed;
  background: #4f5559;
}

.battle-outcome__video {
  position: absolute;
  inset: 0;
  z-index: -3;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  pointer-events: none;
}

.battle-outcome[data-outcome="win"] .battle-outcome__video {
  filter: saturate(1.04) brightness(1.02);
}

.battle-outcome[data-outcome="draw"] .battle-outcome__video {
  filter: saturate(0.96) brightness(1.02);
}

.battle-outcome[data-outcome="lose"] .battle-outcome__video {
  filter: saturate(0.72) brightness(0.76) contrast(1.04);
}

.battle-outcome__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(255, 251, 226, 0.48) 0,
      rgba(255, 247, 214, 0.18) 36%,
      transparent 66%
    ),
    linear-gradient(
      to bottom,
      rgba(255, 249, 226, 0.35) 0,
      transparent 25%,
      transparent 76%,
      rgba(84, 57, 21, 0.14) 100%
    );
  pointer-events: none;
}

.battle-outcome[data-outcome="draw"] .battle-outcome__veil {
  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(249, 255, 225, 0.54) 0,
      rgba(227, 241, 194, 0.2) 38%,
      transparent 67%
    ),
    linear-gradient(
      to bottom,
      rgba(244, 250, 224, 0.28),
      transparent 30%,
      rgba(59, 79, 34, 0.12) 100%
    );
}

.battle-outcome[data-outcome="lose"] .battle-outcome__veil {
  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(232, 236, 231, 0.2) 0,
      rgba(194, 200, 199, 0.06) 38%,
      transparent 65%
    ),
    linear-gradient(
      to bottom,
      rgba(30, 36, 40, 0.12),
      rgba(22, 28, 32, 0.04) 35%,
      rgba(18, 23, 27, 0.32) 100%
    );
}

.battle-outcome__content {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto minmax(7.2rem, auto) auto;
  align-content: center;
  justify-items: center;
  row-gap: clamp(0.95rem, 2.7svh, 1.45rem);
  padding:
    calc(env(safe-area-inset-top) + clamp(1.2rem, 3.3svh, 1.9rem))
    clamp(0.9rem, 4vw, 1.25rem)
    calc(env(safe-area-inset-bottom) + clamp(1rem, 2.6svh, 1.55rem));
  text-align: center;
}

.battle-outcome[data-outcome="win"] .battle-outcome__content {
  row-gap: clamp(1.3rem, 3.6svh, 1.9rem);
}

.battle-outcome__header {
  position: relative;
  isolation: isolate;
  display: flex;
  width: min(100%, 27rem);
  flex-direction: column;
  align-items: center;
  color: var(--battle-outcome-accent);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.66),
    0 0 0.75rem rgba(255, 248, 218, 0.5);
  transform: translateY(clamp(-1.7rem, -3.3svh, -1.1rem));
}

.battle-outcome__header::before {
  position: absolute;
  inset: -0.65rem -0.25rem -0.75rem;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 250, 228, 0.65) 0,
    rgba(255, 248, 221, 0.28) 52%,
    transparent 80%
  );
  content: "";
  filter: blur(0.3rem);
  pointer-events: none;
}

.battle-outcome[data-outcome="lose"] .battle-outcome__header {
  text-shadow:
    0 0.08rem 0.12rem rgba(0, 0, 0, 0.45),
    0 0 0.72rem rgba(225, 231, 229, 0.34);
}

.battle-outcome[data-outcome="lose"] .battle-outcome__header::before {
  background: radial-gradient(
    ellipse at center,
    rgba(217, 222, 221, 0.18) 0,
    rgba(207, 214, 212, 0.07) 50%,
    transparent 80%
  );
}

.battle-outcome__title-ornament {
  display: block;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  filter: sepia(0.42) saturate(1.25)
    drop-shadow(0 0.08rem 0.08rem rgba(75, 49, 16, 0.16));
}

.battle-outcome[data-outcome="draw"] .battle-outcome__title-ornament {
  filter: sepia(0.5) saturate(0.75) hue-rotate(25deg) brightness(0.72);
}

.battle-outcome[data-outcome="lose"] .battle-outcome__title-ornament {
  filter: grayscale(1) brightness(0.58) contrast(1.3)
    drop-shadow(0 0.08rem 0.08rem rgba(0, 0, 0, 0.42));
}

.battle-outcome__title-ornament--top {
  width: min(68%, 18rem);
}

.battle-outcome__title-ornament--bottom {
  width: min(88%, 25rem);
  margin-top: 0.18rem;
}

.battle-outcome__title-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: -0.12rem;
}

.battle-outcome__title {
  min-width: clamp(8rem, 42vw, 10.5rem);
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.45rem, 12.5vw, 3.35rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.08em;
  color: var(--battle-outcome-accent);
  background: linear-gradient(
    180deg,
    var(--battle-outcome-accent-light) 0%,
    var(--battle-outcome-accent) 48%,
    var(--battle-outcome-accent-dark) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0.12rem 0.12rem rgba(50, 32, 10, 0.16);
  -webkit-text-fill-color: transparent;
}

.battle-outcome[data-outcome="lose"] .battle-outcome__title {
  text-shadow: 0 0.14rem 0.16rem rgba(0, 0, 0, 0.38);
}

.battle-outcome__title-leaf {
  width: clamp(1.65rem, 8vw, 2.2rem);
  height: clamp(2.4rem, 11.5vw, 3.15rem);
  flex: 0 0 auto;
  margin-right: 0.2rem;
  color: var(--battle-outcome-accent);
  background: linear-gradient(
    155deg,
    var(--battle-outcome-accent-light),
    var(--battle-outcome-accent) 64%,
    var(--battle-outcome-accent-dark)
  );
  -webkit-mask-image: var(--battle-outcome-leaf-decoration);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--battle-outcome-leaf-decoration);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  filter: drop-shadow(0 0.08rem 0.1rem rgba(46, 30, 11, 0.2));
  transform: translateY(0.12rem) rotate(-7deg);
}

.battle-outcome__title-leaf--right {
  margin-right: 0;
  margin-left: 0.2rem;
  transform: translateY(0.12rem) scaleX(-1) rotate(-7deg);
}

.battle-outcome[data-outcome="lose"] .battle-outcome__title-leaf {
  background: linear-gradient(155deg, #74797b 4%, #34383b 58%, #121517 100%);
  filter: drop-shadow(0 0.08rem 0.1rem rgba(0, 0, 0, 0.42));
}

.battle-outcome__avatar-stage {
  position: relative;
  isolation: isolate;
  width: clamp(11.7rem, 52vw, 13.5rem);
  aspect-ratio: 1;
  filter: drop-shadow(0 0.35rem 0.45rem rgba(49, 32, 13, 0.24));
}

.battle-outcome__avatar {
  position: absolute;
  inset: 11.8%;
  z-index: 1;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 253, 244, 0.88);
}

.battle-outcome__avatar-picture {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.battle-outcome__avatar-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: rgba(76, 58, 37, 0.56);
}

.battle-outcome__avatar-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
}

.battle-outcome__win-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: none;
  width: 250%;
  height: 250%;
  max-width: none;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.battle-outcome[data-outcome="win"] .battle-outcome__win-glow {
  display: block;
  animation: battle-outcome-win-glow 2.2s ease-in-out infinite alternate;
}

@keyframes battle-outcome-win-glow {
  from {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.035);
  }
}

.battle-outcome__detail {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 7.2rem;
  place-items: center;
}

.battle-outcome[data-outcome="win"] .battle-outcome__detail,
.battle-outcome[data-outcome="win"] .battle-outcome__return-button {
  top: clamp(2.6rem, 5.6svh, 3rem);
}

.battle-outcome__reward {
  position: relative;
  display: grid;
  width: min(100%, 26rem);
  min-height: 7.2rem;
  aspect-ratio: 30 / 11;
  place-items: center;
  filter: drop-shadow(0 0.3rem 0.3rem rgba(74, 47, 14, 0.22));
}

.battle-outcome__reward-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
     object-fit: fill;
  pointer-events: none;
}

.battle-outcome__reward-content {
  position: relative;
  z-index: 1;
  display: grid;
  width: 67%;
  align-content: center;
  row-gap: 0.18rem;
  padding: 0.7rem 0 0.62rem;
  color: #4b351d;
}

.battle-outcome__reward-title {
  margin: 0;
  font-size: clamp(0.78rem, 3.5vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6c4b1f;
}

.battle-outcome__reward-breakdown {
  display: grid;
  row-gap: 0.04rem;
  padding: 0.18rem 0 0.25rem;
  border-bottom: 1px solid rgba(139, 95, 28, 0.26);
}

.battle-outcome__reward-breakdown p,
.battle-outcome__reward-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  font-size: clamp(0.66rem, 3vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.battle-outcome__reward-breakdown strong {
  font-size: clamp(0.78rem, 3.6vw, 0.96rem);
  color: #8e631f;
}

.battle-outcome__reward-content small {
  margin-left: 0.08rem;
  font-size: 0.7em;
  font-weight: 700;
}

.battle-outcome__reward-total {
  font-size: clamp(0.78rem, 3.7vw, 0.96rem);
  font-weight: 700;
  color: #5b3c17;
}

.battle-outcome__reward-total strong {
  font-size: clamp(1.15rem, 5.8vw, 1.52rem);
  line-height: 1;
  color: #a66d13;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.battle-outcome__message {
  width: min(96%, 24rem);
  margin: 0;
  padding: 0.78rem 0.7rem;
  border-radius: 9999px;
  font-size: clamp(0.84rem, 3.8vw, 0.96rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.015em;
  color: var(--battle-outcome-text);
  background: rgba(255, 252, 234, 0.42);
  box-shadow: 0 0 1.1rem 0.5rem rgba(255, 250, 225, 0.4);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    0 0 0.4rem rgba(255, 252, 231, 0.7);
  backdrop-filter: blur(2px);
}

.battle-outcome[data-outcome="win"] .battle-outcome__message {
  display: none;
}

.battle-outcome[data-outcome="draw"] .battle-outcome__reward,
.battle-outcome[data-outcome="lose"] .battle-outcome__reward {
  display: none;
}

.battle-outcome[data-outcome="lose"] .battle-outcome__message {
  color: #f0f1ef;
  background: rgba(38, 44, 48, 0.38);
  box-shadow: 0 0 1rem 0.4rem rgba(202, 207, 205, 0.12);
  text-shadow:
    0 0.08rem 0.12rem rgba(0, 0, 0, 0.62),
    0 0 0.35rem rgba(224, 229, 227, 0.2);
}

.battle-outcome__return-button {
  position: relative;
  display: grid;
  width: min(100%, 25rem);
  aspect-ratio: 5 / 1;
  place-items: center;
  color: #4e361e;
  filter: drop-shadow(0 0.34rem 0.3rem rgba(50, 32, 12, 0.24));
  transform: translateY(0) scale(1);
  transition:
    filter 180ms ease,
    transform 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.battle-outcome[data-outcome="win"] .battle-outcome__return-button {
  margin-top: clamp(0.7rem, 2.2svh, 1.15rem);
}

.battle-outcome__return-button:active {
  filter: drop-shadow(0 0.16rem 0.18rem rgba(50, 32, 12, 0.22));
  transform: translateY(0.1rem) scale(0.985);
}

.battle-outcome__return-button-image {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
     object-fit: fill;
  pointer-events: none;
}

.battle-outcome[data-outcome="win"]
  .battle-outcome__return-button-image--win,
.battle-outcome[data-outcome="draw"]
  .battle-outcome__return-button-image--draw,
.battle-outcome[data-outcome="lose"]
  .battle-outcome__return-button-image--lose {
  display: block;
}

.battle-outcome__return-button span {
  position: relative;
  z-index: 1;
  padding-top: 0.02rem;
  font-size: clamp(0.95rem, 4.6vw, 1.18rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
}

.battle-outcome[data-outcome="draw"] .battle-outcome__return-button,
.battle-outcome[data-outcome="lose"] .battle-outcome__return-button {
  color: #f2eedc;
}

.battle-outcome[data-outcome="draw"] .battle-outcome__return-button span,
.battle-outcome[data-outcome="lose"] .battle-outcome__return-button span {
  text-shadow: 0 0.1rem 0.12rem rgba(0, 0, 0, 0.5);
}

.battle-result-screen:has(> .battle-result-preview-navigation)
  .battle-outcome__content {
  padding-bottom: calc(env(safe-area-inset-bottom) + 4.6rem);
}

@media (max-height: 760px) {
  .battle-outcome__content {
    grid-template-rows: auto auto minmax(5.8rem, auto) auto;
    row-gap: 0.58rem;
    padding-top: calc(env(safe-area-inset-top) + 0.65rem);
    padding-bottom: calc(env(safe-area-inset-bottom) + 0.65rem);
  }

  .battle-outcome[data-outcome="win"] .battle-outcome__content {
    row-gap: 0.82rem;
  }

  .battle-outcome__header {
    transform: translateY(-1rem);
  }

  .battle-outcome__title-ornament--top {
    width: 54%;
  }

  .battle-outcome__title-ornament--bottom {
    width: 76%;
  }

  .battle-outcome__title {
    min-width: 7rem;
    font-size: clamp(2rem, 10vw, 2.65rem);
  }

  .battle-outcome__title-leaf {
    width: 1.45rem;
    height: 2.25rem;
  }

  .battle-outcome__avatar-stage {
    width: clamp(9.2rem, 42vw, 10.8rem);
  }

  .battle-outcome__detail,
  .battle-outcome__reward {
    min-height: 5.8rem;
  }

  .battle-outcome__reward {
    width: min(92%, 22rem);
  }

  .battle-outcome__reward-content {
    row-gap: 0.08rem;
    padding-block: 0.45rem;
  }

  .battle-outcome__message {
    padding-block: 0.58rem;
    font-size: 0.82rem;
  }

  .battle-outcome__return-button {
    width: min(92%, 22rem);
  }

  .battle-outcome[data-outcome="win"] .battle-outcome__return-button {
    margin-top: 0.42rem;
  }
}

@media (max-height: 660px) {
  .battle-outcome__content {
    grid-template-rows: auto auto minmax(5rem, auto) auto;
    row-gap: 0.32rem;
  }

  .battle-outcome[data-outcome="win"] .battle-outcome__content {
    row-gap: 0.48rem;
  }

  .battle-outcome__header {
    transform: translateY(-0.72rem);
  }

  .battle-outcome__title-ornament--top {
    width: 47%;
  }

  .battle-outcome__title-ornament--bottom {
    width: 68%;
  }

  .battle-outcome__title {
    font-size: 1.82rem;
  }

  .battle-outcome__title-leaf {
    width: 1.2rem;
    height: 1.85rem;
  }

  .battle-outcome__avatar-stage {
    width: 8.6rem;
  }

  .battle-outcome__detail,
  .battle-outcome__reward {
    min-height: 5rem;
  }

  .battle-outcome__reward {
    width: min(82%, 19rem);
  }

  .battle-outcome__reward-title,
  .battle-outcome__reward-breakdown p {
    font-size: 0.62rem;
  }

  .battle-outcome__reward-total {
    font-size: 0.7rem;
  }

  .battle-outcome__reward-total strong {
    font-size: 1rem;
  }

  .battle-outcome__message {
    width: 86%;
    padding-block: 0.46rem;
    font-size: 0.73rem;
  }

  .battle-outcome__return-button {
    width: min(82%, 19rem);
  }

  .battle-outcome[data-outcome="win"] .battle-outcome__return-button {
    margin-top: 0.24rem;
  }

  .battle-outcome__return-button span {
    font-size: 0.88rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .battle-outcome__win-glow {
    animation: none !important;
  }

  .battle-outcome__return-button {
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   Battle world carousel
   ======================================== */

body:has(.battle-world-select) {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}

body:has(.battle-world-select) main {
  height: calc(100dvh - env(safe-area-inset-top) - 4.35rem);
  min-height: 0;
  overflow: hidden;
}

.battle-world-select__host {
  height: 100%;
  min-height: 0;
}

.battle-world-select {
  position: relative;
  isolation: isolate;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: #3f3428;
  background-color: #f4f1ea;
  background-image:
    linear-gradient(
      to bottom,
      #f4f1ea 0,
      rgba(244, 241, 234, 0.97) 0.8rem,
      rgba(244, 241, 234, 0.72) 3rem,
      rgba(244, 241, 234, 0.14) 6.5rem,
      transparent 9rem
    ),
    linear-gradient(rgba(247, 239, 218, 0.1), rgba(238, 225, 194, 0.2)),
    var(--battle-world-background);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto, auto, cover;
}

.battle-world-select__inner {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 40rem);
  height: 100%;
  min-height: 0;
  flex-direction: column;
  margin: 0 auto;
  padding: clamp(0.72rem, 2dvh, 1rem) 0
    calc(env(safe-area-inset-bottom) + 5.85rem);
}

.battle-world-select__header {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  padding-inline: 1rem;
  text-align: center;
}

.battle-world-select .battle-world-select__title {
  margin: 0;
  font-size: clamp(1.12rem, 5.2vw, 1.38rem);
  line-height: 1.2;
  color: #403326;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68);
}

.battle-world-select__lead {
  margin-top: clamp(0.55rem, 1.35dvh, 0.78rem);
  font-size: clamp(0.78rem, 3.1vw, 0.9rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: rgba(63, 52, 40, 0.72);
}

.battle-world-carousel {
  --battle-world-active-theme: #8fb996;
  --battle-world-side-offset: min(68vw, 17rem);
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  margin-top: clamp(0.95rem, 2.1dvh, 1.25rem);
}

.battle-world-carousel__stage {
  position: relative;
  left: 50%;
  width: 100vw;
  min-height: 0;
  flex: 1 1 auto;
  transform: translateX(-50%);
  touch-action: pan-y;
}

.battle-world-carousel__slides,
.battle-world-carousel__switches {
  position: absolute;
  inset: 0;
}

.battle-world-carousel__slides {
  overflow: visible;
  contain: layout paint;
  perspective: 70rem;
  perspective-origin: center 46%;
}

.battle-world-carousel__slide {
  --battle-world-slide-x: 0px;
  position: absolute;
  top: 46%;
  left: 50%;
  z-index: 0;
  width: min(74vw, 18.5rem);
  aspect-ratio: 8 / 11;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(calc(-50% + var(--battle-world-slide-x)), -50%, 0)
    scale(0.78);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.battle-world-carousel.is-ready .battle-world-carousel__slide {
  transition:
    transform 440ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 140ms ease-out;
}

.battle-world-carousel__slide.is-active,
.battle-world-carousel__slide.is-previous,
.battle-world-carousel__slide.is-next {
  visibility: visible;
}

.battle-world-carousel__slide.is-active {
  --battle-world-slide-x: 0px;
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, -50%, 2rem) scale(1);
}

.battle-world-carousel__slide.is-previous,
.battle-world-carousel__slide.is-next {
  z-index: 2;
  opacity: 0.72;
}

.battle-world-carousel__slide.is-previous {
  --battle-world-slide-x: calc(-1 * var(--battle-world-side-offset));
  transform: translate3d(calc(-50% + var(--battle-world-slide-x)), -50%, -5rem)
    scale(0.82) rotateY(-18deg);
}

.battle-world-carousel__slide.is-next {
  --battle-world-slide-x: var(--battle-world-side-offset);
  transform: translate3d(calc(-50% + var(--battle-world-slide-x)), -50%, -5rem)
    scale(0.82) rotateY(18deg);
}

.battle-world-carousel__card {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateZ(0);
}

.battle-world-carousel__paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  backface-visibility: hidden;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.battle-world-carousel__visual {
  position: absolute;
  inset: 9% 9.2% 9.1%;
  z-index: 1;
  overflow: hidden;
  background: transparent;
  box-shadow: inset 0 0 0.5rem rgba(65, 41, 19, 0.12);
  transform: translateZ(0);
  touch-action: pan-y;
  cursor: grab;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

.battle-world-carousel__visual:active {
  cursor: grabbing;
}

.battle-world-carousel__picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  backface-visibility: hidden;
  pointer-events: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.45) 3%,
      rgba(0, 0, 0, 0.85) 6%,
      #000 9%,
      #000 91%,
      rgba(0, 0, 0, 0.85) 94%,
      rgba(0, 0, 0, 0.45) 97%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.45) 3%,
      rgba(0, 0, 0, 0.85) 6%,
      #000 9%,
      #000 60%,
      rgba(0, 0, 0, 0.92) 68%,
      rgba(0, 0, 0, 0.72) 77%,
      rgba(0, 0, 0, 0.48) 85%,
      rgba(0, 0, 0, 0.22) 93%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.45) 3%,
      rgba(0, 0, 0, 0.85) 6%,
      #000 9%,
      #000 91%,
      rgba(0, 0, 0, 0.85) 94%,
      rgba(0, 0, 0, 0.45) 97%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.45) 3%,
      rgba(0, 0, 0, 0.85) 6%,
      #000 9%,
      #000 60%,
      rgba(0, 0, 0, 0.92) 68%,
      rgba(0, 0, 0, 0.72) 77%,
      rgba(0, 0, 0, 0.48) 85%,
      rgba(0, 0, 0, 0.22) 93%,
      transparent 100%
    );
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect;
}

.battle-world-carousel.is-ready .battle-world-carousel__paper,
.battle-world-carousel.is-ready .battle-world-carousel__picture {
  transition: filter 440ms ease;
}

.battle-world-carousel__slide.is-active .battle-world-carousel__paper {
  filter: drop-shadow(
    0 0.7rem 0.7rem
      color-mix(in srgb, var(--battle-world-theme) 22%, rgba(65, 43, 24, 0.28))
  );
}

.battle-world-carousel__slide.is-previous .battle-world-carousel__paper,
.battle-world-carousel__slide.is-next .battle-world-carousel__paper {
  filter: saturate(0.82) brightness(0.92)
    drop-shadow(0 0.45rem 0.45rem rgba(65, 43, 24, 0.18));
}

.battle-world-carousel__slide.is-previous .battle-world-carousel__picture,
.battle-world-carousel__slide.is-next .battle-world-carousel__picture {
  filter: saturate(0.78) brightness(0.88);
}

.battle-world-carousel__copy {
  position: absolute;
  right: calc(9.2% + 0.5rem);
  bottom: calc(11.5% + clamp(0.68rem, 2.6vw, 0.98rem));
  left: calc(9.2% + 0.5rem);
  z-index: 3;
  min-width: 0;
  text-align: center;
  font-family: inherit;
  text-shadow:
    0 1px 0 rgba(255, 248, 226, 0.95),
    0 0 0.45rem rgba(255, 244, 211, 0.7);
  transform: translateZ(1px);
  backface-visibility: hidden;
  pointer-events: none;
}

.battle-world-carousel__theme-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(1.08rem, 5vw, 1.45rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0.035em;
  color: #5f3f25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.battle-world-carousel__world-name {
  display: -webkit-box;
  overflow: hidden;
  margin-top: clamp(0.18rem, 0.7vw, 0.3rem);
  font-size: clamp(0.78rem, 3.25vw, 0.96rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #765438;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.battle-world-carousel__switches {
  z-index: 5;
  pointer-events: none;
}

.battle-world-carousel__switch {
  position: absolute;
  top: 46%;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(83, 56, 29, 0.55);
  border-radius: 9999px;
  color: #fff2d2;
  background:
    radial-gradient(
      circle at 35% 26%,
      rgba(255, 255, 255, 0.35),
      transparent 40%
    ),
    linear-gradient(145deg, #b5966b 0%, #99764e 58%, #775738 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 3px rgba(72, 45, 22, 0.2),
    0 0.28rem 0.62rem rgba(70, 49, 29, 0.2);
  transform: translateY(-50%);
  pointer-events: auto;
  transition:
    transform 160ms ease,
    filter 160ms ease,
    opacity 160ms ease;
}

.battle-world-carousel__switch svg {
  width: 58%;
  height: 58%;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.28))
    drop-shadow(0 1px 1px rgba(64, 39, 18, 0.32));
}

.battle-world-carousel__switch--previous {
  left: 0.55rem;
}

.battle-world-carousel__switch--next {
  right: 0.55rem;
}

.battle-world-carousel__switch:active {
  transform: translateY(-50%) scale(0.92);
}

.battle-world-carousel__switch:focus-visible,
.battle-world-carousel__indicator:focus-visible,
.battle-world-carousel__start-button:focus-visible {
  outline: 3px solid
    color-mix(in srgb, var(--battle-world-active-theme) 72%, white);
  outline-offset: 3px;
}

.battle-world-carousel__switch:disabled {
  opacity: 0.32;
  pointer-events: none;
}

.battle-world-carousel__indicators {
  position: relative;
  z-index: 5;
  display: flex;
  flex: 0 0 auto;
  width: min(60.5vw, 15.1rem);
  min-height: 1.5rem;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  margin: 0.12rem auto 0;
  padding: 0;
  transform: translateY(clamp(-1.8rem, -3dvh, -1.1rem));
}

.battle-world-carousel__indicator {
  position: relative;
  width: auto;
  height: 1.5rem;
  flex: 1 1 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  box-shadow: none;
}

.battle-world-carousel__indicator::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid rgba(112, 82, 45, 0.42);
  border-radius: 50%;
  background: #f1e2c5;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.72),
    0 1px 2px rgba(82, 57, 33, 0.12);
  transform: translate(-50%, -50%);
  transition:
    width 280ms ease,
    background-color 280ms ease,
    box-shadow 280ms ease,
    transform 180ms ease;
}

.battle-world-carousel__indicator.is-active::before {
  width: clamp(1.35rem, 6vw, 1.75rem);
  border-color: color-mix(
    in srgb,
    var(--battle-world-active-theme) 70%,
    #5e4933
  );
  background: var(--battle-world-active-theme);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.58),
    0 0 0.45rem
      color-mix(in srgb, var(--battle-world-active-theme) 42%, transparent);
}

.battle-world-carousel__indicator:active {
  transform: none;
}

.battle-world-carousel__indicator:active::before {
  transform: translate(-50%, -50%) scale(0.84);
}

.battle-world-carousel__actions {
  position: relative;
  z-index: 5;
  min-height: 3.25rem;
  flex: 0 0 auto;
  margin-top: clamp(0.18rem, 0.65dvh, 0.38rem);
  transform: translateY(clamp(0.2rem, 0.65dvh, 0.6rem));
}

.battle-world-carousel__action {
  display: flex;
  justify-content: center;
}

.battle-world-carousel__action.hidden {
  display: none;
}

.battle-world-carousel__start-button {
  width: min(74vw, 18.5rem);
  min-height: 3rem;
  font-size: clamp(0.98rem, 4.1vw, 1.12rem);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.battle-world-carousel__start-button svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

.battle-world-select__empty {
  width: min(90%, 24rem);
  margin: 3rem auto 0;
  border: 1px dashed rgba(96, 69, 41, 0.45);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: rgba(63, 52, 40, 0.68);
  background: rgba(255, 250, 236, 0.66);
}

@media (max-height: 740px) {
  .battle-world-select__inner {
    padding-top: 0.65rem;
    padding-bottom: calc(env(safe-area-inset-bottom) + 5.85rem);
  }

  .battle-world-select__header .client-page-subtitle {
    display: none;
  }

  .battle-world-select .battle-world-select__title {
    font-size: 1.08rem;
  }

  .battle-world-select__lead {
    margin-top: 0.42rem;
    font-size: 0.75rem;
  }

  .battle-world-carousel {
    margin-top: 0.85rem;
  }

  .battle-world-carousel__actions {
    min-height: 2.9rem;
    margin-top: 0.08rem;
  }

  .battle-world-carousel__start-button {
    min-height: 2.7rem;
    padding-block: 0.55rem;
  }
}

@media (max-height: 680px) {
  .battle-world-carousel__slide {
    width: min(68vw, 15.5rem);
  }

  .battle-world-carousel {
    --battle-world-side-offset: min(63vw, 14.5rem);
  }

  .battle-world-carousel__indicators {
    width: min(55.5vw, 12.7rem);
    min-height: 1.5rem;
  }

  .battle-world-carousel__start-button {
    width: min(68vw, 15.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .battle-world-carousel.is-ready .battle-world-carousel__slide,
  .battle-world-carousel.is-ready .battle-world-carousel__paper,
  .battle-world-carousel.is-ready .battle-world-carousel__picture,
  .battle-world-carousel__indicator::before,
  .battle-world-carousel__switch,
  .battle-world-carousel__start-button {
    transition-duration: 0.01ms !important;
  }
}

[data-turbo-preview] [data-controller~="page-transition"] {
  animation: none !important;
}

.page-enter-slide-up {
  animation: pageSlideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-enter-slide-right {
  animation: pageSlideRight 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.page-enter-slide-left {
  animation: pageSlideLeft 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.page-enter-fade {
  animation: pageFade 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 固定背景を持つ画面向け。transformを使わず背景の表示サイズを安定させる。 */

.page-enter-fade-static {
  animation: pageFadeStatic 0.36s ease-out both;
}

.page-enter-zoom {
  animation: pageZoom 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

@keyframes pageSlideUp {
  from {
    transform: translateY(120vh);
    opacity: 0;
  }

  60% {
    transform: translateY(-4px);
    opacity: 1;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes pageSlideRight {
  0% {
    transform: translateX(64px);
    opacity: 0;
  }

  60% {
    transform: translateX(-6px);
    opacity: 1;
  }

  84% {
    transform: translateX(1px);
  }

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

@keyframes pageSlideLeft {
  0% {
    transform: translateX(-64px);
    opacity: 0;
  }

  60% {
    transform: translateX(6px);
    opacity: 1;
  }

  84% {
    transform: translateX(-1px);
  }

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

@keyframes pageFade {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes pageFadeStatic {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pageZoom {
  0% {
    transform: scale(0.92);
    opacity: 0;
    filter: blur(10px);
  }

  50% {
    transform: scale(1.04);
    opacity: 1;
    filter: blur(0);
  }

  75% {
    transform: scale(0.998);
  }

  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

/* modal */

.modal-overlay-enter {
  animation: modalOverlayEnter 0.25s ease-out both;
}

.modal-panel-enter {
  animation: modalPanelEnter 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes modalOverlayEnter {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }

  to {
    opacity: 1;
    backdrop-filter: blur(4px);
  }
}

@keyframes modalPanelEnter {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
    filter: blur(6px);
  }

  70% {
    opacity: 1;
    transform: translateY(-4px) scale(1.01);
    filter: blur(0);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.modal-overlay-leave {
  animation: modalOverlayLeave 0.3s ease-in forwards;
}

.modal-panel-leave {
  animation: modalPanelLeave 0.34s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes modalOverlayLeave {
  from {
    opacity: 1;
    backdrop-filter: blur(4px);
  }

  to {
    opacity: 0;
    backdrop-filter: blur(0);
  }
}

@keyframes modalPanelLeave {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  25% {
    opacity: 1;
    transform: translateY(-3px) scale(1.01);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateY(32px) scale(0.94);
    filter: blur(5px);
  }
}

/*** ====== Client Form ====== */

/*** ====== Client Form ====== ***/

.ranking-page {
  --ranking-ribbon-body-top: #78904f;
  --ranking-ribbon-body-mid: #5c783f;
  --ranking-ribbon-body-low: #3f6132;
  --ranking-ribbon-body-bottom: #2d4a29;
  --ranking-ribbon-tail-top: #607a43;
  --ranking-ribbon-tail-bottom: #2c4a2b;
  --ranking-ribbon-fold-top: #203b24;
  --ranking-ribbon-fold-bottom: #4c6a39;
  --ranking-ribbon-fold-edge: #263d24;
  --ranking-ribbon-bottom-line: #203a24;
  --ranking-ribbon-shadow: #2b2619;
  --ranking-accent: #486538;
  --ranking-accent-deep: #263f28;
  --ranking-accent-soft: rgba(84, 112, 61, 0.2);
  --ranking-current-border: #5f833c;
  --ranking-current-fill-start: rgba(222, 240, 170, 0.7);
  --ranking-current-fill-mid: rgba(126, 167, 75, 0.55);
  --ranking-current-fill-fade: rgba(126, 167, 75, 0);
  --ranking-current-glow: rgba(82, 122, 52, 0.58);
  --ranking-background: var(--ranking-individual-background);
  --ranking-frame-opacity: 0.84;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 40rem;
  min-height: calc(100dvh - env(safe-area-inset-top) - 4.35rem);
  margin-inline: auto;
  color: #3f3526;
}

.ranking-page[data-ranking-mode="guilds"] {
  --ranking-ribbon-body-top: #607d86;
  --ranking-ribbon-body-mid: #426674;
  --ranking-ribbon-body-low: #304f5e;
  --ranking-ribbon-body-bottom: #223b47;
  --ranking-ribbon-tail-top: #4f6f79;
  --ranking-ribbon-tail-bottom: #263f49;
  --ranking-ribbon-fold-top: #1e333b;
  --ranking-ribbon-fold-bottom: #45646d;
  --ranking-ribbon-fold-edge: #233b43;
  --ranking-ribbon-bottom-line: #1c343d;
  --ranking-ribbon-shadow: #1f2e31;
  --ranking-accent: #3e6572;
  --ranking-accent-deep: #274650;
  --ranking-accent-soft: rgba(55, 92, 105, 0.22);
  --ranking-current-border: #3b778c;
  --ranking-current-fill-start: rgba(190, 229, 238, 0.72);
  --ranking-current-fill-mid: rgba(80, 142, 161, 0.56);
  --ranking-current-fill-fade: rgba(80, 142, 161, 0);
  --ranking-current-glow: rgba(47, 108, 128, 0.62);
  --ranking-background: var(--ranking-guild-background);
}

.ranking-page::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset-block: 0;
  left: 50%;
  width: min(100vw, 40rem);
  transform: translateX(-50%);
  background-color: #eee3ca;
  background-image: var(--ranking-background);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  pointer-events: none;
}

.ranking-page__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(0.7rem, 2.6vw, 1rem) clamp(0.65rem, 3.4vw, 1.35rem)
    calc(env(safe-area-inset-bottom) + 2.5rem);
}

.ranking-title {
  position: relative;
  display: grid;
  width: min(100%, 36rem);
  margin-inline: auto;
  place-items: center;
}

.ranking-title__art {
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ranking-title__label {
  z-index: 1;
  grid-area: 1 / 1;
  max-width: 72%;
  margin: 0;
  color: #fff9df;
  font-size: clamp(1rem, 4.6vw, 1.55rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.055em;
  text-align: center;
  text-shadow:
    0 2px 1px rgba(35, 30, 18, 0.58),
    0 0 6px rgba(255, 239, 176, 0.2);
}

.ranking-switches {
  display: grid;
  gap: clamp(0.35rem, 1.8vw, 0.65rem);
  width: min(92%, 31rem);
  margin: clamp(0.2rem, 1vw, 0.45rem) auto clamp(0.8rem, 3vw, 1.2rem);
}

.ranking-switches__group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.45rem, 2vw, 0.8rem);
}

.ranking-switch {
  --ranking-switch-fill-top: #8b9f6a;
  --ranking-switch-fill-mid: #687f50;
  --ranking-switch-fill-bottom: #48643e;
  --ranking-switch-inner-shadow: #31482e;
  --ranking-switch-bottom-line: #2d452a;
  position: relative;
  display: grid;
  min-width: 0;
  padding: 0;
  overflow: visible;
  place-items: center;
  border: 0;
  background: transparent;
  color: rgba(255, 252, 230, 0.82);
  cursor: pointer;
  opacity: 0.66;
  filter: saturate(0.7) brightness(0.88);
  transform: scale(0.97);
  transition:
    opacity 160ms ease,
    filter 160ms ease,
    transform 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

.ranking-switch--guilds {
  --ranking-switch-fill-top: #708b94;
  --ranking-switch-fill-mid: #4d6e79;
  --ranking-switch-fill-bottom: #31515d;
  --ranking-switch-inner-shadow: #29444d;
  --ranking-switch-bottom-line: #233d46;
}

.ranking-page[data-ranking-mode="guilds"] .ranking-switch--period {
  --ranking-switch-fill-top: #708b94;
  --ranking-switch-fill-mid: #4d6e79;
  --ranking-switch-fill-bottom: #31515d;
  --ranking-switch-inner-shadow: #29444d;
  --ranking-switch-bottom-line: #233d46;
}

.ranking-switch.is-active {
  color: #fffbed;
  opacity: 1;
  filter: saturate(1) brightness(1.04);
  transform: scale(1);
}

.ranking-switch:focus-visible {
  outline: 3px solid rgba(255, 242, 181, 0.92);
  outline-offset: 2px;
  border-radius: 0.85rem;
}

.ranking-switch:active {
  transform: scale(0.96);
}

.ranking-switch__art {
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ranking-switch__label {
  z-index: 1;
  grid-area: 1 / 1;
  font-size: clamp(0.86rem, 3.8vw, 1.08rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 2px rgba(29, 27, 18, 0.7);
}

.ranking-panel-container {
  min-height: 18rem;
}

.ranking-panel {
  display: grid;
  gap: clamp(1.1rem, 4vw, 1.8rem);
}

.ranking-nearby {
  width: 100%;
}

.ranking-nearby__board {
  position: relative;
  display: grid;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  padding: 6.2% 6.4% 5.8%;
  place-items: stretch;
}

.ranking-nearby__board::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: var(--ranking-nearby-board);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: var(--ranking-frame-opacity);
  filter: drop-shadow(0 0.5rem 0.7rem rgba(70, 53, 27, 0.16));
  pointer-events: none;
}

.ranking-nearby__rows {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking-row {
  display: grid;
  grid-template-columns: clamp(2.8rem, 13vw, 4.2rem) minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
}

.ranking-row--nearby {
  position: relative;
  z-index: 0;
  isolation: isolate;
  min-height: 0;
  padding-inline: clamp(0.15rem, 1.5vw, 0.5rem);
  border-bottom: 1px solid rgba(148, 111, 47, 0.2);
}

.ranking-row--nearby:last-child {
  border-bottom: 0;
}

.ranking-row--nearby.ranking-row--current::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8% -5%;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    var(--ranking-current-fill-mid) 0%,
    var(--ranking-current-fill-start) 38%,
    var(--ranking-current-fill-fade) 78%
  );
  filter: blur(0.22rem);
}

.ranking-row--top {
  position: relative;
  z-index: 0;
  isolation: isolate;
  min-height: clamp(4rem, 14vw, 5.25rem);
  padding: clamp(0.4rem, 1.7vw, 0.65rem) clamp(0.8rem, 3.6vw, 1.4rem);
}

.ranking-row--top::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: var(--ranking-row-frame);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: var(--ranking-frame-opacity);
  filter: drop-shadow(0 0.3rem 0.35rem rgba(75, 55, 29, 0.12));
  pointer-events: none;
}

.ranking-row--top.ranking-row--current::after {
  opacity: 0.98;
  filter:
    saturate(1.5)
    hue-rotate(42deg)
    brightness(0.98)
    drop-shadow(0 0 0.55rem var(--ranking-current-glow));
}

.ranking-page[data-ranking-mode="guilds"]
  .ranking-row--top.ranking-row--current::after {
  filter:
    saturate(1.55)
    hue-rotate(145deg)
    brightness(0.96)
    drop-shadow(0 0 0.58rem var(--ranking-current-glow));
}

.ranking-row__rank {
  display: grid;
  align-self: stretch;
  place-items: center;
  color: #5b482b;
}

.ranking-row__rank-icon {
  display: block;
  width: clamp(2.25rem, 10vw, 3.6rem);
  height: clamp(2.25rem, 10vw, 3.6rem);
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(69, 48, 23, 0.2));
}

.ranking-row--nearby .ranking-row__rank-icon {
  width: clamp(1.8rem, 8.5vw, 3rem);
  height: clamp(1.8rem, 8.5vw, 3rem);
}

.ranking-row__rank-number {
  font-size: clamp(0.9rem, 4vw, 1.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.ranking-row__rank-number small {
  margin-left: 0.08rem;
  font-size: 0.55em;
  font-weight: 700;
}

.ranking-row__identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: clamp(0.35rem, 2vw, 0.75rem);
}

.ranking-row__avatar {
  display: grid;
  flex: 0 0 auto;
  width: clamp(2rem, 9vw, 3.35rem);
  height: clamp(2rem, 9vw, 3.35rem);
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(171, 129, 51, 0.48);
  border-radius: 24%;
  background: rgba(255, 252, 239, 0.7);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 2px 4px rgba(71, 52, 27, 0.12);
}

.ranking-row__avatar--user {
  border-radius: 9999px;
}

.ranking-row--nearby .ranking-row__avatar {
  width: clamp(1.7rem, 7.8vw, 2.75rem);
  height: clamp(1.7rem, 7.8vw, 2.75rem);
}

.ranking-row__avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.ranking-row__name {
  min-width: 0;
  overflow: hidden;
  color: #4a3b28;
  font-size: clamp(0.78rem, 3.5vw, 1rem);
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-row--current .ranking-row__name {
  color: var(--ranking-accent-deep);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.ranking-row--current .ranking-row__avatar {
  border: 2px solid var(--ranking-current-border);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.75),
    0 0 0.55rem var(--ranking-current-glow);
}

.ranking-row--current .ranking-row__rank,
.ranking-row--current .ranking-row__points,
.ranking-row--current .ranking-row__points small {
  color: var(--ranking-accent-deep);
}

.ranking-row__points {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  min-width: clamp(4.8rem, 22vw, 7.6rem);
  margin-left: clamp(0.25rem, 1vw, 0.6rem);
  color: #51402b;
  font-size: clamp(0.78rem, 3.4vw, 1rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ranking-row__points small {
  margin-left: 0.2rem;
  color: #806d50;
  font-size: 0.66em;
  font-weight: 600;
}

.ranking-row__placeholder-mark {
  color: rgba(91, 74, 50, 0.48);
  font-weight: 600;
}

.ranking-row--placeholder .ranking-row__identity {
  justify-content: center;
}

.ranking-section-title {
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) auto minmax(1rem, 1fr);
  align-items: center;
  width: min(92%, 31rem);
  margin: 0 auto clamp(0.5rem, 2vw, 0.85rem);
  gap: 0.7rem;
}

.ranking-section-title h2 {
  margin: 0;
  color: var(--ranking-accent-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 4.3vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.ranking-page[data-ranking-mode="guilds"] .ranking-section-title h2 {
  color: #f7f1dd;
  text-shadow:
    0 1px 0 rgba(22, 48, 58, 0.95),
    0 2px 4px rgba(16, 36, 45, 0.9),
    0 0 10px rgba(217, 241, 244, 0.85);
}

.ranking-section-title__line {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(151, 111, 43, 0.72),
    transparent
  );
}

.ranking-top__rows {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 0;
  list-style: none;
}

.ranking-row--top + .ranking-row--top {
  /* SVG外周の透明余白だけを重ね、フレーム同士を自然に近づける。 */
  margin-top: clamp(-0.3rem, -1vw, -0.2rem);
}

/* チュートリアル中は多数の行にかかる影を外し、iPhoneの合成負荷を抑える。 */

body.ranking-tutorial-open .ranking-nearby__board::before,
body.ranking-tutorial-open .ranking-row--top::after,
body.ranking-tutorial-open .ranking-row__rank-icon {
  filter: none;
}

.ranking-empty {
  display: grid;
  place-items: center;
  align-content: center;
  color: rgba(75, 62, 43, 0.66);
  text-align: center;
}

.ranking-empty p {
  margin: 0;
  font-size: clamp(0.8rem, 3.4vw, 0.95rem);
  font-weight: 600;
}

.ranking-empty__mark {
  margin-bottom: 0.3rem;
  color: rgba(147, 111, 51, 0.52);
  font-family: Georgia, serif;
  font-size: 1.8rem;
  line-height: 1;
}

.ranking-empty--nearby {
  position: relative;
  z-index: 1;
  height: 100%;
}

.ranking-empty--top,
.ranking-loading,
.ranking-error {
  min-height: 8rem;
  padding: 1.5rem;
  border: 1px solid rgba(160, 120, 50, 0.42);
  border-radius: 1rem;
  background: rgba(255, 250, 235, 0.86);
  box-shadow: 0 0.4rem 0.8rem rgba(70, 52, 27, 0.12);
}

.ranking-loading,
.ranking-error {
  display: grid;
  place-items: center;
  color: #5a4932;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

.ranking-error {
  color: #8a473d;
  border-color: rgba(151, 78, 68, 0.38);
  background: rgba(255, 241, 234, 0.92);
}

@media (max-width: 360px) {
  .ranking-page__inner {
    padding-inline: 0.45rem;
  }

  .ranking-nearby__board {
    padding-inline: 5.6%;
  }

  .ranking-row {
    grid-template-columns: 2.45rem minmax(0, 1fr) auto;
  }

  .ranking-row__points {
    min-width: 4.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ranking-switch {
    transition: none;
  }

  .ranking-panel-container {
    animation: none !important;
  }
}

.guild-detail-page {
  --guild-text-primary: #4a4038;
  --guild-text-secondary: #6a6a6a;
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 4.35rem);
  overflow: hidden;
  padding-bottom: 1.5rem;
  background: transparent;
}

.guild-detail-page__background {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: min(210vw, 66rem);
  background-image: var(--guild-detail-background);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: min(100%, 42rem) auto;
  pointer-events: none;
}

.guild-detail-page__content {
  width: min(100%, 40rem);
  margin-inline: auto;
  padding: clamp(1.15rem, 4vw, 1.75rem) 1rem 0;
}

.guild-subpage {
  min-height: calc(100svh - 4.35rem);
  background-color: transparent;
  background-image: var(--guild-subpage-background);
  background-repeat: no-repeat;
  background-position: center -11rem;
  background-size: min(100%, 42rem) auto;
}

.guild-subpage--repeating-background {
  background-repeat: repeat-y;
}

.guild-detail-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.guild-detail-icon-frame {
  position: relative;
  display: grid;
  width: clamp(8.4rem, 36vw, 10.5rem);
  aspect-ratio: 1;
  overflow: hidden;
  place-items: center;
  border: 0;
  border-radius: 24%;
  background: transparent;
  box-shadow: 0 10px 24px rgba(91, 75, 58, 0.15);
}

.guild-detail-icon-frame__image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: transparent;
}

.guild-detail-icon-frame__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.guild-custom-icon-frame,
.guild-crew-avatar {
  --guild-gold-frame: linear-gradient(
    145deg,
    #fff4c7 0%,
    #d8ae51 28%,
    #9c711f 52%,
    #f0d58a 78%,
    #bc8628 100%
  );
}

.guild-custom-icon-frame {
  border-style: solid;
  border-color: transparent;
  background:
    linear-gradient(#f8f1e4, #f8f1e4) padding-box,
    var(--guild-gold-frame) border-box;
  box-shadow:
    0 10px 24px rgba(91, 75, 58, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.guild-detail-icon-frame.guild-custom-icon-frame {
  padding: clamp(0.12rem, 0.5vw, 0.18rem);
  border-width: clamp(0.24rem, 1vw, 0.32rem);
}

.guild-detail-icon-frame.guild-custom-icon-frame
  .guild-detail-icon-frame__image-wrap {
  border-radius: 20%;
}

.guild-summary-icon.guild-custom-icon-frame {
  padding: 2px;
  border-width: 2px;
  box-shadow:
    0 4px 10px rgba(91, 75, 58, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.guild-summary-icon img {
  display: block;
  border-radius: inherit;
}

.guild-detail-name-row {
  display: flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.05rem;
}

.guild-detail-name {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--guild-text-primary);
  font-size: clamp(1.35rem, 6.3vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.3;
}

.guild-detail-edit-link {
  display: inline-grid;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  place-items: center;
  color: #75a47e;
  transition:
    transform 160ms ease,
    color 160ms ease;
}

.guild-detail-edit-link:active {
  color: #568460;
  transform: scale(0.92);
}

.guild-detail-edit-link svg {
  width: 1.65rem;
  height: 1.65rem;
}

.guild-detail-code-wrap {
  position: relative;
  margin-top: 0.75rem;
}

.guild-detail-code {
  display: inline-flex;
  min-width: min(12rem, 72vw);
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(222, 211, 197, 0.8);
  border-radius: 9999px;
  background: rgba(251, 248, 242, 0.62);
  color: var(--guild-text-primary);
  font-size: clamp(1rem, 4.3vw, 1.15rem);
  letter-spacing: 0.055em;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 4px 12px rgba(83, 68, 52, 0.04);
  transition: transform 150ms ease;
}

.guild-detail-code:active {
  transform: scale(0.98);
}

.guild-detail-code svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #75a47e;
}

.guild-detail-copy-message {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 50%;
  z-index: 5;
  width: -moz-max-content;
  width: max-content;
  max-width: 90vw;
  padding: 0.35rem 0.7rem;
  border-radius: 9999px;
  background: rgba(67, 83, 65, 0.9);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  transform: translateX(-50%);
  box-shadow: 0 4px 10px rgba(44, 49, 42, 0.14);
}

.guild-detail-description {
  width: min(100%, 31rem);
  margin-top: 0.8rem;
  color: var(--guild-text-secondary);
  font-size: clamp(0.83rem, 3.5vw, 0.95rem);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.guild-detail-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.45rem, 2.2vw, 0.85rem);
  margin-top: 0.75rem;
}

.guild-stat-card {
  position: relative;
  display: grid;
  aspect-ratio: 5 / 3;
  place-items: center;
  padding: 1.2rem 0.5rem 0.55rem;
  background-image: var(--guild-stat-frame);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  text-align: center;
}

.guild-stat-card__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: var(--guild-text-primary);
  font-size: clamp(0.72rem, 3.2vw, 0.92rem);
  font-weight: 700;
  line-height: 1.15;
}

.guild-stat-card__label svg {
  width: 1.2rem;
  height: 1.2rem;
  color: #f4c95d;
}

.guild-stat-card__value {
  margin-top: 0.4rem;
  color: var(--guild-text-primary);
  font-size: clamp(1.55rem, 7vw, 2.2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

.guild-stat-card__unit {
  margin-left: 0.15rem;
  font-size: 0.55em;
  font-weight: 600;
}

.guild-stat-card__value--long {
  font-size: clamp(1.15rem, 5.2vw, 1.65rem);
}

.guild-stat-card__value--extra-long {
  font-size: clamp(1rem, 4.4vw, 1.35rem);
}

.guild-menu-stack {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.guild-menu-card {
  overflow: visible;
  border: 1px solid rgba(220, 194, 145, 0.62);
  border-radius: clamp(1rem, 6vw, 2rem);
  background: linear-gradient(
    180deg,
    rgba(255, 253, 249, 0.68) 0%,
    rgba(251, 248, 243, 0.64) 55%,
    rgba(244, 240, 234, 0.7) 100%
  );
  box-shadow:
    0 7px 18px rgba(77, 65, 52, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(4px);
}

.guild-menu-card__summary,
.guild-menu-card__link {
  display: grid;
  min-height: 5.1rem;
  grid-template-columns: 3.5rem minmax(0, 1fr) 1.65rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem 0.55rem 0.6rem;
  color: inherit;
  text-decoration: none;
}

.guild-menu-card__summary {
  cursor: pointer;
  list-style: none;
}

.guild-menu-card__summary::-webkit-details-marker {
  display: none;
}

.guild-menu-card__summary:focus {
  outline: none;
}

.guild-menu-card__summary:focus-visible,
.guild-menu-card__link:focus-visible,
.guild-detail-code:focus-visible,
.guild-detail-edit-link:focus-visible {
  border-radius: inherit;
  outline: 2px solid rgba(117, 164, 126, 0.72);
  outline-offset: 2px;
}

.guild-menu-card__link {
  transition:
    transform 150ms ease,
    filter 150ms ease;
}

.guild-menu-card__link:active {
  filter: brightness(0.98);
  transform: scale(0.992);
}

.guild-menu-emblem {
  position: relative;
  align-self: stretch;
  min-height: 3.8rem;
}

.guild-menu-emblem__ribbon {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  width: 3.5rem;
  height: 4rem;
  -o-object-fit: fill;
     object-fit: fill;
  transform: translateX(-50%);
}

.guild-menu-emblem__icon {
  position: absolute;
  top: 0.55rem;
  left: 50%;
  width: 1.7rem;
  height: 1.7rem;
  -o-object-fit: contain;
     object-fit: contain;
  transform: translateX(-50%);
}

.guild-menu-card__title {
  display: block;
  color: var(--guild-text-primary);
  font-size: clamp(1rem, 4.3vw, 1.18rem);
  font-weight: 700;
  line-height: 1.2;
}

.guild-menu-card__description {
  display: block;
  margin-top: 0.35rem;
  color: var(--guild-text-secondary);
  font-size: clamp(0.72rem, 3.2vw, 0.85rem);
  line-height: 1.45;
}

.guild-menu-card__arrow {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  color: var(--guild-text-secondary);
}

.guild-menu-card__arrow svg {
  width: 1.5rem;
  height: 1.5rem;
}

.guild-menu-card__arrow--accordion {
  transition: transform 200ms ease;
}

.guild-crew[open] .guild-menu-card__arrow--accordion {
  transform: rotate(180deg);
}

.guild-crew-preview {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.45rem;
}

.guild-crew[open] .guild-crew-preview {
  display: none;
}

.guild-crew:not([open]) .guild-menu-card__description--crew {
  display: none;
}

.guild-crew-avatar {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 3.4rem;
  height: 3.4rem;
  overflow: hidden;
  place-items: center;
  border: 2px solid transparent;
  border-radius: 9999px;
  background:
    linear-gradient(145deg, #edf2e8, #e2e9dc) padding-box,
    var(--guild-gold-frame) border-box;
  color: #8da28d;
  box-shadow:
    0 3px 8px rgba(74, 65, 54, 0.14),
    0 0 0 1px rgba(205, 191, 166, 0.65);
}

.guild-crew-avatar--preview {
  width: clamp(2.15rem, 10vw, 2.75rem);
  height: clamp(2.15rem, 10vw, 2.75rem);
}

.guild-crew-avatar__image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  -o-object-fit: cover;
     object-fit: cover;
}

.guild-crew-avatar__placeholder {
  width: 72%;
  height: 72%;
}

.guild-crew-list {
  display: grid;
  gap: 0.65rem;
  padding: 0.1rem 0.85rem 1rem;
  scroll-margin-top: calc(env(safe-area-inset-top) + 9.6rem);
}

.guild-crew-list--paginated {
  padding-bottom: 0;
}

.guild-crew-frame {
  display: block;
}

.guild-crew-loading {
  display: flex;
  min-height: 5.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem;
  color: var(--guild-text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}

.guild-crew-loading__spinner {
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid rgba(143, 185, 150, 0.24);
  border-top-color: #f4c95d;
  border-radius: 9999px;
  animation: guild-crew-spin 700ms linear infinite;
}

.guild-crew-frame[busy] {
  cursor: progress;
}

.guild-crew-frame[busy] .guild-crew-list,
.guild-crew-frame[busy] nav {
  opacity: 0.58;
}

.guild-crew-member {
  display: grid;
  grid-template-columns: 3.4rem 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  min-height: 4.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(218, 207, 193, 0.72);
  border-radius: 1.45rem;
  background: rgba(255, 255, 255, 0.56);
  box-shadow:
    0 4px 11px rgba(71, 61, 51, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

.guild-crew-member--current {
  border-color: rgba(143, 185, 150, 0.46);
  background: rgba(235, 243, 232, 0.72);
}

.guild-crew-member__rank {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 9999px;
  border: 1px solid rgba(220, 197, 153, 0.48);
  background: linear-gradient(
    145deg,
    rgba(255, 253, 247, 0.96),
    rgba(243, 234, 216, 0.92)
  );
  color: var(--guild-text-primary);
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.guild-crew-member__rank--guide {
  border: 1px solid rgba(224, 161, 44, 0.56);
  background: linear-gradient(145deg, #fff5cd, #efb94e);
  color: #98631b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.guild-crew-member__rank svg {
  width: 1.35rem;
  height: 1.35rem;
}

.guild-crew-member__rank--guide svg {
  width: 90%;
  height: 90%;
}

.guild-crew-member__identity {
  min-width: 0;
}

.guild-crew-member__name-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.45rem;
}

.guild-crew-member__name {
  min-width: 0;
  overflow: hidden;
  color: var(--guild-text-primary);
  font-size: clamp(0.88rem, 3.8vw, 1rem);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guild-crew-member__badge {
  flex: 0 0 auto;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  background: rgba(143, 185, 150, 0.17);
  color: #507359;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

.guild-crew-member__role {
  margin-top: 0.22rem;
  color: var(--guild-text-secondary);
  font-size: 0.66rem;
  font-weight: 600;
}

.guild-crew-member__points {
  justify-self: end;
  color: var(--guild-text-primary);
  font-size: clamp(0.82rem, 3.5vw, 0.98rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.guild-crew-empty {
  padding: 1.1rem 0.75rem;
  color: var(--guild-text-secondary);
  font-size: 0.82rem;
  text-align: center;
}

.guild-crew-pagination {
  padding-bottom: 1rem;
}

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

.guild-announcement-badge {
  display: inline-flex;
  min-width: 1.3rem;
  height: 1.3rem;
  align-items: center;
  justify-content: center;
  margin-left: 0.3rem;
  padding-inline: 0.35rem;
  border-radius: 9999px;
  background: #eec95d;
  color: #4d3d1f;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: 0.12em;
  box-shadow: 0 2px 5px rgba(111, 84, 27, 0.15);
}

@media (max-width: 359px) {
  .guild-detail-page__content {
    padding-inline: 0.7rem;
  }

  .guild-menu-card__summary,
  .guild-menu-card__link {
    grid-template-columns: 3.25rem minmax(0, 1fr) 1.5rem;
    gap: 0.45rem;
    padding-right: 0.75rem;
  }

  .guild-menu-emblem__ribbon {
    width: 3.1rem;
  }

  .guild-crew-member {
    grid-template-columns: 2.9rem 1.85rem minmax(0, 1fr) auto;
    gap: 0.4rem;
    padding-inline: 0.55rem;
  }

  .guild-crew-avatar {
    width: 2.9rem;
    height: 2.9rem;
  }

  .guild-crew-avatar--preview {
    width: 2.15rem;
    height: 2.15rem;
  }

  .guild-crew-member__rank {
    width: 1.85rem;
    height: 1.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guild-detail-edit-link,
  .guild-detail-code,
  .guild-menu-card__link,
  .guild-menu-card__arrow--accordion {
    transition: none;
  }

  .guild-crew-loading__spinner {
    animation: none;
  }
}

/* ===============================
Tailwind core
=============================== */

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

/*** ====== 共通フォント ====== */

html{
  font-family: "M PLUS 1p", sans-serif;
}

/* ← TailwindのfontFamilyを適用 */

/*** ====== 基本背景色 ====== */

body{
  --tw-bg-opacity: 1;
  background-color: rgb(244 241 234 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(74 64 56 / var(--tw-text-opacity, 1));
  -ms-overflow-style: none;
  /* IE / Edge */
  scrollbar-width: none;
  /* Firefox */
}

body::-webkit-scrollbar {
  display: none;
  /* Chrome / Safari */
}

/* ====== メインボタン（subカラー） ====== */

/* .btn-primary {
    @apply w-full py-2.5 bg-sub text-white font-bold rounded-lg
           shadow-md hover:bg-sub/90 hover:shadow-lg
           transition transform hover:translate-y-[1px]
           focus:ring-4 focus:ring-sub/30 focus:outline-none;
  } */

/* ====== アクセントボタン（accentカラー） ====== */

/* .btn-accent {
    @apply inline-flex items-center justify-center gap-2
           border-2 border-accent text-accent font-semibold
           py-2.5 px-4 rounded-lg
           hover:bg-accent hover:text-white transition;
  } */

/* ====== アクセントボタン（スモール）（accentカラー） ====== */

/* .btn-accent-sm {
    @apply inline-flex items-center justify-center gap-1
           border border-accent text-accent font-medium
           py-1 px-1.5 text-xs rounded-md
           hover:bg-accent hover:text-white transition;
  } */

/* ====== 戻るボタン ====== */

/* .btn-secondary {
    @apply w-full py-2.5 bg-gray-200 text-gray-700 font-bold rounded-lg
           shadow-md hover:bg-gray-300 hover:shadow-lg
           transition transform hover:translate-y-[1px]
           focus:ring-4 focus:ring-gray-300 focus:outline-none;
  } */

/* ====== 立体アクセントボタン（accentカラー） ====== */

.btn-accent-3d{
  width: 100%;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(244 201 93 / var(--tw-bg-opacity, 1));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(74 64 56 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 6px 0 #d9a427;
  --tw-shadow-colored: 0 6px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-accent-3d:active{
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
  --tw-shadow-colored: inset 0 2px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-accent-3d:hover{
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 4px 0 #d9a427;
  --tw-shadow-colored: 0 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* ====== 立体クリアボタン ====== */

.btn-clear-3d{
  width: 100%;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(163 163 163 / var(--tw-border-opacity, 1));
  background-color: rgb(163 163 163 / 0.1);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 6px 0 #9CA3AF;
  --tw-shadow-colored: 0 6px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-clear-3d:active{
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
  --tw-shadow-colored: inset 0 2px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-clear-3d:hover{
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 4px 0 #9CA3AF;
  --tw-shadow-colored: 0 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* ====== 有効な戻る・キャンセル（無効状態は既存の外観を維持） ====== */

.btn-clear-soft.btn-secondary-action:not(:disabled):not([aria-disabled="true"]),
  .btn-clear-3d.btn-secondary-action:not(:disabled):not([aria-disabled="true"]) {
  color: #534330;
  border-color: #9A8262;
  background-color: #E2D3B9;
  background-image: linear-gradient(180deg, #F3EBDD 0%, #E2D3B9 100%);
}

.btn-secondary-action:not(:disabled):not([aria-disabled="true"]):hover {
  border-color: #806849;
  filter: brightness(0.98);
}

.btn-secondary-action:not(:disabled):not([aria-disabled="true"]):focus-visible {
  outline: 3px solid #806849;
  outline-offset: 3px;
}

/* ====== 立体デンジャーボタン ====== */

.btn-danger-3d{
  width: 100%;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 6px 0 #B91C1C;
  --tw-shadow-colored: 0 6px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-danger-3d:active{
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: inset 0 2px 4px rgba(0,0,0,0.35);
  --tw-shadow-colored: inset 0 2px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-danger-3d:hover{
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 4px 0 #B91C1C;
  --tw-shadow-colored: 0 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* ====== 光エフェクト付き 3Dアクセントボタン ====== */

.btn-accent-3d-shine{
  position: relative;
  overflow: hidden;
}

.btn-accent-3d-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
      120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.6) 50%,
      transparent 100%
    );
  transform: skewX(-20deg);
  animation: shine-move 1.5s infinite;
  pointer-events: none;
  /* ← hover に干渉させないため */
}

@keyframes shine-move {
  0% {
    left: -150%;
  }

  50% {
    left: 150%;
  }

  100% {
    left: 150%;
  }
}

.register-form-input{
  width: 100%;
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 212 199 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / 0.7);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(74 64 56 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.register-form-input::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}

.register-form-input::placeholder{
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}

.register-form-input:focus{
  --tw-border-opacity: 1;
  border-color: rgb(143 185 150 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(252 250 246 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 0 0 3px rgba(143,185,150,0.12);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.register-form-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.hex-layer {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 8px;
}

.hex-tile {
  width: 60px;
  height: 60px;
  opacity: 1;
  clip-path: polygon(
      25% 6%, 75% 6%, 100% 50%,
      75% 94%, 25% 94%, 0% 50%
    );
  transform: scale(0);
  position: relative;
  left: 50%;
  top: 50%;
}

#particle-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  /* messageより下、六角形より上 */
}

/* 星形（5角星）クリップパス */

.star-particle {
  clip-path: polygon(
      50% 0%,
      61% 35%,
      98% 35%,
      68% 57%,
      79% 91%,
      50% 70%,
      21% 91%,
      32% 57%,
      2% 35%,
      39% 35%
    );
}

/* 立体感のあるタイトル影 */

.drop-shadow-title {
  text-shadow:
      0 2px 4px rgba(251, 197, 49, 0.6),   /* 明るい金色 */
      0 4px 8px rgba(251, 197, 49, 0.35);
  /* 拡散した金色 */
}

.roster-section-nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(230 223 210 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(244 241 234 / var(--tw-bg-opacity, 1));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.roster-section {
  scroll-margin-top: calc(var(--roster-nav-height, 7rem) + env(safe-area-inset-top, 0px) + 0.5rem);
}

.admin-page-title{
  position: relative;
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  --tw-text-opacity: 1;
  color: rgb(143 185 150 / var(--tw-text-opacity, 1));
}

.admin-page-subtitle{
  position: relative;
  margin-top: 0.125rem;
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  color: rgb(143 185 150 / 0.7);
}

.admin-page-subtitle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 7.5rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: radial-gradient(
      circle,
      rgba(230, 223, 210, 0.95) 0%,
      rgba(230, 223, 210, 0.48) 55%,
      rgba(230, 223, 210, 0) 100%
    );
  transform: translate(-50%, -50%);
  filter: blur(2px);
}

.btn-sub-outline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(143 185 150 / var(--tw-border-opacity, 1));
  background-color: transparent;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(95 146 104 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.btn-sub-outline:hover{
  --tw-border-opacity: 1;
  border-color: rgb(95 146 104 / var(--tw-border-opacity, 1));
}

.btn-sub-outline:focus-visible{
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #8FB996;
}

.btn-sub-outline:active{
  --tw-translate-y: 1px;
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.btn-sub-outline {
  box-shadow: none;
}

.btn-sub-soft{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(127 175 135 / var(--tw-border-opacity, 1));
  background-image: linear-gradient(180deg,#B7D5BC 0%,#8FB996 58%,#74A87D 100%);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(244 241 234 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.btn-sub-soft:hover{
  --tw-brightness: brightness(1.03);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.btn-sub-soft:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-sub-soft:active{
  --tw-translate-y: 1px;
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.btn-sub-soft {
  box-shadow:
      0 8px 18px rgba(143, 185, 150, 0.3),
      0 2px 5px rgba(60, 90, 65, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 -1px 0 rgba(50, 80, 55, 0.12);
}

.btn-sub-soft-dark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(95 146 104 / var(--tw-border-opacity, 1));
  background-image: linear-gradient(180deg,#9CC8A3 0%,#6FA878 58%,#4F8860 100%);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(244 241 234 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.btn-sub-soft-dark:hover{
  --tw-brightness: brightness(1.05);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.btn-sub-soft-dark:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-sub-soft-dark:active{
  --tw-translate-y: 1px;
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.btn-sub-soft-dark {
  box-shadow:
      0 10px 20px rgba(95, 146, 104, 0.35),
      0 3px 6px rgba(40, 70, 45, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -1px 0 rgba(30, 50, 35, 0.18);
}

.client-footer-nav {
  position: fixed;
  bottom: 0;
}

/*
   * iOS 26で bottom: 0 の fixed 要素がスクロール中に誤った高さへ
   * 描画される問題を回避する。ナビ本体 4.5rem + 下余白 1rem。
   */

@supports (height: 100dvh) {
  .client-footer-nav {
    top: calc(100dvh - 5.5rem);
    bottom: auto;
  }
}

.client-metric-value{
  --tw-text-opacity: 1;
  color: rgb(95 146 104 / var(--tw-text-opacity, 1));
}

.client-page-title{
  position: relative;
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  --tw-text-opacity: 1;
  color: rgb(58 58 58 / var(--tw-text-opacity, 1));
}

.client-page-subtitle{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.125rem;
  display: table;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  color: rgb(74 64 56 / 0.7);
}

.client-page-subtitle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: calc(100% + 2rem);
  height: 1.25rem;
  border-radius: 9999px;
  background: radial-gradient(
      circle,
      rgba(230, 223, 210, 0.95) 0%,
      rgba(230, 223, 210, 0.48) 55%,
      rgba(230, 223, 210, 0) 100%
    );
  transform: translate(-50%, -50%);
  filter: blur(2px);
}

.client-form-input{
  width: 100%;
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 212 199 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 239 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(74 64 56 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.client-form-input::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}

.client-form-input::placeholder{
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}

.client-form-input:focus{
  --tw-border-opacity: 1;
  border-color: rgb(143 185 150 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(252 250 246 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 0 0 3px rgba(143,185,150,0.12);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.client-form-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.client-form-select{
  width: 100%;
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 212 199 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 239 / var(--tw-bg-opacity, 1));
  padding-left: 0px;
  padding-right: 0px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(74 64 56 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.client-form-select:focus{
  --tw-border-opacity: 1;
  border-color: rgb(143 185 150 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(252 250 246 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 0 0 3px rgba(143,185,150,0.12);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.client-form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  height: 52px;
  line-height: 52px;
  text-align: center;
  -moz-text-align-last: center;
       text-align-last: center;
}

.client-card{
  border-radius: 1.5rem;
  border-width: 1px;
  border-color: rgb(230 223 210 / 0.7);
  background-color: rgb(255 255 255 / 0.45);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  box-shadow:
      0 8px 20px rgba(74, 64, 56, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.client-setting-icon{
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  --tw-text-opacity: 1;
  color: rgb(143 185 150 / var(--tw-text-opacity, 1));
  background: radial-gradient(
      circle,
      rgba(143, 185, 150, 0.18) 0%,
      rgba(143, 185, 150, 0.08) 62%,
      rgba(143, 185, 150, 0) 100%
    );
}

/* The controller's existing state drives presentation only; no new judgment. */

.push-device-icon-complete,
  .push-device-icon-attention {
  display: none;
}

[data-push-state="registered"] .push-device-icon-complete,
  [data-push-state]:not([data-push-state="registered"]):not([data-push-state="checking"]) .push-device-icon-attention {
  display: block;
}

[data-push-state]:not([data-push-state="checking"]) .push-device-icon-checking {
  display: none;
}

[data-push-state]:not([data-push-state="registered"]):not([data-push-state="checking"]) .push-device-status-icon {
  color: #ef4444;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.14) 0%, rgba(239, 68, 68, 0.06) 62%, rgba(239, 68, 68, 0) 100%);
}

[data-controller~="push-device"]:not([data-push-state]) .push-device-status-icon,
  [data-push-state="checking"] .push-device-status-icon{
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
  background: radial-gradient(circle, rgba(163, 163, 163, 0.14) 0%, rgba(163, 163, 163, 0.06) 62%, rgba(163, 163, 163, 0) 100%);
}

/* Keep notification state visibility above shared button/link display styles. */

[data-controller~="push-device"][hidden],
  [data-controller~="push-device"] [hidden] {
  display: none;
}

.client-toggle{
  position: relative;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
}

.client-toggle-track{
  position: relative;
  display: block;
  height: 2rem;
  width: 3.5rem;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(216 208 197 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(222 216 207 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  box-shadow:
      inset 0 2px 4px rgba(74, 64, 56, 0.1),
      0 1px 0 rgba(255, 255, 255, 0.6);
}

.client-toggle-thumb{
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(250 247 241 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  box-shadow:
      0 3px 8px rgba(74, 64, 56, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.peer:checked + .client-toggle-track{
  --tw-border-opacity: 1;
  border-color: rgb(143 185 150 / var(--tw-border-opacity, 1));
  background-color: rgb(143 185 150 / 0.7);
}

.peer:checked + .client-toggle-track .client-toggle-thumb{
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.btn-clear-soft{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(207 200 191 / var(--tw-border-opacity, 1));
  background-image: linear-gradient(180deg,#F2EFE9 0%,#E7E1D8 100%);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.btn-clear-soft:hover{
  --tw-brightness: brightness(1.02);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.btn-clear-soft:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-clear-soft:active{
  --tw-translate-y: 1px;
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.btn-clear-soft {
  box-shadow:
      0 6px 14px rgba(74, 64, 56, 0.1),
      0 2px 4px rgba(74, 64, 56, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.65),
      inset 0 -1px 0 rgba(120, 105, 90, 0.08);
}

.btn-accent-soft{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 185 78 / var(--tw-border-opacity, 1));
  background-image: linear-gradient(180deg,#F7D77A 0%,#F4C95D 58%,#E8B844 100%);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(95 75 30 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.btn-accent-soft:hover{
  --tw-brightness: brightness(1.03);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.btn-accent-soft:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-accent-soft:active{
  --tw-translate-y: 1px;
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.btn-accent-soft {
  box-shadow:
      0 8px 18px rgba(244, 201, 93, 0.3),
      0 2px 5px rgba(110, 83, 22, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.58),
      inset 0 -1px 0 rgba(132, 95, 15, 0.1);
}

.btn-accent-soft-light{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(232 207 143 / var(--tw-border-opacity, 1));
  background-image: linear-gradient(180deg,#FFF9E8 0%,#F9EDC9 58%,#F3DFA9 100%);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(121 97 43 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.btn-accent-soft-light:hover{
  --tw-brightness: brightness(1.02);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.btn-accent-soft-light:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-accent-soft-light:active{
  --tw-translate-y: 1px;
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.btn-accent-soft-light {
  box-shadow:
      0 6px 14px rgba(201, 164, 75, 0.16),
      0 2px 4px rgba(110, 83, 22, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(156, 113, 24, 0.07);
}

.btn-top-adventure{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  letter-spacing: 0.16em;
  border-color: rgba(226, 169, 49, 0.95);
  background: linear-gradient(
      180deg,
      rgba(255, 229, 138, 1) 0%,
      rgba(247, 207, 90, 1) 45%,
      rgba(224, 162, 39, 1) 100%
    );
  color: #5a4212;
  text-shadow:
      0 1px 0 rgba(255, 248, 205, 0.85),
      0 -1px 0 rgba(112, 74, 6, 0.18);
  box-shadow:
      0 6px 0 rgba(173, 117, 20, 0.72),
      0 10px 18px rgba(46, 34, 15, 0.2),
      0 0 0 2px rgba(255, 241, 178, 0.38),
      inset 0 2px 0 rgba(255, 255, 255, 0.82),
      inset 0 -3px 0 rgba(152, 98, 13, 0.18);
}

.btn-top-adventure::before {
  content: "";
  position: absolute;
  inset: 4px 8px auto 8px;
  z-index: -1;
  height: 42%;
  border-radius: 9999px;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.62) 0%,
      rgba(255, 255, 255, 0.22) 60%,
      rgba(255, 255, 255, 0) 100%
    );
  pointer-events: none;
}

.btn-top-adventure::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: -150%;
  width: 42%;
  height: 100%;
  background: linear-gradient(
      120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.78) 50%,
      transparent 100%
    );
  transform: skewX(-20deg);
  animation: top-adventure-shine 2.8s ease-in-out infinite;
  pointer-events: none;
}

.btn-top-adventure:hover {
  filter: brightness(1.04) saturate(1.04);
}

.btn-top-adventure:active {
  transform: translateY(4px) scale(0.99);
  box-shadow:
      0 2px 0 rgba(173, 117, 20, 0.72),
      0 5px 10px rgba(46, 34, 15, 0.16),
      0 0 0 2px rgba(255, 241, 178, 0.34),
      inset 0 2px 0 rgba(255, 255, 255, 0.72),
      inset 0 -2px 0 rgba(152, 98, 13, 0.14);
}

@keyframes top-adventure-shine {
  0% {
    left: -150%;
  }

  42% {
    left: 150%;
  }

  100% {
    left: 150%;
  }
}

.btn-sub-soft{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(126 175 134 / var(--tw-border-opacity, 1));
  background-image: linear-gradient(180deg,#A9D8B1 0%,#8FB996 58%,#78A981 100%);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.btn-sub-soft:hover{
  --tw-brightness: brightness(1.03);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.btn-sub-soft:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn-sub-soft:active{
  --tw-translate-y: 1px;
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.btn-sub-soft {
  box-shadow:
      0 8px 18px rgba(143, 185, 150, 0.32),
      0 2px 5px rgba(64, 96, 68, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(47, 91, 54, 0.12);
}

/* 案内役と重なっても読めるよう、文字の周囲に白い縁とぼかしを重ねる。 */

.tutorial-readable {
  text-shadow:
      0 2px 3px rgba(52, 55, 42, 0.2),
      -1px -1px 1px rgba(255, 255, 255, 0.98),
      1px -1px 1px rgba(255, 255, 255, 0.98),
      -1px 1px 1px rgba(255, 255, 255, 0.98),
      1px 1px 1px rgba(255, 255, 255, 0.98),
      0 0 7px rgba(251, 248, 236, 0.98),
      0 0 12px rgba(251, 248, 236, 0.92);
}

.tutorial-body-readable {
  text-shadow:
      0 2px 3px rgba(52, 55, 42, 0.3),
      -2px 0 2px rgba(255, 255, 255, 0.98),
      2px 0 2px rgba(255, 255, 255, 0.98),
      0 -2px 2px rgba(255, 255, 255, 0.98),
      0 2px 2px rgba(255, 255, 255, 0.98),
      -1px -1px 1px rgba(255, 255, 255, 1),
      1px 1px 1px rgba(255, 255, 255, 1),
      0 0 8px rgba(251, 248, 236, 1),
      0 0 16px rgba(251, 248, 236, 0.96);
}

/* 案内役の左右に合わせて全体を反転する。操作ボタン内の順番は共通。 */

.tutorial-panel[data-guide-side="left"] {
  right: 0.25rem;
  left: auto;
}

.tutorial-panel[data-guide-side="left"] .tutorial-frame {
  transform: scaleX(1);
}

.tutorial-panel[data-guide-side="left"] .tutorial-guide {
  right: auto;
  left: -8%;
  transform: scaleX(-1);
}

.tutorial-panel[data-guide-side="left"] .tutorial-content {
  padding-right: 0.75rem;
  padding-left: clamp(4.5rem, 23vw, 7rem);
}

.tutorial-panel[data-guide-side="left"] .tutorial-skip {
  right: 6%;
  left: auto;
}

.tutorial-panel[data-guide-side="left"] .tutorial-count {
  right: auto;
  left: 34%;
}

.tutorial-panel[data-guide-side="left"] .tutorial-controls {
  right: 7%;
  left: auto;
}

.tutorial-panel[data-guide-side="right"] {
  right: auto;
  left: 0.25rem;
}

.tutorial-panel[data-guide-side="right"] .tutorial-frame {
  transform: scaleX(-1);
}

.tutorial-panel[data-guide-side="right"] .tutorial-guide {
  right: -8%;
  left: auto;
  transform: scaleX(1);
}

.tutorial-panel[data-guide-side="right"] .tutorial-content {
  padding-right: clamp(4.5rem, 23vw, 7rem);
  padding-left: 0.75rem;
}

.tutorial-panel[data-guide-side="right"] .tutorial-skip {
  right: auto;
  left: 6%;
}

.tutorial-panel[data-guide-side="right"] .tutorial-count {
  right: 34%;
  left: auto;
}

.tutorial-panel[data-guide-side="right"] .tutorial-controls {
  right: auto;
  left: 7%;
}

@media (min-width: 360px) {
  .tutorial-panel[data-guide-side="left"] .tutorial-content {
    padding-right: 1rem;
    padding-left: clamp(5rem, 26vw, 7.5rem);
  }

  .tutorial-panel[data-guide-side="right"] .tutorial-content {
    padding-right: clamp(5rem, 26vw, 7.5rem);
    padding-left: 1rem;
  }
}

/* “選択中”の見た目（クリックした瞬間に移動させる） */

.tile-selected {
  outline: 4px solid rgba(253, 224, 71, 0.95);
  /* yellow-300 */
  outline-offset: 2px;
  box-shadow:
      0 0 0 8px rgba(253, 224, 71, 0.18),
      0 0 18px rgba(253, 224, 71, 0.55);
  transform: translateY(-1px);
}

/* 未確認キャラ：カード全体をやわらかく点滅させる */

.character-new-pulse {
  animation: character-new-pulse 2.2s ease-in-out infinite;
  will-change: filter, box-shadow, transform;
}

/* チュートリアル中は複数カードのGPUアニメーションを止める */

body.characters-tutorial-open .character-new-pulse {
  animation: none;
  filter: none;
  transform: none;
  will-change: auto;
}

/* 初期フォーカス確定中はカードのtransform遷移も止める */

body.characters-tutorial-open .character-tile {
  transition: none;
}

body.characters-tutorial-open
    [data-character-book-target~="newBadge"] {
  backdrop-filter: none;
}

@keyframes character-new-pulse {
  0%,
    100% {
    filter: brightness(1) saturate(1);
    box-shadow:
        0 0 0 2px rgba(217, 122, 112, 0.42),
        0 0 10px rgba(217, 122, 112, 0.28);
    transform: translateY(0) scale(1);
  }

  50% {
    filter: brightness(1.12) saturate(1.08);
    box-shadow:
        0 0 0 3px rgba(217, 122, 112, 0.72),
        0 0 22px rgba(217, 122, 112, 0.62);
    transform: translateY(-1px) scale(1.012);
  }
}

/* キャラ拡大プレビュー中：ステータスバー/フッターも暗くぼかす */

body.character-preview-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  animation: character-preview-backdrop-fade-in 640ms ease-out both;
}

body.character-preview-open.character-preview-closing::before {
  animation: character-preview-backdrop-fade-out 220ms ease-in both;
}

@keyframes character-preview-backdrop-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes character-preview-backdrop-fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* キャラ拡大プレビュー：ズーム表示/非表示 */

.character-preview-panel-prep {
  opacity: 0;
  transform: scale(0.72) translateY(18px);
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: opacity, transform;
}

.character-preview-panel-open {
  animation: character-preview-zoom-in 320ms cubic-bezier(0.16, 1, 0.3, 1)
      both;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: opacity, transform;
}

.character-preview-panel-closing {
  animation: character-preview-zoom-out 220ms ease-in both;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: opacity, transform;
}

@keyframes character-preview-zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.72) translateY(18px);
  }

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

@keyframes character-preview-zoom-out {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.86) translateY(8px);
  }
}

/* キャラ図鑑専用：冒険の地図のような古紙背景 */

.character-book-bg {
  background:
      /* ページ下端でデフォルト背景色へ自然に戻す */
      linear-gradient(
        to bottom,
        transparent calc(100% - 144px),
        rgba(244, 241, 234, 0.7) calc(100% - 72px),
        rgba(244, 241, 234, 0.98) calc(100% - 24px),
        #f4f1ea 100%
      ),
      radial-gradient(
        ellipse at 12% 8%,
        rgba(255, 253, 240, 0.58) 0%,
        rgba(255, 253, 240, 0.18) 7%,
        transparent 18%
      ),
      radial-gradient(
        ellipse at 76% 10%,
        rgba(112, 68, 29, 0.14) 0%,
        rgba(112, 68, 29, 0.04) 6%,
        transparent 14%
      ),
      radial-gradient(
        ellipse at 31% 20%,
        rgba(255, 251, 231, 0.34) 0%,
        transparent 12%
      ),
      radial-gradient(
        ellipse at 90% 29%,
        rgba(101, 61, 26, 0.13) 0%,
        transparent 13%
      ),
      radial-gradient(
        ellipse at 15% 38%,
        rgba(118, 73, 30, 0.12) 0%,
        transparent 12%
      ),
      radial-gradient(
        ellipse at 61% 47%,
        rgba(255, 252, 235, 0.38) 0%,
        transparent 14%
      ),
      radial-gradient(
        ellipse at 39% 58%,
        rgba(106, 64, 26, 0.13) 0%,
        transparent 12%
      ),
      radial-gradient(
        ellipse at 87% 67%,
        rgba(255, 251, 232, 0.3) 0%,
        transparent 13%
      ),
      radial-gradient(
        ellipse at 18% 76%,
        rgba(96, 56, 23, 0.14) 0%,
        transparent 13%
      ),
      radial-gradient(
        ellipse at 57% 85%,
        rgba(255, 252, 235, 0.32) 0%,
        transparent 12%
      ),
      radial-gradient(
        ellipse at 91% 95%,
        rgba(91, 53, 22, 0.14) 0%,
        transparent 13%
      ),
      linear-gradient(
        180deg,
        #f4f1ea 0%,
        #f4f1ea 5%,
        #fbf7ec 11%,
        #ecd9b6 19%,
        #f8f0df 28%,
        #e9d5af 39%,
        #faf4e7 50%,
        #ead7b3 61%,
        #f8f0df 73%,
        #e8d2aa 85%,
        #faf5e9 94%,
        #ecd9b6 100%
      );
}

.character-book-bg::before,
  .character-book-bg::after {
  -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 calc(100% - 144px),
      transparent 100%
    );
  mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 calc(100% - 144px),
      transparent 100%
    );
}

.character-book-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
      radial-gradient(
        ellipse at 5% 14%,
        rgba(86, 50, 20, 0.16) 0%,
        transparent 10%
      ),
      radial-gradient(
        ellipse at 43% 9%,
        rgba(255, 252, 234, 0.26) 0%,
        transparent 9%
      ),
      radial-gradient(
        ellipse at 82% 24%,
        rgba(90, 52, 21, 0.14) 0%,
        transparent 10%
      ),
      radial-gradient(
        ellipse at 24% 33%,
        rgba(255, 250, 229, 0.25) 0%,
        transparent 9%
      ),
      radial-gradient(
        ellipse at 59% 43%,
        rgba(91, 53, 22, 0.12) 0%,
        transparent 9%
      ),
      radial-gradient(
        ellipse at 95% 52%,
        rgba(255, 251, 232, 0.26) 0%,
        transparent 10%
      ),
      radial-gradient(
        ellipse at 11% 62%,
        rgba(89, 51, 20, 0.14) 0%,
        transparent 9%
      ),
      radial-gradient(
        ellipse at 72% 70%,
        rgba(255, 251, 232, 0.24) 0%,
        transparent 9%
      ),
      radial-gradient(
        ellipse at 35% 80%,
        rgba(84, 48, 19, 0.14) 0%,
        transparent 9%
      ),
      radial-gradient(
        ellipse at 83% 91%,
        rgba(255, 252, 234, 0.24) 0%,
        transparent 9%
      ),
      linear-gradient(
        11deg,
        transparent 0%,
        rgba(91, 53, 22, 0.045) 8%,
        transparent 16%,
        rgba(255, 252, 238, 0.08) 25%,
        transparent 34%,
        rgba(91, 53, 22, 0.04) 44%,
        transparent 54%,
        rgba(255, 252, 238, 0.075) 64%,
        transparent 74%,
        rgba(91, 53, 22, 0.04) 85%,
        transparent 100%
      );
  mix-blend-mode: multiply;
  opacity: 0.78;
}

.character-book-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
      radial-gradient(
        ellipse at -2% 24%,
        rgba(79, 45, 18, 0.18),
        transparent 9%
      ),
      radial-gradient(
        ellipse at 102% 31%,
        rgba(79, 45, 18, 0.17),
        transparent 10%
      ),
      radial-gradient(
        ellipse at -1% 49%,
        rgba(79, 45, 18, 0.15),
        transparent 8%
      ),
      radial-gradient(
        ellipse at 101% 62%,
        rgba(79, 45, 18, 0.18),
        transparent 10%
      ),
      radial-gradient(
        ellipse at -2% 79%,
        rgba(79, 45, 18, 0.17),
        transparent 9%
      ),
      radial-gradient(
        ellipse at 102% 92%,
        rgba(79, 45, 18, 0.18),
        transparent 10%
      ),
      radial-gradient(
        ellipse at 66% 37%,
        rgba(255, 253, 239, 0.15),
        transparent 9%
      ),
      radial-gradient(
        ellipse at 32% 68%,
        rgba(86, 50, 20, 0.08),
        transparent 8%
      );
  mix-blend-mode: multiply;
  opacity: 0.78;
}

/* ワールド一覧：幻想的な光をまとった古紙背景 */

.quest-bg {
  isolation: isolate;
  background-color: #eee0c2;
  background-image:
      /* ページ下端でデフォルト背景色へ自然に戻す */
      linear-gradient(
        to bottom,
        transparent calc(100% - 144px),
        rgba(244, 241, 234, 0.7) calc(100% - 72px),
        rgba(244, 241, 234, 0.98) calc(100% - 24px),
        #f4f1ea 100%
      ),
      linear-gradient(
        to bottom,
        #f4f1ea 0,
        rgba(244, 241, 234, 0.98) 24px,
        rgba(244, 241, 234, 0.7) 72px,
        transparent 144px
      ),
      radial-gradient(
        circle at 10% 12%,
        rgba(171, 198, 232, 0.3) 0 5%,
        transparent 19%
      ),
      radial-gradient(
        circle at 88% 22%,
        rgba(190, 168, 224, 0.27) 0 6%,
        transparent 21%
      ),
      radial-gradient(
        circle at 18% 58%,
        rgba(126, 177, 197, 0.18) 0 7%,
        transparent 23%
      ),
      radial-gradient(
        circle at 82% 76%,
        rgba(211, 178, 226, 0.22) 0 5%,
        transparent 20%
      ),
      radial-gradient(
        ellipse at 50% 104%,
        rgba(255, 225, 151, 0.34) 0 10%,
        transparent 42%
      ),
      radial-gradient(
        circle at 14% 18%,
        rgba(255, 250, 228, 0.52) 0 7%,
        transparent 18%
      ),
      radial-gradient(
        circle at 82% 27%,
        rgba(112, 72, 35, 0.13) 0 6%,
        transparent 16%
      ),
      radial-gradient(
        circle at 31% 69%,
        rgba(126, 82, 38, 0.1) 0 8%,
        transparent 19%
      ),
      radial-gradient(
        circle at 77% 84%,
        rgba(255, 249, 224, 0.42) 0 7%,
        transparent 18%
      ),
      linear-gradient(174deg, #f5ecd8 0%, #e8d5ae 47%, #f1e4ca 100%);
}

.quest-bg::before,
  .quest-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 120px,
      #000 calc(100% - 144px),
      transparent 100%
    );
  mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 120px,
      #000 calc(100% - 144px),
      transparent 100%
    );
}

/* 大きさの異なる細かい斑点を重ねて粒状感を出す */

.quest-bg::before {
  background-image:
      radial-gradient(
        circle,
        rgba(77, 49, 23, 0.12) 0 0.7px,
        transparent 0.9px
      ),
      radial-gradient(
        circle,
        rgba(255, 252, 235, 0.35) 0 0.8px,
        transparent 1px
      ),
      radial-gradient(
        circle,
        rgba(92, 58, 27, 0.08) 0 1.1px,
        transparent 1.35px
      );
  background-position:
      0 0,
      3px 5px,
      8px 2px;
  background-size:
      5px 7px,
      7px 9px,
      13px 11px;
  mix-blend-mode: multiply;
  opacity: 0.85;
}

/* 規則的な繊維線を避け、星屑と魔力の軌跡を散らす */

.quest-bg::after {
  background-image:
      radial-gradient(
        circle,
        rgba(255, 246, 191, 0.9) 0 0.8px,
        rgba(255, 226, 139, 0.3) 1px,
        transparent 3px
      ),
      radial-gradient(
        circle,
        rgba(216, 225, 255, 0.8) 0 0.7px,
        rgba(168, 184, 231, 0.22) 1px,
        transparent 2.8px
      ),
      radial-gradient(
        circle,
        rgba(255, 255, 244, 0.72) 0 0.5px,
        transparent 1.8px
      ),
      radial-gradient(
        ellipse at -12% 34%,
        transparent 0 48%,
        rgba(150, 179, 220, 0.14) 49%,
        transparent 52%
      ),
      radial-gradient(
        ellipse at 112% 68%,
        transparent 0 47%,
        rgba(190, 154, 215, 0.13) 48%,
        transparent 51%
      ),
      radial-gradient(
        circle at 4% 42%,
        rgba(75, 45, 20, 0.12),
        transparent 13%
      ),
      radial-gradient(
        circle at 97% 63%,
        rgba(75, 45, 20, 0.11),
        transparent 14%
      );
  background-position:
      7px 11px,
      29px 47px,
      13px 31px,
      center,
      center,
      center,
      center;
  background-size:
      73px 89px,
      113px 127px,
      47px 61px,
      auto,
      auto,
      auto,
      auto;
  opacity: 0.82;
}

/* ステージ一覧：八角形のステージマップ */

.stage-map {
  --stage-theme: #8fb996;
  --stage-border-color: color-mix(in srgb, var(--stage-theme) 72%, #71675d);
  --stage-octagon: polygon(
      29% 0,
      71% 0,
      100% 29%,
      100% 71%,
      71% 100%,
      29% 100%,
      0 71%,
      0 29%
    );
}

.stage-map__page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 1rem 1rem 1.5rem;
}

.stage-map__inner {
  position: relative;
  z-index: 10;
  max-width: 640px;
  margin: 0 auto;
}

.stage-map__header {
  position: relative;
  padding: 0;
}

.stage-map__back {
  position: relative;
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  margin-left: 0.8rem;
  margin-bottom: 0.75rem;
  padding: 0 !important;
}

.stage-map__back-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.stage-map__page-title {
  width: 100%;
  margin-bottom: 0;
}

.stage-map__world-name {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 1.4;
  white-space: nowrap;
}

.stage-map__list {
  position: relative;
  margin-top: 2rem;
}

.stage-map__row {
  position: relative;
  display: flex;
  min-height: clamp(8.25rem, 35vw, 9.5rem);
}

.stage-map__row--left {
  justify-content: flex-start;
  padding-left: 7%;
}

.stage-map__row--right {
  justify-content: flex-end;
  padding-right: 7%;
}

.stage-map__row:last-child {
  min-height: clamp(7.75rem, 32vw, 8.75rem);
}

/* 「続きからはじめる」のスクロール先を柔らかく示す */

.stage-map__scroll-highlight {
  isolation: isolate;
}

.stage-map__scroll-highlight::before {
  content: "";
  position: absolute;
  inset: -0.4rem 0;
  z-index: 1;
  border-radius: 2rem;
  background: radial-gradient(
      ellipse at 28% 50%,
      color-mix(in srgb, var(--stage-theme) 38%, transparent) 0%,
      color-mix(in srgb, var(--stage-theme) 20%, transparent) 38%,
      transparent 72%
    );
  animation: stage-map-scroll-highlight 1.8s ease-out both;
  filter: blur(2px);
  pointer-events: none;
}

.stage-map__row--right.stage-map__scroll-highlight::before {
  background: radial-gradient(
      ellipse at 72% 50%,
      color-mix(in srgb, var(--stage-theme) 38%, transparent) 0%,
      color-mix(in srgb, var(--stage-theme) 20%, transparent) 38%,
      transparent 72%
    );
}

@keyframes stage-map-scroll-highlight {
  0% {
    opacity: 0;
  }

  18%,
    68% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.stage-map__node {
  position: relative;
  z-index: 10;
  width: clamp(7.5rem, 34vw, 9rem);
}

.stage-map__node--available::after {
  content: "";
  position: absolute;
  bottom: -27%;
  left: 50%;
  z-index: 0;
  width: 155%;
  height: 78%;
  background: radial-gradient(
      ellipse at center,
      rgba(255, 250, 204, 0.98) 0%,
      color-mix(in srgb, var(--stage-theme) 78%, rgba(255, 232, 128, 0.82)) 28%,
      color-mix(in srgb, var(--stage-theme) 48%, transparent) 55%,
      transparent 80%
    );
  filter: blur(7px);
  opacity: 1;
  transform: translateX(-50%);
  pointer-events: none;
}

.stage-map__link {
  display: block;
  color: inherit;
  transition: transform 0.2s ease;
}

.stage-map__link:active {
  transform: scale(0.97);
}

.stage-map__octagon,
  .stage-map__octagon-middle,
  .stage-map__octagon-inner,
  .stage-map__octagon-core,
  .stage-map__octagon-content {
  clip-path: var(--stage-octagon);
}

.stage-map__octagon {
  position: relative;
  z-index: 2;
  aspect-ratio: 1;
  padding: 3px;
  background: var(--stage-border-color);
  filter: drop-shadow(
        0 4px 0 color-mix(in srgb, var(--stage-theme) 42%, #72675c)
      )
      drop-shadow(0 10px 11px rgba(74, 61, 48, 0.2));
}

.stage-map__octagon-middle {
  height: 100%;
  padding: 2px;
  background: color-mix(in srgb, var(--stage-theme) 22%, #fffdf7);
}

.stage-map__octagon-inner {
  position: relative;
  height: 100%;
  padding: 0;
  background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.56) 0%,
        rgba(255, 255, 255, 0.08) 43%,
        rgba(73, 54, 38, 0.1) 100%
      ),
      color-mix(in srgb, var(--stage-theme) 82%, white);
  box-shadow:
      inset 0 4px 8px rgba(255, 255, 255, 0.48),
      inset 0 -5px 8px rgba(73, 54, 38, 0.11);
  color: #36332f;
  text-align: center;
}

.stage-map__octagon-core {
  position: absolute;
  inset: 7px;
  padding: 2px;
  background: color-mix(
      in srgb,
      var(--stage-theme) 34%,
      rgba(255, 253, 247, 0.82)
    );
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.4));
}

.stage-map__octagon-content {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
      radial-gradient(
        circle at 35% 26%,
        rgba(255, 255, 255, 0.2),
        transparent 48%
      ),
      rgba(255, 255, 255, 0.08);
  box-shadow:
      inset 0 2px 4px rgba(255, 255, 255, 0.3),
      inset 0 -3px 5px rgba(73, 54, 38, 0.07);
}

.stage-map__node--available .stage-map__octagon,
  .stage-map__node--completed .stage-map__octagon {
  filter: drop-shadow(
        0 4px 0 color-mix(in srgb, var(--stage-theme) 45%, #72675c)
      )
      drop-shadow(
        0 9px 11px color-mix(in srgb, var(--stage-theme) 34%, transparent)
      )
      drop-shadow(
        0 0 14px color-mix(in srgb, var(--stage-theme) 22%, transparent)
      );
}

.stage-map__node--completed .stage-map__octagon-inner {
  background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.62) 0%,
        rgba(255, 255, 255, 0.09) 45%,
        rgba(73, 54, 38, 0.08) 100%
      ),
      color-mix(in srgb, var(--stage-theme) 70%, white);
}

.stage-map__node--locked .stage-map__octagon {
  background: #99948d;
  filter: drop-shadow(0 4px 0 #938e87)
      drop-shadow(0 9px 10px rgba(74, 68, 61, 0.17));
}

.stage-map__node--locked .stage-map__octagon-middle {
  background: #f3f0eb;
}

.stage-map__node--locked .stage-map__octagon-inner {
  background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.62) 0%,
        rgba(255, 255, 255, 0.05) 48%,
        rgba(89, 82, 74, 0.1) 100%
      ),
      #dedbd6;
  color: #6f6b66;
}

.stage-map__node--locked .stage-map__octagon-core {
  background: rgba(255, 255, 255, 0.68);
}

.stage-map__node--locked .stage-map__octagon-content {
  background: rgba(210, 206, 200, 0.18);
}

.stage-map__lock {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.15rem;
}

.stage-map__number {
  font-size: clamp(2.05rem, 9vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  color: color-mix(in srgb, var(--stage-theme) 28%, #3d3934);
  text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.62),
      0 -1px 0 rgba(73, 54, 38, 0.2),
      0 0 9px color-mix(in srgb, var(--stage-theme) 26%, transparent);
}

.stage-map__node--locked .stage-map__number {
  color: #716d68;
  text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.62),
      0 -1px 0 rgba(73, 68, 61, 0.16);
}

.stage-map__title-group {
  position: absolute;
  top: 15%;
  max-width: min(calc(52vw + 0.5rem), 13.5rem);
}

.stage-map__title-group--right {
  left: calc(100% + 0.2rem);
  text-align: left;
}

.stage-map__title-group--left {
  right: calc(100% + 0.2rem);
  text-align: right;
}

.stage-map__title {
  position: relative;
  z-index: 3;
  display: inline-block;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  padding: 0.12rem 0.18rem;
  font-size: clamp(0.75rem, 3.5vw, 0.9rem);
  font-weight: 700;
  line-height: 1.45;
  text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.98),
      0 0 5px rgba(255, 255, 255, 0.95),
      0 0 10px rgba(255, 255, 255, 0.82);
}

.stage-map__title-glow {
  position: absolute;
  inset: -0.2rem -0.9rem;
  z-index: 1;
  background: radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--stage-theme) 20%, rgba(248, 244, 235, 0.94)) 0%,
      color-mix(in srgb, var(--stage-theme) 14%, rgba(244, 241, 234, 0.74)) 48%,
      color-mix(in srgb, var(--stage-theme) 8%, rgba(238, 224, 194, 0.3)) 70%,
      transparent 88%
    );
  filter: blur(1.5px);
  pointer-events: none;
}

.stage-map__title-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.stage-map__node--locked .stage-map__title {
  color: #716d68;
}

.stage-map__decoration,
  .stage-map__route {
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.stage-map__decoration {
  background-color: var(--stage-border-color);
  -webkit-mask-image: var(--stage-leaf-image);
  mask-image: var(--stage-leaf-image);
}

.stage-map__node--locked .stage-map__decoration {
  background-color: #99948d;
}

.stage-map__leaf {
  position: absolute;
  z-index: 1;
  opacity: 0.58;
  pointer-events: none;
}

.stage-map__leaf--left {
  bottom: 4%;
  left: -15%;
  width: 49%;
  height: 59%;
}

.stage-map__leaf--right {
  right: -14%;
  bottom: 29%;
  width: 34%;
  height: 39%;
  transform: scaleX(-1) rotate(-7deg);
}

.stage-map__route {
  position: absolute;
  top: 40%;
  z-index: 0;
  width: 40%;
  height: 64%;
  background-color: var(--stage-theme);
  -webkit-mask-image: var(--stage-route-image);
  mask-image: var(--stage-route-image);
  opacity: 0.35;
  pointer-events: none;
}

.stage-map__route--left {
  left: 39%;
}

.stage-map__route--right {
  right: 39%;
  transform: scaleX(-1);
}

.stage-map__route--completed {
  background-color: color-mix(in srgb, var(--stage-theme) 78%, #5f574d);
  opacity: 0.62;
}

.stage-map__route--locked {
  background-color: #b8afa3;
}

/* クエスト一覧：丸みの強いクエストカード */

.quest-list {
  --quest-theme: #8fb996;
  --quest-card-color: var(--quest-theme);
}

.quest-list__page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 1rem 1rem 1.5rem;
}

.quest-list__inner {
  position: relative;
  z-index: 10;
  max-width: 640px;
  margin: 0 auto;
}

.quest-list__header {
  position: relative;
}

.quest-list__back {
  position: relative;
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  margin-left: 0.8rem;
  margin-bottom: 0.75rem;
  padding: 0 !important;
}

.quest-list__back-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.quest-list__page-title {
  width: 100%;
  margin-bottom: 0;
}

.quest-list__stage-name {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 1.4;
  white-space: nowrap;
}

.quest-list__items {
  display: grid;
  gap: 0;
  margin-top: 2rem;
}

.quest-list__item {
  position: relative;
  display: flex;
  min-height: clamp(8.5rem, 38vw, 9.5rem);
  isolation: isolate;
}

.quest-list__item--left {
  justify-content: flex-start;
}

.quest-list__item--right {
  justify-content: flex-end;
}

.quest-list__item:last-child {
  min-height: auto;
}

/* 「続きからはじめる」のスクロール先を枠線なしで柔らかく示す */

.quest-list__scroll-highlight::before {
  content: "";
  position: absolute;
  inset: -0.35rem 0;
  z-index: 1;
  border-radius: 2.2rem;
  background: radial-gradient(
      ellipse at 38% 38%,
      color-mix(in srgb, var(--quest-theme) 36%, transparent) 0%,
      color-mix(in srgb, var(--quest-theme) 19%, transparent) 42%,
      transparent 74%
    );
  animation: stage-map-scroll-highlight 1.8s ease-out both;
  filter: blur(2px);
  pointer-events: none;
}

.quest-list__item--right.quest-list__scroll-highlight::before {
  background: radial-gradient(
      ellipse at 62% 38%,
      color-mix(in srgb, var(--quest-theme) 36%, transparent) 0%,
      color-mix(in srgb, var(--quest-theme) 19%, transparent) 42%,
      transparent 74%
    );
}

.quest-list__item > .quest-list__link,
  .quest-list__item > .quest-list__disabled {
  position: relative;
  z-index: 2;
  width: 91%;
  max-width: 34rem;
}

.quest-list__link {
  display: block;
  color: inherit;
  transition: transform 0.2s ease;
}

.quest-list__link:active {
  transform: scale(0.98);
}

.quest-list__card {
  --quest-card-color: var(--quest-theme);
  position: relative;
  display: flex;
  min-height: 5.1rem;
  align-items: center;
  overflow: visible;
  border: 2px solid color-mix(in srgb, var(--quest-card-color) 46%, #fffdf8);
  border-radius: 1.8rem;
  padding: 0.7rem 1rem 0.7rem 3.85rem;
  background: linear-gradient(
      145deg,
      color-mix(in srgb, var(--quest-card-color) 13%, #fffdf8) 0%,
      color-mix(in srgb, var(--quest-card-color) 22%, #f4f1ea) 100%
    );
  box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.46),
      0 7px 13px rgba(74, 61, 48, 0.11);
}

.quest-list__card::before,
  .quest-list__card::after {
  content: "";
  position: absolute;
  z-index: 0;
  background-color: color-mix(in srgb, var(--quest-card-color) 72%, #71675d);
  opacity: 0.16;
  -webkit-mask-image: var(--quest-leaf-image);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--quest-leaf-image);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  pointer-events: none;
}

.quest-list__card::before {
  bottom: 0.35rem;
  left: 2.8rem;
  width: 3.3rem;
  height: 3.9rem;
  transform: rotate(8deg);
}

.quest-list__card::after {
  top: 0.35rem;
  right: 1.6rem;
  width: 2.6rem;
  height: 3.4rem;
  transform: scaleX(-1) rotate(-8deg);
}

.quest-list__marker,
  .quest-list__content,
  .quest-list__progress {
  position: relative;
  z-index: 1;
}

.quest-list__marker {
  position: absolute;
  top: 50%;
  left: -0.8rem;
  display: flex;
  width: 4.2rem;
  height: 4.2rem;
  align-items: center;
  justify-content: center;
  border: 2px solid color-mix(in srgb, var(--quest-card-color) 38%, #fffdf8);
  border-radius: 50%;
  background: color-mix(in srgb, var(--quest-card-color) 9%, #fffdf8);
  box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.52),
      0 3px 8px rgba(74, 61, 48, 0.08);
  transform: translateY(-50%);
}

.quest-list__number {
  font-size: clamp(1.75rem, 8vw, 2.15rem);
  font-weight: 500;
  line-height: 1;
  color: color-mix(in srgb, var(--quest-card-color) 34%, #38342f);
  text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.72),
      0 0 8px color-mix(in srgb, var(--quest-card-color) 24%, transparent);
}

.quest-list__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  flex: 1;
  padding: 0;
}

.quest-list__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(0.82rem, 3.5vw, 0.96rem);
  font-weight: 700;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.quest-list__progress {
  position: absolute;
  bottom: -1.05rem;
  left: 0.85rem;
  z-index: 3;
  display: flex;
  min-height: 2.15rem;
  align-items: center;
}

.quest-list__stars {
  display: flex;
  min-height: 1.7rem;
  align-items: center;
  gap: 0.32rem;
  line-height: 1;
}

.quest-list__star {
  width: 1.55rem;
  height: 1.55rem;
  flex: none;
}

.quest-list__star-secondary {
  opacity: 0.52;
}

.quest-list__star--filled {
  color: #e8b746;
  filter: drop-shadow(0 0 3px rgba(232, 183, 70, 0.35));
}

.quest-list__star--empty {
  color: #aaa6a0;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.62));
}

.quest-list__star--empty .quest-list__star-secondary {
  fill: #d8d4ce;
  opacity: 1;
}

.quest-list__status {
  display: flex;
  min-height: 2.15rem;
  align-items: center;
}

.quest-list__lock {
  width: 2.15rem;
  height: 2.15rem;
}

.quest-list__lock-secondary {
  opacity: 0.55;
}

.quest-list__card--available {
  border-color: color-mix(in srgb, var(--quest-card-color) 70%, #fffdf8);
  background: linear-gradient(
      145deg,
      color-mix(in srgb, var(--quest-card-color) 42%, #fffdf8) 0%,
      color-mix(in srgb, var(--quest-card-color) 56%, #f4f1ea) 100%
    );
  box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.5),
      0 8px 15px rgba(74, 61, 48, 0.12),
      0 0 24px color-mix(in srgb, var(--quest-card-color) 42%, transparent);
}

.quest-list__card--completed {
  border-color: color-mix(in srgb, var(--quest-card-color) 52%, #fffdf8);
  background: linear-gradient(
      145deg,
      color-mix(in srgb, var(--quest-card-color) 23%, #fffdf8) 0%,
      color-mix(in srgb, var(--quest-card-color) 34%, #f4f1ea) 100%
    );
}

.quest-list__card--locked {
  --quest-card-color: #a29d96;
  color: #706b65;
  background: linear-gradient(145deg, #f0ede8 0%, #ddd9d3 100%);
  box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.44),
      0 6px 11px rgba(74, 68, 61, 0.08);
}

.quest-list__card--locked .quest-list__marker {
  background: linear-gradient(145deg, #f8f5f1 0%, #e8e4de 100%);
}

.quest-list__card--boss {
  --quest-card-color: #a68ac1;
  min-height: 5.35rem;
  padding-left: 6rem;
  background:
      radial-gradient(
        circle at 18% 16%,
        rgba(255, 209, 239, 0.72) 0%,
        transparent 38%
      ),
      radial-gradient(
        circle at 84% 78%,
        rgba(126, 83, 172, 0.38) 0%,
        transparent 48%
      ),
      linear-gradient(135deg, #fff8fd 0%, #ead8f5 50%, #d5bde9 100%);
  border-color: rgba(166, 138, 193, 0.46);
  box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.55),
      0 8px 16px rgba(111, 82, 137, 0.14),
      0 0 15px rgba(166, 138, 193, 0.1);
}

.quest-list__card--boss.quest-list__card--locked {
  color: #756d7c;
  background:
      radial-gradient(
        circle at 20% 18%,
        rgba(232, 211, 232, 0.48) 0%,
        transparent 40%
      ),
      radial-gradient(
        circle at 82% 76%,
        rgba(126, 103, 145, 0.24) 0%,
        transparent 48%
      ),
      linear-gradient(135deg, #f6f0f5 0%, #e3d8e6 52%, #d3c6d8 100%);
  border-color: rgba(166, 138, 193, 0.34);
}

.quest-list__card--boss .quest-list__marker {
  left: 0.2rem;
  width: 5.5rem;
  height: 5.5rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.quest-list__boss-emblem {
  width: 5.5rem;
  height: 5.5rem;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(94, 61, 119, 0.18));
}

.quest-list__card--boss .quest-list__title {
  font-size: clamp(1.05rem, 4.4vw, 1.2rem);
  letter-spacing: 0.04em;
}

.quest-list__boss-catch {
  margin-top: 0.12rem;
  color: #7c5d91;
  font-size: clamp(0.6rem, 2.6vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.quest-list__card--boss.quest-list__card--locked .quest-list__boss-catch {
  color: #8b7e91;
}

.quest-list__card--boss::before,
  .quest-list__card--boss::after {
  display: none;
}

.quest-list__card--boss.quest-list__card--available,
  .quest-list__card--boss.quest-list__card--locked.quest-list__card--tutorial-active {
  background:
      radial-gradient(
        circle at 18% 14%,
        rgba(255, 198, 235, 0.82) 0%,
        transparent 39%
      ),
      radial-gradient(
        circle at 84% 80%,
        rgba(113, 67, 166, 0.48) 0%,
        transparent 50%
      ),
      linear-gradient(135deg, #fff8fe 0%, #e9d2f4 48%, #cfafe5 100%);
  border-color: rgba(150, 112, 184, 0.62);
  box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.58),
      0 9px 18px rgba(111, 82, 137, 0.18),
      0 0 25px rgba(166, 138, 193, 0.32);
}

/* チュートリアル中だけ、未解放のボスを操作不能のままアクティブ表示にする */

.quest-list__card--boss.quest-list__card--locked.quest-list__card--tutorial-active {
  color: inherit;
}

.quest-list__card--boss.quest-list__card--tutorial-active
    .quest-list__boss-catch {
  color: #7c5d91;
}

.quest-list__card--boss.quest-list__card--locked.quest-list__card--tutorial-active
    .quest-list__boss-emblem {
  filter: drop-shadow(0 3px 6px rgba(94, 61, 119, 0.18));
}

.quest-list__card--boss.quest-list__card--tutorial-active
    .quest-list__status {
  visibility: hidden;
}

.quest-list__card--boss.quest-list__card--locked .quest-list__boss-emblem {
  filter: grayscale(0.7) opacity(0.52);
}

.quest-list__route {
  position: absolute;
  top: 30%;
  z-index: 0;
  width: 48%;
  height: 96%;
  background-color: var(--quest-theme);
  opacity: 0.35;
  -webkit-mask-image: var(--quest-route-image);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--quest-route-image);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  pointer-events: none;
}

.quest-list__route--left {
  left: 34%;
}

.quest-list__route--right {
  right: 34%;
  transform: scaleX(-1);
}

.quest-list__route--completed {
  background-color: color-mix(in srgb, var(--quest-theme) 78%, #5f574d);
  opacity: 0.62;
}

.quest-list__route--locked {
  background-color: #b8afa3;
  opacity: 0.42;
}

/* チャレンジ（通常クエスト）：学びの書 */

.quest-learning {
  --quest-learning-theme: #8fb996;
  --quest-learning-ink: #5a5048;
  --quest-learning-paper-edge: #cdb994;
}

body:has(.quest-learning__page) {
  height: 100dvh;
  overflow: hidden;
  padding-bottom: 0;
}

body:has(.quest-learning__page) main {
  height: 100%;
}

.quest-learning__page {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: calc(env(safe-area-inset-top) + 0.75rem) 1rem
      calc(env(safe-area-inset-bottom) + 0.75rem);
}

.quest-learning__inner {
  position: relative;
  z-index: 10;
  display: flex;
  height: 100%;
  min-height: 0;
  width: 100%;
  max-width: 40rem;
  flex-direction: column;
  margin-inline: auto;
}

.quest-learning__header {
  flex: 0 0 auto;
  margin-bottom: 0.55rem;
  text-align: center;
}

.quest-learning__heading {
  font-size: clamp(1.5rem, 6.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-indent: 0.1em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
}

.quest-learning__quest-title {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.45rem;
  margin: 0.3rem auto 0;
  color: color-mix(in srgb, var(--quest-learning-theme) 72%, #3d4840);
  font-size: clamp(0.92rem, 4vw, 1.08rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.45;
}

.quest-learning__quest-title::before,
  .quest-learning__quest-title::after {
  content: "";
  flex: 1 1 1.5rem;
  min-width: 1rem;
  height: 1px;
  background: linear-gradient(
      to var(--quest-title-line-direction, right),
      transparent,
      color-mix(in srgb, var(--quest-learning-theme) 55%, transparent)
    );
}

.quest-learning__quest-title::after {
  --quest-title-line-direction: left;
}

.quest-learning__quest-title span {
  max-width: calc(100% - 3rem);
  overflow-wrap: anywhere;
}

.quest-learning__paper {
  position: relative;
  display: grid;
  min-height: 0;
  width: 100%;
  flex: 1 1 auto;
  padding: clamp(3.4rem, 13.5vw, 5.2rem) clamp(1.1rem, 5.2vw, 2rem)
      clamp(0.55rem, 2.5vw, 1rem);
  background-image: var(--quest-learning-paper);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 6px 8px rgba(105, 77, 45, 0.14));
}

.quest-learning__ribbon {
  position: absolute;
  top: 1.9%;
  left: 0.1%;
  z-index: 20;
  width: clamp(4rem, 20vw, 5.6rem);
  height: clamp(2rem, 9vw, 2.8rem);
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--quest-learning-theme) 84%, #fff) 0%,
      var(--quest-learning-theme) 60%,
      color-mix(in srgb, var(--quest-learning-theme) 80%, #273a2e) 100%
    );
  clip-path: polygon(0 0, 100% 0, 84% 50%, 100% 100%, 0 100%);
  filter: drop-shadow(0 3px 3px rgba(71, 58, 42, 0.2));
}

.quest-learning__ribbon::before {
  content: "";
  position: absolute;
  inset: 2px 15% auto 2px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.42);
}

.quest-learning__mask-control {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}

.quest-learning__text-wrapper {
  min-height: 0;
  flex: 1 1 auto;
  border: 0;
  border-radius: 0.65rem;
  background-color: transparent;
}

.quest-learning__text-body {
  height: 100%;
  max-height: none;
  padding: 0.15rem 1.5rem 0.35rem 0.15rem;
  color: var(--quest-learning-ink);
  font-size: clamp(0.98rem, 4.2vw, 1.12rem);
  font-weight: 400;
  line-height: 1.85;
  scrollbar-width: none;
}

.quest-learning__text-body p {
  margin-bottom: 0.85rem;
}

.quest-learning__text-body::-webkit-scrollbar {
  display: none;
}

.quest-learning__text-mask {
  border-radius: 0.65rem;
}

.quest-learning__scrollbar {
  position: absolute;
  top: 0.3rem;
  right: 0.18rem;
  bottom: 0.3rem;
  z-index: 20;
  width: 0.42rem;
  border-radius: 9999px;
  background-color: color-mix(
      in srgb,
      var(--quest-learning-theme) 16%,
      rgba(126, 105, 84, 0.12)
    );
  box-shadow: inset 0 0 0 1px rgba(119, 93, 65, 0.08);
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.quest-learning__scrollbar.is-hidden {
  opacity: 0;
}

.quest-learning__scrollbar-thumb {
  display: block;
  width: 100%;
  min-height: 1.75rem;
  border-radius: inherit;
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--quest-learning-theme) 60%, #fff) 0%,
      color-mix(in srgb, var(--quest-learning-theme) 76%, #665849) 100%
    );
  box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.48),
      0 1px 3px rgba(82, 65, 48, 0.2);
  transform: translateY(0);
  will-change: height, transform;
}

.quest-learning__toggle-row {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-top: 0.65rem;
}

.quest-learning__toggle {
  min-height: 2.15rem;
  gap: 0.4rem;
  border: 1px solid
      color-mix(in srgb, var(--quest-learning-paper-edge) 78%, #fff);
  border-radius: 0.75rem;
  background-color: rgba(255, 252, 245, 0.76);
  padding: 0.35rem 0.65rem;
  color: #746457;
  font-size: 0.78rem;
  box-shadow:
      0 2px 5px rgba(105, 77, 45, 0.09),
      inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.quest-learning__toggle-icon {
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
  fill: currentColor;
  color: color-mix(in srgb, var(--quest-learning-theme) 78%, #54483f);
  filter: drop-shadow(0 1px 1px rgba(83, 68, 54, 0.12));
}

.quest-learning__toggle-icon--right {
  display: none;
}

.quest-learning__toggle.is-learning .quest-learning__toggle-icon--left {
  display: none;
}

.quest-learning__toggle.is-learning .quest-learning__toggle-icon--right {
  display: block;
}

.quest-learning__toggle:focus-visible,
  .quest-learning__action:focus-visible {
  outline: 3px solid
      color-mix(in srgb, var(--quest-learning-theme) 38%, transparent);
  outline-offset: 3px;
}

.quest-learning__actions {
  display: grid;
  flex: 0 0 auto;
  gap: 0.6rem;
  width: calc(100% - 1rem);
  margin: 0.55rem auto 0;
}

.quest-learning__action {
  position: relative;
  min-height: 3rem;
  width: 100%;
  padding-inline: 2.8rem;
  font-size: clamp(0.88rem, 3.8vw, 1rem);
  line-height: 1.35;
}

.quest-learning__action-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  fill: currentColor;
  opacity: 0.82;
  filter: drop-shadow(0 1px 1px rgba(94, 68, 20, 0.12));
}

/* チャレンジ（ボスクエスト）：ボス専用のまなびの書 */

.quest-learning--boss {
  --quest-boss-purple: #6f4e91;
  --quest-boss-purple-deep: #4d316e;
  --quest-boss-purple-light: #9b7ab9;
  padding-top: calc(env(safe-area-inset-top) + 1.8rem);
  padding-bottom: calc(env(safe-area-inset-bottom) + 3rem);
}

.quest-learning--boss .quest-learning__header {
  margin-bottom: 1.5rem;
}

.quest-learning--boss .quest-learning__heading {
  color: #4a3858;
}

.quest-learning--boss .quest-learning__quest-title {
  gap: 0.25rem;
  font-size: clamp(0.84rem, 3.6vw, 1rem);
}

.quest-learning--boss .quest-learning__quest-title::before,
  .quest-learning--boss .quest-learning__quest-title::after {
  flex-basis: 0.5rem;
  min-width: 0.25rem;
}

.quest-learning--boss .quest-learning__quest-title span {
  max-width: calc(100% - 1rem);
  white-space: nowrap;
}

.quest-boss-sheet {
  position: relative;
  display: flex;
  min-height: 0;
  width: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(111, 78, 145, 0.2);
  border-radius: clamp(1.35rem, 6vw, 2rem);
  background-color: #fbf7f4;
  background-image:
      linear-gradient(
        180deg,
        rgba(255, 252, 248, 0.06) 0%,
        rgba(255, 249, 245, 0.02) 58%,
        rgba(255, 251, 247, 0.36) 100%
      ),
      var(--quest-boss-background);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  box-shadow:
      0 8px 20px rgba(73, 48, 94, 0.12),
      inset 0 0 0 1px rgba(255, 255, 255, 0.58);
}

.quest-boss-sheet__ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 10;
  display: flex;
  width: min(86%, 31rem);
  min-height: clamp(2.75rem, 11vw, 3.4rem);
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.55rem 2.2rem 0.7rem;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--quest-boss-purple-light) 82%, #fff) 0%,
      var(--quest-boss-purple) 34%,
      var(--quest-boss-purple-deep) 100%
    );
  color: #fffaf5;
  font-size: clamp(1rem, 4.6vw, 1.28rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(42, 24, 58, 0.48);
  filter: drop-shadow(0 4px 4px rgba(55, 34, 73, 0.22));
}

.quest-boss-sheet__ribbon::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: 0.32rem;
  left: 8%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.22);
}

.quest-boss-sheet__ribbon-icon {
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  color: currentColor;
  filter: drop-shadow(0 1px 2px rgba(42, 24, 58, 0.32));
}

.quest-boss-sheet__content {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  padding: clamp(5.8rem, 22vw, 7rem) clamp(0.8rem, 4.4vw, 1.6rem)
      clamp(1.2rem, 5vw, 1.8rem);
}

.quest-boss-sheet__identity {
  flex: 0 0 auto;
  margin-top: clamp(0.75rem, 3.5vw, 1rem);
  text-align: center;
}

.quest-boss-sheet__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  color: var(--quest-boss-purple);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.76rem, 3.4vw, 0.94rem);
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.4;
}

.quest-boss-sheet__eyebrow [aria-hidden="true"] {
  font-size: 0.56em;
  opacity: 0.72;
}

.quest-boss-sheet__stage-title {
  margin-top: clamp(0.55rem, 2.8vw, 0.9rem);
  color: #3e312c;
  font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.5rem, 7vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-indent: 0.12em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76);
  overflow-wrap: anywhere;
}

.quest-boss-sheet__stage-title--medium {
  font-size: clamp(1.35rem, 6.2vw, 1.75rem);
  letter-spacing: 0.09em;
}

.quest-boss-sheet__stage-title--long {
  font-size: clamp(1.15rem, 5.4vw, 1.5rem);
  letter-spacing: 0.07em;
}

.quest-boss-sheet__divider {
  display: block;
  width: min(7.5rem, 36%);
  height: 1px;
  margin: clamp(0.65rem, 3vw, 1rem) auto 0;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(111, 78, 145, 0.38) 42%,
      rgba(111, 78, 145, 0.58) 50%,
      rgba(111, 78, 145, 0.38) 58%,
      transparent
    );
}

.quest-boss-sheet__description {
  display: flex;
  min-height: clamp(4.5rem, 10vh, 5.5rem);
  max-height: clamp(5.25rem, 12vh, 6.5rem);
  width: min(96%, 31rem);
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin: auto auto 0;
  overflow-y: auto;
  border: 1px solid rgba(111, 78, 145, 0.13);
  border-radius: 1.15rem;
  background-color: rgba(255, 252, 249, 0.1);
  padding: clamp(0.65rem, 3.2vw, 1rem) clamp(0.65rem, 3vw, 1rem);
  color: #4e4540;
  box-shadow:
      0 3px 10px rgba(74, 48, 94, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.68);
  transform: translateY(-1.5rem);
  backdrop-filter: blur(2px);
  scrollbar-color: rgba(111, 78, 145, 0.3) transparent;
  scrollbar-width: thin;
}

.quest-boss-sheet__description-text {
  margin: 0;
  font-size: clamp(0.8rem, 3.6vw, 0.96rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.75;
  text-align: center;
  overflow-wrap: anywhere;
}

.quest-boss-sheet__description-text + .quest-boss-sheet__description-text {
  margin-top: 0.45rem;
}

.quest-boss-sheet__actions {
  display: grid;
  flex: 0 0 auto;
  gap: 1rem;
  width: min(92%, 29rem);
  margin: clamp(1.1rem, 4vw, 1.5rem) auto 0;
}

.quest-boss-sheet__action {
  display: inline-flex;
  min-height: 3rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: 1rem;
  padding: 0.65rem 2rem;
  font-size: clamp(0.86rem, 3.8vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.quest-boss-sheet__action--primary {
  border: 1px solid rgba(80, 50, 108, 0.45);
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--quest-boss-purple-light) 74%, #fff) 0%,
      var(--quest-boss-purple) 48%,
      var(--quest-boss-purple-deep) 100%
    );
  color: #fff;
  box-shadow:
      0 5px 12px rgba(72, 44, 96, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.32);
  text-shadow: 0 1px 1px rgba(48, 28, 65, 0.3);
}

.quest-boss-sheet__action--primary:active {
  transform: translateY(1px);
  box-shadow:
      0 3px 8px rgba(72, 44, 96, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.quest-boss-sheet__action--secondary {
  border-color: rgba(111, 78, 145, 0.16);
  background-color: rgba(255, 252, 248, 0.72);
  /* color: #594d47; */
}

.quest-boss-sheet__action-icon {
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
  color: currentColor;
}

.quest-boss-sheet__action:focus-visible {
  outline: 3px solid rgba(111, 78, 145, 0.3);
  outline-offset: 3px;
}

@media (max-height: 700px) {
  .quest-learning--boss {
    padding-top: calc(env(safe-area-inset-top) + 1rem);
    padding-bottom: calc(env(safe-area-inset-bottom) + 1.2rem);
  }

  .quest-learning--boss .quest-learning__header {
    margin-bottom: 0.5rem;
  }

  .quest-boss-sheet__content {
    padding-top: 4.35rem;
    padding-bottom: 0.8rem;
  }

  .quest-boss-sheet__ribbon {
    min-height: 2.6rem;
  }

  .quest-boss-sheet__identity {
    margin-top: 0.5rem;
  }

  .quest-boss-sheet__stage-title {
    margin-top: 0.35rem;
    font-size: clamp(1.25rem, 6vw, 1.6rem);
  }

  .quest-boss-sheet__stage-title--medium {
    font-size: clamp(1.15rem, 5.5vw, 1.45rem);
  }

  .quest-boss-sheet__stage-title--long {
    font-size: clamp(1rem, 4.8vw, 1.25rem);
  }

  .quest-boss-sheet__divider {
    margin-top: 0.45rem;
  }

  .quest-boss-sheet__description {
    min-height: 3.75rem;
    max-height: 4.5rem;
    margin-top: auto;
    padding-block: 0.5rem;
  }

  .quest-boss-sheet__description-text {
    font-size: clamp(0.75rem, 3.3vw, 0.88rem);
    line-height: 1.55;
  }

  .quest-boss-sheet__actions {
    gap: 0.75rem;
    margin-top: 0.85rem;
  }

  .quest-boss-sheet__action {
    min-height: 2.65rem;
    padding-block: 0.5rem;
  }
}

/* クエスト離脱確認：フラッシュメッセージと同じ古紙パネル */

.quest-learning__confirm {
  position: relative;
  display: flex;
  min-height: 15rem;
  width: 100%;
  max-width: 28rem;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 3.2rem 2rem 2.7rem;
  background-image: var(--quest-confirm-paper);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.28));
}

.quest-learning__confirm-message {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  color: #4d433b;
  text-align: left;
}

.quest-learning__confirm-icon {
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  fill: #b8883c;
  filter: drop-shadow(0 2px 3px rgba(126, 88, 35, 0.14));
}

.quest-learning__confirm-title {
  font-size: clamp(1rem, 4.2vw, 1.12rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.quest-learning__confirm-description {
  margin-top: 0.35rem;
  color: #786b61;
  font-size: clamp(0.76rem, 3.3vw, 0.88rem);
  font-weight: 500;
  line-height: 1.65;
}

.quest-learning__confirm-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.quest-learning__confirm-actions form {
  width: 100%;
}

.quest-learning__confirm-button {
  display: inline-flex;
  min-height: 2.75rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: 1rem;
  padding-inline: 0.65rem;
  font-size: 0.82rem;
}

.quest-learning__confirm-button-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  fill: currentColor;
}

/* クエスト回答結果：連続記録更新の自動遷移モーダル */

.quest-result-streak {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: calc(env(safe-area-inset-top) + 0.5rem) 0.5rem
      calc(env(safe-area-inset-bottom) + clamp(3.5rem, 8svh, 5.5rem));
  background:
      radial-gradient(
        circle at 50% 48%,
        rgba(255, 252, 239, 0.92) 0 22%,
        rgba(244, 239, 225, 0.66) 54%,
        transparent 78%
      ),
      #f4f1ea;
}

.quest-result-streak__frame {
  position: relative;
  width: min(96vw, 31.5rem);
  aspect-ratio: 45 / 64;
  background-image: var(--streak-update-frame);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 1rem 1.35rem rgba(82, 67, 43, 0.16));
  animation: quest-result-streak-enter 520ms cubic-bezier(0.2, 0.78, 0.28, 1)
      both;
}

.quest-result-streak__content {
  position: absolute;
  inset: 23.5% 5.5% 6.5%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  align-items: center;
  gap: clamp(0.4rem, 2vw, 0.85rem);
  color: #504c43;
  text-align: center;
}

.quest-result-streak__heading {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 3.8vw, 1.15rem);
}

.quest-result-streak__title {
  margin: 0;
  color: #52633c;
  font-size: clamp(1.35rem, 7vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-indent: 0.12em;
  text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.92),
      0 3px 8px rgba(71, 83, 47, 0.12);
  white-space: nowrap;
}

.quest-result-streak__heading-icon {
  flex: 0 0 auto;
  width: clamp(1.2rem, 5.8vw, 1.8rem);
  height: clamp(1.2rem, 5.8vw, 1.8rem);
  color: #5f9268;
  filter: drop-shadow(0 2px 2px rgba(102, 113, 61, 0.12));
  transform-origin: 50% 82%;
}

.quest-result-streak__heading-icon--left {
  transform: rotate(-18deg) scaleX(-1);
}

.quest-result-streak__heading-icon--right {
  transform: rotate(18deg);
}

.quest-result-streak__record {
  align-self: center;
  width: 100%;
}

.quest-result-streak__label {
  margin: 0;
  color: #675f54;
  font-size: clamp(0.98rem, 4.45vw, 1.28rem);
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-indent: 0.09em;
}

.quest-result-streak__count-row {
  display: grid;
  width: min(100%, 23rem);
  grid-template-columns: minmax(2.35rem, 1fr) auto minmax(2.35rem, 1fr);
  align-items: center;
  margin: clamp(0.15rem, 1vw, 0.45rem) auto 0;
}

.quest-result-streak__count {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  margin: 0;
  color: #91a65b;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow:
      0 2px 0 rgba(255, 255, 255, 0.88),
      0 5px 12px rgba(115, 135, 66, 0.15);
}

.quest-result-streak__sparkle {
  display: inline-block;
  color: #e8c85c;
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(181, 139, 30, 0.16));
  animation: quest-result-streak-sparkle 1.2s ease-in-out infinite alternate;
}

.quest-result-streak__sparkle--left {
  align-self: end;
  justify-self: end;
  margin: 0 0.12rem clamp(0.6rem, 3vw, 1rem) 0;
  font-size: clamp(1.08rem, 5.4vw, 1.68rem);
}

.quest-result-streak__sparkles-right {
  position: relative;
  align-self: stretch;
  min-width: 2.5rem;
}

.quest-result-streak__sparkle--right-large,
  .quest-result-streak__sparkle--right-small {
  position: absolute;
}

.quest-result-streak__sparkle--right-large {
  top: 10%;
  left: 0.15rem;
  font-size: clamp(1.03rem, 5.1vw, 1.58rem);
  animation-delay: 180ms;
}

.quest-result-streak__sparkle--right-small {
  top: 50%;
  left: clamp(1.3rem, 5.5vw, 1.8rem);
  font-size: clamp(0.64rem, 2.95vw, 0.94rem);
  animation-delay: 360ms;
}

.quest-result-streak__count-number {
  font-size: clamp(4.4rem, 22vw, 7.25rem);
  font-weight: 800;
  letter-spacing: -0.055em;
}

.quest-result-streak__count-unit {
  margin-left: 0.18em;
  font-size: clamp(2.2rem, 11vw, 3.7rem);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.quest-result-streak__message {
  display: flex;
  width: min(100%, 26.5rem);
  aspect-ratio: 76 / 25;
  align-items: center;
  justify-content: center;
  background-image: var(--streak-message-frame);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 5% 12.5% 5% 8.5%;
  filter: drop-shadow(0 0.45rem 0.65rem rgba(83, 70, 48, 0.07));
  transform: translateY(clamp(-1.1rem, -2.8vw, -0.55rem));
}

.quest-result-streak__message-text {
  width: 100%;
  margin: 0;
  color: #6a6a6a;
  font-size: clamp(0.75rem, 3.7vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1.75;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88);
}

@keyframes quest-result-streak-enter {
  from {
    opacity: 0;
    transform: translateY(0.7rem) scale(0.965);
  }

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

@keyframes quest-result-streak-sparkle {
  from {
    opacity: 0.55;
    transform: scale(0.82) rotate(-5deg);
  }

  to {
    opacity: 1;
    transform: scale(1.08) rotate(5deg);
  }
}

/* クエスト回答結果：連続記録ボーナスの自動遷移モーダル */

.quest-result-streak-bonus {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: calc(env(safe-area-inset-top) + 0.5rem) 0.4rem
      calc(env(safe-area-inset-bottom) + clamp(5rem, 12svh, 7rem));
  background:
      radial-gradient(
        circle at 50% 48%,
        rgba(255, 253, 241, 0.94) 0 24%,
        rgba(242, 239, 222, 0.68) 56%,
        transparent 80%
      ),
      #f4f1ea;
}

.quest-result-streak-bonus__frame {
  position: relative;
  width: min(96vw, 32rem);
  aspect-ratio: 9 / 10;
  background-image: var(--streak-bonus-frame);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 1rem 1.35rem rgba(82, 67, 43, 0.16));
  animation: quest-result-streak-enter 520ms cubic-bezier(0.2, 0.78, 0.28, 1)
      both;
}

.quest-result-streak-bonus__copy {
  position: absolute;
  top: 39.3%;
  right: 7%;
  left: 7%;
  text-align: center;
}

.quest-result-streak-bonus__note {
  margin: 0;
  color: #6a6a6a;
  font-size: clamp(0.78rem, 3.7vw, 1.08rem);
  font-weight: 600;
  letter-spacing: 0.055em;
  line-height: 1.5;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.quest-result-streak-bonus__title {
  margin: clamp(0.75rem, 2.8vw, 0.85rem) 0 0;
  color: #5f874c;
  font-size: clamp(1.45rem, 7vw, 2.25rem);
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.25;
  text-indent: 0.07em;
  text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.94),
      0 0.25rem 0.6rem rgba(92, 123, 67, 0.14);
  white-space: nowrap;
}

.quest-result-streak-bonus__points {
  position: absolute;
  top: 68.5%;
  right: 7%;
  left: 7%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 0;
  color: #91a65b;
  font-variant-numeric: tabular-nums;
  line-height: 0.92;
  text-shadow:
      0 2px 0 rgba(255, 255, 255, 0.9),
      0 0.4rem 0.9rem rgba(105, 133, 65, 0.17);
  animation: quest-result-streak-bonus-points-enter 620ms
      cubic-bezier(0.2, 0.78, 0.28, 1) 150ms both;
}

.quest-result-streak-bonus__plus {
  align-self: center;
  margin-right: 0.08em;
  font-size: clamp(2.4rem, 12vw, 4rem);
  font-weight: 700;
}

.quest-result-streak-bonus__number {
  font-size: clamp(4rem, 20vw, 6.6rem);
  font-weight: 800;
  letter-spacing: -0.055em;
}

.quest-result-streak-bonus__unit {
  margin-left: 0.12em;
  font-size: clamp(1.85rem, 9vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.quest-result-streak-bonus__points--compact .quest-result-streak-bonus__plus {
  font-size: clamp(1.9rem, 9.5vw, 3.1rem);
}

.quest-result-streak-bonus__points--compact
    .quest-result-streak-bonus__number {
  font-size: clamp(3rem, 15vw, 5rem);
}

.quest-result-streak-bonus__points--compact .quest-result-streak-bonus__unit {
  font-size: clamp(1.5rem, 7.3vw, 2.4rem);
}

@keyframes quest-result-streak-bonus-points-enter {
  from {
    opacity: 0;
    transform: translateY(0.35rem) scale(0.94);
  }

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

/* クエスト回答結果：通常クエストクリアの自動遷移モーダル */

.quest-result-clear {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: calc(env(safe-area-inset-top) + 0.5rem) 0.5rem
      calc(env(safe-area-inset-bottom) + clamp(3.5rem, 8svh, 5.5rem));
  background:
      radial-gradient(
        circle at 50% 45%,
        rgba(255, 253, 241, 0.95) 0 24%,
        rgba(239, 238, 218, 0.7) 58%,
        transparent 82%
      ),
      #f4f1ea;
}

.quest-result-clear__frame {
  position: relative;
  width: min(96vw, 32rem);
  aspect-ratio: 3 / 4;
  background-image: var(--quest-clear-frame);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 1rem 1.35rem rgba(82, 67, 43, 0.18));
  animation: quest-result-streak-enter 520ms cubic-bezier(0.2, 0.78, 0.28, 1)
      both;
}

.quest-result-clear__copy {
  position: absolute;
  top: 22.5%;
  right: 7%;
  left: 7%;
  text-align: center;
}

.quest-result-clear__message {
  margin: 0;
  color: #59623f;
  font-size: clamp(2rem, 9.2vw, 3.2rem);
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1.2;
  text-indent: 0.075em;
  text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.94),
      0 0.28rem 0.7rem rgba(81, 94, 54, 0.14);
  transform: translateX(0.16em);
  white-space: nowrap;
}

.quest-result-clear__divider {
  display: grid;
  width: min(78%, 19rem);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(0.35rem, 1.8vw, 0.65rem);
  margin: clamp(0.75rem, 3.2vw, 1.15rem) auto 0;
  color: rgba(145, 143, 105, 0.58);
}

.quest-result-clear__divider > span:not(.quest-result-clear__divider-mark) {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(145, 143, 105, 0.52));
}

.quest-result-clear__divider
    > span:last-child:not(.quest-result-clear__divider-mark) {
  transform: scaleX(-1);
}

.quest-result-clear__divider-mark {
  font-size: clamp(0.55rem, 2.7vw, 0.85rem);
}

.quest-result-clear__encouragement {
  margin: clamp(0.75rem, 3.1vw, 1.1rem) 0 0;
  color: #565248;
  font-size: clamp(0.76rem, 3.65vw, 1.08rem);
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.45;
  text-indent: 0.025em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

.quest-result-clear__count {
  position: absolute;
  top: 48.4%;
  right: 34%;
  left: 34%;
  display: grid;
  height: 6.5%;
  place-items: center;
  margin: 0;
  color: #f5f0d8;
  font-size: clamp(0.9rem, 4.2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-indent: 0.08em;
  text-shadow: 0 1px 2px rgba(55, 64, 35, 0.34);
}

.quest-result-clear__points {
  position: absolute;
  top: 61.8%;
  right: 14%;
  left: 14%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 0;
  color: #7d8c43;
  font-variant-numeric: tabular-nums;
  line-height: 0.92;
  text-shadow:
      0 2px 0 rgba(255, 255, 255, 0.9),
      0 0.4rem 0.9rem rgba(104, 116, 57, 0.18);
  animation: quest-result-streak-bonus-points-enter 620ms
      cubic-bezier(0.2, 0.78, 0.28, 1) 150ms both;
}

.quest-result-clear__plus {
  align-self: center;
  margin-right: 0.08em;
  font-size: clamp(2.2rem, 10.8vw, 3.7rem);
  font-weight: 700;
}

.quest-result-clear__number {
  font-size: clamp(3.8rem, 18.5vw, 6.25rem);
  font-weight: 800;
  letter-spacing: -0.055em;
}

.quest-result-clear__unit {
  margin-left: 0.12em;
  font-size: clamp(1.7rem, 8.3vw, 2.8rem);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.quest-result-clear__points--compact .quest-result-clear__plus {
  font-size: clamp(1.55rem, 7.6vw, 2.6rem);
}

.quest-result-clear__points--compact .quest-result-clear__number {
  font-size: clamp(2.65rem, 13vw, 4.4rem);
}

.quest-result-clear__points--compact .quest-result-clear__unit {
  font-size: clamp(1.25rem, 6.1vw, 2.05rem);
}

/* クエスト回答結果：ボスクエストクリアの自動遷移モーダル */

.quest-result-boss-clear {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: calc(env(safe-area-inset-top) + 0.5rem) 0
      calc(env(safe-area-inset-bottom) + clamp(3.5rem, 8svh, 5.5rem));
  background:
      radial-gradient(
        circle at 50% 44%,
        rgba(251, 246, 255, 0.96) 0 24%,
        rgba(225, 209, 238, 0.72) 58%,
        transparent 82%
      ),
      #eee7f1;
}

.quest-result-boss-clear__frame {
  position: relative;
  width: min(98vw, 33rem);
  aspect-ratio: 197 / 300;
  background-image: var(--boss-quest-clear-frame);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 1rem 1.45rem rgba(69, 43, 91, 0.22));
  animation: quest-result-streak-enter 520ms cubic-bezier(0.2, 0.78, 0.28, 1)
      both;
}

.quest-result-boss-clear__heading {
  position: absolute;
  top: 28.7%;
  right: 6%;
  left: 6%;
  text-align: center;
}

.quest-result-boss-clear__eyebrow {
  margin: 0;
  color: #67408c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 5.5vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1.2;
  text-indent: 0.075em;
  text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.94),
      0 0.25rem 0.65rem rgba(92, 55, 124, 0.15);
  white-space: nowrap;
}

.quest-result-boss-clear__title {
  margin: clamp(-1.7rem, -1.7vw, 0.9rem) 0 0;
  color: #5b2b7e;
  font-size: clamp(1.5rem, 8.25vw, 2.8rem);
  font-weight: 800;
  letter-spacing: 0.045em;
  line-height: 1.8;
  text-indent: 0.045em;
  text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.94),
      0 0.3rem 0.75rem rgba(91, 43, 126, 0.18);
  transform: translateX(0.12em);
  white-space: nowrap;
}

.quest-result-boss-clear__encouragement {
  position: absolute;
  top: 50%;
  right: 9%;
  left: 9%;
  margin: 0;
  color: #4f4657;
  font-size: clamp(1rem, 5.5vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.5;
  text-align: center;
  text-indent: 0.025em;
  text-shadow: 0 3px 0 rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

.quest-result-boss-clear__count {
  position: absolute;
  top: 61.2%;
  right: 36%;
  left: 36%;
  display: grid;
  height: 6%;
  place-items: center;
  margin: 0;
  color: #493956;
  font-size: clamp(1rem, 3.8vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1;
  text-indent: 0.075em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

.quest-result-boss-clear__points {
  position: absolute;
  top: 71.5%;
  right: 15%;
  left: 15%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 0;
  color: #704293;
  font-variant-numeric: tabular-nums;
  line-height: 0.92;
  text-shadow:
      0 2px 0 rgba(255, 255, 255, 0.9),
      0 0.45rem 1rem rgba(93, 51, 126, 0.2);
  animation: quest-result-streak-bonus-points-enter 620ms
      cubic-bezier(0.2, 0.78, 0.28, 1) 150ms both;
}

.quest-result-boss-clear__plus {
  align-self: center;
  margin-right: 0.08em;
  font-size: clamp(2.2rem, 10.8vw, 3.7rem);
  font-weight: 700;
}

.quest-result-boss-clear__number {
  font-size: clamp(3.8rem, 18.5vw, 6.25rem);
  font-weight: 800;
  letter-spacing: -0.055em;
}

.quest-result-boss-clear__unit {
  margin-left: 0.12em;
  font-size: clamp(1.7rem, 8.3vw, 2.8rem);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.quest-result-boss-clear__points--compact .quest-result-boss-clear__plus {
  font-size: clamp(1.55rem, 7.6vw, 2.6rem);
}

.quest-result-boss-clear__points--compact .quest-result-boss-clear__number {
  font-size: clamp(2.65rem, 13vw, 4.4rem);
}

.quest-result-boss-clear__points--compact .quest-result-boss-clear__unit {
  font-size: clamp(1.25rem, 6.1vw, 2.05rem);
}

/* クエスト回答結果：ノットクリアの自動遷移モーダル */

.quest-result-not-clear {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: calc(env(safe-area-inset-top) + 0.5rem) 0.5rem
      calc(env(safe-area-inset-bottom) + clamp(3.5rem, 8svh, 5.5rem));
  background:
      radial-gradient(
        circle at 50% 48%,
        rgba(251, 249, 241, 0.96) 0 25%,
        rgba(228, 226, 211, 0.7) 58%,
        transparent 82%
      ),
      #efede6;
}

.quest-result-not-clear__frame {
  position: relative;
  width: min(94vw, 36rem);
  aspect-ratio: 5 / 4;
  margin-bottom: clamp(8rem, 20svh, 16rem);
  background-image: var(--quest-not-clear-frame);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 1rem 1.35rem rgba(84, 78, 59, 0.18));
  animation: quest-result-streak-enter 520ms cubic-bezier(0.2, 0.78, 0.28, 1)
      both;
}

.quest-result-not-clear__title {
  position: absolute;
  top: 34.5%;
  right: 14%;
  left: 14%;
  margin: 0;
  color: #5c5545;
  font-size: clamp(1.85rem, 8.6vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-align: center;
  text-indent: 0.11em;
  text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.94),
      0 0.28rem 0.7rem rgba(91, 83, 61, 0.13);
  white-space: nowrap;
}

.quest-result-not-clear__message {
  position: absolute;
  top: 61%;
  right: 8%;
  left: 8%;
  margin: 0;
  color: #5e5b52;
  font-size: clamp(0.9rem, 4vw, 1.12rem);
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.5;
  text-align: center;
  text-indent: 0.025em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

.quest-result-not-clear__retry {
  position: absolute;
  top: 76.5%;
  right: 10%;
  left: 10%;
  margin: 0;
  color: #747b50;
  font-size: clamp(0.94rem, 4.45vw, 1.38rem);
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.4;
  text-align: center;
  text-indent: 0.055em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

/* クエスト回答結果：キャラ解放の自動遷移モーダル */

.quest-result-character-unlock {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: calc(env(safe-area-inset-top) + 0.5rem) 0
      calc(env(safe-area-inset-bottom) + clamp(3rem, 7svh, 5rem));
  background:
      radial-gradient(
        circle at 50% 46%,
        rgba(255, 253, 241, 0.96) 0 24%,
        rgba(235, 239, 216, 0.72) 58%,
        transparent 82%
      ),
      #f2efe7;
}

.quest-result-character-unlock__frame {
  position: relative;
  width: min(97vw, 32rem);
  aspect-ratio: 125 / 207;
  background-image: var(--character-unlock-frame);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 108% 100%;
  filter: drop-shadow(0 1rem 1.4rem rgba(82, 74, 45, 0.18));
  animation: quest-result-streak-enter 520ms cubic-bezier(0.2, 0.78, 0.28, 1)
      both;
}

.quest-result-character-unlock__title {
  position: absolute;
  top: 16.5%;
  right: 8%;
  left: 10%;
  margin: 0;
  color: #4d6639;
  font-size: clamp(1.2rem, 6vw, 2.65rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-indent: 0.08em;
  text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.94),
      0 0.3rem 0.75rem rgba(86, 105, 58, 0.15);
  white-space: nowrap;
}

.quest-result-character-unlock__card {
  position: absolute;
  top: 24%;
  right: 12%;
  bottom: 9.5%;
  left: 12%;
  display: flex;
  align-items: center;
  isolation: isolate;
  justify-content: center;
}

.quest-result-character-unlock__card::before,
  .quest-result-character-unlock__card::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.quest-result-character-unlock__card::before {
  inset: -9% -16%;
  border-radius: 18%;
  background: radial-gradient(
      ellipse at center,
      rgba(255, 255, 245, 1) 0 32%,
      rgba(255, 235, 139, 0.88) 47%,
      rgba(238, 204, 77, 0.46) 64%,
      transparent 82%
    );
  filter: blur(clamp(0.35rem, 2vw, 0.65rem));
  animation: quest-result-character-glow-pulse 1800ms ease-in-out infinite
      alternate;
}

.quest-result-character-unlock__card::after {
  inset: -13% -23%;
  background: repeating-conic-gradient(
      from -5deg at 50% 50%,
      rgba(255, 236, 135, 0.6) 0deg 4deg,
      transparent 4deg 13deg
    );
  -webkit-mask-image: radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.92) 0 58%,
      rgba(0, 0, 0, 0.45) 70%,
      transparent 84%
    );
  mask-image: radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.92) 0 58%,
      rgba(0, 0, 0, 0.45) 70%,
      transparent 84%
    );
  opacity: 0.64;
  filter: blur(0.12rem);
  animation: quest-result-character-rays 2600ms ease-in-out infinite alternate;
}

.quest-result-character-unlock__image,
  .quest-result-character-unlock__placeholder {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  max-width: 100%;
  border: 1px solid rgba(132, 151, 86, 0.48);
  border-radius: clamp(0.7rem, 3vw, 1rem);
  background-color: rgba(255, 253, 244, 0.82);
  box-shadow:
      0 0.65rem 1.15rem rgba(73, 84, 46, 0.18),
      0 0 0 0.25rem rgba(255, 253, 240, 0.72),
      0 0 1.25rem 0.25rem rgba(255, 224, 104, 0.58),
      0 0 2.5rem 0.65rem rgba(255, 237, 162, 0.32);
}

.quest-result-character-unlock__image {
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.quest-result-character-unlock__placeholder {
  display: grid;
  width: min(68%, 13rem);
  aspect-ratio: 2 / 3;
  place-items: center;
  color: #aaa696;
  font-size: clamp(0.78rem, 3.5vw, 1rem);
  font-weight: 700;
}

.quest-result-character-unlock__badge {
  position: absolute;
  top: -6%;
  left: -8%;
  z-index: 2;
  width: clamp(4.6rem, 22vw, 7rem);
  height: auto;
  filter: drop-shadow(0 0.35rem 0.45rem rgba(117, 79, 15, 0.23));
  animation: quest-result-character-badge-enter 620ms
      cubic-bezier(0.2, 0.78, 0.28, 1) 180ms both;
}

@keyframes quest-result-character-badge-enter {
  from {
    opacity: 0;
    transform: rotate(-10deg) scale(0.72);
  }

  to {
    opacity: 1;
    transform: rotate(-5deg) scale(1);
  }
}

@keyframes quest-result-character-glow-pulse {
  from {
    opacity: 0.86;
    transform: scale(0.97);
  }

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

@keyframes quest-result-character-rays {
  from {
    opacity: 0.52;
    transform: rotate(-1.5deg) scale(0.98);
  }

  to {
    opacity: 0.72;
    transform: rotate(1.5deg) scale(1.02);
  }
}

/* クエスト回答結果：全ワールドクリア動画 */

.quest-result-all-complete {
  --all-complete-fade-duration: 1600ms;
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  background-color: #000;
  opacity: 1;
  touch-action: none;
  transition: opacity var(--all-complete-fade-duration) ease-out;
}

.quest-result-all-complete.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.quest-result-all-complete__video {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  pointer-events: none;
}

@media (max-height: 620px) {
  .quest-result-streak__frame {
    width: min(84vw, calc(92svh * 45 / 64));
  }

  .quest-result-streak-bonus__frame {
    width: min(90vw, calc(90svh * 9 / 10));
  }

  .quest-result-clear__frame {
    width: min(82vw, calc(90svh * 3 / 4));
  }

  .quest-result-boss-clear__frame {
    width: min(94vw, calc(90svh * 197 / 300));
  }

  .quest-result-not-clear__frame {
    width: min(90vw, calc(82svh * 5 / 4));
  }

  .quest-result-character-unlock__frame {
    width: min(100vw, calc(90svh * 125 / 207));
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-map__link,
    .quest-list__link,
    .quest-learning__action,
    .quest-learning__text-mask,
    .quest-learning__text-body .text-red-500,
    .quest-result-streak__frame,
    .quest-result-streak__sparkle,
    .quest-result-streak-bonus__frame,
    .quest-result-streak-bonus__points,
    .quest-result-clear__frame,
    .quest-result-clear__points,
    .quest-result-boss-clear__frame,
    .quest-result-boss-clear__points,
    .quest-result-not-clear__frame,
    .quest-result-character-unlock__frame,
    .quest-result-character-unlock__card::before,
    .quest-result-character-unlock__card::after,
    .quest-result-character-unlock__badge,
    .quest-result-all-complete {
    animation: none;
    transition: none;
  }
}

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none{
  pointer-events: none;
}

.pointer-events-auto{
  pointer-events: auto;
}

.visible{
  visibility: visible;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.inset-0{
  inset: 0px;
}

.inset-1{
  inset: 0.25rem;
}

.inset-\[12px\]{
  inset: 12px;
}

.inset-\[13\%\]{
  inset: 13%;
}

.inset-\[2\.5\%\]{
  inset: 2.5%;
}

.inset-\[5\%\]{
  inset: 5%;
}

.-inset-x-2{
  left: -0.5rem;
  right: -0.5rem;
}

.inset-x-0{
  left: 0px;
  right: 0px;
}

.inset-y-0{
  top: 0px;
  bottom: 0px;
}

.-bottom-10{
  bottom: -2.5rem;
}

.-left-0{
  left: -0px;
}

.-right-1{
  right: -0.25rem;
}

.-right-10{
  right: -2.5rem;
}

.-right-14{
  right: -3.5rem;
}

.-right-3{
  right: -0.75rem;
}

.-right-8{
  right: -2rem;
}

.-top-1{
  top: -0.25rem;
}

.-top-10{
  top: -2.5rem;
}

.-top-2{
  top: -0.5rem;
}

.-top-3{
  top: -0.75rem;
}

.-top-8{
  top: -2rem;
}

.bottom-0{
  bottom: 0px;
}

.bottom-0\.5{
  bottom: 0.125rem;
}

.bottom-1{
  bottom: 0.25rem;
}

.bottom-5{
  bottom: 1.25rem;
}

.bottom-\[1\%\]{
  bottom: 1%;
}

.bottom-\[12\%\]{
  bottom: 12%;
}

.bottom-\[14\%\]{
  bottom: 14%;
}

.bottom-\[8\%\]{
  bottom: 8%;
}

.bottom-\[calc\(env\(safe-area-inset-bottom\)\+0\.45rem\)\]{
  bottom: calc(env(safe-area-inset-bottom) + 0.45rem);
}

.bottom-\[calc\(env\(safe-area-inset-bottom\)\+6rem\)\]{
  bottom: calc(env(safe-area-inset-bottom) + 6rem);
}

.left-0{
  left: 0px;
}

.left-0\.5{
  left: 0.125rem;
}

.left-1{
  left: 0.25rem;
}

.left-1\/2{
  left: 50%;
}

.left-10{
  left: 2.5rem;
}

.left-3{
  left: 0.75rem;
}

.left-4{
  left: 1rem;
}

.left-\[4\%\]{
  left: 4%;
}

.left-\[52\%\]{
  left: 52%;
}

.right-0{
  right: 0px;
}

.right-2{
  right: 0.5rem;
}

.right-3{
  right: 0.75rem;
}

.right-\[12\%\]{
  right: 12%;
}

.right-\[7\%\]{
  right: 7%;
}

.top-0{
  top: 0px;
}

.top-0\.5{
  top: 0.125rem;
}

.top-1{
  top: 0.25rem;
}

.top-1\/2{
  top: 50%;
}

.top-2{
  top: 0.5rem;
}

.top-3{
  top: 0.75rem;
}

.top-\[11\%\]{
  top: 11%;
}

.top-\[20\%\]{
  top: 20%;
}

.top-full{
  top: 100%;
}

.isolate{
  isolation: isolate;
}

.-z-10{
  z-index: -10;
}

.z-0{
  z-index: 0;
}

.z-10{
  z-index: 10;
}

.z-20{
  z-index: 20;
}

.z-30{
  z-index: 30;
}

.z-50{
  z-index: 50;
}

.z-\[100000\]{
  z-index: 100000;
}

.z-\[100005\]{
  z-index: 100005;
}

.z-\[100010\]{
  z-index: 100010;
}

.z-\[60\]{
  z-index: 60;
}

.z-\[70\]{
  z-index: 70;
}

.z-\[99980\]{
  z-index: 99980;
}

.z-\[99999\]{
  z-index: 99999;
}

.z-\[9999\]{
  z-index: 9999;
}

.col-span-2{
  grid-column: span 2 / span 2;
}

.col-start-1{
  grid-column-start: 1;
}

.col-start-2{
  grid-column-start: 2;
}

.row-span-2{
  grid-row: span 2 / span 2;
}

.row-start-1{
  grid-row-start: 1;
}

.row-start-2{
  grid-row-start: 2;
}

.mx-0\.5{
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.my-3{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-5{
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.-mt-0\.5{
  margin-top: -0.125rem;
}

.-mt-\[45\%\]{
  margin-top: -45%;
}

.-mt-\[8\%\]{
  margin-top: -8%;
}

.mb-0\.5{
  margin-bottom: 0.125rem;
}

.mb-1{
  margin-bottom: 0.25rem;
}

.mb-10{
  margin-bottom: 2.5rem;
}

.mb-12{
  margin-bottom: 3rem;
}

.mb-2{
  margin-bottom: 0.5rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mb-4{
  margin-bottom: 1rem;
}

.mb-5{
  margin-bottom: 1.25rem;
}

.mb-6{
  margin-bottom: 1.5rem;
}

.mb-7{
  margin-bottom: 1.75rem;
}

.mb-8{
  margin-bottom: 2rem;
}

.mb-\[0\.45em\]{
  margin-bottom: 0.45em;
}

.mb-\[0\.65em\]{
  margin-bottom: 0.65em;
}

.mb-\[11\%\]{
  margin-bottom: 11%;
}

.me-1{
  margin-inline-end: 0.25rem;
}

.ml-1{
  margin-left: 0.25rem;
}

.ml-2{
  margin-left: 0.5rem;
}

.ml-\[10\%\]{
  margin-left: 10%;
}

.ml-auto{
  margin-left: auto;
}

.mr-2{
  margin-right: 0.5rem;
}

.mr-\[58px\]{
  margin-right: 58px;
}

.ms-3{
  margin-inline-start: 0.75rem;
}

.mt-0{
  margin-top: 0px;
}

.mt-0\.5{
  margin-top: 0.125rem;
}

.mt-1{
  margin-top: 0.25rem;
}

.mt-10{
  margin-top: 2.5rem;
}

.mt-14{
  margin-top: 3.5rem;
}

.mt-16{
  margin-top: 4rem;
}

.mt-2{
  margin-top: 0.5rem;
}

.mt-24{
  margin-top: 6rem;
}

.mt-3{
  margin-top: 0.75rem;
}

.mt-4{
  margin-top: 1rem;
}

.mt-5{
  margin-top: 1.25rem;
}

.mt-56{
  margin-top: 14rem;
}

.mt-6{
  margin-top: 1.5rem;
}

.mt-7{
  margin-top: 1.75rem;
}

.mt-8{
  margin-top: 2rem;
}

.mt-9{
  margin-top: 2.25rem;
}

.mt-\[1px\]{
  margin-top: 1px;
}

.mt-\[28\%\]{
  margin-top: 28%;
}

.mt-\[30\%\]{
  margin-top: 30%;
}

.mt-\[32\%\]{
  margin-top: 32%;
}

.mt-\[50\%\]{
  margin-top: 50%;
}

.mt-auto{
  margin-top: auto;
}

.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.table{
  display: table;
}

.grid{
  display: grid;
}

.hidden{
  display: none;
}

.aspect-\[117\/50\]{
  aspect-ratio: 117/50;
}

.aspect-\[45\/64\]{
  aspect-ratio: 45/64;
}

.aspect-\[890\/1280\]{
  aspect-ratio: 890/1280;
}

.aspect-\[9\/10\]{
  aspect-ratio: 9/10;
}

.aspect-\[900\/860\]{
  aspect-ratio: 900/860;
}

.aspect-\[900\/980\]{
  aspect-ratio: 900/980;
}

.aspect-square{
  aspect-ratio: 1 / 1;
}

.h-10{
  height: 2.5rem;
}

.h-12{
  height: 3rem;
}

.h-14{
  height: 3.5rem;
}

.h-16{
  height: 4rem;
}

.h-2{
  height: 0.5rem;
}

.h-20{
  height: 5rem;
}

.h-24{
  height: 6rem;
}

.h-28{
  height: 7rem;
}

.h-3{
  height: 0.75rem;
}

.h-3\.5{
  height: 0.875rem;
}

.h-32{
  height: 8rem;
}

.h-4{
  height: 1rem;
}

.h-40{
  height: 10rem;
}

.h-48{
  height: 12rem;
}

.h-5{
  height: 1.25rem;
}

.h-56{
  height: 14rem;
}

.h-6{
  height: 1.5rem;
}

.h-64{
  height: 16rem;
}

.h-7{
  height: 1.75rem;
}

.h-8{
  height: 2rem;
}

.h-9{
  height: 2.25rem;
}

.h-\[104\%\]{
  height: 104%;
}

.h-\[110\%\]{
  height: 110%;
}

.h-\[112\%\]{
  height: 112%;
}

.h-\[124\%\]{
  height: 124%;
}

.h-\[125\%\]{
  height: 125%;
}

.h-\[150\%\]{
  height: 150%;
}

.h-\[4\.5rem\]{
  height: 4.5rem;
}

.h-\[46\%\]{
  height: 46%;
}

.h-\[7\%\]{
  height: 7%;
}

.h-\[78\%\]{
  height: 78%;
}

.h-\[calc\(env\(safe-area-inset-top\)\+3\.6rem\)\]{
  height: calc(env(safe-area-inset-top) + 3.6rem);
}

.h-\[calc\(env\(safe-area-inset-top\)\+4\.35rem\)\]{
  height: calc(env(safe-area-inset-top) + 4.35rem);
}

.h-\[clamp\(3\.1rem\2c 13vw\2c 4rem\)\]{
  height: clamp(3.1rem, 13vw, 4rem);
}

.h-auto{
  height: auto;
}

.h-full{
  height: 100%;
}

.h-px{
  height: 1px;
}

.max-h-\[12\.5rem\]{
  max-height: 12.5rem;
}

.max-h-\[80vh\]{
  max-height: 80vh;
}

.max-h-\[82dvh\]{
  max-height: 82dvh;
}

.min-h-0{
  min-height: 0px;
}

.min-h-11{
  min-height: 2.75rem;
}

.min-h-12{
  min-height: 3rem;
}

.min-h-24{
  min-height: 6rem;
}

.min-h-7{
  min-height: 1.75rem;
}

.min-h-\[100svh\]{
  min-height: 100svh;
}

.min-h-\[150px\]{
  min-height: 150px;
}

.min-h-\[200px\]{
  min-height: 200px;
}

.min-h-\[42px\]{
  min-height: 42px;
}

.min-h-\[44px\]{
  min-height: 44px;
}

.min-h-\[46px\]{
  min-height: 46px;
}

.min-h-\[9rem\]{
  min-height: 9rem;
}

.min-h-screen{
  min-height: 100vh;
}

.w-1\/2{
  width: 50%;
}

.w-10{
  width: 2.5rem;
}

.w-10\/12{
  width: 83.333333%;
}

.w-11\/12{
  width: 91.666667%;
}

.w-12{
  width: 3rem;
}

.w-14{
  width: 3.5rem;
}

.w-16{
  width: 4rem;
}

.w-2\/4{
  width: 50%;
}

.w-20{
  width: 5rem;
}

.w-24{
  width: 6rem;
}

.w-28{
  width: 7rem;
}

.w-3{
  width: 0.75rem;
}

.w-3\.5{
  width: 0.875rem;
}

.w-3\/4{
  width: 75%;
}

.w-3\/5{
  width: 60%;
}

.w-32{
  width: 8rem;
}

.w-36{
  width: 9rem;
}

.w-4{
  width: 1rem;
}

.w-48{
  width: 12rem;
}

.w-5{
  width: 1.25rem;
}

.w-6{
  width: 1.5rem;
}

.w-64{
  width: 16rem;
}

.w-7{
  width: 1.75rem;
}

.w-72{
  width: 18rem;
}

.w-8{
  width: 2rem;
}

.w-8\/12{
  width: 66.666667%;
}

.w-80{
  width: 20rem;
}

.w-9{
  width: 2.25rem;
}

.w-\[100vw\]{
  width: 100vw;
}

.w-\[104\%\]{
  width: 104%;
}

.w-\[110\%\]{
  width: 110%;
}

.w-\[112\%\]{
  width: 112%;
}

.w-\[124\%\]{
  width: 124%;
}

.w-\[150\%\]{
  width: 150%;
}

.w-\[35\%\]{
  width: 35%;
}

.w-\[42\%\]{
  width: 42%;
}

.w-\[46\%\]{
  width: 46%;
}

.w-\[47\%\]{
  width: 47%;
}

.w-\[48\%\]{
  width: 48%;
}

.w-\[55\%\]{
  width: 55%;
}

.w-\[56\%\]{
  width: 56%;
}

.w-\[58\%\]{
  width: 58%;
}

.w-\[62\%\]{
  width: 62%;
}

.w-\[65\%\]{
  width: 65%;
}

.w-\[75\%\]{
  width: 75%;
}

.w-\[78\%\]{
  width: 78%;
}

.w-\[90\%\]{
  width: 90%;
}

.w-\[94\%\]{
  width: 94%;
}

.w-\[calc\(100\%_-_1rem\)\]{
  width: calc(100% - 1rem);
}

.w-\[clamp\(3\.1rem\2c 13vw\2c 4rem\)\]{
  width: clamp(3.1rem, 13vw, 4rem);
}

.w-fit{
  width: -moz-fit-content;
  width: fit-content;
}

.w-full{
  width: 100%;
}

.min-w-0{
  min-width: 0px;
}

.min-w-4{
  min-width: 1rem;
}

.min-w-\[1100px\]{
  min-width: 1100px;
}

.min-w-\[170px\]{
  min-width: 170px;
}

.min-w-\[4\.7rem\]{
  min-width: 4.7rem;
}

.min-w-\[6\.2rem\]{
  min-width: 6.2rem;
}

.max-w-5xl{
  max-width: 64rem;
}

.max-w-\[120px\]{
  max-width: 120px;
}

.max-w-\[1600px\]{
  max-width: 1600px;
}

.max-w-\[220px\]{
  max-width: 220px;
}

.max-w-\[230px\]{
  max-width: 230px;
}

.max-w-\[240px\]{
  max-width: 240px;
}

.max-w-\[250px\]{
  max-width: 250px;
}

.max-w-\[330px\]{
  max-width: 330px;
}

.max-w-\[350px\]{
  max-width: 350px;
}

.max-w-\[38rem\]{
  max-width: 38rem;
}

.max-w-\[390px\]{
  max-width: 390px;
}

.max-w-\[430px\]{
  max-width: 430px;
}

.max-w-\[92\%\]{
  max-width: 92%;
}

.max-w-full{
  max-width: 100%;
}

.max-w-md{
  max-width: 28rem;
}

.max-w-none{
  max-width: none;
}

.max-w-screen-sm{
  max-width: 640px;
}

.max-w-sm{
  max-width: 24rem;
}

.max-w-xs{
  max-width: 20rem;
}

.flex-1{
  flex: 1 1 0%;
}

.flex-shrink-0{
  flex-shrink: 0;
}

.shrink-0{
  flex-shrink: 0;
}

.grow{
  flex-grow: 1;
}

.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-12{
  --tw-translate-y: -3rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-2{
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-4{
  --tw-translate-y: -1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-\[90\%\]{
  --tw-translate-y: -90%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-1\/2{
  --tw-translate-x: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0{
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-1\/2{
  --tw-translate-y: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[2px\]{
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[-18deg\]{
  --tw-rotate: -18deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[-20deg\]{
  --tw-rotate: -20deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-0{
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-100{
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-90{
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-\[1\.03\]{
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-\[1\.28\]{
  --tw-scale-x: 1.28;
  --tw-scale-y: 1.28;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

.cursor-pointer{
  cursor: pointer;
}

.touch-none{
  touch-action: none;
}

.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize-y{
  resize: vertical;
}

.resize{
  resize: both;
}

.scroll-mt-5{
  scroll-margin-top: 1.25rem;
}

.list-inside{
  list-style-position: inside;
}

.list-decimal{
  list-style-type: decimal;
}

.list-disc{
  list-style-type: disc;
}

.list-none{
  list-style-type: none;
}

.appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-7{
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-\[1fr_auto_1fr\]{
  grid-template-columns: 1fr auto 1fr;
}

.grid-cols-\[3\.5rem_minmax\(0\2c 1fr\)\]{
  grid-template-columns: 3.5rem minmax(0,1fr);
}

.grid-cols-\[5\.5rem_minmax\(0\2c 1fr\)\]{
  grid-template-columns: 5.5rem minmax(0,1fr);
}

.grid-rows-\[auto_auto\]{
  grid-template-rows: auto auto;
}

.flex-col{
  flex-direction: column;
}

.flex-wrap{
  flex-wrap: wrap;
}

.place-items-center{
  place-items: center;
}

.items-start{
  align-items: flex-start;
}

.items-end{
  align-items: flex-end;
}

.items-center{
  align-items: center;
}

.items-baseline{
  align-items: baseline;
}

.justify-start{
  justify-content: flex-start;
}

.justify-end{
  justify-content: flex-end;
}

.justify-center{
  justify-content: center;
}

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

.justify-around{
  justify-content: space-around;
}

.gap-0\.5{
  gap: 0.125rem;
}

.gap-1{
  gap: 0.25rem;
}

.gap-1\.5{
  gap: 0.375rem;
}

.gap-2{
  gap: 0.5rem;
}

.gap-2\.5{
  gap: 0.625rem;
}

.gap-3{
  gap: 0.75rem;
}

.gap-4{
  gap: 1rem;
}

.gap-5{
  gap: 1.25rem;
}

.gap-6{
  gap: 1.5rem;
}

.gap-7{
  gap: 1.75rem;
}

.gap-px{
  gap: 1px;
}

.gap-x-3{
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-4{
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-5{
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-y-1{
  row-gap: 0.25rem;
}

.gap-y-3{
  row-gap: 0.75rem;
}

.space-x-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-12 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-7 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.75rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}

.divide-main\/60 > :not([hidden]) ~ :not([hidden]){
  border-color: rgb(230 223 210 / 0.6);
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-visible{
  overflow: visible;
}

.overflow-x-auto{
  overflow-x: auto;
}

.overflow-y-auto{
  overflow-y: auto;
}

.overscroll-contain{
  overscroll-behavior: contain;
}

.overscroll-none{
  overscroll-behavior: none;
}

.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap{
  white-space: nowrap;
}

.whitespace-pre-line{
  white-space: pre-line;
}

.whitespace-pre-wrap{
  white-space: pre-wrap;
}

.break-words{
  overflow-wrap: break-word;
}

.break-all{
  word-break: break-all;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-2xl{
  border-radius: 1rem;
}

.rounded-3xl{
  border-radius: 1.5rem;
}

.rounded-\[1\.5rem\]{
  border-radius: 1.5rem;
}

.rounded-\[10px\]{
  border-radius: 10px;
}

.rounded-\[2\.4rem\]{
  border-radius: 2.4rem;
}

.rounded-\[2rem\]{
  border-radius: 2rem;
}

.rounded-full{
  border-radius: 9999px;
}

.rounded-lg{
  border-radius: 0.5rem;
}

.rounded-md{
  border-radius: 0.375rem;
}

.rounded-xl{
  border-radius: 0.75rem;
}

.rounded-t-md{
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.border{
  border-width: 1px;
}

.border-2{
  border-width: 2px;
}

.border-\[3px\]{
  border-width: 3px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-l{
  border-left-width: 1px;
}

.border-l-4{
  border-left-width: 4px;
}

.border-r{
  border-right-width: 1px;
}

.border-t{
  border-top-width: 1px;
}

.border-\[\#5F9268\]{
  --tw-border-opacity: 1;
  border-color: rgb(95 146 104 / var(--tw-border-opacity, 1));
}

.border-\[\#7EAF86\]{
  --tw-border-opacity: 1;
  border-color: rgb(126 175 134 / var(--tw-border-opacity, 1));
}

.border-\[\#7FAF87\]{
  --tw-border-opacity: 1;
  border-color: rgb(127 175 135 / var(--tw-border-opacity, 1));
}

.border-\[\#A8AAA5\]\/50{
  border-color: rgb(168 170 165 / 0.5);
}

.border-\[\#C5B9A6\]{
  --tw-border-opacity: 1;
  border-color: rgb(197 185 166 / var(--tw-border-opacity, 1));
}

.border-\[\#CBBCE6\]{
  --tw-border-opacity: 1;
  border-color: rgb(203 188 230 / var(--tw-border-opacity, 1));
}

.border-\[\#CFC8BF\]{
  --tw-border-opacity: 1;
  border-color: rgb(207 200 191 / var(--tw-border-opacity, 1));
}

.border-\[\#D6B875\]{
  --tw-border-opacity: 1;
  border-color: rgb(214 184 117 / var(--tw-border-opacity, 1));
}

.border-\[\#D8D0C5\]{
  --tw-border-opacity: 1;
  border-color: rgb(216 208 197 / var(--tw-border-opacity, 1));
}

.border-\[\#DDD4C7\]{
  --tw-border-opacity: 1;
  border-color: rgb(221 212 199 / var(--tw-border-opacity, 1));
}

.border-\[\#E7B94E\]{
  --tw-border-opacity: 1;
  border-color: rgb(231 185 78 / var(--tw-border-opacity, 1));
}

.border-\[\#E8CF8F\]{
  --tw-border-opacity: 1;
  border-color: rgb(232 207 143 / var(--tw-border-opacity, 1));
}

.border-\[\#F0B1A9\]\/60{
  border-color: rgb(240 177 169 / 0.6);
}

.border-accent{
  --tw-border-opacity: 1;
  border-color: rgb(244 201 93 / var(--tw-border-opacity, 1));
}

.border-accent\/20{
  border-color: rgb(244 201 93 / 0.2);
}

.border-accent\/30{
  border-color: rgb(244 201 93 / 0.3);
}

.border-accent\/35{
  border-color: rgb(244 201 93 / 0.35);
}

.border-accent\/40{
  border-color: rgb(244 201 93 / 0.4);
}

.border-accent\/50{
  border-color: rgb(244 201 93 / 0.5);
}

.border-amber-200{
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}

.border-amber-300{
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}

.border-base-text{
  --tw-border-opacity: 1;
  border-color: rgb(74 64 56 / var(--tw-border-opacity, 1));
}

.border-blue-200{
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}

.border-blue-400{
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.border-emerald-700\/20{
  border-color: rgb(4 120 87 / 0.2);
}

.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-main{
  --tw-border-opacity: 1;
  border-color: rgb(230 223 210 / var(--tw-border-opacity, 1));
}

.border-main\/30{
  border-color: rgb(230 223 210 / 0.3);
}

.border-main\/40{
  border-color: rgb(230 223 210 / 0.4);
}

.border-main\/50{
  border-color: rgb(230 223 210 / 0.5);
}

.border-main\/60{
  border-color: rgb(230 223 210 / 0.6);
}

.border-main\/70{
  border-color: rgb(230 223 210 / 0.7);
}

.border-main\/80{
  border-color: rgb(230 223 210 / 0.8);
}

.border-muted{
  --tw-border-opacity: 1;
  border-color: rgb(163 163 163 / var(--tw-border-opacity, 1));
}

.border-muted\/70{
  border-color: rgb(163 163 163 / 0.7);
}

.border-red-100\/70{
  border-color: rgb(254 226 226 / 0.7);
}

.border-red-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.border-red-300{
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}

.border-red-400{
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}

.border-red-500{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.border-red-600{
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}

.border-slate-200{
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

.border-sub{
  --tw-border-opacity: 1;
  border-color: rgb(143 185 150 / var(--tw-border-opacity, 1));
}

.border-sub\/20{
  border-color: rgb(143 185 150 / 0.2);
}

.border-sub\/25{
  border-color: rgb(143 185 150 / 0.25);
}

.border-sub\/40{
  border-color: rgb(143 185 150 / 0.4);
}

.border-sub\/70{
  border-color: rgb(143 185 150 / 0.7);
}

.border-sub_2{
  --tw-border-opacity: 1;
  border-color: rgb(95 146 104 / var(--tw-border-opacity, 1));
}

.border-white\/20{
  border-color: rgb(255 255 255 / 0.2);
}

.border-white\/70{
  border-color: rgb(255 255 255 / 0.7);
}

.border-t-transparent{
  border-top-color: transparent;
}

.bg-\[\#06C755\]{
  --tw-bg-opacity: 1;
  background-color: rgb(6 199 85 / var(--tw-bg-opacity, 1));
}

.bg-\[\#2F2419\]\/10{
  background-color: rgb(47 36 25 / 0.1);
}

.bg-\[\#3A2A1B\]\/10{
  background-color: rgb(58 42 27 / 0.1);
}

.bg-\[\#D2D4CF\]\/95{
  background-color: rgb(210 212 207 / 0.95);
}

.bg-\[\#D86F65\]\/95{
  background-color: rgb(216 111 101 / 0.95);
}

.bg-\[\#D8D0C2\]{
  --tw-bg-opacity: 1;
  background-color: rgb(216 208 194 / var(--tw-bg-opacity, 1));
}

.bg-\[\#DED8CF\]{
  --tw-bg-opacity: 1;
  background-color: rgb(222 216 207 / var(--tw-bg-opacity, 1));
}

.bg-\[\#E8E1F3\]{
  --tw-bg-opacity: 1;
  background-color: rgb(232 225 243 / var(--tw-bg-opacity, 1));
}

.bg-\[\#E8E1F3\]\/75{
  background-color: rgb(232 225 243 / 0.75);
}

.bg-\[\#F4F1EA\]{
  --tw-bg-opacity: 1;
  background-color: rgb(244 241 234 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F7C85A\]\/45{
  background-color: rgb(247 200 90 / 0.45);
}

.bg-\[\#F7F4EC\]{
  --tw-bg-opacity: 1;
  background-color: rgb(247 244 236 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F8F5EF\]{
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 239 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F8F5EF\]\/80{
  background-color: rgb(248 245 239 / 0.8);
}

.bg-\[\#FAF7F1\]{
  --tw-bg-opacity: 1;
  background-color: rgb(250 247 241 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FAF8F3\]\/50{
  background-color: rgb(250 248 243 / 0.5);
}

.bg-\[\#FAF8F3\]\/60{
  background-color: rgb(250 248 243 / 0.6);
}

.bg-\[\#FAF8F3\]\/95{
  background-color: rgb(250 248 243 / 0.95);
}

.bg-\[\#FCFAF5\]{
  --tw-bg-opacity: 1;
  background-color: rgb(252 250 245 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FFF2B8\]\/65{
  background-color: rgb(255 242 184 / 0.65);
}

.bg-\[\#FFF2CF\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 242 207 / var(--tw-bg-opacity, 1));
}

.bg-\[\#b88732\]{
  --tw-bg-opacity: 1;
  background-color: rgb(184 135 50 / var(--tw-bg-opacity, 1));
}

.bg-\[\#fffaf0\]\/90{
  background-color: rgb(255 250 240 / 0.9);
}

.bg-accent{
  --tw-bg-opacity: 1;
  background-color: rgb(244 201 93 / var(--tw-bg-opacity, 1));
}

.bg-accent\/10{
  background-color: rgb(244 201 93 / 0.1);
}

.bg-accent\/15{
  background-color: rgb(244 201 93 / 0.15);
}

.bg-accent\/20{
  background-color: rgb(244 201 93 / 0.2);
}

.bg-accent\/60{
  background-color: rgb(244 201 93 / 0.6);
}

.bg-accent\/90{
  background-color: rgb(244 201 93 / 0.9);
}

.bg-accent\/95{
  background-color: rgb(244 201 93 / 0.95);
}

.bg-amber-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.bg-base{
  --tw-bg-opacity: 1;
  background-color: rgb(244 241 234 / var(--tw-bg-opacity, 1));
}

.bg-base\/60{
  background-color: rgb(244 241 234 / 0.6);
}

.bg-base\/80{
  background-color: rgb(244 241 234 / 0.8);
}

.bg-base\/90{
  background-color: rgb(244 241 234 / 0.9);
}

.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/40{
  background-color: rgb(0 0 0 / 0.4);
}

.bg-black\/45{
  background-color: rgb(0 0 0 / 0.45);
}

.bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);
}

.bg-blue-50{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-green-50{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-main{
  --tw-bg-opacity: 1;
  background-color: rgb(230 223 210 / var(--tw-bg-opacity, 1));
}

.bg-main\/10{
  background-color: rgb(230 223 210 / 0.1);
}

.bg-main\/15{
  background-color: rgb(230 223 210 / 0.15);
}

.bg-main\/25{
  background-color: rgb(230 223 210 / 0.25);
}

.bg-main\/30{
  background-color: rgb(230 223 210 / 0.3);
}

.bg-main\/40{
  background-color: rgb(230 223 210 / 0.4);
}

.bg-main\/50{
  background-color: rgb(230 223 210 / 0.5);
}

.bg-main\/60{
  background-color: rgb(230 223 210 / 0.6);
}

.bg-main\/70{
  background-color: rgb(230 223 210 / 0.7);
}

.bg-motivation-1{
  --tw-bg-opacity: 1;
  background-color: rgb(123 167 217 / var(--tw-bg-opacity, 1));
}

.bg-motivation-2{
  --tw-bg-opacity: 1;
  background-color: rgb(124 198 183 / var(--tw-bg-opacity, 1));
}

.bg-motivation-3{
  --tw-bg-opacity: 1;
  background-color: rgb(231 200 123 / var(--tw-bg-opacity, 1));
}

.bg-motivation-4{
  --tw-bg-opacity: 1;
  background-color: rgb(223 160 110 / var(--tw-bg-opacity, 1));
}

.bg-motivation-5{
  --tw-bg-opacity: 1;
  background-color: rgb(217 124 124 / var(--tw-bg-opacity, 1));
}

.bg-muted\/10{
  background-color: rgb(163 163 163 / 0.1);
}

.bg-muted\/30{
  background-color: rgb(163 163 163 / 0.3);
}

.bg-muted\/50{
  background-color: rgb(163 163 163 / 0.5);
}

.bg-red-200{
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}

.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-red-50\/70{
  background-color: rgb(254 242 242 / 0.7);
}

.bg-red-50\/80{
  background-color: rgb(254 242 242 / 0.8);
}

.bg-red-500{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-slate-100{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-slate-200{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.bg-slate-300{
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.bg-slate-50{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.bg-slate-900{
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}

.bg-sub{
  --tw-bg-opacity: 1;
  background-color: rgb(143 185 150 / var(--tw-bg-opacity, 1));
}

.bg-sub\/10{
  background-color: rgb(143 185 150 / 0.1);
}

.bg-sub\/15{
  background-color: rgb(143 185 150 / 0.15);
}

.bg-sub\/20{
  background-color: rgb(143 185 150 / 0.2);
}

.bg-sub\/30{
  background-color: rgb(143 185 150 / 0.3);
}

.bg-sub\/70{
  background-color: rgb(143 185 150 / 0.7);
}

.bg-sub\/75{
  background-color: rgb(143 185 150 / 0.75);
}

.bg-sub_2{
  --tw-bg-opacity: 1;
  background-color: rgb(95 146 104 / var(--tw-bg-opacity, 1));
}

.bg-transparent{
  background-color: transparent;
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/20{
  background-color: rgb(255 255 255 / 0.2);
}

.bg-white\/25{
  background-color: rgb(255 255 255 / 0.25);
}

.bg-white\/30{
  background-color: rgb(255 255 255 / 0.3);
}

.bg-white\/35{
  background-color: rgb(255 255 255 / 0.35);
}

.bg-white\/40{
  background-color: rgb(255 255 255 / 0.4);
}

.bg-white\/45{
  background-color: rgb(255 255 255 / 0.45);
}

.bg-white\/55{
  background-color: rgb(255 255 255 / 0.55);
}

.bg-white\/70{
  background-color: rgb(255 255 255 / 0.7);
}

.bg-white\/80{
  background-color: rgb(255 255 255 / 0.8);
}

.bg-\[linear-gradient\(180deg\2c \#9CC8A3_0\%\2c \#6FA878_58\%\2c \#4F8860_100\%\)\]{
  background-image: linear-gradient(180deg,#9CC8A3 0%,#6FA878 58%,#4F8860 100%);
}

.bg-\[linear-gradient\(180deg\2c \#A9D8B1_0\%\2c \#8FB996_58\%\2c \#78A981_100\%\)\]{
  background-image: linear-gradient(180deg,#A9D8B1 0%,#8FB996 58%,#78A981 100%);
}

.bg-\[linear-gradient\(180deg\2c \#B7D5BC_0\%\2c \#8FB996_58\%\2c \#74A87D_100\%\)\]{
  background-image: linear-gradient(180deg,#B7D5BC 0%,#8FB996 58%,#74A87D 100%);
}

.bg-\[linear-gradient\(180deg\2c \#F2EFE9_0\%\2c \#E7E1D8_100\%\)\]{
  background-image: linear-gradient(180deg,#F2EFE9 0%,#E7E1D8 100%);
}

.bg-\[linear-gradient\(180deg\2c \#F7D77A_0\%\2c \#F4C95D_58\%\2c \#E8B844_100\%\)\]{
  background-image: linear-gradient(180deg,#F7D77A 0%,#F4C95D 58%,#E8B844 100%);
}

.bg-\[linear-gradient\(180deg\2c \#F7F4EC_0\%\2c \#EFEADD_100\%\)\]{
  background-image: linear-gradient(180deg,#F7F4EC 0%,#EFEADD 100%);
}

.bg-\[linear-gradient\(180deg\2c \#FFF9E8_0\%\2c \#F9EDC9_58\%\2c \#F3DFA9_100\%\)\]{
  background-image: linear-gradient(180deg,#FFF9E8 0%,#F9EDC9 58%,#F3DFA9 100%);
}

.bg-\[radial-gradient\(circle\2c rgba\(143\2c 185\2c 150\2c 0\.20\)_0\%\2c rgba\(143\2c 185\2c 150\2c 0\.11\)_38\%\2c rgba\(143\2c 185\2c 150\2c 0\.05\)_68\%\2c rgba\(143\2c 185\2c 150\2c 0\.00\)_100\%\)\]{
  background-image: radial-gradient(circle,rgba(143,185,150,0.20) 0%,rgba(143,185,150,0.11) 38%,rgba(143,185,150,0.05) 68%,rgba(143,185,150,0.00) 100%);
}

.bg-\[radial-gradient\(circle\2c rgba\(230\2c 223\2c 210\2c 0\.95\)_0\%\2c rgba\(230\2c 223\2c 210\2c 0\.48\)_55\%\2c transparent_100\%\)\]{
  background-image: radial-gradient(circle,rgba(230,223,210,0.95) 0%,rgba(230,223,210,0.48) 55%,transparent 100%);
}

.bg-\[radial-gradient\(circle_at_center\2c rgba\(255\2c 232\2c 132\2c 0\.32\)_0\%\2c rgba\(255\2c 232\2c 132\2c 0\.20\)_36\%\2c rgba\(255\2c 232\2c 132\2c 0\.08\)_58\%\2c rgba\(255\2c 232\2c 132\2c 0\)_100\%\)\]{
  background-image: radial-gradient(circle at center,rgba(255,232,132,0.32) 0%,rgba(255,232,132,0.20) 36%,rgba(255,232,132,0.08) 58%,rgba(255,232,132,0) 100%);
}

.bg-\[radial-gradient\(circle_at_center\2c rgba\(255\2c 255\2c 255\2c 0\.95\)_0\%\2c rgba\(255\2c 244\2c 185\2c 0\.82\)_24\%\2c rgba\(247\2c 200\2c 90\2c 0\.48\)_48\%\2c rgba\(247\2c 200\2c 90\2c 0\.18\)_66\%\2c rgba\(247\2c 200\2c 90\2c 0\)_100\%\)\]{
  background-image: radial-gradient(circle at center,rgba(255,255,255,0.95) 0%,rgba(255,244,185,0.82) 24%,rgba(247,200,90,0.48) 48%,rgba(247,200,90,0.18) 66%,rgba(247,200,90,0) 100%);
}

.bg-gradient-to-b{
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br{
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-t{
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-base\/75{
  --tw-gradient-from: rgb(244 241 234 / 0.75) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 241 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-base\/90{
  --tw-gradient-from: rgb(244 241 234 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 241 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-50{
  --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-sub\/20{
  --tw-gradient-from: rgb(143 185 150 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(143 185 150 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-base\/45{
  --tw-gradient-to: rgb(244 241 234 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(244 241 234 / 0.45) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-base\/70{
  --tw-gradient-to: rgb(244 241 234 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(244 241 234 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-sub\/10{
  --tw-gradient-to: rgb(143 185 150 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(143 185 150 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-base\/0{
  --tw-gradient-to: rgb(244 241 234 / 0) var(--tw-gradient-to-position);
}

.to-base\/10{
  --tw-gradient-to: rgb(244 241 234 / 0.1) var(--tw-gradient-to-position);
}

.to-green-100{
  --tw-gradient-to: #dcfce7 var(--tw-gradient-to-position);
}

.to-transparent{
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.fill-\[\#4C6F8C\]{
  fill: #4C6F8C;
}

.fill-\[\#4F7D4E\]{
  fill: #4F7D4E;
}

.fill-\[\#A55454\]{
  fill: #A55454;
}

.fill-\[\#B8883C\]{
  fill: #B8883C;
}

.fill-base-text{
  fill: #4A4038;
}

.fill-muted-text{
  fill: #A3A3A3;
}

.fill-none{
  fill: none;
}

.fill-red-700{
  fill: #b91c1c;
}

.fill-sub{
  fill: #8FB996;
}

.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}

.object-fill{
  -o-object-fit: fill;
     object-fit: fill;
}

.object-bottom{
  -o-object-position: bottom;
     object-position: bottom;
}

.p-1\.5{
  padding: 0.375rem;
}

.p-2{
  padding: 0.5rem;
}

.p-3{
  padding: 0.75rem;
}

.p-4{
  padding: 1rem;
}

.p-5{
  padding: 1.25rem;
}

.p-6{
  padding: 1.5rem;
}

.p-8{
  padding: 2rem;
}

.px-0{
  padding-left: 0px;
  padding-right: 0px;
}

.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-7{
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.px-\[10\%\]{
  padding-left: 10%;
  padding-right: 10%;
}

.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5{
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-0{
  padding-bottom: 0px;
}

.pb-0\.5{
  padding-bottom: 0.125rem;
}

.pb-1{
  padding-bottom: 0.25rem;
}

.pb-12{
  padding-bottom: 3rem;
}

.pb-14{
  padding-bottom: 3.5rem;
}

.pb-16{
  padding-bottom: 4rem;
}

.pb-2{
  padding-bottom: 0.5rem;
}

.pb-24{
  padding-bottom: 6rem;
}

.pb-3{
  padding-bottom: 0.75rem;
}

.pb-4{
  padding-bottom: 1rem;
}

.pb-6{
  padding-bottom: 1.5rem;
}

.pb-\[19\%\]{
  padding-bottom: 19%;
}

.pb-\[4vh\]{
  padding-bottom: 4vh;
}

.pb-\[8vh\]{
  padding-bottom: 8vh;
}

.pl-1{
  padding-left: 0.25rem;
}

.pl-10{
  padding-left: 2.5rem;
}

.pl-12{
  padding-left: 3rem;
}

.pl-2{
  padding-left: 0.5rem;
}

.pl-3{
  padding-left: 0.75rem;
}

.pl-5{
  padding-left: 1.25rem;
}

.pl-6{
  padding-left: 1.5rem;
}

.pr-1{
  padding-right: 0.25rem;
}

.pr-10{
  padding-right: 2.5rem;
}

.pr-2{
  padding-right: 0.5rem;
}

.pt-1{
  padding-top: 0.25rem;
}

.pt-1\.5{
  padding-top: 0.375rem;
}

.pt-2{
  padding-top: 0.5rem;
}

.pt-3{
  padding-top: 0.75rem;
}

.pt-4{
  padding-top: 1rem;
}

.pt-40{
  padding-top: 10rem;
}

.pt-5{
  padding-top: 1.25rem;
}

.pt-6{
  padding-top: 1.5rem;
}

.pt-8{
  padding-top: 2rem;
}

.pt-\[10\%\]{
  padding-top: 10%;
}

.pt-\[14\%\]{
  padding-top: 14%;
}

.pt-\[calc\(env\(safe-area-inset-top\)\+0\.5rem\)\]{
  padding-top: calc(env(safe-area-inset-top) + 0.5rem);
}

.pt-\[calc\(env\(safe-area-inset-top\)\+2rem\)\]{
  padding-top: calc(env(safe-area-inset-top) + 2rem);
}

.text-left{
  text-align: left;
}

.text-center{
  text-align: center;
}

.text-right{
  text-align: right;
}

.text-start{
  text-align: start;
}

.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-\[1\.1rem\]{
  font-size: 1.1rem;
}

.text-\[1\.25rem\]{
  font-size: 1.25rem;
}

.text-\[1\.35rem\]{
  font-size: 1.35rem;
}

.text-\[10px\]{
  font-size: 10px;
}

.text-\[11px\]{
  font-size: 11px;
}

.text-\[12px\]{
  font-size: 12px;
}

.text-\[1rem\]{
  font-size: 1rem;
}

.text-\[clamp\(\.\.\.\)\]{
  font-size: clamp(...);
}

.text-\[clamp\(0\.54rem\2c 2\.25vw\2c 0\.68rem\)\]{
  font-size: clamp(0.54rem, 2.25vw, 0.68rem);
}

.text-\[clamp\(0\.7rem\2c 3vw\2c 0\.92rem\)\]{
  font-size: clamp(0.7rem, 3vw, 0.92rem);
}

.text-\[clamp\(0\.9rem\2c 3\.3vw\2c 1\.05rem\)\]{
  font-size: clamp(0.9rem, 3.3vw, 1.05rem);
}

.text-\[clamp\(1\.35rem\2c 6vw\2c 1\.85rem\)\]{
  font-size: clamp(1.35rem, 6vw, 1.85rem);
}

.text-\[clamp\(1\.75rem\2c 9vw\2c 2\.25rem\)\]{
  font-size: clamp(1.75rem, 9vw, 2.25rem);
}

.text-\[clamp\(1rem\2c 4\.5vw\2c 1\.35rem\)\]{
  font-size: clamp(1rem, 4.5vw, 1.35rem);
}

.text-\[clamp\(3rem\2c 13vw\2c 4rem\)\]{
  font-size: clamp(3rem, 13vw, 4rem);
}

.text-\[clamp\(5\.6rem\2c 24vw\2c 7\.1rem\)\]{
  font-size: clamp(5.6rem, 24vw, 7.1rem);
}

.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-black{
  font-weight: 900;
}

.font-bold{
  font-weight: 700;
}

.font-extrabold{
  font-weight: 800;
}

.font-medium{
  font-weight: 500;
}

.font-normal{
  font-weight: 400;
}

.font-semibold{
  font-weight: 600;
}

.not-italic{
  font-style: normal;
}

.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-3{
  line-height: .75rem;
}

.leading-4{
  line-height: 1rem;
}

.leading-5{
  line-height: 1.25rem;
}

.leading-6{
  line-height: 1.5rem;
}

.leading-7{
  line-height: 1.75rem;
}

.leading-\[14px\]{
  line-height: 14px;
}

.leading-none{
  line-height: 1;
}

.leading-relaxed{
  line-height: 1.625;
}

.leading-snug{
  line-height: 1.375;
}

.leading-tight{
  line-height: 1.25;
}

.tracking-\[-0\.02em\]{
  letter-spacing: -0.02em;
}

.tracking-\[-0\.04em\]{
  letter-spacing: -0.04em;
}

.tracking-\[-0\.05em\]{
  letter-spacing: -0.05em;
}

.tracking-\[0\.02em\]{
  letter-spacing: 0.02em;
}

.tracking-\[0\.04em\]{
  letter-spacing: 0.04em;
}

.tracking-\[0\.06em\]{
  letter-spacing: 0.06em;
}

.tracking-\[0\.08em\]{
  letter-spacing: 0.08em;
}

.tracking-\[0\.12em\]{
  letter-spacing: 0.12em;
}

.tracking-\[0\.14em\]{
  letter-spacing: 0.14em;
}

.tracking-\[0\.16em\]{
  letter-spacing: 0.16em;
}

.tracking-\[0\.18em\]{
  letter-spacing: 0.18em;
}

.tracking-tight{
  letter-spacing: -0.025em;
}

.tracking-wide{
  letter-spacing: 0.025em;
}

.tracking-widest{
  letter-spacing: 0.1em;
}

.text-\[\#3A2A1B\]{
  --tw-text-opacity: 1;
  color: rgb(58 42 27 / var(--tw-text-opacity, 1));
}

.text-\[\#5F4B1E\]{
  --tw-text-opacity: 1;
  color: rgb(95 75 30 / var(--tw-text-opacity, 1));
}

.text-\[\#5F868B\]{
  --tw-text-opacity: 1;
  color: rgb(95 134 139 / var(--tw-text-opacity, 1));
}

.text-\[\#5b4328\]{
  --tw-text-opacity: 1;
  color: rgb(91 67 40 / var(--tw-text-opacity, 1));
}

.text-\[\#666A66\]{
  --tw-text-opacity: 1;
  color: rgb(102 106 102 / var(--tw-text-opacity, 1));
}

.text-\[\#6B573A\]{
  --tw-text-opacity: 1;
  color: rgb(107 87 58 / var(--tw-text-opacity, 1));
}

.text-\[\#6E5AA6\]{
  --tw-text-opacity: 1;
  color: rgb(110 90 166 / var(--tw-text-opacity, 1));
}

.text-\[\#735D35\]{
  --tw-text-opacity: 1;
  color: rgb(115 93 53 / var(--tw-text-opacity, 1));
}

.text-\[\#779452\]{
  --tw-text-opacity: 1;
  color: rgb(119 148 82 / var(--tw-text-opacity, 1));
}

.text-\[\#79612B\]{
  --tw-text-opacity: 1;
  color: rgb(121 97 43 / var(--tw-text-opacity, 1));
}

.text-\[\#858585\]{
  --tw-text-opacity: 1;
  color: rgb(133 133 133 / var(--tw-text-opacity, 1));
}

.text-\[\#8A8478\]{
  --tw-text-opacity: 1;
  color: rgb(138 132 120 / var(--tw-text-opacity, 1));
}

.text-\[\#B4534B\]{
  --tw-text-opacity: 1;
  color: rgb(180 83 75 / var(--tw-text-opacity, 1));
}

.text-\[\#B8A58A\]{
  --tw-text-opacity: 1;
  color: rgb(184 165 138 / var(--tw-text-opacity, 1));
}

.text-\[\#C27768\]{
  --tw-text-opacity: 1;
  color: rgb(194 119 104 / var(--tw-text-opacity, 1));
}

.text-\[\#C79B42\]{
  --tw-text-opacity: 1;
  color: rgb(199 155 66 / var(--tw-text-opacity, 1));
}

.text-\[\#F4F1EA\]{
  --tw-text-opacity: 1;
  color: rgb(244 241 234 / var(--tw-text-opacity, 1));
}

.text-accent{
  --tw-text-opacity: 1;
  color: rgb(244 201 93 / var(--tw-text-opacity, 1));
}

.text-amber-500{
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.text-amber-800{
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.text-amber-900{
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}

.text-base{
  --tw-text-opacity: 1;
  color: rgb(244 241 234 / var(--tw-text-opacity, 1));
}

.text-base-text{
  --tw-text-opacity: 1;
  color: rgb(74 64 56 / var(--tw-text-opacity, 1));
}

.text-base-text\/70{
  color: rgb(74 64 56 / 0.7);
}

.text-blue-500{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-700{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-blue-800{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.text-current{
  color: currentColor;
}

.text-emerald-800\/80{
  color: rgb(6 95 70 / 0.8);
}

.text-emerald-900{
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}

.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-green-500{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-green-800{
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}

.text-headline-text{
  --tw-text-opacity: 1;
  color: rgb(58 58 58 / var(--tw-text-opacity, 1));
}

.text-main{
  --tw-text-opacity: 1;
  color: rgb(230 223 210 / var(--tw-text-opacity, 1));
}

.text-motivation-1{
  --tw-text-opacity: 1;
  color: rgb(123 167 217 / var(--tw-text-opacity, 1));
}

.text-motivation-2{
  --tw-text-opacity: 1;
  color: rgb(124 198 183 / var(--tw-text-opacity, 1));
}

.text-motivation-3{
  --tw-text-opacity: 1;
  color: rgb(231 200 123 / var(--tw-text-opacity, 1));
}

.text-motivation-4{
  --tw-text-opacity: 1;
  color: rgb(223 160 110 / var(--tw-text-opacity, 1));
}

.text-motivation-5{
  --tw-text-opacity: 1;
  color: rgb(217 124 124 / var(--tw-text-opacity, 1));
}

.text-muted{
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}

.text-muted-text{
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}

.text-muted-text\/70{
  color: rgb(163 163 163 / 0.7);
}

.text-orange-500{
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}

.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-red-800{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.text-slate-500{
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.text-slate-700{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.text-slate-800{
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.text-stone-600{
  --tw-text-opacity: 1;
  color: rgb(87 83 78 / var(--tw-text-opacity, 1));
}

.text-sub{
  --tw-text-opacity: 1;
  color: rgb(143 185 150 / var(--tw-text-opacity, 1));
}

.text-sub-text{
  --tw-text-opacity: 1;
  color: rgb(106 106 106 / var(--tw-text-opacity, 1));
}

.text-sub\/75{
  color: rgb(143 185 150 / 0.75);
}

.text-sub\/80{
  color: rgb(143 185 150 / 0.8);
}

.text-sub_2{
  --tw-text-opacity: 1;
  color: rgb(95 146 104 / var(--tw-text-opacity, 1));
}

.text-teal-500{
  --tw-text-opacity: 1;
  color: rgb(20 184 166 / var(--tw-text-opacity, 1));
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-yellow-800{
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}

.underline{
  text-decoration-line: underline;
}

.underline-offset-2{
  text-underline-offset: 2px;
}

.underline-offset-4{
  text-underline-offset: 4px;
}

.opacity-0{
  opacity: 0;
}

.opacity-100{
  opacity: 1;
}

.opacity-40{
  opacity: 0.4;
}

.opacity-50{
  opacity: 0.5;
}

.opacity-80{
  opacity: 0.8;
}

.opacity-\[0\.08\]{
  opacity: 0.08;
}

.opacity-\[0\.18\]{
  opacity: 0.18;
}

.opacity-\[0\.23\]{
  opacity: 0.23;
}

.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_4px_rgba\(255\2c 255\2c 255\2c 0\.7\)\2c 0_0_28px_rgba\(238\2c 205\2c 104\2c 0\.95\)\]{
  --tw-shadow: 0 0 0 4px rgba(255,255,255,0.7),0 0 28px rgba(238,205,104,0.95);
  --tw-shadow-colored: 0 0 0 4px var(--tw-shadow-color), 0 0 28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_16px_42px_rgba\(0\2c 0\2c 0\2c 0\.58\)\]{
  --tw-shadow: 0 16px 42px rgba(0,0,0,0.58);
  --tw-shadow-colored: 0 16px 42px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_18px_44px_rgba\(35\2c 42\2c 31\2c 0\.32\)\]{
  --tw-shadow: 0 18px 44px rgba(35,42,31,0.32);
  --tw-shadow-colored: 0 18px 44px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_1px_3px_rgba\(46\2c 46\2c 46\2c 0\.04\)\]{
  --tw-shadow: 0 1px 3px rgba(46,46,46,0.04);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_2px_10px_rgba\(197\2c 151\2c 73\2c 0\.36\)\]{
  --tw-shadow: 0 2px 10px rgba(197,151,73,0.36);
  --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_2px_10px_rgba\(217\2c 122\2c 112\2c 0\.34\)\]{
  --tw-shadow: 0 2px 10px rgba(217,122,112,0.34);
  --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_2px_10px_rgba\(46\2c 46\2c 46\2c 0\.045\)\]{
  --tw-shadow: 0 2px 10px rgba(46,46,46,0.045);
  --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_2px_8px_rgba\(46\2c 46\2c 46\2c 0\.045\)\]{
  --tw-shadow: 0 2px 8px rgba(46,46,46,0.045);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_2px_8px_rgba\(46\2c 46\2c 46\2c 0\.055\)\]{
  --tw-shadow: 0 2px 8px rgba(46,46,46,0.055);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_3px_10px_rgba\(46\2c 46\2c 46\2c 0\.055\)\]{
  --tw-shadow: 0 3px 10px rgba(46,46,46,0.055);
  --tw-shadow-colored: 0 3px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_3px_10px_rgba\(70\2c 78\2c 52\2c 0\.14\)\]{
  --tw-shadow: 0 3px 10px rgba(70,78,52,0.14);
  --tw-shadow-colored: 0 3px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_3px_10px_rgba\(70\2c 78\2c 52\2c 0\.2\)\]{
  --tw-shadow: 0 3px 10px rgba(70,78,52,0.2);
  --tw-shadow-colored: 0 3px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_3px_12px_rgba\(46\2c 46\2c 46\2c 0\.055\)\]{
  --tw-shadow: 0 3px 12px rgba(46,46,46,0.055);
  --tw-shadow-colored: 0 3px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_4px_0_\#9CA3AF\]{
  --tw-shadow: 0 4px 0 #9CA3AF;
  --tw-shadow-colored: 0 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_4px_0_\#B91C1C\]{
  --tw-shadow: 0 4px 0 #B91C1C;
  --tw-shadow-colored: 0 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_4px_0_\#d9a427\]{
  --tw-shadow: 0 4px 0 #d9a427;
  --tw-shadow-colored: 0 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_4px_12px_rgba\(46\2c 46\2c 46\2c 0\.08\)\]{
  --tw-shadow: 0 4px 12px rgba(46,46,46,0.08);
  --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_4px_12px_rgba\(86\2c 67\2c 32\2c 0\.22\)\]{
  --tw-shadow: 0 4px 12px rgba(86,67,32,0.22);
  --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_4px_16px_rgba\(0\2c 0\2c 0\2c 0\.36\)\]{
  --tw-shadow: 0 4px 16px rgba(0,0,0,0.36);
  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_5px_14px_rgba\(181\2c 123\2c 31\2c 0\.28\)\]{
  --tw-shadow: 0 5px 14px rgba(181,123,31,0.28);
  --tw-shadow-colored: 0 5px 14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_6px_0_\#9CA3AF\]{
  --tw-shadow: 0 6px 0 #9CA3AF;
  --tw-shadow-colored: 0 6px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_6px_0_\#B91C1C\]{
  --tw-shadow: 0 6px 0 #B91C1C;
  --tw-shadow-colored: 0 6px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_6px_0_\#d9a427\]{
  --tw-shadow: 0 6px 0 #d9a427;
  --tw-shadow-colored: 0 6px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_6px_20px_rgba\(0\2c 0\2c 0\2c 0\.35\)\]{
  --tw-shadow: 0 6px 20px rgba(0,0,0,0.35);
  --tw-shadow-colored: 0 6px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_7px_16px_rgba\(76\2c 111\2c 80\2c 0\.24\)\2c inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.45\)\]{
  --tw-shadow: 0 7px 16px rgba(76,111,80,0.24),inset 0 1px 0 rgba(255,255,255,0.45);
  --tw-shadow-colored: 0 7px 16px var(--tw-shadow-color), inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_8px_18px_rgba\(181\2c 123\2c 31\2c 0\.28\)\2c inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.55\)\]{
  --tw-shadow: 0 8px 18px rgba(181,123,31,0.28),inset 0 1px 0 rgba(255,255,255,0.55);
  --tw-shadow-colored: 0 8px 18px var(--tw-shadow-color), inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_1px_2px_rgba\(255\2c 255\2c 255\2c 0\.35\)\2c 0_1px_2px_rgba\(46\2c 46\2c 46\2c 0\.08\)\]{
  --tw-shadow: inset 0 1px 2px rgba(255,255,255,0.35),0 1px 2px rgba(46,46,46,0.08);
  --tw-shadow-colored: inset 0 1px 2px var(--tw-shadow-color), 0 1px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_1px_3px_rgba\(46\2c 46\2c 46\2c 0\.06\)\]{
  --tw-shadow: inset 0 1px 3px rgba(46,46,46,0.06);
  --tw-shadow-colored: inset 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_1px_3px_rgba\(46\2c 46\2c 46\2c 0\.08\)\]{
  --tw-shadow: inset 0 1px 3px rgba(46,46,46,0.08);
  --tw-shadow-colored: inset 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_1px_4px_rgba\(46\2c 46\2c 46\2c 0\.06\)\]{
  --tw-shadow: inset 0 1px 4px rgba(46,46,46,0.06);
  --tw-shadow-colored: inset 0 1px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_1px_5px_rgba\(46\2c 46\2c 46\2c 0\.08\)\]{
  --tw-shadow: inset 0 1px 5px rgba(46,46,46,0.08);
  --tw-shadow-colored: inset 0 1px 5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_2px_8px_rgba\(46\2c 46\2c 46\2c 0\.08\)\]{
  --tw-shadow: inset 0 2px 8px rgba(46,46,46,0.08);
  --tw-shadow-colored: inset 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-black\/50{
  --tw-shadow-color: rgb(0 0 0 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}

.outline{
  outline-style: solid;
}

.ring-2{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-base{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(244 241 234 / var(--tw-ring-opacity, 1));
}

.ring-sub{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(143 185 150 / var(--tw-ring-opacity, 1));
}

.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-2xl{
  --tw-blur: blur(40px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-3xl{
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-\[2px\]{
  --tw-blur: blur(2px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-\[3px\]{
  --tw-blur: blur(3px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-lg{
  --tw-blur: blur(16px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-md{
  --tw-blur: blur(12px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-sm{
  --tw-blur: blur(4px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-xl{
  --tw-blur: blur(24px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.brightness-\[1\.02\]{
  --tw-brightness: brightness(1.02);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.brightness-\[1\.04\]{
  --tw-brightness: brightness(1.04);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow{
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-\[0_0_8px_rgba\(255\2c 210\2c 91\2c 0\.9\)\]{
  --tw-drop-shadow: drop-shadow(0 0 8px rgba(255,210,91,0.9));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-\[0_12px_14px_rgba\(40\2c 26\2c 8\2c 0\.34\)\]{
  --tw-drop-shadow: drop-shadow(0 12px 14px rgba(40,26,8,0.34));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-\[0_16px_28px_rgba\(0\2c 0\2c 0\2c 0\.28\)\]{
  --tw-drop-shadow: drop-shadow(0 16px 28px rgba(0,0,0,0.28));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-\[0_16px_28px_rgba\(37\2c 44\2c 34\2c 0\.28\)\]{
  --tw-drop-shadow: drop-shadow(0 16px 28px rgba(37,44,34,0.28));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-\[0_18px_32px_rgba\(72\2c 54\2c 22\2c 0\.32\)\]{
  --tw-drop-shadow: drop-shadow(0 18px 32px rgba(72,54,22,0.32));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-\[0_2px_0_rgba\(255\2c 255\2c 255\2c 0\.7\)\]{
  --tw-drop-shadow: drop-shadow(0 2px 0 rgba(255,255,255,0.7));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-\[0_2px_0_rgba\(255\2c 255\2c 255\2c 0\.75\)\]{
  --tw-drop-shadow: drop-shadow(0 2px 0 rgba(255,255,255,0.75));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-\[0_8px_14px_rgba\(48\2c 62\2c 34\2c 0\.28\)\]{
  --tw-drop-shadow: drop-shadow(0 8px 14px rgba(48,62,34,0.28));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-sm{
  --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale{
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.saturate-\[0\.86\]{
  --tw-saturate: saturate(0.86);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.sepia{
  --tw-sepia: sepia(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur{
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-\[1px\]{
  --tw-backdrop-blur: blur(1px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-\[2px\]{
  --tw-backdrop-blur: blur(2px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-\[3px\]{
  --tw-backdrop-blur: blur(3px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm{
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter{
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[height\]{
  transition-property: height;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-150{
  transition-duration: 150ms;
}

.duration-200{
  transition-duration: 200ms;
}

.duration-300{
  transition-duration: 300ms;
}

.duration-700{
  transition-duration: 700ms;
}

.ease-in{
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/*** ====== フラッシュメッセージ ====== */

@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

@keyframes fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

.animate-fade-out {
  animation: fade-out 0.3s ease-in forwards;
}

/* ====== フラッシュメッセージ ====== ***/

.\[overflow-wrap\:anywhere\]{
  overflow-wrap: anywhere;
}

.marker\:font-bold *::marker{
  font-weight: 700;
}

.marker\:text-sub *::marker{
  color: rgb(143 185 150 );
}

.marker\:text-sub_2 *::marker{
  color: rgb(95 146 104 );
}

.marker\:font-bold::marker{
  font-weight: 700;
}

.marker\:text-sub::marker{
  color: rgb(143 185 150 );
}

.marker\:text-sub_2::marker{
  color: rgb(95 146 104 );
}

.placeholder\:text-muted-text::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}

.placeholder\:text-muted-text::placeholder{
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}

.backdrop\:bg-black\/50::backdrop{
  background-color: rgb(0 0 0 / 0.5);
}

.before\:absolute::before{
  content: var(--tw-content);
  position: absolute;
}

.before\:inset-x-3::before{
  content: var(--tw-content);
  left: 0.75rem;
  right: 0.75rem;
}

.before\:top-0::before{
  content: var(--tw-content);
  top: 0px;
}

.before\:h-px::before{
  content: var(--tw-content);
  height: 1px;
}

.before\:bg-white\/60::before{
  content: var(--tw-content);
  background-color: rgb(255 255 255 / 0.6);
}

.before\:bg-white\/65::before{
  content: var(--tw-content);
  background-color: rgb(255 255 255 / 0.65);
}

.before\:bg-white\/75::before{
  content: var(--tw-content);
  background-color: rgb(255 255 255 / 0.75);
}

.before\:bg-white\/80::before{
  content: var(--tw-content);
  background-color: rgb(255 255 255 / 0.8);
}

.last\:border-r-0:last-child{
  border-right-width: 0px;
}

.checked\:border-accent:checked{
  --tw-border-opacity: 1;
  border-color: rgb(244 201 93 / var(--tw-border-opacity, 1));
}

.checked\:border-sub:checked{
  --tw-border-opacity: 1;
  border-color: rgb(143 185 150 / var(--tw-border-opacity, 1));
}

.checked\:bg-accent:checked{
  --tw-bg-opacity: 1;
  background-color: rgb(244 201 93 / var(--tw-bg-opacity, 1));
}

.checked\:bg-sub:checked{
  --tw-bg-opacity: 1;
  background-color: rgb(143 185 150 / var(--tw-bg-opacity, 1));
}

.hover\:translate-y-\[1px\]:hover{
  --tw-translate-y: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-emerald-600\/40:hover{
  border-color: rgb(5 150 105 / 0.4);
}

.hover\:border-sub:hover{
  --tw-border-opacity: 1;
  border-color: rgb(143 185 150 / var(--tw-border-opacity, 1));
}

.hover\:border-sub_2:hover{
  --tw-border-opacity: 1;
  border-color: rgb(95 146 104 / var(--tw-border-opacity, 1));
}

.hover\:bg-accent:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(244 201 93 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-300:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.hover\:bg-main\/20:hover{
  background-color: rgb(230 223 210 / 0.2);
}

.hover\:bg-main\/40:hover{
  background-color: rgb(230 223 210 / 0.4);
}

.hover\:bg-stone-900\/10:hover{
  background-color: rgb(28 25 23 / 0.1);
}

.hover\:bg-sub:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(143 185 150 / var(--tw-bg-opacity, 1));
}

.hover\:bg-sub\/50:hover{
  background-color: rgb(143 185 150 / 0.5);
}

.hover\:bg-sub\/70:hover{
  background-color: rgb(143 185 150 / 0.7);
}

.hover\:bg-sub\/90:hover{
  background-color: rgb(143 185 150 / 0.9);
}

.hover\:bg-white:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/65:hover{
  background-color: rgb(255 255 255 / 0.65);
}

.hover\:text-accent:hover{
  --tw-text-opacity: 1;
  color: rgb(244 201 93 / var(--tw-text-opacity, 1));
}

.hover\:text-stone-900:hover{
  --tw-text-opacity: 1;
  color: rgb(28 25 23 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover{
  text-decoration-line: underline;
}

.hover\:shadow-lg:hover{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-md:hover{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:brightness-\[1\.02\]:hover{
  --tw-brightness: brightness(1.02);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.hover\:brightness-\[1\.03\]:hover{
  --tw-brightness: brightness(1.03);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.hover\:brightness-\[1\.05\]:hover{
  --tw-brightness: brightness(1.05);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.focus\:border-sub:focus{
  --tw-border-opacity: 1;
  border-color: rgb(143 185 150 / var(--tw-border-opacity, 1));
}

.focus\:bg-\[\#FCFAF6\]:focus{
  --tw-bg-opacity: 1;
  background-color: rgb(252 250 246 / var(--tw-bg-opacity, 1));
}

.focus\:shadow-\[0_0_0_3px_rgba\(143\2c 185\2c 150\2c 0\.12\)\]:focus{
  --tw-shadow: 0 0 0 3px rgba(143,185,150,0.12);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:shadow-\[0_0_6px_0_theme\(\'colors\.sub\'\)\]:focus{
  --tw-shadow: 0 0 6px 0 #8FB996;
  --tw-shadow-colored: 0 0 6px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:shadow-\[0_0_8px_0_theme\(\'colors\.sub\'\)\]:focus{
  --tw-shadow: 0 0 8px 0 #8FB996;
  --tw-shadow-colored: 0 0 8px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-0:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-4:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-gray-300:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}

.focus\:ring-stone-500\/40:focus{
  --tw-ring-color: rgb(120 113 108 / 0.4);
}

.focus\:ring-sub\/30:focus{
  --tw-ring-color: rgb(143 185 150 / 0.3);
}

.focus-visible\:outline:focus-visible{
  outline-style: solid;
}

.focus-visible\:outline-2:focus-visible{
  outline-width: 2px;
}

.focus-visible\:outline-offset-2:focus-visible{
  outline-offset: 2px;
}

.focus-visible\:outline-offset-4:focus-visible{
  outline-offset: 4px;
}

.focus-visible\:outline-emerald-700:focus-visible{
  outline-color: #047857;
}

.focus-visible\:outline-sub:focus-visible{
  outline-color: #8FB996;
}

.active\:translate-y-\[1px\]:active{
  --tw-translate-y: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:translate-y-\[2px\]:active{
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-95:active{
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.98\]:active{
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.99\]:active{
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:shadow-\[inset_0_2px_4px_rgba\(0\2c 0\2c 0\2c 0\.3\)\]:active{
  --tw-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
  --tw-shadow-colored: inset 0 2px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.active\:shadow-\[inset_0_2px_4px_rgba\(0\2c 0\2c 0\2c 0\.35\)\]:active{
  --tw-shadow: inset 0 2px 4px rgba(0,0,0,0.35);
  --tw-shadow-colored: inset 0 2px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.disabled\:opacity-30:disabled{
  opacity: 0.3;
}

.disabled\:opacity-40:disabled{
  opacity: 0.4;
}

.disabled\:opacity-50:disabled{
  opacity: 0.5;
}

.disabled\:shadow-none:disabled{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group[open] .group-open\:block{
  display: block;
}

.group[open] .group-open\:hidden{
  display: none;
}

.group[open] .group-open\:rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:focus-within .group-focus-within\:text-sub{
  --tw-text-opacity: 1;
  color: rgb(143 185 150 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:fill-white{
  fill: #fff;
}

.peer:checked ~ .peer-checked\:translate-x-5{
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:checked ~ .peer-checked\:scale-100{
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:checked ~ .peer-checked\:border-accent{
  --tw-border-opacity: 1;
  border-color: rgb(244 201 93 / var(--tw-border-opacity, 1));
}

.peer:checked ~ .peer-checked\:border-sub{
  --tw-border-opacity: 1;
  border-color: rgb(143 185 150 / var(--tw-border-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-accent{
  --tw-bg-opacity: 1;
  background-color: rgb(244 201 93 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-emerald-500{
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-sub\/50{
  background-color: rgb(143 185 150 / 0.5);
}

.peer:checked ~ .peer-checked\:text-base-text{
  --tw-text-opacity: 1;
  color: rgb(74 64 56 / var(--tw-text-opacity, 1));
}

.peer:checked ~ .peer-checked\:opacity-100{
  opacity: 1;
}

.data-\[selected\=true\]\:scale-125[data-selected="true"]{
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-selected="true"] .group-data-\[selected\=true\]\:scale-105{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-selected="true"] .group-data-\[selected\=true\]\:text-current{
  color: currentColor;
}

.group[data-selected="true"] .group-data-\[selected\=true\]\:opacity-30{
  opacity: 0.3;
}

@media (prefers-reduced-motion: no-preference){
  @keyframes spin{
    to{
      transform: rotate(360deg);
    }
  }

  .motion-safe\:animate-spin{
    animation: spin 1s linear infinite;
  }
}

@media (min-width: 360px){
  .min-\[360px\]\:text-\[12px\]{
    font-size: 12px;
  }
}

@media (min-width: 375px){
  .min-\[375px\]\:h-9{
    height: 2.25rem;
  }

  .min-\[375px\]\:min-h-8{
    min-height: 2rem;
  }

  .min-\[375px\]\:w-16{
    width: 4rem;
  }

  .min-\[375px\]\:w-9{
    width: 2.25rem;
  }

  .min-\[375px\]\:px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .min-\[375px\]\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .min-\[375px\]\:text-\[11px\]{
    font-size: 11px;
  }

  .min-\[375px\]\:text-\[13px\]{
    font-size: 13px;
  }

  .min-\[375px\]\:text-\[16px\]{
    font-size: 16px;
  }

  .min-\[375px\]\:text-xs{
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .min-\[375px\]\:leading-4{
    line-height: 1rem;
  }
}

@media (min-width: 640px){
  .sm\:col-span-1{
    grid-column: span 1 / span 1;
  }

  .sm\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px){
  .md\:block{
    display: block;
  }

  .md\:hidden{
    display: none;
  }
}

@media (min-width: 1024px){
  .lg\:col-span-12{
    grid-column: span 12 / span 12;
  }

  .lg\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-8{
    grid-column: span 8 / span 8;
  }

  .lg\:block{
    display: block;
  }

  .lg\:hidden{
    display: none;
  }

  .lg\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .lg\:grid-cols-12{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:gap-5{
    gap: 1.25rem;
  }

  .lg\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1280px){
  .xl\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xl\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{
  display: none;
}