:root {
  --domainButtonHeight: 56px;
  --axisFontSize: clamp(0.85rem, 3.5vh, 2rem);
  --gridGap: 7px;
  --gridPadding: 20px;
  --gridBorderWidth: 4.5px;
  --gridOffset: 1.5vh;
}

.page.level {
  --rows: 2;
  --cols: 2;
  
  --fontFactor: 1;
  --widthFactor: 1;
  --heightFactor: 1;
  --boostProps: 1;
  --landscapeFontFactor: 1;
  --landscapeWidthFactor: 1;
  --landscapeHeightFactor: 1;
  
  
  --maxGridWidth: calc(max(1, var(--widthFactor)) * min(38vh, 68vw) + 2 * var(--gridPadding) + 2 * var(--gridBorderWidth));
  --gridWidth: calc(var(--widthFactor) * min(38vh, 68vw) - (1 - var(--widthFactor)) * var(--gridGap));
  --gridHeight: calc(var(--heightFactor) * min(38vh, 68vw) - (1 - var(--heightFactor)) * var(--gridGap));

  --propsHeight: calc(32.75vh * max(1, (pow(var(--boostProps), 6.15))));
  
  --fullGridWidth: calc(var(--gridWidth) + 2 * var(--gridPadding));
  --fullGridHeight: calc(var(--gridHeight) + 2 * var(--gridPadding));

  --cellFontSize: clamp(0.5rem, calc(9.75vh * var(--fontFactor)), calc(6rem * var(--fontFactor)));
  --propFontSize: clamp(1.5rem, 2vw, 2rem);

  --noInfo: 0;
}


@property --lightGo {
  syntax: '<color>';
  initial-value: var(--softShade);
  inherits: false;
}

@property --darkGo {
  syntax: '<color>';
  initial-value: var(--hardShade);
  inherits: false;
}

#domain.correct {
  justify-content: right;
  
  transition: gap 0.6s;
  gap: 0px;

  overflow: visible;

  button:not(:first-child) {
    transition: width 0.6s ease, min-width 0.6s ease;

    will-change: width, min-width;

    width: 0;
    min-width: 0px;

    &::before {transition: opacity 0.13s; opacity: 0;}
    p {
      transition: opacity 0.45s;
      opacity: 0;
    }

    pointer-events: none;
  }


  button:first-child p {
    --lightGo: var(--softShade);
    --darkGo: var(--hardShade);

    width: 100%;
    transition:  --lightGo 0.25s, --darkGo .25s, bottom 0.125s, background 0.2s 0.2s, color 0.2s !important;
    background-image: repeating-linear-gradient(45deg, var(--lightGo),  var(--darkGo) , var(--lightGo) 600px);
    background-size: calc(600px/sin(45deg)) 100%;
    animation: glow 2.5s linear infinite reverse, spring 0.6s ease-out forwards;
    position: relative;
    overflow: hidden;
    padding-bottom: 0.075em;

    font-size: 2.5rem;
    
    font-family: "Source Serif 4";
    font-weight: 375;
    font-style: italic;

    &>.ripple {
      background: var(--emphasisColor);
      transition: all 0.7s;
      &.run {
        opacity: 1 !important;
        transform: scale(400);
      }
    }

  }
  button:first-child:not(.activated):focus p {
    --lightGo: var(--softerShade);
    --darkGo: var(--harderShade);
  }

  button:first-child.activated p {
    color: white;
    bottom: 6px !important;
    font-size: 2.25rem;
    animation: stayDown 0s 0.2s forwards;
  }
  
  

}

@media (hover: hover) and (pointer: fine) {
  #domain.correct button:first-child:hover p {
    --lightGo: var(--softerShade);
    --darkGo: var(--harderShade);
  }
}

@keyframes stayDown {
  from, to {background: var(--emphasisColor) !important; }
}


@keyframes glow {
  0% {
    background-position: calc(600px/sin(45deg)) 0;
  }
}

@keyframes spring {
  0% { font-size: 0rem; }
  100% { font-size: 2.25rem; }
}

#wrap_home_level {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  position: relative;
  gap: 3px;
  top: clamp(0.5rem, 1.5vmin, 1rem); 
  left: clamp(0.5rem, 1.5vmin, 1rem); 
  width: min-content;
  z-index: 3;
  height: 37px;
  cursor: pointer;
  margin-bottom: 2px;
  color: var(--baseColor);
  transition: opacity 0.05s, transform 0.1s;
}

#home {
  background-image: url("../assets/HOME.svg");
  background-size: 100% 100%;
  display: inline-block;
  min-height: 37px;
  min-width: 37px;
  border: 0;
  flex-basis: 100%;
  background-color: transparent;
  filter: var(--hueShiftIcons);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  #wrap_home_level:hover {
    opacity: 0.65;
  }
}

#wrap_home_level:has(~ #menu  #menu_checkbox:checked) #level, #wrap_home_level:has(~ #menu #menu_checkbox:checked) #difficulty {
  opacity: 1;
  cursor: pointer;
  pointer-events: unset;
}

