/* game-layout.css */
/* Extracted from StyleWideCardTable.razor and StyleTallCardTable.razor */
/* Refactored to use scoped classes .gh-wide-view and .gh-tall-view */

/* ==========================================================================
   GLOBAL OVERRIDES
   ========================================================================== */
#gh-clubs {
    position: fixed;
    top: 4em;
    left: 0;
    width: 100vw;
    height: calc(100vh - 4em);
    padding: 10px;
    box-sizing: border-box;
    z-index: 0;
}

/* ==========================================================================
   WIDE VIEW (.gh-wide-view)
   Original logic: vw based, scale 1.0 (implicit)
   ========================================================================== */

/* ==========================================================================
   STANDALONE POPUP (.gh-standalone)
   Full-window game/history table without tab chrome.
   Height-driven layout: fills viewport height, maintains 3:2 table aspect ratio.
   Full canvas = table (3:2) + side panel (38% of table) = 2.07:1 total ratio.
   ========================================================================== */

/* Prevent scrollbars when side panel extends slightly outside viewport.
   --u is the "effective vw": equals 1vw at the canvas aspect ratio (2.07:1),
   then tracks vh when the window is stretched wider, capping all vw-based sizes. */
.gh-standalone {
    overflow: hidden;
    --u: min(1vw, 2.07vh);
}

/* Override maintable/historytable to be height-driven rather than width-driven */
.gh-standalone.gh-wide-view #gh-maintable,
.gh-standalone.gh-wide-view #gh-historytable {
    --table-height: min(100vh, calc(100vw / 2.07));
    height: var(--table-height);
    width: calc(var(--table-height) * 3 / 2);
    position: relative;
    padding: 0px;
    box-sizing: border-box;
}

/* Cap all vw-based sizes in standalone: use calc(N * var(--u)) instead of Nvw */
.gh-standalone.gh-wide-view #gh-sidepanel {
    font-size: calc(1.0 * var(--u));
    border-width: calc(0.07 * var(--u));
    border-radius: calc(0.15 * var(--u));
}
.gh-standalone.gh-wide-view #gh-sidepanel > p {
    font-size: calc(1.1 * var(--u));
}
.gh-standalone.gh-wide-view #gh-sidepanel #gh-tab-bar .btn {
    font-size: calc(1.2 * var(--u));
    padding: calc(0.3 * var(--u)) calc(0.7 * var(--u));
    border-width: calc(0.07 * var(--u));
    border-radius: calc(0.15 * var(--u));
}
.gh-standalone.gh-wide-view #gh-action-panel button,
.gh-standalone.gh-wide-view #gh-action-panel input {
    font-size: calc(1.1 * var(--u));
}
.gh-standalone #gh-gamename-overlay p {
    font-size: calc(2.0 * var(--u));
}
.gh-standalone #gh-cards-remaining {
    font-size: calc(1.2 * var(--u));
}
.gh-standalone #gh-start-game {
    font-size: calc(2.5 * var(--u));
    padding: calc(0.4 * var(--u)) calc(1.2 * var(--u));
}

/* ==========================================================================
   WIDE VIEW (.gh-wide-view)
   Original logic: vw based, scale 1.0 (implicit)
   ========================================================================== */

/* The main table is sized based on the view hieght.  Other controls size/position based on the table. */
.gh-wide-view #gh-maintable,
.gh-wide-view #gh-historytable,
.gh-wide-view #gh-admin,
.gh-wide-view #gh-sheet,
.gh-wide-view #gh-release-notes,
.gh-wide-view #gh-rules,
.gh-wide-view #gh-game-library {
    position: relative;
    padding: 0px;
    width: calc(100vw / 1.4);
    height: calc(100vw * 2 / 3 / 1.4);
    box-sizing: border-box;
}

.gh-wide-view #gh-action-panel {
    left: 60%;
    top: 70%;
    width: 40%;
    height: 30%;
}

.gh-wide-view #gh-sidepanel {
    left: 100%;
    top: 0%;
    width: 38%;
    height: 70%;
    font-size: 1.0vw;
    border-width: 0.07vw;
    border-radius: 0.15vw;
}

