/* reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:where([hidden]:not([hidden="until-found"])) {
  display: none !important;
}

:where(html) {
  -webkit-text-size-adjust: none;
  color-scheme: dark light;
  tab-size: 2;
}

@media (prefers-reduced-motion: no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth;
  }
}

:where(body) {
  line-height: 1.5;
  font-family: system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

:where(button) {
  all: unset;
}

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
}

:where(textarea) {
  resize: vertical;
  resize: block;
}

:where(button, label, select, summary, [role="button"], [role="option"]) {
  cursor: pointer;
}

:where(:disabled) {
  cursor: not-allowed;
}

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
  cursor: not-allowed;
}

:where(a) {
  color: inherit;
  text-underline-offset: 0.2ex;
}

:where(ul, ol) {
  list-style: none;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

:where(img, picture, svg, video) {
  max-inline-size: 100%;
  block-size: auto;
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

:where(h1, h2, h3) {
  line-height: calc(1em + 0.5rem);
  text-wrap: balance;
}

:where(hr) {
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  block-size: 0;
  overflow: visible;
}

:where(:focus-visible) {
  outline: 3px solid CanvasText;
  box-shadow: 0 0 0 5px Canvas;
  outline-offset: 1px;
}

:where(:focus-visible, :target) {
  scroll-margin-block: 8vh;
}

:where(.visually-hidden:not(:focus-within, :active)) {
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*---------------------------------------------------------------------------*/

:root {
  --font-title: "Yusei Magic", sans-serif;
  --font-base: "Noto Sans JP", sans-serif;
  --font-icons: "Material Icons";

  font-family: var(--font-base);
  font-optical-sizing: auto;
  background: hsl(220 80% 100%);
}

.l-main {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 100vh;
  background: hsl(220 80% 100%);
}

.c-page-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2rem, 3.3vw, 2.5rem);
  font-weight: normal;
  font-family: var(--font-title);
  letter-spacing: 0.3em;
  line-height: 1.4;
  color: hsl(20 80% 70%);

  @media (width < 500px) {
    font-size: min(2rem, 7vw);
    letter-spacing: 0.2em;
  }

  &.m-main {
    &::before {
      font-size: 1em;
      content: "🗾";
    }

    &::after {
      font-size: 1em;
      content: "🧭";
    }
  }
}

.l-modal {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -99;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;

  &.is-show {
    z-index: 99;
    visibility: visible;
    opacity: 1;
  }
}

.c-output-text {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 3rem;
  border-radius: 1rem;
  border: 1px solid hsl(220 60% 60%);
  background: hsl(220 60% 98%);
  text-align: center;
  font-size: 1.75rem;
  font-family: var(--font-title);
  color: hsl(220 40% 30%);
}

.c-japan-map {
  width: 100%;
  aspect-ratio: 1/ 1;
  margin-top: 0.5rem;
  padding: 1.25rem;
  border-radius: 1.25rem;
  background: hsl(220 80% 90%);
  --target-color: hsl(0 90% 70%);
  --selected-color: hsl(100 60% 70%);

  & .is-active {
    fill: var(--target-color);
  }

  & :where(.is-selected) {
    fill: var(--selected-color);
  }
}

.c-check-list {
  display: flex;
  flex-flow: column;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 1.25rem;
  border: 1px solid hsl(220 80% 60%);
  color: hsl(220 60% 50%);
  font-family: var(--font-title);
}

.c-check-list__title {
  display: inline block;
  margin-left: 0.75rem;
  margin-right: 0;
  padding: 0 0.5rem;
  width: 9rem;
}

