:root {
    --fontcolor:white;
    --background:#13131f;
    --surface: #42424c;
    --layer: #303030;
}
body {
    background:var(--background);
    font-family: var(--accentfont);
}
body:has(.dragme) {
    overflow: hidden;
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/inter-v19-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/inter-v19-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/inter-v19-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('/fonts/inter-v19-latin-800.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('/fonts/inter-v19-latin-900.woff2') format('woff2');
}






p {
    color:inherit;
}
.answerscreen button.iscorrect, .typedanswer.iscorrect,
.puzzelitem.iscorrect,
.pmitem.iscorrect {
    border:1px solid green;
}
.answerscreen button.iswrong, .typedanswer.iswrong,
.puzzelitem.iswrong,
.pmitem.iswrong {
    border:1px solid var(--classicred);
}
.selectedanswer {
white-space: nowrap;
background: #14141f;
padding: 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
line-height: 1;
}

.logo {
    justify-content: space-between;
    padding: 10px;
    text-decoration: none;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
}
.logo.title {
    justify-content: center;
}
.handle svg {
    display: none;
}
.handle .svg {
    color: var(--fontcolor);
}
.dragme .handle .svg {
    display: block;
    opacity: 0.75;
}
.respondlimit:empty {
    display: none;
}
.inputbox {
    padding: 10px;
    display: grid;
}
.short {
    text-align: center;
}

.typedanswer {
    background: var(--surface);
    color: var(--fontcolor);
    padding: 10px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 10px;

}
.inputfield {
    display: grid;
    padding: 8px 16px;
    background-color: var(--layer);
    margin: 0 auto;
    width: 100%;
}
.inputfield input {
    outline: none;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}
body input, body input[type="text"] {
    padding:10px;
}

#submitbtn button, #jointeam button, .submitbutton button {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
.submitbutton {
    background-color: var(--layer);
    width:100%;
    margin:0 auto;
    padding:8px 16px;
}

button.shake {
    animation: shake 1s ease 0s 1 normal forwards;
}

.slidein {
    animation: slidein 1s ease 0s 1 normal forwards;

}

.tab.waitforstart {
    display: flex;
    justify-content: center;
}

.endtext {
    display: grid;
    gap: 0.75em;
    justify-content: center;
    background: var(--surface);
    padding: 1em 1em;
    border-radius: 5px;
    color: var(--fontcolor);
    text-align: center;
    max-width: 400px;
    width: 100%;
}
.endtext a {
    display: flex;
    justify-content: center;
    
}
.icon {
    display: flex;
    justify-content: center;
    font-size: 24px;
    min-width: 40px;
    border-radius: 5px;
    align-items: center;
    font-weight: 600;
}
.connection {
    border-radius: 50%;
    height: 8px;
    width: 8px;
    display: none;
    justify-content: center;
    background: #5b0909;
}
.connection.connected {
    background-color: green;
}
.connection p {
    margin:0;
    font-size: 10px;
}
.icon svg {
    height: 1.6rem;
    width:1.6rem;
}
.icontainer h2, .colorbar {
    animation: fadein 1s ease 0s 1 normal forwards;
}
.note {
    padding:8px;
    text-align: center;
}
.note h2 {
    font-size: 18px;
}

.shorttext h2 {
    color:white;
    padding: 16px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px #0000005e;
}
.icontainer {
    display: grid;
    background-color: var(--layer);
    padding:8px 16px;
}

h2.scoring {
    animation: scoring 2s ease 0s 1 normal forwards;
}
@keyframes scoring {
	0% {
		transform: scale(0.5);
	}

	100% {
		transform: scale(1);
	}
}

.icontainer .message {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    text-align: center;
}

.icontainer:has(.success),
.topp:has(.success) .player {
    background-color: green;
}
.icontainer:has(.wrong),
.topp:has(.wrong) .player {
    background-color: var(--classicred);
}
.icontainer:has(.semigood),
.topp:has(.semigood) .player {
    background-color:#ff5b00;
}
.icontainer:has(.pending),
.topp:has(.pending) .player  {
    background-color: blue;
}
.colorbar {
    padding:8px 16px;
}
.colorbar h2 {
    display: flex;
    justify-content: center;
    padding: 8px 4px;
    text-align: center;
    font-size: 22px;
    line-height: 1;
    color: white;
    font-weight: 400;
}
.colorbar h2 p {
    display: inline-block;
    margin: 0;
}
.colorbar h2 br {
    display: none;
}
.scoringsub {
    font-weight: 600;
    color: #777;
}
.icon.yourposition {
    border-radius: 50%;
}
.colorbar {
    font-weight: 600;
    font-size: 18px;
}
.player svg {
    height: 1.2rem;
    width: 1.2rem;
}
.player .grouped {
    overflow: hidden;
    align-items:center;
}
.pluspoints {
    font-size: 12px;
    color:white;
}
.player .playername {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    gap:8px;
    color: white;
    letter-spacing: 0.03em;
    font-family: var(--accentfont);
    align-items: baseline;
}
.playername .teamspan {
    font-size: 80%;
}
.grouped {
    display: flex;
    align-items: center;
    gap:8px;
}

.top > div:empty {
    display: none;
}
.form h2 {
    font-size: 24px;
}
.result {
    display: flex;
    flex-direction: column;
    gap:10px;
    align-items: center;
    padding:20px;
}

[data-bg="normal"] {
    background-color:var(--surface);
    color:var(--fontcolor);
}
[data-bg="normal"] svg {
    color: var(--fontcolor);
}
[data-bg="black"] {
    background-color: black;
    color:white;
}
[data-bg="dark"] {
    background-color: var(--layer);
    color:white;    
}
[data-bg='green'] {
    background-color: var(--classicgreen);
    color: white;
}
[data-bg='orange'] {
    background-color: var(--classicorange);
    color: white;
}
[data-bg='red'] {
    background-color: var(--classicred);
    color: white;
}
[data-bg='blue'] {
    background-color: var(--classicblue);
        color: white;
}
[data-bg='gold'] {
    background-color: gold;
    color:white;
}
[data-bg='silver'] {
    background-color: silver;
    color:white;
}
[data-bg='bronse'] {
    background-color:brown;
    color: white;
}
.result .resulttext {
    font-size: 20px;
}
.formerror:empty {
    display: none;
}
.error {
    background: var(--surface);
    width: 100%;
    color: var(--classicred);
    font-weight: bold;
    padding: 0.5em;
    border-radius: 5px;
}
.modal {
	position: fixed;
    padding: 10px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 3;   
    display: flex;
}
.modal-header,.modal-body,.modal-footer {
	padding:10px;
}
.modal-header {
	display: flex;
	justify-content:center;
	align-items: center;
	flex-flow: wrap;
}
.modal-footer {
	display: flex;
	justify-content: center;
	align-items: center;
    padding:10px;
}
.modal-header,
.modal-footer {
    background-color: #fafafa;
    padding:1em;
}
.modal-content {
	position: relative;
    background-color: white;
	margin: auto;
	z-index: 2000;
	padding: 0;
	max-width: 650px;
	border-radius: var(--radius);
	overflow:hidden;
    max-width: 400px;
}

.load {
    display: block;
    font-size: 120%;
    color: rgba(21, 19, 19, 0.482);
    width: 3em;
    height: 1em;
    background: radial-gradient(closest-side, currentColor calc(100% - 1px), transparent) 0 50%,
        radial-gradient(closest-side, currentColor calc(100% - 1px), transparent) 1.25em 50%,
        radial-gradient(closest-side, currentColor calc(100% - 1px), transparent) 2.25em 50%;
    background-size: 1em 1em, .5em .5em, .5em .5em;
    background-repeat: no-repeat;
    animation: loader .6s infinite;
}
@keyframes loader {
    33% {
        background-size: .5em .5em, 1em 1em, .5em .5em;
        background-position: .25em 50%, 1em 50%, 2.25em 50%;
    }

    66% {
        background-size: .5em .5em, .5em .5em, 1em 1em;
        background-position: .25em 50%, 1.25em 50%, 2em 50%;
    }
}
h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    color:var(--fontcolor);
    font-weight: 600;
}
h1{
    margin: 0.5em 0;
    line-height: 1;
    font-size: 24px;
}
h2 {
    font-size: 20px;
}
img.logo {
    height: 60px;
    margin: 0 auto;
    width: auto;
}
.top, .bottom {
    display: grid;
    grid-template-rows: auto;
}
.middle {
    display: grid;
    align-items: center;
    padding:0;
    overflow: auto;
}
.middle:has(.answerscreen), .middle:has(.couple) {
    align-items: flex-start;
}

