*{margin:0;padding:0;box-sizing:border-box}body,html{width:100%;height:100%;overflow:hidden;background:#0a1628;font-family:'Source Han Sans SC','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif}.scale-wrapper{position:fixed;width:1920px;height:1080px;-webkit-transform-origin:top left;transform-origin:top left;top:0;left:0}.guide-page{position:absolute;width:1920px;height:1080px;overflow:hidden;background:#0c2a6a}.guide-page .full-bg{position:absolute;top:0;left:0;width:1920px;height:1080px;display:block;object-fit:cover}.guide-page .esph-logo{position:absolute;right:28px;top:18px;width:89px;height:95px;z-index:10}.guide-main{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center;z-index:10;width:1100px}.guide-title{font-size:100px;font-weight:900;color:#fff;letter-spacing:4px;line-height:1.2;margin-bottom:36px;text-shadow:0 0 30px rgba(0,204,255,.6),0 4px 20px rgba(0,0,0,.5)}.guide-desc{font-size:35px;color:#fff;line-height:1.9;margin-bottom:60px;font-weight:400}.guide-desc p{margin:0}.btn-start{display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:389px;height:93px;background:url('../images/btn-start.svg') center/100% 100% no-repeat;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-transition:opacity .2s,-webkit-transform .1s;transition:opacity .2s,transform .1s}.btn-start:hover{opacity:.9;-webkit-transform:translateY(-2px);transform:translateY(-2px)}.btn-start:active{-webkit-transform:translateY(1px);transform:translateY(1px);opacity:.8}.challenge-page{position:absolute;width:1920px;height:1080px;overflow:hidden;background:#0c2a6a;display:none}.challenge-page .full-bg{position:absolute;top:0;left:0;width:1920px;height:1080px;display:block;object-fit:cover}.content-box{position:absolute;top:131px;left:28px;width:1864px;height:925px;background:#eff6ff;border-radius:20px;z-index:1}.nav-bar{position:absolute;top:0;left:0;width:1920px;height:131px;z-index:10}.nav-bar .esph-logo{position:absolute;right:28px;top:18px;width:89px;height:95px}.nav-title{position:absolute;left:213px;top:36px;font-size:50px;font-weight:400;color:#eff6ff;white-space:nowrap;line-height:1}.btn-back{position:absolute;left:27px;top:33px;width:133px;height:62px;background:url('../images/btn-back.svg') center/100% 100% no-repeat;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-transition:opacity .2s;transition:opacity .2s}.btn-back:hover{opacity:.85}.pyramid-section{position:absolute;top:205px;left:213px;width:797px;height:800px;z-index:5}.pyramid-container{position:relative;width:797px;height:782px}.pyramid-visual{position:absolute;top:0;left:0;width:797px;height:782px;pointer-events:none;z-index:1}.pyramid-layer{position:absolute;left:0;width:797px;display:block}.layer-img-6{top:0;height:115px}.layer-img-5{top:115px;height:127px}.layer-img-4{top:242px;height:153px}.layer-img-3{top:395px;height:170px}.layer-img-2{top:562px;height:173px}.layer-img-1{top:741px;height:41px}.drop-zone{position:absolute;left:0;width:545px;z-index:2;cursor:default;border-radius:4px;-webkit-transition:background-color .2s;transition:background-color .2s}.drop-zone.drag-over{background-color:rgba(0,204,255,.3);outline:#00ccff dashed 2px}.layer-6{top:0;height:115px}.layer-5{top:115px;height:127px}.layer-4{top:242px;height:153px}.layer-3{top:395px;height:170px}.layer-2{top:562px;height:173px}.layer-1{top:741px;height:41px}.placed-items{position:absolute;inset:0;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:flex-end;align-items:flex-end;-webkit-justify-content:center;justify-content:center;gap:6px 10px;padding:8px 18px 12px;z-index:3;pointer-events:none}.placed-tag{display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:66px;height:44px;background:rgba(255,255,255,.45);border:2px solid rgba(255,255,255,.9);border-radius:10px;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);-webkit-animation:.25s tagFadeIn;animation:.25s tagFadeIn}.placed-tag img{max-width:58px;max-height:36px;object-fit:contain;display:block}@-webkit-keyframes tagFadeIn{from{opacity:0;-webkit-transform:scale(.8);transform:scale(.8)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes tagFadeIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.food-grid-container{position:absolute;top:334px;left:1072px;width:615px;height:576px;z-index:5}.food-grid{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:28px 40px;width:100%;height:100%}.food-card{width:175px;height:123px;background:rgba(212,212,212,.95);border:4px solid #0cf;border-radius:10px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;cursor:-webkit-grab;cursor:grab;position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:-webkit-transform .15s,box-shadow .15s,opacity .3s;transition:transform .15s,box-shadow .15s,opacity .3s}.food-card:hover:not(.placed){-webkit-transform:translateY(-3px);transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,204,255,.4)}.food-card.dragging{opacity:.4}.food-card.placed{opacity:.28;pointer-events:none;cursor:default;border-color:#aaa}.food-card .food-img-wrap{width:130px;height:78px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.food-card .food-img-wrap img{max-width:120px;max-height:75px;object-fit:contain;display:block;pointer-events:none}.food-card .food-name{font-size:22px;color:#383838;text-align:center;line-height:1;margin-top:2px}.success-panel{position:absolute;top:100px;left:26px;width:562px;height:376px;display:none;-webkit-animation:.4s modalSlideIn;animation:.4s modalSlideIn}.success-panel.visible{display:block}.success-bg{position:absolute;top:0;left:0;width:100%;height:100%;display:block;pointer-events:none}.success-content{position:relative;z-index:1;padding:40px 28px 0;text-align:center}.success-title{font-size:70px;font-weight:900;color:#00baad;margin-bottom:20px;letter-spacing:4px}.success-text{font-size:30px;color:#383838;line-height:1.5;text-align:justify;margin:0 auto;width:506px}.bottom-bar{position:absolute;bottom:24px;left:55px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;z-index:10}.btn-mute{width:36px;height:43px;background:0 0;border:none;position:relative;cursor:pointer;padding:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;opacity:.75;-webkit-transition:opacity .2s;transition:opacity .2s}.btn-mute:hover{opacity:1}.btn-mute img{width:36px;height:43px;display:block}.btn-mute.is-muted{opacity:.4}.btn-mute.is-muted::after{content:'';position:absolute;top:20px;left:-5px;width:46px;height:4px;background:#ff3b30;border-radius:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg);pointer-events:none}.bottom-label{font-size:30px;color:#1a1a1a;white-space:nowrap;margin-left:196px}.btn-reset{position:absolute;right:57px;bottom:24px;width:133px;height:62px;background:url('../images/btn-reset.svg') center/100% 100% no-repeat;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-transition:opacity .2s;transition:opacity .2s;z-index:10}.btn-reset:hover{opacity:.8}.modal-overlay{position:absolute;top:0;left:0;width:1920px;height:1080px;z-index:100;pointer-events:none}.modal-overlay.active{pointer-events:auto}.modal-box{position:absolute;left:420px;top:148px;width:1010px;height:164px;display:none}.modal-box.visible{display:block;-webkit-animation:.25s modalSlideIn;animation:.25s modalSlideIn}.modal-bg-img{position:absolute;top:0;left:0;width:944px;height:164px;display:block;pointer-events:none}.modal-content{position:relative;z-index:1;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;padding:12px 76px 12px 30px;height:100%}.modal-title{font-size:38px;font-weight:700;color:#ff5733;line-height:1.15;margin-bottom:5px}.modal-text{font-size:28px;color:#1a1a1a;line-height:1.3}.modal-close{position:absolute;right:33px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:65px;height:65px;background:url('../images/btn-close.svg') center/100% 100% no-repeat;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-transition:-webkit-transform .15s;transition:transform .15s;z-index:2}.modal-close:hover{-webkit-transform:translateY(-50%) scale(1.1);transform:translateY(-50%) scale(1.1)}@-webkit-keyframes modalSlideIn{from{opacity:0;-webkit-transform:translateY(-16px);transform:translateY(-16px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes modalSlideIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}#errorModalOverlay{z-index:110}.error-modal-box{position:absolute;left:792px;top:431px;width:335px;height:218px;display:none}.error-modal-box.visible{display:block;-webkit-animation:.25s modalSlideIn;animation:.25s modalSlideIn}.error-modal-bg-img{position:absolute;top:0;left:0;width:100%;height:100%;display:block;pointer-events:none}.error-modal-content{position:relative;z-index:1;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;padding-top:10px;height:100%}.error-modal-title{font-size:50px;font-weight:700;color:#474747;line-height:1;margin-bottom:20px}.error-modal-text{font-size:30px;color:#525252;line-height:1.2;margin:0}.error-modal-close{position:absolute;left:50%;top:-25px;width:77px;height:77px;margin-left:-38.5px;background:0 0;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-transition:-webkit-transform .15s;transition:transform .15s;z-index:2;padding:0}.error-modal-close img{width:100%;height:100%;display:block}.error-modal-close:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}