/* ===================== vars used through all pages ================================= */
:root {
    /* ======== basic unities ========*/
    --hand:25vmin;
    --basic:1.5vmin;
    --suit-card-height: calc(var(--basic)*2.5); /*2.1em;*/
    --suit-symbol-height: calc(var(--basic)*2.5);/*4vmin;   2.7rem; */
    --s-line-height:1.4;
/* eenheden */
--playfield:calc(var(--hand)*3);
/* --hand:15em; */
--zoom:80%;
--text-normaal:2em;
--text-alert:1.5em;
--fontsize-NESW:2em;
--NT:2.5em;
/* ======== BBO colors ============*/
/* cards*/
--club:#000000;
--diamond:#CB0000;
--heart:#CB0000;
--spade:#000000;
/* other*/
--background-NESW:rgb(203,203,203);
--bridgekleed:rgb(42,100,25);/* --bridgekleed: #106610;*/
--bridgekleed-transp:rgb(42,100,25,0.95);/* --bridgekleed: #106610;*/
--afko-NESW: rgb(64,102,149);
--aan-slag: rgb(247,208,47);
--aan-debeurt: rgb(247,208,47);
--bidding-background: rgb(164,203,203);
--background-hand:rgb(203,203,203);
--vul:rgb(186,39,26);
--vul-transp:rgb(186,39,26,0.7);
--notVul:white;
--NESW:#406695;
--lightgreen: #4CAF50;
--dark:black;
--white:white;
--paars:rgb(91,47,138);
--orange:rgb(233,125,54);
/* ===================== BBO RGB ====================
--background-NESW:rgb(203,203,203);
--bridgekleed:rgb(42,100,25);
--afko-NESW: rgb(64,102,149);
--aan-slag: rgb(247,208,47);
--bidding-background: rgb(164,203,203);
--background-hand:rgb(203,203,203);
*/
/* ======================== borders ======================= */
--border-vragen:var(--border-thick) solid var(--bridgekleed);
--border-modal: 4px solid var(--aan-debeurt);
--border-vul:   4px solid var(--vul);
--border-video: 4px solid var(--vul);
--border-BBO:   4px solid var(--aan-debeurt);
--border-miniatuur:4px solid var(--aan-debeurt);
--border-quiz:  4px solid var(--vul);
--border-x:     4px solid var(--lightgreen);

--border-radius:1vh;/*15px*/
--small-radius: 0.4vh;/*5px; */
--border-radius-up:var(--border-radius) var(--border-radius) 0 0;
--border-radius-down:0 0 var(--border-radius) var(--border-radius);
--border-thin: 2px;
--border-thick: 4px;
--border-xthick: 5px;
}/*========== end of :root ================== */
/* ====== vars are set let's begin ==========*/
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    font-family: Arial, 'Courier New', Courier, monospace;
    padding-top: 1vw;
    width: 100vw;
    height: 100vh; 
    background-color: var(--bridgekleed); 
    font-size:var(--basic);
}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;}
/* div{display:flex} */
ol{
    margin-top:0.5em;
    padding-inline-start: 0.9em;
}
ol li{
    margin-inline-start:0.5em;
}

iframe{
    border:0;
}
video{border:4px solid var(--aan-debeurt);z-index:999;width:100%}
/* ===================== buttons behaviour ======================================= */
button{
    display:inline-block;
    border:var(--border-thin) solid;

    padding:0.5em 1em;
    margin-bottom:0.5em;
    font-size:0.8em;
  
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    background-color:inherit;
    text-align:center;
    cursor:pointer;
    white-space:nowrap;
}
button:hover{
    box-shadow:0 0.5em 1em rgba(0,0,0,0.2),0 0.5em 1em 0 rgba(0,0,0,0.19);
    background-color:var(--bridgekleed); 
    color:white;
    transform: scale(1.1);
    cursor:grab;

}
button[data-video]{
    border-color: var(--orange);
}
button[data-pdf]{
    border-color: var(--lightgreen);
}
button[data-miniatuur]{
    border: var(--border-thick) solid var(--aan-slag);
}
button[data-board]{
    border-color: var(--aan-slag);
}
button[data-bbo2]{
    border-color: var(--aan-slag);
}
button[data-bbo]{
    border-color: var(--aan-slag);
    }
