:root {
  --cell: 40px;
  --gap: 4px;
  --vh: 0px;
  --vw: 0px;
  --font-alt-color: #2c7391;
  --bg: #202629;
  --fg:#DCEDF5;
  --blue: #68AECC;
  --slider-blue: #3A90B5;
  --light-blue: #a5c9d9;
  --accent:#fab76b;
  --accent-dark: #A98153;
  --bar-light:#A5C9D9;    
  --bar-dark: #264C62;
  --max-width: 95vw;
  --cell-menu-multiplier: 1.0;
  --cell-menu: calc(var(--cell) * var(--cell-menu-multiplier));
  --tile-text-colour: #000; 
}
@supports (height: 100dvh) {
  :root { --vh: 1dvh; }
}
@supports (width: 100dvw) {
  :root { --vw: 1dvw; }
}
@font-face {
  font-family: "Marker";
  src: url(fonts/ui/PermanentMarker-Regular.ttf) format("truetype");
}

* {
  /* font-family: 'Skranji' !important; */
  /* cursor: none !important; */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  position: static;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE10+ */
  overscroll-behavior: none;
  
}
/* @supports (-webkit-touch-callout: none) {
  html, body { height: -webkit-fill-available; }
  #main-container { min-height: -webkit-fill-available; }
} */
body {
  background: var(--bg);
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* WebKit (Chrome, Safari, Opera) */
html::-webkit-scrollbar, body::-webkit-scrollbar {
  width: 0;
  height: 0;
}
html.no-shading .cell {
  box-shadow: none !important;
}

a {
  color: var(--fg);
  font-weight: 300;
}
p {
  margin: 0;
}
hr {
  width: 96%;
  color: var(--fg);
  margin: calc(var(--cell-menu) * 0.2);
}

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

#adPanel {
  background: var(--bg);
  width: 100%;
  height: 100%;
}
#adContentContainer {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#adContentContainer div {
  color:var(--fg); 
  font-size: calc(var(--cell) * 0.8);
  margin-top: calc(var(--cell) * 0.1);
  margin-bottom: calc(var(--cell) * 0.1);
}
#adUiContainer {
  position: fixed;
  right: calc(var(--cell) * 0.2);
  top: calc(var(--cell) * 0.2);
  width:  calc(var(--cell) * 1);
  height:  calc(var(--cell) * 1);
}
#adTimerContainer {
  border-radius: 50%;
  background:  #dcedf544;/* #20262988; */

}
#adTimerCircle, #adTimerText {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
}
#adTimerText {
  color: var(--fg);
  justify-content: center;
  align-items: center;
  display: flex;
  font-size: calc(var(--cell) * 0.4);
}
#adTimerCirclePath {
  stroke: var(--fg);
  stroke-width:4;
  stroke-linecap:round;
  stroke-dashoffset: 188.52;
  transition: stroke-dashoffset 1s linear;
}
#adCloseButton {
  width: 100%;
  height: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#adUiContainer svg {
  width: 100%;
  height: 100%;
}


/* ================================================== */
/* ---------------------- Hint ---------------------- */
/* ================================================== */

#hintButtonContainer {
  flex: 0 0 auto;
  width: 100%;
  height: calc(var(--cell) * 1.2);
  align-content: center;
  justify-content: center;
}
#hintButton {
  display: flex;
  flex-direction: column;
  height: calc(var(--cell) * 0.9);
  border-radius: calc(var(--cell) * 0.2);
  align-content: center;
  justify-content: center;
}
.overlap-container {
  width: 100%;
  height: 100%;
  display: grid;
}
#hintText, #hintBorder, #hintAnimatedBorder {
  grid-column: 1;
  grid-row: 1;
}
#hintText {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* color: var(--bar-dark); */
  color: var(--light-blue);
  font-size: calc(var(--cell) * 0.5);
}
#hintBorder, #hintAnimatedBorder {
  width: 100%;
  height: 100%;
}
svg #hintBorderPath {
  stroke: var(--light-blue);
  stroke-opacity: 0.5;
  stroke-width:4;
}
svg #hintAnimatedBorderPath {
  stroke: var(--light-blue);
  stroke-opacity: 0;
  transition: stroke-opacity 1s ease;
  stroke-width:4;
  stroke-linecap:round;
  stroke-miterlimit:0;
  /* 1325 */
  stroke-dasharray: 100 165;
}
.animateBorder {
  animation: dash 2s linear infinite;
}

@keyframes dash {
	to {
		stroke-dashoffset: -265px;
	}
}

/* ================================================== */
/* --------------------- Effects -------------------- */
/* ================================================== */

#effectsOverlay {
  z-index: 1000000;
  width: calc(var(--vw, 1vw) * 100);
  height: calc(var(--vh, 1vh) * 100);
  position: fixed;
  pointer-events:none;
}

#effectsCanvas {
  -webkit-font-smoothing: antialiased;
}

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

