.club.new-room {
  --room-art-aspect: 2.8888889;
  --room-art-width: calc(100dvh * var(--room-art-aspect));
  --room-unit: calc(var(--room-art-width) / 200);
  overflow-x: auto;
  overflow-y: hidden;
  background: #eadbc8;
  perspective: none;
  isolation: isolate;
  scrollbar-color: #9b7448 #eadbc8;
  scrollbar-width: thin;
}

.new-room-backdrop,
.new-room-foreground,
.seat-front-overlay {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--room-width-units) * var(--room-unit));
  pointer-events: none;
}

.new-room-backdrop {
  z-index: 1;
  background-color: #f2deca;
  background-image: url("assets/new-room/room-panorama-v2.png");
  background-position: left top;
  background-size: calc(200 * var(--room-unit)) 100%;
  background-repeat: repeat-x;
  will-change: transform;
}

.new-room-foreground {
  display: none;
}

.new-room-boards {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--room-width-units) * var(--room-unit));
  z-index: 17;
  pointer-events: none;
}

.room-furniture-back {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--room-width-units) * var(--room-unit));
  z-index: 8;
  pointer-events: none;
}

.room-chair-visual {
  position: absolute;
  left: calc(var(--chair-x) * var(--room-unit));
  top: 68%;
  width: clamp(88px, calc(13 * var(--room-unit)), 180px);
  height: auto;
  transform: translate(-50%, -5%);
  transform-origin: 50% 75%;
  filter: drop-shadow(0 8px 7px rgb(61 38 19 / 22%));
  transition: transform .34s cubic-bezier(.2,.8,.25,1), filter .25s ease;
  user-select: none;
}

.room-chair-visual.pulled[data-chair-side="left"] { transform: translate(-62%, 6%); }
.room-chair-visual.pulled[data-chair-side="right"] { transform: translate(-38%, 6%); }

.new-room-board {
  position: absolute;
  left: calc(var(--board-x) * var(--room-unit));
  width: clamp(78px, calc(10.4 * var(--room-unit)), 154px);
  height: auto;
  filter: drop-shadow(0 5px 5px rgb(62 42 22 / 18%));
  transform: translate(-50%, -50%) rotateZ(var(--board-rotate, 0deg)) scaleY(.72);
  transform-origin: 50% 50%;
}

.new-room-board-left {
  top: 66.2%;
  --board-rotate: -1.6deg;
}

.new-room-board-center {
  top: 66.2%;
  --board-rotate: .4deg;
}

.new-room-board-right {
  top: 66.2%;
  --board-rotate: 1.4deg;
}

.new-room-board.dynamic-room-board {
  top: 66.2%;
  --board-rotate: .4deg;
}

.new-room .room-streak-quick {
  z-index: 20;
}

.topbar-rules-button,
.topbar-computer-button {
  padding: .48rem .72rem;
  border: 1px solid rgb(215 173 98 / 32%);
  border-radius: .55rem;
  color: #d7bd82;
  background: rgb(255 255 255 / 5%);
  cursor: pointer;
}