.c-check-list__group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: 0.5rem 0.25rem;

  @media (width > 500px) {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas:
      "hkd .   .   .   ."
      "amr iwt myg .   ."
      "akt ygt hks .   ."
      "ibr tcg gnm stm ."
      "cba tky kng .   ."
      "ngt tym isk hki ."
      "ymn nan ghu .   ."
      "szo aic mie .   ."
      "shg kyt osk .   ."
      "hyg nar wky .   ."
      "ttr smn oky hrs ygc"
      "tks kgw ehm kch ."
      "hko sag ngs kmm ."
      "oit myz kgs okn .";

    & > li:has(#c01) {
      grid-area: hkd;
    }

    & > li:has(#c02) {
      grid-area: amr;
    }

    & > li:has(#c03) {
      grid-area: iwt;
    }

    & > li:has(#c04) {
      grid-area: myg;
    }

    & > li:has(#c05) {
      grid-area: akt;
    }

    & > li:has(#c06) {
      grid-area: ygt;
    }

    & > li:has(#c07) {
      grid-area: hks;
    }

    & > li:has(#c08) {
      grid-area: ibr;
    }

    & > li:has(#c09) {
      grid-area: tcg;
    }

    & > li:has(#c10) {
      grid-area: gnm;
    }

    & > li:has(#c11) {
      grid-area: stm;
    }

    & > li:has(#c12) {
      grid-area: cba;
    }

    & > li:has(#c13) {
      grid-area: tky;
    }

    & > li:has(#c14) {
      grid-area: kng;
    }

    & > li:has(#c15) {
      grid-area: ngt;
    }

    & > li:has(#c16) {
      grid-area: tym;
    }

    & > li:has(#c17) {
      grid-area: isk;
    }

    & > li:has(#c18) {
      grid-area: hki;
    }

    & > li:has(#c19) {
      grid-area: ymn;
    }

    & > li:has(#c20) {
      grid-area: nan;
    }

    & > li:has(#c21) {
      grid-area: ghu;
    }

    & > li:has(#c22) {
      grid-area: szo;
    }

    & > li:has(#c23) {
      grid-area: aic;
    }

    & > li:has(#c24) {
      grid-area: mie;
    }

    & > li:has(#c25) {
      grid-area: shg;
    }

    & > li:has(#c26) {
      grid-area: kyt;
    }

    & > li:has(#c27) {
      grid-area: osk;
    }

    & > li:has(#c28) {
      grid-area: hyg;
    }

    & > li:has(#c29) {
      grid-area: nar;
    }

    & > li:has(#c30) {
      grid-area: wky;
    }

    & > li:has(#c31) {
      grid-area: ttr;
    }

    & > li:has(#c32) {
      grid-area: smn;
    }

    & > li:has(#c33) {
      grid-area: oky;
    }

    & > li:has(#c34) {
      grid-area: hrs;
    }

    & > li:has(#c35) {
      grid-area: ygc;
    }

    & > li:has(#c36) {
      grid-area: tks;
    }

    & > li:has(#c37) {
      grid-area: kgw;
    }

    & > li:has(#c38) {
      grid-area: ehm;
    }

    & > li:has(#c39) {
      grid-area: kch;
    }

    & > li:has(#c40) {
      grid-area: hko;
    }

    & > li:has(#c41) {
      grid-area: sag;
    }

    & > li:has(#c42) {
      grid-area: ngs;
    }

    & > li:has(#c43) {
      grid-area: kmm;
    }

    & > li:has(#c44) {
      grid-area: oit;
    }

    & > li:has(#c45) {
      grid-area: myz;
    }

    & > li:has(#c46) {
      grid-area: kgs;
    }

    & > li:has(#c47) {
      grid-area: okn;
    }
  }
}

.c-check-list__container {
  display: grid;
  align-items: center;
  width: 5rem;

  :where(& > *) {
    grid-area: 1/ 1/ 2/ 2;
  }
}

.c-check-list__input {
  z-index: 0;
  opacity: 0;
}

.c-check-list__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 1;
  font-size: 0.9rem;
  transition: color 0.3s;

  &:hover {
    color: hsl(20 80% 80%);
  }

  &:before {
    content: "";
    width: 0.8rem;
    margin-top: 0.1rem;
    aspect-ratio: 1/ 1;
    border-radius: 0.2rem;
    border: 1px solid currentcolor;
    font-size: 0.6rem;
    text-align: center;
    line-height: 1;
  }

  :has(:checked) > &:before {
    border: 1px solid hsl(20 60% 50%);
    background: hsl(20 60% 80%);
  }
}

.c-controller {
  display: grid;
  border: none;

  & > * {
    grid-area: 1/ 1/ 2/ 2;
  }
}

.c-radio__box {
  display: grid;

  & > * {
    grid-area: 1/ 1/ 2/ 2;
  }

  &:has(:checked) {
    z-index: 0;
    opacity: 0;
  }

  &:not(:has(:checked)) {
    z-index: 1;
    opacity: 1;
  }
}