#level, #difficulty {
  cursor: default;
  pointer-events: none;
}

#level {
  font-family: "computer modern serif";
  font-weight: lighter;
  font-size: 1.5rem;

  position: relative;
  bottom: 2px;
  width: min-content;
  margin: 0;
  opacity: 0;
  transition: opacity 0.3s;
}
#difficulty {
  font-family: "source serif 4";
  font-style: italic;
  font-weight: 365;
  font-size: 0.87rem;
  display: block;
  max-height: 2px;
  position: relative;
  bottom: 14.5px;
  margin: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s;
}
#info_dialog {
  height: min-content;
  max-height: 70vh;
  h1 {margin-bottom: 10px;}
  padding-bottom: 22px;
}

#level_info {
  padding-left: min(2vw, 0.8rem);
  padding-right: min(2vw, 0.8rem);
  display:flex;

  max-height: calc(70vh - 57px);
  box-sizing: border-box;
  
  flex-wrap: wrap;
  gap: 10px;
  scrollbar-width: none;
  
  p {
    margin: 0;
    font-weight: 350;
    font-size: 1.15rem;
    flex-basis:100%;
    text-align: justify;
  }

  hr { width: 100%; }

  p.big {
    font-size: 1.35rem;
  }
  p.italic {
    font-style: italic;
  }
  p.center {
    text-align: center;
  }
  p.half {
    flex-basis: 47%;
    white-space: nowrap;
    align-self: center;
    box-sizing:border-box;
  }
  p.emph {
    font-weight: 600;
  }
  img {
    pointer-events: none;
    display: inline;
    max-width: 40px;
    max-height: 40px;
    zoom: 0.83;
  }

}

