:root{--ink:#1f2429;--muted:#747b83;--line:#d9d3c9;--paper:#fff;--soft:#f4efe7;--accent:#a63f30;--accent-soft:#f2ddd8;--good:#28734c;--good-soft:#e8f3ec;--bad:#a13b35}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:transparent;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}
.game{width:100%;max-width:370px;margin:16px auto}.top{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:0 0 9px}.eyebrow{margin:0 0 2px;color:var(--accent);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}h1{margin:0;font:700 25px/1 Georgia,"Times New Roman",serif}.count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.card{border:1px solid var(--line);border-radius:15px;background:var(--paper);padding:12px}.instruction{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 9px}.instruction strong{font-size:13px}.instruction span{font-size:10px;color:var(--muted)}
.target{background:var(--accent-soft);padding:12px;text-align:center;border-radius:9px;margin:0 0 11px;color:#6f291f}.target strong{font:700 23px/1.2 Georgia,"Times New Roman",serif}.target small{display:block;font-size:10px;margin-top:3px}.rows{display:grid;gap:7px}.row{display:grid;grid-template-columns:18px minmax(0,1fr);gap:7px;align-items:center}.index{font-size:10px;font-weight:800;color:var(--muted)}
.field{position:relative;min-height:59px;border:1px solid #cfc8bd;border-radius:10px;background:var(--soft);padding:9px 11px 7px;overflow:hidden}.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(166,63,48,.08)}.field.correct{background:var(--good-soft);border-color:#9bc5ab;box-shadow:none}.field.wrong{background:#fff4f3;border-color:var(--bad)}.mask{font:12px/18px Consolas,"Liberation Mono",monospace;letter-spacing:1px;white-space:pre;overflow:hidden;min-height:18px;color:#504b45;pointer-events:none}.field.correct .mask{color:var(--good);font-weight:700}.field input{display:block;min-width:0;width:100%;height:21px;padding:0 26px 0 0;border:0;outline:none;background:transparent;color:var(--ink);font:14px/21px Inter,system-ui,sans-serif}.field input::placeholder{color:#94a0af;opacity:1}.field.correct input{color:var(--good);font-weight:700}.clear{position:absolute;right:9px;top:18px;width:23px;height:23px;border:0;border-radius:50%;background:var(--bad);color:white;font-size:17px;font-weight:700;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}.tick{position:absolute;right:12px;top:18px;color:var(--good);font-size:18px;font-weight:700}
.divider{border-top:1px solid var(--line);margin:12px 0 10px}.hinthead{display:flex;justify-content:space-between;gap:6px;font-size:11px;margin-bottom:7px}.hinthead span{font-size:10px;color:var(--muted)}.alphabet{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:3px}.letter{min-width:0;background:#f7f3ed;color:#444;border:1px solid #d7d1c7;border-radius:6px;padding:5px 0;font-size:10px;font-weight:700;cursor:pointer}.letter:hover:not(:disabled){background:#eee7dc}.letter.used{background:#e4ded4;color:#9a948b}.letter:disabled{cursor:default;opacity:.55}.feedback{font-size:11px;color:var(--muted);min-height:17px;margin-top:9px}.actions{display:flex;justify-content:space-between;gap:7px;margin-top:8px}.btn{border:0;border-radius:9px;padding:9px 11px;font-size:12px;font-weight:800;cursor:pointer}.quiet{background:#eee8de;color:#363b40}.main{background:var(--accent);color:white}.note{font-size:10px;color:var(--muted);line-height:1.4;margin:9px 0 0}.finish{text-align:center;padding:18px 8px}.finish h2{font:700 24px Georgia,serif}.finish p{font-size:13px;line-height:1.6}.finish button{margin-top:6px}[hidden]{display:none!important}@media(max-width:390px){.game{margin:8px auto;padding:0 5px}}

.error{color:var(--bad);font-size:12px;margin-top:8px}

/* Letter-entry overlay: characters appear INSIDE the existing underscore mask. */
.field .mask{padding-right:28px;white-space:pre;line-height:18px;min-height:18px;}
.field .capture{color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--accent);}
.field .capture::selection{background:rgba(166,63,48,.13);}
.field .capture::placeholder{color:#94a0af;-webkit-text-fill-color:#94a0af;opacity:1;}

/* Exact Collocation Puzzle input layering: ONE visible line, mask only. */
.field{height:59px;padding:0;position:relative;}
.field .mask{position:absolute;inset:0;z-index:1;display:flex;align-items:center;padding:0 38px 0 11px;overflow:hidden;white-space:pre;pointer-events:none;user-select:none;font-family:Consolas,"Liberation Mono",monospace;font-size:14px;line-height:1.25;letter-spacing:.04em;}
.field .capture{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;margin:0;border:0;padding:0 38px 0 11px;background:transparent!important;outline:none;color:transparent!important;-webkit-text-fill-color:transparent!important;caret-color:transparent!important;font-family:Consolas,monospace;font-size:16px;cursor:text;}
.field .capture::placeholder{color:transparent!important;-webkit-text-fill-color:transparent!important;opacity:0!important;}
.field .capture::selection{background:transparent;color:transparent;}
.field .clear,.field .tick{z-index:3;top:18px;}