@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

html,
body {
  font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
}

/* Grid style game board, and old Ferrules styles to be cleaned up*/
.table_grid {
    border: 1px solid black;
    border-collapse: collapse;
    background: #f9f9f9;
}

.cell_container {
    min-width: 80px;
    height: 80px;
    width: 80px;
}

.cell_container2 {
    position:relative; width: 100%; height: 100%;
}

.cell_room_label
{
    position: absolute;
    top: 0px; left: 0px;
    z-index: 0;
    font-size:2em; font-weight: bold;
    color:#000c;
    text-shadow:1px 1px 2px white;
    pointer-events: none;
    /*max-width: 80px; width: 100%; height: 100%;*/
}

.cell {
    min-width: 60px;
    max-width: 80px;
    height: 80px;
    width: 80px;
    text-align: center;
    vertical-align: middle;
}

.cellp {
    min-width: 95px;
    height: 80px;
    text-align: center;
}

.cellp_side {
    min-width: 80px;
    height: 80px;
    text-align: center;
}

.cellmini {
    min-width: 20px;
    height: 10px;
    text-align: center;
}

.choice_gone { /*for everyone in a spot*/
    visibility: hidden
}

.choice_unavailable { /*for a player for pieces of one type*/
    visibility: hidden
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
}
.box {
    position: absolute;
    width: 100%;
    /* height: 100%; */
    top: 0;
    left: 0;
    color: #eee;
    font-size: 3.5em;
    text-align: center;
}
.overlay1 {
    z-index: 9;
    width: 100%;
    /* height: 100%; */
    color: #eee;
    font-size: 2em;
    text-align: center;
    padding-top: 32%;
    padding-left: 10%;
}
.overlay2 {
    z-index: 19;
    width: 100%;
    /* height: 100%; */
    color: #eee;
    font-size: 1em;
    text-align: center;
    padding-top: 56%;
    padding-left: 10%;
}

.overlay1p {
    z-index: 1;
    padding-top: 21%;
    padding-left: 0%;
}
.overlay2p {
    z-index: 2;
    /* height: 100%; */
    color: #eee;
    font-size: 1em;
    text-align: center;
    padding-top: 35%;
    padding-left: 0%;
}

.overlay1s {
    z-index: 1;
    padding-top: 25%;
    padding-left: 0%;
}
.overlay2s {
    z-index: 2;
    padding-top: 43%;
    padding-left: 0%;
}

.hint {
    transform: scale(0.6);
    position: relative;
    top: -45px;
    left: -50px;
}

.highlight {
    -webkit-text-stroke: 5px;
}

.hint_other_may_win {
    color: black;
    animation: blinker 1s linear infinite;
}

.hint_red_may_win {
    color: red;
    animation: blinker 1s linear infinite;
}

.hint_green_may_win {
    color: green;
    animation: blinker 1s linear infinite;
}

.hint_blue_may_win {
    color: blue;
    animation: blinker 1s linear infinite;
}

.hint_purple_may_win {
    color: purple;
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0.3;
  }
}

.cell
{
    font-size: 1.1em;
    font-weight: bold;
    width: 100%;
}

/* Cluedo specific styles */

.cell_grass
{
    background: darkgreen;
}

.cell_title
{
    color: white;
}

