:root{
  --accent:#ffd22e;
  --bg-dyslexia:#bfdfff;
  --square-dark:#0d4f8b;
}
*{box-sizing:border-box;font-family:'Segoe UI',sans-serif;}
body{margin:0;min-height:100vh;background:var(--bg-dyslexia);display:flex;align-items:center;justify-content:center;padding-bottom:40px;color:#000;}

.screen{width:100%;max-width:640px;text-align:center;padding:24px 16px;padding-bottom:220px;}
.hidden{display:none;}
.primary{margin-top:18px;padding:12px 32px;border:none;border-radius:9999px;background:#fff;cursor:pointer;}


#checkboxContainer{
  display:grid;
  
  gap:8px;
  margin-top:16px;
}

#checkboxContainer label{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;cursor:pointer;}
#checkboxContainer input{appearance:none;width:28px;height:28px;border:2px solid var(--square-dark);border-radius:6px;}

#checkboxContainer input:checked{
  background:var(--square-dark);
  border-color:var(--square-dark);
  position:relative;
}


#progressBar{position:fixed;bottom:0;left:0;width:100%;height:12px;background:rgba(0,0,0,.15);}
#progressFill{width:0;height:100%;background:var(--accent);transition:width .3s;}

.visual{
  display:grid;
  grid-template-columns:repeat(6, auto);
  grid-auto-rows:auto;
  justify-content:center;
  gap:10px;
  margin:0 auto 36px;
}
.group{width:88px;height:88px;margin:0;border-radius:14px;background:var(--square-dark);display:grid;place-items:center;padding:14px;grid-template-columns:repeat(4,auto);gap:6px;}
.dot{width:10px;height:10px;border-radius:50%;background:#fff;}

.cardRow{display:flex;align-items:center;justify-content:center;gap:18px;}
@keyframes shakeRow{0%{transform:translateX(0);}20%{transform:translateX(-8px);}40%{transform:translateX(8px);}60%{transform:translateX(-8px);}80%{transform:translateX(8px);}100%{transform:translateX(0);} }
.cardRow.shake{animation:shakeRow .4s;}

.card{background:#fff;border-radius:20px;width:340px;min-height:220px;padding:32px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(0,0,0,.2);}
.problem{font-size:1.8rem;display:flex;gap:10px;align-items:center;}
.problem input{width:80px;font-size:1.4rem;text-align:center;border:2px solid var(--square-dark);border-radius:10px;padding:6px;}

.check-btn{position:relative;width:64px;height:64px;border:none;background-size:contain;background-repeat:no-repeat;background-position:center;cursor:pointer;}
.check-btn.neutral{background-image:url("neutral.png");}
.check-btn.correct{background-image:url("on.png");}
.check-btn.wrong{background-image:url("off.png");}

/* Minimalist circle icons */
.icon-btn{
  width:48px;height:48px;border:2px solid currentColor;border-radius:50%;background:none;color:#0d4f8b;display:flex;align-items:center;justify-content:center;font-size:1.7rem;cursor:pointer;
}
.icon-btn.pause::before{content:"❚❚";}
.icon-btn.play::before{content:"►";}
.icon-btn.restart::before{content:"⟲";}
#pauseBtn{position:fixed;right:16px;bottom:60px;z-index:30;}

/* overlay */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9999;}
.overlay.hidden{display:none!important;}
.overlay .icon-btn{color:#fff;border-color:#fff;margin:0 24px;}

/* sparks */
.spark{position:fixed;width:12px;height:12px;background:#2ecc71;border-radius:50%;z-index:9000;pointer-events:none;}
#checkboxContainer label{position:relative;}
#checkboxContainer input:checked::after{
  content:"✔";
  color:#fff;
  font-size:20px;
  font-weight:700;
  position:absolute;
  left:4px;
  top:0;
  line-height:28px;
}

.progress-fraction{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  font-size:0.9rem;
  color:#000;
  opacity:0.75;
  pointer-events:none;
}

.streak{
  width:128px;
  height:128px;
  object-fit:contain;
  margin:12px auto 8px;
  display:block;
}

.end-panel{
  background:#ffffff;
  padding:40px 48px;
  border-radius:24px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}
.end-panel h2{
  margin:0;
  font-size:2rem;
  color:#0d4f8b;
}

#restartBtn{
  font-size:1.3rem;
  padding:16px 56px;
  background:#0d4f8b;
  color:#ffffff;
}
#restartBtn:hover{background:#1660b0;}

@media(max-width:480px){
  #checkboxContainer{}
}


/* Digit drag pad */
.digit-pad{
  position:fixed;
  bottom:120px; /* 12px progress bar + 16px gap */
  left:0;
  width:100%;
  display:flex;
  justify-content:center;
  gap:12px;
  pointer-events:auto;
}
.digit-circle{width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1.2rem;user-select:none;box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:pointer;}
.digit-circle:active{transform:scale(0.95);} 


/* Scale down visual groups when there are many factors so the card area never shifts off‑screen */
.visual.small .group{
  width:60px;
  height:60px;
  margin:0;
  padding:8px;
  gap:4px;
}
.visual.small .dot{width:7px;height:7px;}

.visual.xsmall .group{
  width:52px;
  height:52px;
  margin:0;
  padding:8px;
  gap:4px;
}
.visual.xsmall .dot{width:6px;height:6px;}

/* Place win-streak badge on left mid‑screen */

#streakImg{
  position:fixed;
  left:calc(50% - 262px); /* balances the check button gap */
  top:50%;
  transform:translateY(-50%);
  margin:0;
  width:120px;
  height:120px;
  z-index:1000;
}




