/* Flag craft: scoped independently from the chapter progress and other puzzles. */
#flowerGame .flag-craft{width:min(100%,640px);margin:22px auto 8px}
#flowerGame .flag-workbench{position:relative;aspect-ratio:3/2;background:#4c321e url('/games/assets/flower-flag/workbench-v1.webp') center/100% 100% no-repeat;border:1px solid #846239;box-shadow:0 8px 22px #0007}
#flowerGame .flag-cloth{position:absolute;left:14%;top:14%;width:72%;height:72%}
#flowerGame .flag-taegeuk{position:absolute;left:50%;top:50%;width:42%;aspect-ratio:1;border:0;padding:0;transform:translate(-50%,-50%);background:transparent;cursor:pointer;color:#675239}
#flowerGame .flag-taegeuk svg{width:100%;height:100%;opacity:.17;filter:grayscale(1);transition:opacity .75s,filter .75s;transform:rotate(33.69deg);mix-blend-mode:multiply}
#flowerGame .flag-taegeuk span{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:700;text-shadow:0 1px 4px #fff}
#flowerGame .flag-craft.painted .flag-taegeuk svg{opacity:.94;filter:none}
#flowerGame .flag-craft.painted .flag-taegeuk span{display:none}
#flowerGame .flag-slot{position:absolute;width:26%;height:30%;min-height:42px;border:0;border-radius:3px;padding:2%;background:transparent;cursor:pointer;touch-action:manipulation}
#flowerGame .flag-slot[data-slot="0"]{left:5%;top:7%;transform:rotate(-56.31deg)}
#flowerGame .flag-slot[data-slot="1"]{right:5%;top:7%;transform:rotate(56.31deg)}
#flowerGame .flag-slot[data-slot="2"]{left:5%;bottom:7%;transform:rotate(56.31deg)}
#flowerGame .flag-slot[data-slot="3"]{right:5%;bottom:7%;transform:rotate(-56.31deg)}
#flowerGame .flag-craft.placing .flag-slot:not(.filled){outline:1px solid #a28249aa;background:#c69a4322;box-shadow:0 0 9px #dcbf7666}
#flowerGame .flag-slot svg{width:100%;height:100%;overflow:visible;stroke:#29251e;stroke-width:11;stroke-linecap:butt;mix-blend-mode:multiply;animation:flagInk .65s ease-out}
#flowerGame .flag-slot:disabled{opacity:1;cursor:default}
#flowerGame .flag-craft-tray{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:15px 0}
#flowerGame .flag-craft-piece{display:grid;place-items:center;min-width:0;aspect-ratio:1.3;border:1px solid #aa8a58;border-radius:3px;padding:18%;background:radial-gradient(ellipse at 30% 25%,#deccb0,#b7a07a);box-shadow:0 3px 8px #0006,inset 0 0 10px #70503055;cursor:pointer;touch-action:manipulation}
#flowerGame .flag-craft-piece svg{width:100%;height:100%;stroke:#29251e;stroke-width:11;stroke-linecap:butt}
#flowerGame .flag-craft-piece.picked{outline:2px solid #ecc780;outline-offset:2px;box-shadow:0 0 13px #d49d4d77}
#flowerGame .flag-craft-piece:disabled{opacity:.5;cursor:default}
#flowerGame .flag-craft-piece.used{opacity:.2}
#flowerGame .flag-craft-note{padding:15px 17px;border:1px solid #80603a;background:linear-gradient(110deg,#14100b,#22190f,#14100b);box-shadow:inset 0 0 0 4px #0e0b0833;text-align:center}
#flowerGame .flag-craft-note small{display:block;color:#a98d68;letter-spacing:.12em;font-size:10px}
#flowerGame .flag-craft-note p{margin:9px 0;min-height:40px;color:#e0c8a4;font-size:13px;line-height:1.6}
#flowerGame .flag-craft-note>span{display:block;color:#aa977d;font-size:10px;line-height:1.6}
#flowerGame .flag-craft-reset{display:block;margin:12px auto 0;min-height:44px;padding:9px 18px;border:1px solid #725737;border-radius:4px;background:#221a12;color:#c9b08a;font-size:12px;cursor:pointer}
#flowerGame .flag-craft-reset:disabled{opacity:.4;cursor:default}
#flowerGame .flag-craft.wrong .flag-workbench{animation:flagWrong .32s}
#flowerGame .flag-craft.wrong .flag-craft-note{border-color:#ad7662}
#flowerGame .flag-craft.complete .flag-workbench{box-shadow:0 0 22px #be985544,0 8px 22px #0007}
#flowerGame .flag-craft button:focus-visible{outline:2px solid #e8bb71;outline-offset:3px}
@keyframes flagInk{from{opacity:.12;filter:blur(2px)}to{opacity:1;filter:none}}
@keyframes flagWrong{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(max-width:600px){#flowerGame .flag-craft{margin-top:18px}#flowerGame .flag-craft-tray{gap:7px;margin:12px 0}#flowerGame .flag-craft-note{padding:12px 10px}#flowerGame .flag-craft-note p{font-size:12px}#flowerGame .flag-taegeuk span{font-size:9px}}
@media(prefers-reduced-motion:reduce){#flowerGame .flag-slot svg,#flowerGame .flag-craft.wrong .flag-workbench{animation:none}#flowerGame .flag-taegeuk svg{transition:none}}