:root {
  --gap: 4px;
  --cell: 40px;
  /* --font-color: #dcedf5; */
  --font-alt-color: #2c7391;
  --background-color: #202629;
  --bg: #202629;
  /* --tile-color: #fab76b; */
  --fg:#DCEDF5;
  --blue: #68AECC;
  --accent:#fab76b;  
  /* vertical‑bar gradient endpoints */
  --bar-light:#A5C9D9;    
  /* --bar-light: #3A90B5; */
  --bar-dark: #264C62;
  /* --bar-dark: #2C7391;  */
}

a {
  color: #dcedf5;
  font-weight: 200;
  text-decoration: none;
}
p {
  margin: 0;
}
* {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  position: static;
  /* Firefox */
  scrollbar-width: none;
  /* IE10+ */
  -ms-overflow-style: none;
  /* remove double tap zoom */
  touch-action: manipulation;
}
/* WebKit (Chrome, Safari, Opera) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}
body {

  /* margin: 0; */
  background: #202629;
  font-family: sans-serif;
  /* height: 100vh; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ================================================== */
/* -------------------- Settings -------------------- */
/* ================================================== */

html.no-shading .cell {
  box-shadow: none !important;
}

/* ================================================== */
/* ----------------------- Ad ----------------------- */
/* ================================================== */

#horizontal-ad-banner-container {
  flex: 0 0 auto;
  width: 100%;
  height: calc(var(--cell) * 1.2);
  align-content: center;
  justify-content: center;
}
#horizontal-ad-banner {
  display: flex;
  flex-direction: column;
  height: calc(var(--cell) * 0.8);
  border: calc(var(--cell) * 0.05) solid #a5c9d988;
  border-radius: calc(var(--cell) * 0.2);
  align-content: center;
  justify-content: center;
  
  /* font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
}
#horizontal-ad-text {
  display: flex;
  justify-content: center;
  text-align: center;
  color: #a5c9d988;
  font-size: calc(var(--cell) * 0.5);
}

/* ================================================== */
/* ---------------------- Menu ---------------------- */
/* ================================================== */

.default-text{
  font-size: calc(var(--cell) * 0.4);
  color: var(--fg);
}


