@font-face {
    font-family: 'BTCosmo-Bold';
    src: url('./fonts/BTCosmo-Bold.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'PeridotPE-Bold';
    src: url('./fonts/PeridotPE-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'PeridotPE-Regular';
    src: url('./fonts/PeridotPE-Regular.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

body { margin: 0; padding: 0; font-family: 'PeridotPE-Regular', sans-serif; font-size: 20px; line-height: 26px; background-color: #000; color: #fff; }
img { max-width: 100%; display: inline-block; }

input, button { width: 100%; max-width: 100%; box-sizing: border-box; }
input { -webkit-appearance: none; outline: none; height: 80px; padding: 0 40px; line-height: 80px; background-color: #fff; border-radius: 24px; font-size: 26px; display: -webkit-box; }
input:focus { outline: none; }
button { cursor: pointer; border: none; height: 80px; line-height: 80px; font-size: 26px; color: #fff; background-color: #41A536; border-radius: 24px; }
button:hover, button:active { background-color: #227719; }

#wrap { position: relative; width: 100vw; margin: 0 auto; height: 100%; min-height: 100vh; background: url(./background/background.inside.png) top center no-repeat; background-attachment: fixed; }
#wrap.init { background-image: url(./background/background.intro.png); }

#game .gifts-wrap, #game .won-wrap { display: none; }

#wrap .screen { display: none; color: #fff; }
#wrap.init .screen#init { display: block; }
#wrap.game .screen#game { display: block; }
#wrap.won .screen#game { display: block; }
#wrap.game .screen#game .gifts-wrap { display: block; }
#wrap.won .screen#game .won-wrap { display: block; }
#wrap.form .screen#form { display: block; }

#init .main { max-width: 600px; padding: 0 20px; margin: 0 auto; text-align: center; padding-top: 80px; position: relative; z-index: 9; }
#init .title { font-size: 54px; font-family: 'PeridotPE-Bold', sans-serif; line-height: 60px; }
#init .subtitle { font-size: 38px; font-family: 'PeridotPE-Bold', sans-serif; margin-top: 30px; line-height: 42px; }
#init .star-club { max-width: 346px; margin: 0 auto; margin-top: 50px; }
#init .info { margin-top: 30px; }
#init .form { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
#init .logos { display: flex; justify-content: center; align-items: center; position: relative; z-index: 8; text-align: center; margin-top: 40px; }
#init .logos > div { width: 50%; padding: 0 40px; }
@media screen and (min-width: 1600px) {
    #init::after { content: ''; width: 400px; height: 350px; position: absolute; top: 0; left: 0; background-image: url(./images/ribbon.png);}
    #init .logos { margin-top: -100px; gap: 510px; }
}

#game .title { font-family: 'PeridotPE-Bold', sans-serif; font-size: 48px; line-height: 52px; margin-top: 50px; }
#game .title span { font-size: 73px; line-height: 80px; color: #F4C97B; }
#game .gifts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 40px; }
#game .gifts > div { flex: 0 0 calc(33.3333% - 13.3333px); box-sizing: border-box; }
#game .main { display: flex; flex-wrap: wrap; padding: 0 20px; }
#game .main > div { flex: 0 0 calc(50%); box-sizing: border-box; }
#game .wheel-wrap { max-width: 800px; margin-left: auto; }
@media screen and (max-width: 1300px) {
    #game .main > div { width: 100%; flex: 0 0 100%; }
}
#game .logo { text-align: right; margin-top: 40px; margin-right: 30px; }
#game .gifts-wrap { padding: 0 20px; max-width: 720px; margin: 0 auto; }
#game .gifts-wrap .gifts img { width: 100%; }

#game .won-wrap { padding: 0 20px; max-width: 720px; margin: 0 auto; }
#game .won { margin-top: 100px; padding: 30px 0px; border:3px solid #CD8F52; border-radius: 160px; text-align: center; font-family: 'PeridotPE-Bold', sans-serif; font-size: 40px; line-height: 46px; }
#game .won .title { margin-top: 30px; font-size: 49px; line-height: 54px; color: #F4C97B; font-family: 'PeridotPE-Bold', sans-serif; }
#game .won .image { margin-bottom: -130px; margin-top: 40px; }
#game .won .star { margin-top: -104px; }
#game .won-info { text-align: center; font-size: 30px; line-height: 36px; margin-top: 120px; display: none; }
#game .won-info.show { display: block !important; }
#game #won-remote > div { width: 300px; margin: 30px auto 0 auto;; }
#game #continue-form { display: none; }

#form .title { font-family: 'PeridotPE-Bold', sans-serif; font-size: 48px; line-height: 52px; margin-top: 50px; }
#form .title span { font-size: 73px; line-height: 80px; color: #F4C97B; }
#form .top { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 40px; align-items: center; justify-content: center; max-width: 1600px; margin: 0 auto; }
#form .top > div { flex: 0 0 calc(50% - 13.3333px); box-sizing: border-box; }
#form .logo { text-align: right; margin-top: 40px; margin-right: 30px; }
#form .form { display: none; width: 600px; max-width: 100%; margin: 0 auto; margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
#form .form#update-form { display: flex; }
#form .form#success-form { text-align: center; margin-top: 140px; font-size: 46px; }


#wheelOfFortune { margin-top: 50px; display: inline-flex; position: relative; overflow: hidden; width: 100%; max-width: 650px; aspect-ratio: 1 / 1; }
#wheel { display: block; user-select: none; width: 650px;}

#spin {
    background: url('./images/front.png') center center no-repeat; user-select: none; cursor: pointer; display: flex; justify-content: center; align-items: center;
    position: absolute; -webkit-tap-highlight-color: transparent; width: 158px; height: 158px; left: 50%; top: 50%; margin-left: -79px; margin-top: -79px;
}

canvas { background-image: url('./images/wheel.png'); background-size: contain; }

#intro { position: absolute; bottom: 20px; right: -60px; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; }
#loose { position: absolute; bottom: 20px; right: -60px; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; }
#won { position: absolute; bottom: 20px; right: -60px; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; }

.fs-button { opacity: 0.4; position: absolute; bottom: 20px; right: 20px; border: none; width: 40px; height: 40px; background-size: 40px 40px; background-color: transparent; display: none; }
#fs-enter { background-image: url('./fullscreen-enter.svg'); }
#fs-leave { background-image: url('./fullscreen-leave.svg'); }

#demo { display: none; position: absolute; padding: 10px; background-color: rgba(0,0,0,0.5); color: rgba(255,255,255,0.5); left: 0; right: 0; bottom: 0; top: 0; border: 2px solid red; }
body.dev #demo { display: block; }