/* ============================
 * BRASS PITT specific
 * ============================ */

:root {
    --player-0-color: #7340CC;
    --player-1-color: #D1B200;
    --player-2-color: #86442F;
    --player-3-color: #BCBFC0;
}

/* ── Gameplay area: hand above map, full width ─────────────────── */
#gameplay-area {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* On wide screens, hand sits in a slim strip above the map */
#player-hand {
    border-top: 1px solid var(--line);
    padding-top: 0.5rem;
}

/* Phase description shown to non-active players */
.phase-observer {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
    padding: 0.4rem 0;
}

/* .btn-undo moved to application.css — the single action panel's Undo
   button is generic now, not Brass-Pitt-only. .brass-pitt__undo (the old
   wrapper div around it) is dropped entirely: Undo now sits inline inside
   .mode-buttons instead of its own boxed-off row. */

.brass-pitt__map {
    position: relative;  /* anchors the absolute-positioned detail panel */
    margin-bottom: 1rem;
}

/* Built, non-legal spaces are clickable for tile details */
.city-svg__space.space--detail {
    cursor: pointer;
}
.city-svg__space.space--detail:hover .city-svg__space-frame {
    stroke: rgba(0, 0, 0, 0.35);
    stroke-width: 0.25;
}
.city-svg__space.bp-tile--selected .city-svg__space-frame {
    stroke: var(--player-color, #555);
    stroke-width: 0.35;
}


.brass-pitt .game-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

/* Players as a compact top bar */
.brass-pitt .players-area h2 {
    display: none;
}

.brass-pitt .player-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.brass-pitt .player-list .player {
    flex: 0 0 auto;
    margin-bottom: 0;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
}

/* Let the map fill the viewport */
main:has(.brass-pitt) {
    max-width: 100%;
    padding: 0.5rem;
}

.brass-pitt__map h3 {
    margin: 0 0 0.5rem;
}

.brass-pitt__map-canvas {
    position: relative;
    width: min(100%, 95vh);
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    background: #e8ecf0;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    /* Define a container so children can size with cqi (1cqi = 1% of canvas width).
       This makes city spaces, fonts, and overlays scale proportionally with the
       actual rendered size of the map, on any viewport. */
    container-type: inline-size;
    container-name: brass-map;
}

@media (min-width: 900px) {
    .brass-pitt__map-canvas {
        width: min(100%, 80vh);
    }
}

.brass-pitt__edges-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.edge-line {
    stroke: #ccc;
    stroke-linecap: round;
}

.edge--built {
    stroke-width: 0.6 !important;
}

/* Preview overlay: the acting player has chosen this edge (in
   NetworkChooseEdgeSubPhase) but hasn't finished paying for it yet — see
   NetworkSubPhase#do_link!/#view_context. Dashed + slightly thinner than
   --built and at reduced opacity, so it reads as "in progress" rather than
   as an actually-owned link, even though it's drawn in the acting player's
   color. */
.edge--pending {
    stroke-width: 0.5 !important;
    stroke-dasharray: 1.2, 0.8;
    opacity: 0.6;
}

.edge--legal {
    filter: drop-shadow(0 0 2px #04f);
    cursor: pointer;
}

/* .edge-line sets its own stroke (and, via the template, its own
   stroke-width attribute) unconditionally, so the highlight has to target
   the descendant directly — setting stroke on .edge--legal itself has no
   effect, since a child's own declared value always wins over anything it
   would otherwise inherit from an ancestor. stroke-width lives here (not
   as a per-render inline attribute keyed off e[:legal_edge] like it used
   to be) for the same reason .edge--legal itself is now JS-managed: a CSS
   class toggled by legal_entities_controller.js can never go stale between
   full redraws, whereas a value baked into the template only updates when
   the whole edge re-renders. */
.edge--legal .edge-line {
    stroke: #04f !important;
    stroke-width: 0.8 !important;
}

@media (hover: hover) {
    .edge--legal:hover {
        filter: drop-shadow(0 0 2px red);
    }
    .edge--legal:hover .edge-line {
        stroke: red !important;
    }
}

/* Train icon shown at edge midpoint */
.edge-train-icon {
    font-weight: bold;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 0.15px;
    pointer-events: none;
}

/* Resource icon shown at edge midpoint (below train icon) */
.edge-res-icon {
    font-size: 0.8px;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 0.1px;
    pointer-events: none;
}

.edge-hitarea, .pipeline-hitarea {
    cursor: pointer;
    pointer-events: stroke;
}

/* Hitarea is now always rendered (see _edge.html.erb /
   _pipeline_edge.html.erb) so that a phase change can toggle legality
   via a targeted class update instead of a full board re-render. When not
   legal, it must not intercept clicks/hover. */
.edge-hitarea:not(.is-legal),
.pipeline-hitarea:not(.is-legal) {
    pointer-events: none;
    cursor: default;
}

/* Bonus icons (whiskey, develop, income) — PNG branch of resource_token.
   Value text (e.g. +2 for income) needs to stay readable on any background. */
.resource-bonus { pointer-events: none; }

.resource-bonus__value {
    fill: black;
    paint-order: stroke;
    stroke: #000;
    stroke-width: 0.18;
    font-weight: 700;
}

/* Pipeline lines */
.pipeline-line {
    stroke: #aaa;
    stroke-linecap: round;
}

.pipeline--built {
    stroke-width: 0.5 !important;
}

/* Mirrors .edge--pending above — see that comment and
   NetworkSubPhase#do_link!/#view_context. */
.pipeline--pending {
    stroke-width: 0.4 !important;
    opacity: 0.6;
}

.pipeline--legal {
    filter: drop-shadow(0 0 2px #04f);
    cursor: pointer;
}

/* !important needed to beat both the inline default stroke-width on
   .pipeline-line (see _pipeline_edge.html.erb) and .pipeline--built's
   own !important — same staleness-defensiveness as edge-line: this class
   is JS-managed (legal_entities_controller.js), so it must always win
   regardless of what else is going on, the instant legality changes,
   without waiting for a full redraw. */
.pipeline--legal .pipeline-line {
    stroke: #04f;
    stroke-width: 1.0 !important;
}

@media (hover: hover) {
    .pipeline--legal:hover {
        filter: drop-shadow(0 0 2px red);
    }
    .pipeline--legal:hover .pipeline-line {
        stroke: red;
    }
}


/* City positioned on map */
.brass-pitt__city {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    z-index: 2;
    pointer-events: auto;
}

/* Industry spaces grid */
.city-spaces {
    display: grid;
    grid-template-columns: repeat(2, auto);
}

.city-spaces > .city-space:nth-child(1):nth-last-child(3) {
    grid-column: span 2;
    justify-self: center;
}

.city-space {
    /* Scales with the map: 5cqi = 5% of canvas width.
       clamp() keeps it readable on phones (min 28px) and capped on desktop
       (max 44px). On a 880px-wide map, 5cqi = 44px → cap. On a 320px-wide
       map, 5cqi = 16px → floored to 28px. */
    width: clamp(28px, 5cqi, 44px);
    height: clamp(28px, 5cqi, 44px);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #999;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(8px, 1.4cqi, 11px);
    position: relative;
}

.city-space.is-built {
    border-color: rgba(0, 0, 0, 0.3);
}

.city-space.is-flipped {
    background: linear-gradient(to bottom, #222 50%, var(--player-color, #888) 50%) !important;
}

.city-space.space--legal {
    outline: 2px solid #1f6feb;
    outline-offset: 0px;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(31, 111, 235, 0.6);
}

@media (hover: hover) {
    .city-space.space--legal:hover {
        outline-color: #0d5fd4;
        box-shadow: 0 0 8px rgba(13, 95, 212, 0.8);
    }
}

.city-space.space--legal:active {
    outline-color: #c63333;
    box-shadow: 0 0 8px rgba(198, 51, 51, 0.8);
}

/* Touch devices: enlarge invisible hit-areas for edges and pipelines so
   they're tappable with a finger. CSS overrides the inline stroke-width
   on the SVG elements. */
@media (pointer: coarse) {
    .edge-hitarea { stroke-width: 5; }
    .pipeline-hitarea { stroke-width: 5; }
}

/* ── Prototype: city rendered entirely in SVG ─────────────────────────── */
.city-svg__space-bg {
    fill: rgba(255, 255, 255, 0.85);
    stroke: #777;
    stroke-width: 0.08;
}

.city-svg__space.is-built .city-svg__space-bg {
    stroke: rgba(0, 0, 0, 0.3);
}

.city-svg__space.space--legal .city-svg__space-bg {
    stroke: #1f6feb;
    stroke-width: 0.25;
    filter: drop-shadow(0 0 0.4px rgba(31, 111, 235, 0.7));
    cursor: pointer;
}

/* The frame rect sits on top of the tile to draw the legal/hover outline
   over a built industry tile (which has its own fill). */
.city-svg__space-frame { stroke: transparent; stroke-width: 0.05; }

.city-svg__space.space--legal .city-svg__space-frame {
    stroke: #1f6feb;
    stroke-width: 0.3;
    filter: drop-shadow(0 0 0.4px rgba(31, 111, 235, 0.7));
    cursor: pointer;
}

@media (hover: hover) {
    .city-svg__space.space--legal:hover .city-svg__space-bg,
    .city-svg__space.space--legal:hover .city-svg__space-frame {
        stroke: #0d5fd4;
        stroke-width: 0.4;
    }
}

.city-svg__space.space--legal:active .city-svg__space-bg,
.city-svg__space.space--legal:active .city-svg__space-frame {
    stroke: #c63333;
}

/* Industry tile rendered inside a city space */
.industry-tile-svg__level {
    fill: #fff;
    font-weight: 700;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 0.06;
}

.industry-tile-svg__conn-cluster,
.industry-tile-svg__conn-hex,
.industry-tile-svg__conn-bar {
    pointer-events: none;
}

/* ── Pick-tile section in the board (above cards) ──────────────── */
.brass-pitt__step--tile-pick { margin: 0.5rem 0; }
.brass-pitt__tile-pick-row {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
/* Always rendered now (see _board.html.erb) — only .is-legal gets the
   clickable affordance/hover effect, mirroring .bp-token/.bp-token.is-legal
   below. A tile with no current pick_tile action just sits there plain,
   instead of disappearing from the row. */
.brass-pitt__tile-pick-svg.is-legal {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    transition: transform 0.08s ease;
}
@media (hover: hover) {
    .brass-pitt__tile-pick-svg.is-legal:hover {
        transform: scale(1.06);
        filter: drop-shadow(0 0 4px rgba(31, 111, 235, 0.7));
    }
}

/* ── Heavy-train & pipeline tokens (player area + pick sub-phases) ── */
.bp-token-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.3rem;
}
.bp-token {
    display: inline-block;
    vertical-align: middle;
}
.bp-token__body {
    fill: var(--player-color, #888);
    stroke: rgba(0, 0, 0, 0.45);
    stroke-width: 0.18;
}
.bp-token__glyph {
    fill: #fff;
    font-weight: 700;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 0.12;
}
.bp-token.is-legal {
    cursor: pointer;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    transition: transform 0.08s ease;
}
@media (hover: hover) {
    .bp-token.is-legal:hover {
        transform: scale(1.08);
        filter: drop-shadow(0 0 4px rgba(31, 111, 235, 0.7));
    }
}
.bp-token.is-legal:active {
    transform: scale(0.97);
}

/* ── Developable tiles row in each player area ─────────────────── */
.brass-pitt__developable-row {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 0.3rem;
}
.brass-pitt__developable-tile {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 4px;
    transition: opacity 0.1s;
}
.brass-pitt__developable-tile:hover {
    opacity: 0.8;
}
.brass-pitt__developable-tile.bp-tile--selected {
    outline: 2px solid var(--player-color, #888);
    outline-offset: 1px;
}

/* ── Tile detail panel ─────────────────────────────────────────── */
/* Rendered via the Popover API (popover="manual"): the browser puts it in
   the top layer, so it's never clipped by the map SVG's or sidebar's
   overflow/stacking context. Position is set dynamically in JS
   (tile_detail_controller.js), right next to whichever tile was clicked. */
.bp-tile-detail {
    position: fixed;
    margin: 0;
    width: 220px;
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 6px;
    background: #fafafa;
    font-size: 0.8rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.bp-tile-detail__card {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.bp-tile-detail__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.bp-tile-detail__title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bp-tile-detail__name {
    font-weight: 700;
    font-size: 0.9rem;
}
.bp-tile-detail__vp {
    color: #555;
    font-size: 0.75rem;
}
.bp-tile-detail__section {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.bp-tile-detail__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #888;
    font-weight: 600;
    white-space: nowrap;
    min-width: 52px;
}
.bp-tile-detail__row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.bp-tile-detail__cost-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(0,0,0,0.05);
    border-radius: 3px;
    padding: 1px 4px;
}
.bp-tile-detail__upgrade {
    background: rgba(180,120,0,0.12);
    color: #7a5000;
}
.bp-tile-detail__unlock {
    background: rgba(0,100,200,0.08);
    color: #003a7a;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.75rem;
}

/* Tile VP is rendered as a gold number on a black hex; the polygon
   itself carries fill/stroke inline. The label just needs the gold
   color and weight (already inline) — no outline needed. */
.industry-tile-svg__vp {
    pointer-events: none;
}

.industry-tile-svg__vp-hex {
    pointer-events: none;
}

.city-svg__tile-res-count {
    font-weight: 700;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.55);
    stroke-width: 0.06;
}

/* ── Shared resource token (cube + label) — industry tile, markets ── */
.resource-token-svg {
    stroke: rgba(0, 0, 0, 0.55);
    stroke-width: 0.04;
}

/* The barrel group is composed of multiple shapes; default no stroke
   (the inner shapes have their own fills). When inside .is-legal the
   stroke applies to the body rect for the highlight outline. */
.resource-token-svg.resource-barrel { stroke: none; }
.resource-token-svg.resource-barrel > rect:first-child {
    stroke: rgba(0, 0, 0, 0.55);
    stroke-width: 0.04;
}

.resource-token-svg__label {
    font-weight: 700;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.45);
    stroke-width: 0.04;
}

/*  Merchants    */
.merchant-tile-svg {}
.merchant-tile-svg-hitarea { pointer-events: all; }
.merchant-tile-svg.is-legal .merchant-tile-svg-hitarea { cursor: pointer; }

.merchant-tile-svg.is-legal {
    stroke: #1f6feb;
    stroke-width: 0.2;
    filter: drop-shadow(0 0 0.4px rgba(31, 111, 235, 0.6));
    cursor: pointer;
}

@media (hover: hover) {
    .merchant-tile-svg.is-legal:hover  {
        stroke: #0d5fd4;
        stroke-width: 0.3;
    }
}

/* ── Market cubes below the city — legal/hover handled via parent group ─── */
.city-svg__market-price {
    fill: #333;
    font-weight: 600;
    pointer-events: none;
}

.city-svg__market-hitarea { pointer-events: all; }
.city-svg__market.is-legal .city-svg__market-hitarea { cursor: pointer; }

.city-svg__market.is-legal .resource-token-svg {
    stroke: #1f6feb;
    stroke-width: 0.4;
    filter: drop-shadow(0 0 0.4px rgba(31, 111, 235, 0.6));
    cursor: pointer;
}

@media (hover: hover) {
    .city-svg__market.is-legal:hover .resource-token-svg {
        stroke: #0d5fd4;
        stroke-width: 0.3;
    }
}

.city-svg__market.is-legal:active .resource-token-svg {
    stroke: #c63333;
}

/* ── Vanderbilt off-map market ─────────────────────────────────────── */
.vanderbilt-market__item.is-legal .resource-token-svg {
    stroke: #1f6feb;
    stroke-width: 0.4;
    filter: drop-shadow(0 0 0.4px rgba(31, 111, 235, 0.6));
    cursor: pointer;
}
.vanderbilt-market__hitarea { pointer-events: all; }
.vanderbilt-market__item.is-legal .vanderbilt-market__hitarea { cursor: pointer; }

@media (hover: hover) {
    .vanderbilt-market__item.is-legal:hover .resource-token-svg {
        stroke: #0d5fd4;
        stroke-width: 0.5;
    }
}

.vanderbilt-market__item.is-legal:active .resource-token-svg {
    stroke: #c63333;
}

.city-svg__name {
    fill: #111;
    font-weight: 600;
    pointer-events: none;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 0.15;
}

.city-svg__tile-letter {
    fill: #fff;
    font-weight: 700;
    pointer-events: none;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.4);
    stroke-width: 0.06;
}

.city-svg__tile-vp {
    fill: #fff;
    font-weight: 700;
    pointer-events: none;
}

/* Industry tile */
.industry-tile {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--player-color);
    border: 1px solid #999;
}

.industry_tile--flipped {
    background: linear-gradient(
            to bottom,
            black 0%,
            black 50%,
            var(--player-color) 50%,
            var(--player-color) 100%
    );

}

.industry-flip-vp {
    position: absolute;
    bottom: 1px;
    left: 2px;
    font-size: 7px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
    line-height: 1;
}

.industry-flip-conn {
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: 7px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
    line-height: 1;
}

.industry-tile-type {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    line-height: 1;
}

.industry-level {
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
    line-height: 1;
    z-index: 1;
}

.space-resources {
    position: absolute;
    bottom: 1px;
    right: 1px;
    display: flex;
    gap: 3px;
    z-index: 1;
}

.space-res-item {
    position: relative;
    width: 16px;
    height: 16px;
}

.space-res-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.space-res-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

.space-res-count--dark {
    color: #111;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
}

.space-res-count--light {
    color: #fff;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.space-icon {
    position: absolute;
    width: 75%; /* >50% così due icone si sovrappongono al centro */
    height: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.space-icon svg,
.space-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

.industry-icon-img, .resource-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.resource-icon-svg {
    display: inline-block;
    pointer-events: none;
}

/* Legal resource cubes / barrels on edges */
.cube--legal polygon,
.barrel--legal rect,
.barrel--legal ellipse {
    filter: drop-shadow(0 0 1.5px rgba(31, 111, 235, 0.5));
    cursor: pointer;
}

.edge-cube-count {
    font-weight: 700;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 0.08px;
    pointer-events: none;
}

.space-icon:only-child {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ── Due icone: prima in alto-sinistra ───────────────────── */
.space-icon:first-child:not(:only-child) {
    top: 0;
    left: 0;
}

/* ── Due icone: seconda in basso-destra (sopra la prima) ─── */
.space-icon:last-child:not(:only-child) {
    bottom: 0;
    right: 0;
    z-index: 2; /* la seconda passa sopra quando si sovrappongono */
}


.city-market .resource-icon-img {
    width: 16px;
    height: 16px;
}

.res-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 2px #000;
}

.city-market {
    font-size: 0.65rem;
    background: rgba(255, 255, 255, 0.9);
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.city-market.market--legal {
    outline: 2px solid #1f6feb;
    outline-offset: 1px;
    cursor: pointer;
    background: rgba(31, 111, 235, 0.12);
    box-shadow: 0 0 4px rgba(31, 111, 235, 0.4);
}

.city-market.market--legal:hover {
    outline-color: #0d5fd4;
    box-shadow: 0 0 6px rgba(13, 95, 212, 0.7);
    background: rgba(31, 111, 235, 0.22);
}

.city-market.market--legal:active {
    outline-color: #c63333;
    box-shadow: 0 0 6px rgba(198, 51, 51, 0.7);
}

.city-market sub {
    font-size: 0.6rem;
    font-weight: 600;
}

.city-markets-row {
    display: flex;
    gap: 3px;
    justify-content: center;
    margin-top: 1px;
}

.city-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: #333;
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.85);
    padding: 0 3px;
    border-radius: 2px;
}

.city-name small {
    font-size: 0.55rem;
    color: #666;
}

/* Player area tiles */
.resource--tiles {
    display: flex;
    gap: 4px;
    align-items: center;
}

.tile {
    font-size: 0.65rem;
    background: #eee;
    padding: 0 3px;
    border-radius: 2px;
}

.tile sub {
    font-size: 0.5rem;
}

/* .brass-pitt__step is still used as a generic "boxed section" look by
   the tile-pick/token-pick panels (brass-pitt__step--tile-pick/
   --token-pick) and the player-hand section (brass-pitt__step--card), so
   it stays here. .mode-buttons/.btn-mode moved to application.css — the
   single action panel's plain-button fallback list is generic now, used
   by any game, not just Brass Pitt. */
.brass-pitt__step {
    border-top: 1px solid var(--line);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

.brass-pitt__cards {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.brass-pitt__card {
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.brass-pitt__card.is-legal {
    border-width: 3px;
    border-color: #04f;
}

@media (hover: hover) {
    .brass-pitt__card.is-legal:hover {
        border-color: red;
    }
}

.btn-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    min-width: 70px;
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: default;
}

.brass-pitt__card.is-legal .btn-card {
    cursor: pointer;
}

.card-type {
    font-size: 0.6rem;
    color: var(--muted);
}

.card-value {
    font-weight: 600;
}

/* Oilfield nodes on the map — clickable, opens the detail panel
   (tile-detail controller). pointer-events: none would have blocked that
   (and silently killed the old hover-only <title> tooltip too). */
.brass-pitt__oilfield {
    cursor: pointer;
}

.oilfield-name {
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--muted);
}

.oilfield-type {
    font-size: 0.7rem;
    font-weight: 700;
}

.oilfield--flipped .oilfield-type {
    color: var(--accent-success);
}

.oilfield-oil-count {
    font-size: 0.55rem;
}

/* Train resource cubes on edges */

.edge-train-resource-cube {}
.edge-train-resource-cube-hitarea { pointer-events: all; }

.edge-train-resource-cube.is-legal {
    stroke: #1f6feb;
    stroke-width: 0.2;
    filter: drop-shadow(0 0 0.4px rgba(31, 111, 235, 0.6));
    cursor: pointer;
}

@media (hover: hover) {
    .edge-train-resource-cube.is-legal:hover  {
        stroke: #0d5fd4;
        stroke-width: 0.3;
    }
}