.gh-wide-view #gh-sidepanel > p {
    font-size: 1.1vw;
    line-height: 1.2;
    margin: 0;
}

.gh-wide-view #gh-sidepanel #gh-tab-bar .btn {
    font-size: 1.2vw;
    padding: 0.3vw 0.7vw;
    border-width: 0.07vw;
    border-radius: 0.15vw;
    line-height: 1.2;
}

.gh-wide-view #gh-action-panel button,
.gh-wide-view #gh-action-panel input {
    font-size: 1.1vw;
}

.gh-wide-view #gh-winnerpanel {
    left: 100%;
    top: 70%;
    width: 38%;
    height: 30%;
}

.gh-wide-view #gh-adminpanel {
    left: 0%;
    top: 100%;
    width: 100%;
    height: 50%;
}

/* Player Panels Wide */
.gh-wide-view #gh-player-panel-4 {
    position: absolute;
    left: 0.0%;
    top: 0%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-wide-view #gh-player-panel-5 {
    position: absolute;
    left: 20.5%;
    top: 0%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-wide-view #gh-player-panel-6 {
    position: absolute;
    left: 41.0%;
    top: 0%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-wide-view #gh-player-panel-7 {
    position: absolute;
    left: 61.5%;
    top: 0%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-wide-view #gh-player-panel-8 {
    position: absolute;
    left: 82.0%;
    top: 0%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-wide-view #gh-player-panel-9 {
    position: absolute;
    left: 82.0%;
    top: 33%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-wide-view #gh-player-panel-3 {
    position: absolute;
    left: 0.0%;
    top: 33%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-wide-view #gh-player-panel-0 {
    position: absolute;
    left: 41.0%;
    top: 72%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-wide-view #gh-player-panel-1 {
    position: absolute;
    left: 20.5%;
    top: 72%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-wide-view #gh-player-panel-2 {
    position: absolute;
    left: 0.0%;
    top: 72%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-wide-view #gh-bet-chip-input {
    position: absolute;
    left: 50%;
    top: 0%;
    width: 20%;
    transform: translate(-50%, 0%);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.3em;
}
#gh-bet-chip-input input {
    flex: 1;
    min-width: 0;
}
#gh-bet-chip-input .gh-bet-more-label {
    font-size: 0.75em;
    color: var(--gh-fg-color);
    opacity: 0.7;
    white-space: nowrap;
}

.gh-wide-view #gh-roll-instructions {
    left: 50%;
    top: 22%;
    width: 100%;
    transform: translate(-50%, 0%);
    position: absolute;
}

.gh-wide-view #gh-roll-confirm-button,
.gh-wide-view #gh-discard-confirm-button,
.gh-wide-view #gh-action-onecard-confirm {
    left: 50%;
    bottom: 2%;
    top: unset;
    width: 40%;
    height: 50%;
    transform: translate(-50%, 0%);
    position: absolute;
}

.gh-wide-view #gh-roll-instructions img {
    width: 5%;
}

.gh-wide-view #gh-time-left-text {
    position: absolute;
    right: 2%;
    bottom: 27%;
    width: 25%;
    z-index: 1;
}

.gh-wide-view #gh-action-pause-resume {
    position: absolute;
    right: 2%;
    bottom: 2%;
    width: 25%;
    height: 25%;
    z-index: 1;
}

.gh-wide-view #gh-logout-container {
    position: absolute;
    right: 0%;
    top: -2.5%;
    z-index: 20;
}


/* ==========================================================================
   TALL VIEW (.gh-tall-view)
   Original logic: MyUnit(p) = p * 1.4vw
   ========================================================================== */

/* Panel 0 is larger for the mobile view. */
.gh-tall-view #gh-player-panel-0 .gh-nameplate p {
    font-size: calc((1.1 * 100 / 3 / 18) * 1.4vw);
}

.gh-tall-view .gh-player-panel p {
    font-size: calc((1.7 / 1.4) * 1.4vw);
    /* simpl: 1.7vw */
}

.gh-tall-view .gh-player-chips p {
    font-size: calc((5 / 1.4) * 1.4vw);
    /* simpl: 5vw */
}