.default-text{
  font-size: calc(var(--cell-menu) * 0.4);
  color: var(--fg);
}
.copyright-tag {
  text-decoration: none;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 10000;
}
.panel-column {
  display: flex;
  flex-direction: column;
}
.panel-box {
  background: #222F34; /* #202629; */
  padding: calc(var(--cell-menu) * 0.4);
  margin: calc(var(--cell-menu) * 0.1);
  border-radius: calc(var(--cell-menu) * 0.2);
  justify-content: center;
  width: calc(var(--cell-menu) * 7);
  border: calc(var(--cell-menu) * 0.04) solid var(--fg);
  box-shadow: 
    inset 0 0px calc(var(--cell-menu) * 2.6) rgba(32, 38, 41, 1),
    inset calc(var(--cell-menu) * 0.08) calc(var(--cell-menu) * 0.08) 0px rgba(220, 237, 245, 0.15), 
    inset calc(var(--cell-menu) * (-0.08)) calc(var(--cell-menu) * (-0.08)) 0px rgba(16, 19, 21, 0.5), 
    0px 0px calc(var(--cell-menu) * 0.4) rgba(16, 19, 21, 0.65);
}
.overlay-title {
  /* background: rgba(220, 237, 245, 1); */
  background: var(--fg);
  color: var(--bg);
  font-size: calc(var(--cell-menu) * 0.6);
  width: 100%;
  padding: calc(var(--cell-menu) * 0.2) calc(var(--cell-menu) * 0.4) calc(var(--cell-menu) * 0.2) calc(var(--cell-menu) * 0.4);
  border-radius: calc(var(--cell-menu) * 0.2) calc(var(--cell-menu) * 0.2) 0px 0px;
  border: calc(var(--cell-menu) * 0.03) solid var(--fg);
  translate: calc(var(--cell-menu) * (-0.42)) calc(var(--cell-menu) * (-0.42)); 
}
.overlay-title-simple {
  font-size: calc(var(--cell-menu) * 0.6);
  text-align: center;
  color: var(--fg);
  width: 100%;
}
.overlay-text {
  font-size: calc(var(--cell-menu) * 0.4);
  text-align: justify;
  color: var(--fg);
  width: 100%;
}
.vertical-spacer{
  height: calc(var(--cell-menu) * 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-menu) * 6);
  display: grid;
  gap: calc(var(--cell-menu) * 0.5);
  justify-items: center;
  margin: 0px calc(var(--cell-menu) * 0.5) 0px calc(var(--cell-menu) * 0.5);
  grid-template-columns: repeat(3, 1fr);
}
.menuButton {
  display: flex;
  padding: calc(var(--cell-menu) * 0.2);
  font-size: calc(var(--cell-menu) * 0.6);
  min-width: calc(var(--cell-menu) * 1.2);
  min-height: calc(var(--cell-menu) * 1.2);
}
.counts-table{
  width:100%; border-collapse:collapse;
  font-size:calc(var(--cell-menu)*0.35);
}
.counts-table td,.counts-table th{
  padding:2px 4px;
}
.counts-table th{
  color:var(--font-alt-color);
} 
.counts-table .num{
  text-align:right;
}
.version {
  /* font-style: italic; */
  font-weight: 300;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.scroll-container {
  height: calc(var(--cell-menu) * 8);
  max-width: calc(var(--cell-menu) * 7.2);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: calc(var(--cell-menu) * 0.4);
  margin-right: calc(var(--cell-menu) * (-0.2));
  /* padding-right: .4rem; */
  text-align: left;
}

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

#title-container {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  padding: calc(var(--cell-menu) * 0.4) 0px calc(var(--cell-menu) * 0.4) 0px;
}
#words-title-container {
  display: flex;
  width: 100%;
  justify-content: center;
  align-content: center;
}
#words-title {
  color: var(--fg);
  font-size: calc(var(--cell-menu) * 0.4);
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  white-space: nowrap;
}
#words-title .mark{
  opacity:0;
  width: calc(var(--cell-menu) * 0.6);
}
#words-title .mark img {
  margin-top: calc(var(--cell-menu) * (-0.014));
  height: calc(var(--cell-menu) * 0.46);
}
#words-title .word {
  opacity:0;
  padding-right: calc(var(--cell-menu) * 0.4);
  transition: padding-right .5s ease;
}
#words-title .dot{
  opacity: 0;
  display: inline-block;
  transform: translateY(calc(var(--cell-menu) * 0.26));
  transition: opacity 1.4s ease-in, transform 1.4s ease, margin-left 1.4s ease, margin-right 1.4s ease;;
  margin-left: calc(var(--cell-menu) * (-0.1));
  margin-right: 0;
  /* padding: 0; */
}
#titleGrid {
  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));
}
#menuWordList {
  color: var(--fg);
  height: calc(var(--cell-menu) * 3.4);
  overflow: auto;
}
#titleGrid .tile  {
  transform: translateY(-120vh);
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}

#titleStats {
  font-size: calc(var(--cell-menu) * 0.54);
  display: flex;
}

#titleStats .wordStat {
  min-width: calc(var(--cell-menu) * 2);
}
#puzzle-announcement {
  font-size: calc(var(--cell-menu) * 0.4);
  font-style: italic;
  opacity: 0.7;
  font-weight: 300;
}
#startOverlay .vertical-spacer {
  height: calc(var(--cell-menu) * 0.2);
}

/* -------- Dictionary oldData -------- */

#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: var(--font-alt-color);
  pointer-events: none;  
}
#word-counts::before{
  left: 0;
}
#word-counts::after{
  right: 0;
  text-align: right;
  width: 50%;
}
.footnote {
  font-size:calc(var(--cell)*0.32);
  opacity: 0.6;
  font-style: italic;
}

/* ================================================== */
/* ----------------------- Info --------------------- */
/* ================================================== */

.text-list {
  display: flex;
  flex-direction: column;
  height: calc(var(--cell-menu) * 7);
  width: 100%;
}
.text-list .overlay-text {
  margin: calc(var(--cell-menu) * 0.26) 0;
  font-size: calc(var(--cell-menu) * 0.56);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#platformToggle {
  text-align: center;
  font-size: calc(var(--cell-menu) * 0.6);
  margin-bottom: calc(var(--cell-menu) * 0.4);
}
#platformToggle span {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#installOverlay .pane {
  height: calc(var(--cell-menu) * 7);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ----- help ----- */
.help-gif {
  max-width: 100%;
  height: auto;
  max-height: calc(var(--cell-menu) * 6);
}
#helpBox{
  height: calc(var(--cell-menu) * 8.2);
  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-menu) * 0.6);
  text-align: center;
  color: var(--fg);
  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-menu) * 0.4); flex: 1 1 auto;}
.slideControls{display:flex;justify-content:space-between;align-items:center;margin: 0px calc(var(--cell-menu) * 0.5) 0px calc(var(--cell-menu) * 0.5);}
.slideProgress {text-align:center; color: var(--fg); font-size: calc(var(--cell-menu) * 0.4);}



/* ---------- Update-log panel ---------- */

.update-section { 
  margin-bottom: calc(var(--cell-menu) * 0.4);
  
}
.update-version {
  font-size: calc(var(--cell-menu) * 0.45);
  font-weight: 600;
  color: var(--font-alt-color);
  margin-bottom: calc(var(--cell-menu) * 0.05);
}
.update-date {
  font-size: calc(var(--cell-menu) * 0.3);
  font-style: italic;
  opacity: 0.7;
  margin-bottom: calc(var(--cell-menu) * 0.2);
}
.update-section ul       { 
  margin: 0 0 0 calc(var(--cell-menu) * 0.3); 
  padding: 0; 
  padding-left: calc(var(--cell-menu) * 0.2);
}
.update-section li       {
  font-size: calc(var(--cell-menu) * 0.35);
}
.update-section li.ind {
  margin-left: calc(var(--cell-menu) * 0.4);
}


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

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

