/* The hall is one full-height column: the tab bar and the open tab, then the main bar, the chat and the disclaimer
   (hall.html #main; the shell is ported from the LOTR hall). */
html, body {
    font-size: 12px;
    background-color: #000000;
    height: calc(100% - 8px);
}

body {
    position: relative;
    margin: 8px;
}

#main {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    border: none;
    padding: 0;
}

/* a section of the hall (Waiting Tables, Playing Tables, ...): a header button that opens and closes it */
.eventHeader {
    font-size: 120%;
    font-weight: bolder;
    background-color: #555555;
    color: #ffffff;
    cursor: pointer;
    padding: 4px;
    margin: 2px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

button.eventHeader {
    font-size: 120%; /* beats jQuery UI's ".ui-widget button { font-size: 1em }" */
    width: calc(100% - 4px);
    text-align: left;
    font-family: inherit;
    border: none;
}

button.eventHeader:focus-visible {
    outline: 2px solid #E88104;
    outline-offset: 1px;
}

.disclosureTriangle {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    margin-right: 4px;
    vertical-align: middle;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid #fff;
    transition: transform 0.2s ease;
}

.eventHeader.expanded .disclosureTriangle {
    transform: rotate(90deg);
}

.leagueName, #stats .period, .tournamentName, .playerStatHeader {
    font-size: 200%;
    font-weight: bolder;
}

.leagueID {
    font-size: 50%;
}

.serieName {
    font-size: 150%;
    font-weight: bolder;
}

.borderOverlay {
    border: 2px solid #000000;
}

.foilOverlay {
    opacity: 0.2;
}

body.foil-none .foilOverlay {
    display: none !important;
}

.cardHint {
    display: inline;
    color: #6f6fff;
    cursor: pointer;
}

.prizeHint {
    display: inline;
    color: #6f6fff;
    cursor: pointer;
}

.clickableFormat {
    cursor: pointer;
    color: #6f6fff;
}

.pocket {
    background-color: #000000;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-size: 90%;
    font-weight: bolder;
    text-align: right;
    opacity: 1;
}

.cardCount {
    width: 20px;
    height: 18px;
    background-color: #000000;
    color: #ffffff;
    font-size: 120%;
    font-weight: bolder;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    opacity: 0.7;
}

.cardCount.deliveryCorner {
    opacity: 0.85;
    border-radius: 2px;
}

.ui-dialog .ui-dialog-content.delivery-dialog,
.ui-dialog-content.delivery-dialog,
.delivery-dialog {
    overflow: hidden;
    position: relative;
    padding: 0;
}

.delivery-pager {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 6;
    height: 24px;
    line-height: 24px;
    text-align: center;
    color: #ffffff;
    font-size: 14px;
    background: #111111;
}

.delivery-pager .delivery-page-label {
    display: inline-block;
    min-width: 110px;
    margin: 0 8px;
}

.delivery-page-arrow {
    height: 22px;
    min-width: 28px;
    padding: 0 8px;
    cursor: pointer;
    color: #ffffff;
    background: #333 linear-gradient(#555, #222);
    border: 1px solid #888;
    border-radius: 3px;
}

.delivery-page-arrow:hover:not(:disabled) {
    border-color: #d4af37;
    background: #554400 linear-gradient(#bf8a4a, #1c1c1c);
}

.delivery-page-arrow:disabled {
    opacity: 0.4;
    cursor: default;
}

.delivery-page {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 24px;
    bottom: 0;
}

.delivery-page-inner {
    position: relative;
}

.tableFormatName {
    text-align: center;
    font-weight: bold;
    font-size: 100%;
}

.tableStatus {
    text-align: center;
    font-style: italic;
    font-size: 100%;
}

.tablePlayer {
    text-align: center;
}

.winningPlayer {
    font-weight: bold;
    font-size: 110%;
}

.losingPlayer {
    font-size: 80%;
}

.chatMessage {
    color: #ffffff;
}

.systemMessage {
    color: #5f5f5f;
}

.warningMessage {
    color: #ff0000;
}

.chatUser {
    color: #ffffff;
}

.systemMessage > .timestamp {
    display: inline;
    color: #5f5f5f;
}

.timestamp {
    display: inline;
    color: #cfcfcf;
}

#disclaimer {
    color: #ffffff;
    font-size: 70%;
    text-align: center;
    flex: 0 0 auto;
}

/* ---- the top tab bar ---- */
#tabs {
    position: sticky;
    flex: 0 0 auto;
}

#main > .ui-tabs-panel {
    /* wide pages (the admin tables) scroll sideways rather than being cut off */
    overflow-x: auto;
    overflow-y: hidden;
    height: 100%;
    position: relative;
    flex-grow: 1;
    padding: 0;
    border: 0 none #000000;
    min-width: 50%;
    width: 100%;
}

/* ---- the Game Hall tab ---- */
#gameHall {
    overflow-y: auto;
    width: 100%;
}

#gameHallMain {
    flex-direction: column;
    width: 100%;
}

#hall {
    flex-grow: 3;
    min-height: 0;
}

#tablesDiv {
    overflow-y: auto;
    overflow-x: hidden;
    border-style: none;
}

/* the sub-bar above the tables: Report a Bug, the SWCCG Wiki, the Merchant, and the message of the day */
#serverInfo {
    align-items: stretch;
    overflow: visible;
    flex-shrink: 1;
    padding: 7px;
    position: sticky;
    top: -14px;
    background: linear-gradient(to top, #333333, #111111 40%, #111111);
    border-radius: 6px;
    border-color: #bf8a4a;
    border-style: none none solid none;
    z-index: 100;
}

#infoButtons {
    flex-wrap: wrap;
}

.toolbar-button {
    padding: .4em .8em;
}

#infoButtons a.ui-button,
.buttons-gutter a.ui-button {
    color: #eeeeee;
    text-decoration: none;
}

#infoButtons a.ui-button:hover,
#infoButtons a.ui-button:focus,
.buttons-gutter a.ui-button:hover,
.buttons-gutter a.ui-button:focus {
    color: #ffffff;
}

#messageArea {
    align-items: center;
}

.motd, div.motd a {
    font-size: 90%;
}

.motd {
    color: #ffe81f;
    margin: 5px;
    flex-grow: 1;
}

div.motd a {
    color: #ffae00
}
div.motd a:active {
    color: #FFFFFF
}

div.motd a:visited {
    color: #d18b00;
}

#motd-preview {
    flex-basis:50%;
    word-wrap:break-word;
    max-width:100%
}

#motd-text {
    min-width:50%
}

button.admin-button .ui-button-text {
    font-size: inherit;
}

button.admin-button, input.admin-button {
    padding:4px;
}

/* ---- the main bar under the tables: connection readout | Deck-builder and Play | server clock ---- */
.buttons-gutter {
    flex: 0 0 auto;
    height: 40px;
    background-color: #333333;
    border-top: 1px solid #aaaaaa;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 5px;
}

#main > .buttons-gutter > .hall-connection,
#main > .buttons-gutter > .server-time {
    flex: 1 1 0;
    min-width: max-content;
}

/* the centre group is only a layout wrapper: the bar's own top border runs across the whole width */
#main > .buttons-gutter > .buttons-gutter {
    flex: 0 1 auto;
    border-top: none;
    padding: 0;
    background: none;
    justify-content: center;
}

.play-buttons {
    width: 15rem;
    border-color: #AAAAAA;
    font-size: 1.3rem;
}

/* ---- the chat ---- */
#chat {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    background-color: #121212;
    padding-top: 5px;
    align-self: flex-end;
    flex-shrink: 0;
}

#chat .ui-resizable-handle {
    background-color: #777777;
    height: 7px;
    top: -1px;
}

#chat .ui-resizable-handle::after {
    content: '';
    width: 10%;
    height: 10px;
    background: #999999;
    position: absolute;
    bottom: -2px;
    left: 45%;
}

/* the chat's resize bar (hallUi.js HallChatResizer) */
#chat .hall-chat-resizer {
    cursor: ns-resize;
    z-index: 5;
}

#chat .hall-chat-resizer:focus-visible {
    outline: 2px solid #E88104;
    outline-offset: -1px;
}

/* while the chat is being resized nothing else takes the pointer, and nothing gets selected */
body.hall-chat-resizing,
body.hall-chat-resizing * {
    cursor: ns-resize !important;
    user-select: none;
}

#chatarea {
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    margin-top: 5px;
    flex-grow: 1;
}

#legacyChat {
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
}

#chatMessages {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    border-style: solid;
    border-width: 3px;
    border-color: #222222;
    padding: 2px;
}

#legacyChatInput {
    flex: 0 0 auto;
    align-items: flex-end;
    padding-bottom: 2px;
}

#chatTalk {
    flex-grow: 1;
    box-sizing: border-box;
    resize: none;
    /* one line of text at rest; grows with what is typed (chat.js) up to about four lines */
    height: 2.25em;
    min-height: 2.25em;
    max-height: 6.5em;
    padding: 0.35em 0.5em;
    font: inherit;
    line-height: 1.35;
    color: #eeeeee;
    background-color: #1c1c1c;
    border: 1px solid #555555;
    border-radius: 3px;
}

#chatTalk:focus {
    border-color: #888888;
    outline: none;
}

#legacyChatInput button {
    flex: 0 0 auto;
    margin-left: 3px;
}

#userListColumn {
    min-width: fit-content;
    max-width: 15em;
    flex: 0 0 auto;
}

#userList {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    border-left: 1px solid #999999;
    padding: 5px;
    min-height: 0;
}