#dictionary_dialog {
  min-height: 40vh;
  height: min-content;
  max-height: 75vh;
  h1 {margin-bottom: 8px;}
  padding-bottom: 20px;

  font-weight: 350;
  font-size: 1.15rem;

  #dict_symbols, #dict_terms, #dict_general {
    display: none;
    transition: left 0.1s ease-out, opacity 0.04s;
    opacity: 1;
    position: relative;
    left: 0;
    box-sizing: border-box;

    @starting-style {
      opacity: 0;
      left: -8px;
    }
  }

  #dict_box {
    overflow-y: scroll;
    max-height: 60vh;
    scrollbar-width: none;
    width: 102%;
    position: relative;
    right: 1%;
  }

  #dict_headings:has(#symbols input:checked) ~ #dict_box #dict_symbols { display: flex; }
  #dict_headings:has(#terms input:checked) ~ #dict_box #dict_terms { display: flex; }
  #dict_headings:has(#general input:checked) ~ #dict_box #dict_general { display: flex; }

  #dict_headings:has(#general input:checked) ~ #dict_box {
    box-sizing: border-box;
    padding-left: min(1vw, 0.4em);
    padding-right: min(1vw, 0.4rem);
  }


  #dict_headings {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 10px;
    
    input { display: none; }
    label {
      cursor: pointer;
      transition: font-weight 0.05s;
      font-size: 1.3rem;
      font-weight: 575;
      color: #0000;
      position: relative;
      display: flex;
      justify-content: center;
    }

    label::before {
      color: var(--baseColor);
      position: absolute;
      font-size: 1.3rem;
      font-weight: 250;
    }
    #symbols::before { content: "Symbols"}
    #terms::before { content: "Terms"}
    #general::before { content: "General"}

    label:has(input:checked)::before {
      font-weight: 575;
    }
    
    @media (pointer: fine) and (hover: hover) {
      label:hover::before {
        font-weight: 400;
      }
    }

  }

  p {
    margin: 0;
    text-align: left;
    font-size: clamp(0.25rem, calc(1.7vh + 0.7vw), 1.1rem);
  }

  #dict_symbols li:not(.visible), #dict_terms li:not(.visible) {
    display: none;
  }
  
  #dict_symbols {
    flex-direction: column;
    
    li {
      list-style-type: none;
      display: grid;
      grid-template-columns: min-content 1fr;
      grid-template-rows: min-content min-content;
      align-items: center;  
      justify-content: center;
      align-items: center;
      grid-template-columns: 2.75rem 1fr; 

      .symbol {
        width: min-content;
        display: flex;
        font-size: 1.45rem;

        align-items: center;
        justify-content: center;
        grid-column: 1;
        grid-row: 1 / -1;
        height: 100%;
        border-right: 1px solid var(--baseColor);
        box-sizing: border-box;
        transition: background-color 0.12s;
        min-width: 2.75rem;
        padding-right: 3px;  
      }
      .caption {
        font-style: italic;
        grid-column: 2;
        padding-top: 7px;
        padding-left: 7px;
        transition: background-color 0.12s;
        padding-right: 5px;
      }

      .formal {
        padding-left: 10px;
        grid-column: 2;
        padding-bottom: 7px;
        transition: background-color 0.12s;
      }
    }
  }

  #dict_terms {
    flex-direction: column;
    padding-left: 3px;
    padding-right: 3px;

    li {
      list-style-type: none;
      display: grid;
      grid-template-columns: min-content 1fr;
      grid-template-rows: min-content min-content;
      align-items: center;  
      justify-content: center;
      align-items: center;
      .caption {
        grid-column: 2;
        padding-top: 4px;
        padding-bottom: 4px;
        transition: background-color 0.12s;
        padding-left: 8px;
        padding-right: 8px;
      }
      .term {
        width: fit-content;
        font-style: normal;
        font-weight: 480;
        grid-column: 1;
        grid-row: 1;
        height: 100%;
        display: block;
        padding: 0;
        box-sizing: border-box;
        transition: background-color 0.12s;
      }
      .term {
        font-size: 1.25rem;
      }
    }
  }
  @media (pointer: fine) and (hover: hover) {
    .symbol:hover, .term:hover {
      background: light-dark(#eaeaea, color-mix(in hsl, var(--bgColor) 40%, #333 60%));
      & ~ * {
        background: light-dark(#eaeaea, color-mix(in hsl, var(--bgColor) 40%, #333 60%));
      }
    }

    .symbol:has(~ *:hover), .term:has(~ *:hover) {
      background: light-dark(#eaeaea, color-mix(in hsl, var(--bgColor) 40%, #333 60%));
    }
    .caption:has(~ *:hover) {
      background: light-dark(#eaeaea, color-mix(in hsl, var(--bgColor) 40%, #333 60%));
    }
    .caption:hover {
      background: light-dark(#eaeaea, color-mix(in hsl, var(--bgColor) 40%, #333 60%));
      & ~ * {
        background: light-dark(#eaeaea, color-mix(in hsl, var(--bgColor) 40%, #333 60%));
      }
    }

    .formal:hover {
      background: light-dark(#eaeaea, color-mix(in hsl, var(--bgColor) 40%, #333 60%));
    }
  }
}


#dict_general {
  flex-direction: column;
  strong { font-weight: 600;}
  #keycontrols, #cloudnote {
    width: 100%;
    margin-bottom: 10px;
  }
  #keysbox {
    max-height: 44vh;
    box-sizing: border-box;
    width: 100%;
    display: flex;    
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    
    p {
      margin: 0;
      font-weight: 350;
      width: fit-content;
      text-align: justify;
    }
  }

}

span.key {
  display: inline-block;
  border: 1px solid light-dark(#ccc, #3a3a3a);
  filter: drop-shadow(0 1.5px 1px light-dark(transparent, #010101));
  box-shadow: 0 2px 2px #eee;
  border-radius: 2px;
  padding: 3px;
  line-height: 1.15;
  font-weight: 225;
  min-width: 1.2rem;
  text-align: center;
  background: light-dark(#fafafa, color-mix(in hsl, var(--bgColor) 40%, #333 60%));
}
#notes_dialog {
  height: min-content;
  max-height: 70vh;
  h1 {margin-bottom: 10px;}
  padding-bottom: 22px;
}

#wrapnotes {
  display: flex;
  flex-direction: column;
  gap: 6px;

  width: 100%;

  textarea {
    resize: none;
    min-height: 50vh;
    max-height: 50vh;
    height: max-content;
    width: 100%;
    border: none;
    box-sizing: border-box;
    font-size: clamp(0.5rem, calc(0.75 * var(--propFontSize)), 3rem);
    font-family: "Source Serif 4";
    font-weight: 375;
    background: var(--bgColor);

    &::selection {background: var(--focusColor)}
  }
}

@supports (field-sizing: content) {
  #wrapnotes textarea {field-sizing: content; min-height: 30vh;}
}
#menu {
  position: absolute;

  display: flex;

  width: max-content;
  z-index: 2;
  
  top: clamp(0.5rem, 1.5vmin, 1rem); 
  right: clamp(0.5rem, 1.5vmin, 1rem); 
  /* Align #chevron */
  text-align: center;

  #menu_checkbox {
    display: block;
    width: 45px;
    height: 45px;

    position: absolute;
    top: -3px;
    left: -20px;

    cursor: pointer;

    opacity: 0;
    z-index: 1;
  }

  @media (hover: hover) and (pointer: fine) {
    #menu_checkbox:hover + #chevron::before {
      opacity: 0.65;
    }
  }


  #chevron {
    position: relative;
    top: 3px;
    margin-right: 14px;

    height: 39px;

    align-content: center;

  }

  #chevron::before {
    content: "";

    display: inline-block;
    height: 18px;
    width: 18px;

    border-bottom: 3px solid var(--baseColor);
    border-right: 3px solid var(--baseColor);
    border-radius: 1px;
    opacity: 1;

    rotate: 135deg;
    transition: rotate 0.3s cubic-bezier(0.77,0.2,0.05,1.0), height 0.2s, width 0.2s, opacity 0.05s;
  }

  #menu_checkbox:checked ~ #chevron:before {
    rotate: -45deg;
  }

  ul {
    width: 100%;
    margin: 0;
    padding: 0;

    list-style-type: none;
    display: flex;
    flex-direction: row;
    
    transform: translateX(calc(var(--noInfo) + clamp(0.5rem, 1.5vmin, 1rem) + 205px));
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.77,0.2,0.05,1.0);
  }

  
  ul:has(#menu_checkbox:checked)  {
    transform: none;

    #menu_checkbox {
      width: 30px;
      left: -9px;
    }
    #chevron::before {
      height: 12px;
      width: 12px;
    }
  }

  .dialog_button {
    height: 39px;
    margin-right: 15px;

    position: relative;
  }

  .dialog_button:last-of-type {
    margin-right: 0;
  }


  #info {
    background-image: url("../assets/INFO.svg"); width: 39px;
    right: 0;
    transition: right 0.2s ease, scale 0.3s 0.3s cubic-bezier(0.375, 0.885, 0.72, 1.15)
    , rotate 0.3s 0.4s ease;
    
    scale: 1;
    rotate: 0;
    &.readme {
      @starting-style {
        scale: 0;
        rotate: 50deg;
      }
    }
  }
  #dictionary { background-image: url("../assets/DICTIONARY.svg"); width: 41px; }
  #notes { background-image: url("../assets/NOTES.svg"); width: 33.5px; }
  #settings { background-image: url("../assets/SETTINGS.svg"); width: 39px; }


  #menu_checkbox:not(:checked) ~ #info.readme {
    right: calc(clamp(0.5rem, 1.5vmin, 1rem) + 82px);
  }
  #menu_checkbox:not(:checked) ~ #info.banish {
    transition: right 0.3s ease-in, opacity 0.15s ease-in;
    right: 0;
    opacity: 0;
  }


}


