:root {
  --page-bg: #f4f7fb;
  --card-radius: 1.25rem;
  --peg-size: 3.35rem;
  --peg-small: 2.5rem;
  --focus-ring: 0 0 0 .25rem rgba(13, 110, 253, .35);
}

body {
  min-height: 100vh;
  background: linear-gradient(180deg, #eef5ff 0%, var(--page-bg) 45%, #fff8ee 100%);
  color: #182335;
}

.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  transform: translateY(-150%);
  z-index: 2000;
  background: #fff;
  color: #000;
  padding: .75rem 1rem;
  border-radius: .5rem;
}
.skip-link:focus { transform: translateY(0); }

.app-header,
.game-card,
.modal-content { border-radius: var(--card-radius); }
.game-shell { max-width: 920px; margin-inline: auto; }
.game-card { overflow: hidden; }

.peg-row {
  display: flex;
  flex-wrap: nowrap;
  gap: .55rem;
  align-items: center;
  min-width: 0;
}

.peg,
.color-button {
  width: var(--peg-size);
  height: var(--peg-size);
  min-width: var(--peg-size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 900;
  border: 3px solid rgba(20, 30, 45, .28);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.12), 0 4px 10px rgba(25,45,80,.12);
  user-select: none;
}

button.peg { cursor: pointer; }
.color-button {
  transition: transform .14s ease, box-shadow .14s ease;
}
.color-button:hover:not(:disabled),
.color-button:focus-visible:not(:disabled) { transform: translateY(-2px) scale(1.05); }

.peg-empty {
  background: #f8fafc;
  border: 3px dashed #93a1b2;
  box-shadow: none;
  color: #64748b;
}
.peg-hidden {
  background: #34495e;
  color: #fff;
  border-color: #1f2f3d;
}

.color-palette {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

.color-red { background: #d62828; color: #fff; }
.color-blue { background: #1769c2; color: #fff; }
.color-green { background: #218739; color: #fff; }
.color-yellow { background: #ffd43b; color: #111; }
.color-purple { background: #7446a8; color: #fff; }
.color-orange { background: #e66a00; color: #fff; }
.color-turquoise { background: #0a8f8a; color: #fff; }
.color-pink { background: #db4f84; color: #fff; }

button:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus { outline: none; box-shadow: var(--focus-ring); }

.guess-history { display: grid; gap: .8rem; }
.guess-entry {
  border: 1px solid #dbe4ef;
  border-radius: 1rem;
  padding: .9rem;
  background: #fff;
}
.guess-entry.latest {
  border-color: #0d6efd;
  background: #f3f8ff;
  animation: entry-in .25s ease-out;
}
.guess-entry-layout {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) auto minmax(13rem, 1.4fr);
  gap: 1rem;
  align-items: center;
}
.history-pegs .peg { width: var(--peg-small); height: var(--peg-small); min-width: var(--peg-small); font-size: 1rem; }

.feedback-dots { display: flex; flex-wrap: wrap; gap: .35rem; max-width: 5rem; }
.feedback-dot {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  display: inline-block;
}
.feedback-dot.exact { background: #17202a; border: 2px solid #17202a; }
.feedback-dot.misplaced { background: #fff; border: 2px solid #4f5d6b; }
.feedback-dot.none { background: transparent; border: 2px dashed #c4ced8; }

.rules-example { background: #f3f7ff; border: 1px solid #d6e4ff; }
#thinkingCard { background: #fffdf3; }

.incomplete-shake { animation: shake .3s linear; }
.win-celebration { animation: celebrate .55s ease; }

@keyframes entry-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shake {
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-4px); }
}
@keyframes celebrate {
  50% { transform: scale(1.03); }
}

@media (max-width: 767.98px) {
  :root { --peg-size: 2.85rem; --peg-small: 2.15rem; }
  .peg-row { gap: .35rem; }
  .color-palette { gap: .5rem; }
  .guess-entry-layout { grid-template-columns: 1fr; gap: .55rem; }
  .feedback-dots { max-width: none; }
}

@media (max-width: 390px) {
  :root { --peg-size: 2.45rem; --peg-small: 1.95rem; }
  .peg, .color-button { font-size: 1rem; border-width: 2px; }
  .card-body { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}