#settingsList .list-header {
  width:100%;
  text-align: center;
  font-weight: 600;
}
#settingsList hr {
  margin-bottom: calc(var(--cell-menu) * 0.4);
}
.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;
}
/* .setting-row + .setting-row {
  padding-top: calc(var(--cell-menu) * 0.5);
} */
.setting-row {
  margin-bottom: calc(var(--cell-menu) * 0.4);
}
.setting-row .default-text {
  display: flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.setting-description {
  /* margin-top: calc(var(--cell-menu) * 0.2); */
  margin-bottom: calc(var(--cell-menu) * 0.4);
}
.setting-description .overlay-text {
  opacity: 0.5;
  font-style: italic;
}
.caret {
  width: calc(var(--cell-menu) * 0.8);

  /* flex: 1;
  font-size: calc(var(--cell-menu) * 0.4);
  color: var(--fg); */
  margin-left: calc(var(--cell-menu) * 0.2);

}
.caret-path {
  stroke: #DCEDF5;
  fill: none;
  stroke-width: calc(var(--cell-menu) * 0.05);
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* -------- Toggle -------- */

.toggle-switch {
  --track-width: calc(var(--cell-menu) * 1.2);
  --track-height: calc(var(--cell-menu) * 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;
}
.toggle-switch label {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg);
  border: calc(var(--cell-menu) * 0.02) solid var(--fg);
  border-radius: var(--track-height);
  box-shadow:
    inset calc(var(--cell-menu)*0.05) calc(var(--cell-menu)*0.05) 0 rgba(0,0,0,0.4),
    inset calc(var(--cell-menu)*-0.05) calc(var(--cell-menu)*-0.05) 0 rgba(255,255,255,0.25);
  cursor: pointer;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.toggle-switch label::after {
  content: "";
  position: absolute;
  top: 52%;
  left: calc(var(--cell-menu) * (0.03));
  transform: translateY(-50%);
  width: calc(var(--track-height) * 0.94);
  height: calc(var(--track-height) * 0.94);
  background: var(--bg);
  border-radius: 50%;
  box-shadow:
    inset 0 0px calc(var(--cell-menu) * 0.35) 0 rgba(255,255,255,0.25),
    inset calc(var(--cell-menu)*0.05) calc(var(--cell-menu)*0.05) 0 rgba(255,255,255,0.4),
    inset calc(var(--cell-menu)*-0.05) calc(var(--cell-menu)*-0.05) 0 rgba(0,0,0,1);
  transition: transform 0.2s;
}
.toggle-switch input:checked + label {
  background: var(--slider-blue);
}
.toggle-switch input:checked + label::after {
  transform: translate(calc(var(--track-width) - var(--track-height) * 1), -50%);
}


/* ===== 4-stop snap slider (matches toggle styling) ===== */
.snap-slider{
  --track-width: calc(var(--cell-menu) * 2.6);
  --track-height: calc(var(--cell-menu) * 0.6);
  --knob-size: calc(var(--track-height) * 0.94);
  --border: calc(var(--cell-menu) * 0.02);
  --p: 0.333; /* 0..1, updated by JS */
  --accent: var(--font-alt-color, #3b82f6);
  position: relative;
  width: var(--track-width);
  height: var(--track-height);
}

/* Make the (invisible) native range receive all pointer input */
.snap-slider input{
  position:absolute;
  inset:0;
  opacity:0;
  width:100%;
  height:100%;
  margin:0;
  z-index: 2;             /* <-- above the face */
  pointer-events:auto;
}

/* Visuals below the input so dragging works */
.snap-slider-face{
  position:absolute;
  inset:0;
  z-index: 1;
  pointer-events:none;     /* <-- don’t steal touches/clicks */
}

/* Track, ticks, thumb unchanged (your styling kept) */
.snap-slider-track{
  position:absolute;
  inset:0;
  background: var(--bg);
  border: var(--border) solid var(--fg);
  border-radius: var(--track-height);
  box-shadow:
    inset calc(var(--cell-menu)*0.05) calc(var(--cell-menu)*0.05) 0 rgba(0,0,0,0.4),
    inset calc(var(--cell-menu)*-0.05) calc(var(--cell-menu)*-0.05) 0 rgba(255,255,255,0.25);
}

/* Blue progress fill */
.snap-slider-progress{
  position:absolute;
  left:0; top:0; bottom:0;
  width: calc(var(--track-width) * 0.98 * pow(var(--p), 0.76));
  background: var(--slider-blue);
  border-radius: var(--track-height);
  box-shadow: 
    inset calc(var(--cell-menu)*0.05) calc(var(--cell-menu)*0.05) 0 rgba(0,0,0,0.4),
    inset calc(var(--cell-menu)*-0.05) calc(var(--cell-menu)*-0.05) 0 rgba(255,255,255,0.25);
}

/* Ticks */
.snap-slider-ticks{ position:absolute; inset:0; }
.snap-slider-ticks i{
  position:absolute; top:50%;
  width: calc(var(--cell-menu) * 0.02);
  height: calc(var(--cell-menu) * 0.22);
  background: var(--fg); opacity:.35;
  transform: translate(-50%,-50%);
}
.snap-slider-ticks i:nth-child(1){ left: calc(0% + var(--track-height)/2); }
.snap-slider-ticks i:nth-child(2){ left: calc(25% + var(--track-height)/2); }
.snap-slider-ticks i:nth-child(3){ left: calc(50% + var(--track-height)/2); }
.snap-slider-ticks i:nth-child(4){ left: calc(75% + var(--track-height)/2); }

/* Thumb */
.snap-slider-thumb{
  position:absolute; top:50%; left:0;
  width: var(--knob-size); height: var(--knob-size);
  background: var(--bg); border-radius: 50%;
  transform: translate(
    calc( max(0px, (var(--track-width) - var(--track-height)) * var(--p)) ), -50%
  );
  box-shadow:
    inset 0 0px calc(var(--cell-menu) * 0.35) rgba(255,255,255,0.25),
    inset calc(var(--cell-menu)*0.05) calc(var(--cell-menu)*0.05) 0 rgba(255,255,255,0.4),
    inset calc(var(--cell-menu)*-0.05) calc(var(--cell-menu)*-0.05) 0 rgba(0,0,0,1);
  transition: transform .18s ease;
}
.snap-slider input:active ~ .snap-slider-face .snap-slider-thumb{
  transition: transform .05s linear;
}



/* ================================================== */
/* -------------------- Calendar -------------------- */
/* ================================================== */

/* #monthTimelineBox {
}
#monthTimelineTitle {
} */
#monthTimelineContainer {
  margin-top: calc(var(--cell-menu) * (-0.2));
}
#monthTimelineCanvas {
  touch-action: none;
}
#monthTimelineTitleText{
  font-size: calc(var(--cell-menu) * 0.5);
  width: 100%;
  text-align: start;
}
#monthTimelineAvgText {
  display: flex;
  align-items: end;
  font-size: calc(var(--cell-menu) * 0.24);
  width: calc(var(--cell-menu) * 2);
  justify-content: right;
  text-align: end;
  margin-right: calc(var(--cell-menu) * (-0.2));
}
.calendar-box {
  display:flex;
  flex-direction:column;
  align-items:center;
}
#calendarTitle {
  translate: 0 calc(var(--cell-menu) * (-0.42));
  padding-top: calc(var(--cell-menu) * (0.1));
  padding-bottom: calc(var(--cell-menu) * (0.1));
}
#monthTimelineTitle {
  translate: calc(var(--cell-menu) * (-0.42)) calc(var(--cell-menu) * (-0.42));
  padding-top: calc(var(--cell-menu) * (0.1));
  padding-bottom: calc(var(--cell-menu) * (0.1));
}
#calendarMonth {
  font-weight: 600;
}

