#global-icon {
 position: absolute;
 top: 0;
 left: 0;
 padding: var(--global-spacing);
 width: var(--global-icon-size);
 height: var(--global-icon-size);
 transition: translate calc(1s * var(--speed)) ease, scale calc(1s * var(--speed)) ease, opacity calc(1s * var(--speed)) ease, filter calc(1s * var(--speed)) ease;
 cursor: pointer;
 view-transition-name: global-icon;
 z-index: 10000;
 > img {
  width: calc(var(--global-icon-size) - calc(var(--global-spacing) * 2));
  height: calc(var(--global-icon-size) - calc(var(--global-spacing) * 2));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path calc(1s * var(--speed)) ease;
  object-fit: contain;
  pointer-events: none;
 }
}
#start.current ~ #global-icon {
 translate: calc(50cqw - var(--global-spacing) * 4);
 opacity: 0;
 transition: none;
 pointer-events: none;
}
#menu.current ~ #global-icon {
 translate: calc(50cqw - var(--global-spacing) * 4);
}
:not(#start, #menu).current ~ #global-icon {
 filter: drop-shadow(0 0 calc(0.1 * var(--base)) #004) drop-shadow(0 0 calc(0.2 * var(--base)) white);
 > img { clip-path: polygon(2% 50%, 74% 8.43%, 74% 91.57%, 2% 50%); }
}
body:has([open][role]) > #global-icon {
 top: var(--global-spacing);
 left: max(50cqw - (1 / 3) * (100vh * 2 / 3), var(--global-spacing));
}
#start {
 position: absolute;
 width: 100%;
 height: min(100%, 100vh);
 min-height: min(100%, 100vh);
 overflow: visible;
 cursor: pointer;
 &.moving { pointer-events: none; }
 * { pointer-events: none; }
 > img {
  transition: translate calc(100ms * var(--speed)) ease;
  &:nth-of-type(1) { scale: 2; translate: 0 -20%; }
  &:nth-of-type(2) { opacity: 0; }
 }
 > h1 {
  --shadow-x: 0.004em;
  --shadow-y: 0.008em;
  font-size: 20vmin;
  background: linear-gradient(-10deg, #FFF, #ACE 50%, #FFF 50%, #EAA);
  background-clip: text;
  color: transparent;
  transform: skew(-10deg, -5deg);
  filter:
   drop-shadow(calc(var(--shadow-x) * -1) calc(var(--shadow-x) * -1) white)
   drop-shadow(calc(var(--shadow-x) *  1) calc(var(--shadow-y) *  1) hsl(309 6% 53%))
   drop-shadow(calc(var(--shadow-x) *  2) calc(var(--shadow-y) *  2) hsl(309 6% 48%))
   drop-shadow(calc(var(--shadow-x) *  3) calc(var(--shadow-y) *  3) hsl(309 6% 43%))
   drop-shadow(calc(var(--shadow-x) *  4) calc(var(--shadow-y) *  4) hsl(309 6% 38%))
   drop-shadow(calc(var(--shadow-x) *  5) calc(var(--shadow-y) *  5) hsl(309 6% 33%));
  opacity: 0;
 }
 span {
  font-size: 4vmin;
  opacity: 0;
 }
}
#menu {
 padding: var(--global-icon-size) max(var(--base), (100% - (100vh / 3) * 2) / 2);
 > video { filter: hue-rotate(-20deg); }
 > div {
  display: flex;
  gap: var(--base);
  justify-content: center;
  justify-items: center;
  align-items: center;
  flex-wrap: wrap;
  > div[title] {
   container-type: size;
   padding-bottom: 5%;
   border-radius: var(--global-spacing);
   width: min(100vh / 3, calc(50cqw - var(--base)));
   max-height: 50vh;
   aspect-ratio: 2 / 3;
   justify-content: flex-end;
   align-items: center;
   background-size: contain;
   background-blend-mode: overlay;
   cursor: pointer;
   > span {
    font-size: 10cqh;
   }
   --vignette-edge-color: #DDFF;
   --vignette-center-color: #DDF0;
   --vignette: linear-gradient(var(--vignette-edge-color), var(--vignette-center-color) var(--global-spacing), var(--vignette-center-color) calc(100% - var(--global-spacing)), var(--vignette-edge-color)), linear-gradient(90deg, var(--vignette-edge-color), var(--vignette-center-color) var(--global-spacing), var(--vignette-center-color) calc(100% - var(--global-spacing)), var(--vignette-edge-color));
   &[title="Create"]     { background-image: var(--vignette), url('../../Images/Roles/Full-Moon/Villager.jpg'); }
   &[title="Village"]    { background-image: var(--vignette), url('../../Images/Roles/Blood-Moon/Cupid.jpg'); }
   &[title="Load"]       { background-image: var(--vignette), url('../../Images/Roles/Full-Moon/Mason.jpg'); }
   &[title="Expansions"] { background-image: var(--vignette), url('../../Images/Roles/Blood-Moon/Ghost-Wolf.jpg'); }
   &[title="Rules"]      { background-image: var(--vignette), url('../../Images/Roles/Full-Moon/Tough-Guy.jpg'); }
   &[title="More"]       { background-image: var(--vignette), url('../../Images/Roles/Harvest-Moon/Diplomat.jpg'); }
   &:is(.menu.current *) { will-change: translate; }
  }
 }
}
#create {
 --change-easing: ease;
 text-align: center;
 overflow: hidden;
 > img.background { object-position: top; scale: 1.05; }
 > div { width: 100%; height: 100%; }
 > div:nth-of-type(1) {
  container-type: size;
  padding-left: calc(var(--global-icon-size) - var(--global-spacing) * 2);
  height: min(calc(var(--global-icon-size) * 3), 40cqmin);
  > svg {
   width: 100cqmin;
   height: 100cqmin;
   overflow: visible;
   cursor: grab;
   &:active { cursor: grabbing; }
  }
  > span {
   container-type: size;
   width: 45cqw; height: min(30cqw, 70cqh);
   padding: var(--global-spacing);
   background: #403830;
   border: var(--global-spacing) groove #AAB;
   border-style: groove groove ridge ridge;
   > span { font-size: clamp(var(--global-spacing), 17cqw, 45cqh); }
  }
  #svg-player-count-slider-value { display: inline-block; width: 2ch; }
  > div {
   position: absolute;
   inset: auto auto 0 0;
   width: calc(var(--global-icon-size) - var(--global-spacing) * 2);
   color: #EEF;
   font-size: 0.3em;
  }
 }
 > #create-village-button {
  container-type: size;
  max-width: 100%;
  height: 2em;
  border-radius: 0.8em;
  background-color: #600;
  border: calc(0.1 * var(--base)) solid #779;
  border-bottom-color: #353545;
  cursor: pointer;
  transition: background-color calc(300ms * var(--speed)) ease;
  > div {
   position: absolute;
   width: 100%;
   height: 100%;
   transition: scale calc(400ms * var(--speed)) ease;
   &:is(.menu.current *) { will-change: scale; }
   &:nth-of-type(1) { transform-origin: 50% 100%; }
   &:nth-of-type(2) {  scale: 1 0; transform-origin: 50% 0%; }
  }
  &[active] {
   > div {
    &:nth-of-type(1) {  scale: 1 0; }
    &:nth-of-type(2) {  scale: 1 1; }
   }
  }
  &[valid] { background-color: #060; }
 }
 > span:not(.tap.icon) {
  margin: calc(-1 * var(--global-spacing)) var(--global-spacing);
  font-size: 0.4em;
  font-family: 'Palatino Linotype';
  font-style: italic;
  align-self: flex-end;
  color: #EEF;
 }
 > div:nth-of-type(3) {
  --min-paper-width: calc(var(--global-icon-size) + var(--global-spacing) + (3 * var(--base)) + 25px);
  left: calc(-0.5 * var(--global-icon-size));
  width: calc(100% + var(--global-icon-size));
  flex-grow: 1;
  > div { position: absolute; }
  > div:nth-of-type(1) {
   container-type: size;
   display: grid;
   grid: auto auto 1fr auto auto / 1fr;
   width: calc(100% - var(--min-paper-width) + var(--base) * (4 / 6) + 12.5px);
   height: calc(100% - (1.5 * var(--base)) - 12.5px);
   top: 25px;
   left: calc(var(--min-paper-width) - var(--base) * (4 / 6) - 12.5px);
   overflow-x: hidden;
   > div:not(#create-roles) {
    width: 100%;
    font-size: min(5.8cqw, calc(0.5 * var(--base)));
    font-family: 'Palatino Linotype';
    color: #EEF;
    text-align: center;
    scale: 1 0;
    transition: scale calc(200ms * var(--speed)) var(--change-easing);
    &:is(.menu.current *) { will-change: scale; }
   }
   > span {
    transition: translate calc(500ms * var(--speed)) var(--change-easing);
    &:is(.menu.current *) { will-change: translate; }
   }
   > div:nth-of-type(1) { transform-origin: 50% 100%; }
   > #create-roles {
    width: 100%; height: 100%;
    padding: var(--global-spacing) 0;
    justify-content: center;
    align-content: start;
    align-items: end;
    overflow-x: hidden;
    overflow-y: scroll;
    transition: translate calc(500ms * var(--speed)) var(--change-easing);
    > [role] {
     --font-size-modifier: -2;
     --size: min(calc(50cqw - var(--global-spacing) * 3), 5em);
    }
   }
   > div:not(#create-roles) { transition: scale calc(500ms * var(--speed)) var(--change-easing); }
   > div:nth-of-type(3) { transform-origin: 50% 0; cursor: pointer; }
   &:not(:has(+ div[value])) > :is(#create-roles, span) { translate: calc(-100cqw - var(--global-spacing)) 0; }
   &:has(+ div:is([value], [change])) > div:not(#create-roles) { scale: 1 1; transition: scale calc(500ms * var(--speed)) calc(500ms * var(--speed)) var(--change-easing); }
  }
  > #create-paper {
   container-type: size;
   padding: calc((1.5 * var(--base)) + 12.5px);
   padding-bottom: calc((1.5 * var(--base)) + 12.5px + 0.65em);
   width: 100%;
   height: 100%;
   max-height: 100%;
   color: black;
   font-family: 'Palatino Linotype';
   font-weight: bold;
   font-style: italic;
   flex-grow: 1;
   align-self: start;
   filter: url(#svg-filter-texture);
   transition: translate calc(500ms * var(--speed)) ease;
   > picture, picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
   > .tap.icon {
    position: absolute;
    filter: invert(1);
    opacity: 0;
    top: calc((1.5 * var(--base)) + 12.5px);
    right: calc(1.2 * var(--base));
    transition: opacity calc(500ms * var(--speed)) ease, translate calc(0ms * var(--speed)) calc(500ms * var(--speed));
   }
   &[value="Werewolf"]  > .tap.icon { translate: 0 calc((100cqh - ((3 * var(--base)) + 25px)) / 16 *  1 + (0.5 * var(--base)) * 0); }
   &[value="Evil"]      > .tap.icon { translate: 0 calc((100cqh - ((3 * var(--base)) + 25px)) / 16 *  3 + (0.5 * var(--base)) * 1); }
   &[value="Villager"]  > .tap.icon { translate: 0 calc((100cqh - ((3 * var(--base)) + 25px)) / 16 *  5 + (0.5 * var(--base)) * 2); }
   &[value="Identity"]  > .tap.icon { translate: 0 calc((100cqh - ((3 * var(--base)) + 25px)) / 16 *  7 + (0.5 * var(--base)) * 3); }
   &[value="Knowledge"] > .tap.icon { translate: 0 calc((100cqh - ((3 * var(--base)) + 25px)) / 16 *  9 + (0.5 * var(--base)) * 4); }
   &[value="Escape"]    > .tap.icon { translate: 0 calc((100cqh - ((3 * var(--base)) + 25px)) / 16 * 11 + (0.5 * var(--base)) * 5); }
   &[value="Reaction"]  > .tap.icon { translate: 0 calc((100cqh - ((3 * var(--base)) + 25px)) / 16 * 13 + (0.5 * var(--base)) * 6); }
   &[value="Special"]   > .tap.icon { translate: 0 calc((100cqh - ((3 * var(--base)) + 25px)) / 16 * 15 + (0.5 * var(--base)) * 7); }
   > div {
    container-type: size;
    padding: 0 var(--global-spacing);
    width: 100%; height: 12.5%;
    mix-blend-mode: darken;
    border-bottom: 1px solid black;
    cursor: pointer;
    img, div, span { font-size: min(12cqw, 70cqh); }
    img { width: 1.25em; height: 1.25em; }
    svg { height: 1.25em; }
    div { min-width: 10ch; flex-grow: 1; }
    span { transform-origin: 0% 50%; }
    img, div, span, svg { transition: translate calc(500ms * var(--speed)) ease, scale calc(500ms * var(--speed)) var(--change-easing); }
   }
   > span:nth-of-type(1) {
    position: absolute;
    bottom: calc(((1.5 * var(--base)) + 12.5px));
    right: calc((1.5 * var(--base)) + 12.5px);
    font-size: 0.5em;
    scale: 1 1;
    transform-origin: 100% 50%;
    transition: scale calc(200ms * var(--speed)) var(--change-easing);
   }
   &[value] > .tap.icon { opacity: 1; transition: opacity calc(500ms * var(--speed)) calc(500ms * var(--speed)) var(--change-easing); }
   &[value], &[change] {
    translate: calc(var(--min-paper-width) - 100cqw - var(--global-icon-size) - var(--base) * (4 / 6)) 0;
    > div {
     img { translate: calc(100cqw - 1.5ch - 0.625em - var(--global-spacing) / 2) 0; }
     div { translate: calc(-1.5ch - 1.25em); }
     svg { translate: 1.5ch; }
     > span:nth-of-type(2) { scale: 0 1; }
    }
    > span:nth-of-type(1) { scale: 0 1; }
   }
   &:is(.menu.current *) { will-change: translate; }
  }
 }
}
#setup {
 -webkit-mask-repeat: no-repeat;
 -webkit-mask-size: auto 120vh;
 mask-repeat: no-repeat;
 mask-size: auto 120vh;
 gap: 0.5em;
 background: #001;
 > img.background { filter: blur(var(--global-spacing)) brightness(0.6); }
 > span, > div:not(#setup-box) { text-align: center; }
 &:not([create]) > #setup-proceed { display: none; }
 > #setup-proceed { padding: 0.5em; }
 > :is(#setup-proceed, #setup-features) > .tap.icon { top: 0.1em; }
 > #setup-box:not(:has([feature])) {
  font-family: 'Palatino Linotype';
  white-space: pre-wrap;
 }
 > #setup-box:has([feature]) > div {
  text-align: center;
  transition: background-color calc(500ms * var(--speed)) ease, outline-color calc(500ms * var(--speed)) ease;
  &:not([feature]) {
   border-bottom: 1px solid #EEF;
  }
  &[selected] {
   background: #0608;
   outline: calc(var(--base) / 10) solid #8A8;
   border-radius: calc(var(--base) / 10);
  }
  &[by-role] {
   background: #0068;
   outline-color: #88A;
  }
 }
}
#village {
 overflow-x: hidden;
 > img.background { filter: blur(4px); }
 > div:nth-of-type(1) {
  container-type: inline-size;
  margin: var(--global-spacing);
  margin-left: var(--global-icon-size);
  width: calc(100% - var(--global-icon-size));
  height: var(--global-icon-size);
  justify-content: space-around;
  > div {
   flex-grow: 1;
   padding: var(--global-spacing);
   text-align: center;
   background: #403830;
   border: var(--global-spacing) ridge #AAB;
   border-top-style: groove;
   cursor: pointer;
  }
 }
 > div:nth-of-type(2) { padding-top: var(--global-spacing); }
 > #village-container {
  container-type: inline-size;
  width: 100%;
  padding: var(--global-spacing);
  align-items: flex-end;
  > [role] {
   --font-size-modifier: -2;
   --size: min(calc(100cqw / 3 - var(--global-spacing) * 3), 5em);
  }
 }
}
#info, #actions {
 background: linear-gradient(#444060, #223);
 > img.background { filter: blur(4px); }
 > :is(span, div:not(#info-box)) { text-align: center; }
 > #info-box, > #actions-box {
  padding: var(--global-spacing);
  border-radius: var(--global-spacing);
  color: #FFF;
  &[info] {
   &:not([info="roles"]) {
    background-color: #112;
    font-family: 'Palatino Linotype';
    white-space: pre-wrap;
    &:not([info="tokens"], [info="role actions"]) {
     font-size: 0.8em;
     &:not([info="setup"]) { text-align: justify; }
    }
   }
   &[info="role actions"] > div > span { font-size: 0.75em; top: calc(var(--global-spacing) / 2) }
   &[info="role actions"] > .light-button { padding: var(--global-spacing) calc(var(--global-spacing) * 2); }
   &:is([info="roles"], [info*="token"]) > .light-button { width: 100%; }
   &[info="tokens"] { padding: var(--global-spacing) 1em 1em; }
   &[info="roles"] {
    align-items: flex-end;
    > light-button { white-space: pre-wrap; }
    > [role] { 
     --font-size-modifier: -2;
     --size: min(calc(100cqw / 3 - var(--global-spacing) * 3), 5em);
    }
   }
   .light-button { font-family: 'Copperplate Gothic'; }
  }
 }
}
#share {
 > img.background { left: calc((100cqw - 100cqh) / 2); min-width: 100cqh; }
 > :is(span, div, canvas) { margin: 0 auto; width: min(100%, 60cqh); }
 > :is(span, div) { text-align: center; }
 > canvas { background: radial-gradient(#445E, #4450) }
 > span:nth-of-type(2) { margin-bottom: 0.5em; font-family: 'Palatino Linotype'; font-size: 0.5em; font-style: italic; }
}
#load {
 > div.light-button { min-height: 1.1em; }
 > #load-box {
  padding: var(--global-spacing);
  font-size: 0.9em;
  .icon { top: 0.125em; }
  &[load] {
   > div:not(.box), div.box > div {
    padding: var(--global-spacing);
    font-size: 0.75;
    border-radius: var(--global-spacing);
    border: calc(var(--global-spacing) / 4) solid #001;
    border-top-color: #335;
    background: #112;
   }
   > div:not(.box) {
    display: grid;
    grid: 1fr / 1em 1fr 1em;
    gap: var(--global-spacing);
    align-items: center;
    justify-content: center;
    > div { margin: auto; text-align: center; }
    > :nth-child(2) { width: 100%; }
   }
   > div.box {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    gap: var(--global-spacing);
    > div { text-align: center; width: calc(25cqw - var(--global-spacing) * 2); }
   }
  }
 }
}
#expansions {
 -webkit-mask-repeat: no-repeat;
 -webkit-mask-size: auto 120vh;
 mask-repeat: no-repeat;
 mask-size: auto 120vh;
 > span:nth-of-type(1) {
  margin-top: var(--global-spacing);
  font-size: min(1.5em, 7cqw);
 }
 > span:nth-of-type(2) {
  margin-bottom: calc(var(--global-spacing) * 2);
  font-size: 0.4em;
  font-family: 'Palatino Linotype';
 }
 > div {
  margin-bottom: 1em;
  gap: var(--base);
  flex-grow: 1;
  flex-wrap: wrap;
  align-content: start;
  align-items: stretch;
  > [expansion] {
   --size: calc(100cqw / 3 - var(--global-spacing, --base) * 4);
   --font-size-modifier: 0;
   &[open] {
    > [info] {
     padding-left: calc(var(--global-icon-size) - var(--global-spacing));
    }
   }
  }
 }
}
#rules {
 overflow-y: hidden;
 > img.background { filter: blur(3px); }
 > div {
  height: calc(100% - var(--global-icon-size) + var(--global-spacing));
  > div:nth-of-type(1) {
   height: 100%;
   border-radius: var(--global-spacing);
   background-color: #262626;
   overflow-y: auto;
   > img {
    width: 100%;
   }
  }
  > div:nth-of-type(2) {
   flex-grow: 1;
   > span { flex-grow: 1; font-size: 0.5em; }
  }
 }
}
@media (orientation: landscape) {
 #menu {
  padding: var(--global-icon-size) max(var(--base), (100% - (100vh / 3) * 3) / 2 - var(--base));
  > div > div[title] { width: min(100vh / 3, 100cqw / 3 - var(--base)) }
 }
 #expansions > div > [expansion] { --size: calc(100cqw / 4 - var(--base)); }
}