/* Chapter 04: illustrated beacon map and folded correspondence. */
#beaconMap.beacon-deduction{padding:0!important;border:0;background:none;max-width:680px;margin:22px auto}
#beaconMap .beacon-paper{height:auto;aspect-ratio:1 / 1.1;border:0;background:#18130c url('/gameImgs/flower/beacon-map.webp') center/100% 100% no-repeat;box-shadow:0 14px 32px #0007;isolation:isolate}
#beaconMap #beaconNodes{position:absolute;inset:0}
#beaconMap .beacon-point{width:clamp(64px,15%,100px);min-width:0;min-height:60px;padding:0;cursor:pointer;color:#e8d8b8;overflow:visible;-webkit-tap-highlight-color:transparent}
#beaconMap .beacon-point:disabled{cursor:default;opacity:1}
#beaconMap .beacon-point:focus-visible{outline:2px solid #fff0be;outline-offset:5px;border-radius:4px}
#beaconMap .beacon-point .beacon-tower{position:relative;display:block;width:74px;height:70px;margin:auto;font-size:inherit;color:inherit}
#beaconMap .beacon-tower svg{display:none}
#beaconMap .beacon-tower::before{content:'';position:absolute;inset:0;background:url('/gameImgs/flower/beacon-tower-v2.webp') center/contain no-repeat;pointer-events:none}
#beaconMap .beacon-point .beacon-name{display:block;width:max-content;max-width:110px;margin:0 auto;padding:4px 7px;border:1px solid #9b795b70;border-radius:2px;background:linear-gradient(90deg,#201810ed,#302217f5,#201810ed);box-shadow:0 2px 5px #0005;color:#f3e3c7;font-family:Georgia,'Noto Serif KR',serif;font-size:clamp(10px,1.8vw,13px);line-height:1.4;white-space:nowrap}
#beaconMap .beacon-flame{position:absolute;z-index:2;left:50%;bottom:74%;width:18px;height:30px;transform:translateX(-50%);opacity:0;pointer-events:none}
#beaconMap .beacon-flame::before,#beaconMap .beacon-flame::after{content:'';position:absolute;bottom:0;border-radius:70% 30% 55% 45%;transform:rotate(10deg)}
#beaconMap .beacon-flame::before{inset:0;background:linear-gradient(0deg,#ffe59a 0%,#ffb638 35%,#ee671c 75%,transparent);box-shadow:0 0 16px #ff9a35}
#beaconMap .beacon-flame::after{width:8px;height:18px;left:5px;background:linear-gradient(0deg,#fff9d7,#ffdc64,transparent)}
#beaconMap .beacon-point.lit .beacon-flame{opacity:1;animation:beaconFlicker 1.3s ease-in-out infinite alternate}
#beaconMap .beacon-point.lit .beacon-tower{filter:drop-shadow(0 -5px 10px #ffad4160)}
#beaconMap .beacon-point.lit .beacon-name{border-color:#e9b567;color:#ffe8b5}
#beaconMap .beacon-point.wrong-pick .beacon-name{border-color:#c4745c;background:#5a2820;animation:wrongPoint .42s}
#beaconMap .beacon-point.pulse .beacon-tower{animation:beaconPulse .75s 2}
#beaconMap .beacon-instruction{margin:18px 0 24px;font-size:14px;line-height:1.7;color:#d9c09a;font-family:Georgia,'Noto Serif KR',serif}
#beaconMap .beacon-clues{position:relative;isolation:isolate;margin:0 3px 20px;padding:28px 28px 32px;border:0;color:#48311f;background:repeating-linear-gradient(0deg,transparent 0 3px,#75552f05 3px 4px),linear-gradient(105deg,#c9a87a,#ead5ad 25%,#dcc298 53%,#ebd8b6 54%,#cbae83);box-shadow:0 10px 20px #0005,inset 0 0 26px #78563230;border-radius:2px 5px 2px 3px;font-family:Georgia,'Noto Serif KR',serif}
#beaconMap .beacon-clues::before{content:'';position:absolute;z-index:-1;inset:8px -3px -5px 5px;border:1px solid #9c795752;background:transparent;transform:rotate(.7deg);box-shadow:0 3px 6px #0004}
#beaconMap .beacon-clues::after{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 48.6%,#76583b17 49.5%,#fff9e04d 50%,transparent 51.3%),linear-gradient(0deg,transparent 49%,#79593215 49.8%,#fff2cc55 50%,transparent 50.8%)}
#beaconMap .beacon-letter-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #77583773;padding-bottom:13px;margin-bottom:18px}
#beaconMap .beacon-letter-head small{display:block;margin-bottom:6px;color:#765337;font-size:11px;letter-spacing:2px}
#beaconMap .beacon-clues .beacon-letter-head b{color:#3f2b1d;font-size:22px;margin:0;letter-spacing:1px}
#beaconMap .beacon-seal{flex:none;display:grid;place-items:center;width:43px;height:43px;border:2px solid #9c493d96;outline:1px solid #9c493d65;outline-offset:-5px;border-radius:50%;color:#9c493d96;font-size:23px;transform:rotate(-13deg);user-select:none}
#beaconMap .beacon-clues p{position:relative;margin:12px 0;padding-left:14px;font-size:14px;line-height:1.9;word-break:keep-all;overflow-wrap:break-word}
#beaconMap .beacon-clues p::before{content:'·';position:absolute;left:0;color:#8f5d3d;font-weight:bold}
#beaconMsg{font-size:14px;line-height:1.8}
#beaconMsg small{display:block;margin-top:9px;font-size:11px;line-height:1.6;color:#9a8970}
@keyframes beaconFlicker{0%{transform:translateX(-50%) rotate(-5deg) scale(.95)}50%{transform:translateX(-50%) rotate(4deg) scaleY(1.12)}100%{transform:translateX(-50%) rotate(-2deg) scale(1.04)}}
@media(max-width:600px){#beaconMap .beacon-point .beacon-tower{width:58px;height:55px}#beaconMap .beacon-flame{bottom:74%;width:15px;height:25px}#beaconMap .beacon-point .beacon-name{font-size:10px;padding:3px 5px}#beaconMap .beacon-clues{padding:22px 19px 24px}#beaconMap .beacon-clues p{font-size:13px;line-height:1.85}#beaconMap .beacon-clues .beacon-letter-head b{font-size:20px}}
@media(prefers-reduced-motion:reduce){#beaconMap .beacon-point.lit .beacon-flame,#beaconMap .beacon-point.pulse .beacon-tower,#beaconMap.beacon-wrong .beacon-paper,#beaconMap .beacon-point.wrong-pick .beacon-name{animation:none}}



#flowerGame #beaconMap.beacon-deduction{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:10px 20px;max-width:900px;height:var(--puzzle-height,calc(100dvh - 280px));margin:8px auto}
#flowerGame #beaconMap .beacon-paper{grid-column:1;grid-row:1;width:auto;height:100%;max-width:100%;aspect-ratio:1 / 1.1;align-self:start;justify-self:center}
#flowerGame #beaconMap .beacon-instruction{grid-column:1;grid-row:2;font-size:13px;line-height:1.5;margin:0}
#flowerGame #beaconMap .beacon-record{grid-column:2;grid-row:1 / 3;position:relative;align-self:start;min-width:0;color:#e9d8b8}
#flowerGame #beaconMap .beacon-record>summary{display:none;cursor:pointer;min-height:44px;padding:10px 12px;border:1px solid #97774f;border-radius:4px;background:#302217;font-size:14px}
#flowerGame #beaconMap .beacon-clues{margin:0;padding:18px}
#flowerGame #beaconMap .beacon-letter-head{padding-bottom:9px;margin-bottom:10px}
#flowerGame #beaconMap .beacon-letter-head small{font-size:10px;margin-bottom:4px;letter-spacing:1px}
#flowerGame #beaconMap .beacon-letter-head b{font-size:20px}
#flowerGame #beaconMap .beacon-seal{width:32px;height:32px;font-size:20px}
#flowerGame #beaconMap .beacon-clues p{font-size:14px;line-height:1.65;margin:10px 0;padding-left:10px}
#flowerGame #beaconMap .beacon-point .beacon-tower{width:clamp(40px,8dvh,74px);height:clamp(38px,7.6dvh,70px)}
#flowerGame #beaconMap .beacon-point .beacon-name{font-size:12px;padding:3px 5px}
#flowerGame.flower-beacon-active #beaconMsg{min-height:0;font-size:13px;line-height:1.5;margin:6px 0;padding:8px 10px}
#flowerGame.flower-beacon-active #beaconMsg small{font-size:10px;line-height:1.4;margin-top:4px}
@media(max-width:849px) and (min-height:501px), (min-height:501px) and (max-height:749px){
 #flowerGame #beaconMap.beacon-deduction{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;gap:7px;max-width:480px}
 #flowerGame #beaconMap .beacon-record{grid-column:1;grid-row:3;width:100%}
 #flowerGame #beaconMap .beacon-record>summary{display:block;text-align:center}
 #flowerGame #beaconMap .beacon-record[open] .beacon-clues{position:absolute;bottom:48px;left:0;width:100%;z-index:5;max-height:min(65dvh,480px);overflow-y:auto;padding:16px;box-shadow:0 4px 24px #000a}
 #flowerGame #beaconMap .beacon-point .beacon-tower{width:44px;height:42px}
 #flowerGame #beaconMap .beacon-point .beacon-name{font-size:11px;padding:3px 4px}
}
@media(max-width:849px) and (max-height:500px){
 #flowerGame #beaconMap .beacon-record>summary{display:block}
 #flowerGame #beaconMap .beacon-record .beacon-clues{max-height:calc(100dvh - 165px);overflow-y:auto;padding:12px}
 #flowerGame #beaconMap .beacon-clues p{font-size:13px;line-height:1.5;margin:8px 0}
}

@media(max-height:500px){
 #flowerGame #beaconMap .beacon-record>summary{display:block}
 #flowerGame #beaconMap .beacon-record[open] .beacon-clues{position:absolute;top:48px;right:0;width:min(70vw,420px);z-index:5;max-height:calc(100dvh - 210px);overflow-y:auto;padding:12px}
 #flowerGame #beaconMap .beacon-clues p{font-size:13px;line-height:1.5;margin:8px 0}
}
#flowerGame #beaconMap .beacon-record>summary::after{content:' ＋'}
#flowerGame #beaconMap .beacon-record[open]>summary::after{content:' −'}

@media(min-width:850px) and (min-height:750px){
 #flowerGame #beaconMap.beacon-deduction{height:auto}
}