.calendar-header, .calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:calc(var(--cell-menu)*0.20);
  width:100%;
}
.calendar-header { 
  font-size:calc(var(--cell-menu)*0.35); 
  color:var(--font-alt-color); 
  text-align:center; 
  margin-bottom:calc(var(--cell-menu)*0.2); 
  margin-top: calc(var(--cell-menu) * (-0.1));
}
.calendar-day {
  -webkit-tap-highlight-color: transparent;
  position:relative;
  text-align:center;
  padding:calc(var(--cell-menu)*0.20) 0;
  font-size:calc(var(--cell-menu)*0.45);
  cursor:pointer;
}
.calendar-day.pre-release { 
  cursor:default;
  opacity:0.3;
}
.calendar-day.pre-history { 
  cursor:default;
  opacity:0.6;
}
.calendar-day.disabled { 
  cursor:default;
}
.calendar-day .day-num{
  position:relative; 
  z-index:1; 
}
.calendar-day .marker{
  position:absolute; 
  top:50%; 
  left:50%; 
  transform:translate(-50%,-50%); 
  width: calc(var(--cell-menu)*0.8); 
  height: calc(var(--cell-menu)*0.8);
  border-radius:50%; 
  z-index:0;
}
.day-num {
  color: var(--fg);
}
.today .marker {
  border-width: calc(var(--cell-menu) * 0.075);
  border-color: var(--accent);
  border-style: solid;
}



/* ================================================== */
/* --------------------- Results -------------------- */
/* ================================================== */

#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;
}

/* #resultsTitle {
  translate: calc(var(--cell-menu) * (-0.42)) calc(var(--cell-menu) * (-0.42)); /* -21px; */
/* } */
#resultsTitleId {
  display: flex;
  text-align: left;
  flex: auto;
  font-size: calc(var(--cell-menu) * 0.5);
  margin-top: auto;
  margin-bottom: auto;
  font-weight: bold;
}
#resultsTitleDate {
  display: flex;
  font-size: calc(var(--cell-menu) * 0.5);
  margin-top: auto;
  margin-bottom: auto;
}
#results {
  font-size: calc(var(--cell-menu) * 0.6);
}
#completionTime {
  display: flex;
}
#rankTest {
  display: flex;
}
#totalPlayers {
  font-size: calc(var(--cell-menu) * 0.3);
}
.canvasContainer {
  display: flex;
  width: 100%;
  justify-content: center;
  align-content: center;
}
#monthTimelineCanvas {
  display: block;
  width: calc(var(--cell-menu) * 8);
  height: calc(var(--cell-menu) * 3);
}
#timelineCanvas {
  display: block;
  width: calc(var(--cell-menu) * 8);
  height: calc(var(--cell-menu) * 7);
  touch-action: none;            /* Chrome, Edge, Firefox */
  overscroll-behavior: contain;  /* Safari iOS 15+, Chrome Android */
}



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

.wordStat {
  flex-direction: column;
  display: flex;
  justify-content: center;
  text-align: center;;
} 
.word-stat-label {
  font-size: calc(var(--cell-menu) * 0.22);
  font-style: italic;
  opacity: 0.7;
}
#uniqueWordsCount {
  font-size: calc(var(--cell-menu) * 0.4);
}
#averageWordLength {
  font-size: calc(var(--cell-menu) * 0.4);
}
#loadingResults {
  text-align: center;
  padding: var(--cell-menu) 0px var(--cell-menu) 0px;
}

#heatmapContainer {
  height: calc(var(--cell-menu) * 4);
}
#heatmapCanvas {
  display: block;
  width: calc(var(--cell-menu) * 8);
  height: calc(var(--cell-menu) * 4);
  z-index: 100;
}



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

#resultsStage {
  display: flex;
  flex-direction: row;
  margin-top: calc(var(--cell-menu)*0.14);
  height: calc(var(--cell-menu)*0.44);
}

