:root {
  --paper: #f4efe5;
  --paper-deep: #e8deca;
  --ink: #20232c;
  --muted: #6e6b67;
  --river: #b9ddeb;
  --river-deep: #7ebbd2;
  --bank: #65885a;
  --bank-deep: #3f623d;
  --wood: #cc8a4b;
  --wood-dark: #75452b;
  --sun: #f4b942;
  --correct: #277455;
  --wrong: #b85346;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--paper); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 3%, rgba(244, 185, 66, .16), transparent 26rem),
    linear-gradient(180deg, #f9f6ef 0, var(--paper) 52%, #eee6d8 100%);
}

button, input { font: inherit; }

.page-shell {
  width: min(100% - 32px, 980px);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 62px) 0 72px;
}

.game-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.game-header h1 {
  margin: 3px 0 2px;
  font-size: clamp(2.65rem, 8vw, 5.5rem) !important;
  line-height: .94 !important;
  letter-spacing: -.065em !important;
}

.dek { max-width: 520px; margin: 13px 0 0; font-size: 1.05rem; }

.eyebrow { margin: 0; letter-spacing: .12em !important; }

.day-chip {
  flex: 0 0 auto;
  min-width: 104px;
  padding: 12px 15px 10px;
  border: 1px solid rgba(32, 35, 44, .18);
  border-radius: 4px;
  background: rgba(255, 255, 255, .48);
  box-shadow: 5px 5px 0 rgba(32, 35, 44, .08);
  text-align: right;
}

.day-chip span { display: block; color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.day-chip strong { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 1.45rem; }

.game-card {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 4vw, 38px) !important;
  border: 1px solid rgba(32, 35, 44, .16) !important;
  border-radius: 6px !important;
  background: rgba(255, 253, 248, .9) !important;
  box-shadow: 10px 12px 0 rgba(77, 68, 55, .09) !important;
}

