/* Keep both boards visible, independently of the framework log panel. */
#game #territory .movementSelection .overlayPolygon.active { fill-opacity: 0; opacity: 1; stroke: #b78b42; stroke-width: 3; }
#game #territory .movementSelection .overlayPolygon.active:hover { stroke: #ffe3a0; stroke-width: 5; }
#game #territory .movementSelection .tribesMoveSource.active { fill: #efba48; fill-opacity: .08; stroke: #f2bd48; stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px #33200e); }
#game #territory .movementSelection .tribesMoveTarget.active { fill: transparent; fill-opacity: 0; stroke: #49e5bc; stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px #163c31); }
#game #territory .movementSelection .tribesMoveOrigin { fill: none; stroke: #f7ce68; stroke-width: 3; vector-effect: non-scaling-stroke; pointer-events: none; }
#game #territory .movementSelection .overlayPolygon.active:hover { stroke: #fff7cc; stroke-width: 4; }
#game #territory .tribesMovingMember { filter: drop-shadow(2px 0 0 #fff1bb) drop-shadow(-2px 0 0 #fff1bb) drop-shadow(0 2px 0 #fff1bb) drop-shadow(0 -2px 0 #fff1bb); }
.tribesTools { order: 1; display: flex; align-items: center; gap: 8px; height: 100%; flex-shrink: 0; z-index: 25; }
#game #queue { --tribes-queue-height: calc((100cqw - 16px) * 234 / 3120.870968); display: flex; align-items: center; gap: 8px; height: var(--tribes-queue-height); box-sizing: border-box; }
#game #queue .queueSVG { flex: 0 0 auto; width: calc(var(--tribes-queue-height) * 2868 / 234); height: 100%; display: block; }
#tribesSupply { position: relative; container-type: inline-size; width: calc(var(--tribes-queue-height) * 2 / 3 * 54 / 62); height: calc(var(--tribes-queue-height) * 2 / 3); }
#tribesSupplyTile { width: 100%; height: 100%; object-fit: contain; }
#tribesSupplyCount { position: absolute; inset: 0; display: grid; place-items: center; font: bold clamp(6px, 45cqw, 20px) sans-serif; color: #fff1c9; text-shadow: 0 1px 2px #241509; pointer-events: none; }
#tribesSupplyEye { position: absolute; right: -15cqw; top: -11cqw; border: 0; border-radius: 50%; background: transparent; width: clamp(7px, 50cqw, 23px); height: clamp(7px, 50cqw, 23px); padding: 0; }
#tribesSupplyEye img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tribesSupplyList { display: grid; width: max-content; max-width: 100%; margin: 0 auto; }
.tribesSupplyList > div { display: grid; grid-template-columns: 40px minmax(0, 1fr) max-content; align-items: center; gap: 14px; margin: 5px 0; }
.tribesSupplyList img { width: 34px; height: 39px; object-fit: contain; margin: 0; justify-self: center; }
.tribesSupplyList span { text-align: left; }
.tribesSupplyList strong { min-width: 2ch; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
#tribesAlmanac { flex-shrink: 0; width: calc(var(--tribes-queue-height) / 2); height: calc(var(--tribes-queue-height) / 2); padding: calc(var(--tribes-queue-height) * .09); box-sizing: border-box; border: 1px solid #bca074; border-radius: 50%; color: #f7e4b5; background: linear-gradient(135deg, #81603e, #443222); box-shadow: 0 2px 8px #25180e55, inset 0 0 0 3px #dbb77f33; }
#tribesAlmanac:hover, #tribesAlmanac:focus-visible { color: white; border-color: #ffe0a0; outline: 2px solid #e3bb73; outline-offset: 2px; }
#tribesAlmanac svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tribesAlmanacPopover { --bs-popover-max-width: min(430px, calc(100vw - 24px)); }
.tribesAlmanacPopover .popover-body { text-align: left; max-height: min(65vh, 570px); overflow-y: auto; }
.tribesQuickRules section + section { border-top: 1px solid #af8d5b55; padding-top: 9px; margin-top: 9px; }
.tribesQuickRules h4 { font-size: .95rem; font-weight: 700; color: #714527; margin: 0 0 4px; }
.tribesQuickRules p { font-size: .9rem; margin: 0; line-height: 1.5; }
#game .achievementSVG .achievementOverlay { fill: transparent; opacity: 1; fill-opacity: 0; stroke: none; }
#game .achievementSVG .achievementOverlay.active { fill: transparent; fill-opacity: 0; opacity: 1; stroke: #e6c075; stroke-opacity: 1; stroke-width: 3.75px; vector-effect: non-scaling-stroke; cursor: pointer; }
#game .achievementSVG .achievementOverlay.active:hover { stroke: #e6c075; stroke-width: 4.5px; }
#game .achievementSVG .achievement-border { stroke-width: 3 !important; rx: 6px; filter: none; }
#game .achievementSVG .achievement-border.possible { stroke: #e6c075 !important; }
#game .achievementSVG .achievement-border.joker { stroke: #e6c075 !important; }
#game .achievementCost { pointer-events: none; }
#game .achievementCost polygon { fill: none; stroke: #ed302b; stroke-width: 4; stroke-linejoin: round; }
#game .achievementCost text { fill: #fff; stroke: #3c2118; stroke-width: 4; paint-order: stroke fill; font: bold 30px sans-serif; text-anchor: middle; dominant-baseline: central; }
.tribesPopover {
    --bs-popover-bg: #f4e6c6;
    --bs-popover-border-color: #876345;
    --bs-popover-header-bg: #68472f;
    --bs-popover-header-color: #fff1d2;
    --bs-popover-body-color: #38291f;
    --bs-popover-max-width: min(340px, calc(100vw - 24px));
    --bs-popover-border-radius: 12px;
    box-shadow: 0 8px 28px #26190e66;
    background-image: linear-gradient(135deg, #fff6df66, #c5a27422);
}
.tribesPopover .popover-header { text-align: center; font-weight: 600; }
.tribesPopover .popover-body { text-align: center; line-height: 1.45; }
.tribesPopover img { display: block; max-width: 100%; height: auto; margin: auto; }
#game [data-tribes-magnify] { cursor: zoom-in; }
#game [data-tribes-magnify]:focus-visible { outline: 3px solid #ffdf91; }
#game.tribesGame {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(400px, 44%);
    align-items: start;
    align-content: start;
    gap: 4px;
    column-gap: 4px;
    padding: clamp(10px, 1.4vw, 22px);
    padding-top: 2px;
    padding-left: 2px;
    padding-right: 4px;
    box-sizing: border-box;
    min-height: 100%;
    overflow: auto;
    background: linear-gradient(120deg, rgba(47, 34, 22, .12), rgba(239, 223, 189, .12)),
        url(/game-plugins/tribes/1.1.0/images/prehistoric-landscape.webp) center / cover;
}
#game.tribesGame #board { width: 100%; min-width: 0; height: auto; }
#game.tribesGame .leftSection, #game.tribesGame .div_board_Tribes { position: relative; width: 100%; }
#game.tribesGame .leftSection { container-type: inline-size; }
#game.tribesGame .rightSection { min-width: 0; display: flex; flex-direction: column; gap: 4px; container-type: inline-size; }
#game.tribesGame #playerData { width: 100%; min-width: 0; margin: 0; }
#game.tribesGame .div_board_Tribes { border-radius: 12px; background: transparent; overflow: hidden; }
#game.tribesGame .territoryArea { --tribes-tabs-height: 28px; position: relative; min-width: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 24px #241b1640; }
#game.tribesGame .territoryTabs { display: flex; align-items: flex-end; gap: 5px; min-height: var(--tribes-tabs-height); padding: 5px 8px 0; }
#game.tribesGame .territoryTab { appearance: none; width: 34px; height: 19px; padding: 0; border: 3px solid #432412; border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--tribes-player-color); opacity: .85; cursor: pointer; }
#game.tribesGame .territoryTab.selected { height: 23px; opacity: 1; box-shadow: inset 0 0 0 2px #fff2c6; }
#game.tribesGame .territoryTab:focus-visible { outline: 2px solid #fff2c6; outline-offset: 1px; }
#game.tribesGame #territory { display: block; position: relative; inset: auto; width: 100%; height: auto; padding: 0; border: 2px solid #75533a; border-radius: 12px; background: rgba(246, 232, 198, .72); }
#game.tribesGame #territory .territorySVG { display: block; width: 100%; height: auto; max-height: min(70dvh, 260px); }
#game.tribesGame.tribesNarrow #territory .territorySVG { max-height: min(50dvh, 160px); }
#game.tribesGame #newTiles { z-index: 20; top: calc(var(--tribes-tabs-height, 28px) + 10px); left: 10px; width: 22%; height: auto; max-height: calc(100% - var(--tribes-tabs-height, 28px) - 20px); border: 1px solid #b39a70; border-radius: 8px; background: rgba(250, 238, 209, .96); gap: 6px; padding: 6px; }
#game.tribesGame #newTiles .newTile { width: 55%; flex: 0 0 55%; }
#game.tribesGame #newTiles.threeTiles { align-content: space-around; }
#game.tribesGame #newTiles.compact { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; justify-items: center; overflow: hidden; }
#game.tribesGame #newTiles.compact .newTile { width: 100%; min-width: 0; }
#game.tribesGame #newTiles .newTile svg { display: block; width: 100%; height: auto; }
#game.tribesGame .playerData { box-sizing: border-box; border-width: 1px; border-radius: 9px; overflow: hidden; margin-bottom: 6px; background: rgba(250, 241, 215, .92); box-shadow: 0 2px 8px #241b1626; }
#game.tribesGame .playerData .player { position: static; }
@media (max-width: 700px) {
    #game.tribesGame { grid-template-columns: minmax(0, 1fr); }
    #game.tribesGame .territoryArea { order: -1; }
}
#game.tribesGame.tribesNarrow { grid-template-columns: minmax(0, 1fr); }
#game.tribesNarrow .territoryArea { order: -1; }
.tribesOtherPlayers { display: none; }
#game.tribesTablet .tribesOtherPlayers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 4px; margin-top: 4px; }
#game.tribesTablet .tribesOtherPlayers .tribesPlayerCard { container-type: inline-size; min-width: 0; margin: 0; }

    #game .board_Tribes { top: 0; left: 0; background: none; padding: 0px; height: auto; width: 100%; z-index: 2; }
#logo { position: absolute; top: 0%; right: 0; height: auto; width: 10%; }
#backgroundBoard { position: relative; top: 11%; right: 0; height: auto; width: 100%; z-index: 0; }
#signature { z-index: 2; }

/*.BasicDesc { font-size: clamp(0.9rem, 1.3vw, 1.5rem); }*/
/*player data*/
#game .playerData .player { display: inline-block; margin-left: .5em; font-size: clamp(0.9rem, 1.3vw, 1.5rem); z-index: 3; position: absolute; top: 80%; right: 0; }

#game .playerData .points { display: inline-block; margin-left: .5em; font-size: clamp(0.9rem, 1.3vw, 1.5rem); }

#game .playerDataBasic {padding-bottom: 0; }
#game .playerDataDetail {padding: 0; }
.playerData .item img { height: 1.2em; }
.playerData .item .itemValue { vertical-align: top; }



#playerData hr { display: none !important; }

.colour0 { border-color: #c1be9f !important; background-color: #dedbb6; color: black !important; }
/*light grey*/

.colour1 { border-color: #757574 !important; background-color: #75758a; color: white !important; }
/*dark grey*/

.colour2 { border-color: #773420 !important; background-color: #b34f30; color: white !important; }
/*red*/

.colour3 { border-color: #181b1c !important; background-color: #40474a; color: white !important; }
/*black*/



.infoRow { margin-top: 0.1em;}

.infoRow1 { float: right; }



/*#region Player info */
.blinking { animation: blinker 1.2s linear infinite; }

.playerData { float: left; width: 100%; border: solid; font-size: clamp(0.9rem, 1.3vw, 1.5rem); }

.used { opacity: 0.1; } /*Darstellung des benutzten Pfeils*/

.startingPlayerMarker { width: 30px; margin-left: 5px; }

@keyframes blinker {
    50% { background-color: orange; }
}
/*#endregion*/

/*Bereich mit den Daten des Spieler mit dem Rahmen darum*/
.tileInfo { display: inline-block; border: 0.1em solid; padding: 1em; margin-left: 1rem; }

/*Texte zu den Symbolen*/
.infoValue { display: inline; margin-right: 0.1rem; font-weight: normal; font-size: clamp(0.9rem, 1.3vw, 1.5rem); }
.goatsValue {  margin-left: 1rem; }
.horsesValue { margin-left: 1rem; }
.wheatValue { margin-left: 1rem; }
.goldValue { margin-left: 1rem; }
.incenseValue { margin-left: 1rem; }
.exhaustedValue { display: inline; margin-right: 1px; margin-left: 1rem; }
.shells { margin-left: 1rem; }
.members { margin-left: 1rem; }

/*Symbole*/

/*Bilder Bährenzähne etc.*/
.infoImage { height: 1rem; width: auto; margin-right: 20px; margin-top: 0}
.bearTeeth { height: auto; width: 5%; margin-left: 1rem; }
.member { height: auto; width: 3%; }
.shell { height: auto; width: 3%;  }
.arrow { height: auto; width: 3%; margin-left: 1rem; }
.bearTooth { height: auto; width: 2%; margin-right: 20px; }

/*Bilder der Landschaften in der Spielerinfo*/
.tileInfoImage { height: 3rem; width: auto; }

/* Achievement border added by JS to indicate availability */
.achievementSVG .achievement-border { fill: none !important; stroke-width: 8 !important; stroke-linejoin: round !important; stroke-opacity: 1 !important; vector-effect: non-scaling-stroke !important; pointer-events: none !important; }

    .achievementSVG .achievement-border.possible { stroke: #27ae60 !important; /* green */ }

    .achievementSVG .achievement-border.joker { stroke: #c0392b !important; /* red */ }

/* Make borders visually distinct when overlays are active */
.achievementSVG .achievement-border { filter: drop-shadow(0 0 2px rgba(0,0,0,0.6)); }
/*#endregion*/

/* Wrap player information within the narrower game column. */
#game .rightSection .infoRow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
#game .rightSection .tileInfo { display: flex; flex-wrap: wrap; align-items: center; padding: 4px; margin-left: 0; }
#game .rightSection .infoValue, #game .rightSection .exhaustedValue { font-size: 1rem; margin-left: 0; }
#game .rightSection .bearTooth, #game .rightSection .member,
#game .rightSection .shell, #game .rightSection .arrow { width: auto; height: 1.5rem; margin: 0 4px 0 0; }
#game .rightSection .tileInfoImage { height: 2rem; }

/* Player colors remain visible without tinting the readable parchment surface. */
.tribesColorSwatch { display: inline-block; width: 22px; height: 22px; border: 1px solid #846e50; border-radius: 4px; vertical-align: middle; }
#game.tribesGame .tribesPlayerCard {
    float: none;
    border: 1px solid #ac9470;
    border-left: 7px solid var(--tribes-player-color);
    border-radius: 10px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #fff6e4f5, #ebddbbf5);
    color: #35291e;
    font-size: 1rem;
}
#game.tribesGame .tribesPlayerCard .symbol { display: none !important; }
#game.tribesGame .tribesPlayerCard .playerDataBasic { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px 9px; align-items: center; border-bottom: 1px solid #ad906e40; }
#game.tribesGame .tribesPlayerCard .playerInfoLogin { font-size: 1.05rem; font-weight: 650; color: #35291e; }
#game.tribesGame .tribesPlayerCard .tribesPlayerFigure { width: auto; height: 23px; margin-right: 3px; object-fit: contain; vertical-align: middle; }
#game.tribesGame .tribesPlayerCard .playerDataDetail { padding: 0; }
#game.tribesGame .tribesPlayerDetails { padding: 5px 9px 6px; }
#game.tribesGame .tribesPlayerStats { display: flex; gap: 8px; align-items: center; margin-left: auto; }
#game.tribesGame .tribesStat { display: flex; align-items: center; gap: 4px; min-width: 0; }
#game.tribesGame .tribesStat img { width: auto; height: 21px; max-width: 26px; object-fit: contain; }
#game.tribesGame .tribesPlayerCard .infoValue { width: auto; height: auto; margin: 0; font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
#game.tribesGame .tribesArrow img { width: 30px; }
#game.tribesGame .tribesResources { display: grid; grid-template-columns: max-content repeat(6, minmax(0, 1fr)); gap: 2px 4px; align-items: center; }
#game.tribesGame .tribesResource { display: flex; justify-content: center; align-items: center; gap: 3px; padding: 1px; border-radius: 4px; background: #fff9e873; }
#game.tribesGame .tribesResource img { width: 23px; height: 26px; object-fit: contain; }
#game.tribesGame .tribesResourceLabel { font-size: .75rem; color: #65513a; padding-right: 4px; }
#game.tribesGame .tribesSettledCount { text-align: center; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
#game.tribesGame .tribesResource .infoValue { font-size: .85rem; }
#game.tribesGame .tribesPlayerCard .startingPlayerMarker { width: 11px; height: 11px; margin-left: 2px; object-fit: contain; }
@container (max-width: 370px) {
    #game.tribesGame .tribesPlayerCard .playerDataBasic { padding: 4px 6px; gap: 3px; }
    #game.tribesGame .tribesPlayerCard .playerInfoLogin { font-size: .9rem; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #game.tribesGame .tribesPlayerCard .tribesPlayerFigure { height: 20px; margin-right: 1px; }
    #game.tribesGame .tribesPlayerStats { gap: 6px; }
    #game.tribesGame .tribesStat { gap: 2px; }
    #game.tribesGame .tribesStat img { height: 18px; max-width: 22px; }
    #game.tribesGame .tribesArrow img { width: 22px; }
    #game.tribesGame .tribesPlayerCard .infoValue { font-size: .78rem; }
    #game.tribesGame .tribesPlayerDetails { padding: 3px 6px 4px; }
    #game.tribesGame .tribesResources { gap: 1px 2px; }
    #game.tribesGame .tribesResource { gap: 1px; }
    #game.tribesGame .tribesResource img { width: 18px; height: 21px; }
    #game.tribesGame .tribesResourceLabel, #game.tribesGame .tribesSettledCount { font-size: .68rem; }
}
@container (max-width: 260px) {
    #game.tribesGame .tribesResource { flex-direction: column; gap: 0; }
    #game.tribesGame .tribesResource img { width: 21px; height: 24px; flex-shrink: 0; }
    #game.tribesGame .tribesResourceLabel:first-child { align-self: end; padding-bottom: 2px; }
}
#game .newTileOverlay.active, #game .newTileOverlay.selected { fill: transparent; fill-opacity: 0; opacity: 1; stroke: #e6c075; stroke-opacity: 1; stroke-width: 4; }
#game #backgroundBoard { clip-path: inset(0 17% 0 1%); }
#game #mainBoard { width: 121.9512195%; left: -1.2195122%; }
#game #signature { left: 70%; }
#game .tribesEventStack { position: absolute; container-type: inline-size; left: 78.6%; width: 4%; aspect-ratio: 1; z-index: 3; }
#game .tribesEventStack0 { top: 69%; }
#game .tribesEventStack1 { top: 34%; }
#game .tribesEventStack2 { top: 1%; }
#game .exEvent { left: 76%; width: 2.3%; }
#game .tribesEventArtwork { width: 100%; height: 100%; object-fit: contain; }
#game .tribesEventCount { position: absolute; inset: 0; display: grid; place-items: center; color: #fff8dd; font-size: clamp(6px, 40cqw, 16px); font-weight: 800; text-shadow: 0 1px 2px #23170d; pointer-events: none; }
#game .tribesEventEye { position: absolute; top: -7cqw; right: -7cqw; width: clamp(6px, 45cqw, 18px); height: clamp(6px, 45cqw, 18px); padding: 0; border: 0; background: transparent; border-radius: 50%; }
#game .tribesEventEye img { width: 100%; height: 100%; object-fit: contain; }
.tribesEventPopover { width: min(300px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }
.tribesEventList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-height: calc(100dvh - 130px); overflow-y: auto; }
.tribesEventEntry { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; font-size: .85rem; }
.tribesEventEntry img { width: 90px; height: 90px; object-fit: contain; }
.tribesEventEntryArtwork { position: relative; width: 90px; height: 90px; }
.tribesEventDetails { position: absolute; right: -5px; top: -3px; width: 23px; height: 23px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.tribesEventDetails img { width: 100%; height: 100%; }
.tribesEventDetailPopover { z-index: 1080; }
.tribesEventDetailPopover .popover-body { text-align: left; }
@media (min-width: 650px) {
    .tribesEventPopover { width: min(540px, calc(100vw - 24px)); }
    .tribesEventList { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tribesPointsInfo { display: inline-grid; place-items: center; flex-shrink: 0; width: 18px; height: 18px; padding: 0; border: 1px solid #806243; border-radius: 50%; background: #fff4d8; color: #584027; font: bold 12px Georgia, serif; cursor: pointer; }
.tribesPointsInfo:focus-visible { outline: 2px solid #966725; outline-offset: 2px; }
.tribesPointsBreakdown > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 7px 0; text-align: left; }
.tribesPointsBreakdown strong { font-variant-numeric: tabular-nums; }
.tribesPointsBreakdown .tribesPointsTotal { border-top: 1px solid #b79867; padding-top: 8px; font-weight: bold; }
.tribesPointsBreakdown p { margin: 12px 0 0; text-align: left; font-size: .8rem; }


.tribesExplorationConfirmation .modalText { white-space: pre-line; }