/* Colors and dimensions */
:root {
  --white:   #fff;
  --light:   #ddd;
  --btn:     #060;
  --brdr:    #090;
  --dark:    #222;
  --black:   #000;
  --bg:      #030;
  --bar-bg:  #fc0;

  --form:    300px;
  --view:    150px;
  --side:      3px;
  --fill:      6px;
  --pad:       8px;

  /* Account for 1px border when spacing elements */
  --b-size:   1px;
  --space:   100px; /* (--form - --view) / 2 - 2 * --b-size */
  --gutter:  21px;

  /* ROTATING THE REELS */

  /* How many symbols are there in the counter style? */
  --total:    18;
  /* How what angle does each li cover around a full circle? */
  --arc:      calc(360 / var(--total));

  /* Dimension and placement of fruit emojis */
  --f-size:   27px;
  --half:     calc(0.5 * var(--f-size));
  --origin:   0 var(--half) var(--radius);

  /* Circumference, diameter and radius of each reel */
  --spacing:  1.5;
  --girth:    calc(var(--total) * var(--f-size) * var(--spacing));
  --diameter: calc(var(--girth) / 3.1415962);
  --radius:   calc(var(--diameter) / 2);

  /* Placement in window ( KLUDGE = 8px ) */
  --frame:    110px;
  --li-top:   calc(var(--radius) - var(--half) - 8px);
  --left:     10px; /* to centre fruit */
  --ol-top:   calc(var(--frame) / 2 - var(--radius));
  --bar-in:   36px; /* used to centre orange win bar */
  --gap:       2px; /* gap between reels */

  --duration: 2s;
  --final:    calc(2 * var(--duration));

  /* Shading of curved reels */
  --drum: linear-gradient(
    0deg,
    #000   0%,
    #fff  50%,
    #000 100%
  );
  --shadow: linear-gradient(
    0deg,
    #0009   0%,
    #fff0  50%,
    #0009 100%
  );

  /* Initial mood emoji: slightly happy */
  --mood: 5;
  --margin: 0 -8px;
}

body {
  /* Fill the viewport */
  margin: 0;
  padding: 0;
  min-height: 100vh;

  /* Place the form element centrally */
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 16px;
  font-family: Arial, sans-serif;
  color: var(--light);
  background-color: var(--dark);
}

form {
  position: relative;
  width: var(--form);
  height: var(--view);
  background-color: var(--bg);
}

form,
.reels {
  border: var(--b-size) solid var(--white);
  border-radius: var(--pad);
  box-sizing: border-box;
  overflow: hidden;
}

div.reels {
  display: flex;
  position: absolute;
  top: var(--side);
  left: var(--gutter);

  width: var(--view);
  height: var(--frame);
}

div.win-line {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--bar-in);
  bottom: var(--bar-in);
  background-color: var(--bar-bg);
}

/* Spin buttons */

input {
  position: absolute;
  left: -99vw;
}

div.buttons {
  position: absolute;
  bottom: var(--side);
  left: var(--gutter);
  display: flex;
  justify-content: space-between;
  width: var(--view);
  pointer-events: none;
}

div.buttons .button {
  flex: 1;
}

.button {
  background-color: var(--btn);
  border: 1px outset var(--brdr);
  border-radius: var(--pad);
  padding: var(--side) var(--pad);
  cursor: pointer;
  user-select: none;
  pointer-events: all;
}

.button:hover {
  color: var(--white);
}

.button:hover:active,
.button:has(:checked) {
  border-style: inset;
  border-color: var(--btn);
  background-color: var(--bg);
}
.button:has(:checked) {
  color: var(--btn);
}


/* Reels */

