/* Flat, double-pointed wooden counters, based on the supplied photograph. */
.table { height: 580px; }
.opponents { top: 23px; left: 12%; right: 20%; gap: 16px; }
.opponent { min-width: 100px; gap: 5px; }
.opponent .sticks { margin: 3px 0 1px; }
.sticks { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.sticks-wood { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 59px; padding: 0 8px; }
.stick {
  display: inline-block; flex: 0 0 auto; width: 8px; height: 64px;
  background: url('./assets/palillo-madera.svg') center / 100% 100% no-repeat;
  border-radius: 0; box-shadow: none; transform: rotate(12deg);
  filter: drop-shadow(2px 3px 1px #061d1cb3);
}
.stick.lost { opacity: .13; filter: grayscale(.8); }
.stick-total, .player-seat .stick-total {
  display: inline-flex !important; align-items: baseline; gap: 5px;
  color: #fff0cf !important; font-size: 11px !important; letter-spacing: 0 !important;
  line-height: 1; margin: 0 !important;
}
.stick-total b { font: 700 18px 'DM Sans', sans-serif; }
.stick-total small { color: #d8dfc7; font-size: 9px; max-width: none; }
.player-seat {
  left: 50%; bottom: 20px; transform: translateX(-50%); gap: 14px;
  padding: 8px 20px; border: 1px solid #d9c18e40; border-radius: 12px;
  background: #0b2a25a6; box-shadow: 0 5px 15px #071e2333; max-width: calc(100% - 28px);
}
.player-seat > div:nth-child(2) { min-width: 0; }
.player-seat .avatar, .player-seat .sticks { flex-shrink: 0; }
.player-seat .sticks { margin: 0 0 0 8px; }
.player-seat .sticks-wood { display: flex; margin: 0; }
.player-seat .stick { height: 70px; width: 9px; }
.player-seat .avatar { width: 37px; height: 37px; }
.player-seat strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-seat #human-status { white-space: nowrap; }
#scene { top: 157px; bottom: 174px; }
.die-controls { bottom: 169px; }
.table-caption { bottom: 147px; }
.cup { top: 223px; }
.pot {
  top: 27px; right: 25px; width: 112px; min-height: 140px; padding: 12px 8px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1px solid #d7c18b50; border-radius: 12px; color: #f8e5bf;
  background: #102f2994; box-shadow: inset 0 1px 0 #fff1;
}
.pot-label { color: #d8dfc8; font-size: 8px; letter-spacing: 1.6px; }
.pot .stick-pile { position: relative; width: 92px; height: 77px; margin: 1px 0; }
.pot .stick-pile .stick {
  left: 50%; top: 50%; width: 7px; height: 66px;
  transform: translate(-50%, -50%) translate(var(--pile-x), var(--pile-y)) rotate(var(--pile-angle));
}
#pot-count { font-size: 13px; font-weight: 700; white-space: nowrap; }
.pot-empty { color: #bac9ad; font-size: 9px; position: absolute; inset: 0; display: grid; place-items: center; }
.note-icon { min-width: 34px; width: 34px; height: 55px; overflow: visible; }
.note-icon:before {
  width: 6px; height: 51px; left: 3px; top: 0; border-radius: 0;
  background: url('./assets/palillo-madera.svg') center / 100% 100% no-repeat;
  box-shadow: none; transform: rotate(27deg); filter: drop-shadow(8px 0 0 #dbb77e) drop-shadow(8px 0 0 #dbb77e);
}
@media (max-width: 1100px) {
  .opponents { left: 7%; right: 24%; gap: 8px; }
  .opponent { min-width: 82px; }
  .sticks-wood { gap: 7px; padding: 0 6px; }
  .pot { right: 20px; width: 96px; }
  .pot .stick-pile { width: 80px; }
}
@media (max-width: 800px) {
  .table { height: 580px; }
  .opponents { left: 10%; right: 23%; }
}
@media (max-width: 500px) {
  .table { height: 500px; }
  .opponents { top: 21px; left: 4%; right: 4%; gap: 3px; }
  .opponent { min-width: 0; flex: 1; }
  .opponent .avatar { width: 29px; height: 29px; }
  .opponent strong { max-width: 95px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .opponent .sticks-wood { gap: 5px; padding: 0 4px; min-height: 53px; }
  .opponent .stick { width: 6px; height: 54px; }
  .stick-total b { font-size: 16px; }
  .stick-total small { font-size: 8px; }
  .opponent small { font-size: 7px; }
  #scene { top: 201px; bottom: 148px; }
  .cup { top: 227px; }
  .die-controls { bottom: 144px; }
  .table-caption { bottom: 124px; }
  .player-seat { bottom: 18px; padding: 7px 12px; gap: 10px; }
  .player-seat .sticks-wood { gap: 7px; padding: 0 4px; }
  .player-seat .stick { height: 61px; width: 7px; }
  .player-seat .avatar { width: 30px; height: 30px; }
  .player-seat .sticks { margin-left: 3px; }
  .pot {
    top: 172px; left: 50%; right: auto; transform: translateX(-50%);
    width: auto; min-width: 212px; min-height: 41px; padding: 5px 12px;
    flex-direction: row; justify-content: center; gap: 10px; border-radius: 8px;
  }
  .pot-label { font-size: 7px; letter-spacing: 1px; }
  .pot .stick-pile { width: 55px; height: 30px; margin: 0; }
  .pot .stick-pile .stick { top: 50%; width: 5px; height: 34px; }
  #pot-count { font-size: 12px; }
  .pot-empty { font-size: 7px; }
  .result { overflow-x: auto; }
}