.page {
    width:max(800px, 50%);
    margin: 3em auto 20em auto;
}

/* ---- a tab's page with sub-tabs down its left side (Help, Server Info, My Account) ---- */
.sub-tabs {
    position: sticky;
    top: 5px;
    margin: 4px;
}

.sub-tabs .ui-tabs-panel {
    overflow-y: auto;
}

/* the column of sub-tabs keeps one width whichever page is showing, so the pages do not shift under it */
.hall-tab.flex-horiz > .sub-tabs {
    flex: 0 0 200px;
}

.ui-tabs-vertical ol.ui-tabs-nav {
    float: left;
    max-width: 200px;
}

.ui-tabs-vertical ol.ui-tabs-nav li {
    width: 100%;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    margin: 0 -1px .2em 0;
}

.ui-tabs-vertical ol.ui-tabs-nav li a {
    display: block;
}

.ui-tabs-vertical ol.ui-tabs-nav li.ui-tabs-active {
    padding-bottom: 0;
    padding-right: .1em;
    border-right-width: 1px;
}

.hall-tab.flex-horiz > .ui-tabs-panel {
    float: right;
    min-width: 50%;
    flex-grow: 1;
}

.ui-tabs-anchor {
    width: 100%;
}

/* a page of text inside a tab (Help pages, About, league rules) */
.article {
    width: max(800px, 50%);
    margin: 3em auto 20em auto;
    font-size: 120%;
    color: #ffffff;
}

.article li {
    margin: 10px;
}

.article a,
.article a:visited {
    color: #E88104;
}

.lemph {
    color: #009f9f;
    font-weight: bold;
}

.article h1 {
    font-size: 160%;
    margin: 0.6em 0 0.4em;
}

.article h2 {
    font-size: 125%;
    margin: 1.2em 0 0.3em;
    color: #ffa84a;
}

.article p {
    line-height: 1.4;
}

.article table.tables {
    width: auto;
    min-width: 50%;
    margin: 0.5em 0;
    font-size: 90%;
}

.article .load-error {
    color: #ffb0a0;
}

/* a picture in a help article, with its caption underneath (LOTR hall.css) */
.helpimg {
    display: block;
    margin: auto;
    padding: 1em;
}

.helpimg > img {
    display: block;
    margin: auto;
    max-height: 300px;
    max-width: 100%;
    border-style: solid;
}

.helpimg > span {
    text-align: center;
    margin: auto;
    display: block;
    font-style: italic;
    padding: 1em;
}

/* Help › Format Definitions: the server's format blocks under a short intro (LOTR formatDefinitions.css, trimmed) */
.fd-page {
    padding: 0 12px 2em;
    color: #ffffff;
}

.fd-intro h1 {
    font-size: 160%;
    margin: 0.6em 0 0.4em;
}

.fd-intro p {
    line-height: 1.4;
    max-width: 60em;
}

.fd-intro a,
.fd-intro a:visited {
    color: #E88104;
}

.fd-tools {
    display: flex;
    gap: 0.4em;
    margin: 0.5em 0 0;
}

.fd-loading,
.changelog-legacy {
    color: #bbbbbb;
}

.changelog-legacy {
    font-size: 85%;
    padding: 0.5em 0.8em;
    border-left: 2px solid #567;
}

/* Server Info › Server Stats, My Account › My Stats and My Collection: a heading, a note and the tables */
.stats-page {
    padding: 0 12px 2em;
    color: #ffffff;
}

.stats-page h1 {
    font-size: 160%;
    margin: 0.6em 0 0.4em;
}

.stats-page h2,
.stats-page .stats-caption,
.stats-page .playerStatHeader,
.stats-page #stats .period {
    font-size: 110%;
    font-weight: bold;
    margin: 0.8em 0 0.3em;
    color: #ffa84a;
}

.stats-page #stats .period {
    color: #ffffff;
}

.stats-note {
    color: #bbbbbb;
    font-size: 90%;
    margin: 0 0 0.6em;
}

.stats-note a,
.stats-note a:visited {
    color: #E88104;
}

.stats-parameters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6em;
    margin: 0 0 0.8em;
}

.stats-status {
    color: #ffb0a0;
}

.stats-page table.tables {
    width: auto;
    min-width: 40%;
    border-collapse: collapse;
}

.stats-page td.stats-number {
    text-align: right;
}

.stats-empty {
    color: #bbbbbb;
    font-style: italic;
}

/* My Account > overview: the name, the currency on the right, then the sections (LOTR hall.css) */
.account-page {
    padding: 0 12px 2em;
    color: #ffffff;
}

.account-page h1 {
    font-size: 160%;
    margin: 0.6em 0 0.4em;
}

.account-facts .account-pocket img {
    vertical-align: middle;
}

.account-section {
    clear: both;
    margin-top: 1.5em;
    max-width: 48em;
}

.account-section h2 {
    font-size: 115%;
    margin: 0 0 0.3em;
    color: #ffa84a;
}

.account-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.2em 1em;
    margin: 0.4em 0;
}

.account-facts dt {
    color: #bbbbbb;
}

.account-facts dd {
    margin: 0;
}

.account-help {
    color: #bbbbbb;
    font-size: 90%;
    line-height: 1.4;
}

.ignore-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
}

/* the PlayerPicker (playerPicker.js) around #mute-add-name: a field of a name's width, not the whole row */
.ignore-add .player-picker {
    flex: 0 1 16em;
}

.ignore-status {
    min-height: 1.2em;
    margin: 0.3em 0;
}

.ignore-list {
    list-style: none;
    padding: 0;
    margin: 0.3em 0;
}

.ignore-list li {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0.2em 0.4em;
    border-bottom: 1px solid #333333;
}

.ignore-list .mute-reason {
    color: #bbbbbb;
    font-size: 90%;
    flex: 1 1 auto;
}

.ignore-list .mute-remove {
    margin-left: auto;
}

/* A tab's page.  Pages whose sub-tabs run down the left side carry flex-horiz as well (Help, Events, Server Info,
   My Account); the admin page keeps its sub-tabs in a row across the top, so it is left as a block. */
.hall-tab {
    background: linear-gradient(to top, #0b0b0b, #111111 80%);
    width: calc(100% - 0.4em);
    height: calc(100% - 1rem);
    overflow-x: hidden;
    gap: 5px;
    flex-grow: 3;
}

/* Admin sub-tabs: compact left-aligned row, leftover space on the right.
   Do not put flex-horiz on #adminMain (that clusters the nav as a left column). */
#adminMain #admin-tabs,
#adminMain .sub-tabs {
    width: 100%;
}

#adminMain .ui-tabs-nav,
#adminMain #admin-tabs > ol {
    display: block;
    width: 100%;
}

#adminMain .ui-tabs-nav li {
    float: left;
    width: auto;
}

#adminMain .ui-tabs-nav li a {
    float: left;
    display: block;
    width: auto;
    white-space: nowrap;
}

.hall-tab .ui-tabs-panel {
    height: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: auto;
}

/*#ui-tabs-12 {
    height: 90%;
    overflow: scroll;
    display: block;
}*/

td button {
    width: calc(100% - 6px);
    margin: 3px;
}

.page td button .ui-button-text {
    font-size: inherit;
}

.page td {
    padding: 5px;
}

table.tables {
    width: 100%;
}

table.tables td, table.tables th {
    padding: 5px;
    border: 1px solid white;
}

.flex-horiz {
  display: flex;
  flex-direction: row;
  gap: 2px;
}

.flex-vert {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

textarea, input, select {
  color: #ffffff;
  background-color: #222222;
}

textarea, input {
  border-color: #666666 #888888 #888888 #666666;
  margin: 2px;
}

.ui-tabs-nav li {
    font-size: 70%;
}

.ui-tabs-panel {
    overflow-x:hidden;
    overflow-y:auto;
}

.ui-button-text-only .ui-button-text {
    font-size: 70%;
    padding: .2em .5em;
}

.standings td, .standings th {
    padding: 2px;
    border: 1px solid white;
}

.gameHistory td, .gameHistory th {
    padding: 2px;
    border: 1px solid white;
}

.userList {
    color: #ffffff;
}

tr.played {
    background-color: #990000;
}






div.format-detail {
}

li.format-detail {

}
li.format-detail span {

}

span.format-valid-sets-label,
span.format-icons-not-allowed-label,
span.format-deck-size-label,
span.format-rarities-not-allowed-label,
span.format-x-listed-label,
span.format-r-listed-label,
span.format-additional-valid-label {

}

li.format-details-set-icon {
}

span.format-set-icons { display:none; }

span.format-deck-size, span.format-default-game-timer-minutes {
    color:#ffffff;
}

div.format-name {
    border-bottom:0.0125px #666666 solid;
    margin-top:1em;
}

span.format-name-label {
    font-family:sans-serif;
    font-weight:bold;
    font-size:18pt;
    cursor: pointer;
}

li.format-detail {
    color:#ffffff;
    border-bottom:0.5px #ffe81f solid;
    color:#ffa84a;
    font-weight:bold;
    font-size:12pt;
    font-family:sans-serif;
    cursor: pointer;
    margin-top:1em;
}

li.format-detail ul {
    color:#ffffff;
    font-weight:bold;
    font-size:10pt;
}

span.format-name-label::before { content: "▶ "; color:#ffa84a; font-size:8pt; }
span.format-name-label-downarrow::before { content: "▼ "; color:#ffa84a; font-size:10pt; }

span.all-sets-valid {
    color:#66d766;
}

/* Social Links */
li.social-link {
    background:none !important;
    border:none !important;
}


/* Leagues information page */
.leagueSeeDetails {
    margin-top:3px;
    margin-bottom:3px;
}
.leagueExtraInfo {
    border:0.5px #ffa74a solid;
    padding:5px;
    margin:5px;
}
.leagueHr {
    color:#555555;
    border:1px #555555 solid;
    margin-top:5px;
    margin-bottom:5px;
    padding:0;
}
.leagueDurationStart {
    color:green;
}
.leagueDurationStop {
    color:red;
}

/* League Results */

#myLeagueResults {
    border:0.5px #00a3ff solid;
    padding:5px;
    margin:5px;
}

#my-leagues-header {
    color:#00a3ff;
}

#leagueResults {
    border:0.5px #79da71 solid;
    padding:5px;
    margin:5px;
}