ol {
  position: relative;
  top: var(--ol-top);

  height: var(--diameter);
  width: var(--f-size);
  background: var(--drum);
  list-style: none;
  margin: var(--gap);

  /* The reels will rotate, starting at an angle of 0.
   * A different animation will change this value for each reel.
   */
  --angle: 0;

  /* Ignore completed whole rotations */
  --trim: mod(var(--angle), 360);
  /* If each symbol is in a position from 0 <= place < 20,
   * where is the first symbol now?
   */
  --place: calc(var(--trim) / var(--arc));
  /* What fraction of a symbol size has it moved past the last
   * resting symbol position?
   */
  --fraction: mod(var(--place), 1);
  /* How many complete symbol positions has it moved? */
  --turn:  calc(var(--place) - var(--fraction));
  /* What angle of rotation does this fraction represent? */
  --twist: calc(var(--fraction) * var(--arc));
  /* What index number should the list start with, in order to
   * push the first symbol into its --turn position?
   */
  --first: mod(
    calc(var(--total) - var(--turn)), var(--total)
  );

  counter-set: index var(--first);

  animation-duration: var(--duration);
  animation-fill-mode: forwards;
  animation-iteration-count: 1; /* infinite; */
}

/* Place a shadow gradient over the list items */
ol::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #0000;
  background: var(--shadow);
}

/* Each reel has its own counter with fruit ordered differently */
ol.one li::before {
  content: counter(index, reel-one);
}
ol.two li::before {
  content: counter(index, reel-two);
}
ol.three li::before {
  content: counter(index, reel-three);
}


/* Style list items to simulate rotation around a reel */
li {
  position: absolute;
  top: var(--li-top);
  left: 0;
  font-size: var(--f-size);

  /* Prepare to rotate items about their x-axis */
  counter-increment: index;
  transform-origin: var(--origin);

  &:nth-child(1) {
    transform: rotateX(calc((var(--twist) - 100) * 1deg))
  }

  &:nth-child(2) {
    transform: rotateX(calc((var(--twist) - 80) * 1deg))
  }

  &:nth-child(3) {
    transform: rotateX(calc((var(--twist) - 60) * 1deg))
  }

  &:nth-child(4) {
    transform:rotateX(calc((var(--twist) - 40) * 1deg))
  }

  &:nth-child(5) {
    transform:rotateX(calc((var(--twist) - 20) * 1deg))
  }

  &:nth-child(6) {
    transform: rotateX(calc(var(--twist) * 1deg))
  }

  &:nth-child(7) {
    transform: rotateX(calc((var(--twist) + 20) * 1deg))
  }

  &:nth-child(8) {
    transform: rotateX(calc((var(--twist) + 40) * 1deg))
  }

  &:nth-child(9) {
    transform: rotateX(calc((var(--twist) + 60) * 1deg))
  }

  &:nth-child(10) {
    transform: rotateX(calc((var(--twist) + 80) * 1deg))
  }

  &::before {
    position: absolute;
    left: var(--left);
  }
}