.c-button {
  display: inline flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  height: 100%;
  border-radius: 1rem;
  border: 1px solid hsl(220 60% 60%);
  font-family: var(--font-title);
  font-size: 0.6rem;
  transition: all 0.25s;

  @media (width < 500px) {
    font-size: 0.4rem;
  }

  &::before {
    font-size: 1.2rem;
    font-family: var(--font-icons);
    line-height: 1;
  }

  &.m-mini {
    height: 1.5rem;
    margin: 0 0.2rem;
    width: 1.5rem;
    border-radius: 0.25rem;
    font-size: 0.3rem;

    &::before {
      font-size: 0.8rem;
    }
  }

  &.m-start {
    background: hsl(220 60% 88%);
    color: hsl(220 60% 40%);

    &:hover {
      background: hsl(220 60% 80%);
    }

    &::before {
      content: "\e037";
    }
  }

  &.m-stop {
    background: hsl(220 60% 40%);
    color: hsl(220 60% 80%);

    &:hover {
      background: hsl(220 60% 60%);
      color: hsl(220 60% 90%);
    }

    &::before {
      content: "\e047";
    }
  }

  &.m-reset {
    border: 1px solid hsl(20 60% 60%);
    background: hsl(20 80% 90%);
    color: hsl(20 80% 50%);

    &:not(:disabled):hover {
      background: hsl(20 80% 80%);
    }

    &:active {
      background: hsl(20 80% 80%);
      color: hsl(20 60% 90%);
    }

    &::before {
      content: "\e5d5";
    }
  }

  &.m-save,
  &.m-load,
  &.m-delete {
    background: hsl(220 60% 98%);
    color: hsl(220 60% 80%);

    &:hover {
      background: hsl(220 60% 94%);
      color: hsl(220 60% 60%);
    }

    &:active {
      background: hsl(20 80% 86%);
    }
  }

  &.m-save {
    &::before {
      content: "\e171";
    }
  }

  &.m-load {
    &::before {
      content: "\e9fc";
    }
  }

  &.m-delete {
    &::before {
      content: "\e872";
    }
  }

  &.m-how-to-play {
    border: 1px solid hsl(160 60% 60%);
    background: hsl(160 60% 94%);
    color: hsl(160 40% 50%);

    &:hover {
      background: hsl(160 60% 86%);
      color: hsl(160 40% 40%);
    }

    &:active {
      background: hsl(160 80% 78%);
    }

    &::before {
      content: "\e887";
    }
  }

  &:disabled {
    opacity: 0.4;
  }
}

.c-radio__input {
  opacity: 0;
  z-index: 0;
}

.c-circle-button {
  display: grid;
  place-items: center;
  aspect-ratio: 1/ 1;
  border-radius: 50%;
  background: hsl(20 80% 60%);
  color: hsl(20 100% 100%);

  &:hover {
    background: hsl(20 80% 80%);
  }
}

.c-copyright-text {
  font-size: 0.8rem;

  & > a {
    font-weight: 900;

    &:hover {
      color: hsl(20 60% 60%);
    }
  }
}

.c-modal-screen {
  background: hsl(220 20% 20% / 0.8);
}

.p-roulette {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title  title"
    "output button"
    "map    list"
    "map    list";
  gap: 1rem 1.5rem;
  width: min(100%, 60rem);

  @media (width < 1000px) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "button"
      "output"
      "map"
      "list";
    gap: 1rem 1.5rem;
    width: min(96%, 30rem);
  }
}

.p-roulette__title {
  grid-area: title;
  text-align: center;
}

.p-roulette__output {
  grid-area: output;
}

.p-roulette__buttons {
  grid-area: button;
  display: flex;
  justify-content: space-between;
  min-height: 3rem;
  gap: 5%;

  @media (width < 500px) {
    min-height: 2.5rem;
  }

  & > * {
    flex: 1 1;
  }
}

.p-roulette__map {
  grid-area: map;
}

.p-roulette__list {
  grid-area: list;
}

.p-copyright {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  gap: 0.25rem;
  width: min(100%, 60rem);
  color: hsl(220 60% 60%);

  @media (width < 1000px) {
    align-items: flex-start;
    width: min(96%, 30rem);
  }
}

.p-how-to-play {
  display: grid;
  place-items: center;
  width: min(96%, 50rem);
  padding: 1rem 1rem 2rem;
  border-radius: 2rem;
  background: hsl(220 60% 98%);

  & > * {
    grid-area: 1/ 1/ 2/ 2;
  }
}

.p-how-to-play__button {
  place-self: start end;
  width: 1.8rem;
  z-index: 30;
}

.p-how-to-play__body {
  display: flex;
  flex-flow: column;
  gap: 0.5rem;
}

.p-how-to-play__list {
  display: flex;
  flex-flow: column;
  padding-left: 2rem;
  gap: 1rem;
  color: hsl(220 60% 40%);
  list-style: disc;

  & > li {
    vertical-align: middle;
  }

  @media (width < 1000px) {
    font-size: 0.8rem;
  }
}

.p-how-to-play__sub-list {
  display: flex;
  flex-flow: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
  color: hsl(220 60% 40%);

  & > li {
    display: flex;
    align-items: center;
    gap: 1rem;

    & > span {
      flex-shrink: 0;
    }
  }
}

.u-top-02rem {
  position: relative;
  top: -0.1rem;
}