#wrap_main {
  display: flex;
  justify-content: center;
  align-items: center;
}



#wrap_axis_grid {
  display: grid;

  grid-template-columns:  var(--axisFontSize) var(--fullGridWidth);
  grid-template-rows: var(--fullGridHeight) var(--axisFontSize);

  justify-content: center;
  align-content: center;

  width: 100%;

  position: relative; 
}


#y-axis, #x-axis {
  display: flex;
  font-family: "Source Serif 4";

  span {
    font-size: var(--axisFontSize);
    width: 100%;
    align-content: center;
    text-align: center;
    height: 100%;
    cursor: default;
    z-index: 1;
    font-weight: 290;
    transition: font-weight 0.1s, color 0.1s;
    overflow: visible;
    color: var(--baseColor);
    box-sizing: border-box;
  }
}

@media (hover: hover) and (pointer: fine) {
  #x-axis span.cue, #y-axis span.cue {
    font-weight: 750;
  }
}

#x-axis span.highlight, #y-axis span.highlight {
  font-weight: 1000;
  color: var(--emphasisColor);
}

:root.dark #x-axis span.highlight, :root.dark #y-axis span.highlight {
  color: var(--focusColor);
  font-weight: 1000;
}

#y-axis {
  flex-direction: column;

  gap: var(--gridGap);

  position: relative;
  top: calc(var(--gridPadding) + var(--gridBorderWidth) - 4px);
  right: 0px;

  width: var(--axisFontSize);
  height: calc(var(--fullGridHeight) - 2 * var(--gridPadding) - 1 * var(--gridBorderWidth));
  span {    padding-right: 11px; }
}

#x-axis {
  flex-direction: row;
  
  position: relative;
  left: calc(var(--axisFontSize) + var(--gridBorderWidth) + var(--gridPadding));
  bottom: 8.5px;
  gap: var(--gridGap);

  height: min-content;
  width: calc(var(--fullGridWidth) - 2 * var(--gridPadding) - 2 * var(--gridBorderWidth));
}


html:has(#hideMatrixTools:checked, #tools_toggle:not(:checked)) {
  #nextgrid, #delgrid {
    display: none;
  }
  { margin-bottom: 0;}
}

html:has(#tools_toggle:checked:not(.top)) {
  #delgrid {
    display: none;
  }
  #nextgrid:has(+ #delgrid.usable) {
    margin-bottom: 0;
  }
}

#nextgrid.hide {display: none;}
#delgrid.hide {display: none;}

#nextgrid {
  position: absolute;
  opacity: 0.45;
  cursor: pointer;
  border: none;
  right: -32px;
  background: url("../assets/PLUS.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 20px;
  width: 20px; 
  filter: var(--hueShiftIcons);
  transition: opacity 0.1s, scale 0.1s, margin 0.15s;
  &.fade {scale: 0; transition: scale 0.45s}
  
}

