@charset 'UTF-8';
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);

:root {
  --c-base: #30404f;
}

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  margin: auto;
  padding-inline: 1rem;
  max-width: 768px;
  min-height: 100vh;
  font-size: 1.0625rem;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.7;
  color: var(--c-base);
  hanging-punctuation: allow-end;
}

body.-concentrated {
  grid-template-rows: 1fr auto auto;
}

.Title {
  margin-block: 0;
  text-align: center;
}

.Copy {
  margin-block: 0;
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
}

.Excuse {
  margin-block-start: 0;
  margin-block-end: 0.5rem;
  text-align: center;
}

.Excuse::before,
.Excuse::after {
  content: "〜";
}

.-concentrated :is(.Title, .Copy, .Excuse, .How) {
  display: none;
}

.Cabinet {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block-start: 3rem;
}

.-concentrated .Cabinet {
  margin-block-start: 0;
}

.Mode {
  display: flex;
  gap: 2rem;
}

.Setting {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.Difficulty {
  width: 150px;
}

.DifficultyInput > * {
  display: block;
}

.Slot {
  margin-block-start: 0.5rem;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, 1fr);
}

.Reel {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

.Pict {
  aspect-ratio: 1 / 1;
  width: 100%;
  border: 5px solid #000;
  border-radius: 0.25rem;
  background-color: #000;
  background-size: contain;
}

.Pict.-tkg000 {
  /* プリロードがわり */
  background-image: url(tkg/001.jpg), url(tkg/002.jpg), url(tkg/003.jpg),
    url(tkg/004.jpg), url(tkg/005.jpg), url(tkg/006.jpg), url(tkg/007.jpg),
    url(tkg/008.jpg), url(tkg/009.jpg), url(tkg/010.jpg), url(tkg/011.jpg),
    url(tkg/012.jpg), url(tkg/013.jpg), url(tkg/014.jpg), url(tkg/015.jpg),
    url(tkg/016.jpg), url(tkg/017.jpg), url(tkg/018.jpg), url(tkg/019.jpg),
    url(tkg/020.jpg), url(tkg/021.jpg), url(tkg/022.jpg), url(tkg/023.jpg),
    url(tkg/024.jpg), url(tkg/025.jpg), url(tkg/026.jpg), url(tkg/027.jpg),
    url(tkg/028.jpg), url(tkg/029.jpg), url(tkg/030.jpg), url(tkg/031.jpg),
    url(tkg/032.jpg), url(tkg/033.jpg), url(tkg/034.jpg), url(tkg/035.jpg),
    url(tkg/036.jpg), url(tkg/037.jpg), url(tkg/038.jpg), url(tkg/039.jpg),
    url(tkg/040.jpg), url(tkg/041.jpg), url(tkg/042.jpg), url(tkg/043.jpg),
    url(tkg/044.jpg), url(tkg/045.jpg), url(tkg/046.jpg), url(tkg/047.jpg),
    url(tkg/048.jpg), url(tkg/049.jpg), url(tkg/050.jpg), url(tkg/051.jpg),
    url(tkg/052.jpg), url(tkg/053.jpg), url(tkg/054.jpg), url(tkg/055.jpg),
    url(tkg/056.jpg), url(tkg/057.jpg), url(tkg/058.jpg), url(tkg/059.jpg),
    url(tkg/060.jpg), url(tkg/061.jpg), url(tkg/062.jpg), url(tkg/063.jpg),
    url(tkg/064.jpg), url(tkg/065.jpg), url(tkg/066.jpg), url(tkg/067.jpg),
    url(tkg/068.jpg), url(tkg/069.jpg), url(tkg/070.jpg), url(tkg/071.jpg),
    url(tkg/072.jpg), url(tkg/073.jpg), url(tkg/074.jpg), url(tkg/075.jpg),
    url(tkg/076.jpg), url(tkg/077.jpg), url(tkg/078.jpg), url(tkg/079.jpg),
    url(tkg/080.jpg), url(tkg/081.jpg), url(tkg/082.jpg), url(tkg/083.jpg),
    url(tkg/084.jpg), url(tkg/085.jpg), url(tkg/086.jpg), url(tkg/087.jpg),
    url(tkg/088.jpg), url(tkg/089.jpg), url(tkg/090.jpg), url(tkg/091.jpg),
    url(tkg/092.jpg), url(tkg/093.jpg), url(tkg/094.jpg), url(tkg/095.jpg),
    url(tkg/096.jpg), url(tkg/097.jpg), url(tkg/098.jpg), url(tkg/099.jpg),
    url(tkg/100.jpg), url(tkg/101.jpg), url(tkg/102.jpg), url(tkg/103.jpg),
    url(tkg/104.jpg), url(tkg/105.jpg), url(tkg/106.jpg), url(tkg/107.jpg),
    url(tkg/108.jpg), url(tkg/109.jpg), url(tkg/110.jpg), url(tkg/111.jpg),
    url(tkg/112.jpg), url(tkg/113.jpg), url(tkg/114.jpg), url(tkg/115.jpg),
    url(tkg/116.jpg), url(tkg/117.jpg), url(tkg/118.jpg), url(tkg/119.jpg),
    url(tkg/120.jpg);
}

.Pict.-tkg001 {
  background-image: url(tkg/001.jpg);
}
.Pict.-tkg002 {
  background-image: url(tkg/002.jpg);
}
.Pict.-tkg003 {
  background-image: url(tkg/003.jpg);
}
.Pict.-tkg004 {
  background-image: url(tkg/004.jpg);
}
.Pict.-tkg005 {
  background-image: url(tkg/005.jpg);
}
.Pict.-tkg006 {
  background-image: url(tkg/006.jpg);
}
.Pict.-tkg007 {
  background-image: url(tkg/007.jpg);
}
.Pict.-tkg008 {
  background-image: url(tkg/008.jpg);
}
.Pict.-tkg009 {
  background-image: url(tkg/009.jpg);
}
.Pict.-tkg010 {
  background-image: url(tkg/010.jpg);
}
.Pict.-tkg011 {
  background-image: url(tkg/011.jpg);
}
.Pict.-tkg012 {
  background-image: url(tkg/012.jpg);
}
.Pict.-tkg013 {
  background-image: url(tkg/013.jpg);
}
.Pict.-tkg014 {
  background-image: url(tkg/014.jpg);
}
.Pict.-tkg015 {
  background-image: url(tkg/015.jpg);
}
.Pict.-tkg016 {
  background-image: url(tkg/016.jpg);
}
.Pict.-tkg017 {
  background-image: url(tkg/017.jpg);
}
.Pict.-tkg018 {
  background-image: url(tkg/018.jpg);
}
.Pict.-tkg019 {
  background-image: url(tkg/019.jpg);
}
.Pict.-tkg020 {
  background-image: url(tkg/020.jpg);
}
.Pict.-tkg021 {
  background-image: url(tkg/021.jpg);
}
.Pict.-tkg022 {
  background-image: url(tkg/022.jpg);
}
.Pict.-tkg023 {
  background-image: url(tkg/023.jpg);
}
.Pict.-tkg024 {
  background-image: url(tkg/024.jpg);
}
.Pict.-tkg025 {
  background-image: url(tkg/025.jpg);
}
.Pict.-tkg026 {
  background-image: url(tkg/026.jpg);
}
.Pict.-tkg027 {
  background-image: url(tkg/027.jpg);
}
.Pict.-tkg028 {
  background-image: url(tkg/028.jpg);
}
.Pict.-tkg029 {
  background-image: url(tkg/029.jpg);
}
.Pict.-tkg030 {
  background-image: url(tkg/030.jpg);
}
.Pict.-tkg031 {
  background-image: url(tkg/031.jpg);
}
.Pict.-tkg032 {
  background-image: url(tkg/032.jpg);
}
.Pict.-tkg033 {
  background-image: url(tkg/033.jpg);
}
.Pict.-tkg034 {
  background-image: url(tkg/034.jpg);
}
.Pict.-tkg035 {
  background-image: url(tkg/035.jpg);
}
.Pict.-tkg036 {
  background-image: url(tkg/036.jpg);
}
.Pict.-tkg037 {
  background-image: url(tkg/037.jpg);
}
.Pict.-tkg038 {
  background-image: url(tkg/038.jpg);
}
.Pict.-tkg039 {
  background-image: url(tkg/039.jpg);
}
.Pict.-tkg040 {
  background-image: url(tkg/040.jpg);
}
.Pict.-tkg041 {
  background-image: url(tkg/041.jpg);
}
.Pict.-tkg042 {
  background-image: url(tkg/042.jpg);
}
.Pict.-tkg043 {
  background-image: url(tkg/043.jpg);
}
.Pict.-tkg044 {
  background-image: url(tkg/044.jpg);
}
.Pict.-tkg045 {
  background-image: url(tkg/045.jpg);
}
.Pict.-tkg046 {
  background-image: url(tkg/046.jpg);
}
.Pict.-tkg047 {
  background-image: url(tkg/047.jpg);
}
.Pict.-tkg048 {
  background-image: url(tkg/048.jpg);
}
.Pict.-tkg049 {
  background-image: url(tkg/049.jpg);
}
.Pict.-tkg050 {
  background-image: url(tkg/050.jpg);
}
.Pict.-tkg051 {
  background-image: url(tkg/051.jpg);
}
.Pict.-tkg052 {
  background-image: url(tkg/052.jpg);
}
.Pict.-tkg053 {
  background-image: url(tkg/053.jpg);
}
.Pict.-tkg054 {
  background-image: url(tkg/054.jpg);
}
.Pict.-tkg055 {
  background-image: url(tkg/055.jpg);
}
.Pict.-tkg056 {
  background-image: url(tkg/056.jpg);
}
.Pict.-tkg057 {
  background-image: url(tkg/057.jpg);
}
.Pict.-tkg058 {
  background-image: url(tkg/058.jpg);
}
.Pict.-tkg059 {
  background-image: url(tkg/059.jpg);
}
.Pict.-tkg060 {
  background-image: url(tkg/060.jpg);
}
.Pict.-tkg061 {
  background-image: url(tkg/061.jpg);
}
.Pict.-tkg062 {
  background-image: url(tkg/062.jpg);
}
.Pict.-tkg063 {
  background-image: url(tkg/063.jpg);
}
.Pict.-tkg064 {
  background-image: url(tkg/064.jpg);
}
.Pict.-tkg065 {
  background-image: url(tkg/065.jpg);
}
.Pict.-tkg066 {
  background-image: url(tkg/066.jpg);
}
.Pict.-tkg067 {
  background-image: url(tkg/067.jpg);
}
.Pict.-tkg068 {
  background-image: url(tkg/068.jpg);
}
.Pict.-tkg069 {
  background-image: url(tkg/069.jpg);
}
.Pict.-tkg070 {
  background-image: url(tkg/070.jpg);
}
.Pict.-tkg071 {
  background-image: url(tkg/071.jpg);
}
.Pict.-tkg072 {
  background-image: url(tkg/072.jpg);
}
.Pict.-tkg073 {
  background-image: url(tkg/073.jpg);
}
.Pict.-tkg074 {
  background-image: url(tkg/074.jpg);
}
.Pict.-tkg075 {
  background-image: url(tkg/075.jpg);
}
.Pict.-tkg076 {
  background-image: url(tkg/076.jpg);
}
.Pict.-tkg077 {
  background-image: url(tkg/077.jpg);
}
.Pict.-tkg078 {
  background-image: url(tkg/078.jpg);
}
.Pict.-tkg079 {
  background-image: url(tkg/079.jpg);
}
.Pict.-tkg080 {
  background-image: url(tkg/080.jpg);
}
.Pict.-tkg081 {
  background-image: url(tkg/081.jpg);
}
.Pict.-tkg082 {
  background-image: url(tkg/082.jpg);
}
.Pict.-tkg083 {
  background-image: url(tkg/083.jpg);
}
.Pict.-tkg084 {
  background-image: url(tkg/084.jpg);
}
.Pict.-tkg085 {
  background-image: url(tkg/085.jpg);
}
.Pict.-tkg086 {
  background-image: url(tkg/086.jpg);
}
.Pict.-tkg087 {
  background-image: url(tkg/087.jpg);
}
.Pict.-tkg088 {
  background-image: url(tkg/088.jpg);
}
.Pict.-tkg089 {
  background-image: url(tkg/089.jpg);
}
.Pict.-tkg090 {
  background-image: url(tkg/090.jpg);
}
.Pict.-tkg091 {
  background-image: url(tkg/091.jpg);
}
.Pict.-tkg092 {
  background-image: url(tkg/092.jpg);
}
.Pict.-tkg093 {
  background-image: url(tkg/093.jpg);
}
.Pict.-tkg094 {
  background-image: url(tkg/094.jpg);
}
.Pict.-tkg095 {
  background-image: url(tkg/095.jpg);
}
.Pict.-tkg096 {
  background-image: url(tkg/096.jpg);
}
.Pict.-tkg097 {
  background-image: url(tkg/097.jpg);
}
.Pict.-tkg098 {
  background-image: url(tkg/098.jpg);
}
.Pict.-tkg099 {
  background-image: url(tkg/099.jpg);
}
.Pict.-tkg100 {
  background-image: url(tkg/100.jpg);
}
.Pict.-tkg101 {
  background-image: url(tkg/101.jpg);
}
.Pict.-tkg102 {
  background-image: url(tkg/102.jpg);
}
.Pict.-tkg103 {
  background-image: url(tkg/103.jpg);
}
.Pict.-tkg104 {
  background-image: url(tkg/104.jpg);
}
.Pict.-tkg105 {
  background-image: url(tkg/105.jpg);
}
.Pict.-tkg106 {
  background-image: url(tkg/106.jpg);
}
.Pict.-tkg107 {
  background-image: url(tkg/107.jpg);
}
.Pict.-tkg108 {
  background-image: url(tkg/108.jpg);
}
.Pict.-tkg109 {
  background-image: url(tkg/109.jpg);
}
.Pict.-tkg110 {
  background-image: url(tkg/110.jpg);
}
.Pict.-tkg111 {
  background-image: url(tkg/111.jpg);
}
.Pict.-tkg112 {
  background-image: url(tkg/112.jpg);
}
.Pict.-tkg113 {
  background-image: url(tkg/113.jpg);
}
.Pict.-tkg114 {
  background-image: url(tkg/114.jpg);
}
.Pict.-tkg115 {
  background-image: url(tkg/115.jpg);
}
.Pict.-tkg116 {
  background-image: url(tkg/116.jpg);
}
.Pict.-tkg117 {
  background-image: url(tkg/117.jpg);
}
.Pict.-tkg118 {
  background-image: url(tkg/118.jpg);
}
.Pict.-tkg119 {
  background-image: url(tkg/119.jpg);
}
.Pict.-tkg120 {
  background-image: url(tkg/120.jpg);
}

.-invisible {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 4px !important;
  height: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  opacity: 0 !important;
  overflow: hidden !important;
  visibility: visible !important;
}

.Button {
  all: unset;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  place-content: center;
  border-color: rgba(0, 0, 0, 0.65);
  border-width: 3px;
  border-style: solid;
  border-radius: 0.25rem;
  color: #fff;
  font-weight: bold;
  line-height: 3;
  text-shadow: 0 -2px 0 #000;
  background-color: darkgray;
  box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.9) inset,
    0 0 4px 0 rgba(0, 0, 0, 0.5), 0 5px 0 0 #000;
}