.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.popup-box {
  background: #222F34; /* #202629; */
  padding: calc(var(--cell) * 0.4);
  border-radius: calc(var(--cell) * 0.2);
  justify-content: center;
  /* max-width: 60vw; */
  width: calc(var(--cell) * 7);
  border: calc(var(--cell) * 0.04) solid #dcedf5;
  box-shadow: 
    inset 0 0px calc(var(--cell) * 2.6) rgba(32, 38, 41, 1), /* rgba(58, 144, 181, 0.12), */
    inset calc(var(--cell) * 0.08) calc(var(--cell) * 0.08) 0px rgba(220, 237, 245, 0.15), /* inset calc(var(--cell) * 0.1) 0px 0px rgba(220, 237, 245, 0.05), */
    inset calc(var(--cell) * (-0.08)) calc(var(--cell) * (-0.08)) 0px rgba(16, 19, 21, 0.5), /* inset calc(var(--cell) * (-0.1)) 0px 0px rgba(16, 19, 21, 0.5), */
    0px 0px calc(var(--cell) * 0.6) rgba(16, 19, 21, 0.65);

/*  inset 0 0px calc(var(--cell) * 0.35) 0px rgba(255, 255, 255, 0.25),
    inset calc(var(--cell) * 0.05) calc(var(--cell) * 0.05) calc(var(--cell) * 0.0) 0px rgba(255, 255, 255, 0.4),
    inset calc(var(--cell) * (-0.05)) calc(var(--cell) * (-0.05)) calc(var(--cell) * 0.0) 0px rgba(0, 0, 0, 1); */
}
.overlay-title {
  font-size: calc(var(--cell) * 0.6);
  text-align: center;
  color: #dcedf5;
  width: 100%;
}
.overlay-text {
  font-size: calc(var(--cell) * 0.4);
  text-align: justify;
  color: var(--fg);
  width: 100%;
}
.vertical-spacer{
  height: calc(var(--cell) * 0.6);
}
.menu-button-row-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-button-row {
  display: flex;
  justify-content: space-around;
  width: calc(var(--cell) * 8);
/* }
  .menu-button-row { */
  width: calc(var(--cell) * 6);
  display: grid;
  /* grid-template-columns: repeat(5, 1fr); */
  gap: calc(var(--cell) * 0.5);
  justify-items: center;
  margin: 0px calc(var(--cell) * 0.5) 0px calc(var(--cell) * 0.5);
  grid-template-columns: repeat(3, 1fr);
}
.menuButton {
  display: flex;
  padding: calc(var(--cell) * 0.2);
  font-size: calc(var(--cell) * 0.6);
}
.counts-table{
  width:100%; border-collapse:collapse;
  font-size:calc(var(--cell)*0.35);
}
.counts-table td,.counts-table th{ padding:2px 4px; }
.counts-table th{ color:#2c7391; }                /* subtle accent */
.counts-table .num{ text-align:right; }
.close-btn{
  padding:calc(var(--cell)*0.15) calc(var(--cell)*0.6);
  font-size:calc(var(--cell)*0.5);
  cursor:pointer; border:none; border-radius:8px;
  background:#fab76b; color:#202629;
}

.version {
  font-style: italic;
  font-weight: 200;
  cursor: pointer;
}

/* ------- Settings ------- */

/* #settingsBox {
  min-width: calc(var(--cell) * 5);
} */

.settings-panel {
  display: flex;
  flex-direction: column;
  gap: calc(var(--cell) * 0.5);
  padding: calc(var(--cell) * 0.5);
}


/* Controls on the right */
.setting-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.setting-row.disabled {
  opacity: 0.5;
  cursor:default;
}

/* Optional separator line between rows */
.setting-row + .setting-row {
  padding-top: calc(var(--cell) * 0.5);
}
/* -------- Toggle -------- */

/* container: size it relative to your --cell */
.toggle-switch {
  --track-width: calc(var(--cell) * 1.2);
  --track-height: calc(var(--cell) * 0.6);
  position: relative;
  width: var(--track-width);
  height: var(--track-height);
}

/* hide the real checkbox */
.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* the “track” */
.toggle-switch label {
  display: block;
  width: 100%;
  height: 100%;
  background: #202629;                          /* same as your panel */
  border: calc(var(--cell) * 0.02) solid #dcedf5;
  border-radius: var(--track-height);           /* pill shape */
  box-shadow:
    inset calc(var(--cell)*0.05) calc(var(--cell)*0.05) 0 rgba(0,0,0,0.4),
    inset calc(var(--cell)*-0.05) calc(var(--cell)*-0.05) 0 rgba(255,255,255,0.25);
  cursor: pointer;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}

/* the “knob” */
.toggle-switch label::after {
  content: "";
  position: absolute;
  top: 52%;
  left: calc(var(--cell) * (0.03));
  transform: translateY(-50%);
  width: calc(var(--track-height) * 0.94);
  height: calc(var(--track-height) * 0.94);
  background: var(--background-color);
  border-radius: 50%;
  box-shadow:
    inset 0 0px calc(var(--cell) * 0.35) 0 rgba(255,255,255,0.25),
    inset calc(var(--cell)*0.05) calc(var(--cell)*0.05) 0 rgba(255,255,255,0.4),
    inset calc(var(--cell)*-0.05) calc(var(--cell)*-0.05) 0 rgba(0,0,0,1);
  transition: transform 0.2s;
}

/* checked state: invert track & slide knob */
.toggle-switch input:checked + label {
  background: #3A90B5;
}
.toggle-switch input:checked + label::after {
  /* background: #202629; */
  transform: translate(
    calc(var(--track-width) - var(--track-height) * 1),
    -50%
  );
}


/* -------- Title -------- */

#words-title{
  color: #dcedf5;
}
#title-container {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  padding: calc(var(--cell) * 0.4) 0px calc(var(--cell) * 0.4) 0px;
}
#words-title-container {
  display: flex;
  width: 100%;
  justify-content: center;
}
#words-title {
  width: calc(var(--cell) * 5);
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}
#title-grid {
  grid-template-columns: repeat(2, var(--cell));
  grid-template-rows: repeat(2, var(--cell));
}
#paused-grid {
  grid-template-columns: repeat(6, var(--cell));
  grid-template-rows: repeat(1, var(--cell));
}

/* -------- Dictionary Data -------- */