#all-leagues-header {
    color:#79da71;
}

/* Disabled draft button */
button.draft-not-available {
    background-color: #666 !important;
    color: #f0f0f0 !important;
    cursor: not-allowed !important;
    border: 1px solid #555 !important;
}


/* ===== Slice 1 / 1.1: Deck-builder + Play primary chrome (LOTR-inspired) ===== */

.hall-primary-actions .hall-play-button,
a.hall-play-button,
button.hall-play-button {
    min-width: 168px;
    min-height: 44px;
    font-size: 15px !important;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    border-radius: 6px !important;
    border: 1px solid #aaaaaa !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hall-primary-actions a.hall-play-button .ui-button-text,
.hall-primary-actions button.hall-play-button .ui-button-text {
    padding: 0.55em 1.1em;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Deck-builder: cool steel / rebel blue */
a.hall-play-button-deckbuilder,
button.hall-play-button-deckbuilder,
.hall-primary-actions a.hall-play-button-deckbuilder.ui-button,
.hall-primary-actions a.hall-play-button-deckbuilder.ui-state-default {
    background: #1a3355 linear-gradient(#3a6ea5, #142433) !important;
    border-color: #7eb6e8 !important;
}

a.hall-play-button-deckbuilder:hover,
a.hall-play-button-deckbuilder:focus,
.hall-primary-actions a.hall-play-button-deckbuilder.ui-state-hover,
.hall-primary-actions a.hall-play-button-deckbuilder.ui-state-focus {
    background: #1a3355 linear-gradient(#5a94c8, #1a3355) !important;
    border-color: #b7d7f5 !important;
}

/* Play: gold fill at rest, gray border. Gold border + brighter fill only on mouseover. */
button.hall-play-button-play,
.hall-primary-actions button.hall-play-button-play.ui-button,
.hall-primary-actions button.hall-play-button-play.ui-state-default {
    background: #554400 linear-gradient(#845826, #1c1c1c) !important;
    border-color: #aaaaaa !important;
}

button.hall-play-button-play:hover,
.hall-primary-actions button.hall-play-button-play.ui-state-hover {
    background: #554400 linear-gradient(#e0b05a, #3a2a00) !important;
    border-color: #d4af37 !important;
}

.hall-play-button-label {
    display: inline-block;
}

/* Slice 1.1.2/1.1.3: real LOTR SVG icons via <img> + data-URI fallback
   (nginx previously served .svg as application/octet-stream, which blanked CSS backgrounds) */
.hall-play-button .hall-play-icon,
.hall-primary-actions .hall-play-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: middle;
    flex-shrink: 0;
    object-fit: contain;
    /* white icon on colored buttons */
    filter: brightness(0) invert(1);
}
.hall-play-button .hall-play-icon-play,
.hall-primary-actions .hall-play-icon-play {
    /* warm gold tint like LOTR .icon-play */
    filter: invert(74%) sepia(62%) saturate(1872%) hue-rotate(333deg) brightness(101%) contrast(92%);
}
/* fallback if img src blocked: empty spans still get painted from data URI */
.hall-play-button .bigger-icon,
.hall-primary-actions .bigger-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    vertical-align: middle;
    filter: brightness(0) invert(1);
}
.hall-play-button .icon-deckbuilder,
.hall-primary-actions .icon-deckbuilder {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3C%21--%21%20Font%20Awesome%20Pro%206.1.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%20%28Commercial%20License%29%20Copyright%202022%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20d%3D%22M568.1%20196.3l-22.62-22.62c-4.533-4.533-10.56-7.029-16.97-7.029s-12.44%202.496-16.97%207.029l-5.654%205.656l-20.12-20.12c4.596-23.46-2.652-47.9-19.47-64.73l-45.25-45.25C390.2%2017.47%20347.1%200%20303.1%200C258.2%200%20216%2017.47%20184.3%2049.21L176.5%2057.05L272.5%20105.1v13.81c0%2018.95%207.688%2037.5%2021.09%2050.91l49.16%2049.14c13.44%2013.45%2031.39%2020.86%2050.54%2020.86c4.758%200%209.512-.4648%2014.18-1.387l20.12%2020.12l-5.654%205.654c-9.357%209.357-9.357%2024.58-.002%2033.94l22.62%2022.62c4.535%204.533%2010.56%207.031%2016.97%207.031s12.44-2.498%2016.97-7.031l90.53-90.5C578.3%20220.8%20578.3%20205.6%20568.1%20196.3zM270.9%20192.4c-3.846-3.846-7.197-8.113-10.37-12.49l-239.5%20209.2c-28.12%2028.12-28.16%2073.72-.0371%20101.8C35.12%20505%2053.56%20512%2071.1%20512s36.84-7.031%2050.91-21.09l209.1-239.4c-4.141-3.061-8.184-6.289-11.89-9.996L270.9%20192.4z%22%2F%3E%3C%2Fsvg%3E");
}
.hall-play-button .icon-play,
.hall-primary-actions .icon-play {
    background-image: url("data:image/svg+xml,%3Csvg%20style%3D%22height%3A%20512px%3B%20width%3A%20512px%3B%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cg%20class%3D%22%22%20style%3D%22%22%20transform%3D%22translate%280%2C0%29%22%3E%3Cpath%20d%3D%22m386.688%20487.75-119.236-55.423c-7.898-3.673-11.334-13.065-7.66-20.976l84.374-181.523c3.667-7.904%2013.07-11.334%2020.963-7.667l119.24%2055.434c7.9%203.673%2011.33%2013.065%207.656%2020.964l-84.37%20181.524c-3.678%207.904-13.076%2011.334-20.968%207.667zM98.95%20467.945%2019.79%20284.09c-3.448-8.007.255-17.302%208.25-20.744l39.196-16.872%2048.975%20184.044c4.694%2017.588%2022.755%2028.078%2040.36%2023.39l39.032-10.386-75.907%2032.686c-8.007%203.443-17.296-.255-20.744-8.262zm33.89-41.86L81.362%20232.638c-2.24-8.42%202.78-17.078%2011.19-19.312l34.033-9.052-4.098%2030.465c-2.422%2018.036%2010.224%2034.652%2028.285%2037.087l79.828%2010.758-32.497%20109.467c-3.345%2011.28-.37%2022.948%206.866%2031.18l-52.82%2014.05c-8.42%202.24-17.07-2.77-19.31-11.196zm108.428-4.76-16.02-4.76c-8.36-2.49-13.12-11.267-10.644-19.627l56.97-191.9c2.484-8.36%2011.28-13.12%2019.622-10.65l49.073%2014.583.008-.005.12.044-.133-.034a32.798%2032.798%200%200%200-11.705%2013.605l-84.38%20181.53a33.024%2033.024%200%200%200-2.915%2017.218zm-5.707-155.43-82.486-11.117c-8.633-1.166-14.704-9.12-13.538-17.758l26.73-198.39c1.16-8.633%209.125-14.698%2017.74-13.538l130.327%2017.563c8.627%201.166%2014.692%209.125%2013.532%2017.752L311.42%20182.46l-15.33-4.552c-17.467-5.197-35.826%204.784-41.004%2022.232l-19.525%2065.755zm-5.19-31.46c4.67-3.055%207.474-7.438%208.42-13.145.936-5.633-.357-10.617-3.866-14.945-3.51-4.414-8.39-7.14-14.656-8.178-6.344-1.057-11.93-.073-16.75%202.956-4.826%203.03-7.692%207.316-8.615%2012.87-.898%205.386.425%2010.42%203.97%2015.082%203.565%204.504%208.525%207.285%2014.863%208.34%206.35%201.057%2011.893.062%2016.634-2.98zm25.978-81.243c4.693-2.726%208.888-5.434%2012.598-8.117%203.703-2.684%206.915-5.586%209.635-8.725a44.96%2044.96%200%200%200%206.733-10.307c1.76-3.74%203.048-8.032%203.85-12.865%201.262-7.62%201.02-14.358-.735-20.234-1.75-5.87-4.693-10.94-8.833-15.22-4.135-4.27-9.24-7.753-15.318-10.43-6.07-2.684-12.804-4.633-20.174-5.86-7.692-1.28-15.3-1.602-22.815-.977-7.516.614-14.63%202.247-21.346%204.88l-5.95%2035.802c6.813-4.25%2013.77-7.104%2020.855-8.567%207.09-1.475%2013.726-1.7%2019.913-.668%2021.467%204.092%2019.44%2024.898%208.76%2034.03-5.652%204.473-11.334%208.802-15.942%2011.345-10.48%205.914-27.69%2023.125-22.542%2045.145l31.284%205.202c-7.11-17.757%2011.663-29.462%2020.028-34.434z%22%20fill%3D%22%23000000%22%20fill-opacity%3D%221%22%20transform%3D%22translate%280%2C%200%29%20scale%281%2C%201%29%20rotate%28-360%2C%20256%2C%20256%29%20skewX%280%29%20skewY%280%29%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    filter: invert(74%) sepia(62%) saturate(1872%) hue-rotate(333deg) brightness(101%) contrast(92%);
}

/* Keep icons visible after jQuery UI .button() wraps content in .ui-button-text */
.hall-play-button .ui-button-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.join-context {
    margin: 0 0 12px 0;
}

.join-result {
    margin: 4px 0 8px 0;
    padding: 8px 10px;
    border: 1px solid #aa3333;
    border-radius: 4px;
    background: rgba(80, 0, 0, 0.35);
    color: #ff8080;
    font-size: 13px;
}

.join-table-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
}