button[data-quiz]{
    border: var(--border-thick) solid var(--vul);
}
button[data-comp]{
    border-color: var(--lila);
}
button[data-article]{
    border: var(--border-thick) solid var(--aan-slag);
}
button[data-pres]{
    border-color: var(--paars);
}


/* =========== modal ====================*/
#modal-overlay {
    display:none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    /* padding-top:2em; */
    width: 100%;

    /* font-size:var(--basic-font-size); */
    background: var(--bridgekleed-transp);

    overflow: hidden;
}
#modal-window {
    position: absolute;
    animation: animatezoom 0.6s;

    display:none;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height:80vh;
    width:80vw;

    background-color: var(--bridgekleed);
    /* border: var(--border-thick) solid var(--aan-debeurt); */
}
@keyframes animatezoom{
    from{transform:scale(0)}
    to{transform:scale(1)}
}
.modal-close-wrap {
    display: flex;
    align-items: center;
    justify-content:flex-end;
    width:100%;
    height:0;
  }
#modal-close{
    margin-right:-2.5em;
    margin-top:5em;

    border:var(--border-thick) solid var(--vul);

    height:2em;
    width:2em;
    background-color: var(--vul-transp);
}
#modal-close:hover{
    cursor:grab;
    background:var(--bridgekleed)
}

#modal-wrap{
    display:flex;
    flex-direction:row;
    justify-content: center;
    width:100%;
    height: 100%;
    opacity:1;
    background-color: var(--bridgekleed);
}
#iframe-wrap{
    display:flex;
    justify-content: center;
    align-items: center;
    margin:auto;
    width:100%;
    height: 95%;
}
#display-frame{
    border:4px solid var(--aan-debeurt);
    width:100%;height: 100%;
}
#caption{
    color:white
}
/* ======= modal for answer ======== */
@media (min-width:1px) { /* sneaky trick targets modern browsers only */
	.noShow {
		display:table;
		position:fixed;
		top:0;
		left:-999em;
		width:35vw;
		min-height:15vh;
        background:rgb(42,100,25,0.8);
		opacity:0;
		transition:left 0s 0.3s, opacity 0.3s;
	}
	/*#answerModal:target */
    .show {
        top: 3vw;
		left: 62vw;
        z-index:999;
		opacity:1;
		transition:left 0s, opacity 0.3s;

        margin-top:0.3em;
        font-size: 1.5em;
        line-height:1.5;
        color:var(--white);
        padding:0.3em 0 0 0.3em;

        border:var(--border-thin) solid var(--white);
        display:block;
	}
}
/* ==============*/
.miniatuur-wrap{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;

	row-gap: 2em;
	background-color: var(--bridgekleed);
}
#thema {
	padding:0.5em;
	background-color: var(--aan-debeurt);
	width:100%;
	/* height:3em; */

	display:flex;
	justify-content:center;
	align-items: center;
}
/* ==================== THE GRID =====================*/
.playfield {
	display:grid;
	grid-template-rows: var(--hand) var(--hand) var(--hand);
	grid-template-columns: var(--hand) var(--hand) var(--hand);
	grid-template-areas:	"b n qa"
							"w t e"
							"st s bb";
	gap:0.6em;
	background-color: var(--bridgekleed);

	padding:0;
}
.board-data{
	margin-top:1em;
	margin-left:1em;
	width:10em;
	height:10em;

	display:inline-grid;
	grid-template-columns: 2em 6em 2em;
	grid-template-rows: 2em 6em 2em;
	grid-gap:0.15em;

    /* font-size: 1em;
	font-weight: bolder; */
}