#data-updated{
  font-style: italic;
}
.counts-table th{
  text-align: center; 
}
.counts-table tr:nth-child(even) td{
  background: rgba(255,255,255,0.04);
}
.counts-table tr:nth-child(odd) td{
  background: rgba(0,0,0,0.04);
}
#word-counts{
  position: relative;
  padding-top: 1.4em;      
}
#word-counts::before,
#word-counts::after{
  position: absolute;
  top: 0;
  font-weight: 600;
  font-size: inherit;
  color: #2c7391;
  pointer-events: none;  
}
#word-counts::before{
  left: 0;
}
#word-counts::after{
  right: 0;
  text-align: right;
  width: 50%;
}

/* -------- End -------- */
#resultsBox {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}
.split {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
}
.overlay-title.split {
  background: rgba(220, 237, 245, 1);
  color: var(--background-color);
  /* padding: 8px 19px 8px 19px; */
  padding: calc(var(--cell) * 0.2) calc(var(--cell) * 0.4) calc(var(--cell) * 0.2) calc(var(--cell) * 0.4);
  translate: calc(var(--cell) * (-0.42)) calc(var(--cell) * (-0.42)); /* -21px; */
  border-radius: calc(var(--cell) * 0.2) calc(var(--cell) * 0.2) 0px 0px;
  border: calc(var(--cell) * 0.03) solid var(--fg);

}
#resultsTitleId {
  display: flex;
  text-align: left;
  flex: auto;
  font-size: calc(var(--cell) * 0.5);
  margin-top: auto;
  margin-bottom: auto;
  font-weight: bold;
}
#resultsTitleDate {
  display: flex;
  font-size: calc(var(--cell) * 0.5);
  /* font-style: italic; */
  margin-top: auto;
  margin-bottom: auto;
}
#results {
  color: var(--fg);
  font-size: calc(var(--cell) * 0.6);
}
#completionTime {
  display: flex;
}
#rankTest {
  display: flex;
}
#totalPlayers {
  font-size: calc(var(--cell) * 0.3);
}

/* #endTime {
  text-align: center;
  font-size: calc(var(--cell) * 0.6);
} */

.canvasContainer {
  display: flex;
  width: 100%;
  /* width: calc(var(--cell) * 5); */
  height: calc(var(--cell) * 7);
  justify-content: center;
  align-content: center;
}

#timelineCanvas {
  display: block;
  width: calc(var(--cell) * 8);
  height: calc(var(--cell) * 7);
}

hr {
  width: 96%;
  color: var(--fg);
}

#countdown {
  font-style: italic;
  font-size: calc(var(--cell) * 0.3);
}
#resultsBox .vertical-spacer {
  height: calc(var(--cell) * 0.4);
}

.wordStat {
  flex-direction: column;
  display: flex;
  justify-content: center;
} 
.word-stat-label {
  font-size: calc(var(--cell) * 0.2);
  font-style: italic;
}
#uniqueWordsCount {
  font-size: calc(var(--cell) * 0.4);
}
#averageWordLength {
  font-size: calc(var(--cell) * 0.4);
}

/* ----- help ----- */
.help-gif {
  max-width: 100%;
  height: auto;
  max-height: calc(var(--cell) * 6);
}
#helpBox{
  height: calc(var(--cell) * 9.4);
  display: flex;
  flex-direction: column;      
}
#slides{
  flex: 1 1 auto;      
  position: relative;   
  overflow-y: auto;   
}
.slide{
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;  
  gap: .8rem;
}
.slide.active{display:flex}
.slide h2{
  font-size: calc(var(--cell) * 0.6);
  text-align: center;
  color: #dcedf5;
  width: 100%;
  margin: 0;
  flex: 0 0 auto;
}
.slide .vertical-spacer {flex: 1 1 auto;}
.slide p{text-align:center; color: var(--fg); font-size: calc(var(--cell) * 0.4); flex: 1 1 auto;}
.slideControls{display:flex;justify-content:space-between;align-items:center;margin-top:1.2rem; flex: 0 0 auto;}
.slideProgress {text-align:center; color: var(--fg); font-size: calc(var(--cell) * 0.4);}

/* ================================================== */
/* ---------------------- Game ---------------------- */
/* ================================================== */