.middle:has(.pmresult) {
    align-items: flex-start;
}
.waitforstart h2 {
    text-align: center;
}


.join {
    display: flex;
    gap: 10px;
    text-align: center;
    flex-direction: column;
}
.position {
    background: black;
    min-width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 22px;
    padding: 8px;
}
.positiontext {
    padding:0.24em;
    color:inherit;
}

.subtext:empty {
    display: none;
}
.lowcontrast {
    filter:contrast(0.4)
}
.answerform {
    display: grid;
    gap:10px;
}
.form {
    background-color: var(--surface);
    display: flex;
    flex-direction: column;
    padding: 12px;
    max-width: 500px;
    margin: 0 auto;
    gap: 10px;
    border-radius: 0.5em;
}
.howtojoin {
    margin:  0 auto;
    max-width: 320px;
    padding:20px 10px 10px 10px;
    display: flex;
    text-align: center;
    justify-content: center;
}
.form .rejoinbutton {
    font-size: 22px;
}
.form.entergame {
    align-items:  center;
}
.form.entergame h1, .form.entergame h2 {
    text-align: center;
}
h2.rejointitle {
    font-size: 20px;
    margin-bottom: 0.5em;
    font-weight: normal;
}
.form p.noti {
    margin:0.5em 0;
}
button.joinnewevent {
background-color: var(--base);
    color: white;
    border-color: var(--base);
}
p.makequiz {
    text-align: center;
    margin:0.5em 0;
}
.form p.makequiz a {
    color:inherit;
    font-weight: bold;
}
.layover {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000000c7;
    z-index: 8;
    backdrop-filter: blur(2px);
    flex-direction: column;
    gap: 8px;
}
.instructions {
    padding: 12px 8px;
    display: flex;
    justify-content: center;
    font-size: 14px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1;
    background-color: var(--layer);
}
.instructions span.text {
    text-align: center;
}
.layover p {
    margin:0;
}
.codeinput {
    display: grid;
    gap:10px;
    width:100%;
}
.codeinput input, .form.entergame input  {
    font-size: 22px;
    width:100%;
}
.form p {
    text-align: center;
    font-family: var(--accentfont);
    margin:0;
    color:var(--fontcolor);
}
input {
    font-size: 1.2rem;
    text-align: center;
}
.player {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 8px 16px;
    background-color: var(--background);
    color: #ddd;
    font-weight: 600;
    font-family: var(--accentfont);
    overflow: hidden;
}
.player .points {
    text-align: center;
    max-width: 300px;
    display: grid;
    gap:4px;
    line-height: 1;
}
.player .points .label {
    font-size: 8px;
    text-transform: uppercase;
    color:white;
}
.player .points .units {
    font-weight: 600;
    font-family: var(--accentfont);
    letter-spacing: -0.03em;
    background-color: white;
    color: black;
    padding:4px;
    border-radius: 4px;
}