/* Spin the appropriate reel for the first two clicks */
.buttons:has(#one:checked)   ~ .reels .one,
.buttons:has(#two:checked)   ~ .reels .two,
.buttons:has(#three:checked) ~ .reels .three {
  animation-name: spin;
}

/* Allow third click through to the .final.button  */
.buttons:has(#two:checked):has(#three:checked)  label:has(#one),
.buttons:has(#one:checked):has(#three:checked) label:has(#two),
.buttons:has(#one:checked):has(#two:checked) label:has(#three)
{
  pointer-events: none;
  opacity: 0;
}

/* Play the final animation for whichever reel is clicked third */
.buttons:has(#final-one:checked)   ~ .reels .one,
.buttons:has(#final-two:checked)   ~ .reels .two,
.buttons:has(#final-three:checked) ~ .reels .three {
  animation-name: final;
  animation-duration: var(--final);
}


/* Replay button */
button {
  position: absolute;
  left: var(--gutter);
  bottom: 0;
  width: var(--view);
  padding: var(--fill) 0;
  text-align: center;
  color: #ddd;
  text-decoration: none;
  background-color: #060;
  border: 1px outset #090;
  border-radius: 8px;

  opacity: 0;
  pointer-events: none;

  &:hover {
    color: #fff;
  }

  &:hover:active {
    border-style: inset;
    background-color: #030;
  }
}
.final:has(:checked) ~ button {
  opacity: 1;
  pointer-events: all;
  bottom: var(--side);
  transition-property: bottom, opacity;
  transition-duration: 0s, 0.2s;
  transition-delay: 5s, 5s;
}


/* Animate the emoji */
p.mood {
  position: absolute;
  margin: -8px;
  top: 0;
  right: var(--gutter);
  font-size: var(--space);
}
p.mood::after {
  counter-set: mood var(--mood);
  content: counter(mood, mood);
}
.final:has(:checked) ~ .mood {
  animation: joy 2s 2.5s forwards;
}


/* Show the GitHub logo */
a.github {
  width: 0;
  height: 0;

  img {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 32px;
    height: 32px;
    filter: grayscale(1);
    opacity: 0.25;

    &:hover {
      opacity: 1;
    }
  }
}


/* Custom counters for the reels and the mood emoji */
@counter-style reel-one {
  system: cyclic;
  symbols:
"🍇" "🍈" "🍉" "🍒" "🍓" "🍋" "🍑" "🍍" "🥭" "🍎" "🍏" "🍐" "🍌" "🍊" "🫐" "🥝" "🍅" "🥥";
  suffix: "";
}

@counter-style reel-two {
  system: cyclic;
  symbols:
"🫐" "🍐" "🍈" "🍒" "🥥" "🍑" "🍍" "🍋" "🥝" "🍎" "🍓" "🍉" "🍊" "🍌" "🥭" "🍇" "🍏" "🍅";
  suffix: "";
}

@counter-style reel-three {
  system: cyclic;
  symbols:
"🫐" "🍏" "🍇" "🍒" "🍑" "🥥" "🥝" "🍌" "🍈" "🍓" "🍊" "🍎" "🍅" "🍋" "🍐" "🍉" "🍍" "🥭";
  suffix: "";
}

@counter-style mood {
  system: cyclic;
  symbols: "😔" "😞" "🙁" "😕" "🙂" "😀" "😄" "😁" "😊";
  suffix: ""
}


/* Animations */
@keyframes spin {
   0%   { --angle:   0; }
   0.5% { --angle:   2; }
   1%   { --angle:   4; }
   1.5% { --angle:   6; }
   2%   { --angle:   8; }
   2.5% { --angle:  10; }
   3%   { --angle:  12; }
   3.5% { --angle:  14; }
   4%   { --angle:  16; }
   4.5% { --angle:  18; }
   5%   { --angle:  20; }
   5.5% { --angle:  22; }
   6%   { --angle:  24; }
   6.5% { --angle:  26; }
   7%   { --angle:  28; }
   7.5% { --angle:  30; }
   8%   { --angle:  32; }
   8.5% { --angle:  34; }
   9%   { --angle:  36; }
   9.5% { --angle:  38; }
  10%   { --angle:  40; }
  10.5% { --angle:  42; }
  11%   { --angle:  44; }
  11.5% { --angle:  46; }
  12%   { --angle:  48; }
  12.5% { --angle:  50; }
  13%   { --angle:  52; }
  13.5% { --angle:  54; }
  14%   { --angle:  56; }
  14.5% { --angle:  58; }
  15%   { --angle:  60; }
  15.5% { --angle:  62; }
  16%   { --angle:  64; }
  16.5% { --angle:  66; }
  17%   { --angle:  68; }
  17.5% { --angle:  70; }
  18%   { --angle:  72; }
  18.5% { --angle:  74; }
  19%   { --angle:  76; }
  19.5% { --angle:  78; }
  20%   { --angle:  80; }
  20.5% { --angle:  82; }
  21%   { --angle:  84; }
  21.5% { --angle:  86; }
  22%   { --angle:  88; }
  22.5% { --angle:  90; }
  23%   { --angle:  92; }
  23.5% { --angle:  94; }
  24%   { --angle:  96; }
  24.5% { --angle:  98; }
  25%   { --angle: 100; }
  25.5% { --angle: 102; }
  26%   { --angle: 104; }
  26.5% { --angle: 106; }
  27%   { --angle: 108; }
  27.5% { --angle: 110; }
  28%   { --angle: 112; }
  28.5% { --angle: 114; }
  29%   { --angle: 116; }
  29.5% { --angle: 118; }
  30%   { --angle: 120; }
  30.5% { --angle: 122; }
  31%   { --angle: 124; }
  31.5% { --angle: 126; }
  32%   { --angle: 128; }
  32.5% { --angle: 130; }
  33%   { --angle: 132; }
  33.5% { --angle: 134; }
  34%   { --angle: 136; }
  34.5% { --angle: 138; }
  35%   { --angle: 140; }
  35.5% { --angle: 142; }
  36%   { --angle: 144; }
  36.5% { --angle: 146; }
  37%   { --angle: 148; }
  37.5% { --angle: 150; }
  38%   { --angle: 152; }
  38.5% { --angle: 154; }
  39%   { --angle: 156; }
  39.5% { --angle: 158; }
  40%   { --angle: 160; }
  40.5% { --angle: 162; }
  41%   { --angle: 164; }
  41.5% { --angle: 166; }
  42%   { --angle: 168; }
  42.5% { --angle: 170; }
  43%   { --angle: 172; }
  43.5% { --angle: 174; }
  44%   { --angle: 176; }
  44.5% { --angle: 178; }
  45%   { --angle: 180; }
  45.5% { --angle: 182; }
  46%   { --angle: 184; }
  46.5% { --angle: 186; }
  47%   { --angle: 188; }
  47.5% { --angle: 190; }
  48%   { --angle: 192; }
  48.5% { --angle: 194; }
  49%   { --angle: 196; }
  49.5% { --angle: 198; }
  50%   { --angle: 200; }
  50.5% { --angle: 202; }
  51%   { --angle: 204; }
  51.5% { --angle: 206; }
  52%   { --angle: 208; }
  52.5% { --angle: 210; }
  53%   { --angle: 212; }
  53.5% { --angle: 214; }
  54%   { --angle: 216; }
  54.5% { --angle: 218; }
  55%   { --angle: 220; }
  55.5% { --angle: 222; }
  56%   { --angle: 224; }
  56.5% { --angle: 226; }
  57%   { --angle: 228; }
  57.5% { --angle: 230; }
  58%   { --angle: 232; }
  58.5% { --angle: 234; }
  59%   { --angle: 236; }
  59.5% { --angle: 238; }
  60%   { --angle: 240; }
  60.5% { --angle: 242; }
  61%   { --angle: 244; }
  61.5% { --angle: 246; }
  62%   { --angle: 248; }
  62.5% { --angle: 250; }
  63%   { --angle: 252; }
  63.5% { --angle: 254; }
  64%   { --angle: 256; }
  64.5% { --angle: 258; }
  65%   { --angle: 260; }
  65.5% { --angle: 262; }
  66%   { --angle: 264; }
  66.5% { --angle: 266; }
  67%   { --angle: 268; }
  67.5% { --angle: 270; }
  68%   { --angle: 272; }
  68.5% { --angle: 274; }
  69%   { --angle: 276; }
  69.5% { --angle: 278; }
  70%   { --angle: 280; }
  70.5% { --angle: 282; }
  71%   { --angle: 284; }
  71.5% { --angle: 286; }
  72%   { --angle: 288; }
  72.5% { --angle: 290; }
  73%   { --angle: 292; }
  73.5% { --angle: 294; }
  74%   { --angle: 296; }
  74.5% { --angle: 298; }
  75%   { --angle: 300; }
  75.5% { --angle: 302; }
  76%   { --angle: 304; }
  76.5% { --angle: 306; }
  77%   { --angle: 308; }
  77.5% { --angle: 310; }
  78%   { --angle: 312; }
  78.5% { --angle: 314; }
  79%   { --angle: 316; }
  79.5% { --angle: 318; }
  80%   { --angle: 320; }
  80.5% { --angle: 322; }
  81%   { --angle: 324; }
  81.5% { --angle: 326; }
  82%   { --angle: 328; }
  82.5% { --angle: 330; }
  83%   { --angle: 332; }
  83.5% { --angle: 334; }
  84%   { --angle: 336; }
  84.5% { --angle: 338; }
  85%   { --angle: 340; }
  85.5% { --angle: 342; }
  86%   { --angle: 344; }
  86.5% { --angle: 346; }
  87%   { --angle: 348; }
  87.5% { --angle: 350; }
  88%   { --angle: 352; }
  88.5% { --angle: 354; }
  89%   { --angle: 356; }
  89.5% { --angle: 358; }
  90%   { --angle: 360; }
  90.5% { --angle: 362; }
  91%   { --angle: 364; }
  91.5% { --angle: 366; }
  92%   { --angle: 368; }
  92.5% { --angle: 370; }
  93%   { --angle: 372; }
  93.5% { --angle: 374; }
  94%   { --angle: 376; }
  94.5% { --angle: 378; }
  95%   { --angle: 380; }
  95.5% { --angle: 382; }
  96%   { --angle: 384; }
  96.5% { --angle: 386; }
  97%   { --angle: 388; }
  97.5% { --angle: 390; }
  98%   { --angle: 392; }
  98.5% { --angle: 394; }
  99%   { --angle: 396; }
  99.5% { --angle: 398; }
  100%  { --angle: 400; }
}

@keyframes final {
   0%    { --angle:  0; }
   0.5%  { --angle:  2; }
   1%    { --angle:  4; }
   1.5%  { --angle:  6; }
   2%    { --angle:  8; }
   2.5%  { --angle: 10; }
   3%    { --angle: 12; }
   3.5%  { --angle: 14; }
   4%    { --angle: 16; }
   4.5%  { --angle: 18; }
   5%    { --angle: 20; }
   6%    { --angle: 21; }
   7%    { --angle: 24; }
   8%    { --angle: 29; }
   9%    { --angle: 36; }
   10%   { --angle: 33; }
   21%   { --angle: 31; }
   22%   { --angle: 33; }
   23%   { --angle: 31; }
   24%   { --angle: 33; }
   25%   { --angle: 31; }
   26%   { --angle: 33; }
   27%   { --angle: 31; }
   28%   { --angle: 33; }
   29%   { --angle: 31; }
   30%   { --angle: 33; }
   31%   { --angle: 31; }
   32%   { --angle: 33; }
   33%   { --angle: 31; }
   34%   { --angle: 33; }
   35%   { --angle: 31; }
   36%   { --angle: 33; }
   37%   { --angle: 31; }
   38%   { --angle: 33; }
   39%   { --angle: 38; }
   40%   { --angle: 42; }
   50%   { --angle: 41; }
   60%   { --angle: 42; }
   80%   { --angle: 42; }
   96%   { --angle: 41; }
   97%   { --angle: 42; }
   97.5% { --angle: 45; }
   98%   { --angle: 47; }
   98.5% { --angle: 50; }
   99%   { --angle: 52; }
   99.5% { --angle: 56; }
  100%   { --angle: 60; }
}

@keyframes joy {
    0% { --mood: 5; }
    5% { --mood: 6; }
   10% { --mood: 7; }
   15% { --mood: 8; }
   20% { --mood: 9; }
   80% { --mood: 9; }
   85% { --mood: 4; }
   90% { --mood: 3; }
   95% { --mood: 2; }
  100% { --mood: 1; }
}