/* Ultimate override: uniform big badge, left aligned farther */
#streakImg{
  position:fixed;
  left:calc(50% - 420px);  /* further left for perfect symmetry */
  top:50%;
  transform:translateY(-50%);
  width:200px;
  height:200px;
  object-fit:contain;
  z-index:1000;
}


/* === Patch v31: vertical centering of main game elements === */
#gameScreen:not(.hidden){
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-bottom:140px; /* keep progress bar visible */
  min-height:100vh;
}

.cardWrapper{
  position:static !important;  /* participate in flex flow */
  transform:none !important;
  margin-top:24px;              /* slight gap below dot visual */
  pointer-events:auto !important;
}


/* === Patch v31b: flex centering only when gameScreen visible === */
#gameScreen:not(.hidden){
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding-bottom:140px;
}


/* === Patch: remove native button background for neutral/on/off === */
.check-btn{
  background-color: transparent !important;
  appearance: none;
}

/* Slider */
#questionSlider {
  width: 100%;
  margin: 8px 0 16px;
}
#sliderLabel {
  display: block;
  font-weight: 600;
  margin-top: 12px;
}


/* Extra spacing between checkbox grid and question slider */
#checkboxContainer{
  margin-bottom: 40px;
}

/*
 * Logo styling
 *
 * The start screen now displays the game logo in place of the text heading.
 * Scale the logo responsively so it fits within the card width and retains
 * its aspect ratio. The container has a max‑width of 640px, so a 80% max
 * width keeps the logo from overwhelming the layout on small screens.
 */
#startScreen .logo {
  display: block;
  margin: 0 auto 16px;
  width: 80%;
  max-width: 400px;
  height: auto;
}


/* Include zero checkbox */
.include-zero{
  display:block;
  margin: 12px 0 24px;
  font-weight:600;
}

/*
 * Layout for optional factor checkboxes
 *
 * Group the four include options into a grid with two columns. Each label uses
 * flexbox to align the checkbox and its text horizontally. The surrounding
 * container replicates the original top and bottom margin for visual balance.
 */
/*
 * Arrange the four include options in two columns and center them beneath
 * the base table selection. The grid uses auto‑sized columns so that each
 * label only consumes the space it needs, and the container itself is
 * centered using auto margins. A small gap keeps the rows and columns
 * tight and balanced.
 */
.include-options{
  display: inline-grid;
  grid-template-columns: auto auto;
  /* Increase spacing slightly between the options */
  /* provide additional horizontal space between include options */
  gap: 8px 32px;        /* row gap 8px, column gap 32px */
  /* reduce the space above the include options so they sit closer to the table checkboxes */
  /* remove almost all space above the include options so they sit very close to the table checkboxes */
  margin: 0 auto 24px;
}
.include-options .include-option{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 600;
}


/* Arrange multiplication table checkboxes into rows. For the proof‑of‑concept we show
   the 2–6 tables on the first line and 7–10 on the second. We accomplish this
   by defining 5 equal‑width columns; the first five numbers (2–6) fill the first
   row and the remaining four numbers (7–10) begin the second row. */
#checkboxContainer{
  display:grid;
  grid-template-columns: repeat(5, minmax(32px, auto));
  gap: 8px 12px;
  justify-content:center;
}
#checkboxContainer label{
  display:flex;
  align-items:center;
  gap:4px;
}

/* Clear answer button styling */
.icon-btn.clear {
  margin-top: 8px;
  font-size: 1.5rem;
}

/* Clear button styling */

/* Make clear (↺) button same size as check button */
#clearBtn {
  width: 64px !important;
  height: 64px !important;
  font-size: 2rem !important;
  display: block;
  margin: 8px auto 0;
}

#clearBtn:focus {
  outline: 2px solid var(--accent);
}


/* Position clear button below check button */
#checkBtn, 
/* Make clear (↺) button same size as check button */
#clearBtn {
  width: 64px !important;
  height: 64px !important;
  font-size: 2rem !important;
  display: block;
  margin: 8px auto 0;
}


/* Make clear (↺) button same size as check button */
#clearBtn {
  width: 64px !important;
  height: 64px !important;
  font-size: 2rem !important;
  display: block;
  margin: 8px auto 0;
}



/* Button group: stack check and clear vertically */
.button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}


/* Shake feedback for Clear button */
#clearBtn.shake {
  animation: shakeRow .4s ease-out;
  will-change: transform;
}

/* Force clear (↺) button to match check button size */
.button-group #clearBtn {
  width: 64px !important;
  height: 64px !important;
  font-size: 1.8rem !important;
  line-height: 64px !important;
}


/* Enlarge only the clear button icon, keep its container size unchanged */
#clearBtn {
  font-size: 2.5rem !important;
  line-height: 1 !important;
}

/* Make clear button icon color orange */
#clearBtn {
  color: var(--accent) !important;
}

/* Boost clear button icon to a more vivid orange */
#clearBtn {
  color: #ff8c00 !important;
}

/* --- Creature positioning fix --- */
.cardRow { position: relative; }


/* === Evo badge flow style === */
#evoImg{
  position: static !important;      /* participate in flex flow */
  object-fit: contain;
  margin-right: 24px;               /* gap before card */
  flex-shrink: 0;
}