#nextgrid:has(+ #delgrid.usable) {
  margin-bottom: 55px;
}
#delgrid {
  position: absolute;
  opacity: 0;
  scale: 1;
  cursor: pointer;
  border: none;
  pointer-events: none;
  
  right: -32px;
  background: url("../assets/MINUS.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 22px;
  width: 20px;
  filter: var(--hueShiftIcons);
  transition: opacity 0.1s, scale 0.1s, margin 0.15s;
  &.fade {scale: 0; transition: scale 0.45s}

  &.usable {transition: opacity 0.15s, margin 0.15s, scale 0.1s; opacity: 0.45; pointer-events: all; margin-top: 55px;}
  &.fade {scale: 0; transition: scale 0.45s}

}

#wrapgridbar {
  position: absolute;
  top: -9.5px;
  width: calc(var(--gridWidth) * 0.75);
  height: 20px;  
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px; 

  z-index: 2;

  span {    padding: 5px;  }
}
#gridbar {
  position: absolute;
  height: 20px;  
  display: flex;
  width: 100%;
  align-items: center;
  gap: 15px; 

  z-index: 1;
  overflow-x: scroll;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;

  span {visibility: hidden; z-index: -1; }
  

}

#visible-items {
  position: absolute;
  display: flex;
  justify-content: center;
  gap: 15px;
  height: 20px;
  overflow-x: visible;
  align-items: center;
  z-index: 1;
  pointer-events: none;
  span {
    display: block;
    visibility: visible;
    position: relative;
    color: var(--baseColor);
    font-family: "Source Serif 4";
    font-weight: 325;
    cursor: pointer;
    opacity: 0.45;
    pointer-events: all;
    transition-property: opacity, font-weight;
    transition-duration: 0.1s;
    z-index: 2;
    text-align: center;

    &.new, &.first {
      @starting-style {opacity: 0;}
    }
    &.new {
      animation: riseIn cubic-bezier(0.175, 0.885, 0.32, 1.1)  forwards;
      animation-duration: 0.32s;
    }
    &.chosen:not(.first) {
      opacity: 1;
      font-weight: 450;
    }
  }
}
@keyframes riseIn {
  from {top: 33px;}
  to {top: 0;}
}

@media (hover: hover) and (pointer: fine) {
  #nextgrid:hover{
    opacity: 1;
  }
  #delgrid:hover{
    opacity: 1;
  }
  #visible-items span:hover {
    opacity: 1;
  }
}

#wrap_grids {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(var(--fullGridWidth));
  max-height: calc(var(--fullGridHeight));
}

#grid_carousel {
  position: relative;
  display: flex;
  align-items: center;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  overflow-x: auto;   
  overflow-y: hidden;  
  scroll-snap-type: x mandatory; 
  z-index: 1;
  gap: 30px;
  
  max-width: var(--gridWidth);
}

#wrap_grids::before, #wrap_grids::after {
  content: "";
  position: absolute;
  background-color: var(--bgColor);
  border: var(--gridBorderWidth) solid var(--bracketColor, black);
  height: 100%;
  width: 31px;
  box-sizing: border-box;
  top: 0;
}

#wrap_grids::before {
  left: 0;
  border-right: none;
}

#wrap_grids::after {
  border-left: none;
  right: 0;
}


.grid.deleting {
  scale: 0;
}

.grid {
  align-self: center;
  grid-gap: var(--gridGap);

  position: relative;

  flex: 0 0 auto;       /* Prevent shrinking and maintain fixed width */
  scroll-snap-align: center; 

  opacity: 1;
  display: grid;
  align-items: center;
  align-content: center;
  justify-items: center;
  box-sizing: content-box;
  
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);

  width:  var(--gridWidth);
  height: var(--gridHeight);

  transition: scale 0.44s;
  
  span {
    font-family: "computer modern serif";
    text-align: center;
    outline: 2px solid transparent; /* For crosshairs */
    transition: background-color .1s ease-in-out, border-color .1s ease-in-out, outline-color 0.1s ease, color 0.1s ease-in-out, transform 0.8s ease;
    
    width: 100%;
    height: 100%;
    
    border-radius: 2px;

    font-size: var(--cellFontSize);
    color: var(--baseColor);
    
    z-index: 1;

    box-sizing: border-box;

    display: flex;

    justify-content: center;
    align-items: center;
    overflow: visible;
    
    cursor: pointer;


    &:has(.ripple) {
      transition: background-color .22s ease-in-out, border .12s ease-in-out, outline-color 0.11s ease, color 0.12s ease-in-out, transform 0.8s ease;
    }

  }


  span:not(.given) {
    background-color: var(--lightestShade);
    
    border-bottom: clamp(0.25rem, 0.103em, 0.5rem) solid var(--darkestShade);
  }

  @media (hover: hover) and (pointer: fine) {

    span:not(.given):hover {
      background-color: var(--lighterShade);
      border-color: var(--emphasisColor);
    }
    span.given:hover {
      color: #707070;
    }
    
    span:not(.given).noticed {
      background-color: var(--lighterShade);
      border-color: var(--emphasisColor);
    }

    span.given.noticed {
      color: #707070;
    }
  }
  
  
  span.given {
    cursor: default;

    .ripple {
      display: none;
    }
  }

  span:not(.given):focus, span:not(.given).retain {
    background: var(--focusColor);
    border-color: var(--emphasisColor);
  }

  span > p {
    margin: 0;
    padding: 0;
    position: relative;
    margin-top: 0.1em;
    overflow: hidden;
    pointer-events: none; /* Don't interfere with ripple */

    transition: background 0.4s;

    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    z-index: 5;

    width:  clamp(1rem, calc(9vh * var(--fontFactor)), calc(4rem * var(--fontFactor)));
    
    &.insert {
      animation: fade 0.16s cubic-bezier(.35,1,1,1) forwards;
    }
    &.dismiss {
      animation: fade 0.12s cubic-bezier(.65,-0.4,0,0) forwards reverse;
    }
  }

  span ul {
    list-style-type: none;
    display: flex;
    font-size: calc(var(--cellFontSize) / 3);
    flex-direction: column;
    height: 100%;
    padding: 0;
    width: 80%;
    pointer-events: none;
    flex-wrap: wrap;
    position: absolute;
    gap: 2px;
    margin: 0;
    margin-top: 0.1em;
    justify-content: center;
    

    li {
      transform: 0;
      transition: transform 0.2s;
      
      
      &.dismiss {
        transition: transform 0.05s;
        transform: translateY(500%);
      }
    }
  }
}