.Button[hidden] {
  display: none;
}

.Button:hover {
  translate: 0 -2px;
  box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.9) inset, 0 7px 0 0 #000;
}

.Button:focus-visible {
  translate: 0 -2px;
  box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.9) inset, 0 7px 0 0 #000,
    0 0 0 2px #fff, 0 7px 0 2px #fff, 0 0 0 4px #00f, 0 7px 0 4px #00f;
}

.Button:active {
  translate: 0 5px;
  box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.9) inset,
    0 0 4px 0 rgba(0, 0, 0, 0.5);
}

.Button:disabled {
  cursor: default;
  translate: 0 5px;
  color: #fffc;
  text-shadow: none;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
}

.Button::before,
.Button::after {
  pointer-events: none;
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0;
}

.Button::before {
  top: 0;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.2)
  );
  mix-blend-mode: overlay;
}

.Button::after {
  bottom: 0;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1)
  );
  mix-blend-mode: overlay;
}

.Button:hover::after,
.Button:focus-visible::after {
  mix-blend-mode: color-dodge;
}

.Button:disabled::before,
.Button:disabled::after {
  mix-blend-mode: soft-light;
}

.-start {
  background-color: #00bb00;
}

.-stop {
  letter-spacing: -0.15rem;
  background-color: #00bbff;
}

.-stop:disabled {
  background-color: #bb0000;
}

.-retry {
  letter-spacing: -0.15rem;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  background-color: #ffbb00;
}

.-succeed {
  text-shadow: 0 0 5px #000;
  border-color: rgba(255, 255, 255, 0.75);
  background-color: #ffd700;
  background-image: linear-gradient(
    45deg,
    #f00,
    #ff0,
    #0f0,
    #0ff,
    #00f,
    #f0f,
    #f00,
    #ff0
  );
  background-size: 800% 100%;
  animation: succeed 5s linear infinite;
}

@keyframes succeed {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 99% 50%;
  }
}

.-failed {
  background-color: #bb00ff;
}

.Shuffling:not([hidden]),
.Waiting:not([hidden]),
.Succeed:not([hidden]),
.Failed:not([hidden]) {
  font-weight: bold;
  text-align: center;
  display: grid;
  gap: 1rem;
}

.Address {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  font-size: 0.9375rem;
}

.Tkg {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.Tkg img {
  width: 100%;
  vertical-align: top;
}