.gh-tall-view #gh-player-panel-0 .gh-player-chips p {
    font-size: calc((7 / 1.4) * 1.4vw);
    /* simpl: 7vw */
}

/* Action panel text should be larger. */
.gh-tall-view input,
.gh-tall-view button,
.gh-tall-view p,
.gh-tall-view .main {
    font-size: calc(2.7 * 1.4vw);
}

.gh-tall-view button.gh-seat-open {
    font-size: calc((1 / 1.4) * 1.4vw);
    /* 1vw */
}

.gh-tall-view #gh-sidepanel input[type="checkbox"] {
    width: calc(2.7 * 1.4vw);
    height: calc(5.4 * 1.4vw);
}

.gh-tall-view #gh-tab-bar .btn {
    font-size: calc((2.5 / 1.4) * 1.4vw);
    /* 2.5vw */
    padding-top: calc((0.5 / 1.4) * 1.4vw);
    padding-bottom: calc((0.5 / 1.4) * 1.4vw);
    padding-left: calc((1 / 1.4) * 1.4vw);
    padding-right: calc((1 / 1.4) * 1.4vw);
}

.gh-tall-view #gh-maintable,
.gh-tall-view #gh-historytable {
    position: relative;
    padding: 0px;
    width: 100vw;
    height: calc(100vw * 2 / 3);
}

.gh-tall-view #gh-admin,
.gh-tall-view #gh-sheet,
.gh-tall-view #gh-release-notes,
.gh-tall-view #gh-rules,
.gh-tall-view #gh-game-library {
    position: relative;
    padding: 0px;
    width: 100vw;
    height: 90vh;
}

.gh-tall-view #gh-action-panel {
    left: 0%;
    top: 100%;
    width: 100%;
    height: 100%;
}

.gh-tall-view #gh-messagepanel {
    left: 0%;
    top: 200%;
    width: 100%;
    height: calc(100vh - 220%);
}

/* Duplicate rule from source reserved/commented? Original had two. Keeps second override: */
.gh-tall-view #gh-messagepanel {
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
}

.gh-tall-view #gh-adminpanel {
    left: 200%;
    top: 0%;
    width: 100%;
    height: calc(100vh - 20%);
}

.gh-tall-view #gh-sidepanel {
    left: 100%;
    top: 0;
    width: 80%;
    height: 150%;
}

.gh-tall-view #gh-winnerpanel {
    left: 100%;
    top: 150%;
    width: 100%;
    height: calc(100vh - 170%);
}

.gh-tall-view #gh-player-panel-0 {
    position: absolute;
    left: 50%;
    top: 75%;
    width: calc(18 * 100 / 3 / 18 * 1%);
    height: calc(28 * 100 / 3 / 18 * 1%);
    z-index: 11;
    transform: translate(-50%, 0%);
    background: var(--gh-felt-color);
}

.gh-tall-view #gh-player-panel-1 {
    position: absolute;
    left: 0.0%;
    top: 66%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-tall-view #gh-player-panel-9 {
    position: absolute;
    left: 82.0%;
    top: 66%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-tall-view #gh-player-panel-8 {
    position: absolute;
    left: 82.0%;
    top: 33%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-tall-view #gh-player-panel-2 {
    position: absolute;
    left: 0.0%;
    top: 33%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-tall-view #gh-player-panel-3 {
    position: absolute;
    left: 0.0%;
    top: 0%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-tall-view #gh-player-panel-4 {
    position: absolute;
    left: 20.5%;
    top: 0%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-tall-view #gh-player-panel-5 {
    position: absolute;
    left: 41.0%;
    top: 0%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-tall-view #gh-player-panel-6 {
    position: absolute;
    left: 61.5%;
    top: 0%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-tall-view #gh-player-panel-7 {
    position: absolute;
    left: 82.0%;
    top: 0%;
    width: 18%;
    height: 28%;
    z-index: 11;
}

