:root{
  --cell-size: clamp(40px, 7vw, 60px);
  --label-bg: #dedede;
  --block-light: #ffffff;
  --block-dark: #c2ddf7;
  --accent: #0f172a;
  --muted: #7c828d;
  --blank: #656565; 
  --filled: #00000031;
  --edit-hover: #0000001d;
  --border: #354965;
  --dark_green: #11341e;
  --easy_green: #65f6c1;
  --green: #45f0b1;
  --dark_yellow: #1f170a;
  --yellow: #fae883;
  --dark_red: #291111;
  --red: #f55959;
  --light_blue: #7abdff;
  --special-purple: #cface6;
  --labels_buttons_size: clamp(2px, 1.2rem, 40px);
  --cell_content_size: clamp(12px, 1.1rem, 40px)
}

*{box-sizing:border-box;}

html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body{
  padding: 0px;
  margin: 0px;
  margin-top: 20px;
  color:var(--accent);
  background: linear-gradient(180deg,hwb(210 98% 0%) 0%, #f7fbff 100%);
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif !important;
  overflow-x: hidden;
}

button {
  border: none;
}

.focuser {
  background-color: var(--red);
  -webkit-animation: blinker 1s infinite;  /* Safari 4+ */
  -moz-animation: blinker 1s infinite;  /* Fx 5+ */
  -o-animation: blinker 1s infinite;  /* Opera 12+ */
  animation: blinker 1s infinite;  /* IE 10+, Fx 29+ */
}

@keyframes blinker {
  0% {
    background-color: var(--red);
    border-radius: 100%;
  }
  50% {
    background-color: var(--red);
    border-radius: 0;
  }
  100% {
    background-color: var(--red);
    border-radius: 100%;
  }
}

.focuser-outline {
  position: relative;
}

.focuser-outline::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: 8px solid var(--red);
  border-radius: inherit;
  animation: blinker-outline 1.1s ease-in-out infinite;
  pointer-events: none;
  box-sizing: border-box;
}

@keyframes blinker-outline {
  0%, 100% {
    border: 8px solid var(--red);
  }
  25%, 75% {
    border: 0px solid var(--red);
  }
}

.miniboard {
  transform: scale(0.8);
}

.copied_message {
  display: inline;
  border-radius: 30px;
  background-color: black;
  color: white;
  width: 140px;
  padding: 10px;
}

.share_btn {
  color: black;
  background-color: var(--block-light);
  margin: 20px;
  border-radius: 10px;
  font-size: var(--labels_buttons_size);
  width: 150px;
  height: 43px;
}

.topbar{
  display:inline-block;
  gap:18px;
  align-items:center;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.puzzle_info {
  padding-left: clamp(8px, 2.5dvw, 70px);
}

.encoding{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
}

.encoding input{
  width:68px;
  padding:6px 8px;
  border-radius:6px;
  border:1px solid #d1d5db;
  text-align:center;
  -moz-appearance:textfield;
}
.encoding input::-webkit-outer-spin-button,
.encoding input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.encoding .mult{opacity:0.8}
.encoding .bits{color:var(--muted); margin-left:6px; font-weight:500; font-size:var(--cell_content_size)}

.controls{
  width: 100vw;
  width: 100dvw;
  display:inline-block; 
  gap:8px;
  border-top: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  padding: 15px;
}

.controls button, .archiveBtn, .playBtn, .nextGameButton, .share_btn {
  border-radius: 30px;
  color: var(--accent);
  cursor: pointer;
  font-weight: normal;
  min-width: 64px;
  height: 43px;
}

.drop_downer {
  border-radius: 100%;
  height: 35px;
  width: 35px;
  font-size: 0.9em;
  border: none !important;
  color: white;
  background-color: black;
  transform: translateY(-2px);
}

.playBtn, .nextGameButton {
  padding: 0px;
  padding-left: 30px;
  padding-right: 30px;
  margin: 10px;
  border: none;
  color: white;
  background-color: black;
  border-radius: 30px;
}

.playBtn:hover, .drop_downer:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.instructionsBtn, .undoBtn, .share_btn, .playTutBtn {
  border: 1px solid black;
  background-color: #00000000;
  color: black;
}

.undoBtn {
  background-color: var(--accent);
  color: white !important;
}

.archSelectedDate {
  margin: 0px;
  padding-top: 7px;
  padding-bottom: 7px;
  background-color: var(--light_blue);
}

.archiveBtn {
  letter-spacing: 3px;
  transform: scale(0.9);
  position: absolute;
  top: 44px;
  right: 10px;
  background-color: var(--accent);
  color: var(--block-light);
  z-index: 1;
  padding-left: 20px;
  padding-right: 20px;
}

.archiveDifficulties {
  width: 247px;
  height: 239px;
  position: absolute;
  top: 0;
  right: 122px;
  z-index: 2;
  background: var(--block-light);
  border-radius: 3px;
  color: var(--accent);
  margin-top: 47px;
  box-shadow: 0 1px 10px var(--accent);
}

.datePicker {
  width: 10px;
  height: 1px;
  position: absolute;
  top: 54px;
  right: 100px;
  z-index: 0;
}

.archiveBtn:hover {
  background-color: var(--blank);
}

.controls button#clearBtn{ 
  background: var(--red); 
}

