@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@400;600;700&display=swap');

:root{
    --paper: #FAF6EE;
    --ink: #2E2A26;
    --coral: #FF6B5B;
    --teal: #2CA9A0;
    --mustard: #E8A400;
    --indigo: #4C5B8C;
    --pink: #E8618C;
    --leaf: #4E9950;
    --line: rgba(46,42,38,0.12);
  }

  *{ box-sizing: border-box; }

  html, body{
    margin:0;
    min-height:100vh;
    color: var(--ink);
  }

  .page{
    max-width: 880px;
    margin: 0 auto;
    padding: 48px 24px 64px;
  }

  header{
    margin-bottom: 34px;
  }


  header p{
    margin: 0;
    font-size: 16px;
    color: rgba(46,42,38,0.7);
    max-width: 52ch;
  }
video {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
}
  .board{
    background: #ffffff;
    min-height: 200px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 8px;
    margin-bottom: 28px;
  }

  .board:empty::before{
    content: "Begin met typen hieronder — elke letter krijgt zijn eigen plaatje.";
    font-size: 20px;
    color: rgba(46,42,38,0.4);
    font-style: italic;
    align-self: start;
  }
.tile{
  width: 200px;
  height: 200px;
  border-radius: 14px;
  overflow: hidden;
  background: none;
  box-shadow: none;
  animation: pop 260ms cubic-bezier(.2,1.4,.4,1) both;
}
.tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* of "contain" als je niets wilt bijsnijden */
  border-radius: 14px;
}

  .tile.plain{
    background: #EDE7DA !important;
    color: var(--ink);
    justify-content: center;
    font-size: 30px;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
  }

/*.tile img { width: 44px; height: 44px; object-fit: contain; }*/

  .tile .glyph{
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
  }

  .gap{
    width: 26px;
    flex-shrink: 0;
  }

  @keyframes pop{
    0%{ transform: scale(0.4) rotate(0deg); opacity: 0; }
    100%{ transform: scale(1) rotate(var(--tilt, 0deg)); opacity: 1; }
  }

  .input-area label{
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: rgba(46,42,38,0.65);
    margin-bottom: 8px;
  }

  #textInput{
    width: 100%;
    font-family: 'Nunito', sans-serif;
    font-size: 20px;
    font-weight: 600;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
  }

  #textInput:focus{
    border-color: var(--indigo);
    box-shadow: 0 0 0 3px rgba(76,91,140,0.15);
  }

  #textInput::placeholder{
    color: rgba(46,42,38,0.35);
    font-weight: 500;
  }
  .beeld{
        grid-column: span 3;
  }

@media screen and (max-width:1068px){
	.tile {
		width: 100px;
		height: 100px;
		border-radius: 10px;
	}
}