:root{font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;color:#24352e;background:#f5f6f2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1080px;margin:auto;padding:32px 36px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:46px}.brand{font-weight:750;font-size:20px;letter-spacing:-.7px;color:inherit;text-decoration:none}.brand span{font-weight:450;color:#6b776f;letter-spacing:-.4px}.badge,.eyebrow{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#6a776f}.badge{border:1px solid #dce2d9;border-radius:30px;padding:7px 11px}.toolbar,.stats,.actions{display:flex;align-items:center;justify-content:space-between}.toolbar{margin-bottom:27px}.modes{display:flex;background:#e8ece5;padding:4px;border-radius:9px;gap:4px}button{font:inherit;font-size:14px;cursor:pointer;border:0;border-radius:7px;padding:11px 16px;background:#275a43;color:white;font-weight:550}button:disabled{opacity:.45;cursor:default}.modes button{color:#627065;background:transparent;padding:9px 15px}.modes button[aria-pressed=true]{background:white;color:#284534;box-shadow:0 1px 4px #20302212}.quiet{background:transparent;color:#52675a;padding:10px 0}.stats{font-size:13px;color:#728073;margin-bottom:12px}.stats b{color:#284b37}.track{height:3px;background:#e0e6dc;margin-bottom:26px}#bar{height:100%;background:#588368;transition:width .3s}.card{display:grid;grid-template-columns:1.08fr 1fr;background:white;border:1px solid #e1e6dd;border-radius:18px;overflow:hidden;box-shadow:0 10px 35px #2e423008}.art{display:flex;align-items:center;justify-content:center;padding:22px;border-right:1px solid #eff1eb;min-height:390px}.art img{width:100%;max-height:390px;object-fit:contain}.clue{padding:43px 36px 30px;display:flex;flex-direction:column;justify-content:center}.eyebrow{font-weight:650}h1{font-size:clamp(23px,2.5vw,31px);font-weight:550;line-height:1.35;letter-spacing:-.7px;margin:15px 0 22px}#letters{font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:24px;letter-spacing:5px;color:#72947c;margin:0 0 24px;overflow-wrap:anywhere}label{display:block;font-size:12px;color:#738074;margin-bottom:8px}.input-wrap{display:flex;border:1.5px solid #c7d6c9;border-radius:9px;padding:4px;background:#fafcf9}.input-wrap:focus-within{border-color:#4b7f5e;box-shadow:0 0 0 3px #50846714}input{width:100%;min-width:0;border:0;background:transparent;outline:0;font:inherit;font-size:23px;color:#284b37;padding:10px 12px}.input-wrap button{font-size:20px;padding:7px 14px}#feedback{font-size:13px;min-height:36px;line-height:1.5;color:#708074;margin:13px 0 4px}#feedback.success{color:#217044}#feedback.retry{color:#996331}.actions{gap:16px}.footnote{text-align:center;font-size:12px;color:#8a958a;margin:22px 0}#results{max-width:640px;margin:60px auto}#results h1{font-size:42px}#result-detail{color:#738074}.review-row{padding:14px 0;border-bottom:1px solid #dfe5da;display:flex;gap:15px;align-items:baseline}.review-row b{min-width:110px}.review-row span{font-size:13px;color:#738074}#again{margin-top:26px}[hidden]{display:none!important}button:focus-visible,a:focus-visible{outline:3px solid #a5bd75;outline-offset:3px}@media(max-width:700px){main{padding:20px 18px}header{margin-bottom:26px}.brand{font-size:17px}.badge{font-size:9px}.toolbar{margin-bottom:20px}.modes button{padding:9px 10px;font-size:12px}.card{grid-template-columns:1fr}.art{min-height:0;padding:14px;border-right:0;border-bottom:1px solid #eff1eb}.art img{height:220px}.clue{padding:25px}h1{font-size:25px;margin:10px 0 17px}#letters{margin-bottom:17px}#feedback{min-height:20px}.footnote{line-height:1.6}.review-row{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Hint and typed suffix share one continuous answer line. */
.input-wrap{align-items:center;gap:0;padding-left:16px}#letters{flex:none;margin:0;font:23px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;letter-spacing:0;color:#72947c;overflow-wrap:normal}#guess{font:23px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;letter-spacing:0;padding:10px 0;flex:1}#guess::placeholder{color:#b7c5b9;opacity:1}#guess:disabled{opacity:1}.input-wrap button{margin-left:8px}

/* Keep unfilled letters visible while typing. */
.input-wrap{padding:10px 0;border:0;border-radius:0;background:transparent;box-shadow:none;min-height:54px}.input-wrap:focus-within{border:0;box-shadow:none}.answer-tail{position:relative;flex:1;min-width:0}#letters,#guess,#empty-letters{font:26px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;letter-spacing:5px;line-height:34px}#guess{position:relative;z-index:1;display:block;padding:0;width:100%;background:transparent}#empty-letters{position:absolute;inset:0;white-space:pre;pointer-events:none;color:#a0b2a4}#submit{display:none}

.credit-progress{font-size:11px;color:#809084;margin:8px 0 0}

.purchase{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.purchase kbd{font:11px inherit;color:#809084}.purchase button{padding-bottom:3px}

.toolbar{justify-content:flex-end}

#buy-letter{font-size:13px;padding:10px 0;text-align:left}

#feedback{font-size:24px;font-weight:600}#feedback.retry{color:#b44640}#guess-form[data-outcome="success"] #letters{color:#217044}#guess-form[data-outcome="retry"] #guess{color:#b44640}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.track{height:6px;border-radius:5px;overflow:hidden}#bar{width:100%;transform-origin:left;transition:transform .12s linear,background-color .2s}.track.low #bar{background:#b44640}.stats{justify-content:flex-end}

#letters,#guess,#empty-letters{font-size:var(--answer-size,26px);letter-spacing:var(--answer-spacing,5px)}

/* Render letters individually beneath the native text field, retaining its caret and editing. */
.answer-tail{overflow:hidden}
#guess,#guess-form[data-outcome="retry"] #guess{color:transparent;-webkit-text-fill-color:transparent;caret-color:#24352e}
#guess::selection{background:#93b4df55}
.letter-correct{color:#217044}
.letter-incorrect{color:#bc3936;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.letter-empty{color:#a0b2a4}

#missed-word{margin:28px 0;padding:22px 24px;background:white;border:1px solid #e1e6dd;border-radius:12px}#missed-answer{font-size:28px;font-weight:550;margin:10px 0 8px;letter-spacing:-.4px}#missed-definition{margin:0;line-height:1.5;color:#52675a}

/* Let the illustration and text sit directly on the page. */
:root{background:#fff}
.card{background:transparent;border:0;border-radius:0;box-shadow:none}
.art{border:0}
.track{background:#e5e5e5}
#missed-word{padding:22px 0;background:transparent;border:0;border-radius:0}

/* Compact chrome and a steady answer row, with room for longer clues above it. */
header{gap:24px;margin-bottom:18px}
.header-actions{display:flex;align-items:center;gap:24px;flex:none}
.header-actions .stats{margin:0;white-space:nowrap}
#restart{min-height:44px}
.track{margin-bottom:24px}
.card{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:start}
.art{height:414px;min-height:0}
.art img{height:100%;max-height:390px}
.clue{height:414px;min-width:0;padding:20px 24px 32px;display:grid;grid-template-rows:minmax(0,1fr) 62px 44px;align-content:stretch}
.clue-copy{align-self:end;padding-bottom:16px}
#definition{font-family:ui-serif,Georgia,serif;font-size:clamp(24px,2.3vw,28px);font-weight:450;line-height:1.4;letter-spacing:-.5px;margin:12px 0 0;overflow-wrap:break-word}
.answer-row{display:flex;align-items:center;gap:12px;min-width:0}
#guess-form{flex:1;min-width:0}
.input-wrap{min-height:62px;padding:10px 0}
#letters,#guess,#empty-letters{font-size:var(--answer-size,32px);line-height:42px}
#letters{color:#526058}
.letter-empty{color:#7b8580}
#feedback{flex:0 0 24px;min-height:0;margin:0;font-size:24px;line-height:1}
.actions{justify-content:flex-start;gap:0}
#buy-letter{min-height:44px;padding:10px 0;font-weight:450}
@media(max-width:700px){
 main{padding:18px}
 header{gap:6px 20px;flex-wrap:wrap;margin-bottom:12px}
 .header-actions{gap:20px;margin-left:auto}
 .track{margin-bottom:16px}
 .card{grid-template-columns:minmax(0,1fr)}
 .art{height:240px;padding:10px 14px}
 .art img{height:220px}
 .clue{height:310px;padding:0 6px 12px}
 #definition{font-size:24px;line-height:1.35}
}
@media(max-width:380px){
 .clue{padding-left:0;padding-right:0}
 #definition{font-size:22px}
}
@media(max-width:700px){
 #definition.long-clue{font-size:20px}
}

/* A steady mark replaces the native blinking caret. */
#guess{caret-color:transparent}
.letter-current.letter-empty{color:#37473c;font-weight:700}
.letter-current:not(.letter-empty){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.letter-given{color:#526058}
#guess::selection{background:transparent}
.letter-selected{background:#93b4df55}

.header-actions a { text-decoration:none; font-size:14px; }
#score-leaderboard { margin:32px 0; }
#score-leaderboard h2 { font-size:22px; }
.score-form { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.score-form input { font:inherit; padding:10px 12px; border:1px solid #b6bdb8; border-radius:5px; width:200px; }
.leaderboard-list { max-width:640px; margin:24px 0; }
.leaderboard-list table { width:100%; border-collapse:collapse; text-align:left; }
.leaderboard-list th,.leaderboard-list td { padding:12px 8px; border-bottom:1px solid #ddd; }
.leaderboard-list th:last-child,.leaderboard-list td:last-child { text-align:right; }
@media(max-width:600px){.header-actions { gap:12px; flex-wrap:wrap; }header { gap:16px; flex-wrap:wrap; }}

.all-games{display:inline-block;margin:0 0 18px;font-size:14px;color:#657069;text-decoration:none}
.all-games:hover,.result-actions a:hover{text-decoration:underline}
.result-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.result-actions a{text-decoration:none;font-size:14px}