:root {
  /* Fun light palette */
  --bg:            #ffffff;
  --text:          #24324a;   /* deep blue-gray */
  --muted:         #6c7a91;   /* soft slate */
  --card:          #f8fafc;   /* very light slate */
  --card-border:   #e6eaf0;
  --chip:          #ffffff;

  /* Action / accents */
  --accent:        #3b82f6;   /* playful blue */
  --accent-hover:  #2563eb;   /* deeper blue */
  --accent-2:      #f97316;   /* carrot orange */
  --good:          #10b981;   /* green */
  --warn:          #f59e0b;   /* amber */

  /* Code / pre backgrounds */
  --pre-bg:        #ffffff;
  --pre-border:    #e5e7eb;

  /* Range sliders */
  --track:         #e5e7eb;
  --thumb:         var(--accent);

  /* Config row background */
  --row-bg:        #ffffff;

  /* Button text color (uses currentColor for spinner) */
  --btn-text:      #ffffff;

  /* Tiles */
  --light-blue:    #dbeafe;

  --solved-bg:       #dcfce7;   /* green-100 */
  --solved-border:   #86efac;   /* green-300 */
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  text-align: center;
  padding: 1rem;
  margin: 0;
}

h1 {
  font-size: 2rem;
  margin: 0 0 0.75rem;
  color: var(--text);
}

h2, h3 {
  color: var(--text);
  margin: 0.5rem 0;
}

h1, h2, h3, summary, .config-label, label, button {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body, button, label, summary {
  font-size: inherit;
  font-size-adjust: none;
  font-weight: 400;
}

.page-loader {
    width: 48px;
    height: 48px;
    border: 5px solid #24324a;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

.inputs { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 10px; 
  margin-top: 1rem; 
}
.inputs label {
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  font-weight: 600;
}
.inputs input {
  width: 3.6rem;
  height: 3.6rem;
  text-align: center;
  font-size: 2.2rem;      /* larger digit */
  line-height: 1;
  padding: 0;
  background-color: #e5e7eb;
  color: var(--text);
}

/* ---- Cards / Panels ---- */
.output {
  margin: 1.25rem auto 0;
  text-align: center;
  max-width: 760px;
  background: var(--card);
  padding: 1.2rem;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.02),
    0 6px 10px rgba(0,0,0,0.04);
}

/* puzzle section goes green when solved */
.output.solved {
  background: var(--solved-bg);
  border-color: var(--solved-border);
  transition: background-color 180ms ease, border-color 180ms ease;
}

.hidden { display: none; }

/* ---- Collapsible Configuration Panel ---- */
#configPanel { text-align: left; }

#configPanel summary {
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-left: 1.2rem;
  color: var(--text);
  margin-bottom: 0.35rem;
}

#configPanel summary::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(2px);
  color: var(--muted);
  transition: transform 0.15s ease, color 0.15s ease;
}

#configPanel details[open] summary::before {
  transform: translateY(2px) rotate(90deg);
  color: var(--accent-2);
}

/* ---- Config List Rows ---- */
.config-list {
  display: grid;
  grid-template-columns: 1fr;  /* neat single column */
  gap: 10px;
  margin-top: 8px;
}

.config-item {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* label left, control right */
  gap: 12px;
  width: 95%;
  padding: 10px 12px;
  background: var(--row-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}

.config-label { font-weight: 600; color: var(--text); }

/* ---- Numeric Inputs ---- */
.config-number {
  width: 5rem;
  appearance: textfield;
  padding: 6px 8px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--chip);
  color: var(--text);
}
.config-number:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---- Text Inputs ---- */
.config-text {
  width: 50rem;
  appearance: textfield;
  padding: 6px 8px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--chip);
  color: var(--text);
}
.config-text:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Remove spinners in some browsers */
.config-number::-webkit-outer-spin-button,
.config-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- Range (Operator Weights) ---- */
.config-item input[type="range"] {
  width: clamp(140px, 50%, 260px);
  max-width: 60%;
  height: 8px;
  appearance: none;
  background: var(--track);
  border-radius: 999px;
  outline: none;
}
.config-item input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--thumb);
  border: 2px solid #ffffff20;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
}
.config-item input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--thumb);
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
}