.board-data > div{
	display: flex;
	justify-content: center;
	align-items: center;

	font-size: 1.5em;
	/* font-weight: bold; */
}
#board-num {
	font-size: 3em;
    background-color:var(--bidding-background);
	color:var(--dark); 
	/* font-weight: bolder;   */
	/* display: flex;
	align-items: center;
	justify-content: center; */
}
/* ======== positions in grid playfield ======== */
#board-data {grid-area:b;}
#QA-container{grid-area:qa;}
#lower-left {grid-area:st}
#lower-right{grid-area: bb}
#QA-container>div{font-size: calc(var(--basic)*1.5);}
#table {grid-area:t}
/* ============= hands ==============*/
#North {grid-area:n}
#West {grid-area:w}
#East {grid-area:e}
#South {grid-area:s}
/*==================== speler en kaarten ================*/
.NESW-container{
    display:flex;
    flex-direction: column;
    gap:0.5em;
    /* justify-content: space-between; */
	cursor:default;
	background-color: var(--background-NESW);
	border-radius: var(--border-radius);
/* 
    display:grid;
    grid-template-rows: 4em 1fr;
    grid-template-columns: 1fr;
    row-gap: 1em;
    grid-template-areas:    "player"
                            "cards"; */
}
.speler {
	grid-area:player;
    border-radius: var(--border-radius-up);
    background-color: white;
   
    font-size: var(--fontsize-NESW);
    font-weight:600; 

	text-align: center;
	color:black;
    
    display:grid;
    grid-template-columns: calc(var(--hand)*0.20) 1fr;
    grid-template-rows: calc(var(--hand)*0.20);
    grid-template-areas:"NESW name";
  }
.NESW {
    grid-area:NESW;

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

    /* padding:0.4em;
    margin:0.07em; */
    background-color:var(--NESW);
    border-radius: var(--border-radius) 0 0 0;
    color:var(--white);

}
.name {
    grid-area:name; 
    /* margin:0.1em 0.1em 0.1em 0; */

    display:flex;
    align-items: center;
    justify-content: center;
    padding:0.5em;
    border-radius: 0 var(--border-radius) 0 0 ;
    font-size:0.9em;
    letter-spacing: 0.2em;
}
/*  card area */
.cards { 
	margin:0 0.5em 0.5em;
/*	line-height: var(--suit-line-height);*/
/*	border:var(--border-thin) solid white;*/
/*	background-color: var(--background-hand);*/
  
	display:grid;
	grid-template-columns: calc(var(--hand)*0.17) 1fr;
	grid-template-rows: repeat(4,calc(var(--hand)*0.17));
    column-gap:0.5em;
	/* row-gap:0.25em; */
	grid-template-areas:    "s sc"
							"h hc"
							"d dc"
							"c cc";
}
/* ==========table definition========= */
#table{
	display:grid;
	grid-template-columns: repeat(3,33.3%);
	grid-template-rows: repeat(3,33.3%);
	grid-template-areas: ". north ."
						 "west . east"
						 ". south .";
    padding:0.5em;
    border: var(--border-thick) solid white;
}
#table-N,#table-E,#table-S,#table-W{display: flex;padding:0.3em 0;}
#table-N {grid-area:north}
#table-E {grid-area:east;}
#table-S {grid-area:south;}
#table-W {grid-area:west;}

.lower-left{
	margin-top:1.2em;
	color:white;

	display:grid;
	grid-template-columns: 1fr 8em 2.5em 2.5em;
	grid-template-rows: 1.25em 1.25em 2.5em 2.5em 1fr;
	grid-column-gap:1em;
}

.speelsoort-container{
	grid-column: 2/3;
	grid-row: 1/4;
	background-color: var(--bidding-background);

	display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: 2em var(--spade);
}
.speelsoort-header {
	grid-row: 1/2;
	text-align: center;
	font-size: 1.2em;
	font-weight: bold;
	letter-spacing: 0.2em;
	color:black;
}
.speelsoort{
	grid-row: 2/3;
	font-size:var(--trump);
	text-align: center;
}
#contract{
	display:flex;
	align-items: center;
	justify-content: center;
	color:var(--dark)
}
/* contract en aantal slagen */
#NT{font-size: var(--NT) ;color:var(---light);display:none;}
#S{color:var(--spade);display:none}
#H{color:var(--heart);display:none}
#D{color:var(--diamond);display:none}
#C{color:var(--club);display:none;}

.labelNS{ grid-column:3/4; grid-row:1/2}
.labelEW{ grid-column:3/4; grid-row:2/3}
#tricksNS{ grid-column:4/5; grid-row:1/2}
#tricksEW{ grid-column:4/5; grid-row:2/3}

