@keyframes rotate{0%{transform:rotateY(0deg)}to{transform:rotateY(1turn)}}.shuffle-container{position:relative;perspective:1000px}.fan-container,.shuffle-container{width:200px;height:300px;margin:0 auto}.fan-container{position:right}.card{position:absolute;top:0;left:0;width:200px;height:300px;border-radius:8px;overflow:hidden;transform-origin:bottom center;animation:fanOut 1s ease-in-out forwards;box-shadow:0 4px 8px (0,0,0,.2)}.card img{width:100%;height:100%;object-fit:cover}.card.shuffling{animation:shuffle .5s ease-in-out infinite}@keyframes shuffle{0%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-10px) rotate(-3deg)}50%{transform:translateY(10px) rotate(3deg)}75%{transform:translateY(-5px) rotate(-2deg)}to{transform:translateY(0) rotate(0deg)}}@keyframes fanOut{0%{transform:rotate(0deg)}50%{transform:rotate(var(--rotation-angle))}to{transform:rotate(0deg)}}@font-face{font-family:IBM Plex Sans Thai;src:url(/fonts/IBMPlexSansThai-Regular.ttf) format("truetype");font-weight:400}@font-face{font-family:IBM Plex Sans Thai;src:url(/fonts/IBMPlexSansThai-Bold.ttf) format("truetype");font-weight:700}@font-face{font-family:IBM Plex Sans Thai;src:url(/fonts/IBMPlexSansThai-Medium.ttf) format("truetype");font-weight:500}@font-face{font-family:IBM Plex Sans Thai;src:url(/fonts/IBMPlexSansThai-Light.ttf) format("truetype");font-weight:300}@font-face{font-family:IBM Plex Sans Thai;src:url(/fonts/IBMPlexSansThai-ExtraLight.ttf) format("truetype");font-weight:200}@font-face{font-family:IBM Plex Sans Thai;src:url(/fonts/IBMPlexSansThai-SemiBold.ttf) format("truetype");font-weight:600}@font-face{font-family:IBM Plex Sans Thai;src:url(/fonts/IBMPlexSansThai-Thin.ttf) format("truetype");font-weight:100}body{font-family:IBM Plex Sans Thai,sans-serif;margin:0;padding:0;line-height:1.6;color:#333}h1{font-size:64px;line-height:40px;margin-bottom:16px}h1,h2{font-weight:700}h2{font-size:32px;line-height:30px;margin-bottom:14px}h3{font-size:24px;font-weight:700;line-height:26px;margin-bottom:12px}h4{font-size:20px;line-height:24px;margin-bottom:10px}h4,h5{font-weight:500}h5{font-size:18px;line-height:22px;margin-bottom:8px}h6{font-weight:500;line-height:20px;margin-bottom:6px}h6,p{font-size:16px}p{font-weight:400;line-height:24px;margin-bottom:16px}.image-container{container-type:inline-size}.card-image{width:100%;max-width:300px;height:auto;transition:width .3s ease-in-out}.select-mode-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:20px;gap:20px;justify-content:center;align-items:center;max-width:600px;width:100%;margin:0 auto}@media (min-width:900px){.container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;position:relative}.full-screen{width:auto;height:auto;max-width:90vw;max-height:90vh;object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.message-container{position:absolute;top:10%;left:50%;transform:translateX(-50%)}.overlay-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:100%}.crystal-ball,.overlay-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.crystal-ball{width:300px;height:300px;border-radius:50%;background-color:transparent;cursor:pointer;border:2px solid rgba(255,255,255,.5);box-shadow:0 0 10px rgba(255,255,255,.5)}.card-image{max-width:400px}.select-mode-grid{grid-template-columns:repeat(4,1fr);max-width:1200px}}