body {
  margin: 0;
  overflow: hidden;
  width: 100vw;
  height: 100dvh;
}

#unity-container {
  position: fixed;
  inset: 0;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  /* align-items: center; */
  justify-content: center;
}

#unity-canvas {
  background-image: url('icons/background.png'); 
  background-color: rgb(0, 0, 0);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: auto;
  max-height: 100%;
  max-width: calc(100vh * 9 / 16);
}


#unity-loading-bar { 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  display: none;
}

#unity-logo { 
  width: 154px; 
  height: 130px; 
  background: url('icons/unity-logo-dark.png') no-repeat center;
}

#unity-progress-bar-empty { 
  margin-left: auto; 
  margin-right: auto; 
  width: 141px; 
  height: 18px; 
  margin-top: 10px; 
  background: url('icons/progress-bar-empty-dark.png') no-repeat center;
}

#unity-progress-bar-full { 
  width: 0%; 
  height: 18px; 
  margin-top: 10px; 
  background: url('icons/progress-bar-full-dark.png') no-repeat center;
}

#unity-warning { 
  position: absolute; 
  left: 50%; 
  top: 5%; 
  transform: translate(-50%); 
  background: white; 
  padding: 10px; 
  display: none;
}
#html-overlay{
    display: none;
    position:fixed;
    top:0;
    left:50%;
    transform:translateX(-50%);

    width:auto;
    height:100%;
    max-height:100%;
    max-width:calc(100vh * 9 / 16);
    aspect-ratio:9/16;

    z-index:9999;

    justify-content:center;
    align-items:center;

    overflow:hidden;

    background:
    radial-gradient(circle at center 30%,
    #6fe0ff 0%,
    #19a3ff 35%,
    #0061e6 70%,
    #003fae 100%);
}

.kinder-form{
    width:min(85%,420px);
    text-align:center;
    padding:8px 0;
    font-family:'Poppins', sans-serif;
}

.kinder-logo{
    width:130px;
    margin-bottom:0;
}

.hero-image{
    width:100%;
    max-width:320px;
    height:130px;
    margin:0 auto 28px;

    background-image: url('icons/catch-the-joy.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.form-card{
    position:relative;

    background:#f8f4ee;

    border:6px solid #ff2600;
    border-radius:34px;

    padding:32px 20px 22px;

    box-shadow:
      0 20px 40px rgba(0,0,0,.35);
}

.form-ribbon{
    position:absolute;

    top:-18px;
    left:50%;

    transform:translateX(-50%);

    background:linear-gradient(
      to bottom,
      #ff3d1f,
      #d41200
    );

    color:white;

    font-size:16px;
    font-weight:800;
    letter-spacing:0.5px;

    padding:11px 26px 11px;

    clip-path: polygon(
      6% 0%, 94% 0%, 100% 50%, 94% 100%,
      6% 100%, 0% 50%
    );

    white-space:nowrap;

    box-shadow:
      0 5px 12px rgba(0,0,0,.3);
}

.field-group{
    text-align:left;
    margin-bottom:18px;
}

.field-group label{
    display:block;

    color:#0b3488;
    font-size:14px;
    font-weight:800;

    margin-bottom:4px;
}

.field-group input{
    width:100%;
    box-sizing:border-box;

    height:42px;

    border:2px solid #c9c9c9;
    border-radius:10px;

    padding:0 14px;

    font-size:14px;
    font-weight:500;
}

.terms-row{
    display:flex;
    align-items:center;

    gap:10px;

    margin-top:12px;
    margin-bottom:20px;

    text-align:left;
}

.terms-row input{
    width:24px;
    height:24px;
    flex-shrink:0;

    appearance:none;
    -webkit-appearance:none;

    border:2.5px solid #0b3488;
    border-radius:6px;
    background:#fff;

    cursor:pointer;
    position:relative;
}

.terms-row input:checked{
    background:#0b3488;
}

.terms-row input:checked::after{
    content:"";
    position:absolute;
    left:7px;
    top:3px;
    width:5px;
    height:11px;
    border:solid white;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.terms-row label{
    font-size:12px;
    font-weight:500;
}

.terms-row a{
    color:#0066ff;
    text-decoration:none;
}

.submit-btn{
    width:100%;

    height:46px;

    border:none;
    cursor:pointer;

    color:white;
    font-size:18px;
    font-weight:900;

    border-radius:12px;

    background:linear-gradient(
      to bottom,
      #e8281a,
      #c01408
    );

    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.25),
      0 5px 10px rgba(0,0,0,.3);
}

@media(max-width:480px){
  .kinder-logo{ width:110px; }
  .hero-image{ height:105px; max-width:260px; }
  .form-card{ padding:36px 16px 18px; }
  .form-ribbon{ font-size:14px; padding:8px 24px; }
}