#controls {
  display: flex;
  width: calc(8 * var(--cell) + 7 * 4px);
  justify-content: space-between;
  margin-bottom: calc(var(--cell) * 0.1);
  margin-top: calc(var(--cell) * 0.1);
}

#controls button {
  width: var(--cell);
  height: var(--cell);
  font-size: calc(var(--cell) * 0.6);
}
button {
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-content: center;
  justify-content: center;

  font-weight: bold;
  background: none;
  border: calc(var(--cell) * 0.02) solid #dcedf5;
  border-radius: calc(var(--cell) * 0.2);
  color: #dcedf5;
  cursor: pointer;
  
  translate: calc(var(--cell) * (-0.02)) calc(var(--cell) * (-0.02));
  scale: 1.04;
  transition: 0.05s;
  box-shadow: 
    inset 0 0px calc(var(--cell) * 0.35) 0px rgba(255, 255, 255, 0.25),
    inset calc(var(--cell) * 0.05) calc(var(--cell) * 0.05) calc(var(--cell) * 0.0) 0px rgba(255, 255, 255, 0.4),
    inset calc(var(--cell) * (-0.05)) calc(var(--cell) * (-0.05)) calc(var(--cell) * 0.0) 0px rgba(0, 0, 0, 1);
}
button:active {
  background-color: none;
    box-shadow:
      inset 0 0px calc(var(--cell) * 0.15) 0px rgba(255, 255, 255, 0.25),
      inset 0 0 0 0px rgba(255, 255, 255, 0.4),
      inset 0 0 0 0px rgba(0, 0, 0, 1);
    translate: calc(var(--cell) * 0.0) calc(var(--cell) * 0.0);
    scale: 1;
}
button:disabled{
  opacity:.5;
  cursor:default
}

/* Timer */
#info-box {
  width: calc(var(--cell) * 2);
  text-align: center;
  color: #dcedf5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--cell) * 0.2);
  box-shadow: 
    inset 0 0px calc(var(--cell) * 0.25) 0px rgba(255, 255, 255, 0.25);
  /* border: calc(var(--cell) * 0.05) solid #dcedf5; */
  /* border-radius: calc(var(--cell) * 0.2); */
  /*background: #DCEDF5;
  border-radius: calc(var(--cell) * 0.2); */
}
#puzzle-id-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  font-size: calc(var(--cell) * 0.3);
  color: #202629;
  background: #DCEDF5;
  border-radius: calc(var(--cell) * 0.2) calc(var(--cell) * 0.2) 0px 0px;
  border: calc(var(--cell) * 0.02) solid #dcedf5;
  border-bottom-width: 0;
}
#puzzle-id {
  width: 70%;
}
#puzzle-date {
  width: 100%;
}
#timer {
  width: 100%;
  font-size: calc(var(--cell) * 0.4);
  font-style: italic;
  border-radius: 0px 0px calc(var(--cell) * 0.2) calc(var(--cell) * 0.2);
  border: calc(var(--cell) * 0.02) solid #dcedf5;
  border-top-width: 0;
  height: 100%;
  align-content: center;
  /* background: #202629; */
  /* box-shadow:
    inset -4px -4px 0px rgba(255, 255, 255, 0.8),
    inset 4px -4px 0px rgba(255, 255, 255, 0.8); */
}


/* Layout */
#main-container {
  height: 100%;
  width: 100vw;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#main-container::after {
    content:'';
    position:fixed;
    inset:0;
    backdrop-filter:blur(calc(var(--cell) * 0.15));
    pointer-events:none;
    z-index:999;
    background:#68AECC50;
    opacity:0;
    transition:opacity .2s;
}
#main-container.blurred::after { 
  opacity:1; 
}

#game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* width: 100vw; */
  /* padding-top: calc(var(--cell) * 0.2); */
}
.grid-container {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  /* justify-self: flex-end; */
  align-items: start;
  /* align-self: start; */
}
.grid {
  display: grid;
  gap: 4px;
}
#grid {
  grid-template-columns: repeat(8, var(--cell));
  grid-template-rows: repeat(8, var(--cell));
}