.controls button#clearBtn:hover{ 
  background: #812323; 
}

.gridwrap{
  display: flex;
  justify-content: center;
  overflow:auto;
  padding:8px;
  background:transparent;
}

#gridTable,
.miniboard, .tutTable {
  border-collapse:collapse;
  margin-top:6px;
  box-shadow: 0 1px 10px var(--accent);
  background: white;
  border-radius:8px;
  overflow:hidden;
  border: 2px solid var(--accent);
}

#gridTable td, #gridTable th, 
.miniboard td, .miniboard th,
.tutTable td, .tutTable th{
  width: var(--cell-size);
  height: var(--cell-size);
  min-width: var(--cell-size);
  min-height: var(--cell-size);
  max-width: var(--cell-size);
  max-height: var(--cell-size);
  text-align:center;
  vertical-align:middle;
  border:2px dashed var(--muted);
  font-weight:600;
  font-size: var(--cell_content_size);
  padding:0;
  perspective: 800px; 
  overflow: hidden;
}

.colCheckCell {
  border-top: 2px solid var(--border) !important;
}

.checkCell {
  border-left: 2px solid var(--border) !important;
}

.headerCell{
  background: var(--label-bg);
  color:var(--accent);
  border-bottom: 2px solid var(--border) !important;
  font-weight:700;
}

.leftLabel{
  text-align:center;
  background:var(--label-bg);
  border-right: 2px solid var(--border) !important;
  font-weight:700;
}

.rightLabel{
  background: #f8fafc;
  font-weight:700;
}

.cellValue{
  cursor:default;
  user-select:none;
  font-size: var(--cell_content_size);
  line-height:1;
  padding:6px 0;
  -webkit-touch-callout: none;
}

.border-left {
  border-left: 2px solid var(--accent) !important;
}

.border-right {
  border-right: 2px solid var(--accent) !important;
}

.border-top {
  border-top: 2px solid var(--accent) !important;
}

.border-bottom {
  border-bottom: 2px solid var(--accent) !important;
}

/* block colors */
.block-light{ background: var(--block-light) }
.block-dark { background: var(--block-dark) }

/* label cells that inherit block color */
.label-block{ font-weight:700; }

