html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #fff;
}

[hidden] { display: none !important; }

body.is-home .menu-bar { display: none; }

body.is-home #app { padding-top: 0; }

#app {
  padding: 56px 48px;
  text-align: center;
}

.action-sequence {
  height: 330px;
  margin: 0 auto;
  max-width: 680px;
  position: relative;
  width: 100%;
}

.action-sequence::before {
  border: 1px solid #e8e6e2;
  border-radius: 50%;
  content: "";
  height: 270px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 270px;
}

.action-node {
  left: 50%;
  position: relative;
  position: absolute;
  top: 50%;
  z-index: 1;
}

.action-node:nth-child(1) { opacity: .78; transform: translate(-250px, -50%) scale(.86); }
.action-node:nth-child(2) { transform: translate(-50%, -50%); }
.action-node:nth-child(3) { opacity: .78; transform: translate(166px, -50%) scale(.86); }

.declared-card {
  align-items: center;
  border: 3px solid #8870a4;
  border-radius: 8px;
  color: #171717;
  display: flex;
  font-family: Georgia, "Songti SC", serif;
  font-size: 22px;
  height: 42px;
  justify-content: center;
  left: 50%;
  margin-top: 12px;
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  width: 32px;
}

.action-avatar {
  align-items: center;
  background: var(--player-color, #dedbd5);
  border: 8px solid #fff;
  border-radius: 50%;
  display: flex;
  font-family: Georgia, "Songti SC", serif;
  font-size: 28px;
  height: 84px;
  justify-content: center;
  width: 84px;
}

.action-node.is-current .action-avatar {
  color: #fff;
  font-size: 38px;
  height: 124px;
  width: 124px;
}

.action-node.is-current::before,
.action-node.is-current::after {
  border: 1px solid rgb(23 23 23 / 28%);
  border-radius: 50%;
  content: "";
  inset: -18px;
  position: absolute;
  transform: scale(.72);
  animation: avatar-breathe 2.8s ease-out infinite;
  z-index: -1;
}

.action-node.is-current::after {
  animation-delay: 1.4s;
}

.play-button {
  background: #171717;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  justify-self: center;
  margin-top: 4px;
  padding: 9px 18px;
}

.turn-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.challenge-button,
.pass-button {
  background: #fff;
  border: 1px solid currentColor;
  cursor: pointer;
  font-size: 13px;
  padding: 8px 14px;
}

.challenge-button { color: #bd615d; }
.pass-button { color: #769db5; }
.challenge-button:disabled,
.pass-button:disabled { color: #c7c5c0; cursor: not-allowed; }

.play-button:hover { background: #8870a4; }

.play-button.is-deceptive,
.play-button.is-deceptive:hover {
  background: #8870a4;
}

.play-button:disabled {
  background: #b9b9b9;
  cursor: not-allowed;
}

.control-area {
  border: 1px solid #dedbd5;
  border-radius: 20px;
  display: grid;
  gap: 20px;
  margin: 12px auto 0;
  max-width: 760px;
  padding: 28px;
}

.control-area.is-locked {
  opacity: .35;
  pointer-events: none;
}

.control-area.is-locked .play-button {
  cursor: not-allowed;
}

.card-piles {
  align-items: end;
  display: flex;
  gap: 52px;
  justify-content: center;
  margin: 30px auto 0;
  min-height: 76px;
}

.card-pile {
  background: #fff;
  border: 2px solid #d9d6d0;
  border-radius: 10px;
  height: 58px;
  position: relative;
  box-shadow:
    -5px 5px 0 -1px #fff,
    -5px 5px 0 1px currentColor,
    -10px 10px 0 -1px #fff,
    -10px 10px 0 1px currentColor;
  width: 42px;
}

.card-pile::after {
  align-items: center;
  background: #fff;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #77736d;
  content: attr(data-count);
  display: flex;
  font: 11px ui-sans-serif, sans-serif;
  height: 18px;
  justify-content: center;
  position: absolute;
  right: -12px;
  top: -11px;
  width: 18px;
}

.discard-pile { border-color: #a9a9a9; color: #888; }
.table-pile { border-color: #8870a4; color: #765c96; }
.draw-pile { border-color: #d9d6d0; color: #77736d; }
.draw-pile::before,
.table-pile::before {
  content: none;
}

.player-counts {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 28px;
}

.player-count {
  align-items: center;
  color: #6b6862;
  display: flex;
  font: 14px Georgia, "Songti SC", serif;
  gap: 6px;
}

.player-count i {
  background: var(--player-color, #dedbd5);
  border-radius: 50%;
  display: block;
  height: 18px;
  width: 18px;
}

.table-pile.is-revealed {
  align-content: center;
  background: transparent;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  height: auto;
  justify-content: center;
  max-width: 340px;
  box-shadow: none;
  width: auto;
}

.table-pile.is-revealed::before,
.table-pile.is-revealed::after { display: none; }

.pile-card {
  align-items: center;
  background: #fff;
  border: 2px solid #d9d6d0;
  border-radius: 7px;
  color: #242424;
  display: flex;
  font: 18px Georgia, "Songti SC", serif;
  height: 40px;
  justify-content: center;
  width: 29px;
}

.pile-card.is-true { border-color: #6f9b78; }
.pile-card.is-false { border-color: #c77470; }

.deal-screen {
  align-items: center;
  display: flex;
  gap: 26px;
  height: calc(100vh - 120px);
  justify-content: center;
}

.deal-screen span {
  animation: deal 1s ease-in-out infinite alternate;
  background: #8870a4;
  border: 2px solid #765c96;
  border-radius: 10px;
  display: block;
  height: 74px;
  width: 52px;
}

.deal-screen span:nth-child(2) { animation-delay: .16s; }
.deal-screen span:nth-child(3) { animation-delay: .32s; }

.round-end {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

.round-end span { color: #77736d; font: 16px Georgia, "Songti SC", serif; }

.round-end button {
  background: #fff;
  border: 1px solid #171717;
  color: #171717;
  cursor: pointer;
  font-size: 13px;
  padding: 9px 14px;
}

.round-end button:disabled { border-color: #c7c5c0; color: #c7c5c0; cursor: not-allowed; }

.hand-row,
.deception-keyboard {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.hand-row { gap: 12px; }

.declaration-entry {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.declaration-input {
  background: #fff;
  border: 1px solid #d9d6d0;
  border-radius: 7px;
  color: #414141;
  font: 21px Georgia, "Songti SC", serif;
  height: 36px;
  letter-spacing: .12em;
  outline: none;
  padding: 0 10px;
  text-align: center;
  text-transform: uppercase;
  width: min(280px, 54vw);
}

.declaration-input:focus { border-color: #8870a4; }
.declaration-input.is-invalid { border-color: #c77470; box-shadow: 0 0 0 2px rgb(199 116 112 / 12%); }

.declaration-delete {
  background: #fff;
  border: 1px solid #d9d6d0;
  border-radius: 7px;
  color: #414141;
  cursor: pointer;
  font: 18px ui-sans-serif, sans-serif;
  height: 38px;
  width: 42px;
}

.declaration-delete:disabled { color: #c7c5c0; cursor: not-allowed; }

.hand-card {
  background: #fff;
  border: 2px solid #d9d6d0;
  border-radius: 12px;
  color: #1b1b1b;
  cursor: pointer;
  display: grid;
  font-family: Georgia, "Songti SC", serif;
  font-size: 32px;
  height: 92px;
  place-items: center;
  position: relative;
  width: 64px;
}

.hand-card small {
  bottom: 9px;
  font-family: ui-sans-serif, sans-serif;
  font-size: 14px;
  position: absolute;
  right: 10px;
}

.hand-card.is-selected {
  border-color: #8870a4;
  box-shadow: 0 0 0 3px rgb(136 112 164 / 15%);
  transform: translateY(-6px);
}

.deception-keyboard { gap: 6px; }

.deception-key {
  background: #fff;
  border: 1px solid #d9d6d0;
  border-radius: 7px;
  color: #414141;
  cursor: pointer;
  font-family: Georgia, "Songti SC", serif;
  font-size: 17px;
  height: 36px;
  min-width: 34px;
  padding: 0 7px;
  position: relative;
}

.deception-key.is-entered {
  border-color: #8870a4;
  color: #765c96;
}

.deception-key:disabled {
  color: #c7c5c0;
  cursor: not-allowed;
}

.deception-key.is-entered::after {
  align-items: center;
  background: #8870a4;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  content: attr(data-count);
  display: flex;
  font-family: ui-sans-serif, sans-serif;
  font-size: 9px;
  height: 16px;
  justify-content: center;
  position: absolute;
  right: -7px;
  top: -7px;
  width: 16px;
}

.deception-delete {
  font-family: ui-sans-serif, sans-serif;
}

.deception-delete:disabled {
  color: #c7c5c0;
  cursor: not-allowed;
}

@keyframes avatar-breathe {
  0% { opacity: .7; transform: scale(.72); }
  70%, 100% { opacity: 0; transform: scale(1.32); }
}

@keyframes deal {
  from { transform: translateY(8px) rotate(-4deg); }
  to { transform: translateY(-8px) rotate(4deg); }
}

@media (max-width: 600px) {
  #app {
    padding: 40px 20px;
  }

  .action-avatar {
    font-size: 26px;
    height: 76px;
    width: 76px;
  }

  .action-node.is-current .action-avatar {
    font-size: 32px;
    height: 96px;
    width: 96px;
  }

  .action-sequence { gap: 24px; }

  .action-sequence {
    height: 260px;
  }

  .action-sequence::before {
    height: 210px;
    width: 210px;
  }

  .action-node:nth-child(1) { transform: translate(-150px, -50%) scale(.86); }
  .action-node:nth-child(3) { transform: translate(82px, -50%) scale(.86); }

  .control-area { padding: 20px 14px; }
  .hand-row { gap: 8px; }
  .hand-card { font-size: 26px; height: 76px; width: 52px; }
  .deception-keyboard { gap: 4px; }
  .deception-key { font-size: 14px; min-width: 28px; padding: 0 4px; }
  .card-piles { gap: 40px; }
}

.menu-bar {
  align-items: center;
  border-bottom: 1px solid #dedbd5;
  display: flex;
  justify-content: space-between;
  padding: 24px;
}

.brand {
  align-items: center;
  color: #171717;
  display: inline-flex;
  gap: 18px;
  text-decoration: none;
}

.brand-mark {
  display: inline-flex;
  gap: 4px;
  transform: rotate(-15deg);
}

.brand-mark i {
  background: #171717;
  display: block;
  height: 39px;
  width: 9px;
}

.brand-mark i:first-child {
  height: 30px;
  margin-top: 9px;
}

.brand-name {
  font-family: Georgia, "Songti SC", serif;
  font-size: 36px;
  letter-spacing: .06em;
}

.settings-button,
.settings-close {
  background: transparent;
  border: 0;
  color: #171717;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  padding: 6px 10px;
}

.settings-backdrop {
  background: rgb(23 23 23 / 18%);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity .15s ease;
}

.settings-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.settings-window {
  background: #fff;
  min-height: 180px;
  position: absolute;
  right: 24px;
  top: 78px;
  width: min(360px, calc(100vw - 48px));
}

.settings-close {
  position: absolute;
  right: 8px;
  top: 8px;
}

.home-screen {
  align-content: center;
  display: grid;
  justify-items: center;
  margin: 0 auto;
  max-width: 440px;
  min-height: calc(100vh - 180px);
}

.home-room {
  color: #77736d;
  font-family: Georgia, "Songti SC", serif;
  font-size: 18px;
  letter-spacing: .12em;
  margin-bottom: 44px;
}

.seat-picker {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-bottom: 48px;
}

.seat-button {
  background: #fff;
  border: 1px solid #bdb9b1;
  border-radius: 50%;
  color: #6b6862;
  cursor: pointer;
  font-family: Georgia, "Songti SC", serif;
  font-size: 20px;
  height: 72px;
  width: 72px;
}

.seat-button.is-selected {
  background: #171717;
  border-color: #171717;
  color: #fff;
}

.player-name-input {
  background: #fff;
  border: 1px solid #dedbd5;
  border-radius: 10px;
  color: #171717;
  font-family: Georgia, "Songti SC", serif;
  font-size: 26px;
  outline: none;
  padding: 14px 18px;
  text-align: center;
  width: min(100%, 280px);
}

.player-name-input:focus { border-color: #8870a4; }

.home-start-button,
.exit-game-button {
  background: #171717;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  padding: 12px 24px;
}

.home-start-button { margin-top: 28px; }

.host-panel {
  display: grid;
  gap: 10px;
  margin-top: 28px;
  text-align: left;
  width: min(100%, 280px);
}

.host-panel label {
  align-items: center;
  color: #5e5b55;
  display: flex;
  font-size: 13px;
  gap: 10px;
  justify-content: space-between;
}

.host-panel input { accent-color: #8870a4; }

.exit-game-button {
  left: 28px;
  position: absolute;
  top: 72px;
}

@media (max-width: 600px) {
  .home-screen { min-height: calc(100vh - 156px); }
  .seat-picker { gap: 18px; }
}