.top .timerline, .top .timerline:empty{
    display: flex;
    width: 100%;
    height:1vh;
    background-color: lightgray;
}

.puzzelscreen {
    display: grid;
    gap: 10px;
    align-items: center;
    align-self: flex-start;
    counter-reset: section;
}
.fillblanks select, .labelimage select {
    background: var(--surface);
    color: var(--fontcolor);
}

.puzzelitem, .dragitem, .pmitem {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 5px;
    line-height: 1;
    align-items: center;
    background: var(--surface);
    font-weight: 500;
    color: var(--fontcolor);
}
.puzzelitem {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}
.puzzelitem:has(svg) {
    grid-template-columns: auto 1fr auto;
}
.puzzelitem .counter::before {
  counter-increment: section;
  content:  counter(section);
}
.puzzelitem.sortable-chosen .counter::before {
    color: transparent;
}

button svg, .tab svg {
    height:1rem;
    width:1rem;
    display: flex;
    color:white;


}
.puzzelitem .handle {
    color:var(--fontcolor);
}
.puzzelitem .handle.showanswer {
    color:inherit;
}
#start {
    padding:16px;
}
.pairmatch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-self: flex-start;
    gap: 10px;
}
.sortable-ghost {
    background-color: transparent;
    color:transparent;
    border:2px dashed black;
}
.sortable-ghost .handle {
    color:transparent;
}
.pairmatch .column {
    display: grid;
    gap: 10px;
    grid-auto-rows: 1fr;
}
.fillblanks {
    align-self: flex-start;
    gap:10px;
    display: grid;
}
.fillblankform {
    display: grid;
    gap: 10px;
}
.sentence {
    background: var(--surface);
    color:var(--fontcolor);
    margin:0;
    padding: 1em;
    border-radius: var(--radius);
    line-height: 1.8;
}
.sentence .replace {
    font-weight: 600;
    background: var(--layer);
    padding: 0 2.5em;
    margin: 0 0.25em;
    border-radius: var(--radius);
    color:transparent;
}
.sentence .replace.fbresult {
    color:inherit;
}
.jointeam {
    display: grid;
    align-items: flex-start;
    align-self: flex-start;
    gap: 8px;
}
.jointeam label {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 10px;
    background: var(--surface);
    border-radius: var(--radius);
    font-weight: 600;
    color: var(--fontcolor);
    
}
.labelimage {
    display: grid;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
}
.labelimage span.index {
    background: black;
    min-width: 30px;
    color: white;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius);
    border: 1px solid white;
}