/* =======buttons lower-right corner area i =========*/
#lower-right{
	margin-top:1em;

	display:grid;
    grid-template-columns: calc(var(--hand)*1.2);
	grid-template-rows: 2.0em 10em;
	grid-template-areas: "a"
						 "b";
	grid-gap: 0.3em;
}
#lower-right>div{
    font-size: calc(var(--basic)*1.1);
}
/* ============== besturing van het spel ================ */
.center{
	grid-area: a;

	display:flex;
	gap: calc(var(--hand)*0.2); 
	justify-content: center;
}
/* ============= voor invoer van de autoPlay string ====*/
#FF,#FB,#previous,#next{
    margin-bottom:0;
	color:var(--aan-debeurt);
	font-size:1em;
	font-weight: bold;
	border:2px solid var(--aan-debeurt);
	background-color:inherit;
	padding:0;
	box-sizing: border-box;
	border:transparent;
	position: relative;
	display: block;
	transform: scale(2);
	/* width: var(--basic);
	height: var(--basic); */
	font-weight: bold;
}
#FF:hover,#FB:hover,#previous:hover,#next:hover{
	transform:scale(2);
	color:var(--aan-debeurt);
    cursor:grab;
	box-shadow: none;
}
#FF>i:hover,#FB>i:hover,#previous>i:hover,#next>i:hover{
	transform:scale(1.5)
}
#comment{
	color:black;
	font-size: 1.5em;
}
#commentButton{
	display:none;
	background-color: var(--bridgekleed);
	width:var(--basic);
}
dialog{
	height:25em;;
	width:20rem;
}
dialog::backdrop {
	background-image: linear-gradient(
	  45deg,
	  magenta,
	  rebeccapurple,
	  dodgerblue,
	  green
	);
	opacity: 0.75;
}
/* ========== rechts onder: explain cards or bids =====*/
#explain{
	grid-area: b;
	display:inline-block;
	padding:0.3em;
	/* border:var(--border-thin) solid var(--aan-debeurt); */
    /* font-size:calc(var(--basic)); */
}
.show-explain{
    font-weight:normal;
    background-color:transparent;
    line-height:1.5em;    
    color:var(--aan-debeurt);
}
.show-alert{
    color:var(--vul);
    background-color:white;   
    font-weight:bold;
}

/* ========== cards on table ===================*/
.card-on-table {
    display:flex;
    justify-content: center;
    align-items: center;
	background: var(--background-hand);

	/* display:grid;
	grid-template-rows: var(--suit-card-height);
	grid-template-areas: "suit card"; */

	column-gap: 0.1em;
	padding: 0 1em;/* top LR bottom*/
    width:100%;
	border-radius:var(--border-radius);
}
.cards-wrap{
    display:flex;
    align-items: center;
    /* height:100%; */
}
.card-suit-on-table{
	/* grid-area:suit;
	text-align: left; */
    font-size: calc(var(--suit-card-height));

	}
.card-number-on-table{
	grid-area: card;
	padding-top:0.4vh;
	font-size: calc(var(--suit-card-height));
}
.card-on-table>p{
	display:inline-flex; 
	/* align-content: center;
	text-align: center; */
}
p.card-suit-on-table{
	justify-content: end;
}
p.card-number-on-table {
	justify-content: start;
}
.not-played-card:hover{
    display:inline-flex;
	/* height:100%; */

	background-color: #F7D046;
}
.not-played-card{
    display:flex;
    align-items:flex-end;
    text-align:center;
}
.played-card {	
    display:flex;
    align-items:flex-end;
	opacity: 30%; 
}
/* =====================cover east and west cards, onclick show ==================*/
.crd-back {	
	z-index:2;
	height:var(--hand); 
	border-radius: var(--border-radius);
	margin-left:calc(var(--hand)*0.20);
}
.crd-back-north {grid-area:n}
.crd-back-east {grid-area:e}
.crd-back-south {grid-area:s}
.crd-back-west {grid-area:w}
/* =================== bidding =============================*/
#bidding-container { 
    background-color: white;

	border-radius: var(--border-radius);
    width:calc(var(--hand)*1.0);
    display:grid;

    grid-template-rows: calc(var(--hand)*0.20) 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:    "dirs"
                            "bids";
}
/* ============ NESW ===============*/
#directions {
    grid-area:dirs;
  
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
#directions>div{
    display:flex;
    justify-content: center;
    align-items: center;

    font-weight: bold;
    font-size: var(--fontsize-NESW);
}

