/* Common imports for all CSS modules */
/*
 * This source is generated by bin/gen/licon.py. Run licon.py after changing public/font/lichess.sfd
 *
 * Constant names and values are pulled from private use characters defined in the sfd file.
 *
 * Character names can be edited in fontforge's "glyph info" dialog, or by editing the StartChar: line that
 * begins each character chunk in lichess.sfd
 *
 * To make these characters visible in your editor, install the lichess.ttf font (which is also generated by
 * licon.py) and then add it to your editor's font list.
 */
/* Uniboard: keep the same page layout across pages */
/* text printed directly on the page background deserves special treatment (transp theme) */
.pocket piece:not(.disabled):hover::after, .pocket piece::after {
  box-shadow: 0 3px 4px hsla(0, 0%, 0%, 0.15) inset !important;
}

.pocket piece::after {
  background: var(--c-accent);
  color: #fff;
  text-shadow: 0 1px 1px black !important;
}
.pocket piece:not(.disabled):hover::after {
  background: var(--m-accent--lighten-5);
}

.pocket-c2 {
  position: relative;
  display: block;
  height: 0;
  padding-bottom: 100%;
  width: 100%;
}

.pocket piece::after, .pocket {
  border-radius: 7px;
}

/* helps with clipping background into border-radius */
.pocket.usable piece:first-child:hover {
  border-radius: 7px 0 0 7px;
}

.pocket {
  display: flex;
  width: 62.5%;
  background: #888;
  margin: auto;
  justify-content: center;
}
@media (min-width: 799.3px), (orientation: landscape) {
  .pocket {
    width: 100%;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3) inset;
  }
}
.pocket-c1 {
  flex: 0 0 20%;
  max-width: 10vmin;
}
.pocket piece {
  display: block;
  width: 100% !important;
  height: 100% !important;
  transition: all 150ms ease;
}
.pocket piece::after {
  content: attr(data-nb);
  bottom: 0;
}
html:not([dir=rtl]) .pocket piece::after {
  right: 0;
}
html[dir=rtl] .pocket piece::after {
  left: 0;
}
.pocket piece::after {
  position: absolute;
  line-height: 0.9em;
  padding: 3px 0.3em;
  font-weight: bold;
  font-size: 1.1em;
}
.pocket piece[data-nb="0"] {
  cursor: auto;
  opacity: 0.1;
}
.pocket piece[data-nb="0"]::after {
  content: none;
}
.pocket piece.premove {
  background-color: #555;
}
.pocket.usable piece {
  cursor: pointer;
  pointer-events: auto;
}
.pocket.usable piece:hover {
  background-color: #aaa;
}
.blindfold .pocket:not(.usable) {
  opacity: 0;
}

.pocket-top {
  grid-area: pocket-top;
}
.pocket-bottom {
  grid-area: pocket-bot;
}
.pocket-c1 {
  max-width: 60px;
}

.analyse.variant-crazyhouse {
  grid-template-rows: auto auto auto auto auto minmax(20em, 30vh);
  grid-template-areas: "pocket-top" "board" "pocket-bot" "kb-move" "controls" "tools" "side" "round-training" "under" "chat" "uchat";
}
@media (min-width: 799.3px), (orientation: landscape) {
  .analyse.variant-crazyhouse {
    grid-template-rows: 60px auto 60px;
    grid-template-areas: "board      gauge pocket-top" "board      gauge tools" "board      gauge pocket-bot" "kb-move    .     controls" "under      .     controls" "under      .     round-training" "under      .     side" "chat       .     side" "uchat      .     side";
  }
}
@media (min-width: 1259.3px) {
  .analyse.variant-crazyhouse {
    grid-template-rows: 60px auto auto 60px;
    grid-template-areas: "side    . board   gauge pocket-top" "side    . board   gauge tools" "chat    . board   gauge tools" "chat    . board   gauge pocket-bot" "uchat   . kb-move .     controls" "uchat   . under   .     controls" "uchat   . under   .     round-training";
  }
}

@media (max-width: 799.29px) and (orientation: portrait) {
  .pocket-top {
    margin-bottom: var(---block-gap);
  }
  .pocket-bottom {
    margin-top: var(---block-gap);
  }
}

/*# sourceMappingURL=analyse.zh.css.map */