#grid_carousel:not(.preventAnimation) {
  span ul li { 
    @starting-style {
      transform: translateY(170%);
    }
  }
}

:root:has(#grid_carousel.preventAnimation) #visible-items span {
  animation-duration: 0.0001s !important;
  transition-duration: 0.00000001s !important;
  @starting-style {
    opacity: 1;
  }
}

.grid.correct, .grid.forceSolved{
  perspective: 300px;
  span {
    transition: background-color .2s ease-in, border-color .2s, scale .2s;
    pointer-events: none;
    cursor: default;
    background-color: transparent;
    outline-color: transparent;
    border-color: transparent;
    animation: correctFlash 1.15s forwards;
    transform-style: preserve-3d;
  }
}

.grid.forceSolved {
  span {transition: none !important; animation: none !important; background-color: transparent !important; border-color: transparent !important; color: var(--correctColor) !important; & .ripple { display: none;}}
}

#wrap_main:has(.grid.current.forceSolved) #propositions .entry {
  &:hover, &.noticed { color: var(--baseColor); }
  pointer-events: none;
}

#wrap_axis_grid:has(.grid.forceSolved.current) .cue {font-weight: 290 !important;}
@keyframes fade {
  from { bottom: 12px; opacity: 0; }
  to { bottom: 0px; opacity: 1; }
}

@keyframes correctFlash {
  0% { transform: rotate3d(0,1,0,0deg); color: var(--baseColor); }
  100% { transform: rotate3d(0,1,0,360deg); color: var(--correctColor); }
}

#prop_container {
  width: 300px; /* Limit the visible width */
  height: 200px; /* Limit the visible height */
  overflow: visible;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  position: relative;
  display: block;
  align-content: center;
  z-index: 1;
}


#propositions {
  position: relative;
  
  transition: translate 0.25s;
  

  cursor: default;

  display: inline-block;
  flex-direction: column;
  justify-content: flex-start;
  font-size: var(--propFontSize);
  margin: auto;
  padding: 0;

  color: var(--baseColor);
  text-align: center;
  list-style-type: none; /* no bullet points */

  overflow: visible;


  transition: width 0.1s;
  li {
    width: 100%;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    background: transparent;
    transition: background 0.05s;
    border-radius: 2px;

    &:has(+ li)::after {
      content: '';
      display: block;
      width: 100%;
      border-bottom: 1px solid var(--baseColor);
      position: relative;
      top: 0.4rem;
    }

    span.entry {
      pointer-events: all;
      cursor: var(--entryCursor, );
      display: inline-block;
      position: relative;
      top: 1px;
      opacity: 1;
      z-index: 2;
      transition: color 0.1s, filter 0.1s;

      .mspace { margin-right: 0 !important; }

      &.variable {
        pointer-events: none;
        cursor: default;
      }
    }


    
    span.entry.correct {
      cursor: default;
    }


    span.entry + .mclose {position: relative; bottom: 1px;}
    .mopen:has(+ span.entry) {position: relative; bottom: 1px;}
    

    @media (hover: hover) and (pointer: fine) {

      /* &:hover {
         background: light-dark(#F5F5F5, color-mix(in hsl, var(--bgColor) 93%, grey 7%));
         }
       */
      span.entry.noticed {
        color: var(--darkShade);
        filter: brightness(1.25) saturate(0.65);
      }


      span.entry.given.noticed {
        color: #707070;
        filter: unset;
      }

    }


    span.entry.highlight {
      color: var(--emphasisColor);
      filter: unset;
    }


  }
  
}