.topbar-computer-button {
  border-color: rgb(230 196 123 / 48%);
  color: #3a2415;
  background: linear-gradient(180deg, #efd89f, #c89b51);
  box-shadow: 0 4px 12px rgb(21 10 4 / 28%);
  font-weight: 800;
}

.topbar-computer-button:hover,
.topbar-computer-button:focus-visible {
  filter: brightness(1.08);
}

/* Dark oak navigation and chat surfaces */
.topbar {
  background:
    linear-gradient(180deg, rgb(67 43 28 / 98%), rgb(39 24 15 / 97%)),
    repeating-linear-gradient(8deg, transparent 0 7px, rgb(255 255 255 / 3%) 8px 9px);
  border-bottom-color: rgb(216 173 98 / 26%);
  box-shadow: 0 8px 28px rgb(20 10 5 / 38%);
}

.brand-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 2px solid #c89550;
  border-radius: 5px;
  background:
    conic-gradient(#e0bc7d 25%, #4a2b1a 0 50%, #e0bc7d 0 75%, #4a2b1a 0)
    0 0 / 14px 14px;
  box-shadow: 0 3px 8px rgb(16 7 3 / 55%), inset 0 0 0 1px rgb(255 240 200 / 20%);
}

.brand strong {
  color: #f2dfbd;
}

.brand small {
  color: #c8aa7c;
}

.sidebar,
.chat-panel,
.game-chat,
.arcade-chat {
  background:
    linear-gradient(145deg, rgb(55 34 21 / 97%), rgb(31 18 11 / 98%)),
    repeating-linear-gradient(8deg, transparent 0 8px, rgb(255 255 255 / 2%) 9px 10px);
  border-color: rgb(216 173 98 / 20%);
  box-shadow: 0 20px 60px rgb(18 8 3 / 55%);
}

.sidebar-tabs,
.chat-tabs,
.game-chat h3,
.arcade-chat h3 {
  border-color: rgb(216 173 98 / 16%);
}

.topbar-rules-button,
.avatar-button {
  background: rgb(20 10 5 / 25%);
}

.new-room .new-room-table {
  left: calc(var(--x) * var(--room-unit));
  top: 73%;
  z-index: 16;
  width: calc(19 * var(--room-unit));
  height: 31%;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  filter: none;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.new-room .new-room-table .room-table-sprite {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  filter: drop-shadow(0 11px 8px rgb(61 38 19 / 22%));
  transition: filter .2s ease;
  user-select: none;
}

.new-room .new-room-table::before,
.new-room .new-room-table::after {
  display: none;
}

.new-room .new-room-table:hover,
.new-room .new-room-table.near {
  background: radial-gradient(ellipse at center, rgb(99 157 139 / 12%), transparent 67%);
  filter: none;
}

.new-room .new-room-table:hover .room-table-sprite,
.new-room .new-room-table.near .room-table-sprite {
  filter: drop-shadow(0 11px 8px rgb(61 38 19 / 22%)) drop-shadow(0 0 10px rgb(99 157 139 / 28%));
}

.new-room .new-room-table .table-number {
  left: 50%;
  top: 30%;
  padding: .18rem .38rem;
  border-radius: 999px;
  color: #5d4b33;
  background: rgb(255 250 241 / 88%);
  box-shadow: 0 2px 8px rgb(80 53 26 / 13%);
  font: 700 .64rem/1 Inter, sans-serif;
  transform: translateX(-50%);
}

.new-room .new-room-table .table-status {
  top: 4%;
  color: #3d7056;
  border-color: rgb(97 124 101 / 18%);
  background: rgb(255 250 241 / 90%);
  box-shadow: 0 4px 14px rgb(64 48 30 / 12%);
  font-size: .68rem;
}

.seat-hotspot {
  position: absolute;
  left: calc(var(--seat-x) * var(--room-unit));
  z-index: 19;
  top: 67%;
  width: calc(10 * var(--room-unit));
  height: 28%;
  border: 1px solid transparent;
  border-radius: 45%;
  background: transparent;
  transform: translate(-50%, -12%);
  cursor: pointer;
}

.seat-hotspot:hover,
.seat-hotspot:focus-visible,
.seat-hotspot.pulled {
  outline: none;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.seat-hotspot.occupied {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.seat-hotspot.occupied-other {
  cursor: not-allowed;
}

.seat-hotspot.occupied-other:hover,
.seat-hotspot.occupied-other:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.club.new-room #player {
  left: calc(var(--px) * var(--room-unit));
  z-index: 10;
  width: clamp(92px, calc(11.5 * var(--room-unit)), 176px);
  height: clamp(155px, calc(21 * var(--room-unit)), 320px);
  opacity: 1;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  transition: left .14s linear, top .14s linear;
}

.club.new-room #player img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 8px 5px rgb(44 43 34 / 22%));
  user-select: none;
}

.club.new-room #player .player-dress-tint {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--guest-dress);
  opacity: .74;
  mix-blend-mode: color;
  pointer-events: none;
  -webkit-mask-image: var(--guest-mask);
  mask-image: var(--guest-mask);
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  clip-path: none;
}

.club.new-room #player.facing-right img {
  transform: scaleX(-1);
}

.club.new-room #player.facing-right .player-dress-tint {
  transform: scaleX(-1);
}

.club.new-room #player.walking img {
  animation: newRoomWalkBob .9s ease-in-out infinite alternate;
}

.club.new-room #player.walking.facing-right img {
  animation-name: newRoomWalkBobRight;
}

.club.new-room #player.sitting {
  z-index: 13;
  width: clamp(92px, calc(9.4 * var(--room-unit)), 142px);
  height: clamp(148px, calc(17.6 * var(--room-unit)), 264px);
  transform: translate(-50%, -100%);
}

.club.new-room #player.sitting.seat-left {
  transform: translate(-56%, -100%);
}

.club.new-room #player.sitting.seat-right {
  transform: translate(-44%, -100%);
}

.club.new-room #player.sitting .player-dress-tint {
  clip-path: none;
}

.room-player-name {
  z-index: 2;
  position: absolute;
  left: 50%;
  top: -2px;
  padding: .2rem .52rem;
  border-radius: 999px;
  color: white;
  background: rgb(36 88 71 / 88%);
  box-shadow: 0 3px 10px rgb(27 56 46 / 20%);
  font-size: .66rem;
  font-weight: 800;
  transform: translate(-50%, -100%);
}

