:root {
  /* フォント設定 */
  --font-family-default: "Yusei Magic", sans-serif;
  --font-family-accent: "Kranky", serif;
  --text-size-base: 16px;
  --text-scale-ratio: 1.2;
  --text-xxs: calc(1rem / (var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio)));
  --text-xs: calc(1rem / (var(--text-scale-ratio) * var(--text-scale-ratio)));
  --text-sm: calc(1rem / var(--text-scale-ratio));
  --text-rg: 1rem;
  --text-md: calc(1rem * var(--text-scale-ratio));
  --text-lg: calc(1rem * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-xl: calc(
    1rem * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio)
  );
  --text-xxl: calc(
    1rem * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio) * var(--text-scale-ratio)
  );
  --text-xxxl: calc(
    1rem * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio)
  );

  /* shadow */
  --shadow-subtle: 0 2px 8px rgba(43, 122, 120, 0.12);
  --shadow-card: 0 6px 16px rgba(36, 143, 153, 0.22);

  /* spacing */
  --space-unit: 1rem;
  --space-xxs: calc(0.25 * var(--space-unit));
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: calc(1.25 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(3.25 * var(--space-unit));
  --space-xxl: calc(5.25 * var(--space-unit));

  /* radius */
  --border-radius-xxs: var(--space-xxs);
  --border-radius-xs: var(--space-xs);
  --border-radius-sm: var(--space-sm);
  --border-radius-md: var(--space-md);
  --border-radius-lg: var(--space-lg);
  --border-radius-xl: var(--space-xl);
}

/* グローバルスタイル */
html {
  font-size: var(--text-size-base);
  color: rgb(var(--color-text-primary));
}

html.lavender {
  /* 色設定 - Palette 2: Darker Lavender & Rich Colors */
  --color-white: 248, 245, 252; /* #F8F5FC (deeper soft white) */
  --color-text-primary: 102, 51, 153; /* #663399 (rich purple) */
  --color-text-accent: 255, 165, 0; /* #FFA500 (vibrant orange) */
  --color-text-success: 34, 139, 34; /* #228B22 (forest green) */
  --color-text-success-dark: 0, 100, 0; /* #006400 (darker green) */
  --color-text-error: 220, 20, 60; /* #DC143C (crimson) */
  --color-text-error-dark: 178, 34, 34; /* #B22222 (fire brick) */
  --color-background: 230, 220, 245; /* #E6DCF5 (deeper lavender mist) */
  /*--color-background: 240, 235, 250; /* #F0EBFA (lighter lavender mist) */
  --color-card: 147, 112, 219; /* #9370DB (medium slate blue) */
  --color-progress: 186, 164, 235; /* #BAA4EB (light lavender) */
  --color-button: 138, 43, 226; /* #8A2BE2 (blue violet) */
  /* alias used in a border below */
  --color-text-button: 138, 43, 226; /* #8A2BE2 */

  --color-choice-1: 255, 105, 180; /* #FF69B4 (hot pink) */
  --color-choice-2: 71, 124, 210; /* #477cd2 (cornflower blue) */
  --color-choice-3: 94, 161, 118; /* #5ea176 (light green) */
  --color-choice-4: 246, 223, 117; /* #f6df75 (light orange) */
  --color-choice-5: 186, 85, 211; /* #BA55D3 (medium orchid) */
  --color-choice-6: 255, 255, 150; /* #FFFF96 (light yellow) */
  --color-choice-7: 255, 99, 71; /* #FF6347 (tomato red) */
  --color-choice-8: 64, 224, 208; /* #40E0D0 (turquoise) */
  --color-choice-9: 255, 165, 79; /* #FFA54F (nectarine) */
  --color-choice-10: 238, 130, 238; /* #EE82EE (violet) */
  --color-choice-11: 250, 128, 114; /* #FA8072 (salmon) */
  --color-choice-12: 135, 206, 250; /* #87CEFA (light sky blue) */
  --color-choice-13: 222, 184, 135; /* #DEB887 (burlywood) */
  --color-choice-14: 205, 92, 92; /* #CD5C5C (indian red) */
  --color-choice-15: 152, 251, 152; /* #98FB98 (pale green) */
  --color-choice-16: 255, 20, 147; /* #FF1493 (deep pink) */
  --color-choice-17: 72, 209, 204; /* #48D1CC (medium turquoise) */
  --color-choice-18: 189, 183, 107; /* #BDB76B (dark khaki) */
  --color-choice-19: 218, 112, 214; /* #DA70D6 (orchid) */
  --color-choice-20: 123, 104, 238; /* #7B68EE (medium slate blue) */
}