.join-table-form .play-form-heading {
    margin-bottom: 6px;
}

.join-dual-deck,
.join-single-deck {
    display: flex;
    flex-direction: column;
}

.join-table-form .play-form-deck-row + .play-form-deck-row {
    margin-top: 16px;
}

.join-table-form .play-form-actions {
    justify-content: stretch;
    margin-top: 4px;
}

body.play-flow-open {
    overflow: hidden;
}

.play-flow {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.play-flow-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

.play-flow-panel {
    position: relative;
    z-index: 1;
    width: min(620px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    /* LOTR play-dialog textured bg (dark-hive loop) */
    background: #222222 url(../dark-hive/images/ui-bg_loop_25_000000_21x21.png) 50% 50% repeat;
    border: 1px solid #888;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
    color: #ffffff;
    padding: 14px 16px 18px;
}

.play-flow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 8px;
}

.play-back-button,
.play-close-button {
    background: #333;
    color: #fff;
    border: 1px solid #777;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 10px;
}

.play-close-button {
    font-size: 18px;
    line-height: 1;
    padding: 2px 10px;
}

.play-selection {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.play-choice-button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    text-align: left;
    background: #222222 url(../dark-hive/images/ui-bg_highlight-soft_35_222222_1x100.png) 50% 50% repeat-x;
    color: #fff;
    border: 1px solid #666;
    border-radius: 6px;
    padding: 14px 16px;
    cursor: pointer;
}

.play-choice-button.ui-button {
    padding: 0;
}

.play-choice-button .ui-button-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
}

.play-choice-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: bold;
}

.play-flow-title {
    flex: 1 1 auto;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
}

/* Slice 1.4: Play submenu icons (LOTR processor / tabletop-players / holy-grail / family-tree as data URIs) */
.play-choice-button .bigger-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    vertical-align: middle;
}