#stageLetter {
  /* padding-left: calc(var(--cell-menu) * 0.5);
  font-size: calc(var(--cell-menu) * 0.4);
  color: var(--fg);
  width: calc(var(--cell-menu) * 0.5);
  height: calc(var(--cell-menu) * 0.4); */
  width: calc(var(--cell-menu) *1);
  height: calc(var(--cell-menu) *1);
  font-size: calc(var(--cell-menu) *0.7);
  border-radius: calc(var(--cell-menu) *0.2);
  transform: translate(0, calc(var(--cell-menu) *(-4.1)));
}

#hintIcon {
  display: flex;
  justify-content: center;
  height: var(--cell-menu);
  width: var(--cell-menu);
  transform: translate( calc(var(--cell-menu) * 1.6), calc(var(--cell-menu) * (-4.1)));
}

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

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

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

.resultsWordListContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#resultsWordListHeaders {
  padding-top: calc(var(--cell-menu) * 0.1);
}

#resultsWordLists {
  color: var(--fg);
  font-size: calc(var(--cell-menu) * 0.4);
  height: calc(var(--cell-menu) * 1.9);
}
.deltaTime {
  width: calc(var(--cell-menu) * 2);
}
#userDelta {
  /* color: var(--accent); */
  font-weight: 600;
}

/* ================================================== */
/* --------------------- Account -------------------- */
/* ================================================== */

#google-auth {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#btnGoogleSignIn img {
  border-radius: 100%;
  height: calc(var(--cell-menu) * 0.6);
  width: calc(var(--cell-menu) * 0.6);
  padding: calc(var(--cell-menu) * 0.2);
}
#btnGoogleSignIn span {
  padding-left: calc(var(--cell-menu) * 0.1);
  padding-right: calc(var(--cell-menu) * 0.4);
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell-menu) * 0.4);
  font-family: 'Roboto', arial, sans-serif;
  letter-spacing: 0.25px;
  font-weight: 600;
  font-style: normal;
}
#btnGoogleSignIn {
  display: flex;
  align-items: center;
  color: var(--bg);
  background-color: WHITE;
  box-shadow: none;
  border-radius: calc(var(--cell-menu) * 0.5);
  border: #888 solid calc(var(--cell-menu) * 0.03);
  height: calc(var(--cell-menu) * 1);
  scale: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.description-text {
  font-size: calc(var(--cell-menu) * 0.4);
  opacity: 0.5;
  font-style: italic;
  color: var(--fg);
  text-align: center;
}
#loggedOutContainer .vertical-spacer {
  height: calc(var(--cell-menu) * 2.4);
}

#inputMenuBox {
  height: calc(var(--cell-menu) * 8);
  text-align: center;
}

#inputStringPanelTitle {
  text-align: left;
}
#inputStringField {
  border-radius: calc(var(--cell-menu) * 0.2);
  font-size: calc(var(--cell-menu) * 0.5);
  padding: calc(var(--cell-menu) * 0.1);
  text-align: center;
  width: calc(var(--cell-menu) * 4);
}


/* #loggedInContainer {
  height: calc(var(--cell-menu) * 8);
} */

.account-title {
  margin-bottom: calc(var(--cell-menu) * 0.2);
}

.account-title-item {
  font-size: calc(var(--cell-menu) * 0.7);
  font-weight: 700;
  color: var(--fg);
}
#accountName {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#accountCode {
  opacity: 0.5;
  align-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#followingTitle {
  text-align: center;
  /* font-style: italic; */
  font-size: calc(var(--cell-menu) * 0.4);
  color:var(--fg);
  font-weight: 600;
} 

.followed-container {
  flex: 1;
  /* margin-bottom: calc(var(--cell-menu) * 0.4); */
}
.followed-user {
  color: var(--fg);
  flex-direction: row;
  display: flex;
  font-size: calc(var(--cell-menu) * 0.45);
  margin-top: calc(var(--cell-menu) * 0.2);
  margin-left: calc(var(--cell-menu) * 0.3);
}
.followed-user-name {
  font-weight: 600;
  margin-left: calc(var(--cell-menu) * 0.2);
}
.followed-user-code {
  opacity: 0.5;
  margin-left: calc(var(--cell-menu) * 0.2);
}
.followed-user-color {
  border: var(--fg) solid calc(var(--cell-menu) *0.04);
  border-radius: 100%;
  height: calc(var(--cell-menu) *0.26);
  width: calc(var(--cell-menu) *0.26);
  margin-top: calc(var(--cell-menu) *0.09);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.followed-user .subtract-icon {
  height: calc(var(--cell-menu) * 0.5);
  margin-right: calc(var(--cell-menu) * 0.2);
  opacity: 0.5;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.flex-row-space {
  flex: 1;
}
#accountFlexContainer {
  margin-top: calc(var(--cell-menu) * 0.4);
  height: calc(var(--cell-menu) * 5.8);
  display: flex;
  flex-direction: column;
}

.centered-row {
  justify-content: center;
  display: flex;
}
#addFollowingButton {
  margin-top: calc(var(--cell-menu) * 0.2);
}


#addFollowingButton .add-icon {
  height: calc(var(--cell-menu) * 0.7);
  width: calc(var(--cell-menu) * 0.7);
  opacity: 0.5;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

#memberSince, #premiumUntil {
  width: calc(var(--cell-menu) *3.4);
} 
.center-container{
  justify-content: center;
  display: flex;
}
#signOut {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  opacity: 0.5;
}

.followed-user-stats {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  margin-bottom: calc(var(--cell-menu) * 0.1);
}

.followed-user-name-stats {
  font-size: calc(var(--cell-menu) * 0.3);
  color: var(--fg);
}

.followed-user-color-stats {
  border: var(--fg) solid calc(var(--cell-menu) *0.03);
  border-radius: 100%;
  height: calc(var(--cell-menu) *0.14);
  width: calc(var(--cell-menu) *0.14);
  margin-top: calc(var(--cell-menu) *(-0.02));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-right: calc(var(--cell-menu) * 0.1);
}


/* ================================================== */
/* -------------------- End Screen ------------------ */
/* ================================================== */

.invisible-panel{
  width:  calc(var(--cell) * 8);
  height: calc(var(--cell) * 12);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: calc(var(--cell) * 0.4);
  background: transparent;
  border: none;
  box-shadow: none;
  font-family: "Marker", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* solid “clone” shadow of entire panel content */
  --sx: calc(var(--cell) * 0.06);             /* +X */
  --sy: calc(var(--cell) * 0.06);            /* -Y */
  filter: drop-shadow(var(--sx) var(--sy) 0 rgba(0,0,0,1));
}