.gh-tall-view #gh-bet-chip-input {
    position: absolute;
    left: 50%;
    top: calc(99% - 100% / 3 * 2 / 3);
    width: 20%;
    transform: translate(-50%, -100%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.gh-tall-view #gh-roll-instructions {
    left: 50%;
    top: 40%;
    width: 100%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.gh-tall-view #gh-roll-confirm-button,
.gh-tall-view #gh-discard-confirm-button,
.gh-tall-view #gh-action-onecard-confirm {
    left: 50%;
    bottom: 5%;
    top: unset;
    width: 30%;
    height: 30%;
    transform: translate(-50%, 0%);
    position: absolute;
}

.gh-tall-view #gh-roll-instructions img {
    width: 10%;
}

.gh-tall-view #gh-time-left-text {
    position: absolute;
    right: 5%;
    bottom: calc(5% + 100% / 5 * 2 / 3);
    width: calc(100% / 5);
    z-index: 1;
}

.gh-tall-view #gh-action-pause-resume {
    position: absolute;
    right: 5%;
    bottom: 5%;
    width: calc(100% / 5);
    height: calc(100% / 5 * 2 / 3);
    z-index: 1;
}

.gh-tall-view #gh-logout-container {
    position: absolute;
    right: 0%;
    top: -2.5%;
    z-index: 20;
}

/* ==========================================================================
   NAV BAR / TAB HEADER STYLES
   ========================================================================== */

/* Side panel tab bar — same treatment as the main nav bar */
#gh-sidepanel #gh-tab-bar {
    background: linear-gradient(to bottom, #1a0b0b 0%, #0e0606 100%);
    padding: 0.25em 0.3em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    width: 100%;
    box-sizing: border-box;
}

.tab-header-container {
    background: linear-gradient(to bottom, #1a0b0b 0%, #0e0606 100%);
    padding: 0.35em 0.6em 0.3em 0.6em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Suppress browser focus outline on tab buttons (mouse clicks) */
#gh-tab-bar .btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Active tab button */
#gh-tab-bar .btn-primary {
    background-color: var(--gh-bg-color);
    border-color: transparent;
    color: var(--gh-fg-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#gh-tab-bar .btn-primary:hover,
#gh-tab-bar .btn-primary:focus-visible {
    background-color: var(--gh-active-color);
    border-color: transparent;
    color: var(--gh-fg-color);
}

/* Inactive tab buttons */
#gh-tab-bar .btn-secondary {
    background-color: rgba(72, 18, 18, 0.3);
    border-color: transparent;
    color: rgba(242, 232, 215, 0.55);
}

#gh-tab-bar .btn-secondary:hover {
    background-color: rgba(72, 18, 18, 0.65);
    border-color: transparent;
    color: var(--gh-fg-color);
}

/* ==========================================================================
   THEME STYLES (Moved from MainLayout.razor)
   Refactored to use CSS Variables
   ========================================================================== */

body,
.main {
    border-width: 0px;
    user-select: none;
}

p {
    margin: 0;
    text-align: center;
}

.gh-panel hr {
    border-color: var(--gh-fg-color);
}

table {
    table-layout: fixed;
    width: 100%;
    display: table;
    border-collapse: separate;
    border-color: var(--gh-fg-color);
}

table,
tr,
th {
    border-collapse: collapse;
    border: solid 1px;
    box-sizing: border-box;
    text-align: center;
}

.gh-panel,
.gh-panel-small,
#gh-pot,
.gh-player-panel,
.gh-nameplate {
    background-color: var(--gh-bg-color);
    color: var(--gh-fg-color);
    border-radius: 5px;
    border-style: none;
}