html.coral {
  /* 色設定 - Palette 3: Coral & Sky */
  --color-white: 255, 252, 250; /* #FFFCFA (soft cream) */
  --color-text-primary: 85, 70, 75; /* #55464B (warm gray) */
  --color-text-accent: 255, 145, 120; /* #FF9178 (coral) */
  --color-text-success: 150, 220, 220; /* #96DCDC (soft cyan) */
  --color-text-success-dark: 120, 190, 190; /* #78BEBE */
  --color-text-error: 255, 180, 165; /* #FFB4A5 (soft salmon) */
  --color-text-error-dark: 230, 150, 135; /* #E69687 */
  --color-background: 250, 245, 240; /* #FAF5F0 (warm ivory) */
  --color-progress: 180, 210, 230; /* #B4D2E6 (soft sky) */
  --color-button: 200, 220, 240; /* #C8DCF0 (powder blue) */
  /* alias used in a border below */
  --color-text-button: 200, 220, 240; /* #C8DCF0 */
}

body {
  font-family: var(--font-family-default);
  background-color: rgb(var(--color-background));
  text-align: center;
  padding: 0;
  margin: 0;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-md) 10px;
  opacity: 0;
  transition: 100ms opacity ease-in-out;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.container.ready {
  opacity: 1;
}
.container-sm {
  max-width: max(350px, 70%);
  margin: 0 auto;
}

.row {
  display: flex;
  gap: var(--space-sm);
}
.card {
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(var(--color-text-primary), 0.12);
}
.btn {
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-subtle);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.title{
  font-size: var(--text-xxl);
  font-weight: bold;
  margin-top: 0;
  margin-bottom: var(--space-sm);
}
.description {
  font-size: var(--text-size-sm);
  margin-top: 0;
}
.number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid;
  border-radius: 100%;
  font-size: var(--text-rg);
}

.sentence-card {
  background-color: rgb(var(--color-white));
  margin: var(--space-md) auto;
  font-size: var(--text-lg);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  column-gap: var(--space-sm);
  row-gap: var(--space-xs);
}

.sentence {
  align-items: center;
}
.sentence-icon {
  align-self: flex-start;
  padding-top: 10px;

}
.sentence-icon svg {
  display: block;
  height: 24px;
  width: 24px;
  fill: currentColor;
}
.sentence-text {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-xxs);
  row-gap: var(--space-sm);
  flex-wrap: wrap;
  white-space: pre-wrap;
}