#endBox .section{ display:flex; flex-direction:column; align-items:center; }
#endBox .section.section-compact{ margin-top: 0; }

/* challenge number */
#endChallengeNumber{
  color: var(--fg);
  font-size: calc(var(--cell) * 1.6);
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  margin-top: calc(var(--cell) * 0.2);
}

/* titles (wider spacing) */
.stack-titles{
  width: 100%;
  gap: calc(var(--cell) * 0.1);
  margin-top: 0;
  margin-bottom: 0;
}
.stack-titles{ 
  margin: calc(var(--cell) * 0.4) 0; 
}

#endTitleOne,
#endTitleTwo{
  color: var(--fg);
  font-size: calc(var(--cell) * 1.0);
  line-height: 0.95;
  letter-spacing: 0.06em;
  width: 100%;
}
.align-left { text-align: left; }
.align-right{ text-align: right; }

.tilt-up-left { transform: translateY(calc(var(--cell) * -0.12)) rotate(-5deg); }
.tilt-down-right{ transform: translateY(calc(var(--cell) *  0.06)) rotate( 4deg); }

/* pill dividers (rounded, filled, thickness = 0.1*cell) */
.divider-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--cell) * 0.3);
  width: 100%;
  margin-top: calc(var(--cell) * 0.6);
  margin-bottom: calc(var(--cell) * 0.2);
}
.divider-stroke{
  flex: 1 1 auto;
  height: calc(var(--cell) * 0.08);            /* thickness */
  background: var(--fg);
  border-radius: 9999px;                      /* rounded ends */
}
.divider-stroke.short{
  flex: 0 0 auto;
  width: var(--cell);                          /* 1 cell long */
}
.divider-text{
  color: var(--fg);
  font-size: calc(var(--cell) * 0.48);
  text-transform: lowercase;
  line-height: 1;
}

/* stats rows (shared style for time, streak, unique, secret) */
.stat-row {
  display: flex;
  align-items: baseline;
  gap: calc(var(--cell) * 0.1);
  color: var(--fg);
  font-size: calc(var(--cell) * 0.7);
  line-height: 1;
  width: calc(var(--cell) * 8);
  align-self: flex-start;
  /* margin-left: calc(var(--cell) * 0.3); */
}
.stat-row + .stat-row{                         /* gap between time↔streak, unique↔secret */
  margin-top: calc(var(--cell) * 0.25);
}

.tilt-left  { 
  padding-left: calc(var(--cell) * 0.6);
  transform: rotate(-3deg);
  justify-content: flex-start;
}
.tilt-right {
  padding-right: calc(var(--cell) * (-0.4));
  transform: rotate( 3deg);
  justify-content: flex-end;   
}

.text-label{ letter-spacing: 0.01em; opacity: 0.9; }
/* .text-value{ } */
.text-value-mod{
  margin-left: calc(var(--cell) * 0.1);
  font-size: inherit;                          /* same size as value */
}
/* inner container: fixes width, left-aligns text */
.stat-inner {
  display: flex;
  justify-content: flex-start;
  /* gap: calc(var(--cell) * 0.1); */
  min-width: 50%;          /* or tweak: 40–60% depending on row look */
}

/* so numbers don’t shift when they gain digits */
.text-value-mod {
  text-align: left;
}


/* CTA inside panel */
.divider-row.cta{
  width: calc(var(--cell) * 8);
  font-family: "Marker", sans-serif;
  color: var(--fg);
  opacity: 0;
}

/* keep background game visible (no extra blur here) */
#endOverlay{
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#endOverlay .flex-column{
  display: flex;
  flex-direction: column;
}

.end-appear{
  opacity: 0;
  /* tiny “slide” feel without touching transform */
  /* margin-top: calc(var(--cell) * 0.2); */
  /* optional subtle softening; remove if you don’t like it */
  filter: none;
}

.end-appear.is-visible{
  opacity: 1;
  filter: none;
  transition:
    opacity 320ms ease,
    margin-top 320ms ease,
    filter 320ms ease;
}


/* CTA text pulsing */
@keyframes endPulseFade { 0% {opacity:0} 100% {opacity:1} }
.pulse { animation: endPulseFade 2s ease-in-out infinite alternate; }


/* Per-digit entry for the challenge ID */
#endChallengeNumber .digit {
  display: inline-block;
  opacity: 0;
  filter: blur(calc(var(--cell) * 0.1));
  /* "thrown down": start high & big; use translate/scale on the span only */
  transform: scale(6);
  will-change: transform, opacity, filter;
}

#endChallengeNumber .digit.in {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition:
    opacity 500ms cubic-bezier(0.55,1.2,0.5,0.99),
    filter 500ms cubic-bezier(0.55,1.2,0.5,0.99),
    transform 500ms cubic-bezier(0.55,1.2,0.5,0.99); /* a bit springy without overshoot */
}


/* CHALLENGE / COMPLETED slide + deblur using width */
#endTitleOne,
#endTitleTwo {
  opacity: 0;
  filter: blur(calc(var(--cell) * 0.14));
  width: 400%;
  overflow: hidden;
  will-change: width, opacity, filter;
}

#endTitleOne.in,
#endTitleTwo.in {
  opacity: 1;
  filter: blur(0);
  width: 100%;
  transition:
    width 500ms cubic-bezier(0.55,1.2,0.5,0.99),
    opacity 500ms cubic-bezier(0.55,1.2,0.5,0.99),
    filter 500ms cubic-bezier(0.55,1.2,0.5,0.99);
}

#endTimeValue{ transition: opacity 250ms ease; }

.blur-out {
  opacity: 0;
  filter: blur(calc(var(--cell) * 0.12));
  /* "thrown down": start high & big; use translate/scale on the span only */
  transform: scale(1.25);
  transition: 
    opacity 250ms ease-in,
    filter 250ms ease-in,
    transform 250ms ease-in;
}


/* ================================================== */
/* -------------------- Dictionary ------------------ */
/* ================================================== */

.tab-button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: .6;
  transition: opacity .15s ease;
  user-select: none;
}
.tab-button.active { 
  opacity: 1; 
}

