jeopardy.css

body {
  background-color:#2a3698;
  height:100%;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  overflow-y:hidden;
  margin:0px;
}

.table-cell {
    width: calc(90% / var(--categories));
    background-color:#2a3698;
}

.points {
    font-size: 40px;
}
#question-row {
    /* height: calc(100% / (var(--grades) + 1)); */

    border:3px solid black;
}
#categories {
    /* height: var(--header_height); */
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;

    border-left:3px solid transparent;
    border-right:3px solid transparent;
}
#question-row .table-cell {
    font-size: 24px;
    vertical-align:middle;
    text-align:center;
    cursor:pointer;
    border:3px solid black;
    color: #fff;
    border-radius:10px;
}



#categories .table-cell {
    padding: 0px 0px 0px 0px;
    border-left:3px solid transparent;
    border-right:3px solid transparent;

    font-size:34px;
    text-align:center;
    color:#fff;
    vertical-align: bottom;
}

.solved-by-team-1 {
    background-color: green;
}
.team-1 {
    color:green
}
.buzzer-border-team-1 {
    border-color:green
}
.empty .points{
    opacity:0;
}

.solved-by-team-2 {
    background-color: red;
}
.team-2 {
    color: red;
}
.buzzer-border-team-2 {
    border-color: red;
}
.solved-by-team-3 {
    background-color: yellow;
}
.team-3 {
    color: yellow;
}
.buzzer-border-team-3 {
    border-color: yellow;
}
.solved-by-team-4 {
    background-color: lightblue;
}
.team-4 {
    color: lightblue;
}
.buzzer-border-team-4 {
    border-color: lightblue;
}
.solved-by-team-5 {
    background-color: saddlebrown;
}
.team-5 {
    color: saddlebrown;
}
.buzzer-border-team-5 {
    border-color: saddlebrown;
}
.solved-by-team-6 {
    background-color: DeepPink;
}
.team-6 {
    color: DeepPink;
}
.buzzer-border-team-6 {
    border-color: DeepPink;
}


.modal-wrapper {
    display:none;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    height:100%; /* stupid safari */
    width:100%; /* stupid safari */
}

#tableau, #title-tableau {
    width: 100%;
    height: 100%;
    /* border-collapse: collapse; */
    border-collapse: separate;
    border-spacing: 0px;
    border:3px solid black;
    padding: 0px 0px 0px 0px ;
    margin: 0px 0px 0px 0px ;
    background-color: black;
}
#tableau{
    table-layout: auto;
}
#title-tableau {
    table-layout: fixed;
}
#daily-double-modal {
    background-color:rgba(0,0,0,.5);
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    color: #fff;
    font-size: 60px;
}
#daily-double-modal h1 {
    font-size: 80px;
}
#daily-double-modal #daily-double-amount {
    font-size: 60px;
}

#teams-modal {
    background-color:rgba(0,0,0,.5);
    text-align:center;
    flex-wrap: wrap;
    justify-content: center;
    align-items:center;
}

.team {
    text-align:center;
    border-radius:15px;
    display:inline-block;
    margin-left:10px;
    margin-right:10px;
    border:1px solid black;
    padding:5px;
    min-width:200px;
}

.team h3.name {
    border-bottom:2px solid black;
    font-size:30px;
    text-align:center;
    color:black;
    display:inline-block;
}

.team h3.score {
    background-color: #2a3698;
    border:1px solid black;
    font-size:50px;
    color: #fff;
}


.score-control {
    display: table;
    width: 100%
}
.score-control span {
    display:table-cell;
    vertical-align: middle;
    border:1px solid black;
    padding:5px;
    width:45%;
    color:white;
    font-size:50px;
    line-height:30px;
    cursor:pointer;
    background-color:white;
    font-family:monospace;
    font-weight:bold;
}

.score-control .plus {
    color:#2da94e;
}

.score-control .minus {
    color:#ff0000;
}

#gameplay {
    filter: blur(20px);
    height:100%; /* stupid firefox */
    width:100%;
    /* display:inline-block; */
}