/* ---- Button + Centered Spinner ---- */
button {
  appearance: none;
  border: none;
  border-radius: 12px;
  padding: 0.7rem 1.2rem;
  font-weight: 800;
  font-size: 1.05rem;
  background: var(--accent);
  color: var(--btn-text);
  cursor: pointer;
  margin-top: 12px;
  position: relative;           /* anchor spinner */
  min-width: 240px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.08), 0 8px 18px rgba(59,130,246,0.25);
  transition: transform 0.04s ease, background 0.2s ease, box-shadow 0.2s ease;
}
button:hover { background: var(--accent-hover); }
button:active { transform: translateY(1px); }
button[disabled] { opacity: 0.8; cursor: progress; }

.spinner {
  display: none;
  position: absolute;
  top: 50%; left: 50%;
  width: 22px; height: 22px;
  border: 3px solid currentColor;  /* inherits button text color */
  border-right-color: transparent;  /* gap for spin illusion */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.loading .spinner { display: block; }
.loading .btn-label { opacity: 0; }

.config-item { min-width: 0; }
.config-label { flex: 1 1 auto; min-width: 0; }
.config-item > input[type="range"],
.config-item > input[type="number"],
.config-item > input[type="checkbox"] { flex: 0 0 auto; }

/* ---- Code / Output Blocks ---- */
pre {
  background: var(--pre-bg);
  color: var(--text);
  border: 1px solid var(--pre-border);
  border-radius: 10px;
  padding: 0.75rem;
  white-space: pre-wrap;
  overflow-x: auto;
  line-height: 1.35;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Links (if used) ---- */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* ---- Optional: subtle dividers inside cards ---- */
details {
  border-top: 1px solid var(--card-border);
  padding-top: 6px;
}

/* Remove the line above Configuration */
#configPanel details {
  border-top: none;
  padding-top: 0;
}

.inputs { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 10px; 
  margin-top: 1rem; 
  justify-content: center;
}

.puzzle-grid {
  display: grid;
  grid-auto-rows: 40px;
  row-gap: 25px;
  justify-content: center;
  margin: 1rem auto;
}

.puzzle-row {
  display: grid;
  column-gap: 8px;
  justify-content: center;
}

table.puzzle-5x5 {
  border-collapse: separate;
  border-spacing: 14px;
  margin: 0;
  width: auto;
}

/* Scaling wrapper: centers table and we’ll set its height via JS */
#puzzleScale {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;  /* keep table centered as it scales */
  height: auto;             /* JS will set an explicit px height */
}

/* Ensure stable scaling */
.puzzle-5x5 {
  transform-origin: top center;  /* ensure clean scale */
  will-change: transform;
}

.puzzle-5x5 td {
  text-align: center;
  vertical-align: middle;
  padding: 20px;
}

/* Center operator tiles inside their <td> cells (rows 2 and 4) */
.puzzle-5x5 td.opcell {
  display: flex;
  justify-content: center;
  align-items: center;
}

.term {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px; /* gap between digits in number */
}

.tile {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: bold;
  border-radius: 6px;
  perspective: 1000px;
  background: #e5e7eb;        /* light grey */
  color: #111;                /* dark text */
  border: 2px solid #d1d5db;  /* subtle border */
}

.tile.empty {
  background: transparent;
  border: none;
}

.tile-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.tile.flip .tile-inner {
  transform: rotateY(180deg);
}

.tile-front, .tile-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-front {
  background: var(--card);
  color: var(--text);
}

.tile-back {
  background: #e5e7eb;       /* very light blue tint */
  color: #111;
  transform: rotateY(180deg);
}

.tile.operator {
  background: #e5e7eb;        /* same as default tiles */
  color: #111;
  border: 2px solid #d1d5db;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.operator {
  color: #111;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.tile,
.tile .tile-front,
.tile .tile-back,
.tile.operator {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.letter-label {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: inline-block;
  text-align: center;
}