.dict-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Centered, big input like #inputStringField */
.big-center-input {
  border-radius: calc(var(--cell-menu) * 0.2);
  font-size: calc(var(--cell-menu) * 0.5);
  padding: calc(var(--cell-menu) * 0.1);
  text-align: center;
  width: calc(var(--cell-menu) * 4);
  height: calc(var(--cell-menu) * 0.6);
}

/* Search row: input + icon attached on the right */
.dict-search-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--cell-menu) * 0.15);
  flex: 1;
}

.dict-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--cell-menu) * 0.2);
  font-size: calc(var(--cell-menu) * 0.5);
  line-height: 1;
  border-radius: calc(var(--cell-menu) * 0.2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: .85;
  transition: transform .06s ease, opacity .15s ease;
  user-select: none;
}

.dict-search-btn:active { 
  transform: scale(0.96); 
}

#dictionaryContent .default-text {
  flex: 0;
}


.counts {
  font-size: calc(var(--cell-menu) * 0.3);
  opacity: 0.6;
  font-style: italic;
  text-align: center;
}




#heatmapUserSwitcher {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  z-index: 10;
  pointer-events: auto;
  flex-direction: column;
  margin-left: calc(var(--cell-menu) * (-0.2));
}


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

#controls {
  display: flex;
  width: calc(var(--cell) * 8.7);
  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;
  padding: 0;
  font-weight: bold;
  background: none;
  border: calc(var(--cell) * 0.02) solid var(--fg);
  border-radius: calc(var(--cell) * 0.2);
  color: var(--fg);
  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: var(--fg);
  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);
}
#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: var(--bg);
  background: var(--fg);
  border-radius: calc(var(--cell) * 0.2) calc(var(--cell) * 0.2) 0px 0px;
  border: calc(var(--cell) * 0.02) solid var(--fg);
  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 var(--fg);
  border-top-width: 0;
  height: 100%;
  align-content: center;
}


/* 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));
    -webkit-backdrop-filter: blur(calc(var(--cell) * 0.15)); /* iOS Safari */
    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;
  flex: 0;
  min-height: 0;
  /* height: 100%; */
  /* width: 100vw; */
  /* padding-top: calc(var(--cell) * 0.2); */
}
.grid-container {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: start;
}
.grid {
  display: grid;
  gap: var(--gap);
}
#grid {
  grid-template-columns: repeat(8, var(--cell));
  grid-template-rows: repeat(8, var(--cell));
}

.cell {
  width: var(--cell);
  height: var(--cell);
  background: var(--fg);
  /* background: rgba(1, 1, 1, 0.08); */
  border-radius: calc(var(--cell) * 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s;
  box-shadow: 
    inset calc(var(--cell) * (0.04)) calc(var(--cell) * (0.05)) 0 rgba(0, 10, 20, 0.4);
    /* inset calc(var(--cell) * (-0.01)) calc(var(--cell) * (-0.01)) 0 rgba(255, 255, 255, 1); */
  /* box-shadow: 
    inset calc(var(--cell) * (0.05)) calc(var(--cell) * (0.05)) calc(var(--cell) * (0.15)) rgba(0, 0, 0, 0.55),
    inset calc(var(--cell) * (-0.025)) calc(var(--cell) * (-0.025)) calc(var(--cell) * (0.1)) rgba(255, 255, 255, 0.8); */
  /* background-image: url(svg/cell.svg);
  background-size: 100% 100%;
  background-repeat: no-repeat; */
}
.cell.highlight {
  background: var(--blue);
  /* box-shadow: inset 0 0 0 calc(var(--cell) * (0.05)) #fc9f35; */
}
.cell.blocked {
  background: var(--bg);
  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: var(--gap);
  perspective: 800px;
  margin: calc(var(--cell) * 0.2) 0px 0px 0px;
}
.hand-row {
  background: var(--light-blue);
}
.tile {
  font-family: var(--tile-font, system-ui), sans-serif !important;

  touch-action: none;
  width: 100%;
  height: 100%;
  background: var(--accent);
  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 calc(var(--cell) * (-0.04)) calc(var(--cell) * (-0.04)) 0 rgba(0, 0, 0, 0.4),
    inset calc(var(--cell) * (0.015)) calc(var(--cell) * (0.015)) 0 rgba(255, 255, 255, 0.67);
    /* inset calc(var(--cell) * (-0.05)) calc(var(--cell) * (-0.05)) calc(var(--cell) * (0.1)) rgba(0, 0, 0, 0.27),
    inset calc(var(--cell) * (0.05)) calc(var(--cell) * (0.05)) calc(var(--cell) * (0.15)) rgba(255, 255, 255, 0.67),
    calc(var(--cell) * (0.05)) calc(var(--cell) * (0.05)) calc(var(--cell) * (0.1)) rgba(0, 0, 0, 0.5); */
}
.locked {
  /* background: #cc9c66; */
  background: var(--accent-dark);
  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: var(--bg);
  user-select: none;
  z-index: 1;
  box-shadow: 
    inset calc(var(--cell) * (-0.04)) calc(var(--cell) * (-0.04)) 0 rgba(0, 0, 0, 0.4),
    inset calc(var(--cell) * (0.015)) calc(var(--cell) * (0.015)) 0 rgba(255, 255, 255, 0.67);
    /* inset calc(var(--cell) * (-0.05)) calc(var(--cell) * (-0.05)) calc(var(--cell) * (0.1)) rgba(0, 0, 0, 0.27),
    inset calc(var(--cell) * (0.05)) calc(var(--cell) * (0.05)) calc(var(--cell) * (0.15)) rgba(255, 255, 255, 0.67),
    calc(var(--cell) * (0.05)) calc(var(--cell) * (0.05)) calc(var(--cell) * (0.1)) rgba(0, 0, 0, 0.5); */
}
.locked img {
  width: 100%;
  height: auto;
}

.drag-tile {
  touch-action: none;
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  background: var(--accent);
  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 calc(var(--cell) * (-0.04)) calc(var(--cell) * (-0.04)) 0 rgba(0, 0, 0, 0.4),
    inset calc(var(--cell) * (0.015)) calc(var(--cell) * (0.015)) 0 rgba(255, 255, 255, 0.67),
    calc(var(--cell) * (0.025)) calc(var(--cell) * (0.025)) 0 rgb(157, 115, 68),
    calc(var(--cell) * (0.04)) calc(var(--cell) * (0.04)) 0 rgb(110, 81, 48),
    calc(var(--cell) * (0.3)) calc(var(--cell) * (0.3)) 0 rgba(0, 0, 0, 0.3);
    /* inset calc(var(--cell) * (-0.06)) calc(var(--cell) * (-0.06)) calc(var(--cell) * (0.12)) rgba(0, 0, 0, 0.4),
    inset calc(var(--cell) * (0.06)) calc(var(--cell) * (0.06)) calc(var(--cell) * (0.18)) rgba(255, 255, 255, 0.8),
    0 calc(var(--cell) * (0.25)) calc(var(--cell) * (0.3)) rgba(0, 0, 0, 0.8); */
  transition:
    left 0.05s linear,
    top 0.05s linear;
}
#connectivity {
  color: var(--fg);
  margin-top: calc(var(--cell) * 0.1);
  text-align: center;
  width: 100%;
  font-size: calc(var(--cell) * 0.4); /* 18px; */
  height: calc(var(--cell) * 0.55); /* 24px */
  display: flex;
  justify-content: center;
}
#connectivity .mark {
  height: calc(var(--cell) * 0.46);
  margin-right: calc(var(--cell)*0.14);
}
#wordList {
  position: static;
  color: var(--fg);
  /* background: #202629; */
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  /* padding-top: calc(var(--cell-menu) * 0.026); */
  /* background: #192226; */
  background: rgba(0, 0, 0, 0.08);
  padding: calc(var(--cell-menu) * 0.1);
  border-radius: calc(var(--cell) * 0.2);
  box-shadow: 
    inset calc(var(--cell) * (0.06)) calc(var(--cell) * (0.06)) 0 rgba(0, 0, 0, 0.4),
    inset calc(var(--cell) * (-0.01)) calc(var(--cell) * (-0.01)) 0 rgba(255, 255, 255, 0.1);
    /* inset calc(var(--cell) * (0.05)) calc(var(--cell) * (0.05)) calc(var(--cell) * (0.15)) rgba(0, 0, 0, 0.5),  */
    /* inset calc(var(--cell) * (-0.025)) calc(var(--cell) * (-0.025)) calc(var(--cell) * (0.1)) rgba(255, 255, 255, 0.15); */
}
#wordList div {
  -webkit-tap-highlight-color: transparent;
}
.word-item-container {
  
  font-size: calc(var(--cell) * 0.4);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: calc(var(--cell) * 0.1);
}
.mark{
  display: flex;
}
#wordList .mark{
  width: calc(var(--cell) * 0.6);
}
#wordList .word-item-container .mark img {
  margin-top: calc(var(--cell) * (-0.014));
  height: calc(var(--cell) * 0.46);
}
.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
.menu-icon {
  max-width: calc(var(--cell) * 0.8);
  margin: 0;
  padding: 0;
  margin-top: auto;
  margin-bottom: auto;
}
.word-item {
  display: flex;
  flex-direction: row;
}


