body { background:#0d1117; color:#c9d1d9; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
#homeScreen,#gameContainer { background:#161b22cc; box-shadow:0 8px 24px rgba(12,17,23,0.6); }
#toggleSlider { background:#238636; }
.tile {
  position:absolute;
  width: calc(100% / var(--grid-size) - 0.75rem);
  height: calc(100% / var(--grid-size) - 0.75rem);
  display:flex; align-items:center; justify-content:center;
  border-radius:0.5rem; cursor:pointer; user-select:none;
  font-size:2.5rem; font-weight:800; color:#e1e4e8;
  background:linear-gradient(145deg,#3a3f4b,#2c303a);
  box-shadow:0 6px 12px rgba(0,0,0,0.8), inset 0 3px 6px rgba(255,255,255,0.05);
  transition: transform 0.3s ease;
  text-shadow:0 0 4px #0008; backface-visibility:hidden;
}
.tile.hard { font-size:1.5rem; }
.tile:hover { background:linear-gradient(145deg,#2c5f37,#1f3f22); color:#7fffd4; box-shadow:0 10px 20px rgba(35,134,54,0.7), inset 0 3px 7px rgba(255,255,255,0.15); transform:scale(1.1) var(--translate); z-index:10; text-shadow:0 0 8px #7fffd4cc; }
.tile.empty { background:transparent; box-shadow:none; cursor:default; pointer-events:none; }
#grid { position:relative; width:100%; height:100%; --grid-size:3; }
#modalOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); align-items:center; justify-content:center; z-index:100; }
#modal { background:#21262d; padding:2rem; border-radius:1rem; text-align:center; box-shadow:0 4px 20px rgba(0,0,0,0.7); }
#modal h2 { font-size:2rem; margin-bottom:1rem; color:#58a6ff; }
#modal button { margin-top:1rem; padding:0.75rem 1.5rem; background:#238636; color:white; border:none; border-radius:0.5rem; font-size:1rem; cursor:pointer; transition:background 0.2s; }
#modal button:hover { background:#2ea043; }
#controls { width:100%; max-width:40rem; margin-top:36px; display:none; justify-content:center; gap:12px; align-items:center; }
#solveBtn {
  padding:0.72rem 1.2rem; border-radius:0.75rem; font-size:1.05rem; font-weight:700;
  cursor:pointer; background:#16a34a; color:white; border:none; box-shadow:0 8px 20px rgba(0,0,0,0.6);
  transition: background .15s, transform .08s;
}
#solveBtn:hover{ background:#169e43; transform:translateY(-2px); }
#solveBtn:disabled{ background:#285c38; cursor:not-allowed; opacity:.85; transform:translateY(0); }
@media (max-width:640px){ #controls{ padding:0 12px; margin-top:26px; } #solveBtn{ width:90%; } }
#thinkingSmall { display:block; margin-top:6px; font-size:0.85em; color:#ddd; }
#thinking-container {
  max-width: 250px;
  margin: 20px auto 40px auto;
  padding: 18px 22px;
  background-color: #202124;
  border-radius: 14px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.1), 0 1px 3px rgba(0,0,0,0.4);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #e8eaed;
  user-select: none;
}
#thinking-text {
  font-size: 1.3rem;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  background: linear-gradient(90deg,#e8eaed 20%,#121212 40%,#e8eaed 60%);
  background-repeat: repeat;
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine-slide 1.5s linear infinite;
}
@keyframes shine-slide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
#thinking-subtext {
  margin-top: 12px;
  font-style: italic;
  font-weight: 400;
  color: #c7c7c7;
  min-height: 26px;
  font-size: 1rem;
  white-space: nowrap;
}
#progressBarWrap {
  width:100%; max-width:34rem; margin:20px auto 0 auto;
  background:#23272e; border-radius:0.7rem; height:1.2rem; box-shadow:0 2px 8px #0005;
  overflow:hidden; position:relative;
}
#progressBar {
  height:100%; background:linear-gradient(90deg,#238636,#58a6ff);
  width:0%; transition:width 0.5s;
}
#progressText {
  position:absolute; left:0; right:0; top:0; bottom:0; display:flex;
  align-items:center; justify-content:center; font-size:.98rem; color:#fff; font-weight:700;
  text-shadow:0 2px 8px #0009;
  pointer-events:none;
}
/* Custom Position Modal */
#custom-position-modal {
  display:none;
  position:fixed;
  left:0; right:0; top:0; bottom:0;
  background:rgba(0,0,0,0.78);
  z-index:101;
  align-items: center;
  justify-content: center;
}
#custom-position-content {
  background:#23272e;
  border-radius:18px;
  box-shadow:0 6px 24px #000c, 0 0 0 1px #3339;
  padding:2.2rem 1.4rem 1.7rem 1.4rem;
  max-width:340px;
  width:90vw;
  text-align:center;
  position:relative;
}
#custom-position-content label {
  font-size: 1.08rem;
  margin-bottom: 7px;
  display: block;
  color: #e8eaed;
  font-weight: 600;
  margin-top: 10px;
}
#custom-position-content select {
  width: 90%;
  padding: 8px 10px;
  border-radius: 8px;
  margin-top: 2px;
  font-size: 1.09rem;
  background: #181b20;
  color: #e8eaed;
  border: 1px solid #333;
  margin-bottom: 5px;
  outline:none;
}
#custom-position-content .note {
  color: #ff5555;
  font-size: 0.98rem;
  margin-top: 11px;
  margin-bottom: 13px;
}
#custom-position-content .btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 7px;
}
#custom-position-content button {
  padding: 0.59rem 1.1rem;
  border-radius: 8px;
  border: none;
  font-size: 1.07rem;
  font-weight: 600;
  background: #238636;
  color: #fff;
  cursor: pointer;
  transition: background 0.17s;
}
#custom-position-content button:hover {
  background: #169e43;
}
#custom-position-content .close {
  background: #444e;
  color: #fff;
  margin-left: 4px;
  font-weight: 400;
}
#custom-position-content .close:hover {
  background: #111b;
}
#customPositionBtn {
  margin-top:14px;
  margin-bottom:0.5rem;
  background:#2d67b7;
  color:#fff;
  padding:0.49rem 1.2rem;
  border:none;
  border-radius:8px;
  font-size:1.08rem;
  font-weight:600;
  cursor:pointer;
  transition: background 0.18s;
}
#customPositionBtn:hover { background:#134386; }
/* Custom footer note */
    #footer-note {
      margin-top: 6px;
      font-size: 0.9rem;
      color: #b5bcc6;
      text-align: center;
      opacity: 0.7;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      letter-spacing: 0.01em;
    }
    #footer-note span {
      font-size: 0.92em;
      font-weight: bold;
      color: #58a6ff;
      margin-top: 3px;
      display: block;
      opacity: 0.95;
    }