html, body {
    overflow:hidden;
    height:100%;
}




.hide {
    display:none;
}

#riddle-modal {
    transform-origin:top left;
    background-color:#2a3698;
    border: 3px solid #ffff00;;
    max-width:100%;
    max-height:100%;
    height:100%;
    width:100%;
    margin-left:0px;
    margin-right:0px;
}
.riddle-inner {
    font-size: 80px;
    padding: 0px;
    color: white;
    text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
}
.solution, .clue {
    display:none;
    width:100%;
    height:100%;
    justify-content: center;
    align-items:center;
    flex-wrap: wrap;
}
.solution  {
    z-index: 200;
}
.clue  {
    z-index: 100;
}
.reveal {
    position:absolute;
    top: 0%;
    left: 0%;
    animation-name: reveal-animation;
    animation-duration: 2s;
    animation-timing-function: ease;
    display: flex;
    border-top: 3px dotted white;
    background-color:#2a3698;
}

.riddle-inner span, .solution span {
    position: absolute;
    z-index: 150;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}
.riddle-inner img, .solution img {
    position: absolute;
    z-index: 110;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    max-height: 100%;
    max-width: 100%;
    min-height: 30%;
    min-width: 30%;
    margin: auto;
    border: 1px solid #000;
    box-shadow: 10px 10px 8px 10px #000;
    /* in case there are transparent parts:*/
    background-color: white;
}
#riddle-modal-table {
    width:100%;
    height:100%;
}

#riddle-modal-table td {
    padding:5px;
    text-align:center;
}

.expanded {
    transition:.5s all ease;
}

.modal-inner {
    color:#fff;
    text-align:center;
    overflow:auto;
    padding:0px;
    /* padding-left:20px; */
    /* padding-right:20px; */
    height:100%;
    width:100%;
}

#riddle-title {
    padding:5px;
    text-align:center;
    color:#fff;
    background-color:#151b4b;
    /* display on top, regardless of source code order: */
    font-weight:bold;
    padding-right:10%;
    display:none;
    /* uncomment this to display a title line: */
    /* display:block; */
}

#riddle-title td:nth-child(1) {
    width:30%;
    text-align:center;
}
#riddle-title td:nth-child(2) {
    width:15%;
    text-align:right;
}
#riddle-title td:nth-child(3) {
    text-align:right;
}

#solution-button, #continue-button {
    cursor:pointer;
}

@keyframes reveal-animation {
    0% {
        top: 100%;
        opacity:0;
       }
    100% {
        top: 0%;
          opacity:1;
        }
}

kbd
{
    background-color:#f7f7f7;
    border:1px solid #ccc;
    border-radius:3px;
    box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
    color:#333;
    display:inline-block;
    font-family:Arial,Helvetica,sans-serif;
    font-family: monospace, monospace;
    line-height:1.4;
    margin:0 .1em;
    padding:.1em .6em;
    text-shadow:0 1px 0 #fff;
}


#options-modal {
    background-color:rgba(0,0,0,.5);
    justify-content: center;
    align-items:center;
    color: #fff;
    width: 100%;
    height: 100%;
}
@keyframes category-intro-in-animation {
    0% {
        left: 100%;
        opacity:0;
       }
    100% {
        left: 0%;
        opacity:1;
        }
}
@keyframes category-intro-out-animation {
    0% {
        left: 0%;
        opacity:1;
       }
    100% {
        left: -100%;
        opacity:0;
        }
}
.category-in-animation {
    animation-name: category-intro-in-animation;
    animation-duration: 1.0s;
    animation-timing-function: ease-out;
}
.category-out-animation {
    animation-name: category-intro-out-animation;
    animation-duration: 1.0s;
    animation-timing-function: ease-in;
}

#category-intro-modal {
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 120px;
    width: 100%;
    height: 100%;
}

