/* Optional help stays in a modal so it does not cover the walking route during play. */
.readable-overlay #hintButton{min-width:52px;width:52px}
.readable-overlay #hintButton small{font-size:13px;white-space:nowrap}
#clueDialog{box-sizing:border-box;width:min(650px,calc(100vw - 28px));max-height:88svh;padding:24px;overflow:hidden}
#clueDialog[open]{display:flex;flex-direction:column}
#clueDialog .dialog-title{align-items:flex-start;gap:12px;flex-shrink:0}
#clueBody{overflow:auto;min-height:0;padding-right:8px;scrollbar-width:thin}
#clueDialog .dialog-title h2{margin:0;font-size:28px}
#clueDialog .dialog-title button,#clueDialog button{min-height:44px;font-size:16px}
#cluePlace{font:italic 20px/1.35 Georgia,serif;color:#f3dba7;margin:12px 0}
#cluePolicy,#clueIntro,#clueText,#clueEmpty{font:17px/1.5 system-ui,sans-serif}
#clueBalance{font:600 17px/1.4 system-ui,sans-serif;color:#ffe2a1;margin:16px 0 8px}
.clue-review{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.clue-review button{padding:8px 12px;border:1px solid #c7dcb65e;border-radius:10px;background:#142e39;color:#f1ead8}
.clue-review button[aria-pressed=true]{border-color:#e9c87f;background:#31544f}
#clueCard{padding:16px;border:1px solid #bacda84d;border-radius:14px;background:#102f39}
#clueCard h3{font:600 21px/1.3 Georgia,serif;margin:0 0 10px;color:#ffe2a1}
#clueText{margin:0 0 14px}
#clueSpells{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.clue-wish-label{font:600 15px/1.4 system-ui,sans-serif;display:block;margin-bottom:8px;color:#e2dfc7}
.clue-sequence{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.clue-stone{position:relative;box-sizing:border-box;width:65px;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:20px 4px 6px;border:1px solid #e4cf8b69;border-radius:9px;background:#24454a;color:#fff5d9}
.clue-stone img{width:35px;height:42px;object-fit:contain;filter:grayscale(1) invert(1) brightness(1.7);mix-blend-mode:screen;opacity:.94}
.clue-stone .clue-word{font:14px/1.2 system-ui,sans-serif;text-align:center;overflow-wrap:anywhere}
.clue-position{position:absolute;top:4px;left:7px;font:12px/1 system-ui,sans-serif;color:#d2d7b9}
.clue-gap{border-style:dashed;background:#183840}
.clue-gap .clue-word{font-size:27px;color:#c3cda9}
.clue-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;flex-shrink:0;border-top:1px solid #bacda84d;padding-top:12px}
.clue-actions button{padding:11px 16px;border:1px solid #c8d7b05c;border-radius:10px}
#revealClueButton{background:#d9bd7d;color:#112d33;font-weight:600}
#clueEmpty{color:#e6debf}
@media(max-width:760px){
 .readable-overlay .companion-dialogue:not(:has(#feedback[hidden])) #hintButton{min-width:52px;width:52px}
 #clueDialog{padding:18px;max-height:90svh}
 #clueDialog .dialog-title h2{font-size:25px}
 #clueCard{padding:12px}
 .clue-sequence{gap:6px}
 .clue-stone{width:57px;min-height:96px}
 .clue-stone .clue-word{font-size:13px}
 .clue-gap .clue-word{font-size:27px}
 .clue-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:12px}
 .clue-actions button{padding:9px 8px;line-height:1.3}
 #revealClueButton[hidden]+button{grid-column:1 / -1}
}