*{box-sizing:border-box}html,body{margin:0;height:100%;background:#eee;color:#171717;font-family:Arial,Helvetica,sans-serif}body{min-height:100dvh;display:flex;flex-direction:column}header{text-align:center;border-bottom:1px solid #aaa;position:relative;padding:14px 16px 8px}h1{font-size:40px;margin:0 0 13px;font-weight:700}h1 span{font-size:33px}header p{font-size:16px;color:#666;margin:0}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible{outline:3px solid #ab8200;outline-offset:3px}.top-links{position:absolute;right:8px;top:7px;display:flex;gap:12px}.top-links button{background:none;border:0;padding:0;text-decoration:underline;font-size:12px;color:#777}main{flex:1;min-height:210px;display:flex;flex-direction:column;align-items:center;padding:56px 12px 18px}#board{width:292px}.word-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:6px}.tile{height:68px;border:2px solid #777;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;text-transform:uppercase}.tile.match{background:#d5ae26;border-color:#ad8919}.tile.typed{border-color:#333}#message{font-size:15px;min-height:20px;text-align:center;margin:12px 0;color:#a33326}footer{padding:0 10px max(15px,env(safe-area-inset-bottom));width:100%}#keyboard{max-width:375px;margin:auto}.key-row{display:flex;justify-content:center;gap:6px;margin-bottom:5px}.key{height:44px;min-width:0;flex:1;max-width:33px;padding:0;border:0;border-radius:2px;background:#bcbcbc;font-size:17px;font-weight:600;touch-action:manipulation}.key.wide{max-width:51px;font-size:13px}.key:hover{background:#aaa}.key:active{background:#d5ae26}.bottom-links{display:flex;justify-content:center;gap:44px;margin-top:18px}.bottom-links button{border:0;background:none;color:#737373;font-size:16px;padding:0}.bottom-links button:hover{text-decoration:underline}#result{text-align:center}#result strong{font-size:23px}#result button,.primary{background:#d5ae26;border:0;border-radius:3px;padding:11px 24px}dialog{border:0;border-radius:8px;width:min(700px,calc(100% - 30px));padding:28px 24px;background:#eee;color:#171717;max-height:85dvh;overflow:auto}dialog::backdrop{background:#0008}dialog h2{text-align:center;font-size:25px;font-weight:400;margin:6px 0 32px}#close{position:absolute;top:8px;right:12px;border:0;background:none;font-size:24px;color:#777}dialog p{line-height:1.5}dialog .primary{display:block;margin:24px auto 0}.example{width:292px;margin:18px auto}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;gap:12px}.stat-grid strong{display:block;font-size:30px}.stat-grid span{font-size:13px;color:#666}.distribution{margin-top:25px}.bar-row{display:flex;gap:10px;align-items:center;margin:8px 0;font-size:14px}.bar{min-width:24px;background:#d5ae26;text-align:right;padding:4px 8px}.muted{color:#777;font-size:14px}#solution .word-row{max-width:240px;margin-left:auto;margin-right:auto}#solution .tile{height:48px;font-size:24px}@media(max-width:550px){header{padding-top:25px}h1{font-size:36px;margin-bottom:8px}main{padding-top:30px}.top-links{font-size:11px}.bottom-links{gap:22px}.bottom-links button{font-size:13px}#keyboard{max-width:375px}.key{height:48px}.stat-grid{gap:6px}}@media(max-height:650px){main{padding-top:18px}header{padding-top:8px}h1{font-size:32px;margin-bottom:6px}.tile{height:52px}.key{height:38px}.bottom-links{margin-top:10px}}[hidden]{display:none!important}button:disabled{cursor:default;opacity:.5}

/* Only the ladder scrolls; header and keyboard keep their own viewport space. */
html{overflow:hidden}body{height:100dvh;min-height:0;overflow:hidden;padding-top:env(safe-area-inset-top,0px)}
header,footer{flex-shrink:0}main{min-height:0;padding:0;overflow:hidden;align-items:stretch}
#guess-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:thin;padding:56px 12px 12px;-webkit-overflow-scrolling:touch}
#board{max-width:100%;margin:0 auto}#game-status{flex:none;min-height:44px;display:flex;align-items:center;justify-content:center;padding:4px 12px}
#message{margin:0;min-height:0}#view-result{border:0;background:none;text-decoration:underline;color:#737373;font-size:14px;padding:6px}
#result{text-align:center}#share-status{min-height:24px;font-size:14px;color:#737373}#share-fallback{max-height:25dvh;overflow:auto;text-align:left;white-space:pre-wrap;user-select:text}
@media(max-width:550px){#guess-scroll{padding-top:30px}}
@media(max-height:650px){#guess-scroll{padding-top:18px}}

#modal-title:focus{outline:none}#close{border-radius:50%}#close:focus-visible{outline:2px solid #777;outline-offset:2px}

.win-modal{width:min(700px,calc(100% - 30px));max-height:90dvh;padding:36px 40px 30px}
.win-modal h2{font-size:36px;margin:12px 0 16px}.win-modal #result{text-align:left}
.win-route{text-align:center;font-size:48px;line-height:1.15;margin:0 0 42px;font-weight:700}.win-route span{font-size:.78em}
.win-summary p{font-size:24px;margin:2px 0;line-height:1.45}.win-summary #share{font-size:18px;margin-top:10px}
.win-summary #share-status{font-size:14px;min-height:0;margin:6px 0}.win-stats h3{font-size:24px;margin:30px 0 14px}
.win-stat-grid{display:grid;grid-template-columns:.65fr 1.5fr 1.15fr 1fr;gap:8px;text-align:center}.win-stat-grid strong{display:block;font-size:48px;line-height:1.25;font-weight:400;margin-bottom:10px}.win-stat-grid span{font-size:18px;white-space:nowrap}
.win-chart{position:relative;padding-left:56px;margin:24px 0}.chart-axis{position:absolute;left:0;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);font-size:18px}.chart-row{display:flex;gap:8px;align-items:center;margin:4px 0;height:31px}.chart-label{width:24px;flex-shrink:0;text-align:right;font-size:18px}.chart-track{flex:1;height:100%;min-width:0}.chart-row:nth-child(odd) .chart-track{background:#e3e3e3}.chart-bar{height:100%;min-width:27px;background:#666;color:white;font-size:22px;font-weight:700;padding:1px 6px}.chart-bar.selected{background:#507aff}.chart-bar span{display:block}.win-modal .next-puzzle{text-align:center;font-size:24px;margin:26px 0 4px}.next-puzzle strong{font-variant-numeric:tabular-nums}
@media(max-width:550px){.win-modal{padding:26px 20px 22px}.win-modal h2{font-size:27px;margin-top:12px}.win-route{font-size:34px;margin-bottom:28px}.win-summary p{font-size:18px}.win-summary #share{font-size:16px}.win-stats h3{font-size:19px;margin-top:24px}.win-stat-grid{gap:5px;grid-template-columns:.65fr 1.45fr 1.15fr 1fr}.win-stat-grid strong{font-size:34px}.win-stat-grid span{font-size:11px;white-space:normal;line-height:1.3;display:block}.win-chart{padding-left:35px;margin:18px 0}.chart-axis{font-size:14px}.chart-row{height:26px;gap:6px}.chart-label{font-size:15px;width:20px}.chart-bar{font-size:18px;min-width:23px;padding:2px 5px}.win-modal .next-puzzle{font-size:19px;margin-top:22px}}
.win-modal{padding-top:26px;padding-bottom:24px}.win-modal h2{font-size:34px;margin-top:8px}.win-route{margin-bottom:28px}.win-stats h3{margin-top:22px}.win-modal #result .win-stat-grid strong{font-size:48px;font-weight:400}.chart-row{height:28px}.win-modal .next-puzzle{margin-top:18px}
@media(max-width:550px){.win-modal h2{font-size:27px}.win-modal #result .win-stat-grid strong{font-size:34px}.chart-row{height:26px}}
.chart-axis{white-space:nowrap}