.cell {
  width: var(--cell);
  height: var(--cell);
  background: #dcedf5;
  border-radius: calc(var(--cell) * 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s;
  box-shadow:
    inset 2px 2px 6px rgba(0, 0, 0, 0.6),
    inset -1px -1px 4px rgba(255, 255, 255, 0.8);
}
.cell.highlight {
  box-shadow: inset 0 0 0 3px #fc9f35;
}
.cell.blocked {
  background: #202629;
  box-shadow: 0 0 0 #000;
}
.hand {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(8, var(--cell));
  grid-template-rows: repeat(2, var(--cell));
  gap: 4px;
  perspective: 800px;
  margin: calc(var(--cell) * 0.2) 0px 0px 0px;
  /* justify-self: flex-end; */
  /* position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%); */
}
.hand-row {
  background: #a5c9d9;
}
.tile {
  touch-action: none;
  width: 100%;
  height: 100%;
  background: #fab76b;
  border-radius: calc(var(--cell) * 0.2);
  font-size: calc(var(--cell) * 0.7);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  position: relative;
  z-index: 1;
  box-shadow:
    inset -2px -2px 4px rgba(0, 0, 0, 0.27),
    inset 2px 2px 6px rgba(255, 255, 255, 0.67),
    2px 2px 4px rgba(0, 0, 0, 0.5);
}
.locked {
  background: #cc9c66;
  border-radius: calc(var(--cell) * 0.2);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell) * 0.6);
  font-weight: 900;
  color: #202629;
  user-select: none;
  z-index: 1;
  box-shadow:
    inset -2px -2px 4px rgba(0, 0, 0, 0.27),
    inset 2px 2px 6px rgba(255, 255, 255, 0.5),
    2px 2px 4px rgba(0, 0, 0, 0.5);
}
.drag-tile {
  touch-action: none;
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  background: #fab76b;
  border-radius: calc(var(--cell) * 0.2);
  font-size: calc(var(--cell) * 0.7);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 999;
  transform: scale(1.2);
  box-shadow:
    inset -3px -3px 6px rgba(0, 0, 0, 0.4),
    inset 3px 3px 9px rgba(255, 255, 255, 0.8),
    0 10px 12px rgba(0, 0, 0, 0.8);
  transition:
    left 0.05s linear,
    top 0.05s linear;
}
#connectivity {
  color: #fab76b;
  margin-top: calc(var(--cell) * 0.1);
  text-align: center;
  width: 100%;
  font-size: calc(var(--cell) * 0.4); /* 18px; */
  min-height: calc(var(--cell) * 0.55); /* 24px */
}
#wordList {
  position: static;
  /* max-height: calc(var(--cell) * 0.2); */
  color: #dcedf5;
  font-size: 18px;
  background: #202629;
  overflow: auto;
  /* width: 320px; */
  /* margin: 58px 14px 0px 14px; */
  /* text-align: justify;
  text-justify: inter-word; */
}
#wordList div {
  margin-bottom: 6px;
}

.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}


.menu-icon {
  /* color: #dcedf5; */
  max-width: calc(var(--cell) * 0.8);
}

.word-item {
  font-size: calc(var(--cell) * 0.4);
}