.play-choice-button .icon-bot {
    background-image: url("data:image/svg+xml,%3Csvg%20style%3D%22height%3A%20512px%3B%20width%3A%20512px%3B%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cg%20class%3D%22%22%20style%3D%22%22%20transform%3D%22translate%280%2C0%29%22%3E%3Cpath%20d%3D%22M228.844%2032.22v114.218h17.687V32.218h-17.686zm-108.25.624c-15.507%200-28.094%2012.586-28.094%2028.093S105.087%2089%20120.594%2089c12.655%200%2023.34-8.372%2026.844-19.875h44.937v77.313h17.688v-95H147.03c-3.888-10.837-14.262-18.593-26.436-18.593zm193.25%200c-15.507%200-28.063%2012.586-28.063%2028.093%200%2012.124%207.677%2022.45%2018.44%2026.376v59.124h17.655V87.844c11.596-3.452%2020.063-14.193%2020.063-26.906%200-15.508-12.587-28.094-28.094-28.094zM266.124%2092.5v53.938h17.657V92.5h-17.655zm188.532%204.03c-15.507%200-28.094%2012.588-28.094%2028.095%200%2013.083%208.948%2024.074%2021.063%2027.188v27.468h-92.938v17.657h110.624v-46.342c10.223-4.192%2017.407-14.233%2017.407-25.97%200-15.507-12.557-28.094-28.064-28.094zM30.187%20123.657v17.688H96.75v55.594h62.814V179.28h-45.126v-55.624h-84.25zm147.032%2040.47v159.718h159.81v-159.72H177.22zm17.56%2015.655h17.657v78.595l32.407%2032.406h75.28v17.658H237.5l-2.594-2.594-10.75-10.75c-1.033%207.385-7.36%2013.062-15.03%2013.062-8.392%200-15.19-6.796-15.19-15.187%200-7.682%205.696-13.98%2013.095-15l-9.655-9.658-2.594-2.593V179.78zm54.94.157h17.686v55.313h52.53l.002%2017.688H249.72v-73zM53.124%20217.375v89.969c-11.49%203.512-19.844%2014.198-19.844%2026.844%200%2015.505%2012.557%2028.093%2028.064%2028.093s28.093-12.587%2028.093-28.092c0-12.195-7.79-22.564-18.656-26.438v-72.72h88.782v-17.655H53.124zm301.563%200v17.656h53.968v-17.655h-53.97zm99.968%2021.97c-10.898%200-20.342%206.21-25%2015.28h-74.97l.002%2017.688H427c2.325%2013.168%2013.824%2023.187%2027.656%2023.187%2015.507%200%2028.063-12.588%2028.063-28.094%200-15.507-12.557-28.062-28.064-28.062zm-349.062%2015.28v17.688h53.97v-17.688h-53.97zm17.156%2036.47v84.217c-11.498%203.513-19.875%2014.2-19.875%2026.844%200%2015.506%2012.587%2028.094%2028.094%2028.094%2015.506%200%2028.06-12.588%2028.06-28.094%200-12.194-7.766-22.564-18.624-26.437v-66.94h19.156v-17.686h-36.81zm231.938%200v17.686h45.156v95.283c-11.323%203.624-19.53%2014.26-19.53%2026.78-.002%2015.506%2012.585%2028.063%2028.092%2028.063%2015.507%200%2028.063-12.557%2028.063-28.062%200-12.32-7.935-22.778-18.97-26.563V291.095h-62.814zM192.375%20341.53v54.033h17.688V341.53h-17.688zm36.47%200v86.564c-11.013%203.794-18.94%2014.233-18.94%2026.53%200%2015.506%2012.588%2028.095%2028.095%2028.095s28.063-12.59%2028.063-28.095c0-12.53-8.203-23.14-19.532-26.75V341.53h-17.686zm37.28%200v54.033h17.688l-.032-54.032h-17.655zm38.094%200v140.064h17.655V341.53H304.22z%22%20fill%3D%22%23000000%22%20fill-opacity%3D%221%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    filter: invert(91%) sepia(43%) saturate(671%) hue-rotate(84deg) brightness(106%) contrast(104%);
}

.play-choice-button .icon-unranked {
    background-image: url("data:image/svg+xml,%3Csvg%20style%3D%22height%3A%20512px%3B%20width%3A%20512px%3B%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cg%20class%3D%22%22%20style%3D%22%22%20transform%3D%22translate%280%2C0%29%22%3E%3Cpath%20d%3D%22M134.865%20113.46c-7.463.026-15.134%202.977-22.38%208.663-9.658%207.582-18.055%2020.015-22.157%2035.324-4.102%2015.31-3.047%2030.274%201.527%2041.67%204.575%2011.396%2012.238%2018.958%2021.91%2021.55%209.67%202.59%2020.09-.126%2029.75-7.708%209.658-7.583%2018.055-20.016%2022.157-35.325%204.102-15.31%203.047-30.274-1.527-41.67-4.575-11.396-12.24-18.96-21.91-21.55a27.912%2027.912%200%200%200-7.37-.956zm242.27%200a27.94%2027.94%200%200%200-7.37.954c-9.672%202.59-17.337%2010.155-21.91%2021.55-4.576%2011.397-5.63%2026.362-1.527%2041.67%204.102%2015.31%2012.497%2027.743%2022.156%2035.325%209.66%207.58%2020.08%2010.297%2029.75%207.706%209.67-2.59%2017.338-10.153%2021.912-21.55%204.575-11.395%205.626-26.36%201.524-41.67-4.102-15.308-12.495-27.74-22.154-35.323-7.245-5.686-14.918-8.638-22.38-8.664zM88.387%20226.04c-10.146%202.133-18.06%206.477-24.82%2012.648-9.882%209.023-17.314%2022.553-23.03%2039.7-10.6%2031.8-15.044%2075.344-22.062%20120.153H150.97c-.04-44.9-.513-88.924-6.804-121.28-3.203-16.47-7.97-29.787-14.098-38.57-6.872%201.342-13.968%201.24-20.963-.635-8.012-2.147-14.98-6.376-20.718-12.014zm335.226%200c-5.74%205.64-12.705%209.868-20.718%2012.015-6.994%201.874-14.09%201.978-20.96.636-6.127%208.785-10.9%2022.1-14.1%2038.57-6.292%2032.356-6.766%2076.38-6.804%20121.28h132.493c-7.017-44.808-11.462-88.353-22.062-120.153-5.714-17.146-13.145-30.676-23.028-39.7-6.758-6.17-14.672-10.514-24.82-12.646zm-240.615%2069.5v23H201v-23h-18.002zm80.002%200v23h18.002v-23H263zm-94.857%2041c.18%204.613.313%209.292.425%2014h174.864c.112-4.708.248-9.387.427-14H168.142z%22%20fill%3D%22%23000000%22%20fill-opacity%3D%221%22%20style%3D%22--darkreader-inline-fill%3A%20var%28--darkreader-background-ffffff%2C%20%231a1d1e%29%3B%22%20data-darkreader-inline-fill%3D%22%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    filter: invert(63%) sepia(9%) saturate(3388%) hue-rotate(70deg) brightness(93%) contrast(76%);
}

.play-choice-button .icon-league {
    background-image: url("data:image/svg+xml,%3Csvg%20style%3D%22height%3A%20512px%3B%20width%3A%20512px%3B%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cg%20class%3D%22%22%20style%3D%22%22%20transform%3D%22translate%280%2C0%29%22%3E%3Cpath%20d%3D%22M54.125%20102.188c-15.624%2074.885%2020.42%20123.6%2064.125%20150.562-33.063-7.81-65.052-19.482-98.25-36.844%2025.5%2077.488%2081.164%2095.816%20129.906%2090.75-26.933%2014.252-55.392%2025.3-83.937%2032.78%2070.04%2043.512%20120.987%2016.005%20149-22.28-30.186-17.833-52.692-53.794-63.032-98.344-38-34.814-71.414-75.012-97.813-116.625zm402.938%200c-26.397%2041.608-59.816%2081.786-97.813%20116.593-10.338%2044.564-32.84%2080.54-63.03%2098.376%2028.01%2038.285%2078.957%2065.792%20149%2022.28-28.542-7.48-56.978-18.53-83.908-32.78%2048.736%205.055%20104.38-13.28%20129.875-90.75-33.197%2017.362-65.187%2029.035-98.25%2036.844%2043.705-26.963%2079.75-75.677%2064.125-150.563zm-201.47%2026.187c-23.56%200-44.93%203.576-61.218%209.844-8.145%203.133-15.045%206.906-20.438%2011.81-5.392%204.907-9.5%2011.53-9.5%2019.157%200%20.89.05%201.765.157%202.625%202.62%2064.952%2032.08%20117.553%2067.28%20133.188l6.94%203.094-1.595%207.406c-8.645%2040.282-20.575%2063.61-40.94%2077.03-11.193%207.378-14.184%2013.215-14.374%2015.126-.19%201.91.765%204.2%206.844%207.906%2012.158%207.41%2039.925%2013.157%2066.844%2013.157%2026.872%200%2053.258-5.944%2064.687-13.408%205.716-3.73%206.812-6.22%206.626-8.53-.186-2.312-2.937-7.934-13.094-15.22-19.326-13.862-31.327-36.107-39.843-76.062l-1.595-7.406%206.938-3.094c35.2-15.635%2064.662-68.236%2067.28-133.188h-.03c.106-.86.156-1.735.156-2.625%200-7.626-4.077-14.25-9.47-19.156-5.393-4.905-12.324-8.677-20.47-11.81-16.288-6.27-37.627-9.845-61.186-9.845zm0%2018.688c21.617%200%2041.154%203.47%2054.47%208.593%206.657%202.562%2011.708%205.563%2014.593%208.188%202.886%202.625%203.375%204.28%203.375%205.344%200%201.063-.488%202.718-3.374%205.343-2.885%202.626-7.936%205.627-14.594%208.19-13.315%205.122-32.852%208.593-54.468%208.593-21.616%200-41.184-3.47-54.5-8.594-6.658-2.563-11.708-5.564-14.594-8.19-2.886-2.624-3.375-4.28-3.375-5.343%200-1.063.49-2.718%203.375-5.343%202.886-2.625%207.936-5.626%2014.594-8.188%2013.316-5.123%2032.884-8.594%2054.5-8.594z%22%20fill%3D%22%23000000%22%20fill-opacity%3D%221%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    filter: invert(91%) sepia(19%) saturate(1241%) hue-rotate(13deg) brightness(106%) contrast(103%);
}

.play-choice-button .icon-tournament {
    background-image: url("data:image/svg+xml,%3Csvg%20style%3D%22height%3A%20512px%3B%20width%3A%20512px%3B%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cg%20class%3D%22%22%20style%3D%22%22%20transform%3D%22translate%280%2C0%29%22%3E%3Cpath%20d%3D%22M25.01%2049v46H103V49zM153%2049v46h78V49zm128%200v46h78V49zm128%200v46h78V49zM55.01%20113v64H119v46h18v-46h64v-64h-18v46H73.01v-46zM311%20113v64h64v46h18v-46h64v-64h-18v46H329v-46zM89.01%20241v46H167v-46zM345%20241v46h78v-46zm-226%2064v48h128v46h18v-46h128v-48h-18v30H137v-30zm98%20112v46h78v-46z%22%20fill%3D%22%23000000%22%20fill-opacity%3D%221%22%20transform%3D%22translate%280%2C%200%29%20scale%281%2C%201%29%20rotate%28-90%2C%20256%2C%20256%29%20skewX%280%29%20skewY%280%29%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    filter: invert(69%) sepia(31%) saturate(683%) hue-rotate(322deg) brightness(102%) contrast(101%);
}

.play-choice-button .icon-constructed {
    background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.2%22%20baseProfile%3D%22tiny%22%20id%3D%22Ebene_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2241.924px%22%20height%3D%2242px%22%20viewBox%3D%220%200%2041.924%2042%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M41.924%2C20.25c-0.046-1.282-0.192-2.537-0.457-3.75h-8.505V15h3v-1.5h-6V12h4.5v-1.5h-1.5V9h-3V7.5h1.5V6h-3V4.5h1.5V3%20V2.048C27.232%2C0.749%2C24.188%2C0%2C20.962%2C0C9.617%2C0%2C0.398%2C9.002%2C0%2C20.25H41.924z%20M13.462%2C4.5c3.313%2C0%2C6%2C2.687%2C6%2C6c0%2C3.314-2.687%2C6-6%2C6%20c-3.314%2C0-6-2.686-6-6C7.462%2C7.187%2C10.148%2C4.5%2C13.462%2C4.5%22%2F%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M25.462%2C40.5h-1.5V39h4.5v-1.5h1.5V36h4.5v-1.5h1.5V33h-3v-1.5h-4.5V30h3v-1.5h6V27h-3v-1.5h7.005%20c0.265-1.213%2C0.411-2.468%2C0.457-3.75H0C0.398%2C32.999%2C9.617%2C42%2C20.962%2C42c1.547%2C0%2C3.05-0.179%2C4.5-0.495V40.5z%22%2F%3E%3C%2Fsvg%3E");
    filter: invert(91%) sepia(43%) saturate(671%) hue-rotate(84deg) brightness(106%) contrast(104%);
}
.play-choice-button .icon-sealed {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAABACAYAAADrnQxhAAAGMElEQVR42rWZWahWVRTHf2efc72TQ3rVa4lDUQRKZRY2UDZQmVFpWvRSGBYVRfUQGA0vPoRBA4VQUFgvSdlMD5kWNlgUFURRVhpmhZrlkF713uu955xe/ltWm33OseFuOHzf2d/aew17rf9aa38J0AosAArAAYkezCdmPtcDUPL3UQafg8BEYCWwB6AbuJKhG+cDkwEyoEVaJdKsiGiUAycBpwOfA98AqdEiiTDxe2XAME/fBVwugjRY4N+vA/q1cT/wtIRMajRy+rwAGO83mweMAL4SQWk0KoGRwGrRHBKT04ANRsMywsyvnwIsBkY7YJnOLeYQJXAMMEbfW3ToOXBOZE3IzDvJ3cAMB/RJYio8ax/Qaxanes7QeeQN5jwkmtVOC8oa4h4xLAPX7g7MXiXsoIRLfFwVFcSZmD0lukHjfasldZOw3moDzpxNbOSSfhmwXi6cS9P1RxhnA/5L1iBZaRZcBcwEtgM7gb0SZLCB2WFrZEBHhRntyIBdwDuR31IDX1XMCiDLgAM1hN7Eg4KdB8x8H3Ab8HOApaEPDGiPdoAtwO1GgzBOxgP3AAeNR/pnO3BvBHks+oyTk8wFeBO4xTBL5AgZMAf43Ww+GDx+/mGgE5gOnOfhSeMo0bwIcApwTUQzgPkGD4uIZrmY9gDXyqS9wLfAbO0xCXgMuBBghjzNj9HAIuAGBe4f2jjGzDMsgZfE1M+v0n7HA2dbs3mEPg54AZil927gY4F1UXE23onmaD+fhFcaBxkFpDFms2S2FmCp8phNGVWAO9LM7QDWGWAogdxpYx8n64CPVCqUwK0SgAawtTEF8Baw32g2wWPjUp0TMsGDxhSbgEfNb5jzs+Mg8Ikx805jsd3AEmCmU6pIjTe+DXyt94eANQGzRNLmBs76gUc0PwgMN4A9IEt1uQBuCsXLKBG+L2/sDzJyKlrvoX8C7wFrJfDGSALNMsFOYpiNAI4FPgR+EvNfgBNMMWSZpbLEHuAOYCuwwjiH37c1TJ6pEGM5cJPm9qvWIKhPnPHQvZrbIqfqiWSPtiw4bF+23WncvayILzs6AroiSFsl0JlVxE9qvK4DODMSazYUOoOEG44CSJ1At4xkaAyKdDak/paKctxq1uVk36SmyDxXzGJVlH/vqmCWmPncSaq0piSYX4Mgfm6qqS1jdP3AdqfEuDMimUeRKUcAU8MVMqFQhY7pOeBlp8DdHTDzXng0MK0GiBNT8nVVWCDR/r1OUlWljm6grcY8lratxjlaAedMFg6dowTOinhnEXnHlAIxofqAwqkgaYkEdhtwc8SELrCEN/1lFRrnwInAFCccmxRsVKonO1kg6owGa4AbIyjRWRE+OXAFsNgBYytcfpNi0Jm6ohe4H3hWDWFiEubGmjPt83HWGZyZ//6B6kJnOpEf1QSmwOOmsWhilgAjnVA+ixC0Gw8rTNnge7WNwBdm7Y4ayCq9g4ytAM92U8T4NPRK4K1PGjP9WsOsAEqnLJtGIKhbGTv3zZxBGo+Tq1SQpmo86jTLnCI/jwDwRdrQN3O/AdtsytBZPqH33pozK4F+J2mzGtT3kPSMmsDMVMIAbwjy+hvM2OFqGvB9QbPxasWV0S7groYeL/XYuLkCG6doQ6cmcIMJ0lDqHxo61+0q45lmoMYZky4ywbygosuhoTT343q/eI/wMWzaP5XWPQpwV9PONrXJua8bh0WANZFprlaZtqvhzqNpJJh7jtg5OOBLQ1zw30aeqiDdF7koK81l57/VyGeQ+4DJTo31yIrEV/wPGvnqa5qvGwcY2jEAtHtszIaIibVUhzNXB0M9tvmKOB1iRgUwNfPXPA1AXByB9nX0CdCTye3TiK2Lf3g2RYNmhxsLF6kZZ6u/XiHXTWoakFIXK2uB55V4wz8jDmSCo7Ygd40GXjMldSZgDq/7PP0opaAJpqRYaJi1KKNzsa7CUcwBnKpNDqi++L7hnKabUq9PfbU9miXARAd8ZoqV3PTGu9R1tso8sT8ZPGhvBr6ThVqBd03tgrTa6u8D55pc5gN8jtL9csFZqt9S8ziTyacBr6viGh3QLPSMxwCXDHGczQNcJjuPAy410iRG4jSIm6Qi/SfBHZb/68vfrZR/AfZL4Hi3zzUkAAAAAElFTkSuQmCC");
    filter: invert(63%) sepia(9%) saturate(3388%) hue-rotate(70deg) brightness(93%) contrast(76%);
}
.play-choice-button .icon-draft {
    background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.2%22%20baseProfile%3D%22tiny%22%20id%3D%22Ebene_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2242px%22%20height%3D%2242px%22%20viewBox%3D%220%200%2042%2042%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M18%2C35.25c-0.415%2C0-0.75%2C0.335-0.75%2C0.75v4.5c0%2C0.415%2C0.335%2C0.75%2C0.75%2C0.75s0.75-0.335%2C0.75-0.75V36%20C18.75%2C35.585%2C18.415%2C35.25%2C18%2C35.25%22%2F%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M24%2C35.25c-0.415%2C0-0.75%2C0.335-0.75%2C0.75v4.5c0%2C0.415%2C0.335%2C0.75%2C0.75%2C0.75s0.75-0.335%2C0.75-0.75V36%20C24.75%2C35.585%2C24.415%2C35.25%2C24%2C35.25%22%2F%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M37.5%2C10.5V9c0-4.95-4.109-9-9.129-9H21h-7.371C8.609%2C0%2C4.5%2C4.05%2C4.5%2C9v1.5H21H37.5z%22%2F%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M39%2C22.5V15c0%2C0%2C0-1.5-1.5-1.5V12H21H4.5v1.5C3%2C13.5%2C3%2C15%2C3%2C15v7.5c-1.903%2C0.842-3%2C2.413-3%2C4.5%20c0%2C2.788%2C4.469%2C6.694%2C4.469%2C7.5c0%2C4.5%2C3.11%2C7.5%2C7.647%2C7.5c1.659%2C0%2C3.181-0.525%2C4.405-1.396C16.518%2C40.567%2C16.5%2C40.537%2C16.5%2C40.5V36%20c0-0.828%2C0.674-1.5%2C1.5-1.5c0.669%2C0%2C1.217%2C0.448%2C1.409%2C1.056H19.5V35.25c0-0.828%2C0.674-1.5%2C1.5-1.5s1.5%2C0.672%2C1.5%2C1.5v0.306h0.091%20C22.783%2C34.948%2C23.331%2C34.5%2C24%2C34.5c0.826%2C0%2C1.5%2C0.672%2C1.5%2C1.5v4.5c0%2C0.037-0.018%2C0.067-0.021%2C0.104%20C26.703%2C41.475%2C28.225%2C42%2C29.884%2C42c4.537%2C0%2C7.647-3%2C7.647-7.5c0-0.806%2C4.469-4.712%2C4.469-7.5C42%2C24.913%2C40.903%2C23.342%2C39%2C22.5%20M11.25%2C39C10.008%2C39%2C9%2C37.992%2C9%2C36.75s1.008-2.25%2C2.25-2.25s2.25%2C1.008%2C2.25%2C2.25S12.492%2C39%2C11.25%2C39%20M13.5%2C28.5h-2.572%20c-0.249%2C0-0.428-0.135-0.428-0.3c0-0.166%2C0.179-0.337%2C0.428-0.387L13.5%2C27V28.5z%20M18%2C26.609c-0.876%2C0.363-1.723%2C0.813-2.555%2C1.223%20c-0.134%2C0.066-0.293%2C0.116-0.445%2C0.169v-2.079c1.065-0.916%2C2.016-1.544%2C3-1.956V26.609z%20M10.5%2C21c-3%2C0-3-6-3-6h12%20C19.5%2C15%2C13.5%2C21%2C10.5%2C21%20M22.5%2C26.109c-0.489-0.117-0.987-0.188-1.5-0.188c-0.513%2C0-1.011%2C0.07-1.5%2C0.188v-2.599%20c0.475-0.094%2C0.97-0.152%2C1.5-0.175c0.53%2C0.022%2C1.025%2C0.081%2C1.5%2C0.175V26.109z%20M27%2C28.001c-0.152-0.053-0.311-0.103-0.445-0.169%20c-0.832-0.409-1.679-0.859-2.555-1.223v-2.644c0.984%2C0.412%2C1.935%2C1.04%2C3%2C1.956V28.001z%20M30.75%2C39c-1.242%2C0-2.25-1.008-2.25-2.25%20s1.008-2.25%2C2.25-2.25S33%2C35.508%2C33%2C36.75S31.992%2C39%2C30.75%2C39%20M28.5%2C28.5V27l2.572%2C0.813c0.249%2C0.05%2C0.428%2C0.221%2C0.428%2C0.387%20c0%2C0.165-0.179%2C0.3-0.428%2C0.3H28.5z%20M31.5%2C21c-3%2C0-9-6-9-6h12C34.5%2C15%2C34.5%2C21%2C31.5%2C21%22%2F%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M21%2C34.5c-0.415%2C0-0.75%2C0.335-0.75%2C0.75v6c0%2C0.415%2C0.335%2C0.75%2C0.75%2C0.75s0.75-0.335%2C0.75-0.75v-6%20C21.75%2C34.835%2C21.415%2C34.5%2C21%2C34.5%22%2F%3E%3C%2Fsvg%3E");
    filter: invert(91%) sepia(19%) saturate(1241%) hue-rotate(13deg) brightness(106%) contrast(103%);
}
.play-choice-button .icon-cube {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M440.9%2C136.3a4%2C4%2C0%2C0%2C0%2C0-6.91L288.16%2C40.65a64.14%2C64.14%2C0%2C0%2C0-64.33%2C0L71.12%2C129.39a4%2C4%2C0%2C0%2C0%2C0%2C6.91L254%2C243.88a4%2C4%2C0%2C0%2C0%2C4.06%2C0Z%22%2F%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M54%2C163.51A4%2C4%2C0%2C0%2C0%2C48%2C167V340.89a48%2C48%2C0%2C0%2C0%2C23.84%2C41.39L234%2C479.51a4%2C4%2C0%2C0%2C0%2C6-3.46V274.3a4%2C4%2C0%2C0%2C0-2-3.46Z%22%2F%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M272%2C275v201a4%2C4%2C0%2C0%2C0%2C6%2C3.46l162.15-97.23A48%2C48%2C0%2C0%2C0%2C464%2C340.89V167a4%2C4%2C0%2C0%2C0-6-3.45l-184%2C108A4%2C4%2C0%2C0%2C0%2C272%2C275Z%22%2F%3E%3C%2Fsvg%3E");
    filter: invert(69%) sepia(31%) saturate(683%) hue-rotate(322deg) brightness(102%) contrast(101%);
}


.play-league-empty,
.play-tournament-info {
    margin-top: 8px;
}

.play-league-empty .play-subtitle,
.play-tournament-info .play-subtitle {
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.play-subtitle {
    font-size: 12px;
    color: #cfcfcf;
}

.play-form-heading {
    margin: 0 0 12px 0;
    font-size: 18px;
}

.inner-table-form,
.play-ai-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.play-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.play-form-row--selected {
    outline: 3px solid #d4af37;
    outline-offset: 2px;
    background-color: rgba(212, 175, 55, 0.18);
    border-radius: 4px;
}

.play-form-row--dim {
    opacity: 0.42;
}

.table-age {
    color: #bbbbbb;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.play-form-label {
    min-width: 190px;
    font-weight: bold;
    color: #e0e0e0;
}

.play-form-select,
.play-form-input {
    flex: 1 1 200px;
    max-width: 100%;
}

.play-form-number-wrap {
    display: flex;
    flex: 1 1 200px;
    max-width: 100%;
    align-items: stretch;
    box-sizing: border-box;
    height: 19px;
    border: 1px solid #666;
    border-color: #666666 #888888 #888888 #666666;
    background-color: #222222;
    overflow: hidden;
}

.play-form-number {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 100%;
    box-sizing: border-box;
    text-align: left;
    border: 0;
    margin: 0;
    background: transparent;
    color: #ffffff;
    font-size: 13.333px;
    line-height: 17px;
    padding: 0 10px;
    -moz-appearance: textfield;
}

.play-form-number::-webkit-inner-spin-button,
.play-form-number::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.play-form-number-spinners {
    display: flex;
    flex-direction: column;
    width: 1.35em;
    border-left: 1px solid #555;
}

.play-form-number-up,
.play-form-number-down {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 8px;
    border: 0;
    background: #2c2c2c;
    color: #eee;
    cursor: pointer;
}

.play-form-number-up {
    border-bottom: 1px solid #555;
}

.play-form-number-up:hover,
.play-form-number-down:hover {
    background: #3a3a3a;
    color: #ffd76a;
}

.play-form-actions {
    margin-top: 6px;
    justify-content: flex-end;
}

.play-private-label {
    color: #ffffff;
}


/* ===== Slice 1.3: LOTR-mirrored primary bar — connection | centered actions | Server Time =====
   Mirrored from PlayersCouncil/gemp-lotr:
   - gemp-lotr-async/src/main/web/hall.html (.buttons-gutter / #hall-connection / .server-time)
   - gemp-lotr-async/src/main/web/css/gemp-001/hall.css (.flex-horiz, .server-time, .hall-connection*,
     #main > .buttons-gutter centering: equal flex on left+right so buttons sit in the middle)
   SWCCG adaptation: the bar is hall.html's .buttons-gutter, with an explicit "Server Time" label on the right.
*/

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* the connection readout and the server clock take equal flex, so the buttons sit in the middle of the bar */
.hall-primary-actions {
    flex: 0 1 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* LOTR .server-time (gold) + SWCCG "Server Time" label */
.server-time.hall-server-time {
    text-align: right;
    padding: 5px;
    color: #DDDD00;
    min-width: 10ch;
    white-space: nowrap;
}

.hall-server-time-label {
    font-size: 85%;
    font-weight: bold;
    color: #DDDD00;
    letter-spacing: 0.02em;
}

.hall-server-time-value {
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

/* the connection readout on the main bar: "• Connected" (from LOTR .hall-connection) */
.hall-connection {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.hall-connection-readout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    background: none;
    border: none;
    border-radius: 3px;
    color: #cccccc;
    font: inherit;
    font-size: 90%;
    cursor: pointer;
}

.hall-connection-readout:hover,
.hall-connection-readout:focus-visible {
    color: #ffffff;
    background-color: #444444;
}

.hall-connection-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #e0c030;
    box-shadow: 0 0 0 1px #00000066;
}

.hall-connection[data-state="connected"] .hall-connection-dot {
    background-color: #3fbf5f;
}

.hall-connection[data-state="reconnecting"] .hall-connection-dot,
.hall-connection[data-state="connecting"] .hall-connection-dot {
    background-color: #e0c030;
}

.hall-connection[data-state="disconnected"] .hall-connection-dot {
    background-color: #e04040;
}

.hall-connection[data-state="disconnected"] .hall-connection-label {
    color: #ff8080;
}

.hall-connection[data-state="loggedout"] .hall-connection-dot {
    background-color: #909090;
}

.hall-connection-signin {
    margin-left: 4px;
    padding: 2px 4px;
    color: #E88104;
    white-space: nowrap;
}

.hall-connection-signin:hover,
.hall-connection-signin:focus-visible {
    color: #ffa640;
}

.hall-connection-signin[hidden],
.hall-connection-popup-updated[hidden],
.hall-connection-popup[hidden],
.hall-connection-popup-message[hidden] {
    display: none;
}

.hall-connection-popup {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 200;
    min-width: 16rem;
    max-width: min(22rem, 90vw);
    padding: 0.5em 0.7em;
    background-color: #222222;
    border: 1px solid #666666;
    border-radius: 4px;
    box-shadow: 0 2px 8px #000000aa;
    color: #eeeeee;
    font-size: 90%;
    white-space: normal;
}

.hall-connection-popup > div + div {
    margin-top: 0.3em;
}

.hall-connection-popup a {
    color: #E88104;
}


/* ===== Slice 1.5b: Play ▸ Open League Table (LOTR CreateLeagueTable + tables.css parity) =====
   Mirrored from PlayersCouncil/gemp-lotr:
   - gemp-lotr-async/src/main/web/hall.html (#create-league-table ~446–498)
   - gemp-lotr-async/src/main/web/css/gemp-001/hall.css (.table-blurb, .table-create-button, .result-box, .label-column, flex-*)
   - gemp-lotr-async/src/main/web/css/gemp-001/tables.css (.info-toggle, .info-text, #play-league-panel, .play-next-steps)
*/

/* Join confirm / format dialogs must stack above .play-flow (10000) */
body.play-flow-open .ui-dialog {
    z-index: 11050 !important;
}
body.play-flow-open .ui-widget-overlay {
    z-index: 11040 !important;
}

.play-flow.play-flow-league .play-flow-panel {
    width: min(720px, calc(100vw - 24px));
    max-height: calc(100vh - 32px);
}

/* Flex helpers (LOTR hall.css) */
/* rows inside the Play / Join forms line their label and field up on the middle; the hall's own flex rows
   (the chat, the main bar, the sub-bar) must keep stretching, so this is not on .flex-horiz itself */
.play-flow .flex-horiz,
.table-form .flex-horiz {
    align-items: center;
}

.flex-vert {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.flex-fill {
    flex-grow: 1;
    min-width: 0;
}

.flex-static {
    flex-grow: 0;
}

.label-column {
    width: max(160px, 28%);
    flex-grow: 0;
    flex-shrink: 0;
}

.inner-table-form {
    display: flex;
    flex-direction: column;
    min-width: max(280px, 20%);
    margin: 0 auto;
    align-items: stretch;
    gap: 16px;
}

#league-table-options {
    width: 100%;
    padding: 0.5rem 0 1rem 0;
    margin-bottom: 8px;
}

#create-league-table h1,
#create-league-table .play-league-heading,
.play-league-panel-root h1,
#create-bot-table h1,
#create-unranked-table h1 {
    text-align: center;
    font-size: 1.35rem;
    margin: 0.6rem 0 0.4rem 0;
}

/* Bordered blurb (LOTR .table-blurb) */
.table-blurb {
    margin: 0 0.5rem 0.8rem 0.5rem;
    padding: 1rem;
    border: 1px solid #ffffff;
    border-style: solid;
    background-color: #333333;
    line-height: 1.4;
    color: #dddddd;
    font-size: 13px;
}

/* (i) info toggles (LOTR tables.css) */
.info-toggle {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    line-height: 1.1em;
    margin-left: 0.35em;
    border-radius: 50%;
    border: 1px solid #8ab;
    color: #8ab;
    background: transparent;
    font-size: 75%;
    font-weight: bold;
    font-style: italic;
    font-family: Georgia, serif;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
}

.info-toggle:hover,
.info-toggle:focus {
    background: #8ab;
    color: #111;
    outline: none;
}

.play-league-heading .info-toggle,
#create-league-table h1 .info-toggle {
    font-size: 45%;
    vertical-align: middle;
}

.info-text {
    color: #aaa;
    font-size: 85%;
    margin: -0.2em 0 0.3em 0;
    padding: 0.3em 0.6em;
    border-left: 2px solid #567;
}

/* Full-width Create Table (LOTR .table-create-button) */
.table-create-button,
button.table-create-button,
#submit-league-table-button.table-create-button,
#submit-league-table-button.ui-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0.6em 0 0.2em 0;
    padding: 0.55em 1em !important;
    text-align: center;
    font-size: 1.05rem !important;
    font-weight: bold;
    color: #ffffff !important;
    border: 1px solid #aaaaaa !important;
    border-radius: 4px !important;
    cursor: pointer;
    background: #554400 linear-gradient(#845826, #1C1C1C);
}

.table-create-button:hover,
.table-create-button.ui-state-hover,
#submit-league-table-button.table-create-button:hover,
#submit-league-table-button.ui-state-hover {
    background: #554400 linear-gradient(#BF8A4A, #1C1C1C) !important;
    border-color: #d4af37 !important;
}

#submit-league-table-button .ui-button-text {
    padding: 0.35em 0.8em;
    font-size: 1.05rem;
}

/* Result: Ready. (LOTR .result-label / .result-box) */
.result-label {
    align-items: center;
    margin-top: 0.4em;
}

.result-label .label {
    padding: 0.4em 0.6em 0.4em 0;
    flex: 0 0 auto;
}

.result-box {
    text-wrap: balance;
    padding: 0.5em;
    margin: 0.25em 0;
    background: #333333;
    border-style: solid;
    border-color: #555555;
    border-width: 1px;
    min-height: 1.4em;
}

.result-box.result-success {
    border-color: #5a7a4a;
}

.result-box.result-error,
.play-error {
    border-color: #a55;
    color: #f2c4c4;
}

#play-league-panel,
.play-league-join-panel {
    border: 1px solid grey;
    max-height: 45vh;
    overflow-y: auto;
    padding: 1rem;
    margin-top: 4px;
    width: 100%;
    box-sizing: border-box;
}

.play-next-steps {
    /* Outer container for stacked per-league next-steps boxes */
    border: none;
    padding: 0;
    margin-bottom: 0.6em;
}

.play-next-steps.play-error {
    border: 1px solid #a55;
    padding: 0.5em 0.8em;
    color: #f2c4c4;
}

.play-next-steps-league {
    border: 1px solid #567;
    padding: 0.5em 0.8em;
    margin-bottom: 0.5em;
}

.play-next-steps-league:last-child {
    margin-bottom: 0;
}

.play-next-steps-league.play-next-steps-fresh {
    border-color: #6a8;
}

.play-next-steps-header {
    font-weight: bold;
    margin-bottom: 0.2em;
}

.play-next-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0.4em 0;
}