.sentence-text > div {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
}
.sentence-choice {
  display: inline-flex;
  padding: var(--space-xxs) var(--space-sm);
  user-select: none;
  min-width: 80px;
  border: 1px solid ;
  border-radius: var(--border-radius-xxs);
  justify-content: center;
}
.sentence-choice[data-choice="1"] {
  background-color: rgba(var(--color-choice-1), 0.25);
  border-color: rgba(var(--color-choice-1), 1);
}
.sentence-choice[data-choice="2"] {
  background-color: rgba(var(--color-choice-2), 0.25);
  border-color: rgba(var(--color-choice-2), 1);
}
.sentence-choice[data-choice="3"] {
  background-color: rgba(var(--color-choice-3), 0.25);
  border-color: rgba(var(--color-choice-3), 1);
}
.sentence-choice[data-choice="4"] {
  background-color: rgba(var(--color-choice-4), 0.25);
  border-color: rgba(var(--color-choice-4), 1);
}
.sentence-choice[data-choice="5"] {
  background-color: rgba(var(--color-choice-5), 0.25);
  border-color: rgba(var(--color-choice-5), 1);
}
.sentence-choice[data-choice="6"] {
  background-color: rgba(var(--color-choice-6), 0.25);
  border-color: rgba(var(--color-choice-6), 1);
}
.sentence-choice[data-choice="7"] {
  background-color: rgba(var(--color-choice-7), 0.25);
  border-color: rgba(var(--color-choice-7), 1);
}
.sentence-choice[data-choice="8"] {
  background-color: rgba(var(--color-choice-8), 0.25);
  border-color: rgba(var(--color-choice-8), 1);
}
.sentence-choice[data-choice="9"] {
  background-color: rgba(var(--color-choice-9), 0.25);
  border-color: rgba(var(--color-choice-9), 1);
}
.sentence-choice[data-choice="10"] {
  background-color: rgba(var(--color-choice-10), 0.25);
  border-color: rgba(var(--color-choice-10), 1);
}
.sentence-choice[data-choice="11"] {
  background-color: rgba(var(--color-choice-11), 0.25);
  border-color: rgba(var(--color-choice-11), 1);
}
.sentence-choice[data-choice="12"] {
  background-color: rgba(var(--color-choice-12), 0.25);
  border-color: rgba(var(--color-choice-12), 1);
}
.sentence-choice[data-choice="13"] {
  background-color: rgba(var(--color-choice-13), 0.25);
  border-color: rgba(var(--color-choice-13), 1);
}
.sentence-choice[data-choice="14"] {
  background-color: rgba(var(--color-choice-14), 0.25);
  border-color: rgba(var(--color-choice-14), 1);
}
.sentence-choice[data-choice="15"] {
  background-color: rgba(var(--color-choice-15), 0.25);
  border-color: rgba(var(--color-choice-15), 1);
}
.sentence-choice[data-choice="16"] {
  background-color: rgba(var(--color-choice-16), 0.25);
  border-color: rgba(var(--color-choice-16), 1);
}
.sentence-choice[data-choice="17"] {
  background-color: rgba(var(--color-choice-17), 0.25);
  border-color: rgba(var(--color-choice-17), 1);
}
.sentence-choice[data-choice="18"] {
  background-color: rgba(var(--color-choice-18), 0.25);
  border-color: rgba(var(--color-choice-18), 1);
}
.sentence-choice[data-choice="19"] {
  background-color: rgba(var(--color-choice-19), 0.25);
  border-color: rgba(var(--color-choice-19), 1);
}
.sentence-choice[data-choice="20"] {
  background-color: rgba(var(--color-choice-20), 0.25);
  border-color: rgba(var(--color-choice-20), 1);
}

.settings {
  align-items: center;
  gap: var(--space-lg);
  max-width: 500px;
}

.sound {
  appearance: none;
  background: none;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-xl);
  border: 1px solid rgb(var(--color-button));
  border-radius: var(--border-radius-sm);
  align-self: center;
  gap: var(--space-xs);
  color: rgb(var(--color-text-primary));
  background-color: white;
}

.sound:hover {
  background-color: rgb(var(--color-text-primary));
  color: rgb(var(--color-white));
}

.sound-icon svg {
  display: block;
  width: 24px;
  height: auto;
}

.sound-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.sound-text .english {
  font-size: var(--text-md);
  font-weight: bold;
}
.sound-text .japanese {
  font-size: var(--text-xs);
  font-weight: 300;
}

.speed {
  flex: 1
}

.speed-range {
  flex: 1;
}
input[type="range"]#speed-setting {
  appearance: none;
  height: 8px;
  width: 100%;
  opacity: 0.9;
  transition: opacity .2s;
  cursor: pointer;
}
input[type="range"]:hover {
  opacity: 1;
}
input[type=range]#speed-setting::-moz-range-thumb {
  width: 1em;
  height: 1em;
  border-radius: 1em;
  background: #8A2BE2;
  border: none;
}
input[type=range]#speed-setting::-webkit-slider-thumb {
  margin-top: calc(max((8px - 1px - 1px) * 0.5,0px) - 1em * 0.5);
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  border-radius: 1em;
  background: #8A2BE2;
  border: none;
}
input[type=range]#speed-setting::-moz-range-track {
  height: max(calc(8px - 1px - 1px),0px);
  border: 1px solid #8A2BE2;
  border-radius: 0.5em;
  background: #BAA4EB;
  box-shadow: none;
}
input[type=range]#speed-setting::-webkit-slider-runnable-track {
  height: 8px;
  border: 1px solid #8A2BE2;
  border-radius: 0.5em;
  background: #BAA4EB;
  box-shadow: none;
}
input[type=range]#speed-setting:hover::-webkit-slider-runnable-track,
input[type=range]#speed-setting:hover::-moz-range-track {
  border-color: #9A9A9A;
}
input[type=range]#speed-setting:active::-webkit-slider-runnable-track,
input[type=range]#speed-setting:active::-moz-range-track {
  border-color: #C1C1C1;
}

