/* AI Arcade hall board, shared on Play arcade and homepage */

.play-hall {
 position: relative;
 z-index: 1;
 width: min(100%, 34rem);
 max-width: 34rem;
 margin-top: clamp(28px, 5vw, 44px);
 margin-inline: auto;
 padding: 18px 18px 16px;
 border-radius: 18px;
 border: 1px solid rgba(152, 186, 227, 0.22);
 background: rgba(7, 11, 20, 0.72);
}

.play-hall--embedded {
 margin-top: 0;
 width: 100%;
 max-width: none;
}

.play-hall h3 {
 margin: 0 0 6px;
 font-size: 0.78rem;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: #8ab4ff;
}

.play-hall__lead,
.play-hall__empty,
.play-hall__note {
 margin: 0 0 12px;
 color: #bcd1ee;
 font-weight: 500;
 line-height: 1.6;
}

.play-hall__empty[hidden] {
 display: none;
}

.play-hall__note {
 margin: 10px 0 0;
 font-size: 0.92rem;
}

.play-hall__boards {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin: 0 0 14px;
}

.play-hall__tab {
 min-height: 36px;
 padding: 8px 14px;
 border-radius: 12px;
 border: 1px solid rgba(152, 186, 227, 0.28);
 background: rgba(12, 20, 34, 0.85);
 color: #d7e6f8;
 font-size: 0.78rem;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 cursor: pointer;
}

.play-hall__tab:hover,
.play-hall__tab:focus-visible {
 border-color: rgba(152, 186, 227, 0.5);
 color: #e8eef9;
}

.play-hall__tab:focus-visible {
 outline: 2px solid #8ab4ff;
 outline-offset: 2px;
}

.play-hall__tab.is-active {
 border-color: rgba(232, 176, 92, 0.55);
 background: rgba(232, 176, 92, 0.16);
 color: #f3d7a0;
}

.play-hall.is-game.play-hall__cabinet {
 display: none;
}

.play-hall.is-game.play-hall__list li {
 grid-template-columns: 2rem minmax(0, 1fr) auto;
}

.play-hall__list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: 6px;
}

.play-hall__list li {
 display: grid;
 grid-template-columns: 2rem minmax(0, 1fr) auto auto;
 gap: 10px;
 align-items: baseline;
 padding: 8px 10px;
 border-radius: 10px;
 background: rgba(15, 25, 40, 0.55);
}

.play-hall__list li.is-mine {
 outline: 1px solid rgba(232, 176, 92, 0.55);
 background: rgba(232, 176, 92, 0.12);
}

.play-hall__rank {
 font-weight: 900;
 color: #e8c07a;
 font-variant-numeric: tabular-nums;
}

.play-hall__name {
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.play-hall__cabinet {
 color: #8ab4ff;
 font-size: 0.78rem;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 white-space: nowrap;
}

.play-hall__meta {
 color: #bcd1ee;
 font-size: 0.82rem;
 font-weight: 700;
 font-variant-numeric: tabular-nums;
 white-space: nowrap;
}

@media (max-width: 720px) {
.play-hall__list li {
 grid-template-columns: 2rem minmax(0, 1fr) auto;
 grid-template-areas:
 "rank name meta"
 "rank cabinet meta";
 }

.play-hall__rank { grid-area: rank; }
.play-hall__name { grid-area: name; }
.play-hall__cabinet { grid-area: cabinet; }
.play-hall__meta { grid-area: meta; }

.play-hall.is-game.play-hall__list li {
 grid-template-columns: 2rem minmax(0, 1fr) auto;
 grid-template-areas: "rank name meta";
 }
}