.gh-nameplate {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.gh-panel,
.gh-panel-small {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.gh-panel button {
    background: var(--gh-fg-color);
    color: var(--gh-bg-color);
    border-color: transparent;
}

.gh-panel button:not(:disabled):hover,
.gh-panel button:not(:disabled):focus-visible {
    background: rgba(215, 195, 165, 0.85);
    color: var(--gh-bg-color);
    border-color: transparent;
    box-shadow: none;
}

.gh-panel button:disabled {
    background: var(--gh-bg-color);
    color: rgba(190, 120, 60, 0.45);
    border-color: transparent;
}

.gh-player-panel {
    background-color: unset;
}

.gh-panel {
    overflow: auto;
}

.gh-panel-small,
.gh-nameplate {
    text-align: center;
}

.gh-action-indicator {
    background-color: rgba(255, 255, 255, 0.5);
    text-align: center;
    border-radius: 2px;
}

#gh-maintable,
#gh-historytable {
    background: radial-gradient(ellipse at center, #1e2040 0%, #141830 55%, #0e1020 100%);
    box-shadow: 0 0 40px rgba(190, 120, 60, 0.25), inset 0 0 80px rgba(0, 0, 0, 0.45);
    border-radius: 8px;
}

#gh-sidepanel {
    position: absolute;
    z-index: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

#gh-sidepanel p {
    display: inline;
}

#gh-sidepanel-contents {
    flex-grow: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
}

#gh-sidepanel-subcontents {
    flex-grow: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

#gh-messagepanel {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    box-sizing: border-box;
    width: 100%;
}

#gh-messages-scroller {
    flex-grow: 1;
    display: flex;
    flex-direction: column-reverse;
}

#gh-messages-scroller p {
    display: list-item;
    text-align: left;
}

#gh-messagepanel-input {
    flex-direction: row;
    display: flex;
    box-sizing: border-box;
    width: 100%;
}

#gh-messagepanel-input input {
    flex-grow: 1;
    box-sizing: border-box;
    max-width: calc(100% - 60px);
    background-color: rgba(0, 0, 0, 0.4);
    color: var(--gh-fg-color);
    border: none;
    border-radius: 3px;
    padding: 2px 6px;
    outline: none;
}

#gh-adminpanel,
#gh-winnerpanel {
    position: absolute;
    z-index: 0;
}

#gh-winnerpanel p {
    text-align: left
}

#gh-errorpanel {
    user-select: text;
    height: 3vh;
}

#gh-gamename-overlay {
    background: rgba(0, 0, 0, 0);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#gh-gamename-overlay p {
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

#gh-pot {
    position: absolute;
    z-index: 1;
    background: unset;
    border: unset;
}

.gh-one-pot,
.gh-one-pot-highlight {
    text-align: center;
    margin: 0 0 2px 0;
    line-height: 1;
}

#gh-deck {
    position: absolute;
    z-index: 1;
    color: var(--gh-fg-color);
}

#gh-cards-remaining {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#gh-action-panel {
    overflow: hidden;
}

.gh-invisible {
    background: rgba(0, 0, 0, 0);
    color: rgba(0, 0, 0, 0);
    border: 0px;
}

#gh-release-notes,
#gh-rules {
    text-align: left;
}

#gh-release-notes p,
#gh-rules p {
    text-align: left;
}

#gh-layouttab {
    position: relative;
    width: 100%;
    height: 100vh;
}

.gh-layoutbox {
    position: absolute;
    width: 10%;
    height: 10%;
    margin: 0px;
    padding: 0px;
}

#gh-pot {
    left: 82%;
    top: 50%;
    width: auto;
    height: auto;
    transform: translate(-100%, -50%);
}

#gh-deck {
    left: 20%;
    top: 35%;
    width: 4%;
    height: calc(4% * 1.5 * 1.5);
    /* Converted @(4 * 1.5 * 1.5)% */
}

button.gh-settings-button:focus {
    outline: 0px;
}

#gh-start-game {
    background: var(--gh-fg-color);
    color: var(--gh-bg-color);
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* ==========================================================================
   CARD STYLES (Restored)
   ========================================================================== */
.gh-card,
.gh-card-highlight {
    position: absolute;
}

.gh-card {
    filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.65));
}

.gh-card-facedown-corner {
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
    mask-image: linear-gradient(to bottom right, transparent 50%, black 100%);
    -webkit-mask-image: linear-gradient(to bottom right, transparent 50%, black 100%);
    pointer-events: none;
    filter: none;
}

.gh-card-highlight {
    pointer-events: none;
}

/* ==========================================================================
   NAMEPLATE LEFT / CHIPS RIGHT ALIGNMENT (Global for all panels)
   ========================================================================== */

