/* Scoped to the correspondence puzzle; chapter navigation remains unchanged. */
.flower-relay{max-width:680px;margin:22px auto;font-family:Georgia,'Noto Serif KR',serif}
.flower-relay-map{position:relative;aspect-ratio:1 / 1.15;background:#b89768 url('/gameImgs/flower/relay-village.webp') center/100% 100%;box-shadow:0 14px 28px #0006;isolation:isolate}
.flower-relay-lines,.flower-relay-people{position:absolute;inset:0;width:100%;height:100%}
.flower-relay-lines{pointer-events:none;overflow:visible;z-index:1}.flower-relay-people{z-index:2}.flower-relay-line{fill:none;stroke:#f3c570;stroke-width:1;stroke-dasharray:2 .7}.flower-relay-line.invalid{stroke:#b54834;filter:none}.flower-relay-messenger{fill:#fff2ac;stroke:#d89536;stroke-width:.4;opacity:.95}
.flower-relay-person{position:absolute;transform:translate(-50%,-50%);padding:0;border:0;background:none;color:#f1dfba;cursor:pointer;min-height:60px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.flower-relay-person:active{transform:translate(-50%,-50%)}
.flower-relay .flower-relay-portrait{display:block;aspect-ratio:1;background-image:url('/gameImgs/flower/relay-portraits.webp');background-size:300% 200%;background-repeat:no-repeat;background-color:#d0b28a}
.flower-relay-person .flower-relay-portrait{width:clamp(58px,12vw,100px);border:2px solid #af8c55;border-radius:50%;box-shadow:0 4px 6px #0007;transition:border-color .2s,box-shadow .2s}
.flower-relay-person.selected .flower-relay-portrait,.flower-relay-person.sending .flower-relay-portrait{border-color:#ffe1a0;box-shadow:0 0 0 3px #8c5f23aa,0 0 17px #ffd180c0}.flower-relay-person:focus-visible{outline:2px solid #fff0c2;outline-offset:5px;border-radius:50%}
.flower-relay-person .flower-relay-name{display:block;width:max-content;max-width:125px;white-space:nowrap;margin:-1px auto 0;padding:4px 7px;background:linear-gradient(90deg,#261b10df,#302014,#261b10df);border-radius:3px;color:#f9e7c7;font-family:inherit;font-size:clamp(11px,2.2vw,15px);line-height:1.4;box-shadow:0 3px 5px #0003}
.flower-relay-letter{position:relative;margin:22px 3px 16px;padding:23px;background:repeating-linear-gradient(0deg,transparent 0 3px,#75552f07 3px 4px),linear-gradient(100deg,#caae85,#ecd9b5 35%,#dec59e 60%,#c8aa7e);box-shadow:0 9px 20px #0005,inset 0 0 25px #70502a25;border-radius:3px}.flower-relay-letter::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,transparent 49%,#73533715 49.5%,#fff3cd40 50%,transparent 50.6%)}
.flower-relay-dialogue{display:grid;grid-template-columns:92px 1fr;align-items:start;gap:18px;color:#402e20}.flower-relay-dialogue .flower-relay-portrait{width:100%;border-radius:50%;border:1px solid #936e49;box-shadow:0 2px 7px #79543240}.flower-relay-dialogue small{font-size:10px;letter-spacing:1px;color:#876444}.flower-relay-dialogue h2{font-size:22px;margin:5px 0 11px;padding-bottom:9px;border-bottom:1px solid #8c684e60;color:#39291c}.flower-relay .flower-relay-quote{margin:0;line-height:1.85;font-size:16px;word-break:keep-all;overflow-wrap:break-word;min-height:90px;color:#493224}
.flower-relay-letter-actions,.flower-relay-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.flower-relay button[data-action]{font-family:inherit;border:1px solid #97774f;background:linear-gradient(180deg,#433022,#2d2017);color:#f0debc;border-radius:5px;padding:13px 8px;min-height:46px;font-size:14px;cursor:pointer}.flower-relay button[data-action="check"]{border-color:#c3975b;background:linear-gradient(180deg,#655033,#463421)}.flower-relay button:disabled{opacity:.65;cursor:default}.flower-relay-person:disabled{opacity:1}.flower-relay button[data-action]:focus-visible,.flower-relay-record button:focus-visible{outline:2px solid #e2b678;outline-offset:3px}
.flower-relay-instruction{font-size:13px;line-height:1.8;text-align:center;color:#bca88d;margin:17px 8px}.flower-relay-status{margin:20px 0 14px;padding:16px 18px;border-left:2px solid #b18e5b;background:#211a13;color:#dfc7a3;font-size:14px;line-height:1.8;word-break:keep-all;overflow-wrap:break-word}.flower-relay-record{border-top:1px solid #72573970;padding:13px 0;color:#bdab90;font-size:13px}.flower-relay-record summary{cursor:pointer;line-height:1.8}.flower-relay-record ul{padding:0;list-style:none;margin:10px 0}.flower-relay-record li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #72573935;line-height:1.7}.flower-relay-record button{flex:none;min-width:44px;min-height:36px;border:1px solid #755d40;background:#241c13;color:#cdb697;border-radius:3px;font-family:inherit;cursor:pointer}.flower-relay-note{display:block;color:#887b69;font-size:10px;line-height:1.7;margin-top:7px}.flower-relay.complete .flower-relay-line{stroke-dasharray:none;stroke:#ffe09b;stroke-width:1}.flower-relay.complete .flower-relay-status{border-color:#d1aa6d;color:#f1ddba}
@media(max-width:600px){.flower-relay-dialogue{grid-template-columns:64px 1fr;gap:12px}.flower-relay-letter{padding:19px 15px}.flower-relay-dialogue h2{font-size:19px}.flower-relay .flower-relay-quote{font-size:14px;min-height:120px}.flower-relay-person .flower-relay-portrait{width:62px}.flower-relay-person .flower-relay-name{font-size:11px;padding:3px 5px}.flower-relay button[data-action]{font-size:12px}.flower-relay-status{font-size:13px}}
@media(prefers-reduced-motion:reduce){.flower-relay-person .flower-relay-portrait{transition:none}}


/* Readable, viewport-sized contact puzzles. */
#flowerGame:is(.flower-relay-active,.flower-beacon-active){padding-top:10px;padding-bottom:8px;min-height:0}
#flowerGame:is(.flower-relay-active,.flower-beacon-active) .flower-head{display:flex;align-items:center;gap:10px;padding-bottom:8px;margin-bottom:8px;flex-wrap:wrap}
#flowerGame:is(.flower-relay-active,.flower-beacon-active) .flower-head .era{display:none}
#flowerGame:is(.flower-relay-active,.flower-beacon-active) .flower-head h1{font-size:22px;margin:0}
#flowerGame:is(.flower-relay-active,.flower-beacon-active) .flower-progress{flex:1;min-width:90px;margin:0;padding:5px 0}
#flowerGame:is(.flower-relay-active,.flower-beacon-active) .story-feed{padding:0}
#flowerGame:is(.flower-relay-active,.flower-beacon-active) .story-feed>.story-line{font-size:14px;line-height:1.5;margin:0 0 5px}
#flowerGame:is(.flower-relay-active,.flower-beacon-active) .story-feed>.story-line.date{font-size:11px;margin:0 0 5px}
#flowerGame:is(.flower-relay-active,.flower-beacon-active) .flower-restart{margin-top:6px}
#flowerGame .flower-relay{position:relative;height:var(--puzzle-height,calc(100dvh - 210px));max-width:900px;margin:8px auto 0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr);gap:12px 20px;align-items:start}
#flowerGame .flower-relay-map{grid-column:1;grid-row:1 / -1;width:auto;height:100%;max-width:100%;max-height:100%;aspect-ratio:1 / 1.15;justify-self:center;align-self:start}
#flowerGame .flower-relay-map~*{grid-column:2;min-width:0}
#flowerGame .flower-relay-letter{margin:0;padding:18px}
#flowerGame .flower-relay-dialogue{grid-template-columns:54px minmax(0,1fr);gap:12px}
#flowerGame .flower-relay-dialogue h2{font-size:21px;margin:4px 0 10px;padding-bottom:8px}
#flowerGame .flower-relay-quote{min-height:0;font-size:16px;line-height:1.7}
#flowerGame .flower-relay-letter-actions,#flowerGame .flower-relay-controls{gap:8px;margin-top:14px}
#flowerGame .flower-relay-controls{margin-top:0}
#flowerGame .flower-relay button[data-action]{min-height:44px;padding:10px 6px;font-size:14px}
#flowerGame .flower-relay-status{margin:0;padding:12px;font-size:14px;line-height:1.55}
#flowerGame .flower-relay-record{padding:7px 0;font-size:13px}
#flowerGame .flower-relay-record[open]{position:absolute;right:0;bottom:0;width:calc(100% / 2.15 - 10px);z-index:5;max-height:80%;overflow-y:auto;padding:14px;background:#211a13;border:1px solid #725739;box-shadow:0 4px 20px #0009}
#flowerGame .flower-relay-record .flower-relay-instruction{font-size:13px;text-align:left;margin:10px 0}
#flowerGame .flower-relay-note{font-size:11px}
#flowerGame .flower-relay-person .flower-relay-portrait{width:clamp(42px,8dvh,76px)}
#flowerGame .flower-relay-person .flower-relay-name{font-size:12px;padding:3px 5px}
@media(max-width:849px) and (min-height:501px), (min-height:501px) and (max-height:749px){
 #flowerGame:is(.flower-relay-active,.flower-beacon-active) .story-feed>.story-line:not(.date){display:none}
 #flowerGame:is(.flower-relay-active,.flower-beacon-active) .flower-head h1{font-size:19px}
 #flowerGame .flower-relay{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto auto auto;gap:7px;max-width:480px}
 #flowerGame .flower-relay-map{grid-column:1;grid-row:1}
 #flowerGame .flower-relay-map~*{grid-column:1}
 #flowerGame .flower-relay-letter{padding:10px 12px}
 #flowerGame .flower-relay-dialogue{grid-template-columns:38px minmax(0,1fr);gap:8px}
 #flowerGame .flower-relay-dialogue h2{font-size:18px;margin:0 0 5px;padding-bottom:5px}
 #flowerGame .flower-relay-dialogue small{display:none}
 #flowerGame .flower-relay-quote{font-size:14px;line-height:1.5}
 #flowerGame .flower-relay-letter-actions{margin-top:8px}
 #flowerGame .flower-relay button[data-action]{font-size:13px;min-height:44px;padding:8px 4px}
 #flowerGame .flower-relay-status{font-size:13px;padding:7px 10px}
 #flowerGame .flower-relay-person{min-height:44px}
 #flowerGame .flower-relay-person .flower-relay-portrait{width:clamp(38px,6dvh,54px)}
 #flowerGame .flower-relay-person .flower-relay-name{font-size:11px;padding:2px 4px}
 #flowerGame .flower-relay-record{padding:4px 0}
 #flowerGame .flower-relay-record[open]{width:100%;max-height:70%}
}
@media(max-height:500px){
 #flowerGame:is(.flower-relay-active,.flower-beacon-active) .story-feed>.story-line:not(.date){display:none}
 #flowerGame .flower-relay{gap:6px 12px}
 #flowerGame .flower-relay-letter{padding:8px}
 #flowerGame .flower-relay-dialogue{grid-template-columns:36px minmax(0,1fr);gap:7px}
 #flowerGame .flower-relay-dialogue small{display:none}
 #flowerGame .flower-relay-dialogue h2{font-size:16px;margin:0 0 4px;padding-bottom:4px}
 #flowerGame .flower-relay-quote{font-size:13px;line-height:1.4}
 #flowerGame .flower-relay button[data-action]{min-height:40px;font-size:12px;padding:6px}
 #flowerGame .flower-relay-letter-actions{margin-top:6px}
 #flowerGame .flower-relay-status{font-size:12px;padding:6px 8px}
 #flowerGame .flower-relay-record{padding:3px 0;font-size:12px}
 #flowerGame .flower-relay-person .flower-relay-portrait{width:38px}
 #flowerGame .flower-relay-person .flower-relay-name{font-size:10px}
}

/* Stable portrait anchors and content-sized desktop panels. */
#flowerGame .flower-relay-person{width:128px;display:flex;flex-direction:column;align-items:center}
#flowerGame .flower-relay-person .flower-relay-name{max-width:128px}
@media(min-width:850px) and (min-height:750px){
 #flowerGame .flower-relay{height:auto;grid-template-rows:auto auto auto auto;gap:10px 20px}
 #flowerGame .flower-relay-record[open]{position:static;width:100%;max-height:none;padding:10px 0;background:transparent;border:0;border-top:1px solid #72573970;box-shadow:none}
}

@media(max-width:849px) and (min-height:501px), (min-height:501px) and (max-height:749px){
 #flowerGame .flower-relay-quote{min-height:84px}
 #flowerGame .flower-relay-status{min-height:54px}
}