.club.new-room #player.sitting .room-player-name {
  display: none;
}

.room-online-guests {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--room-width-units) * var(--room-unit));
  z-index: 9;
  pointer-events: none;
}

.room-guest {
  position: absolute;
  left: calc(var(--px) * var(--room-unit));
  top: var(--py);
  width: clamp(92px, calc(11.5 * var(--room-unit)), 176px);
  height: clamp(155px, calc(21 * var(--room-unit)), 320px);
  z-index: 9;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  transition: left .34s ease-out, top .34s ease-out;
}

.room-guest > img,
.room-guest .guest-dress-tint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.room-guest > img {
  filter: drop-shadow(0 8px 5px rgb(44 43 34 / 22%));
  user-select: none;
}

.room-guest .guest-dress-tint {
  background: var(--guest-dress);
  opacity: .74;
  mix-blend-mode: color;
  -webkit-mask-image: var(--guest-mask);
  mask-image: var(--guest-mask);
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  clip-path: none;
}

.room-guest.facing-right > img,
.room-guest.facing-right .guest-dress-tint {
  transform: scaleX(-1);
}

.room-guest.walking {
  animation: newRoomGuestWalk .9s ease-in-out infinite alternate;
}

.room-guest.sitting {
  top: 82.8%;
  z-index: 13;
  width: clamp(92px, calc(9.4 * var(--room-unit)), 142px);
  height: clamp(148px, calc(17.6 * var(--room-unit)), 264px);
  transform: translate(-50%, -100%);
}

.room-guest.sitting.seat-left {
  transform: translate(-56%, -100%);
}

.room-guest.sitting.seat-right {
  transform: translate(-44%, -100%);
}

.room-guest.sitting .guest-dress-tint {
  clip-path: none;
}

.room-guest .room-player-name {
  top: 1px;
  color: #fff7e9;
  background: rgb(78 48 29 / 90%);
  box-shadow: 0 3px 10px rgb(44 24 13 / 28%);
}

.seat-front-overlay {
  z-index: 15;
  display: none;
}

.club.new-room .seat-front-overlay,
.club.new-room .seat-front-overlay.visible {
  display: none !important;
}

.seat-front-overlay.visible {
  display: block;
}

.seat-front-overlay.table-1-front {
  background-image: url("assets/new-room/seat-front-front-left.png");
}

.seat-front-overlay.table-2-front {
  background-image: url("assets/new-room/seat-front-front-center.png");
}

.seat-front-overlay.table-3-front {
  background-image: url("assets/new-room/seat-front-front-right.png");
}

.new-room .interaction {
  position: fixed;
  z-index: 22;
  bottom: 4.7rem;
  color: #3d5146;
  border-color: rgb(56 89 73 / 16%);
  background: rgb(255 250 241 / 88%);
  box-shadow: 0 8px 28px rgb(64 46 28 / 12%);
  backdrop-filter: blur(10px);
}

.new-room .controls-hint {
  position: fixed;
  z-index: 22;
  bottom: 2.2rem;
  color: #5d6c63;
  padding: .42rem .7rem;
  border-radius: 999px;
  background: rgb(255 250 241 / 76%);
}

@keyframes newRoomWalkBob {
  to { transform: translateY(-1px); }
}

@keyframes newRoomWalkBobRight {
  from { transform: scaleX(-1) translateY(0); }
  to { transform: scaleX(-1) translateY(-1px); }
}

@keyframes newRoomGuestWalk {
  to { margin-top: -1px; }
}

@media (max-width: 850px) {
  .new-room-backdrop { background-position: left top; }

  .topbar {
    gap: 10px;
  }

  .topbar .online {
    display: none;
  }

  .topbar-computer-button {
    margin-left: auto;
    font-size: 11px;
  }
}

/* Collapsible club chat */
.chat-panel {
  transition: height .22s ease, box-shadow .22s ease;
}

.chat-tabs {
  min-height: 42px;
  align-items: stretch;
}

.chat-tabs .chat-collapse {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  padding: 0;
  border-left: 1px solid rgb(216 173 98 / 16%);
  color: #d7ad62;
}

.chat-tabs .chat-collapse span {
  display: grid;
  width: 22px;
  height: 22px;
  margin: auto;
  place-items: center;
  border: 1px solid rgb(216 173 98 / 28%);
  border-radius: 6px;
  font-size: 15px;
  line-height: 1;
}

.chat-panel.collapsed {
  height: 42px;
  box-shadow: 0 10px 28px rgb(18 8 3 / 38%);
}

.chat-panel.collapsed > :not(.chat-tabs) {
  display: none;
}