@import"https://fonts.googleapis.com/css2?family=Sarabun:wght@100;200;300;400;500;600;700;800&display=swap";:root{font-family:Sarabun,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--background: #ffffff;--foreground: #171717;--haiti: #34214b;--teak: #9f8c57;--dark-siate: #2c484c;--rose-wood: #a3404a;--copper-rust: #b26e4b;--black: #1f1f1f;--umber: #4a2f27;--ivorv: #d6cec3;--white: #f7f7f7;--warning: #a3404a;--bg-landscape: url(/background/greeting/greeting%20bg_16x9.png);--bg-portrait: url(/background/greeting/greeting%20bg_9x16.png);-webkit-font-smoothing:subpixel-antialiased;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;--font-size-sm: 10px;--font-size-md: 12px;--font-size-lg: 14px}*{box-sizing:border-box}#root{min-height:100dvh;min-width:100vw}@font-face{font-family:Humane-jenson;src:url(/fonts/1543Humane_Jenson.TTF) format("truetype")}body{margin:0;padding:0;display:flex;place-items:center;min-width:100vw;min-height:100dvh;height:100dvh;justify-content:center;color:var(--black);overflow:hidden;background-color:#242424;position:fixed}html{overflow:hidden;background-color:#242424;position:fixed;height:100dvh}i,em{font-style:italic}.page{min-height:calc(var(--real-vh, 1vh) * 100);min-width:100%;background-image:var(--bg-landscape);background-size:cover;background-position:center;color:var(--white);transition:background-image .8s ease-in-out}.page:before{content:"";display:none;background-image:url(/background/trial-portrait/trial1.1.png);background-image:url(/background/trial-portrait/trial1.2.png);background-image:url(/background/trial-portrait/trial2.1.png);background-image:url(/background/trial-portrait/trial2.2.png);background-image:url(/background/trial-portrait/trial3.1.png);background-image:url(/background/trial-portrait/trial3.2.png);background-image:url(/background/trial-portrait/trial4.1.png);background-image:url(/background/trial-portrait/trial5.1.png);background-image:url(/background/trial-portrait/trial5.2.png);background-image:url(/background/trial-portrait/trial5.3.png);background-image:url(/background/greeting/greeting%20bg_16x9.png);background-image:url(/background/greeting/greeting%20bg_9x16.png);background-image:url(/background/ending/The%20Lost%20Witch.png);background-image:url(/background/ending/The%20Rebellious%20Witch.png);background-image:url(/background/ending/The%20Reclaimed%20Witch.png);background-image:url(/background/ending/The%20Searching%20Witch.png);background-image:url(/background/ending/The%20Wandering%20Witch.png);background-image:url(/03%20result-page/The%20Lost%20Witch.png);background-image:url(/03%20result-page/The%20Rebellious%20Witch.png);background-image:url(/03%20result-page/The%20Reclaimed%20Witch.png);background-image:url(/03%20result-page/The%20Searching%20Witch.png);background-image:url(/03%20result-page/The%20Wandering%20Witch.png);background-image:url(/07%20motion/cards%20flip/card%20flip%2001.gif);background-image:url(/07%20motion/cards%20flip/card%20flip%2002.gif);background-image:url(/07%20motion/cards%20flip/card%20flip%2003.gif);background-image:url(/07%20motion/cards%20flip/card%20flip%2004.gif);background-image:url(/07%20motion/cards%20flip/card%20flip%2005.gif)}.page.intro,.page.policy,.page.greeting,.page.outro{color:var(--black)}@media (orientation: portrait){.page{background-image:var(--bg-portrait)}}.main-container{position:relative;height:min(720px,calc(var(--real-vh, 1vh) * 100));width:min(420px,100%);display:flex;flex-direction:column;justify-content:center;overflow:visible}@media (max-width: 440px){.main-container{height:100vh}}img.theWitchesLogo{height:250px}img.greetingMoon,img.greetingOrnament{height:40px}img.logoBlack{height:30px}img.trial-title{height:48px;margin:32px 0 18px}@media (max-width: 768px){img.theWitchesLogo{height:200px}img.greetingMoon,img.greetingOrnament{height:36px}img.logoBlack{height:30px}}.pointer{cursor:pointer}.text.red{color:var(--rose-wood)}.text.sm{font-size:10px}.text.md{font-size:13px}.text.lg{font-size:16px}.trial{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%}button.default-btn{position:relative;background-color:var(--umber);color:#d6cec3;border:2px solid var(--teak);min-height:37px;border-radius:100px;padding:4px 16px;font-size:var(--font-size-md);font-weight:700;color:var(--teak);text-align:center;cursor:pointer;box-shadow:0 4px 6px #0003;width:90%;transition:all .1s;font-family:Sarabun,sans-serif}button.default-btn:hover{background-color:var(--white);border:2px solid var(--teak);box-shadow:0 4px 6px #0003}button.default-btn img.lock-choice-icon{position:absolute;top:50%;left:-20px;transform:translateY(-50%);width:40px}img.character-img{height:100px}.frame-border{position:relative;width:100%;height:100%;padding:40px;background-image:url(/assets/greeting%20bg%20frame_9x16.png);background-size:100% 100%;background-position:center;background-repeat:no-repeat}.frame-border img.frame-bg{position:absolute;height:106%;width:110%;top:-4%;left:-7%}.inner-border{position:relative;border:2px solid #333;padding:10px 5px;width:100%;height:100%}.home{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;height:100%;color:var(--black)}.home .main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;flex-grow:3}.home img.theWitchesLogo{height:230px}.home img.greetingMoon,.home img.greetingOrnament{height:40px}.home img.logoBlack{height:48px}@media (max-width: 768px){.home img.theWitchesLogo{height:200px}.home img.greetingMoon,.home img.greetingOrnament{height:36px}.home p.title{text-align:center;font-size:10px}.home h4 span{font-size:0px}}.home p.title{text-align:center;font-size:12px}.home h4 span{font-size:12px}@media (max-width: 768px){.home p.title{margin-top:40px;margin-bottom:40px;width:300px;font-size:13px}}.copy-right{font-size:10px;display:flex;flex-direction:column;align-items:center;position:relative}.copy-right img.logoBlack{height:38px}@media (max-width: 360px){.copy-right{position:relative}}.policy-page{display:flex;flex-direction:column;align-items:center;gap:2rem;height:100%;color:var(--black)}.policy-page .logo{height:180px}.policy-page .info{text-align:center}.policy-page .dialog{flex-grow:3}.greeting{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.greeting .logo-container{margin-bottom:-40px}.greeting .logo.sm{height:130px}.messageGroup{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:20px}.messageGroup .message-group{display:flex;flex-direction:row;align-items:center;text-align:left;gap:12px;width:100%;position:relative}.messageGroup .message-group.player{background-color:#f5f5f559;border-radius:10px;padding:20px;text-align:center;justify-content:center}.messageGroup .message-group.has-background{background-color:var(--teak);border-radius:10px;padding:30px 60px;text-align:center}.messageGroup .message-group.has-background img.character-img{position:absolute;top:0;left:0;transform:translate(-50%,-50%);height:100px}.dialogRender{flex-grow:3;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;font-size:var(--font-size-md);overflow:hidden}.dialogRender.top{padding-top:40px}.dialogRender.middle{justify-content:center}.dialogRender.bottom{justify-content:flex-end}.dialogRender.no-click{pointer-events:not-allowed}.dialogRender .dialog-image{height:200px;object-fit:cover;object-position:center;overflow:visible;scale:1}.dialogRender .dialog-image[src$="/characters/character-เงาปริศนา.png"]{height:180px;object-fit:cover}.dialogRender .dialog-image[src$="/assets/the-ancient-spell.png"]{height:140px;object-fit:cover}.dialogRender .btn-container{display:flex;align-items:center;gap:1rem;margin-top:1rem}.dialogRender .btn-container.column{flex-direction:column}.dialogRender .btn-container.row{flex-direction:row}@media (max-width: 360px){.dialogRender .btn-container.row{flex-direction:column}}.dialogRender .text-container{width:300px;text-align:center;display:flex;flex-direction:column;gap:10px;margin-top:1rem}.dialogRender img.character-img{height:100px}.dialogRender .messageGroup img.character-img{height:80px}.dialogRender .option-warning{text-align:center;color:var(--warning);margin-top:1rem;font-size:12px}.dialogRender .result-container{min-width:280px;display:flex;flex-direction:column;gap:20px}.dialogRender .result-container .selected-answer{border:1px solid #e0e0e0;background-color:#f5f5f5b3;border-radius:12px;padding:24px 12px;margin:8px 0;font-style:italic;color:var(--black);text-align:center;box-shadow:2px 2px 5px #0000001a}.dialogRender .result-container .result-text{display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--teak);padding:24px 12px;border-radius:12px;position:relative;margin:10px 0}.dialogRender .result-container .result-text img{width:60px;height:60px;border-radius:50%;position:absolute;left:-30px;top:6px;transform:translateY(-50%)}.dialogRender .result-container .result-text .typing-animation{margin-left:35px;color:#000;font-size:1.1em}.dialogRender .name-entry-form{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.dialogRender .name-entry-form input.input-name{width:100%;max-width:200px;padding:12px;border:2px solid var(--teak);border-radius:100px;font-size:1em;color:var(--black);background-color:#d6cec3;text-align:center;outline:none;box-shadow:inset 0 0 5px #0003,2px 2px 5px #0000004d;transition:all .2s ease-in-out}.dialogRender .name-entry-form input.input-name:focus{border-color:var(--teak);box-shadow:0 0 5px #bc9e8280}.dialogRender .name-entry-form input.input-name::placeholder{color:#999}.dialogRender #image-dialog{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;width:100%}.dialogRender #image-dialog img{width:100px;height:100px;object-fit:cover;object-position:center;border-radius:100px}.dialogRender #image-dialog .top,.dialogRender #image-dialog .bottom{flex-grow:1;display:flex;justify-content:center;gap:10px;width:100%}.dialogRender #image-dialog .top{align-items:center}.dialogRender #image-dialog .bottom{align-items:flex-end}.dialogRender .scroll-dialog{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.dialogRender #glow-scroll{position:relative;width:150px;height:150px}.dialogRender #glow-scroll img{position:absolute;width:100%;height:100%;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:40px;object-fit:cover;object-position:center}.dialogRender #glow-scroll .glow{width:150%;height:150%;object-fit:cover}.dialogRender #glow-scroll .scroll{width:100%;height:100%;object-fit:cover}.dialogRender #scroll-question{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;width:100%;background-image:url(/PaperScroll/Paper_Recap%201.png);background-size:cover;background-position:center;background-repeat:no-repeat;margin:10px;color:var(--black);font-weight:700}@media (max-width: 410px){.dialogRender #scroll-question{background-size:146%}.dialogRender #scroll-question .scroll-question-content{margin:110px 0 80px!important}}.dialogRender #scroll-question .scroll-question-content{width:80%;height:80%;margin:90px 0 80px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.dialogRender #scroll-question textarea{width:90%;height:90%;resize:none;padding:10px;border:none;border-radius:10px;background-color:#d9d9d980;color:var(--black)}.dialogRender #scroll-question textarea::placeholder{opacity:.5}.dialogRender #scroll-question textarea:focus{outline:none;border-color:var(--teak)}.dialogRender #scroll-question textarea::placeholder{color:var(--black)}.dialogRender #scroll-question button{padding:10px 20px;border:none;background-color:var(--teak);color:var(--black);cursor:pointer;transition:all .3s ease;border-radius:2000px;border:2px solid var(--black)}.dialogRender #scroll-question button:hover{background-color:#666;transform:scale(1.05)}.dialogRender #scroll-question button:active{transform:scale(.95)}.dialogRender .bubble-dialog{display:flex;flex-direction:column;align-items:center;justify-content:center}.dialogRender .bubble-dialog .bubble-container{position:absolute;top:0;left:0;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%}.dialogRender .bubble-dialog .bubble-container .bubble{height:100%;display:flex;align-items:center;justify-content:center;z-index:1;color:var(--black);overflow:auto;padding:20px 40px;font-weight:700;overflow:visible}.dialogRender .bubble-dialog .bubble-container .bubbleImg{position:absolute;width:260px;object-fit:cover;object-position:center;z-index:-1}.dialogRender .bubble-dialog .bubble-container .bubble:nth-child(odd){align-self:flex-start;margin-left:-4%}.dialogRender .bubble-dialog .bubble-container .bubble:nth-child(2n){align-self:flex-end;margin-right:-4%}.trial-template{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%;font-family:Sarabun,sans-serif}.trial-template .content-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center}.trial-template .title{margin:30px 0;color:var(--teak);text-align:center;background-color:var(--black);padding:5px 15px;border-radius:100px;border:2px solid var(--teak)}.trial-template .body{position:relative;background-image:url(/assets/panel%20bg.png);background-size:cover;background-position:center;background-repeat:no-repeat;background-size:100% 100%;padding:30px 0;width:100%;height:100%}.trial-template .body .content{height:100%;align-content:center}.trial-template .body.transparent{background-color:transparent!important;background-image:none!important}.trial-template img.logo-sticker{width:40px;height:40px;margin:10px 0}.trial-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.trial-intro .body{position:relative;background-image:url(/assets/panel%20bg.png);background-size:cover;background-position:center;background-repeat:no-repeat;background-size:100% 100%;width:100%;height:100%;padding:30px;overflow:hidden}.trial-intro .body .content{height:100%;align-content:center}.trial-intro img.logo-sticker{width:40px;height:40px;margin:10px 0}.trial2{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%}.TheEnd{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:var(--font-size-md);overflow:visible;position:relative;font-family:Sarabun,sans-serif}.TheEnd .frame{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.TheEnd .frame .content{height:100%;width:100%;align-content:center;display:flex;flex-direction:column;align-items:center;justify-content:center;background-image:url(/assets/panel%20bg.png);background-size:contain;background-position:center;background-repeat:no-repeat;object-fit:cover;padding:20px}.TheEnd img.character-img{height:100px}.TheEnd img.logo-sticker{width:40px;height:40px;margin:10px 0}.TheEnd .float-text{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.TheEnd .float-text .content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:end;padding-bottom:100px}.TheEnd .recap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%;color:var(--black);font-weight:700;overflow:visible;z-index:1}.TheEnd .recap .recap-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;width:100%;padding:200px 20px;background-image:url(/PaperScroll/Paper_Recap%201.png);background-size:140%;background-position:center;background-repeat:no-repeat;object-fit:cover;z-index:1}.TheEnd .recap .glow-bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:180%;z-index:0}.TheEnd .recap .top{width:60%;flex-grow:1;align-content:center;overflow:auto}.TheEnd .recap .bottom{text-align:right;width:60%}.result-card{position:relative;width:100%;height:100%;margin:30px;color:var(--teak);flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.result-card img.logo-sticker{position:absolute;bottom:-30px;left:50%;transform:translate(-50%)}.result-card .result-card-content{width:100%;height:100%;padding:20px;display:flex;align-items:center;justify-content:center}.result-card img.trial-title{margin-top:10px}.result-card .result-card-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.result-card .result-card-content .ornament{display:none}.result-card .result-card-content img.left.gold.ornament{position:absolute;left:25px;top:235px;width:100px}.result-card .result-card-content img.right.gold.ornament{position:absolute;right:25px;top:235px;width:100px}.result-card .card{z-index:1}.result-card .card img{width:120px;transform:rotate(4deg)}.result-card .title{z-index:1;text-align:center;color:var(--teak);background-color:var(--black);padding:5px 40px;border:1px solid var(--teak);border-radius:900px;margin-bottom:-10px}.result-card .text{text-align:center;color:var(--teak)}.result-card .save-recommend{margin-top:40px}.save-recommend{text-align:center;font-size:var(--font-size-sm);color:var(--teak)}.result-stat{position:relative;width:100%;height:100%;margin:30px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.result-stat img.logo-sticker{position:absolute;bottom:-30px;left:50%;transform:translate(-50%)}.result-stat .save-recommend{margin-bottom:40px}.result-stat .result-stat-content{width:100%;height:100%;padding:20px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px}.result-stat .result-stat-content .stat{display:flex;justify-content:space-between;align-items:center;gap:20px;background-color:#f7f7f7b3;color:var(--black);border-radius:10000px;position:relative;font-size:var(--font-size-sm);padding:0 20px}.result-stat .result-stat-content .stat .image{position:relative;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:6px 10px}.result-stat .result-stat-content .stat .image .icon{position:relative}.result-stat .result-stat-content .stat .image .icon img{position:relative;top:-5px;width:70px}.result-stat .result-stat-content .stat .image .icon .badge{position:absolute;top:100%;left:50%;width:100px;transform:translate(-50%,-50%);background-color:var(--black);color:var(--white);border-radius:10000px;padding:5px 10px;font-size:var(--font-size-sm)}.result-stat .result-stat-content .stat .text{text-align:left}img.trial-title{margin-top:10px}.Outro{height:100%;width:100%;font-size:13px;color:var(--black);font-family:Sarabun,sans-serif}.Outro .frame{background-image:url(/assets/greeting%20bg%20frame_9x16-CUP98Yud.png);background-size:100% 100%;background-position:center;background-repeat:no-repeat;width:100%;height:100%;padding:20px 30px}.Outro .Outro-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.Outro .dialog{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;height:100%;padding:20px 0}.Outro .dialog .content{height:100%;padding-top:100px}.Outro .final{position:relative;padding-top:10px;padding-bottom:10px;height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between}@media (orientation: portrait){.Outro .final{padding-top:30px}}.Outro .final .text{text-align:center}.Outro .final .description{text-align:center;font-size:8px}.Outro .the-witch-logo{width:200px}.Outro .greeting-ornament{width:240px}.Outro .buttonContainer{position:absolute;bottom:20px;right:10px;display:flex;justify-content:flex-end;width:100%}