/* Word Rescue — letters and words must be effortless to read. */
.dxg .wr {
	height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: clamp(6px, 1.4vh, 14px); padding: clamp(10px, 2vh, 20px) clamp(10px, 3vw, 28px); overflow-y: auto;
}
.wr-top { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.wr-skill {
	font-family: var(--g-head); font-size: 0.85rem; padding: 3px 12px; border-radius: 999px;
	background: #DDF2F0; color: #0E4A49;
}
.wr-clue { margin: 0; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--g-navy); }
.wr-clue::before { content: "Clue: "; font-family: var(--g-head); font-weight: 500; color: var(--g-aqua-dark); }
.wr-hint {
	margin: 0; max-width: 100%; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--g-navy);
	background: #FFF5D1; border-radius: 999px; padding: 4px 16px; animation: dxg-in .3s ease-out;
}
.wr-hint[hidden] { display: none; }
.wr-hint::before { content: "Clue 2: "; font-family: var(--g-head); font-weight: 500; color: #7A5B00; }


/* The rescue rainbow */
.wr-stage { display: flex; flex-direction: column; align-items: center; }
.wr-rainbow { width: clamp(140px, 32vh, 270px); height: auto; overflow: visible; }
.wr-band { fill: none; stroke-linecap: round; transition: stroke .35s ease, opacity .35s ease; }
.wr-band.is-lost { stroke: #E3EAEB !important; stroke-dasharray: 2 8; opacity: .9; }
.wr.is-glow .wr-band:not(.is-lost) { animation: wr-glow .9s ease-out; }
@keyframes wr-glow { 0% { filter: none; } 40% { filter: drop-shadow(0 0 6px rgba(246, 216, 120, .95)); } 100% { filter: none; } }
.wr-chances { margin: 2px 0 0; font-family: var(--g-head); font-size: 0.95rem; color: var(--g-muted); }

/* Hidden word tiles */
.wr-word { display: flex; gap: clamp(8px, 1.5vw, 14px); justify-content: center; }
.wr-tile {
	display: grid; place-items: center; width: clamp(58px, 9vw, 84px); height: clamp(68px, 11vh, 96px);
	border-radius: 14px; background: #fff; border: 2px solid var(--g-border); border-bottom: 5px solid var(--g-navy);
	font-family: var(--g-head); font-weight: 500; font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem); color: var(--g-navy); line-height: 1;
}
.wr-tile.is-open { background: #FFFDF5; }
.wr-tile.is-new .wr-tile__ch { animation: wr-flip .32s ease-out; }
@keyframes wr-flip { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: none; opacity: 1; } }
.wr-word.is-rescued .wr-tile { background: #E2F5F3; border-color: #7CCBC4; border-bottom-color: var(--g-aqua); animation: wr-hop .5s ease-out; }
.wr-word.is-rescued .wr-tile:nth-child(2) { animation-delay: .06s; } .wr-word.is-rescued .wr-tile:nth-child(3) { animation-delay: .12s; }
.wr-word.is-rescued .wr-tile:nth-child(4) { animation-delay: .18s; } .wr-word.is-rescued .wr-tile:nth-child(5) { animation-delay: .24s; }
@keyframes wr-hop { 40% { transform: translateY(-10px); } 100% { transform: none; } }
/* Letters revealed at the end (not guessed): outlined style, still fully readable */
.wr-tile.is-shown { background: #FFF5D1; border-style: dashed; border-bottom-style: solid; border-bottom-color: #C9A93A; }
.wr-msg { min-height: 1.6em; margin: 0; font-family: var(--g-head); font-weight: 500; font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); color: var(--g-blue); text-align: center; }

/* Letter bank */
.wr-bank { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 6px; width: min(100%, 760px); }
.wr-key {
	position: relative; min-height: 50px; border-radius: 12px; border: 2px solid var(--g-border); background: #fff; cursor: pointer;
	font-family: var(--g-head); font-weight: 500; font-size: 1.45rem; color: var(--g-navy); padding: 0; line-height: 1;
}
.wr-key:hover:not(:disabled) { border-color: var(--g-aqua); background: #F3FBFA; }
.wr-key.is-vowel { background: #FFF6D6; border-color: #EBD48A; }  /* vowels gently marked */
.wr-key:disabled { cursor: default; }
.wr-key.is-hit { background: #DDF2F0; border-color: var(--g-aqua); color: #0E4A49; }
.wr-key.is-miss { background: #F3F5F6; border-style: dashed; color: #8A96A3; }
.wr-key.is-miss .wr-key__ch { text-decoration: line-through; text-decoration-thickness: 2px; }
.wr-key__mark { position: absolute; top: 2px; right: 4px; font-size: 0.7rem; font-family: var(--g-body); font-weight: 700; }
.wr-key.is-hit .wr-key__mark::after { content: "✓"; color: var(--g-aqua-dark); }
.wr-key.is-miss .wr-key__mark::after { content: "✕"; color: #9E3647; }
@media (max-width: 719px) { .wr-bank { grid-template-columns: repeat(7, minmax(0, 1fr)); } .wr-key { min-height: 46px; font-size: 1.3rem; } }

.wr-bank.is-resting { opacity: .55; }
.wr-solve__open:disabled { opacity: .5; }

/* Solve the word */
.wr-solve { min-height: 50px; display: flex; justify-content: center; }
.wr-solve__form { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.wr-solve__form[hidden] { display: none; }
.wr-solve__input {
	width: 8.5em; min-height: 48px; padding: 0 12px; text-align: center; letter-spacing: .12em;
	font-family: var(--g-head); font-size: 1.6rem; color: var(--g-navy); border: 2px solid var(--g-aqua); border-radius: 12px;
	-webkit-user-select: text; user-select: text;
}
.wr-solve__form.is-wrong .wr-solve__input { animation: dxg-wiggle .38s ease-in-out; }
@media (max-height: 640px) { .wr-rainbow { width: 130px; } .wr-tile { height: 60px; } .wr-key { min-height: 44px; } }
/* Phones: compact so the whole game fits without scrolling */
@media (max-width: 599px) {
	.dxg .wr { gap: 6px; padding: 8px 10px; justify-content: space-between; }
	.wr-top { gap: 4px 8px; }
	.wr-skill { font-size: 0.78rem; padding: 2px 10px; }
	.wr-clue { font-size: 1rem; }
	.wr-rainbow { width: min(38vw, 17vh); }
	.wr-chances { font-size: 0.85rem; }
	.wr-tile { width: 58px; height: 64px; font-size: 2.3rem; }
	.wr-msg { font-size: 1rem; min-height: 1.4em; }
	.wr-bank { gap: 5px; }
	.wr-key { min-height: 44px; }
	.wr-solve { min-height: 46px; }
	.wr-solve .dxg-btn { min-height: 44px; }
}