/* 1. Left-align Name (Global) */
.gh-wide-view .gh-nameplate p,
.gh-tall-view .gh-nameplate p {
    text-align: left;
    padding-left: 5px;
    margin: 0;
    /* Ensure name doesn't overlap chips roughly */
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   DYNAMIC FONT SIZING (Container Queries)
   Fits text to the player panel width explicitly.
   ========================================================================== */

.gh-player-panel {
    container-type: inline-size;
}

.gh-action-seat {
    box-shadow: 0 0 22px 7px rgba(255, 210, 50, 0.38);
}

.gh-player-chips p {
    /* Fallback */
    font-size: 3vw;
    /* Dynamic: 15% of the panel width */
    font-size: 15cqi;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
}

/* ==========================================================================
   DYNAMIC FONT SIZING FOR INFO PANELS (Wide View)
   Action panel, winner panel, and history DivLoc panels.
   ========================================================================== */

.gh-wide-view #gh-action-panel,
.gh-wide-view #gh-winnerpanel,
.gh-wide-view #gh-historytable > .gh-panel {
    container-type: inline-size;
}

.gh-wide-view #gh-historytable > .gh-panel p,
.gh-wide-view #gh-winnerpanel p {
    font-size: 5cqi;
}

.gh-wide-view #gh-action-panel p {
    font-size: 4cqi;
}


/* Action label overlaps the action-bar edge inside the player panel */
.gh-player-action-label {
    overflow: visible;
}

.gh-action-label-text {
    margin: 0;
    padding: 1px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(8px, 8cqi, 18px);
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    text-align: center;
}

.gh-action-label-amount {
    margin: 0;
    padding: 1px 0;
    font-size: clamp(8px, 10cqi, 16px);
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    text-align: center;
}

/* ==========================================================================
   CLUBS PAGE
   ========================================================================== */

/* Headings */
#gh-clubs h2,
#gh-clubs h3 {
    color: var(--gh-fg-color);
    font-weight: 600;
    margin-bottom: 0.4em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4em;
}

#gh-clubs h2 {
    padding-bottom: 0.25em;
    border-bottom: 1px solid rgba(190, 120, 60, 0.3);
}

/* Left-column stacked buttons (New Club, New Table, My Invitations) */
#gh-clubs div[style*="font-size"] ~ button {
    display: block;
    margin-top: 0.5em;
    width: 100%;
    box-sizing: border-box;
}

/* Suppress the naked <br> tags that were spacing the buttons */
#gh-clubs div[style*="font-size"] ~ br {
    display: none;
}

/* Divider */
#gh-clubs hr {
    border-color: rgba(190, 120, 60, 0.25);
    margin: 0.6em 0;
}

/* Paragraph text */
#gh-clubs p {
    color: var(--gh-fg-color);
    opacity: 0.85;
}

/* Club selection list (SingleSelectionList) */
#gh-clubs div[style*="font-size"] > div > div {
    padding: 3px 6px;
    border-radius: 3px;
    cursor: pointer;
    color: var(--gh-fg-color);
    opacity: 0.75;
    transition: opacity 0.1s, background 0.1s;
}

#gh-clubs div[style*="font-size"] > div > div:hover {
    background: rgba(190, 120, 60, 0.15);
    opacity: 1;
}

#gh-clubs div[style*="font-size"] > div > div:has(strong) {
    background: rgba(72, 18, 18, 0.6);
    opacity: 1;
    border-left: 2px solid rgba(190, 120, 60, 0.7);
    padding-left: 4px;
}

/* Tables */
#gh-clubs table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.95em;
    border: none;
}

#gh-clubs table,
#gh-clubs table td,
#gh-clubs table tr {
    border-left: none;
    border-right: none;
}

#gh-clubs table tr:first-child td {
    border-top: none;
}

#gh-clubs table tr:last-child td {
    border-bottom: none;
}

#gh-clubs table td {
    padding: 2px 10px;
    color: var(--gh-fg-color);
}

.hg-header td {
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--gh-fg-color) !important;
    opacity: 0.6;
    border-top: none;
    border-bottom: 1px solid rgba(190, 120, 60, 0.35);
    text-transform: uppercase;
    font-size: 0.85em;
}