input {
    outline: none;
}
.labelinput {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}
.labelinput .index {
    height:100%;
}
.labelinput input {
    text-align: start;
}
.greenbg {
    background-color: var(--classicgreen) !important;
}
.redbg {
    background-color: var(--classicred) !important;
}
#openvraagscreen .message {
    display: grid;
    gap: 20px;
}
.opensubmissions p {
    background: white;
    padding: 8px;
    font-weight: 600;
    border-radius: 5px;
    margin: 8px 0;
}
.noteams h2 {
    text-align: center;
}
.noteams {
    background: var(--surface);
    padding: 1em;
    border-radius: 0.25em;
}

.openvraag, .woordwolk {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    overflow: hidden;
}

.openvraag .opensubmissions, .woordwolk .opensubmissions {
    overflow: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    text-align: center;
}
button {
    border-color: transparent;
    border-radius: 5px;
}
.middle button.yourchoice {
    border:2px solid var(--surface);
}
.dots span {
    text-align: center;
}

.pos {
    width: 1.4em;
    height: 1.4em;
    border-radius: 0.2em;
    color:white;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-transform: uppercase;
    background-color: #303030;

}
.reviewfield textarea {
    width: 100%;
    border-radius: 0;
}
.reviewfield {
    padding: 10px;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
    background: var(--surface);
}

button .answertext {
    display: flex;
    width:100%;
    line-height: 1.1;
}
.answerscreen.mc {
    display: grid;
    gap: 10px;
    align-self: flex-start;
    max-width: 500px;
    width:100%;
    margin: 0 auto;
    height: auto;
}

.pmitemright {
    display: flex;
    justify-content: space-between;
}
.answerscreen button {
    flex: 1 1 100%; 
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    text-align: start;
    line-height: inherit;
    height: auto;
    display: grid;
    grid-template-columns: auto 1fr;
    background-color: var(--surface);
}
.answerscreen button:has(.selectedanswer) {
    grid-template-columns: auto 1fr auto;
}

.answerscreen.mc button,
.answerscreen.poll button,
.answerscreen.boolean button {
    color: var(--fontcolor);
    padding:12px 8px;
    font-weight: 500;
}
.colorlist .coloritem:nth-child(4n+1) .colored {
    background-color: var(--red);
}
.colorlist .coloritem:nth-child(4n+2) .colored {
    background-color: var(--orange);
}
.colorlist .coloritem:nth-child(4n+3) .colored {
    background-color: var(--blue);
}
.colorlist .coloritem:nth-child(4n+4) .colored  {
    background-color: var(--green);
}
.answerscreen.poll {
    display: grid;
    height: 100%;
    gap: 10px;
}
.answerscreen.boolean {
    display: grid;
    gap: 10px;
}
.answerscreen.boolean button {
    width: 100%;
}
.answerscreen button.selected {
    border: 2px solid var(--btncolor);
}
.form button {
    width: 100%;
}
.eindstand {
    display: grid;
    height: 100%;
}
.scoreboard {
    align-self: flex-start;
    gap: 8px;
    display: grid;
}
.sbrow {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 16px;
    background: var(--surface);
    align-items: center;
    padding: 10px;
    color: white;
    border-radius: 4px;
    font-weight: 400;
}
.sbrow.you {
    background-color: var(--btncolor);
}


@keyframes blink {
	0%,
	50%,
	100% {
		border: 2px solid blue;
	}
	25%,
	75% {
		border: 2px solid var(--surface);
	}
}
.sbranking {
    font-weight: 600;
}
.sbpoints {
    background: white;
    color: black;
    padding: 2px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--accentfont);
    letter-spacing: -0.03em;
}
.sbplayer {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@keyframes yourscore {
	0% {
		transform: scale(0);
	}

	100% {
		transform: scale(1);
	}
}
[data-visibility='hidden'] {
    visibility: hidden;
}

.timerline[hidden]:empty,
.timerline[hidden],
[hidden],
[data-view='hidden'] {
    display: none !important;
}

[data-view='hidden'] {
    display: none;
}

@keyframes slidein {
	0% {
		opacity: 0;
		transform: translateY(-150px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70% {
		transform: translateX(-8px);
	}
	20%,
	40%,
	60% {
		transform: translateX(8px);
	}
	80% {
		transform: translateX(8px);
	}
	90% {
		transform: translateX(-8px);
	}
}

@keyframes fadein {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}