.status-row { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.status-row h2 { margin: 3px 0 0; font-size: clamp(1.35rem, 4vw, 1.9rem) !important; line-height: 1.1 !important; }
.status-label, .attempts > span { color: var(--muted); font-size: .69rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.attempts { text-align: right; }
.attempt-pips { display: flex; gap: 5px; margin-top: 8px; }
.attempt-pips i { width: 25px; height: 5px; border-radius: 9px; background: var(--ink); transition: opacity .2s, transform .2s; }
.attempt-pips i.used { opacity: .16; transform: scaleX(.74); }

.bridge-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(105px, 1fr) minmax(210px, 2.1fr) minmax(105px, 1fr);
  align-items: center;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid rgba(32, 35, 44, .16);
  border-radius: 5px;
  isolation: isolate;
  background: linear-gradient(#dfeff2 0 57%, var(--river) 57% 100%);
}

.sky { position: absolute; inset: 0 0 43%; overflow: hidden; z-index: -3; }
.sky::before { content: ""; position: absolute; width: 54px; height: 54px; right: 8%; top: 14%; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 9px rgba(244, 185, 66, .17); }
.sky i { position: absolute; width: 76px; height: 17px; border-radius: 50%; background: rgba(255, 255, 255, .72); }
.sky i:nth-child(1) { left: 8%; top: 19%; }
.sky i:nth-child(2) { left: 43%; top: 10%; transform: scale(.7); }
.sky i:nth-child(3) { right: 17%; top: 54%; transform: scale(.55); }

.river { position: absolute; inset: 57% 0 0; z-index: -2; overflow: hidden; }
.river i { position: absolute; left: -8%; width: 115%; height: 2px; background: rgba(255,255,255,.68); transform: rotate(-2deg); animation: drift 4.6s linear infinite; }
.river i:nth-child(1) { top: 18%; }
.river i:nth-child(2) { top: 42%; animation-delay: -1.4s; }
.river i:nth-child(3) { top: 67%; animation-delay: -2.7s; }
.river i:nth-child(4) { top: 84%; animation-delay: -3.5s; }

.bank { position: absolute; bottom: -30px; z-index: -1; width: 28%; height: 126px; border-top: 9px solid var(--bank); background: var(--bank-deep); }
.bank-left { left: -4%; border-radius: 0 65% 0 0; transform: rotate(2deg); }
.bank-right { right: -4%; border-radius: 65% 0 0; transform: rotate(-2deg); }

.word-bank {
  position: relative;
  z-index: 3;
  justify-self: center;
  min-width: 112px;
  padding: 15px 13px 13px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #fffdf8;
  box-shadow: 5px 6px 0 rgba(32, 35, 44, .18);
  text-align: center;
  transform: rotate(-1.5deg);
}
.word-bank-right { transform: rotate(1.5deg); }
.word-bank span { display: block; margin-bottom: 3px; color: var(--muted); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.word-bank strong { font-family: var(--font-heading); font-size: clamp(1.2rem, 3.3vw, 1.75rem); letter-spacing: .04em; }

.bridge-wrap { position: relative; z-index: 2; align-self: center; height: 92px; margin-inline: -6px; }
.bridge-rail { position: absolute; left: 0; right: 0; height: 4px; border-radius: 4px; background: var(--wood-dark); transform-origin: center; }
.bridge-rail-top { top: 19px; transform: rotate(-1deg); }
.bridge-rail-bottom { bottom: 13px; transform: rotate(1deg); }
.bridge-planks { position: absolute; inset: 25px 3px 19px; display: flex; align-items: stretch; justify-content: center; gap: clamp(3px, .8vw, 7px); }
.bridge-planks span {
  display: grid;
  flex: 1 1 0;
  max-width: 45px;
  place-items: center;
  border: 1px solid var(--wood-dark);
  border-radius: 2px;
  background: var(--wood);
  color: rgba(255,255,255,.48);
  font-family: var(--font-mono);
  font-size: clamp(.9rem, 2.6vw, 1.25rem);
  font-weight: 700;
  box-shadow: inset 0 -4px rgba(91, 53, 31, .14);
  transform: translateY(var(--stagger));
  transition: color .16s, background .2s, transform .24s;
}
.bridge-planks span.filled { color: #fff; background: #a96538; transform: translateY(var(--stagger)) scale(1.04); }

.bridge-scene.is-wrong .bridge-wrap { animation: shake .38s ease; }
.bridge-scene.is-complete .bridge-planks span { color: #fff; background: var(--correct); border-color: #17533c; }
.bridge-scene.is-complete .bridge-rail { background: #17533c; }

.phrase-preview { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 21px 0 18px; }
.phrase-preview > div:not(.bridge-mark) { min-width: 0; }
.phrase-preview > div:last-child { text-align: right; }
.phrase-preview span { display: block; margin-bottom: 4px; color: var(--muted); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.phrase-preview strong { display: block; overflow: hidden; color: var(--ink); font-family: var(--font-mono); font-size: clamp(.92rem, 3vw, 1.2rem); text-overflow: ellipsis; white-space: nowrap; }
.phrase-preview b, .phrase-preview em { font: inherit; font-style: normal; }
.phrase-preview em { color: var(--cobalt-500); }
.bridge-mark { color: var(--wood-dark); font-size: 1.45rem; }

.answer-form { padding-top: 18px; border-top: 1px solid rgba(32, 35, 44, .14); }
.answer-form label { display: block; margin-bottom: 8px; color: var(--ink); font-size: .78rem; font-weight: 700; }
.answer-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.answer-row input {
  height: 48px;
  border: 1px solid rgba(32, 35, 44, .34) !important;
  border-radius: 3px !important;
  background: #fff !important;
  font-family: var(--font-mono) !important;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.primary-button, .secondary-button { min-height: 48px; padding: 0 20px; border-radius: 3px !important; font-weight: 700; cursor: pointer; }
.secondary-button { border: 1px solid rgba(32,35,44,.26); background: #fff; color: var(--ink); }

.feedback-panel { display: grid; grid-template-columns: 36px 1fr; gap: 11px; align-items: start; margin-top: 14px; padding: 13px; border-radius: 3px; background: #f3f0e9; }
.feedback-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #fff; color: var(--cobalt-600); font-weight: 800; }
.feedback-panel strong { display: block; color: var(--ink); }
.feedback-panel p { margin: 2px 0 0; font-size: .85rem; line-height: 1.45; }
.feedback-panel[data-tone="wrong"] { background: #f8e9e5; }
.feedback-panel[data-tone="wrong"] .feedback-icon { color: var(--wrong); }
.feedback-panel[data-tone="hint"] { background: #fff3d9; }
.feedback-panel[data-tone="hint"] .feedback-icon { color: #9b6813; }
.feedback-panel[data-tone="correct"] { background: #e4f2ea; }
.feedback-panel[data-tone="correct"] .feedback-icon { color: var(--correct); }

.solution { margin-top: 18px; padding: 22px; border: 1px solid rgba(39, 116, 85, .24); border-radius: 4px; background: #f2faf5; text-align: center; }
.solution-kicker { margin: 0 0 8px; color: var(--correct) !important; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.solution-phrases { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; align-items: baseline; }
.solution-phrases strong { color: var(--ink); font-family: var(--font-heading); font-size: clamp(1.25rem, 4vw, 1.75rem); }
.solution-phrases span { color: var(--muted); font-style: italic; }
.solution > p:not(.solution-kicker) { margin: 7px 0 16px; }

.confetti { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.confetti i { position: absolute; left: 50%; top: 42%; width: 8px; height: 14px; background: var(--piece); opacity: 0; transform: translate(-50%, -50%); }
.bridge-scene.is-complete .confetti i { animation: confetti .9s cubic-bezier(.2,.7,.25,1) forwards; animation-delay: var(--delay); }

.how-card { max-width: 720px; margin: 28px auto 0; padding: 26px; border-top: 1px solid rgba(32,35,44,.2); text-align: center; }
.how-card h2 { margin: 5px 0 15px; font-size: clamp(1.35rem, 4vw, 1.8rem) !important; line-height: 1.2 !important; }
.how-card > p:last-child { max-width: 620px; margin: 14px auto 0; }
.example-line { display: flex; justify-content: center; gap: 5px; }
.example-line span, .example-line strong { padding: 7px 11px; border: 1px solid rgba(32,35,44,.16); border-radius: 3px; background: #fff; font-family: var(--font-mono); }
.example-line strong { border-color: var(--wood-dark); background: var(--wood); color: #fff; }

@keyframes drift { to { transform: translateX(9%) rotate(-2deg); } }
@keyframes shake { 25% { transform: translateX(-7px); } 55% { transform: translateX(6px); } 80% { transform: translateX(-3px); } }
@keyframes confetti {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)); }
}

@media (max-width: 650px) {
  .page-shell { width: min(100% - 20px, 980px); padding-top: 22px; }
  .game-header { align-items: start; }
  .game-header h1 { font-size: clamp(2.55rem, 14vw, 4rem) !important; }
  .day-chip { min-width: 88px; padding-inline: 11px; }
  .bridge-scene { grid-template-columns: minmax(76px, 1fr) minmax(120px, 1.7fr) minmax(76px, 1fr); min-height: 225px; }
  .word-bank { min-width: 78px; padding: 12px 7px 10px; }
  .word-bank span { font-size: .54rem; }
  .bridge-wrap { margin-inline: -9px; }
  .bridge-planks { gap: 2px; }
  .phrase-preview { gap: 7px; }
  .phrase-preview strong { font-size: .78rem; }
  .answer-row { grid-template-columns: 1fr; }
  .primary-button { width: 100%; }
}

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