.guide-screen{position:fixed;inset:0;z-index:1;overflow-x:hidden;overflow-y:auto;background:#edfdf4;font-family:Arial,Helvetica,sans-serif}
.guide-wrap{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:100%;max-width:480px;min-height:100vh;min-height:100dvh;margin:0 auto;padding:1.2vh 20px;background:url('./assets/guide/images/BG.png') center top/cover no-repeat}
.guide-screen button{box-sizing:border-box;margin:0;padding:0;border:0;border-radius:0;background:transparent;font-family:inherit;line-height:normal;cursor:pointer}
.guide-screen button::after{border:0}
.guide-screen button:focus-visible{outline:3px solid #086944;outline-offset:6px}
.guide-header{position:relative;display:flex;flex:0 0 10vh;align-items:center;justify-content:space-between;min-height:56px}
.guide-language{position:relative;height:100%;z-index:4}
.guide-header .guide-icon-button{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;width:5vh;min-width:36px;height:100%}
.guide-icon-button img{width:100%;height:50%;min-height:28px}
.guide-language-menu{position:absolute;top:88%;left:-8px;z-index:6;min-width:116px;padding:8px;border:1px solid #b9e5d0;border-radius:12px;background:#f5fff9;box-shadow:0 6px 20px #136c4320}
.guide-language-menu button{display:flex;align-items:center;width:100%;padding:6px 2px;color:#225f45;font-size:15px;text-align:left}
.guide-language-menu img{width:23px;height:23px;margin-right:8px}
.guide-main{position:relative;flex:0 0 50vh;width:calc(100% + 40px);margin:0 -6%;overflow:hidden}
.guide-art{position:absolute;top:50%;left:50%;height:110%;aspect-ratio:1/1;transform:translate(-54%,-50%)}
.guide-sprite img{display:block;width:100%}
.guide-sprite{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0}
.guide-jump{position:absolute;top:50%;left:50%;width:100%;aspect-ratio:1/1;opacity:0;animation:guide-jump .7s ease-in-out 2.8s forwards}
.guide-jump .guide-sprite{opacity:1}
@keyframes guide-jump{0%{transform:translate(-50%,-50%) scale(0);opacity:0}60%{transform:translate(-50%,-50%) scale(1.2);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.coin01{width:5%;top:35%;left:23%;animation:guide-flying 15s ease-in-out infinite alternate}
.coin02{width:14%;top:45%;left:12%;animation:guide-flying 4s ease-in-out infinite alternate}
.coin03{width:7%;top:34%;left:36%;animation:guide-flying 20s ease-in-out infinite alternate}
.coin04{width:8%;top:21%}
.coin05{width:4%;top:15%;left:54%;animation:guide-flying 20s ease-in-out infinite alternate}
.coin06{width:4%;top:19%;left:64%;animation:guide-flying 23s ease-in-out infinite alternate}
.coin07{width:8%;top:25%;left:77%;animation:guide-flying 12s ease-in-out infinite alternate}
.coin08{width:7%;top:19%;left:96%;animation:guide-flying 21s ease-in-out infinite alternate}
.coin09{width:7%;top:39%;left:71%;animation:guide-flying 20s ease-in-out infinite alternate}
.coin10{width:11%;top:45%;left:87%;animation:guide-flying 25s ease-in-out infinite alternate}
.coin11{width:17%;top:60%;left:82%;animation:guide-flying 8s ease-in-out infinite alternate}
.ingot{width:14%;top:46%;left:31%;animation:guide-flying 37s ease-in-out infinite alternate}
.mahjong-back01{width:8%;top:40%;left:74%;animation:guide-flying 24s ease-in-out infinite alternate}
.mahjong-back02{width:10%;top:30%;left:45%;animation:guide-flying 30s ease-in-out infinite alternate}
@keyframes guide-flying{0%,100%{transform:translate(-50%,-50%)}20%{transform:translate(-40%,-50%)}40%{transform:translate(-50%,-40%)}60%{transform:translate(-45%,-45%)}80%{transform:translate(-40%,-40%)}}
.hu,.hu2{width:28%;top:45%;left:55%}
.guide-jump .hu2{opacity:0;z-index:99;animation:guide-hu 4s linear 3s infinite}
@keyframes guide-hu{0%,74%{transform:translate(-50%,-50%) scale(1);opacity:0}75%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.4);opacity:0}}
.table{width:49%;top:68%;left:56%;z-index:1}
.table-shadow{width:49%;top:82%;left:56%;opacity:.5}
.guide-table-jump{position:absolute;top:50%;left:50%;width:100%;aspect-ratio:1/1;opacity:0;animation:guide-table .5s ease-in-out forwards}
.guide-table-jump .guide-sprite{opacity:1}
.guide-table-jump .table-shadow{opacity:.5}
@keyframes guide-table{0%{transform:translate(-50%,-50%) scale(0);opacity:0}50%{transform:translate(-50%,-50%) scale(1.2)}85%{transform:translate(-50%,-50%) scale(.9)}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.shadow-mahjong{width:48%;top:66%;left:52%;animation:guide-shadow 2s ease-in-out 1s forwards}
@keyframes guide-shadow{0%{opacity:0}100%{opacity:.6}}
.guide-tiles{position:absolute;top:0;left:0;width:100%;aspect-ratio:1/1;animation:guide-tiles 3s ease-in-out 3.2s infinite alternate}
@keyframes guide-tiles{0%{transform:translateY(0)}100%{transform:translateY(5px)}}
.tile01{width:7.2%;top:49.5%;left:64%;animation:guide-tile .5s ease-in-out .4s forwards}
.tile02{width:7.5%;top:50.9%;left:67.5%;animation:guide-tile .5s ease-in-out .6s forwards}
.tile03{width:7.5%;top:52.4%;left:70%;animation:guide-tile .5s ease-in-out .8s forwards}
.tile04{width:8%;top:54%;left:72.5%;animation:guide-tile .5s ease-in-out 1s forwards}
.tile05{width:8%;top:56%;left:74%;animation:guide-tile .5s ease-in-out 1.2s forwards}
.tile06{width:8%;top:58%;left:74%;animation:guide-tile .5s ease-in-out 1.4s forwards}
.tile07{width:10.5%;top:60.5%;left:72%;animation:guide-tile .5s ease-in-out 1.6s forwards}
.tile08{width:12%;top:62%;left:67%;animation:guide-tile .5s ease-in-out 1.8s forwards}
.tile09{width:13%;top:63%;left:59%;animation:guide-tile .5s ease-in-out 2s forwards}
.tile10{width:12%;top:62%;left:48%;animation:guide-tile .5s ease-in-out 2.2s forwards}
.tile11{width:14%;top:59%;left:37%;animation:guide-tile .5s ease-in-out 2.4s forwards}
.tile12{width:18%;top:54%;left:25%;animation:guide-tile .5s ease-in-out 2.6s forwards}
@keyframes guide-tile{0%{transform:translate(-50%,0);opacity:0}100%{transform:translate(-50%,-50%);opacity:1}}
.guide-footer{flex:0 0 30vh;padding-top:0}
.guide-footer .guide-entry{position:relative;display:flex;align-items:center;justify-content:center;width:calc(100% - 8px);height:6vh;min-height:44px;margin:0 auto;overflow:visible;border-radius:50px;color:#fff;font-size:2.4vh;font-weight:400;white-space:nowrap}
.guide-footer .guide-entry::before{content:'';position:absolute;inset:-4px;z-index:1;border-radius:50px;background:linear-gradient(#5bcaad,#31795a)}
.guide-footer .guide-entry::after{content:'';position:absolute;inset:0;z-index:2;border-right:1px solid #fff9;border-left:1px solid #fff9;border-radius:50px;background:linear-gradient(#5bcaae,#0f6641)}
.guide-footer .guide-entry+.guide-entry{margin-top:2.8vh}
.guide-entry>img,.guide-entry>span{position:relative;z-index:3}
.guide-entry img{box-sizing:content-box;display:block;width:3.6vh;height:60%;padding:0 1vh}
.guide-light{position:absolute;inset:0;z-index:4;pointer-events:none}
.guide-light::before,.guide-light::after{content:'';position:absolute;top:0;left:0;height:100%;aspect-ratio:1/1;border-radius:100%;background:linear-gradient(90deg,#fff9,#fff0 10%)}
.guide-light::after{right:0;left:auto;background:linear-gradient(270deg,#fff9,#fff0 10%)}
.guide-currency-note{display:block;margin-top:2.4vh;color:#4a826b;font-size:11px;line-height:1.5;text-align:center}
@media(max-height:600px){.guide-wrap{min-height:540px}.guide-header{flex-basis:56px}.guide-main{flex-basis:270px}.guide-footer .guide-entry{font-size:15px}.guide-currency-note{max-width:380px;margin:14px auto 0}}
@media(prefers-reduced-motion:reduce){.guide-jump,.guide-table-jump{animation:none;opacity:1;transform:translate(-50%,-50%)}.guide-sprite{animation:none;opacity:1}.guide-tiles{animation:none}.guide-jump .hu2{display:none;animation:none}.shadow-mahjong,.guide-table-jump .table-shadow{opacity:.5}}
[hidden]{display:none!important}
body{margin:0}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.guide-screen a{text-decoration:none;cursor:pointer}
.guide-screen a:focus-visible{outline:3px solid #086944;outline-offset:6px}
.guide-screen a[aria-disabled="true"]{cursor:default}
.guide-screen img{object-fit:contain}
.guide-status{margin:12px 0;color:#36654f;font-size:13px;text-align:center}
.guide-downloads{display:flex;justify-content:center;gap:24px;margin-top:16px;color:#225f45;font-size:14px}