/* CardFlip - Game Area */

:root{
  --cardflip-board-top:60px;
  --cardflip-board-bottom:60px;
  --cardflip-board-gap:clamp(8px,1.2vmin,16px);
}

html,
body{
  height:100%;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
}

input,
textarea{
  user-select:text;
  -webkit-user-select:text;
  -ms-user-select:text;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background-color:#e5f0df;
  color:#fff;
  font-family:Arial,sans-serif;
}

body.modal-open{
  overflow:hidden;
}

#background-video{
  position:fixed;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

/* Shared header/footer frames live in ../css/header.css and ../css/footer.css. */

.header-block{
  min-width:45px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.header-label{
  color:#aeb9ca;
  font-size:8.6px;
  font-weight:600;
  letter-spacing:.06em;
  line-height:1;
  text-transform:uppercase;
}

.header-value,
.header-timer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:12.6px;
  font-weight:700;
  line-height:1;
}

body.prestart .gameHeaderContext .gameContextGroup > :not(.gameContextTitle){
  display:none;
}

#timer-title{
  display:none;
}

#timer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:24px!important;
  font-weight:700;
  line-height:1;
}

.time-value{
  display:inline-block;
  font-size:inherit;
  font-weight:700;
  line-height:1;
}

#cards-flipped-tracker{
  color:#fff;
}

#game-container{
  position:relative;
  z-index:0;
}

#cardflip-area-wrapper{
  position:fixed;
  top:var(--cardflip-board-top);
  right:0;
  bottom:var(--cardflip-board-bottom);
  left:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow-x:hidden;
  overflow-y:auto;
  padding-block:8px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

#cardflip-area-wrapper::-webkit-scrollbar{
  display:none;
}

#cardflip-cards-container{
  display:grid;
  width:max-content;
  max-width:calc(100vw - 24px);
  margin-block:auto;
  gap:var(--cardflip-board-gap);
  align-items:start;
  justify-items:center;
}

body.prestart #cardflip-cards-container{
  display:none;
}

#input-blocker,
.disabled-overlay{
  display:none;
}