:root{font-family:Arial,Helvetica,sans-serif;color:#121213;background:white;--green:#6aaa64;--yellow:#c9b458;--gray:#787c7e}*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #34652e;outline-offset:3px}header{height:73px;border-bottom:1px solid #d3d6da;display:flex;align-items:center;justify-content:space-between;padding:0 25px;max-width:1000px;margin:auto}h1{font-family:Georgia,serif;font-size:36px;letter-spacing:-1.6px;margin:0;font-weight:900}.title-dot{color:var(--green)}.icon{background:none;border:0;width:40px;height:40px;display:grid;place-items:center;font-size:22px}#help{border:1.7px solid #121213;border-radius:50%;height:24px;width:24px;font-size:16px;font-weight:bold;margin:8px}main{max-width:520px;margin:auto;padding:0 12px}nav{display:flex;justify-content:center;gap:24px;margin-top:20px}nav button{background:none;border:0;padding:6px 3px 9px;font-weight:bold;font-size:14px;color:#787c7e}nav button.selected{border-bottom:2px solid #121213;color:#121213}.edition{text-align:center;margin:13px 0 20px;color:#737373;font-size:12px;letter-spacing:1.2px;text-transform:uppercase}.trail{display:flex;align-items:center;justify-content:center;margin:0 auto 22px;max-width:370px}.stop{min-width:100px;text-align:center;font-size:12px;font-weight:bold;letter-spacing:1px}.stop .number{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;border:1px solid #d3d6da;margin:0 auto 7px;color:#999;letter-spacing:0}.stop.active .number{background:#121213;color:white;border-color:#121213}.stop.done .number{background:var(--green);color:white;border-color:var(--green)}.stop.failed .number{background:var(--gray);color:white}.stop:not(.done):not(.active):not(.failed){color:#999}.line{height:1px;background:#d3d6da;width:40px;margin-top:-20px}.board-heading{max-width:330px;margin:0 auto 9px;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:bold;letter-spacing:1.1px}#hint{border:0;background:none;font-size:12px;letter-spacing:0;padding:5px 0}#hint span{color:#888;font-weight:normal;margin-left:3px}#hinttext{text-align:center;font-size:14px;line-height:1.4;margin:0 auto 10px;max-width:340px}.board{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;width:min(330px,78vw);margin:auto}.tile{aspect-ratio:1;display:grid;place-items:center;border:2px solid #d3d6da;font-size:32px;font-weight:750;text-transform:uppercase}.tile.filled{border-color:#878a8c}.tile.correct,.key.correct{background:var(--green);border-color:var(--green);color:white}.tile.present,.key.present{background:var(--yellow);border-color:var(--yellow);color:white}.tile.absent,.key.absent{background:var(--gray);border-color:var(--gray);color:white}.reveal{animation:flip .4s ease both;animation-delay:var(--delay)}@keyframes flip{0%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}#message{min-height:34px;text-align:center;font-size:14px;font-weight:bold;padding:9px 0 6px}#keyboard{margin:8px -4px 0}.keyrow{display:flex;gap:6px;justify-content:center;margin-bottom:7px}.key{border:0;background:#d3d6da;border-radius:4px;flex:1;height:55px;min-width:0;padding:0;font-size:14px;font-weight:bold}.key.wide{flex:1.5;font-size:11px}.keyrow:nth-child(2){padding:0 22px}.primary{display:block;border:0;border-radius:4px;background:#121213;color:white;font-weight:bold;padding:14px 23px;margin:6px auto 16px;min-width:190px}.primary span{margin-left:15px}footer{text-align:center;color:#888;font-size:12px;margin:21px 0 18px}dialog{border:1px solid #ddd;border-radius:9px;padding:32px;max-width:440px;width:calc(100% - 32px);box-shadow:0 8px 60px #0002}dialog::backdrop{background:#ffffffb8}.close{position:absolute;right:9px;top:9px}h2{font-family:Georgia,serif;font-size:29px;margin:10px 0 15px}dialog p{font-size:16px;line-height:1.6}dialog .example{display:flex;gap:5px;margin:20px 0}.example .tile{width:43px;font-size:24px}.legend{display:flex;gap:12px;align-items:center;margin:14px 0;line-height:1.5;font-size:14px}.swatch{width:24px;height:24px;flex-shrink:0}#connection{text-align:center;padding:20px 12px;min-height:450px}#connection p{line-height:1.6;color:#666}.choices{display:grid;gap:10px;margin:25px auto;max-width:340px}.choice{padding:17px;background:white;border:1px solid #d3d6da;border-radius:4px;font-weight:bold;text-align:left}.choice:hover{background:#f6f6f6}.score{font-size:56px;font-weight:bold;margin-top:28px}.score small{font-size:16px;font-weight:normal;color:#888}.results{display:flex;justify-content:center;gap:24px;margin:25px 0}.results strong{font-size:30px;display:block}.results span{font-size:12px;color:#777}.eyebrow{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#777}[hidden]{display:none!important}@media(max-height:800px){header{height:60px}nav{margin-top:11px}.edition{margin:9px 0 13px}.trail{margin-bottom:14px}.board{width:min(290px,72vw)}.key{height:48px}footer{margin:14px 0}}@media(max-width:380px){header{padding:0 12px}h1{font-size:31px}.keyrow{gap:4px}.stop{min-width:86px}.tile{font-size:28px}}@media(prefers-reduced-motion:reduce){.reveal{animation:none}}

/* Compact game layout. */
header{max-width:100%;height:65px;padding:0 max(16px,calc((100% - 500px)/2))}h1{font-size:34px;letter-spacing:-1.4px}main{max-width:520px;padding:0 12px}nav{margin-top:14px;gap:22px}nav button{font-size:14px;padding:6px 2px 8px}.trail{max-width:330px;margin:18px auto 6px;gap:10px}.stop{min-width:0;flex:1;height:32px;display:grid;place-items:center;font-size:14px;letter-spacing:1px;border-bottom:2px solid #e5e5e5;color:#787c7e}.stop.active{border-color:#121213;color:#121213}.stop.done{border-color:var(--green);color:#426f3e}.stop.failed{border-color:var(--gray);color:var(--gray)}.line{display:none}.board-heading{justify-content:flex-end;margin:0 auto 6px;max-width:330px;min-height:30px}#hint{font-size:14px;font-weight:normal;padding:6px 0}#hint span{font-size:12px}.board{width:min(330px,78vw)}#message{min-height:36px}#keyboard{margin-top:8px}.key{height:58px}#connection{padding-top:30px}.results span{font-size:14px}
@media(max-height:800px){header{height:56px}nav{margin-top:8px}.trail{margin-top:10px}.board,.board-heading{width:min(290px,72vw)}.key{height:48px}#keyboard{margin-top:4px}}

.trail-toolbar{display:flex;align-items:center;gap:14px;max-width:360px;margin:14px auto 16px}.trail-toolbar .trail{flex:1;margin:0;gap:8px;min-width:0}.trail-toolbar #hint{flex-shrink:0;min-height:40px;border:1px solid #d3d6da;border-radius:20px;padding:8px 12px;font-size:14px;line-height:1;font-weight:bold;background:white}.trail-toolbar #hint span{font-size:12px;margin-left:4px;color:#787c7e}.trail-toolbar #hint:hover{background:#f4f6f3}.trail-toolbar #hint.used{background:#eff5ed;color:#426f3e;border-color:#b9cfb4}#hinttext{border-left:3px solid var(--green);background:#f4f7f2;border-radius:0 4px 4px 0;text-align:left;padding:11px 13px;max-width:330px;margin:0 auto 12px;font-size:14px}.share-actions{display:flex;justify-content:center;align-items:stretch;gap:8px;margin-top:18px}.share-actions .primary{margin:0;min-width:160px;background:#53834d}.secondary{border:1px solid #d3d6da;border-radius:4px;background:white;padding:12px 20px;font-size:14px;font-weight:bold;min-height:44px}.secondary:hover{background:#f6f6f6}#sharestatus{font-size:14px;min-height:22px;margin:8px 0 14px}#sharetext{box-sizing:border-box;width:100%;height:290px;font:16px/1.5 Arial,sans-serif;padding:12px;border:1px solid #d3d6da;border-radius:4px;resize:vertical}@media(max-height:800px){.trail-toolbar{margin:10px auto 12px;max-width:330px}#hinttext{max-width:290px}}

.delete-icon{display:block;width:23px;height:23px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