.cell_clue_spot
{
    background-image: url(../images/clue-spot-200px.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.cell_stair_spot
{
    background-image: url(../images/stair.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.cell_stair /*outdoors*/
{
    background-image: url(../images/stair2.webp);
    background-repeat: no-repeat;
    background-size: 100%;
}

.cell_clue
{
    background-image: url(../images/clue-200px.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.cell_clue_counter
{
    background-image: url(../images/clue-available.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 3;
}

.cell_clue_counter_dummy
{
    background-image: url(../images/clue-dummy.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 3;
}

.cell_orn_BirdTable
{
    background-image: url(../images/orn-bird-table.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 3;
}

.cell_orn_Orb
{
    background-image: url(../images/orn-orb.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 3;
}

.cell_orn_SunDial
{
    background-image: url(../images/orn-sun-dial.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 3;
}

.cell_orn_Urn
{
    background-image: url(../images/orn-urn.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 3;
}

.cell_wpn_Dagger
{
    background-image: url(../images/wpn-dagger.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 3;
}

.cell_wpn_Revolver
{
    background-image: url(../images/wpn-revolver.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 3;
}

.cell_wpn_Spanner
{
    background-image: url(../images/wpn-spanner.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 3;
}

.cell_wpn_Poison
{
    background-image: url(../images/wpn-poison.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 3;
}

.cell_wpn_Blunderbuss
{
    background-image: url(../images/wpn-blunderbuss.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 3;
}

.cell_wpn_Rope
{
    background-image: url(../images/wpn-rope.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 3;
}

.cell_wpn_Axe
{
    background-image: url(../images/wpn-axe.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 3;
}

.cell_wpn_Candlestick
{
    background-image: url(../images/wpn-candlestick.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 3;
}

.cell_wpn_LeadPiping
{
    background-image: url(../images/wpn-leadpiping.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 3;
}

.cell_roomK
{
    background-color: pink;
    background-image: url(../images/room-kitchen.png);
    background-size: 100%;
}

.cell_roomB
{
    background-color: #de7ade;
    background-image: url(../images/room-ballroom.png);
    background-size: 100%;
}

.cell_roomC
{
    background-color: #ff7777;
    background-image: url(../images/room-conservatory.png);
    background-size: 100%;
}

.cell_roomI
{
    background-color: lightblue;
    background-image: url(../images/room-billiard.png);
    background-size: 100%;
}

.cell_roomL
{
    background-color: yellow;
    background-image: url(../images/room-library.png);
    background-size: 100%;
}

.cell_roomS
{
    background-color: cyan;
    background-image: url(../images/room-study.png);
    background-size: 100%;
}

.cell_roomH
{
    background-color: #ab48ab; /*purple*/
    background-image: url(../images/room-hall.png);
    background-size: 100%;
}

.cell_roomO
{
    background-color: #0b0;
    background-image: url(../images/room-lounge.png);
    background-size: 100%;
}

.cell_roomD
{
    background-color: lightyellow;
    background-image: url(../images/room-dining.png);
    background-size: 100%;
}

.cell_player_0
{
    background-image: url(../images/token-yellow.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 4;
}

.cell_player_1
{
    background-image: url(../images/token-red.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 4;
}

.cell_player_2
{
    background-image: url(../images/token-brown.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 4;
}

.cell_player_3
{
    background-image: url(../images/token-white.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 4;
}

.cell_player_4
{
    background-image: url(../images/token-gray.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 4;
}

.cell_player_5
{
    background-image: url(../images/token-green.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 4;
}

.cell_player_6
{
    background-image: url(../images/token-purple.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 4;
}

.cell_player_7
{
    background-image: url(../images/token-blue.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 4;
}

.cell_player_8
{
    background-image: url(../images/token-pink.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 4;
}

.cell_player_starter_0
{
    background-color: yellow;
}

.cell_player_starter_1
{
    background-color: #ff7777;
}

.cell_player_starter_2
{
    background-color: #c25b5b;
}

.cell_player_starter_3
{
    background-color: white;
}

.cell_player_starter_4
{
    background-color: lightgray;
}

.cell_player_starter_5
{
    background-color: lightgreen;
}

.cell_player_starter_6
{
    background-color: #de7ade;
}

.cell_player_starter_7
{
    background-color: lightblue;
}
.cell_player_starter_8
{
    background-color: pink;
}

/* card holder */
.card-holder-flap
{
    width:40px;
    height:60px;
    border: 4px solid black;
    text-align: center;
    font-weight: bold;
    font-size: 1.8em;
}

.card-holder-flap-black
{
    width:40px;
    height:60px;
    border: 4px solid white;
    text-align: center;
    font-weight: bold;
    font-size: 1.8em;
}

.flap_being_viewed /*secretly*/
{
    background: #e75480;
}

.card_0
{
    background-image: url(../images/card-player-yellow.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_1
{
    background-image: url(../images/card-player-red.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_2
{
    background-image: url(../images/card-player-brown.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_3
{
    background-image: url(../images/card-player-white.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_4
{
    background-image: url(../images/card-player-gray.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_5
{
    background-image: url(../images/card-player-green.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_6
{
    background-image: url(../images/card-player-purple.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_7
{
    background-image: url(../images/card-player-blue.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_8
{
    background-image: url(../images/card-player-pink.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_9
{
    background-image: url(../images/card-wpn-poison.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_10
{
    background-image: url(../images/card-wpn-blunderbuss.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_11
{
    background-image: url(../images/card-wpn-revolver.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_12
{
    background-image: url(../images/card-wpn-axe.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_13
{
    background-image: url(../images/card-wpn-rope.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_14
{
    background-image: url(../images/card-wpn-spanner.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_15
{
    background-image: url(../images/card-wpn-leadpiping.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_16
{
    background-image: url(../images/card-wpn-dagger.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_17
{
    background-image: url(../images/card-wpn-candlestick.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_18
{
    background-image: url(../images/card-room-hall.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_19
{
    background-image: url(../images/card-room-conservatory.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_20
{
    background-image: url(../images/card-room-study.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_21
{
    background-image: url(../images/card-room-library.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_22
{
    background-image: url(../images/card-room-lounge.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_23
{
    background-image: url(../images/card-room-kitchen.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_24
{
    background-image: url(../images/card-room-billiard.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_25
{
    background-image: url(../images/card-room-dining.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_26
{
    background-image: url(../images/card-room-ballroom.webp);
    background-repeat: no-repeat;
    background-size: 65%;
}

.card_holder_space
{
    width:80px;
}

.card_holder_middle
{
    width:80px;
    height:150px;
    text-align: center;
    font-size: 3em;
}

.card_holder_0
{
	border: 10px groove #d0d09e;
    background-color: #d0d09e;
}

.card_holder_1
{
	border: 10px groove darkgreen;
    background-color: darkgreen;
}

.card_holder_2
{
	border: 10px groove darkgray;
    background-color: black;
}

.player-murder-cards-deck
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 60%;
}

.card_alone
{
    width: 250px;
    height: 300px;
    margin: 5;
    margin: 10px;
}

.bg_gold
{
   background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}

.detective-card-table
{
    border: 1px solid;
    border-collapse: collapse;
}

.detective-card-table-col1q
{
    width: 200px;
}

.detective-card-table-clue
{
    text-align: center;
}

.detective-card-table-clues-1 /* 2x2 */
{
    display: grid;
    grid-template-columns: 40px 40px;
    text-overflow: ellipsis;
}

.detective-card-table-clues-2 /* 1,3,2,4 */
{
    display: grid;
    grid-template-columns: 80px 80px 80px 80px;
}

.detective-card-table-clues-3 /* 1,2,3,4 */
{
    display: grid;
    grid-template-columns: 80px 80px 40px 40px;
}

.pulsate {
    animation-name: pulsate;
    animation-duration: 5s;
    animation-iteration-count: 10;
    /*animation-iteration-count: infinite;*/
    animation-timing-function: linear;
}

.pulsate_once {
    animation-name: pulsate_once;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    /*animation-iteration-count: infinite;*/
    animation-timing-function: linear;
}

@keyframes pulsate {
  10%, 30%, 50%, 70%, 90% {
    transform: scale(2);
  }
  20%, 40%, 60%, 80% {
    transform: scale(1);
  }
}

@keyframes pulsate_once {
  50% {
    transform: scale(1.2);
  }
}

.shimmer {
  color: grey;
  display: inline-block;
  animation: shimmer 6.5s infinite;
  font-size: 50px;
  max-width: 200px;
  transform: scale(1.2);
}

@keyframes shimmer {
  0%  { transform: rotate(-10deg) scale(1.2) }
  10% { transform: rotate( 10deg) scale(1.2) }
  50% { transform: rotate(-10deg) scale(1.2) }
  60% { transform: rotate( 10deg) scale(1.2) }
}

input {
  width: 20px;
  height: 20px;
}

.big_checkbox {
  width: 40px;
  height: 40px;
}

.big-font
{
  font-size: 1.2em;
}

#divWho
{
  font-size: 1.5em;
}

#card-holder-container-0, #card-holder-container-1, #card-holder-container-2
{
  height: 300px;
  background-size: 95%;
}

/* from Dice demo */
.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60vh;
}

button {
    padding: 15px;
    margin: 3px;
    color: black;
    font-weight: bold;
    background-color: #f4a35e;
    border: none;
    font-size: 20px;
    border-radius: 20px;
    box-shadow: 1px 3px #3f404e;
    outline: none;
    transition: .3s;
}

button:hover, button:active {
    outline: none;
    background: #3f404e;
    cursor: pointer;
    transform: translateY(5px);
}

.button_ai
{
    background: lightblue;
}
.button_final
{
    background: pink;
}