:root.dark #propositions span.entry.highlight {
  color: var(--focusColor);
}


#prop_container::-webkit-scrollbar,
#domain::-webkit-scrollbar {
  display: none;
}


#wrap_grid_domain {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(var(--maxGridWidth) + var(--axisFontSize));
}

#wrap_toolbar_domain {
  display: flex;
  flex-direction: column;
  margin-top: -40px;
  align-items: center;
  width: var(--maxGridWidth);
}

#toolbar {
  display: flex;
  width: 95vw;
  flex-basis: 100%;

  #pencil, #undo, #redo {
    cursor: pointer;
    background-color: transparent;
    border: 0;
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.1)) var(--hueShiftIcons, );
    border-radius: 50px;
    padding: 0;
  }
  #pencil {
    margin-right: auto;
    width:35px;
    height: 35px;
    transform: scale(0.9);
  }

  #pencil::after {
    content: "";
    background-image:url("../assets/PENCIL.svg");
    opacity: 0.45;
    transition: opacity 0.15s, filter 0.1s;
    background-size: 100% 100%;
    display: inline-block;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 2;
  }

  #undo, #redo {
    width: 32px;
    height: 32px;
  }

  #undo::after, #redo::after {
    content: "";
    transition: opacity 0.15s, filter 0.15s;
    background-size: 100% 100%;
    display: inline-block;
    height: 100%;
    width: 24px;
    height: 24px;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    z-index: 2;
  }
  #undo::after {
    background-image:url("../assets/UNDO.svg");
  }
  #redo::after {
    background-image:url("../assets/REDO.svg");
  }

  @media (hover: hover) and (pointer: fine) {
    #pencil.usable:hover::after, #undo.usable:hover::after, #redo.usable:hover::after {
      opacity: 1;
    }

  }

  #pencil.active::after {
    opacity: 1;
    filter: drop-shadow( 4px 4px 1.5px rgba(0, 0, 0, .3));
  }

  #undo:not(.usable), #redo:not(.usable), #pencil:not(.usable) {
    cursor: default;
    pointer-events: none;
    &::after {
      opacity: 0.35;
    }
  }

  #undo.usable::after, #redo.usable::after {
    opacity: 0.6;
  }
}

#domain {
  padding: 0;
  display: flex;
  overflow: scroll;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  align-items: center;
  position: relative;
  transition: opacity 1s;
  height: var(--domainButtonHeight);


  padding-top: calc(0.175 * var(--domainButtonHeight)); /* account for button visuals being 85% */

  .ripple {
    transition: all 0.3s !important;
  }
  button {
    width: 100%;
    min-width: max(40px, 8vh);
    height: 60px;
    position: relative;
    font-family: "computer modern serif";
    font-size: 2.85rem;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    z-index: 0;
    border: none;
    background: transparent;
    padding: 0;




    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 85%;
      border-radius: 11px;
      background: linear-gradient(
        to left,
        var(--darkerShade) 0%,
        var(--darkShade) 8%,
        var(--darkShade) 92%,
        var(--darkerShade) 100%
      );

      filter: saturate(0.4) brightness(0.72);
      transition: filter 0.2s;
    }


    p {
      margin: 0;
      position: relative;
      z-index: 0;


      padding-top: 1.5px;
      height: 85%;
      width: 100%;
      overflow: hidden;
      border: 1px solid var(--darkestShade);
      box-sizing: border-box;
      
      border-radius: 11px;
      color: var(--baseColor);


      display: flex;
      align-items: center;
      justify-content: center;
      
      pointer-events: none;

      background-color: var(--lightestShade);
      will-change: bottom;
      bottom: 8px;
      transition: bottom 0.07s ease-out, background 0.1s;
    }
  }


  @media (hover: hover) and (pointer: fine) {
    button:hover p {
      bottom: 9px;
      background-color: var(--lighterShade);
    }
  }
  button:not(.pushed):focus p, button.retain p {
    transition: bottom 0.125s cubic-bezier(.3, .7, .4, 1.25), background 0.3s;


    background-color: var(--focusColor);
    bottom: 6px;

  }


  button:focus::before {
    filter: brightness(0.75);
  }
  button.pushed p {
    transition: bottom 0.125s cubic-bezier(.3, .7, .4, 1.25), background 0.4s;


    bottom: 6px;
  }


}

.ripple {
  background: var(--focusColor);
  width: 3px;
  height: 3px;
  border-radius: 100%;
  opacity: 1;
  position: absolute;
  transition: transform 0.38s cubic-bezier(.38,.23,.69,1.02);
  pointer-events: none;
  will-change: transform;
  z-index: -1;
}

.ripple.run {
  transform: scale(170);
}

/* For ripple */
.grid span {
  position: relative;
  overflow: hidden;
}