.hg-record td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hg-record:last-child td {
    border-bottom: none;
}

.hg-record:hover td {
    background: rgba(190, 120, 60, 0.07);
}

/* Version display */
#gh-clubs [style*="color: #666"] {
    color: rgba(190, 120, 60, 0.45) !important;
}

/* ==========================================================================
   GAMES (GAME EXPLORER) PAGE
   ========================================================================== */

/* Left-column game list */
#gh-game-library h4 {
    color: var(--gh-fg-color);
    font-weight: 600;
    margin-bottom: 0.5em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid rgba(190, 120, 60, 0.3);
}

#gh-game-library ul {
    padding-left: 1.2em;
    color: var(--gh-fg-color);
}

#gh-game-library li {
    margin-bottom: 0.4em;
    color: var(--gh-fg-color);
    opacity: 0.85;
}

/* SingleSelectionList items */
#gh-game-library div[style*="font-size"] > div > div {
    padding: 3px 6px;
    border-radius: 3px;
    cursor: pointer;
    color: var(--gh-fg-color);
    opacity: 0.75;
    transition: opacity 0.1s, background 0.1s;
}

#gh-game-library div[style*="font-size"] > div > div:hover {
    background: rgba(190, 120, 60, 0.15);
    opacity: 1;
}

/* Selected item (bold via <strong>) */
#gh-game-library div[style*="font-size"] > div > div:has(strong) {
    background: rgba(72, 18, 18, 0.6);
    opacity: 1;
    border-left: 2px solid rgba(190, 120, 60, 0.7);
    padding-left: 4px;
}

/* ---- Game editor: raw JSON import textarea (no-game-selected state) ---- */
#gh-game-library textarea.gh-json-import {
    background: rgba(20, 5, 5, 0.85);
    color: var(--gh-fg-color);
    border: 1px solid rgba(190, 120, 60, 0.35);
    border-radius: 3px;
    font-family: 'Consolas', 'Courier New', monospace;
    resize: none;
    outline: none;
}

#gh-game-library textarea.gh-json-import:focus {
    border-color: rgba(190, 120, 60, 0.7);
}

/* ---- Collapsible JSON viewer (right panel of game editor) ---- */
.gh-json-viewer {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    padding: 0.4em 0.6em;
    box-sizing: border-box;
}

.gh-json-viewer details {
    margin-bottom: 0.25em;
    border: 1px solid rgba(190, 120, 60, 0.25);
    border-radius: 4px;
    overflow: hidden;
}

.gh-json-viewer details[open] {
    border-color: rgba(190, 120, 60, 0.5);
}

.gh-json-viewer summary.gh-json-section {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.2em 0.5em;
    font-size: 0.75vw;
    font-weight: 600;
    color: var(--gh-fg-color);
    background: rgba(72, 18, 18, 0.55);
    cursor: pointer;
    user-select: none;
    transition: background 0.1s;
}

.gh-json-viewer summary.gh-json-section:hover {
    background: rgba(120, 30, 30, 0.7);
}

.gh-json-viewer summary.gh-json-section::before {
    content: '▶';
    font-size: 0.55em;
    opacity: 0.7;
    transition: transform 0.15s;
    display: inline-block;
}

.gh-json-viewer details[open] > summary.gh-json-section::before {
    transform: rotate(90deg);
}

.gh-json-viewer pre.gh-json-pre {
    margin: 0;
    padding: 0.4em 0.7em;
    font-size: 0.65vw;
    font-family: 'Consolas', 'Courier New', monospace;
    color: var(--gh-fg-color);
    background: rgba(30, 10, 10, 0.6);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.45;
    opacity: 0.9;
}

/* JSON syntax colouring */
.gh-json-viewer .json-key    { color: #c9a96e; }
.gh-json-viewer .json-string { color: #9fcda8; }
.gh-json-viewer .json-number { color: #79c0d4; }
.gh-json-viewer .json-bool   { color: #d48c8c; }
.gh-json-viewer .json-null   { color: #888; }