/* highlight for calculated cells */
.calcCell{ background:#f8fafc; color:#0f172a; font-weight:700 }

/* make editable span stand out when filled */
.editable .cellValue { 
  cursor:pointer; 
  background: var(--blank); 
  cursor:pointer; 
  border-radius: 100px;
  transition: background-color 0.3s ease-in-out;
}

.editable.filled .cellValue { 
  font-weight:800; 
  font-size: var(--cell_content_size);
  cursor:pointer; 
  border-radius: 100px;
  background-color: var(--filled);
  transition: background-color 0.3s ease-in-out;
}

.editable .cellValue:hover {
  background-color: var(--edit-hover);
}

.editable.filled .cellValue:hover {
  background-color: var(--edit-hover);
}

.smaller {
  transform: scale(0.9);
}

/* bottom-left corner labels for the two extra rows */
.bottomLabel{
  background:var(--label-bg);
  border-right: 2px solid var(--border) !important;
  font-weight:700;
}

/* mark matched check/sum cells green */
.calcCell.match {
  background: var(--green)!important; /* light green */
  color: var(--dark_green)!important;      /* dark green */
}

/* make the whole cell area respond to taps/clicks via the .cellValue div */
.cellValue {
  display: flex;              /* stretch child to fill td */
  align-items: center;        /* center text vertically */
  justify-content: center;    /* center text horizontally */
  width: 100%;
  height: 100%;
  cursor: pointer;            /* always shows tappable */
  user-select: none;          /* no text highlight when tapping */
  box-sizing: border-box;
}

td.editable.flagged {
  position: relative;
}

td.editable.flagged::after {
  content: "⚑";
  position: absolute;
  top: -2px;
  right: 2px;
  font-size: var(--cell_content_size);
  color: red;
  pointer-events: none;
}

.pre_go {
  width: 100vw;
  width: 100dvw;
  position: relative;
  background-color:var(--light_blue);
  margin: 0;
  transform: translateX(0);
  font-size: clamp(2px, 1.4rem, 50px);
}

.pre_go_instructions {
  padding-left: clamp(2px, 10vw, 100px);
  padding-right: clamp(2px, 10vw, 100px);
}

.instructionsBtn {
  width: 110px;
}

.dropdown {
  border-left: 3px solid var(--block-dark);
  padding-left: 10px;
}

.choose_diff {
  display: inline-block;
  align-content: center;
  width: 100%;
}

.difficulty_btns {
  display: inline-block;
  padding: 2px !important;
  border-radius: 3px;
  background-color: var(--filled);
  width: fit-content;
}

.easy_btn, .med_btn, .hard_btn,
.arch_easy_btn, .arch_med_btn, .arch_hard_btn {
  padding: 4px;
  width: clamp(120px, 10vw, 500px);
  height: clamp(45px, 4vw, 300px);
  font-weight: bold;
  border-radius: 3px;
  font-size: var(--labels_buttons_size);
  color: black;
}

.arch_easy_btn, .arch_med_btn, .arch_hard_btn {
  width: 120px;
  height: 45px;
}

.arch_easy_btn, .easy_btn {
  background-color: var(--easy_green);
}

.arch_med_btn, .med_btn {
  background-color: var(--yellow);
}

.arch_hard_btn, .hard_btn {
  background-color: var(--red);
}

.good_thru {
  border: 1px solid var(--accent);
  margin: 10px;
  padding: 10px;
}

.good_thru span {
  color: red;
}

.invisible {
  display: none !important;
}

footer {
  display: block;
  position: fixed;
  bottom: 0;
  right: 10px;
}

.centered {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.winMessage{
  width: 100vw;
  width: 100dvw;
  padding: 30px;
  margin: 0;
  background-color: var(--green);
  color: var(--accent);
  font-weight: 700;
  font-size: var(--labels_buttons_size);
}

.dif_Easy {
  display: inline;
  color: var(--dark_green);
  background-color: var(--easy_green);
  border-radius: 10px;
  font-weight: bold;
  padding: 10px;
}

.dif_Med {
  display: inline;
  color: var(--dark_yellow);
  background-color: var(--yellow);
  border-radius: 10px;
  font-weight: bold;
  padding: 10px;
}

.dif_Hard {
  display: inline;
  color: var(--dark_red);
  background-color: var(--red);
  border-radius: 10px;
  font-weight: bold;
  padding: 10px;
}

.transparent {
  background-color: #00000000 !important;
}

/* Air Datepicker overrides to match your theme */
.air-datepicker {
  font-family: Consolas, Menlo, Monaco, monospace !important;
  background: var(--block-light);
  border: 2px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 1px 10px var(--accent);
  color: var(--accent);
  margin-top: 46px;
  transition: none !important;
  animation: none !important;
  width: 247px;
  height: 239px;
}

/* Header (month/year + nav arrows) */
.air-datepicker-nav {
  background: var(--light_blue);
  border-bottom: 2px solid var(--border);
  color: var(--accent);
  font-weight: 600;
}

.air-datepicker-nav--title {
  font-size: var(--cell_content_size);
  cursor: default;
}

/* Days of week row */
.air-datepicker-body--day-names {
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: large;
  color: var(--accent);
}

.air-datepicker-body--day-name {
  color: var(--blank) !important;
}

/* Each date cell */
.air-datepicker-cell {
  border-radius: 6px;
  font-size: var(--cell_content_size);
  font-weight: 600;
  color: var(--accent);
}

/* Hover effect */
.air-datepicker-cell.-day-:hover {
  background-color: var(--edit-hover);
}

/* Today’s date */
.air-datepicker-cell.-current- {
  background-color: var(--light_blue);
  color: var(--accent) !important;
  font-weight: 700;
}

/* Selected date */
.air-datepicker-cell.-selected- {
  background-color: var(--green);
  color: var(--dark_green);
  font-weight: 700;
}

/* Disabled days */
.air-datepicker-cell.-disabled- {
  color: var(--muted);
  background: #f1f1f1;
  cursor: not-allowed;
}

/* Clear/today buttons */
.air-datepicker-buttons {
  border-top: 1px solid var(--border);
  background: var(--label-bg);
}

.air-datepicker-button {
  padding: 6px 12px;
  border-radius: 5px;
  background: var(--block-light);
  color: var(--accent);
  font-weight: 600;
}

.air-datepicker-button:hover {
  background: var(--blank);
  color: white;
}

.mobile-spacer {
  display: none;
}

.flip {
  animation: flip 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform-style: preserve-3d;
}

@keyframes flip {
  0% {
    transform: rotateY(0deg) translateZ(0);
  }
  50% {
    transform: rotateY(180deg) translateZ(15px);
  }
  100% {
    transform: rotateY(360deg) translateZ(0);
  }
}

.savedMessage {
  color: var(--dark_green);
}

.playTutBtn {
  padding: 10px;
  border-radius: 30px;
}

.tutorial_div {
  background-color: #ffffff57;
  backdrop-filter: blur(20px);
  width: 100vw;
  width: 100dvw;
  position: absolute;
  height: clamp(800px, 90vh, 1000px);
  top: clamp(100px, 10vh, 150px);
  height: clamp(800px, 90dvh, 1000px);
  top: clamp(100px, 10dvh, 150px);
}

.tutorialLabel{
  margin-left: 20px;
}

.exitTutBtn {
  /* position: absolute;
  right: 16px;
  top: 10px;   */
  background-color: var(--accent);
  color: var(--block-light);
  transform: scale(0.9);
  z-index: 1;
  padding: 10px;
  border-radius: 30px;
}

.exitTutBtn:hover, .playTutBtn:hover, .prevStep:hover, .nextStep:hover {
  background-color: var(--filled);
}

.tutorialInstructionsLable {
  display: flex;
  color: black;
  font-size: large;
  height: 70px;
  justify-content: center;  
  align-items: center;       
  text-align: center;
  width: clamp(300px, 90vw, 600px);
  width: clamp(300px, 90dvw, 600px);
  margin: 20px auto;
}

.prevStep, .nextStep {
  border-radius: 30px;
  padding: 10px;
  border: 1px solid var(--accent);
  background-color: #00000000;
}

.inactive, .inactive:hover {
  border: 1px solid rgb(165, 165, 165);
  color: rgb(165, 165, 165) !important;
}

.inactive:hover {
  background-color: #00000000;
}

.par-bot {
  color: rgb(58, 58, 58);
  background-color: var(--special-purple);
  border-radius: 10px;
  font-weight: normal;
  padding: 10px;
}

#timer{
  font-size: 1.3em;
  padding-left: 20px;
  padding-right: 20px;
}

.tutIndex {
  display: inline-flex;
  width: 70px;
  margin: 0px 10px;
  justify-content: center;  
  align-items: center;       
  text-align: center;
}

.mobile-only {
  display: none;
}

/* small screens */
@media screen and (max-width: 600px), screen and (max-device-width: 600px) {

  .mobile-only {
    display: flex;
  }

  /* Dynamic cell sizing — applied by JS on the table element directly */
  #gridTable.cells-tight {
    --cell-size: clamp(28px, 5.5vw, 42px);
    --cell_content_size: clamp(9px, 1.8vw, 13px);
  }

  #gridTable.cells-cramped {
    --cell-size: clamp(24px, 4.5vw, 36px);
    --cell_content_size: clamp(8px, 1.5vw, 11px);
  }

  #gridTable.cells-tiny {
    --cell-size: clamp(20px, 3.8vw, 30px);
    --cell_content_size: clamp(7px, 1.3vw, 10px);
  }

  .encoding input{ width:52px }  
  #timer {font-size: 1.1em;}
  .controls {line-break: auto; line-height: 2.8}
  .controls button{ padding:6px 8px; min-width:48px }

    
  .pre_go {
    font-size: clamp(2px, 1em, 20px);
    width: 100%;
    transform: translateX(0px);
  }

  .prevStep, .nextStep {
    color: black;
  }

  .prevStep:hover, .nextStep:hover {
    border: 1px solid var(--accent);
    background-color: #00000000;
  }

  .inactive, .inactive:hover {
    border: 1px solid rgb(165, 165, 165) !important;
    color: rgb(165, 165, 165) !important;
  }

  .editable .cellValue:hover {
    background-color: var(--blank);
  }

  .editable.filled .cellValue:hover {
    background-color: var(--filled);
  }  
  
  h2 {
    font-size: 20px;
  }
  
  h3 {
    line-height: 40px;
  }
  
  .easy_btn, .med_btn, .hard_btn {
    font-size: 14px;
  }

  .miniboard {
    transform: scale(1);
  }

  .mobile-spacer {
    display: inline;
    line-height: 2em;
  }  

  .datePicker {
    right: 80px;
    width: 1px;
    margin: 0 !important;
  } 

  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: linear-gradient(180deg, hwb(210 98% 0%) 0%, #f7fbff 100%);
    padding-bottom: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  }

  body {
    margin-top: 0;
  }

  /* Spacer div to push content below the fixed topbar */
  .topbar-spacer {
    display: block;
  }

      :root { --cell-size: 36px }  /* ← move this to end of media query, remove from after scaling classes */
  }

#gridTable.cells-tight {
  --cell-size: clamp(28px, 5.5vw, 42px);
  --cell_content_size: clamp(9px, 1.8vw, 13px);
}

#gridTable.cells-cramped {
  --cell-size: clamp(24px, 4.5vw, 36px);
  --cell_content_size: clamp(8px, 1.5vw, 11px);
}

#gridTable.cells-tiny {
  --cell-size: clamp(20px, 3.8vw, 30px);
  --cell_content_size: clamp(7px, 1.3vw, 10px);
}