/* Comparison marks remain legible without relying on the tile colour. */
.guess-row>.guess-cell[data-feedback]{padding-top:10px;padding-bottom:24px;cursor:help;appearance:none;font-family:var(--sans);border-radius:0}
.guess-cell[data-feedback]:hover{box-shadow:inset 0 0 0 1px #fff7df88}
.guess-cell[data-feedback]:focus-visible,.guess-cell[data-feedback][aria-expanded=true]{outline:2px solid #263e4b;outline-offset:2px;z-index:1}
.guess-cell>.cell-status-mark{position:absolute;left:6px;bottom:3px;font:600 15px/1 var(--sans);color:inherit}
.guess-cell[data-feedback]>b.cell-direction{top:auto;bottom:3px;right:6px;transform:none;font-size:18px;line-height:1}
.legend-square{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;font:600 12px/1 var(--sans);font-style:normal;color:#fff9e8;flex-shrink:0}
.legend-square.close{color:#30230e}
.legend-square.unknown{background:#e0d6bf;color:#5e513a;border-style:dashed}
.tile-feedback{position:fixed;inset:auto;margin:0;width:min(340px,calc(100vw - 24px));max-width:none;max-height:calc(100svh - 24px);overflow:auto;z-index:90;padding:20px 22px 22px;border:1px solid #b49b64;box-shadow:0 0 0 3px #20333e,0 0 0 4px #ac935c,0 10px 28px #07111c66;background:linear-gradient(110deg,#f5ecd7,#e7d8b8);color:#493921;font:14px/1.6 var(--sans);text-align:left}
.tile-feedback[hidden]{display:none}
.tile-feedback::backdrop{background:transparent}
.tile-feedback h3{font:26px/1.2 var(--serif);padding-right:25px;color:#493425}
.tile-feedback-match{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;color:#314f2c}
.tile-feedback-match[data-status=close]{color:#70501c}
.tile-feedback-match[data-status=wrong],.tile-feedback-match[data-status=unknown]{color:#59605a}
.tile-feedback-match>span{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border:1px solid currentColor;font-size:18px;line-height:1}
.tile-feedback-match>strong{font-weight:600}
.tile-feedback-description{margin-top:12px;font-size:13px;line-height:1.75;color:#685435;overflow-wrap:anywhere}
.tile-feedback-close{position:absolute;right:5px;top:5px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:#775b35;font:27px/1 var(--sans)}
.tile-feedback-close:hover{background:#cdb88f55;color:#682b32}
.tile-feedback-close:focus-visible{outline:2px solid #395b70;outline-offset:-5px}
@media(max-width:600px){
 .tile-feedback{inset:auto 12px calc(12px + env(safe-area-inset-bottom));width:auto;max-height:min(50svh,350px);padding:22px 23px 24px}
 .tile-feedback h3{font-size:28px}
 .tile-feedback-description{font-size:14px}
}