@media (max-aspect-ratio: 0.57) {
  :root {
    --cell: calc((95vw - 7 * var(--gap)) / 8);
  }
  #game-container {
    width: 95vw;
    align-items: center;
  }
  /* #game-container {
    
  } */
  #wordList {
    flex: 1 1 auto;
    width: 97%;
    margin: 0 1.5% 0 1.5%;
    font-size: calc(var(--cell) * 0.4);
    max-height: none;
  }
  .popup-box {
    /* max-width: 80vw; */
    width: 80vw;
  }
  #helpBox {
    width: 80vw;
  }
  /* .menu-button-row {
    width: calc(var(--cell) * 7);
  } */
  
  /* .overlay-text {
    font-size: calc(var(--cell) * 0.25);
  } */

  #puzzle-id-container {
    width: 96%;
  }
  #timer {
    width: 96%;
  }
}
@media (0.57 < aspect-ratio <= 1.0) {
  :root {
    --cell: calc((100dvh - 14 * var(--gap)) / 15);
  }
  #game-container {
    align-items: center;
    
  }
  #wordList {
    height: calc(var(--cell) * 4);
    width: calc(var(--cell) * 8 - var(--gap) * 0);
    margin: 0 1.5% 0 1.5%;
  }
  /* .popup-box {
    width: calc(var(--cell) * 7);
  } */
  /* #helpBox {
    width: calc(var(--cell) * 7);
  } */
}
@media (aspect-ratio <= 1.0) {
  #connectivity {
    font-size: calc(var(--cell) * 0.4);
    min-height: 0;
  }

  #timelineCanvas {
    width: calc(var(--cell) * 8 *0.95);
    height: calc(var(--cell) * 7 *0.95);
  }
  /* .help-text {
    font-size: calc(var(--cell) * 0.35);
  } */
}
@media (1.0 < aspect-ratio <= 1.2) {
  :root {
    --cell: calc((100dvh - 11 * var(--gap)) / 13);
  }
  #game-container {
    margin-left: calc(var(--cell) * 0.2);
  }

  #wordList {
    height: 82.5%;
    width: 100%;
    margin: calc(var(--cell) * 1.2) calc(var(--cell) * 0.2) calc(var(--cell) * 1) calc(var(--cell) * 0.2); 
  }
  /* #helpBox {
    width: calc(var(--cell) * 7);
  } */
}
@media (aspect-ratio > 1.2) {
  :root {
    --cell: calc((100dvh - 11 * var(--gap)) / 13);
  }
  #game-container {
    margin-left: calc(var(--cell) * 1);
  }
  #wordList {
    height: 82.5%;
    width: 100%;
    margin: calc(var(--cell) * 1.2) calc(var(--cell) * 1) calc(var(--cell) * 1) calc(var(--cell) * 0.2); 
  }
  /* #helpBox {
    width: calc(var(--cell) * 8);
  } */
}
@media (aspect-ratio > 1.0) {
  .hand {
    margin-top: calc(var(--cell) * 0.1);
  }
  /* #timelineCanvas {
    width: calc(var(--cell) * 6.5);
    height: calc(var(--cell) * 6.5);
  } */
}

@keyframes liftFlip {
  0% {
    transform: translateY(0) scale(1) rotateY(0);
  }
  10% {
    transform: translateY(-2.5%) scale(1.05) rotateY(0);
  }
  50% {
    transform: translateY(-10%) scale(1.25) rotateY(90deg);
  }
  50.1% {
    transform: translateY(-10%) scale(1.25) rotateY(-90deg);
  }
  90% {
    transform: translateY(-2.5%) scale(1.05) rotateY(0);
  }
  100% {
    transform: translateY(0) scale(1) rotateY(0);
  }
}

.unlocking {
  animation: liftFlip 0.6s ease forwards;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}




/* .slide{display:none;flex-direction:column;align-items:center;gap:.8rem; flex: 1 1 auto;} */
#heatmapContainer {
  height: calc(var(--cell) * 4);
}
#heatmapCanvas {
  display: block;
  width: calc(var(--cell) * 8);
  height: calc(var(--cell) * 4);
}



#resultsLetterGrid {
  grid-template-columns: repeat(8, calc(var(--cell) * 0.6));
  grid-template-rows: repeat(2, calc(var(--cell) * 0.6));
  font-size: calc(var(--cell) * 0.5);
}

#resultsStage {
  display: flex;
  flex-direction: row;
}

#stageLetter {
  padding-left: calc(var(--cell) * 0.5);
  font-size: calc(var(--cell) * 0.4);
  color: var(--fg);
  width: calc(var(--cell) * 0.5);
  height: calc(var(--cell) * 0.4);
}

#lettersAvailable {
  padding-left:  calc(var(--cell)*1.58);
}

.list-header {
  color: var(--font-alt-color);
  font-size: calc(var(--cell) * 0.4);
}

#resultsBestWordContainer {
  text-align: center;
  width: 100%;
}

.resultsWordListContainer {
  width: 100%;
  /* display: flex; */
  /* justify-items: center; */
  padding-left: calc(var(--cell) * 0.6);
}
#resultsWordListHeaders {
  padding-top: calc(var(--cell) * 0.1);
}

#resultsWordLists {
  color: var(--fg);
  font-size: calc(var(--cell) * 0.4);
  height: calc(var(--cell) * 2.4);
}

#resultsWordListUser {
  /* height: calc(var(--cell) * 3); */
  overflow: auto;
  position: static;
  /* display: flex; */
}
.deltaTime {
  width: calc(var(--cell) * 2);
}
/* #resultsWordListGlobal {
  height: calc(var(--cell) * 3);
  display: flex;
} */