.symbol-box {
    display:none;
    position:absolute;
    font-size:100px;
    top:50%;
    left:50%;
    z-index: 200;
}
@keyframes symb-animation {
    0% {transform: scale(0,0);
        opacity:0;
       }
    50% {opacity:1;}
    100% {transform: scale(20,20);
          opacity:0;
        }
}
.symbol-animation {
    animation-name: symb-animation;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
}

#question-row .selected-cell {
    border-color:#333;
    border-style:solid;
}

/* for debugging: mark the daily double cell*/
/* #question-row .daily-double { */
/*     border-color:#00ffff; */
/*     border-style:dotted; */
/* } */

#winner-modal {
    background-color:rgba(0,0,0,.8);
    /* display:flex; */
    margin: 0px;
    min-height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    justify-content: center;
    --podium_height: 300px;
    --podium_ydelta: 15px;
    --podium_width: 70%;
    --podium_orig_height: 300px;
    --podium_yratio: calc(var(--podium_height) / var(--podium_orig_height));
}

#confetti{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}
#podium {
    height:var(--podium_height);
    width:var(--podium_width);
    position:absolute;
    bottom:100%;
}

#winner-team-rank1 {
    position: absolute;
    bottom: -100%;
    /* bottom: calc(var(--podium_height) / 3 * 3 ); */
    left: calc((100% - var(--podium_width)) / 2 + (2 - 1) * var(--podium_width) / 3);
    width: calc(var(--podium_width) / 3);
    text-align: center;
}
#winner-team-rank2 {
    position: absolute;
    bottom: -100%;
    /* bottom: calc(var(--podium_height) / 3 * 2 ); */
    left: calc((100% - var(--podium_width)) / 2 + (1 - 1) * var(--podium_width) / 3);
    width: calc(var(--podium_width) / 3);
    text-align: center;

}
#winner-team-rank3 {
    position: absolute;
    bottom: -100%;
    /* bottom: calc(var(--podium_height) / 3 * 1 ); */
    left: calc((100% - var(--podium_width)) / 2 + (3 - 1) * var(--podium_width) / 3);
    width: calc(var(--podium_width) / 3);
    text-align: center;
}

@keyframes winner-team-rank1-in-animation {
    0% {
        bottom: -100%;
       }
    100% {
        bottom: calc(var(--podium_height) / 3 * 3 - var(--podium_ydelta) );
        }
}
.winner-team-rank1-in-animation {
    animation-name: winner-team-rank1-in-animation;
    animation-duration: 5.0s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes winner-team-rank2-in-animation {
    0% {
        bottom: -100%;
       }
    100% {
        bottom: calc(var(--podium_height) / 3 * 2 - var(--podium_ydelta) );
        }
}
.winner-team-rank2-in-animation {
    animation-name: winner-team-rank2-in-animation;
    animation-duration: 5.0s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes winner-team-rank3-in-animation {
    0% {
        bottom: -100%;
       }
    100% {
        bottom: calc(var(--podium_height) / 3 * 1 - var(--podium_ydelta) );
        }
}
.winner-team-rank3-in-animation {
    animation-name: winner-team-rank3-in-animation;
    animation-duration: 5.0s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

#podium-platform {
    fill:darkgray;
    stroke-width:0;
}
#podium-front {
    fill:gray;
    stroke-width:0;
}
#podium-text {
    fill:black;
    font-size:60px;
    font-family:Serif;
    text-anchor: middle;
    /*dominant-baseline: hanging;*/
}

@keyframes podium-in-animation {
    0% {
        bottom: 100%;
       }
    100% {
        bottom: 0px;
        }
}
.podium-in-animation {
    animation-name: podium-in-animation;
    animation-duration: 5.0s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

#player-color-visualisation {
    display:none;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    justify-content: center;
    align-items:center;
    border-width: 100px;
    border-style: solid;
}

@keyframes buzz-vis-animation {
    0% {border-width: 100px;
        opacity:1;
       }
    100% {border-width: 100px;
          opacity:0;
        }
}
.buzzer-visual-animation {
    animation-name: buzz-vis-animation;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
}