/* Keep every puzzle letter within reach of the board. */
.letter-rack{background:#e3e6d9;border-radius:15px;padding:14px 12px;min-width:0}
.letter-rack .tray-label{letter-spacing:.7px;line-height:1.5;margin:0 0 12px}
.letter-rack .tray{margin:0;gap:8px}
.letter-rack .tile{width:100%;max-width:none;border-radius:8px;font-size:24px}
.letter-rack:has(.tray:empty){min-height:85px}
.word-list{display:block;margin:10px 0;max-height:33svh;overflow:auto;overscroll-behavior:contain}
.word-entry{border-bottom:1px solid #cdd5c3;padding:10px 0;line-height:1.5}
.word-entry strong{font-size:17px;letter-spacing:1px;color:#365d3e}
.word-entry.bad strong{color:#a34f36}
.word-meaning{font-size:13px;color:#52634e;margin-top:5px;overflow-wrap:anywhere}
.word-meaning a{font-size:10px;color:#68785d;text-underline-offset:2px;display:inline-block}
.both-status{background:#f5e1ba;border-radius:9px;padding:12px;font-size:14px;line-height:1.6;color:#6f5128}
@media(min-width:701px){
 body:has(.play-layout) header{padding-top:15px;padding-bottom:15px}
 #app:has(.play-layout){padding-top:6px;padding-bottom:20px}
 .play-layout{grid-template-columns:minmax(0,1fr) 250px;gap:25px;align-items:start;width:100%}
 .board-stage{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:10px 18px;align-items:start}
 .board-stage .board-tools{grid-column:1;grid-row:1;margin:0}
 .board-stage .board-frame{grid-column:1;grid-row:2;width:min(100%,calc(100svh - 250px));min-width:0;padding:12px;margin:0 auto}
 .board-stage .letter-rack{grid-column:2;grid-row:2 / 4}
 .letter-rack .tray{grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center}
 .letter-rack .tile{width:min(100%,calc((100svh - 290px) / 8));font-size:clamp(25px,3.5vh,34px)}
 .board-stage .instruction{grid-column:1;grid-row:3;margin-top:3px;min-height:30px;text-align:left}
 #app:has(.play-layout){max-width:none;padding-left:24px;padding-right:24px}
 .game-top{max-width:none;margin-bottom:12px}
 .board .cell.occupied,.board .cell.preview{font-size:clamp(21px,3.8vh,34px)}
 .side-panel{padding-top:45px}
 .partner-card{padding:15px;margin-bottom:16px}
 .partner-card .silhouette{display:none}
 .side-panel details{display:none}
 .side-panel h3{margin-bottom:10px}
}
@media(min-width:701px) and (max-width:1040px){
 .play-layout{grid-template-columns:minmax(0,1fr) 175px;gap:18px}
 .board-stage{grid-template-columns:minmax(0,1fr) 132px;gap:10px 12px}
 .letter-rack{padding:12px 9px}
 .letter-rack .tray{gap:6px}
 .letter-rack .tile{font-size:20px}
 .side-panel{font-size:12px}
 .side-panel h3{font-size:14px}
 .partner-card{padding:12px}
}
@media(max-width:700px){
 body:has(.play-layout) header{padding:10px 12px}
 #app:has(.play-layout){padding-top:4px}
 .board-stage{display:flex;flex-direction:column;gap:10px}
 .board-stage .board-tools{order:0;width:100%;margin:0}
 .board-stage .letter-rack{order:1;width:100%;padding:8px 10px;border-radius:10px}
 .letter-rack .tray-label{margin-bottom:6px;font-size:10px}
 .letter-rack .tray{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
 .letter-rack .tile{font-size:20px;max-height:44px}
 .board-stage .board-frame{order:2;width:min(100%,calc(100svh - 285px));min-width:0;align-self:center;margin:0}
 .board-stage .instruction{order:3;margin:0;min-height:0;font-size:11px}
 .game-top{margin-bottom:10px}
 .game-top h2{font-size:17px}
 .side-panel{margin-top:3px}
 .partner-card{padding:10px}
 .side-panel details{display:none}
}

.team-progress{padding:12px 0;border-bottom:1px solid #d9d3bf;display:grid;gap:5px;color:#456356}.team-progress>div,.team-progress small{font-size:12px}.team-progress progress{width:100%;height:9px;accent-color:#6d9d85}.chapter-complete{color:#456356;font-weight:bold}.finale{position:relative;overflow:hidden}.team-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.team-confetti i{position:absolute;left:calc(var(--i)*5.5%);top:-15px;width:9px;height:15px;background:var(--color);animation:team-fall 2.8s ease-out both;animation-delay:calc(var(--i)*35ms)}@keyframes team-fall{to{transform:translateY(500px) rotate(320deg);opacity:0}}@media(prefers-reduced-motion:reduce){.team-confetti{display:none}}

.board-stage{grid-template-columns:minmax(0,1fr)!important}.board-stage .board-frame{grid-column:1!important}.tray,.tray-label,.letter-rack{display:none!important}

/* Board interaction is dragging, never native text selection. */
.board,.board .cell,.follower{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.board .cell{transition:background 70ms ease,box-shadow 70ms ease;touch-action:none}
.board .cell.occupied{cursor:grab}.board.dragging .cell{cursor:grabbing}
.board.dragging .cell.legal-drop{background:#c3d4b9}
.board .cell.drag-source{opacity:.35;outline:none}
.board .cell.preview{outline:2px solid #618958;outline-offset:-2px}
.board .cell:focus:not(:focus-visible){outline:none}
.follower{will-change:left,top;contain:layout style;transition:none}

/* Leave room for perspective, board depth and captions in the finale. */
.finale{overflow:visible;padding:4px 16px 24px;width:100%;min-width:0}
.solved-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,4vw,50px);padding:35px 25px 65px;min-height:0}
.solved-face{width:100%;min-width:0;justify-self:center}
.solved-grid{width:100%;min-width:0;grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
.solved-grid span{min-width:0;font-size:clamp(12px,2.4vw,28px)}
@media(max-width:500px){.finale{padding-inline:0}.solved-duo{gap:18px;padding:25px 8px 45px}.solved-face.front{transform:rotateX(12deg) rotateY(10deg) rotateZ(-2deg)}.solved-face.back{transform:rotateX(12deg) rotateY(-10deg) rotateZ(2deg)}.solved-grid{gap:2px;padding:6px}.solved-grid span{font-size:clamp(10px,3vw,18px)}}