:root {
  color-scheme: light;
  font-family: Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --ink: #171713;
  --paper: #f1eadc;
  --green: #4f8f55;
  --lime: #a7cf5b;
  --red: #e45745;
  --yellow: #f1c84b;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; background: #d7cfbf; }
body { color: var(--ink); touch-action: none; user-select: none; }
main { width: min(100%, 720px); height: 100dvh; margin: auto; display: grid; grid-template-rows: 54px auto 1fr; background: var(--paper); box-shadow: 0 0 60px #6b635755; }

header { z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 2px solid var(--ink); }
header a { color: #5f5b52; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.title { font-size: 18px; font-weight: 1000; letter-spacing: -.055em; white-space: nowrap; transform: rotate(-1deg); }
.title span { color: var(--green); }
.round { justify-self: end; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.round strong { display: inline-block; min-width: 20px; font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }

.word-panel { z-index: 2; min-height: 128px; display: grid; place-content: center; padding: 10px 16px 15px; border-bottom: 2px solid var(--ink); background: #fffaf0; text-align: center; }
.word-panel p { margin: 0 0 3px; color: #787267; font-size: 8px; font-weight: 1000; letter-spacing: .16em; }
.clue { display: block; margin: 0 0 9px; font-size: clamp(13px, 3.8vw, 17px); line-height: 1.15; letter-spacing: -.02em; }
.word-slots { display: flex; justify-content: center; gap: clamp(6px, 2.2vw, 12px); }
.slot { width: clamp(40px, 11vw, 56px); height: clamp(48px, 12vw, 62px); display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 6px 6px 2px 2px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); font-size: clamp(25px, 7vw, 34px); font-weight: 1000; line-height: 1; }
.slot.filled { animation: letter-pop .32s cubic-bezier(.18, .9, .35, 1.35); background: var(--yellow); }
.slot.wrong { background: var(--red); color: white; animation: wobble .38s ease; }
.slot.correct { background: var(--lime); animation: letter-pop .4s cubic-bezier(.18, .9, .35, 1.35); }

.game-shell { position: relative; min-height: 0; overflow: hidden; background: #dfe7c8; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.toast { position: absolute; z-index: 2; top: 16px; left: 50%; padding: 8px 14px; opacity: 0; border: 2px solid var(--ink); border-radius: 99px; color: white; background: var(--green); box-shadow: 0 4px 0 var(--ink); font-size: 11px; font-weight: 1000; letter-spacing: .08em; pointer-events: none; transform: translate(-50%, -12px) rotate(-2deg); transition: opacity .18s, transform .18s; }
.toast.show { opacity: 1; transform: translate(-50%, 0) rotate(-2deg); }
.toast.bad { background: var(--red); }

.overlay { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 22px; background: #24302073; backdrop-filter: blur(3px); transition: opacity .22s; }
.overlay.hidden { opacity: 0; pointer-events: none; }
.card { width: 410px; max-width: 100%; min-width: 0; padding: clamp(24px, 7vw, 38px); overflow: hidden; border: 3px solid var(--ink); border-radius: 13px; text-align: center; background: #fffaf0; box-shadow: 9px 9px 0 var(--green); transform: rotate(-.7deg); }
.snake-mark { height: 28px; display: flex; justify-content: center; align-items: center; margin: 0 auto 15px; }
.snake-mark span { width: 25px; height: 25px; margin-left: -4px; border: 2px solid var(--ink); border-radius: 50%; background: var(--lime); }
.snake-mark .head { position: relative; width: 32px; height: 29px; border-radius: 45% 55% 55% 45%; background: var(--green); }
.snake-mark .head i { position: absolute; top: 5px; right: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
.snake-mark .head i:last-child { top: auto; bottom: 5px; }
.eyebrow { margin: 0 0 8px; color: var(--green); font-size: 10px; font-weight: 1000; letter-spacing: .17em; }
h1 { margin: 0; font-size: clamp(36px, 10vw, 56px); line-height: .88; letter-spacing: -.075em; text-transform: uppercase; }
#detail { max-width: 330px; margin: 17px auto 21px; color: #676259; font-size: 14px; line-height: 1.45; }
button { border: 2px solid var(--ink); border-radius: 999px; padding: 12px 24px; color: white; background: var(--ink); box-shadow: 0 5px 0 #777064; font: inherit; font-weight: 1000; cursor: pointer; }
button:active { transform: translateY(4px); box-shadow: 0 1px 0 #777064; }
.controls { margin: 16px 0 0; color: #8a8478; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.mobile { display: none; }

@keyframes letter-pop { 50% { transform: translateY(-7px) rotate(4deg) scale(1.12); } }
@keyframes wobble { 25% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }

@media (pointer: coarse), (max-width: 650px) {
  main { width: 100%; grid-template-rows: 50px auto 1fr; }
  header { padding: 0 10px; }
  header a { font-size: 8px; }
  .title { font-size: 16px; }
  .word-panel { min-height: 118px; }
  .desktop { display: none; }
  .mobile { display: inline; }
}

@media (max-height: 590px) {
  main { grid-template-rows: 46px auto 1fr; }
  .word-panel { min-height: 96px; padding: 6px 12px 9px; }
  .slot { width: 34px; height: 40px; font-size: 22px; box-shadow: 0 3px 0 var(--ink); }
  .word-panel p { margin-bottom: 2px; }
  .clue { margin-bottom: 5px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .slot, .toast { animation: none !important; transition: none; }
}