/*
 * Adapted from the Set with Friends website
 * https://github.com/ekzhang/setwithfriends
 * Written by Eric Zhang and Cynthia Du
 *
 * MIT License
 *
 * Copyright (c) 2020 Eric Zhang, Cynthia Du
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

div.card {
  width: 12%;
  height: 60px;
  background: #000;
  border: 3px solid white;
  border-radius: 24px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 4px;
  margin-top: 10px;
  margin-right: 4px;
  margin-bottom: 10px;
  background-color: #404040;
  transition: box-shadow 0.15s;
  position: relative;
}
div.card.fake {
  border: 3px solid black;
  background: black;
}

div.card.fresh:hover {
  box-shadow: 0px 0px 5px 3px #bbb;
  cursor: pointer;
}
div.card.fresh.selected {
  background: #366666;
  border: 3px solid cyan;
}

div.card.gotten > svg.symbol {
  visibility: hidden;
}
div.card > svg.symbol {
  visibility: hidden;
}
div.card.fresh > svg.symbol {
  visibility: visible;
}

div.card.gotten.ok {
  background: #beecdf;
  border: 3px solid lightgreen;
}
div.card.gotten.bad {
  background: #ecd8be;
  border: 3px solid red;
}
div.card.gotten:after {
  position: absolute;
  z-index: 1;
  font-size: 30px;
}
div.card.gotten.ok:after {
  content: "✅";
}
div.card.gotten.bad:after {
  content: "⛔";
}
div.card.gotten.highlight {
  background: #eeeeee;
}

svg.symbol {
  margin: 2px;
}
span.tooltip {
  visibility: hidden;
  position: absolute;
  bottom: -20px;
  z-index: 1;
  text-align: center;
  background-color: #f3e5ab;
  padding: 6px;
  border-radius: 3px;
  border: 1px solid white;
  color: black;
  font-size: 12px;
}
div.card:hover span.tooltip {
  visibility: visible;
}
#boards {
  text-align: left;
  min-width: 500px;
}

#tragedy {
  z-index: -1;
  opacity: 1;
  position: fixed;
  top: -1000px;
}

.solved .card {
  transition: 4s all;
  opacity: 0;
}
.solved svg.symbol {
  transition: 4s all;
  opacity: 0;
}