#speed-value {
  font-size: var(--text-sm);
  padding-left: var(--space-xxs);
  animation: fadeOut 0.75s ease-in-out forwards;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.speed-labels {
  font-size: var(--text-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.speed-labels .icon svg {
  display: block;
  height: 20px;
  width: auto;
}
.speed-labels.speed-slow .icon svg {
  transform: scaleX(-1);
}


.choices {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: var(--space-md);
  gap: var(--space-md);
  overflow-x: scroll;
  padding-bottom: var(--space-sm);
}

article.choice {
  flex: 1;
  min-width: 240px;
  max-width: 300px;
  border: 1px solid rgb(var(--color-card));
  border-radius: var(--border-radius-md);
  padding: var(--space-md) var(--space-sm);
  max-height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
article.choice::before {
  position: absolute;
  inset: 0;
  content: '';
  background-color: rgba(var(--color-white), 0.80);
  z-index: -1;
}
article.choice[data-choice="1"] {
  background-color: rgba(var(--color-choice-1), 0.1);
  border-color: rgba(var(--color-choice-1), 1);
}
article.choice[data-choice="1"] button {
  border-color: rgba(var(--color-choice-1), 1);
}
article.choice[data-choice="2"] {
  background-color: rgba(var(--color-choice-2), 0.1);
  border-color: rgba(var(--color-choice-2), 1);
}
article.choice[data-choice="2"] button {
  border-color: rgba(var(--color-choice-2), 1);
}
article.choice[data-choice="3"] {
  background-color: rgba(var(--color-choice-3), 0.1);
  border-color: rgba(var(--color-choice-3), 1);
}
article.choice[data-choice="3"] button {
  border-color: rgba(var(--color-choice-3), 1);
}
article.choice[data-choice="4"] {
  background-color: rgba(var(--color-choice-4), 0.1);
  border-color: rgba(var(--color-choice-4), 1);
}
article.choice[data-choice="4"] button {
  border-color: rgba(var(--color-choice-4), 1);
}
article.choice[data-choice="5"] {
  background-color: rgba(var(--color-choice-5), 0.1);
  border-color: rgba(var(--color-choice-5), 1);
}
article.choice[data-choice="5"] button {
  border-color: rgba(var(--color-choice-5), 1);
}
article.choice[data-choice="6"] {
  background-color: rgba(var(--color-choice-6), 0.1);
  border-color: rgba(var(--color-choice-6), 1);
}
article.choice[data-choice="6"] button {
  border-color: rgba(var(--color-choice-6), 1);
}
article.choice[data-choice="7"] {
  background-color: rgba(var(--color-choice-7), 0.1);
  border-color: rgba(var(--color-choice-7), 1);
}
article.choice[data-choice="7"] button {
  border-color: rgba(var(--color-choice-7), 1);
}
article.choice[data-choice="8"] {
  background-color: rgba(var(--color-choice-8), 0.1);
  border-color: rgba(var(--color-choice-8), 1);
}
article.choice[data-choice="8"] button {
  border-color: rgba(var(--color-choice-8), 1);
}
article.choice[data-choice="9"] {
  background-color: rgba(var(--color-choice-9), 0.1);
  border-color: rgba(var(--color-choice-9), 1);
}
article.choice[data-choice="9"] button {
  border-color: rgba(var(--color-choice-9), 1);
}
article.choice[data-choice="10"] {
  background-color: rgba(var(--color-choice-10), 0.1);
  border-color: rgba(var(--color-choice-10), 1);
}
article.choice[data-choice="10"] button {
  border-color: rgba(var(--color-choice-10), 1);
}
article.choice[data-choice="11"] {
  background-color: rgba(var(--color-choice-11), 0.1);
  border-color: rgba(var(--color-choice-11), 1);
}
article.choice[data-choice="11"] button {
  border-color: rgba(var(--color-choice-11), 1);
}
article.choice[data-choice="12"] {
  background-color: rgba(var(--color-choice-12), 0.1);
  border-color: rgba(var(--color-choice-12), 1);
}
article.choice[data-choice="12"] button {
  border-color: rgba(var(--color-choice-12), 1);
}
article.choice[data-choice="13"] {
  background-color: rgba(var(--color-choice-13), 0.1);
  border-color: rgba(var(--color-choice-13), 1);
}
article.choice[data-choice="13"] button {
  border-color: rgba(var(--color-choice-13), 1);
}
article.choice[data-choice="14"] {
  background-color: rgba(var(--color-choice-14), 0.1);
  border-color: rgba(var(--color-choice-14), 1);
}
article.choice[data-choice="14"] button {
  border-color: rgba(var(--color-choice-14), 1);
}
article.choice[data-choice="15"] {
  background-color: rgba(var(--color-choice-15), 0.1);
  border-color: rgba(var(--color-choice-15), 1);
}
article.choice[data-choice="15"] button {
  border-color: rgba(var(--color-choice-15), 1);
}
article.choice[data-choice="16"] {
  background-color: rgba(var(--color-choice-16), 0.1);
  border-color: rgba(var(--color-choice-16), 1);
}
article.choice[data-choice="16"] button {
  border-color: rgba(var(--color-choice-16), 1);
}
article.choice[data-choice="17"] {
  background-color: rgba(var(--color-choice-17), 0.1);
  border-color: rgba(var(--color-choice-17), 1);
}
article.choice[data-choice="17"] button {
  border-color: rgba(var(--color-choice-17), 1);
}
article.choice[data-choice="18"] {
  background-color: rgba(var(--color-choice-18), 0.1);
  border-color: rgba(var(--color-choice-18), 1);
}
article.choice[data-choice="18"] button {
  border-color: rgba(var(--color-choice-18), 1);
}
article.choice[data-choice="19"] {
  background-color: rgba(var(--color-choice-19), 0.1);
  border-color: rgba(var(--color-choice-19), 1);
}
article.choice[data-choice="19"] button {
  border-color: rgba(var(--color-choice-19), 1);
}
article.choice[data-choice="20"] {
  background-color: rgba(var(--color-choice-20), 0.1);
  border-color: rgba(var(--color-choice-20), 1);
}
article.choice[data-choice="20"] button {
  border-color: rgba(var(--color-choice-20), 1);
}


.choice h3 {
  margin-top: 0;
  font-size: var(--text-lg);
}

.choice ul {
  padding: 0;
  margin: var(--space-md) 0 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow-y: scroll;
}

.choice button {
  padding: var(--space-sm);
  border: 1px solid rgb(var(--color-button));
  border-radius: var(--border-radius-md);
  background-color: rgb(var(--color-white));
  box-shadow: var(--shadow-subtle);
  cursor: pointer;
  opacity: 0.9;
  transition: 100ms all ease-in-out;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  width: 100%;
}

.choice button:hover {
  transform: scale(1.05);
  opacity: 1;
}

.choice button span.japanese {
  font-size: var(--text-sm);
  font-weight: 300;
}


@media (max-width: 600px) {
  .container-sm {
    max-width: 100%;
  }
  .title {
    font-size: var(--text-xl);
  }
  .description {
    font-size: var(--text-sm);
  }

  .sentence-card {
    margin-bottom: var(--space-md);
    padding: var(--space-md);
  }

  .settings {
    gap: var(--space-md);
  }

  .sound {
    padding: var(--space-sm) var(--space-md);
  }

  .sound-text .english {
    font-size: var(--text-sm);

  }
  .sound-text .japanese {
    font-size: var(--text-xxs);
    margin-top: 0;
  }

  .speed {
    font-size: var(--text-sm);
  }
}