#dirN{grid-column: 1;border-radius: var(--border-radius) 0 0 0 ;}
#dirE{grid-column: 2;}
#dirS{grid-column: 3;}
#dirW{grid-column: 4;border-radius: 0 var(--border-radius) 0 0 }
  
/* =============== bidding bids =================*/
#bidding {
    grid-area:bids;
    width: 100%;
    /* margin-top:0.1em; */
    padding-top:0.2em;
    background-color: var(--bidding-background); 
    border-radius: var(--border-radius-down);

    display:grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(5,calc(var(--hand)*0.15));
    grid-auto-flow: row;
}

#bidding>div{
    display:flex;
    justify-content: center;
    align-items: center;
}

.yellow{/* voor het vraagsteken*/
    /* border:var(--border-thin) solid var(--heart); */
    font-size: calc(var(--basic)*2.5);
    color:var(--heart);
    background-color: var(--aan-debeurt)
}
.yellow::after{
    content:"?";
}
  /*  ===================== in button/option/tekst areas???  ================= 
.cardvalue{
    grid-area:a;

	font-size:var(--suit-card-height);
	text-align: center;
	line-height: var(--suit-card-line-height);
/*================ kleuren en afmetingen van de symbolen en waarden ================= */
.S-intxt {color:var(--spade);}
.H-intxt {color:var(--heart);}
.D-intxt {color:var(--diamond);}
.C-intxt {color: var(--club);}
.N-intxt {
    color:inherit; 
    /* font-size:var(--suit-line-height) */
}

.S-intxt,.H-intxt,.D-intxt,.C-intxt{
    font-size:calc(var(--basic)*2.0);
    text-align: center;
}
/* ================== in hand-area ==================*/
/* suit-symbols*/
.S-color{grid-area:s;color:var(--spade)} 
.H-color{grid-area:h;color:var(--heart)}
.D-color{grid-area:d;color: var(--diamond);padding-left:0.04em}
.C-color{grid-area:c;color: var(--club);}
.S-color,.H-color,.D-color,.C-color{
	font-size: var(--suit-symbol-height);/*(1.9rem,2.8vw,3.6rem);*/
    /* line-height:var(--s-line-height); */
    display:flex;
    align-items: center;
    justify-content: center;
    transform:scaleX(1.1);
}
.N-color{	font-size: var(--suit-card-height);}
.P,.D,.X,.XX,.RD{font-size: var(--suit-card-height);}
/* .Q{font-size: 1rem;} */
/* zelfde zonder grid*/
.S-suit{color:var(--spade)} 
.H-suit{color:var(--heart)}
.D-suit{color: var(--diamond)}
.C-suit{color: var(--club);}
.N-suit{color:var(--black);
    font-size:var(--suit-card-height)}
.S-suit,.H-suit,.D-suit,.C-suit {
	font-size: var(--suit-symbol-height);
    line-height:var(--s-line-height);
    display: flex; 	
    justify-content: center;
	align-items:baseline;
    padding-bottom:0.15em;
}
/* card values */
.S-cards{grid-area: sc}
.H-cards{grid-area: hc}
.D-cards{grid-area: dc}
.C-cards{grid-area: cc}
.all-cards,.S-cards,.H-cards,.D-cards,.C-cards,.N-cards{
	font-size: var(--suit-card-height);
    /* line-height:var(--s-line-height); */
    display:flex;
    flex-direction: row;
    align-items:center;
    justify-content: start;
}

/* ===================== vulnerability ======================*/
.vul{background-color:var(--vul);color:white}
.nvul{background-color:var(--notVul); color:black}

/* ================= reparatie scroll bar ====================*/
#fauxbody{
	display:flex;
	justify-content: center;
	align-items: center;
	width:100%
}
#fauxInner {
	display:flex;
	flex-direction:column;
    justify-content: space-between;
	row-gap:2em;
	background:var(--bridgekleed)
}