@import"https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@500;700;900&display=swap";html,body,#root{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Noto Sans KR,Malgun Gothic,sans-serif;background:#254246}button{font:inherit;cursor:pointer;border:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible{outline:4px solid #0369a1;outline-offset:2px}button:active:not(:disabled){transform:translateY(2px)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#123e3ba6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:grid;place-items:center;padding:2vw}.dialog{width:min(760px,85vw);max-height:94dvh;overflow:auto;background:#fff8e8;border:7px solid #ddc393;border-radius:28px;padding:3vh 3vw;box-shadow:0 20px 70px #14292299;color:#3d4e40}.dialog h2{font:clamp(28px,3vw,42px) Jua,sans-serif;margin:1vh 0 2vh}.dialog li{font-size:clamp(16px,1.5vw,23px);padding:.7vh 0;line-height:1.6}.dialog p{font-size:clamp(13px,1.1vw,18px)}.dialog .primary{width:100%;font-size:clamp(20px,1.7vw,28px);margin-top:1vh;min-height:64px;background:linear-gradient(#ffce6d,#ec963a);box-shadow:0 4px #946124;border:2px solid #fff2c0;border-radius:1.2vh;color:#503917;font-weight:900;padding:1vh .5vw}.results{display:flex;gap:10px;margin:20px 0}.results>div{flex:1;border:3px solid;border-radius:15px;display:grid;text-align:center;padding:15px}.results strong{font-size:36px}@media(max-height:600px){.dialog{padding:2vh 3vw}.dialog li{padding:0}}*{box-sizing:border-box}.workshop{height:100dvh;display:flex;flex-direction:column;background:url(/assets/bg.png) center/cover;position:relative;overflow:hidden;color:#463a2d}.workshop-header{height:15%;flex-shrink:0;display:flex;justify-content:center;align-items:center;position:relative;padding:1vh 2vw}.sign{background:linear-gradient(#936b42,#533d2d);border:5px ridge #d4ae70;border-radius:1.6vh;box-shadow:0 5px #352b2488;padding:.8vh 2.5vw;color:#fff1c4}.sign h1{font:clamp(28px,3.3vw,56px) Jua,sans-serif;margin:0;text-shadow:0 3px #4a3525}.tools{position:absolute;right:1vw;top:1vh;display:flex;gap:.4vw;font-size:clamp(10px,.9vw,15px)}.tools button,.tools>span{background:#fff6dfdf;color:#345053;border:1px solid #cab88a;border-radius:1vh;padding:.5vh .6vw;white-space:nowrap}.work-stage{height:37%;flex-shrink:0;position:relative;padding:1vh 3vw;min-height:0}.work-lanes{height:46%;display:grid;grid-template-columns:repeat(var(--players),minmax(0,1fr));gap:.8vw;padding:0 1vw 1vh;flex-shrink:0;min-height:0}.work-panel{min-width:0;min-height:0;position:relative;display:flex;flex-direction:column;gap:.8vh;border:5px solid var(--tint);border-radius:2vh;background:linear-gradient(120deg,#fff9e9f5,#e5d8bdf2);box-shadow:inset 0 0 0 2px #fff9,0 5px #4b3c3166;padding:1vh .8vw;isolation:isolate}.panel-label{display:flex;align-items:center;justify-content:space-between;gap:.3vw;border-radius:1vh;background:linear-gradient(#fff2,#0001),var(--tint);color:#fff;padding:.4vh .5vw;min-height:4.5vh;margin:-1.1vh -.65vw .5vh;font-weight:900;font-size:clamp(12px,1.15vw,19px);box-shadow:0 3px #5d574755}.panel-label b{font:clamp(20px,2vw,34px) Jua}.panel-label small{font-size:.72em}.work-panel button{touch-action:manipulation}.prompt-box,.sequence{background:#fff8e9;border:2px solid #c9b994;border-radius:1vh;padding:.7vh .5vw;text-align:center;font-weight:700;font-size:clamp(14px,1.3vw,22px);line-height:1.45}.number-options,.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6vw}.options button,.number-options button,.key{min-height:5.8vh;border:2px solid #fff8;border-radius:1vh;background:linear-gradient(#fffdf5,#e7daba);box-shadow:0 4px #a78d68;color:#403a31;font:700 clamp(15px,1.5vw,25px)/1.3 "Malgun Gothic","Noto Sans KR",sans-serif;padding:.7vh .3vw}.options button.selected,.number-options button.selected,.key.selected{background:linear-gradient(#fff4a8,#ffd370);outline:3px solid var(--tint);outline-offset:-2px}.confirm,.aux{border:2px solid #fff8;border-radius:1.3vh;padding:.7vh .4vw;min-height:5.8vh;background:linear-gradient(#fff3,#0001),var(--tint,#4b9f77);box-shadow:inset 0 2px #fff6,0 4px #4d655c;color:#fff;font-weight:900;font-size:clamp(13px,1.2vw,21px)}.confirm:disabled,.aux:disabled{background:#c6c7b6;color:#737969;box-shadow:0 3px #999c8d;cursor:default}.aux{background:linear-gradient(#fff1a0,#e4b64d);color:#584320;box-shadow:0 4px #9a7b36}.work-actions{display:flex;gap:.5vw;margin-top:auto;flex-shrink:0}.work-actions>button{flex:1;min-width:0}.feedback{min-height:3.8vh;line-height:1.4;font-size:clamp(11px,.96vw,16px);padding:.4vh .3vw;text-align:center;color:#36544b;font-weight:700;background:#fffbeecc;border-radius:.8vh;display:flex;align-items:center;justify-content:center}.work-footer{height:2%;text-align:center;font-size:clamp(9px,.8vw,14px);color:#fff;text-shadow:0 1px 3px #000;background:#243e4455;flex-shrink:0}.atlas{width:100%;height:100%;display:block;overflow:hidden}.shared-board{background:#fff7e6ef;border:4px ridge #c7ac79;border-radius:1.4vh;padding:1vh 1.5vw;box-shadow:0 4px #66523777;text-align:center}.shared-board h2{font:clamp(19px,2vw,34px) Jua;margin:.4vh 0}.shared-board p{font-size:clamp(12px,1.1vw,19px);margin:.5vh 0}.goal-done{flex:1;display:grid;place-content:center;text-align:center;color:#417257;gap:1vh;font-size:clamp(14px,1.3vw,22px)}.goal-done strong{font:clamp(25px,2.7vw,44px) Jua}.slot-strip{display:flex;gap:.5vw;justify-content:center;align-items:center}.slot-strip span{background:#fff9e7;border:2px solid #c7b995;border-radius:.6vh;padding:.7vh .5vw;min-width:3vw;font:700 clamp(20px,2vw,34px) "Malgun Gothic",sans-serif;text-align:center}.slot-strip .empty{border-style:dashed;color:#ad9c7e;background:#fff5c3}.status-badge{background:#fff9e6;border:2px solid #cab480;border-radius:2vh;padding:.4vh 1vw;font-size:clamp(12px,1.1vw,19px);font-weight:900}.gauge-bottle{width:100%;height:100%;overflow:visible}@media(max-height:650px){.tools>span{display:none}.work-panel{gap:.5vh;padding:.8vh .7vw}.feedback{font-size:11px;min-height:3.5vh}.sign h1{font-size:clamp(23px,3vw,40px)}}.sentence-photo{height:100vh;overflow:hidden;background:linear-gradient(#31aef0aa,#8be1ff55),url(/assets/bg.png) center/cover;color:#3d2417}.sentence-photo .sign{background:#f3b44e;color:#47290f}.sentence-photo .sign h1{text-shadow:0 2px 0 #fff2bd,0 4px 0 #8f501b}.photo-stage{height:49vh;display:grid;grid-template-columns:minmax(320px,42vw) 1fr;grid-template-rows:auto 1fr auto;gap:.7vh 1vw;padding:1vh 2vw .8vh;position:relative}.mission-stats{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:2vw;width:min(850px,78vw);margin:auto;padding:.45vh 2vw;background:#fff2d7e8;border:4px solid #80552f;border-radius:2vh;box-shadow:0 4px #3e2b1d;font:clamp(13px,1.25vw,22px) Jua}.mission-stats strong{color:#bf3f2e}.mission-stats time{font-size:1.3em;color:#17617a}.mission-stats .urgent{color:#e12f2f;animation:pulse .7s infinite}.scene-card{grid-row:2/4;align-self:stretch;min-height:0;border:7px solid #f7d58c;border-radius:2vh;box-shadow:0 0 0 4px #694120,0 8px 15px #1f4a5c66;overflow:hidden;background:#fff}.scene-card img{width:100%;height:100%;display:block;object-fit:cover}.sentence-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7vh .7vw;align-self:center}.sentence-strip>div{min-height:8.3vh;padding:.5vh .6vw;background:linear-gradient(#fffdf5,#f7e3bd);border:3px solid #946b3e;border-radius:1.2vh;box-shadow:inset 0 0 0 2px #fff9e7,0 4px #594026;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.sentence-strip small{font:clamp(11px,.9vw,15px) Jua;color:#9b562d}.sentence-strip strong{font:clamp(16px,1.45vw,25px) Jua;line-height:1.15}.sentence-strip .filled{background:linear-gradient(#efffd6,#c9f2ae);border-color:#438c56;animation:cardIn .3s ease-out}.mission-message{margin:0;align-self:end;text-align:center;padding:.6vh 1vw;background:#243f4be8;color:#fff;border-radius:1vh;font:clamp(12px,1vw,17px) Jua}.choice-lanes{height:38vh;display:grid;grid-template-columns:repeat(var(--players),minmax(0,1fr));gap:.55vw;padding:0 .55vw .7vh}.sentence-photo .work-panel{min-width:0;padding:.7vh .55vw;background:linear-gradient(145deg,#fff5d8e8,#dbb977e8);border:5px ridge #a46b32;border-radius:1.4vh;box-shadow:0 6px 12px #253b4866}.sentence-photo .work-panel h2{min-height:4.2vh;font-size:clamp(15px,1.45vw,25px);display:flex;align-items:center;justify-content:center}.role-switcher{display:flex;gap:.35vw}.role-switcher button{flex:1;padding:.35vh;background:#e9cf9f;border:2px solid #a57e45;border-radius:.7vh;font-weight:800}.role-switcher .active{background:#fff2b8;outline:2px solid var(--tint)}.photo-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75vh .45vw;flex:1;align-content:center}.photo-choices button{min-height:7.1vh;padding:.5vh .35vw;border:3px solid #8f6a3e;border-radius:1.1vh;background:linear-gradient(#fffdf2,#f0d6a6);box-shadow:inset 0 0 0 2px #fff,0 4px #5b432b;font:clamp(14px,1.22vw,22px) Jua;line-height:1.08;color:#402a19;white-space:normal}.photo-choices button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.05)}.photo-choices button:disabled{opacity:.58}.photo-choices .selected{opacity:1;background:linear-gradient(#e8ffd5,#a8e989);border-color:#30874b;color:#18582e}.photo-choices .wrong{animation:shake .5s;background:#ffd7d2;border-color:#d73c32}.role-help{text-align:center;padding:.35vh .2vw;font-size:clamp(10px,.85vw,14px);color:#593a23}.photo-reveal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:grid;place-items:center;background:#142d40cc;animation:revealFade 1.45s both;pointer-events:none}.photo-reveal>div{width:min(920px,82vw);background:#fff1ca;border:9px solid #f1b957;border-radius:2.5vh;box-shadow:0 0 0 5px #573a22,0 22px 70px #0009;overflow:hidden;animation:photoShrink 1.45s cubic-bezier(.2,.8,.25,1) both;position:relative}.photo-reveal span{position:absolute;top:1.3vh;left:1.2vw;background:#e24d3f;color:#fff;border:4px solid white;border-radius:2vh;padding:.6vh 1.2vw;font:clamp(18px,2vw,34px) Jua;box-shadow:0 3px 8px #0006}.photo-reveal img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}.photo-reveal p{margin:0;padding:.8vh;text-align:center;font:clamp(17px,1.6vw,28px) Jua;color:#57351d}.cooperative-result{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4vh;text-align:center}.cooperative-result h2{margin:0;font:clamp(42px,5vw,76px) Jua;color:#315342}.cooperative-result .primary{min-width:240px}@keyframes photoShrink{0%{transform:scale(1.13);opacity:0}14%{transform:scale(1);opacity:1}72%{transform:scale(1);opacity:1}to{transform:scale(.63) translate(-34vw,-23vh);opacity:0}}@keyframes revealFade{0%,78%{opacity:1}to{opacity:0}}@keyframes cardIn{0%{transform:scale(.8)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}@keyframes pulse{50%{transform:scale(1.08)}}@media(max-width:900px){.photo-stage{grid-template-columns:39vw 1fr}.sentence-strip>div{min-height:7.7vh}.photo-choices button{font-size:clamp(12px,1.45vw,18px)}}.work-panel{--sprite-x:0%}.work-panel:nth-child(2){--sprite-x:33.333333%}.work-panel:nth-child(3){--sprite-x:66.666667%}.work-panel:nth-child(4){--sprite-x:100%}.workshop .work-panel :where(.key,.confirm,.aux,.options button,.number-options button){position:relative;isolation:isolate;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:1.5vh;color:#382c20;padding:.8vh .55vw;font-weight:900;--key-x:0%;--key-y:22%}.workshop .work-panel :where(.key,.confirm,.aux,.options button,.number-options button):before{content:"";position:absolute;top:-.2vh;right:-.2vw;bottom:-.2vh;left:-.2vw;z-index:-1;background:url(/assets/controls.png) var(--key-x) var(--key-y)/300% 280% no-repeat;pointer-events:none}.workshop .work-panel .confirm{--key-x:0%;--key-y:82%;color:#fff;text-shadow:0 1px 2px #17472d}.workshop .work-panel .aux{--key-x:50%;--key-y:82%}.workshop .work-panel :where(.key,.confirm,.aux,.options button,.number-options button):disabled{opacity:.6;filter:saturate(.45);color:#3b443e;text-shadow:none}.workshop .work-panel :where(.key,.options button,.number-options button).selected{outline:3px solid #fff171;outline-offset:-4px;filter:brightness(1.08)}.work-panel button:focus-visible{outline:3px solid #24c6ff!important;outline-offset:2px}.workshop .feedback{box-shadow:none}.workshop .work-panel :where(.key,.confirm,.aux,.options button,.number-options button){display:grid;place-items:center;padding:.2vh .4vw;line-height:1.15}.workshop .work-panel :where(.key,.confirm,.aux,.options button,.number-options button):disabled{opacity:.72;color:#fff9e9;text-shadow:0 1px 2px #251b13;filter:saturate(.35)}.sentence .workshop-header{height:16%}.sentence .work-stage{height:28%;padding:0 2vw}.sentence .work-lanes{height:54%;gap:.5vw;padding:0 1vw}.sentence .sentence-rail{height:20vh;margin:0 auto;background:url(/assets/rail.png) center/100% 140% no-repeat;border:0;padding:3.8vh 4vw 4.5vh;box-shadow:none;gap:1vw}.sentence .sentence-rail>div{font-size:2.3vh;border:1px solid #b6986d;background:#ffefcc}.sentence .sentence-rail .empty{background:#39282050;border:1px dashed #af9470;color:#f4dfb9}.sentence .shared-board{padding:.2vh 1vw;border:1px solid #b39872}.sentence .shared-board p{font-size:1.3vh;margin:.3vh}.sentence .shared-board small{font-size:1.1vh}.sentence .work-panel{background:none;border:0;box-shadow:none;padding:0;display:block}.sentence .work-panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:url(/assets/reference-art.png) var(--sprite-x) 48%/400% 219% no-repeat}.sentence .panel-label{position:absolute;left:12%;right:14%;top:7%;height:7%;min-height:0;margin:0;padding:0;background:none;box-shadow:none;color:#ffedcf}.sentence .panel-label b{font-size:2.3vh}.sentence .panel-label span{font-size:1.65vh}.sentence .role-tabs{position:absolute;top:16%;left:19%;right:18%;height:5%;min-height:0}.sentence .role-tabs button{background:#eadcc3e6;border:0;font-size:1.2vh;padding:0}.sentence .word-drawer{position:absolute;left:18%;right:22%;top:23%;height:40%;display:block}.sentence .word-drawer button{position:absolute;left:0;width:100%;height:30%;min-height:0;padding:0;background:none;border:0;box-shadow:none;font-size:2.1vh;color:#3e291c}.sentence .word-drawer button:nth-child(1){top:0}.sentence .word-drawer button:nth-child(2){top:31%}.sentence .word-drawer button:nth-child(3){top:66%;height:34%}.sentence .word-drawer button.selected{background:#ffe78380;outline:2px solid #daa94b;border-radius:.3vh}.sentence .position-controls{position:absolute;left:12%;right:12%;top:67%;height:6%;gap:.3vw}.sentence .position-controls button{min-height:0;padding:0;font-size:1.4vh;color:#49321c;background:#f5e7cbe8;border:1px solid #d0ab72}.sentence .feedback{position:absolute;top:76%;left:8%;right:8%;height:5%;min-height:0;font-size:1.1vh;background:#fff1d8e8;padding:.1vh}.sentence .work-panel>.confirm{position:absolute;top:86%;left:13%;width:74%;height:7%;min-height:0;font-size:1.55vh;padding:0}.sentence .work-footer{background:#321d1688}.sentence .role-tabs:has(button:only-child){display:none}.sentence .panel-label{justify-content:center}.sentence .panel-label b{position:absolute;left:-1vw}.sentence .panel-label span{font-size:2vh}.sentence .word-drawer button{font-size:2.4vh}.sentence .position-controls button{font-size:1.7vh}.sentence .feedback{font-size:1.3vh}