.page-hint {
    font-size: 12px;
    color: #cfcfcf;
    margin: 0 0 8px 0;
}

.play-league-list .play-league-row {
    border-bottom: 1px solid #444;
    padding: 6px 0;
}

.play-league-list .play-league-row-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.play-league-list .play-league-row-name {
    font-size: 110%;
    font-weight: bold;
    flex: 1 1 auto;
}

.play-league-list .play-league-row-dates {
    font-size: 90%;
    color: #cfcfcf;
    white-space: nowrap;
}

.play-league-list .play-league-member-badge {
    font-size: 85%;
    color: #7eb6e8;
    border: 1px solid #567;
    border-radius: 3px;
    padding: 1px 6px;
}

.play-league-list .play-league-drawer {
    margin-top: 6px;
}

/* Compact Cost / membership / Join (LOTR list-mode drawer) */
.league-join-block-compact {
    margin: 0.2em 0 0.6em 0;
}

.league-join-block-compact .leagueCost {
    margin: 0.15em 0;
}

/* Slice 1.5d — left-cluster membership+Join (LOTR inline flow); keep 1.5c nowrap/stack */
.league-join-block-compact .leagueMembership {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35em 0.5em;
    margin: 0.25em 0 0.4em 0;
}

.league-join-block-compact .league-membership-label {
    /* flex-grow:0 — 1.5c used flex:1 1 auto which shoved Join to far right like space-between */
    flex: 0 1 auto;
    min-width: 0;
}

