@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)}}.rails .sign{margin-right:auto}.rails .work-lanes{height:44%}.rail-message{width:43%;margin:0 auto;background:#fff5dbef}.rail-message h2{font-size:clamp(17px,1.8vw,30px)}.track{position:absolute;left:5%;right:5%;bottom:3%;height:12vh;display:flex;justify-content:flex-end;gap:1.5vw;border-top:8px ridge #996b42;border-bottom:8px ridge #a77b4a;background:repeating-linear-gradient(90deg,#684a36 0 2%,transparent 2% 5%);align-items:center}.train{position:absolute;width:20%;height:19vh;object-fit:contain;left:0;bottom:2vh;transition:left 1.8s ease}.connected .train{left:78%}.bridge-slot{width:16%;height:10vh;background:#e3f0eadc;border:3px dashed #8caaa3;border-radius:1vh;display:flex;flex-direction:column;text-align:center;justify-content:center}.bridge-slot small{font-size:clamp(10px,.9vw,15px)}.bridge-slot b{font:clamp(20px,2.5vw,42px) Jua}.bridge-slot.built{background:#dcc69a;border:4px ridge #ac8254}.sequence{display:flex;gap:.5vw;padding:1vh .4vw;background:#71533b}.sequence span{flex:1;padding:1vh .1vw;background:#fff0c6;border-radius:.6vh;font-size:clamp(17px,1.9vw,31px)}.sequence .unknown{background:#d69b44;color:#fff}.rails .number-options{grid-template-columns:repeat(4,minmax(0,1fr));margin:1vh 0}.rails .feedback{flex:1}.rails .work-panel{background:linear-gradient(#ad8660,#836344);border-color:#ac835c}.rails .goal-done{background:#fff5da;border-radius:1vh}.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)}.rails{background-image:url(/assets/review-bg.png);background-size:100% 100%}.rails .workshop-header{height:14%}.rails .work-stage{height:39%}.rails .work-lanes{height:45%;gap:0;padding:0 .4vw}.rails .sign{position:absolute;left:1%;top:2.2vh;width:23%;height:10vh;margin:0;padding:0;display:grid;place-items:center;background:none;border:0;box-shadow:none;color:#ffedba}.rails .sign h1{font-size:3.1vw;text-shadow:0 2px 2px #342016}.rails .rail-message{position:absolute;top:2vh;left:7%;width:25%;padding:.8vh 1vw;background:linear-gradient(110deg,#6c482e,#3d281c);border:4px ridge #b78c57;color:#ffefca;box-shadow:0 3px 4px #30251877}.rails .rail-message h2{font-size:1.4vw}.rails .rail-message p{font-size:.9vw;margin:.3vh 0}.rails .track{position:absolute;left:39.7%;right:34%;top:24.7vh;bottom:auto;height:5.8vh;display:block;border:0;background:none}.rails .bridge-slot{position:absolute;top:0;width:20.5%;height:100%;border:2px dashed #e8f8f1;border-radius:0;background:#e6fff91a;color:#fff;text-shadow:0 1px 3px #264132;display:grid;place-items:center}.rails .bridge-slot:nth-child(2){left:0}.rails .bridge-slot:nth-child(3){left:20.5%}.rails .bridge-slot:nth-child(4){left:75%;width:12.5%;top:-.7vh}.rails .bridge-slot:nth-child(5){left:87.5%;width:12.5%;top:-.7vh}.rails .bridge-slot small{position:absolute;top:calc(100% + .5vh);left:-10%;width:120%;font-size:.8vw;white-space:nowrap;text-align:center}.rails .bridge-slot b{font-size:2vh}.rails .bridge-slot.built{background:url(/assets/review-track.png) center/100% 175% no-repeat;border:0;box-shadow:none}.rails .bridge-slot.built b{position:absolute;top:100%;background:#385338e8;border-radius:.5vh;padding:0 .3vw;z-index:2}.rails .bridge-slot.built small{top:calc(100% + 2.4vh)}.rails .train{position:absolute;left:-127%;width:87%;height:24vh;bottom:-3vh;object-fit:contain;filter:drop-shadow(0 3px 2px #35231677);transition:left 2s ease,transform 2s ease;z-index:4;pointer-events:none}.rails .connected .train{left:177%;transform:translateY(-3vh)}.rails .work-panel{display:block;border:0;background:none;box-shadow:none;padding:0;gap:0}.rails .work-panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:url(/assets/review-panels.png) var(--sprite-x) 45%/400% 125% no-repeat;pointer-events:none}.rails .panel-label{position:absolute;top:9%;left:15%;right:15%;height:12%;min-height:0;margin:0;padding:0;background:none;box-shadow:none;color:#4c3019}.rails .panel-label b{position:absolute;left:0;top:0;width:21%;height:100%;display:grid;place-items:center;color:#fff4d8;text-shadow:0 2px 1px #312014;font-size:3.2vh}.rails .panel-label span{position:absolute;left:44%;right:-5%;height:100%;display:grid;place-items:center;font-size:1.5vh}.rails .panel-label small{display:none}.rails .sequence{position:absolute;left:18%;right:15%;top:26%;height:16.5%;padding:.3vh .1vw;display:flex;gap:.4vw;border:0;border-radius:0;background:none}.rails .sequence span{position:relative;flex:1;display:grid;place-items:center;font:3.2vh Jua;isolation:isolate;padding:0;border:0;border-radius:.5vh;background:linear-gradient(#fff4db,#e9cfa5);box-shadow:inset 0 0 0 2px #c5a97c,0 2px 1px #28170e;color:#352719}.rails .sequence .unknown{background:linear-gradient(#956738,#5a3c23);color:#fff3b5;outline:2px solid #ffd56e;outline-offset:-2px;box-shadow:0 0 6px #ffca6077}.rails .number-options{position:absolute;left:18%;right:15%;top:48%;height:15%;margin:0;gap:.4vw;grid-template-columns:repeat(4,minmax(0,1fr))}.rails .number-options button{min-height:0;padding:0;font-size:2.3vh;line-height:1;--key-x:0%;--key-y:22%}.rails .work-actions{position:static;margin:0;display:block}.rails .work-actions .confirm,.rails .work-panel>.confirm{position:absolute;left:31%;width:39%;top:70%;height:12%;min-height:0;padding:0;border:0!important;background:none!important;box-shadow:none!important;color:#fff5d6;text-shadow:0 1px 2px #21180e;font-size:1.95vh;display:grid;place-items:center}.rails .work-actions .confirm:before,.rails .work-panel>.confirm:before{display:none}.rails .work-actions .confirm:not(:disabled),.rails .work-panel>.confirm:not(:disabled){filter:drop-shadow(0 0 5px #ffe49a);outline:1px solid #ffe8a5;outline-offset:-3px;border-radius:3vh}.rails .work-actions .aux{position:absolute;left:42%;width:18%;top:84%;height:6%;min-height:0;font-size:1.2vh;padding:0}.rails .feedback{position:absolute;left:6%;right:6%;top:93%;height:6%;min-height:0;font-size:1.2vh;line-height:1.2;padding:.2vh;color:#fff6da;background:#352418dd;border-radius:.5vh;display:grid;place-items:center}.rails .goal-done{position:absolute;left:18%;right:15%;top:26%;height:38%;background:#fff0c6ed;border:2px solid #ad864c;border-radius:1vh;padding:1vh;font-size:1.5vh}.rails .goal-done strong{font-size:2.4vh}.rails .goal-done p{margin:0}.rails .work-footer{height:2%;font-size:1.1vh;background:#35231677}.rails .work-actions .confirm,.rails .work-panel>.confirm{top:66%}.rails .work-actions .aux{top:82%;height:10%;font-size:1.4vh}.rails[data-players="2"] .work-lanes{padding:0 13vw;gap:7vw}.rails[data-players="3"] .work-lanes{padding:0 3vw;gap:1.5vw}.rails .connected .train{left:117%;transform:translateY(-7vh)}.rails .bridge-slot:not(.built) b{position:relative;z-index:2;font-family:Jua,sans-serif;font-size:clamp(22px,3.5vh,40px);line-height:1;color:#fff5ce;-webkit-text-stroke:.6px #77502e;paint-order:stroke fill;text-shadow:0 -1px 0 #ffffff,1px 1px 0 #c59b56,2px 2px 0 #a17639,3px 3px 0 #78512e,4px 4px 0 #4b3528,5px 6px 4px #142e3dcc;transform:translateY(-2px) rotate(-7deg);filter:drop-shadow(0 0 3px #fff3c16b)}.rails .bridge-slot:not(.built){background:linear-gradient(145deg,#edfaff35,#52768738);box-shadow:inset 0 1px #fff8,inset 0 -2px #24495766,0 3px 4px #16354544}.rails .rail-clock{position:absolute;z-index:6;top:2vh;left:42%;width:22%;padding:.5vh 1vw;border:3px ridge #dcb675;border-radius:1.2vh;background:linear-gradient(#65442b,#33261c);color:#fff0ba;text-align:center;font:5vh Jua,sans-serif;text-shadow:0 2px 2px #000;box-shadow:0 4px 8px #1c160f77;font-variant-numeric:tabular-nums}.rails .rail-clock small{display:block;font:1.5vh Jua,sans-serif;color:#fff5df}.rails .rail-clock.urgent{color:#ffb590;border-color:#ffbd75}.rails-race .panel-label span{left:30%;right:-5%;font:2.1vh Jua,sans-serif;color:#4c3019}.rails-race .bridge-slot.built b{font:1.7vh Jua,sans-serif;white-space:nowrap}.rails-race[data-players="2"] .bridge-slot:nth-child(2){left:0;width:41%}.rails-race[data-players="2"] .bridge-slot:nth-child(3){left:75%;width:25%;top:-.7vh}.rails-race[data-players="3"] .bridge-slot:nth-child(4){left:75%;width:25%}.rails-race .results .winner{background:#ffe6a0;border-color:#b77a23;box-shadow:0 0 0 2px #ffe4a5}.rails .bridge-slot:not(.built){border:0;background:none;box-shadow:none;outline:0;overflow:visible}.rails .bridge-slot .question-sculpture{display:block;position:absolute;left:50%;top:50%;height:8vh;width:auto;max-width:none;transform:translate(-50%,-60%);object-fit:contain;filter:drop-shadow(2px 4px 2px #17334288);pointer-events:none}.rails .bridge-slot:not(.built) small{top:calc(100% + 1vh);text-shadow:0 1px 3px #173342,0 0 3px #173342}.rails .work-panel{container-type:inline-size}.rails .sequence{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));left:18.5%;right:16%;top:26%;height:16%;gap:1.5cqw;padding:.5vh 0}.rails .sequence span{min-width:0;width:100%;font-family:Jua,sans-serif;font-size:min(3.1vh,8.2cqw);font-weight:400;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap}.rails .number-options{left:18.5%;right:16%;top:48%;height:14.5%;margin:0;gap:1.5cqw;align-items:stretch}.rails .number-options button{min-width:0;width:100%;display:grid;place-items:center;padding:0 1cqw;font-family:Jua,sans-serif;font-size:min(2.7vh,7.2cqw);font-weight:400;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap}.rails .panel-label{left:0;right:0;top:8%;height:14%}.rails .panel-label b{left:15.5%;width:14%;top:0;height:100%;font:min(3.3vh,8.8cqw)/1 Jua,sans-serif;letter-spacing:-.03em}.rails .panel-label span{left:43%;right:16%;top:0;height:100%;font:min(2.1vh,5.8cqw)/1 Jua,sans-serif;white-space:nowrap}.rails .work-actions .confirm{left:32%;width:37%;top:66%;height:13%;font:min(2.4vh,6.4cqw)/1 Jua,sans-serif;letter-spacing:0;display:grid;place-items:center;padding:0 0 .3vh}.rails .work-actions .aux{font:min(1.8vh,4.8cqw)/1 Jua,sans-serif}.rails .work-panel:nth-child(1) .panel-label b{left:18.5%}.rails .work-panel:nth-child(1) .work-actions .confirm{left:34%}.rails .work-panel:nth-child(3) .sequence,.rails .work-panel:nth-child(3) .number-options{left:16%;right:18%}.rails .work-panel:nth-child(4) .sequence,.rails .work-panel:nth-child(4) .number-options{left:16%;right:18.5%}.rails .bridge-slot.built{background:none;border:0;box-shadow:none}.rails .bridge-deck{position:absolute;left:-3%;top:-.3vh;width:106%;height:4.7vh;overflow:hidden;filter:drop-shadow(0 2px 1px #32201266)}.rails .bridge-slot.built small{top:calc(100% + 1vh)}.rails .track .train{transition:none}.rails .track.departing .train{animation:rail-departure 3.2s ease-in-out both}@keyframes rail-departure{0%{left:-127%;transform:translateY(0);opacity:1}80%{left:125%;transform:translateY(-4vh);opacity:1}to{left:153%;transform:translateY(-6vh) scale(.65);opacity:0}}.rails .panel-label span{left:45%;right:14%;display:flex;align-items:center;justify-content:center;text-align:center;padding:0;transform:none}.rails .work-panel:nth-child(1) .panel-label span{left:47%;right:12%}.rails .work-panel:nth-child(3) .panel-label span{left:44%;right:15%}.rails .work-panel:nth-child(4) .panel-label span{left:43%;right:16%}