/* Landscape layout */
@media (orientation: landscape) and (width > 900px), (height <= 400px) {
  .page.level {
    --widthFactor: var(--landscapeWidthFactor) !important;
    --heightFactor: var(--landscapeHeightFactor) !important;
    --fontFactor: var(--landscapeFontFactor) !important;
  }
  #wrap_main {
    gap: calc(1.5 * var(--widthFactor) * 2.25vw);
    width: 90%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(calc(-50.1% - 10px), -50%); // balance the floating undo/redo
  }

  
  #prop_container {
    min-width: 40vw;
    width: fit-content;
    max-width: 80vw;
    min-height: 50vh;
    max-height: 85vh;
    height: 100%;
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;

    align-items: center;
    bottom: 0.5em;

  }
  #propositions {
    min-width: 100%;
  }

  #wrap_grid_domain {
    gap: 0;
  }

  #wrap_toolbar_domain {
    margin-top: calc(-0.85 * var(--domainButtonHeight));
  }
  #toolbar {
    left: var(--axisFontSize);
    width: 100%;
    min-height: calc(1.175 * var(--domainButtonHeight));
    position: relative;
    top: calc(1.175 * var(--domainButtonHeight));
    align-items: center;

    #pencil {
      position: absolute;
      left: -43px;
      margin: 0;
    }
    #wrapdo {
      position: absolute;
      right: -38px;
      bottom: 2px;
      display: flex;
      flex-direction: column;
    }
  }
  
  #domain {
    left: var(--axisFontSize);
    width: 100%;
    gap: 5px;
    button {font-size: clamp(2.25rem, 9.45vh, 2.85rem);}
  }

}


/* Portrait layout */
@media (orientation: portrait) and (height > 400px), (width < 900px) and (height > 400px) {

  .page.level {
    --maxGridWidth: calc(min(38vh, 68vw) + 2 * var(--gridPadding) + 2 * var(--gridBorderWidth));
    --cellFontSize: clamp(1rem, calc(min(10vh, 18.5vw) * var(--fontFactor)), calc(6rem * var(--fontFactor)));
    --propFontSize: clamp(1rem, min(4vh, 6vw), 2rem);
  }
  
  @media (max-height: 650px ) {
    .page.level {
      --cellFontSize: clamp(1rem, calc(min(10vh, 18.5vw) * var(--fontFactor) - (650px - 100vh)/10), calc(6rem * var(--fontFactor))) !important;
    }
  }


  #wrap_main {
    flex-direction: column;
    align-content: center;
    justify-content: flex-start;
    height: 100%;
  }

  #prop_container {
    max-height: var(--propsHeight);
    height: min-content;
    width: 85vw;
    margin: 0;
    margin-top: 9px;
    margin-bottom: 5px;
    align-self: center;
    text-align: center;
    align-content: flex-start;
  }

  #propositions {
    min-width: 85vw;    
  }

  #wrap_axis_grid {
    bottom: 0.2vh;
  }

  
  #wrap_toolbar_domain {
    position: relative;
    top: 2vh;
    width: 100%;
  }

  #domain {
    margin-top: -5px;
  }

  #wrap_grid_domain {
    flex: 1;
  }
  #wrap_axis_grid {
    flex: 1;
  }

  #wrap_grid_domain {
    margin-bottom: var(--domainButtonHeight);
  }

  /* Monkey patching for strangely small screens. */
  @media (height < 700px)  {
    .page.level {  
      --gridWidth: calc(var(--widthFactor) * min(38vh, 68vw) - (1 - var(--widthFactor)) * var(--gridGap)  - var(--widthFactor) * (700px - 100vh) / 5);
      --gridHeight: calc(var(--heightFactor) * min(38vh, 68vw) - (1 - var(--heightFactor)) * var(--gridGap) - var(--heightFactor) * (700px - 100vh) / 5);
    }
    
    #wrap_grid_domain {
      position: relative;

    }
    
    #prop_container {
      position: relative;
      max-height: calc(var(--propsHeight) - (700px - 100vh) / 8);
    }
    

  }

  @media (width < 400px) {
    
    #wrap_toolbar_domain {
      top: calc(7px + (400px - 100vw) / 1.48);
    }
    #wrap_axis_grid {
      top: calc((400px - 100vw) / 6);
    }
    
  }
  @media (width < 400px) and (height < 700px) {
    #wrap_grid_domain {
      position: relative;
      bottom: calc((600px + min(100px,30vw) - 100vh) / 15);
    }
    #wrap_toolbar_domain {
      top: calc(7px + (400px - 100vw) / 1.48 - (700px - 100vh) / 12);
    } 
    #prop_container {
      position: relative;
      max-height: calc(var(--propsHeight) - (700px + 80vw - 100vh) / 15);
    }
  }

  #domain {
    width: 95vw;
    flex-direction: row;
    column-gap: 5px;
    row-gap: 2px;
  }

  
  #wrap_axis_grid {
    right: var(--gridOffset);
    height: calc(var(--maxGridWidth) + var(--axisFontSize));
  }
}