@import url(../../games/effects.css);
@import url(/common.css);
input[name="remark"] {
  background-image: url(/images/remarks.png);
  background-position:  calc(100% - 5px) 4px;
  background-repeat: no-repeat;
  padding: 4px;
}
.table {
  transition: background-image .3s ease-in;
}
.table img[title='shredded move history'] {
  display: none;
}
.table[data-table-status="finished"] {
  max-height: 5em;
  transition: max-height .3s ease-in-out;
  margin-bottom: 2em;
}
.table[data-table-status="finished"] :is(table.rankings,p) {
  opacity: 0;
  transition: opacity .3s ease-in-out;
}
.table[data-table-status="finished"]:hover {
  max-height: 20em;
}
.table[data-table-status="finished"]:hover :is(table.rankings,p) {
  opacity: 1;
  transition: opacity .5s ease-in-out;
}
.table:not([data-table-status="finished"]) img.flag {
  display: none;
}
.table img[src="/images/asterisk.png"] {
  display: initial !important;
}
table.rankings {
  font-size: .9em;
}
table.rankings th {
  font-weight: 500;
}
table.rankings :is(td,th) {
  padding: 1px 5px;
}
table.rankings .place {
  min-width: 1em;
  text-align: center;
}
table.rankings .player {
  min-width: 9em;
  text-align: right;
}
table.rankings .brief {
  min-width: 10em;
  text-align: left;
}
.table {
  position: relative;
  border: solid 1px black;
  border-radius: 30px;
  margin: 1em;
  padding: .5em;
  color: white;
  background-color: #3E505C;
  box-shadow: -3px 5px 5px -3px rgba(0, 0, 0, 0.6);
  background: url(/images/backgrounds/greypx.webp);
  margin: 0 auto 1em;
  width: 32em;
  min-height: 6em;
  display: inline-block;
}
.table,
.table a {
  color: white;
}
.table img {
  height: 5em;
}
.table p img {
  height: 16px;
  margin-right: 5px;
}
.table img.flag {
  height: 12px;
  cursor: pointer;
}
.table :is(.seat, .game img) {
  border-radius: 1em;
  border: solid 3px white;
}
.table .seat a img {
  min-height: 4em;
  min-width: 4em;
}
.table .seat a img { /* firefox */
  position: absolute;
  top: 0;
  left: 0;
}
.table .id {
  position: absolute;
  left: 112px;
  top: 4px;
  font-size: .8em;
}
.table[data-table-status="started"] button {
  display: none;
}
.table[data-table-status="vacant"] {
  display: none;
}
.table .controls {
  width: 6.5em;
  font-size: .8em;
  text-align: center;
  margin-top: 3px;
  display: inline-block;
}
.seats img {
  height: 4em;
}
.seats {
  display: inline-block;
  width: 25em;
  margin: 10px 0 0 5px;
}
.table article {
  display: inline-block;
  width: 25em;
  margin: 0;
}
.table p {
  display: inline-block;
  width: 25em;
  margin: 0 0 5px;
  font-size: .8em;
  padding-left: 2em;
  text-indent: -1.6em;
  line-height: 1.3em;
}
.game {
  display: inline-block;
  margin: 0;
  width: 5.5em;
  margin: 5px;
  text-align: center;
  vertical-align: top;
}
.seats .seat {
  margin: 5px;
  width: 64px;
  height: 64px;
}
.table[data-table-status="finished"] :is(div.game img, .seats .seat) {
  border-color: rgba(255, 255, 255, 0.5);
}
[data-table-status="open"] .seats .seat {
  border-style: dashed;
}
[data-table-status="open"] .touched,
[data-table-status="finished"] .touched {
  visibility: hidden;
}
.table[data-table-status="finished"] .seat.avatar[data-place='1'] {
  border-color: #ffd82c;
}
.touched, .finished {
  opacity: .5;
}
img.won,
img.pawn {
  position: absolute;
  border: none;
  border-radius: 0;
  z-index: 99;
  visibility: hidden;
}
img.won {
  bottom: 3px;
  right: 3px;
  height: 25px;
}
img.pawn {
  right: 0;
  bottom: 8px;
  height: 35px;
  animation-name: wobble;
  animation-duration: .5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  pointer-events: none;
}
[data-table-status="finished"] img.won {
  visibility: visible;
}
[data-up~="0"][data-seated~="0"] .game img,
[data-up~="1"][data-seated~="1"] .game img,
[data-up~="2"][data-seated~="2"] .game img,
[data-up~="3"][data-seated~="3"] .game img,
[data-up~="4"][data-seated~="4"] .game img,
[data-up~="5"][data-seated~="5"] .game img,
[data-up~="6"][data-seated~="6"] .game img {
  animation: flare .5s infinite;
}
[data-up~="0"] [data-seat="0"] img.pawn,
[data-up~="1"] [data-seat="1"] img.pawn,
[data-up~="2"] [data-seat="2"] img.pawn,
[data-up~="3"] [data-seat="3"] img.pawn,
[data-up~="4"] [data-seat="4"] img.pawn,
[data-up~="5"] [data-seat="5"] img.pawn,
[data-up~="6"] [data-seat="6"] img.pawn {
  visibility: visible;
}
.game button {
  margin-top: 5px;
}
.game {
  position: relative;
  display: inline-block;
  margin: 0;
  width: 5.5em;
  margin: 5px;
  text-align: center;
  vertical-align: top;
}
body.anon #creates {
  display: none;
}
.game button {
  margin-top: 5px;
}
#creates input[type="submit"] {
  padding: 5px;
  margin-left: 6em;
}
#creates span {
  display: inline-block;
  width: 5em;
  clear: left;
  color: #3E505C;
}
#creates span::after {
  content: ": "
}
#creates label {
  margin-right: 5px;
}
#creates label label {
  margin-right: .8em;
}
#creates > * {
  display: block;
  margin-bottom: 2px;
}
#creates input[type="text"] {
  width: 25em;
}
.create {
  break-before: column;
}
.blocked {
  cursor: wait !important;
}