@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;
}




/* ================================================== */
/* --------------- Media Adjustments ---------------- */
/* ================================================== */

/* @media (0.57 < aspect-ratio <= 1.0)  */
/* @media (min-aspect-ratio: 57/100) and (max-aspect-ratio: 1/1){ */
@media (max-aspect-ratio: 1/1) {
  :root {
    /* --cell: calc((100dvh) / 16.4); */
    --cell-w: calc(var(--max-width) / 8.7);
    --cell-h: calc((var(--vh, 1vh) * 100) / 16.4);
    --cell: min(var(--cell-w), var(--cell-h));
    --gap: calc(var(--cell) * 0.1);
  }
  #game-container {
    align-items: center;
  }
  #wordList {
    min-height: 0;
    flex: 1 1 auto;
    width: calc(var(--cell)*8.5);
    margin: 0 1.5% 0 1.5%;
  }

  #connectivity {
    font-size: calc(var(--cell) * 0.4);
    min-height: 0;
  }
  #timelineCanvas {
    width: calc(var(--cell-menu) * 8 *0.95);
    height: calc(var(--cell-menu) * 7 *0.95);
  }
  #invalidWords {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    opacity: 0.6;
  }
  #invalidWords .word {
    margin-right: calc(var(--cell) * 0.2);
  }
  .divider-row.cta {
    position:fixed;
    bottom: calc(var(--cell) * 1);
    
  }
}
/* @media (aspect-ratio > 1.0)  */
@media (min-aspect-ratio: 1/1) {
  .overlay {
    flex-direction: row;
  }
  .hand {
    margin-top: calc(var(--cell) * 0.1);
  }
  #wordList {
    height: calc(var(--cell) * 11.36);
    width: 100%;
    margin: calc(var(--cell) * 1.2) calc(var(--cell) * 1) calc(var(--cell) * 1) calc(var(--cell) * 0.2); 
  }
}
/* @media (1.0 < aspect-ratio <= 1.2)  */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 120/100) {
  :root {
    /* --cell: calc((100dvh) / 14); */
    --cell: calc((var(--vh, 1vh) * 100) / 14);
    --gap: calc(var(--cell) * 0.1);
  }
  #game-container {
    margin-left: calc(var(--cell) * 0.2);
  }
  #wordList {
    margin-right: calc(var(--cell) * 0.2); 
  }
  #monthTimelineCanvas {
    height: auto;
    width: 40dvw;
    aspect-ratio: fixed;
  }

  #monthTimelineBox {
    width: 35dvw;
  }
}
/* @media (aspect-ratio > 1.2)  */
@media (min-aspect-ratio: 120/100) {
  :root {
    /* --cell: calc((100dvh) / 14); */
    --cell: calc((var(--vh, 1vh) * 100) / 14);
    --gap: calc(var(--cell) * 0.1);
  }
  #game-container {
    margin-left: calc(var(--cell) * 1);
  }
}

@media (min-aspect-ratio: 57/100) {
  :root {
    --cell-menu: calc(var(--cell));
  }
}