.league-join-block-compact .league-join-button,
.league-join-block-compact .leagueMembership .ui-button.league-join-button {
    white-space: nowrap;
    flex: 0 0 auto;
    min-width: max-content;
}

.league-join-block-compact .leagueMembership .ui-button.league-join-button .ui-button-text {
    white-space: nowrap;
}

.league-join-block-compact .serieName {
    margin: 0.35em 0 0.1em 0;
    font-weight: bold;
}

#create-league-table .player-deck {
    gap: 16px;
    margin: 0.2em 0;
}

#create-league-table select.flex-fill,
#league-format,
#league-deck,
#league-library-deck {
    width: auto;
    max-width: 100%;
}

@media (max-width: 700px) {
    .play-flow.play-flow-league .play-flow-panel {
        width: calc(100vw - 16px);
    }

    .label-column {
        width: auto;
        flex-basis: 40%;
        flex-shrink: 1;
    }

    .table-blurb {
        margin: 0 0 0.6rem 0;
    }

    /* Slice 1.5c — stack membership text above Join league on narrow viewports */
    .league-join-block-compact .leagueMembership {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* PlayerPicker (LOTR hall picker, jQuery UI 1.8 autocomplete) */
.player-picker {
    display: flex;
    flex: 1 1 200px;
    min-width: 0;
    align-items: stretch;
}

.player-picker-input {
    flex: 1 1 auto;
    min-width: 0;
}

.player-picker-toggle {
    flex: 0 0 auto;
    min-width: 28px;
    margin-left: 2px;
    background: #333;
    color: #fff;
    border: 1px solid #888;
    cursor: pointer;
}

.ui-autocomplete.player-picker-menu {
    z-index: 11060 !important;
    max-height: 240px;
    overflow-y: auto;
    background: #222;
    color: #fff;
    border: 1px solid #888;
}

.player-picker-heading {
    font-weight: bold;
    color: #aaa;
    padding: 4px 8px;
    font-size: 11px;
    cursor: default;
}

.player-picker-note {
    font-weight: normal;
    font-style: italic;
}

.play-form-result {
    min-height: 1.2em;
    color: #cfcfcf;
}

.play-form-result.result-error {
    color: #ff8080;
}

.play-form-result.result-success {
    color: #9fd49f;
}

/* Gold analog of dark-hive blue hover: whole-button gold fill + gold border, mouseover only.
   Do not pair this with ui-state-focus — that stays after click and reads as a permanent gold border. */
body .ui-button:hover,
body .ui-state-hover,
body .ui-widget-content .ui-state-hover,
body .ui-widget-header .ui-state-hover {
    border: 1px solid #d4af37 !important;
    background: #554400 linear-gradient(#bf8a4a, #1c1c1c) !important;
    font-weight: normal;
    color: #ffffff !important;
}

body .ui-state-hover a,
body .ui-state-hover a:hover,
body .ui-button:hover a {
    color: #ffffff;
    text-decoration: none;
}

/* Deck-builder keeps its blue identity; restated after gold hover so it still wins. */
a.hall-play-button-deckbuilder:hover,
.hall-primary-actions a.hall-play-button-deckbuilder.ui-state-hover {
    background: #1a3355 linear-gradient(#5a94c8, #1a3355) !important;
    border-color: #b7d7f5 !important;
}

.hall-row-link.ui-button {
    font-size: 12px;
}

.tournament-finish {
    border-collapse: collapse;
    width: 100%;
    margin-top: 0.5em;
    color: #ffffff;
}

.tournament-finish th,
.tournament-finish td {
    border: 1px solid #666;
    padding: 4px 8px;
    text-align: left;
}

.hall-ready-dialog .ui-dialog-titlebar-close {
    display: none;
}

.hall-ready-actions {
    margin-top: 0.8em;
}

/* ===== My Account > My Game History (ported from PlayersCouncil/gemp-lotr hall.css, "tabs-account") ===== */
/* Shared data table from commonUi.js renderTable(): sortable headers are buttons that look like header text; the
   empty state is one full-width row. */
table.gemp-table {
    border-collapse: collapse;
}

table.gemp-table th {
    text-align: left;
    white-space: nowrap;
}

.gemp-table-sort {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-weight: bold;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.gemp-table-sort:hover,
.gemp-table-sort:focus-visible {
    text-decoration: underline;
}

.gemp-table-sort-mark {
    font-size: 75%;
}

td.gemp-table-empty {
    font-style: italic;
    color: #bbbbbb;
    text-align: center;
    padding: 0.6em;
}

.game-history-article {
    padding: 0 10px 1em;
    max-width: 100%;
}

.game-history-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.4em 1em;
    margin: 0.5em 0 1.8em;
}

.game-history-field {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15em;
}

.game-history-field label {
    font-size: 85%;
    color: #cccccc;
}

.game-history-field select,
.game-history-field input[type=text] {
    min-width: 12em;
}

.game-history-buttons {
    display: inline-flex;
    gap: 0.4em;
}

.game-history-status {
    margin: 0.4em 0;
}

.game-history-table {
    overflow-x: auto;
}

.game-history-table table.gemp-table {
    width: 100%;
}

/* header text centred, cell text centred except the name-like columns (Format, Event, My Deck) */
.game-history-table table.gameHistory th,
.game-history-table table.gameHistory td {
    padding: 4px 7px;
    text-align: center;
}

.game-history-table table.gameHistory td.gh-left {
    text-align: left;
}

/* My Deck wraps early (anywhere, if a name has no spaces) so the other columns keep their room */
.gh-deck-name {
    max-width: 14em;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* the Replay link in the hall's standard link colours (unvisited / visited) */
.game-history-table table.gameHistory a:link {
    color: #E88104;
}

.game-history-table table.gameHistory a:visited {
    color: #BF6B04;
}

.game-history-pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4em;
    margin: 0.4em 0;
}

.game-history-pager .pager-info {
    padding: 0 0.6em;
}

.gh-result {
    font-weight: bold;
}

.gh-win {
    color: #8fdc8f;
}

.gh-loss {
    color: #ff9a8a;
}

.gh-when,
.gh-duration {
    white-space: nowrap;
}

/* SWCCG: the opponent, side, format and event in a row are links that filter on that value */
.game-history-table table.gameHistory a.gh-filter-link,
.game-history-table table.gameHistory a.gh-filter-link:visited {
    color: inherit;
    text-decoration: underline dotted;
}

.game-history-table table.gameHistory a.gh-filter-link:hover {
    text-decoration: underline;
}

.game-history-table table.gameHistory a.gh-side-dark,
.game-history-table table.gameHistory a.gh-side-dark:visited {
    color: #ff7b7b;
    font-weight: bold;
}

.game-history-table table.gameHistory a.gh-side-light,
.game-history-table table.gameHistory a.gh-side-light:visited {
    color: #8cc8ff;
    font-weight: bold;
}

.gh-event-link {
    font-size: 85%;
}

/* #116: game option chips next to a format name, and the setup form's option rows */
.game-option-chips { white-space: normal; }
.game-option-chip {
    display: inline-block;
    margin: 1px 0 1px 4px;
    padding: 0 6px;
    border: 1px solid rgba(232, 196, 104, 0.6);
    border-radius: 8px;
    background: rgba(232, 196, 104, 0.14);
    font-size: 85%;
    line-height: 1.5;
    white-space: nowrap;
}
.game-option-note { margin-left: 6px; opacity: 0.75; font-size: 90%; }
/* #120: saved settings per format */
.game-options-save { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.game-options-save button { font-size: 85%; padding: 2px 8px; cursor: pointer; }
.game-options-save-note { margin-left: 0; }
.game-option-locked { opacity: 0.85; font-style: italic; }