.speicherstadt2-game #content,
.speicherstadt2-game #gameContainer,
.speicherstadt2-game #game,
.speicherstadt2-game #board {
    background: #293f46;
    color: #28251e;
}

#Speicherstadt2 {
    --sp-board-art-width: 1650;
    --sp-board-min-width: 610px;
    --sp-berths: 6;
    --sp-paper: #f9f1dd;
    --sp-ink: #28251e;
    --sp-line: #c6b58c;
    width: 100%;
    min-width: 0;
    padding: 10px;
    color: var(--sp-ink);
}
#Speicherstadt2.sp-board-two {
    --sp-board-art-width: 940;
    --sp-board-min-width: 460px;
    --sp-berths: 3;
}
#Speicherstadt2.sp-board-three {
    --sp-board-art-width: 1204;
    --sp-board-min-width: 510px;
    --sp-berths: 4;
}
#Speicherstadt2.sp-board-four {
    --sp-board-art-width: 1468;
    --sp-board-min-width: 560px;
    --sp-berths: 5;
}
#Speicherstadt2.sp-board-five {
    --sp-board-art-width: 1748;
}

.speicherstadt2-game #game { padding: 0; }

.sp-board-frame {
    position: relative;
    width: 100%;
    max-width: var(--sp-board-max-width);
    margin-inline: auto;
    background: #17536a;
    border: 1px solid #57452e;
    border-radius: 5px;
}

.sp-tutorial-link {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
}

@media (max-width: 700px) {
    .sp-tutorial-link {
        position: static;
        margin: 4px 4px 4px auto;
    }
}

.sp-board-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

.sp-board-stage {
    position: relative;
    min-width: var(--sp-board-min-width);
    container-type: inline-size;
}

.sp-harbor {
    --sp-board-px: calc(100cqw / var(--sp-board-art-width));
    --sp-berth-width: 80%;
    position: relative;
    aspect-ratio: var(--sp-board-art-width) / 871;
    background: url('../images/board.webp') center / 100% 100% no-repeat;
}
.sp-board-two .sp-harbor { background-image: url('../images/board-2.webp'); }
.sp-board-three .sp-harbor { background-image: url('../images/board-3.webp'); }
.sp-board-four .sp-harbor { background-image: url('../images/board-4.webp'); }
.sp-board-five .sp-harbor {
    background-size: calc(1650 * var(--sp-board-px)) 100%;
    background-position: left;
}
/* Extend only the facade beyond the last bidding track. */
.sp-board-five .sp-harbor::before {
    content: "";
    position: absolute;
    inset: 0 0 0 calc(1524 * var(--sp-board-px));
    background: url('../images/board.webp') right / calc(1650 * 224 / 126 * var(--sp-board-px)) 100% no-repeat;
    pointer-events: none;
}

.sp-water {
    position: absolute;
    /* Coordinates refer to the 1650 x 871 retouched artwork. */
    inset: calc(551 / 871 * 100%) calc(34 * var(--sp-board-px)) 0;
    right: calc((var(--sp-board-art-width) - 34 - 1582 / 6 * var(--sp-berths)) * var(--sp-board-px));
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(var(--sp-berths), minmax(0, 1fr));
}

.sp-offer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

/* Correct the small spacing differences between the six painted berths. */
.sp-water .sp-offer { left: calc(var(--sp-berth-offset, 0) * var(--sp-board-px)); }
.sp-water .sp-offer:nth-child(1) { --sp-bid-offset: 4; }
.sp-water .sp-offer:nth-child(2) { --sp-berth-offset: 9; --sp-bid-offset: -3; }
.sp-water .sp-offer:nth-child(3) { --sp-berth-offset: 1; --sp-bid-offset: 1; }
.sp-water .sp-offer:nth-child(4) { --sp-berth-offset: 3; --sp-bid-offset: 1; }
.sp-water .sp-offer:nth-child(5) { --sp-berth-offset: -2; --sp-bid-offset: 7; }
.sp-water .sp-offer:nth-child(6) { --sp-berth-offset: 1; --sp-bid-offset: 1; }

.sp-water .sp-workers {
    position: absolute;
    left: calc(50% + var(--sp-bid-offset, 0) * var(--sp-board-px));
    bottom: calc(100% - 8 * var(--sp-board-px));
    transform: translateX(-50%);
    width: calc(68 * var(--sp-board-px));
    height: calc(68 * var(--sp-board-px));
}

.sp-water .sp-worker {
    position: absolute;
    bottom: calc(var(--sp-bid-rise, 0) * var(--sp-board-px));
    left: 0;
}

.sp-water .sp-worker:nth-child(2) { --sp-bid-rise: 53; }
.sp-water .sp-worker:nth-child(3) { --sp-bid-rise: 113; }
.sp-water .sp-worker:nth-child(4) { --sp-bid-rise: 167; }
.sp-water .sp-worker:nth-child(5) { --sp-bid-rise: 214; }
.sp-water .sp-worker:nth-child(6) { --sp-bid-rise: 260; }
.sp-water .sp-worker:nth-child(7) { --sp-bid-rise: 306; }
.sp-water .sp-worker:nth-child(8) { --sp-bid-rise: 350; }

.sp-water .sp-worker-piece, .sp-upper .sp-worker-piece,
.sp-worker-destination, .sp-vacant-worker {
    width: calc(68 * var(--sp-board-px));
    height: calc(68 * var(--sp-board-px));
}
.sp-worker-destination, .sp-vacant-worker { visibility: hidden; }
.sp-water .sp-worker-destination.sp-active {
    visibility: visible;
    outline: none;
    background: transparent;
}
.sp-worker-destination.sp-active::after {
    content: "";
    position: absolute;
    inset: 4%;
    border: 3px solid #ffdf58;
    border-radius: 3px;
    box-shadow: 0 0 0 2px #152419, inset 0 0 0 1px #152419;
    pointer-events: none;
}
.sp-worker-piece.sp-bid-piece[data-color="3"] { filter: none; }
.sp-bid-piece[data-color="4"] { padding: 0.4cqw; }

.sp-workers {
    display: flex;
    justify-content: center;
    align-content: center;
}

.sp-worker-piece {
    display: block;
    width: 28px;
    height: 29px;
    object-fit: contain;
    flex: none;
}

.sp-worker-piece[data-color="2"] { filter: hue-rotate(320deg); }
.sp-worker-piece[data-color="3"] { filter: hue-rotate(160deg) saturate(.72); }

.sp-button {
    border: 2px solid transparent;
    border-radius: 4px;
    background: transparent;
    padding: 3px;
    min-width: 40px;
    min-height: 40px;
    color: inherit;
}

.sp-button:disabled { opacity: 1; }
.sp-button img { max-width: 100%; object-fit: contain; }
.sp-worker.sp-button { min-width: 0; min-height: 0; padding: 0; border: 0; }
.sp-berth { position: relative; width: var(--sp-berth-width, 80%); }
.sp-offer-card { width: 100%; display: block; padding: 0; }
#Speicherstadt2 :is(.sp-offer-card, .sp-worker):hover { opacity: 1; }
.sp-offer-card img { display: block; width: 100%; height: auto; }
.sp-purchase-info {
    position: absolute;
    left: calc(100% + 5px);
    bottom: calc(100% + 8px);
    width: 132px;
    padding: 6px 8px;
    border: 1px solid #795f3c;
    border-radius: 0;
    background: #ead39b;
    color: #28251e;
    font-size: 14px;
    line-height: 1.2;
    z-index: 2;
}
.sp-water .sp-offer:is(:nth-child(n+5), :last-child) .sp-purchase-info {
    left: auto;
    right: calc(100% + 5px);
}
.sp-upper .sp-purchase-info { top: 0; bottom: auto; }
.sp-purchase-info dl { margin: 0; }
.sp-purchase-info dt { font-weight: normal; }
.sp-purchase-info dd { display: flex; align-items: center; gap: 4px; margin: 0 0 3px; }
.sp-purchase-info img { width: 22px; height: 22px; object-fit: contain; }
.sp-unaffordable { color: #a21f19; }
.sp-affordable { color: #176b20; }
.sp-purchase-info strong { font-size: 16px; }
.sp-fish-payment { font-size: 12px; border: 1px solid #795f3c; background: #fff8e7; }
.sp-return-worker::after {
    content: "↩";
    position: absolute;
    right: calc(100% + 4px);
    top: 0;
    color: #8b241b;
    background: #fff3d3;
    border: 1px solid #795f3c;
    border-radius: 3px;
    padding: 0 3px;
    font-family: Arial, sans-serif;
    font-size: 24px;
    line-height: 1.2;
    pointer-events: none;
}
.sp-water .sp-offer:is(:nth-child(n+5), :last-child) .sp-return-worker::after {
    right: auto;
    left: calc(100% + 4px);
}
.sp-current-offer .sp-offer-card { box-shadow: 0 0 0 3px #c72a20; }
.sp-current-offer .sp-offer-card.sp-active { outline: none; }
.sp-return-worker.sp-active { outline: 3px solid #c72a20; outline-offset: -3px; }

.sp-inspect {
    position: absolute;
    right: 0;
    top: 0;
    display: grid;
    place-items: start end;
    min-width: 28px;
    min-height: 28px;
    padding: 1px;
    border: 0;
    cursor: pointer;
}

.sp-inspect span {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border: 1px solid #a58d62;
    border-radius: 50%;
    background: var(--sp-paper);
    color: #56472f;
    font: bold 11px / 1 Georgia, serif;
}

.sp-upper {
    --sp-upper-card-width: calc((1650 - 2 * 34) * 0.8 / 6 * var(--sp-board-px));
    position: absolute;
    inset: max(16%, 82px) 0 auto;
    z-index: 0;
}

.sp-upper .sp-offer {
    position: absolute;
    width: var(--sp-upper-card-width);
    left: calc((297 + var(--sp-upper-offset, 0)) * var(--sp-board-px));
    transform: translateX(-50%);
}

.sp-upper .sp-offer:nth-child(2) { --sp-upper-offset: 264; }
.sp-upper .sp-offer:nth-child(3) { --sp-upper-offset: 528; }
.sp-upper .sp-offer:nth-child(4) { --sp-upper-offset: 792; }
.sp-upper .sp-offer:nth-child(5) { --sp-upper-offset: 1056; }
.sp-board-five .sp-upper .sp-offer { left: calc(var(--sp-upper-center) * var(--sp-board-px)); }
.sp-board-five .sp-upper .sp-offer:nth-child(1) { --sp-upper-center: 302.67; }
.sp-board-five .sp-upper .sp-offer:nth-child(2) { --sp-upper-center: 565.33; }
.sp-board-five .sp-upper .sp-offer:nth-child(3) { --sp-upper-center: 828; }
.sp-board-five .sp-upper .sp-offer:nth-child(4) { --sp-upper-center: 1093.17; }
.sp-board-five .sp-upper .sp-offer:nth-child(5) { --sp-upper-center: 1355.83; }
.sp-board-five .sp-upper .sp-offer:nth-child(6) { --sp-upper-center: 1637; }
.sp-upper .sp-berth { width: 100%; }
.sp-upper .sp-current-offer { z-index: 1; }
.sp-upper .sp-workers {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(68 * var(--sp-board-px));
    height: calc(68 * var(--sp-board-px));
    z-index: 1;
    pointer-events: none;
}
.sp-upper .sp-workers .sp-active { pointer-events: auto; }

.sp-goods, .sp-stock, .sp-player-goods, .sp-good-area {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.sp-goods:not(:empty) {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.sp-goods > .sp-good {
    position: absolute;
    top: 82%;
    width: 22%;
    height: auto;
    transform: translate(-50%, -50%);
}

.sp-good { width: 24px; height: 24px; object-fit: contain; }
.sp-board-toolbar {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    pointer-events: none;
}

.sp-summary button, .sp-fires button { pointer-events: auto; }
.sp-fire-alert:empty { display: none; }
.sp-fire-alert {
    display: grid;
    justify-items: start;
    gap: 4px;
    width: min(300px, calc(100% - 16px));
    margin: 6px 8px;
    padding: 8px 10px;
    border: 2px solid #9c3228;
    border-radius: 6px;
    background: #fff4d6;
    color: #49150f;
    box-shadow: 0 2px 6px #0004;
}
.sp-fire-alert .sp-button { pointer-events: auto; background: #9c3228; color: white; }

.sp-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 12px;
    font-size: clamp(12px, 1.32cqw, 16px);
    line-height: 1.1;
}

.sp-fires {
    display: flex;
    align-items: stretch;
    width: max-content;
    margin: 0 8px 4px;
    background: #d8c395;
    border: 1px solid #795f3c;
    font-size: clamp(11px, 1.2cqw, 14px);
    line-height: 1.2;
}

.sp-fire-title {
    display: grid;
    place-items: center;
    padding: 2px 8px;
    background: #9c3228;
    color: white;
    text-align: center;
    font-weight: bold;
}

.sp-fire-title.sp-button { min-width: 0; min-height: 0; border: 0; border-radius: 0; cursor: pointer; }
.sp-fire-card.sp-button {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 42px;
    min-width: 0;
    min-height: 20px;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.sp-fire-card:hover,
.sp-fire-card:focus-visible { background: #f5e6bc; }

@container (max-width: 800px) {
    .sp-stock-label { display: none; }
}

.sp-status {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    gap: clamp(8px, 1.5cqw, 20px);
    margin: 0;
    margin-right: auto;
}
.sp-round-status { margin: 0; padding: 4px 7px; color: #172f35; background: #fff7e5ed; border-left: 3px solid #315760; box-shadow: 0 1px 3px #263e4033; }
.sp-round-status > div { display: flex; align-items: baseline; gap: 7px; }
.sp-round-status dt { font-weight: normal; }
.sp-round-status dd { margin: 0; font-weight: bold; }
.sp-supply-tray { display: flex; align-items: center; gap: clamp(10px, 2cqw, 26px); padding: 4px 10px; border: 1px solid #b59b68; border-radius: 4px; background: linear-gradient(#fff5daef, #e6d3a7f5); box-shadow: 0 2px 5px #263e4033, inset 0 1px #fffaf0; }
.sp-supply-tray .sp-stock { border-left: 1px solid #bda878; padding-left: 10px; }

.sp-status > div { text-align: center; }
.sp-status > div:first-child,
.sp-status > div:nth-child(2):nth-last-child(4) {
    grid-column: 1;
    display: flex;
    gap: 6px;
    text-align: left;
}

.sp-status > div:nth-last-child(-n+3) { grid-row: 1 / span 2; }
.sp-status > div:nth-last-child(3) { grid-column: 2; }
.sp-status > div:nth-last-child(2) { grid-column: 3; }
.sp-status > div:last-child { grid-column: 4; }
.sp-status > .sp-supply-count { display: flex; align-items: center; gap: 4px; }
.sp-supply-count dt { display: flex; align-items: center; gap: 2px; order: 2; }
.sp-supply-count dd { font-size: 1.1em; min-width: 1.3em; text-align: right; }
.sp-supply-symbol { width: clamp(22px, 2.7cqw, 34px); height: clamp(26px, 3cqw, 38px); stroke: #725c3c; stroke-width: 1; stroke-linejoin: round; }
.sp-collection-button.sp-button { min-width: 28px; min-height: 28px; padding: 0; cursor: pointer; }
.sp-collection-button .sp-supply-symbol { display: block; width: 24px; height: 26px; }
#sp-card-collection .modal-content { background: #fff8e7; color: #28251e; }
#sp-card-collection .modal-header { padding: 3px 8px; }
#sp-card-collection .modal-title { font-size: 1rem; line-height: 1.2; }
#sp-card-collection .btn-close { margin: 0 0 0 auto; padding: 5px; flex-shrink: 0; }
.sp-collection-gallery { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 8px; }
.sp-collection-gallery .sp-card-art { display: block; width: min(164px, 38vw); height: auto; }
.sp-collection-gallery figure { position: relative; margin: 0; }
.sp-collection-delivery {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 4px;
    background: #fff8e7;
}
.sp-collection-delivery .sp-good { width: 20px; height: 20px; }
.sp-season-info.sp-button {
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
    min-width: 22px;
    min-height: 20px;
    padding: 0 2px;
    border: 0;
    cursor: pointer;
}
.sp-season-heading {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 12px 0 6px;
    padding-bottom: 3px;
    border-bottom: 1px solid #d8c9a6;
    color: #705f3e;
    font: 600 12px / 1.3 Arial, sans-serif;
}
.sp-season-heading:first-child { margin-top: 0; }
.sp-summary-inspect.sp-button, .sp-actions-info.sp-button {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    min-height: 20px;
    margin-left: 2px;
    padding: 0;
    border: 0;
    vertical-align: middle;
    cursor: pointer;
}
.sp-summary-inspect > span, .sp-actions-info > span {
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border: 1px solid #795f3c;
    border-radius: 50%;
    font: bold 10px / 1 Georgia, serif;
}
.sp-summary-details p { margin: 0 0 8px; }
.sp-card-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-card-gallery figure { position: relative; width: 94px; max-width: 100%; margin: 0; }
.sp-card-gallery img { width: 100%; height: auto; }
.sp-card-count {
    position: absolute;
    right: 3px;
    bottom: 3px;
    padding: 1px 4px;
    border-radius: 3px;
    background: #fff8e8;
    color: #332618;
    font: 700 11px/1.2 Arial, sans-serif;
}
.sp-bag-details { display: grid; gap: 5px; }
.sp-bag-details > div { display: flex; align-items: center; gap: 8px; }
.sp-bag-details strong { margin-left: auto; }
.sp-status dt { font-weight: normal; }
.sp-status dd { margin: 0; font-weight: bold; }

.sp-stock { flex-wrap: nowrap; gap: 4px; gap: clamp(4px, 0.7cqw, 10px); }
.sp-stock-good { display: grid; justify-items: center; }
.sp-stock-good.sp-button { min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; }
.sp-stock-good .sp-good {
    width: 16px;
    height: 16px;
    width: clamp(16px, 2.35cqw, 30px);
    height: clamp(16px, 2.35cqw, 30px);
}

.sp-players {
    margin-top: 6px;
    display: grid;
    grid-template-columns: repeat(var(--sp-player-columns, 1), minmax(0, 1fr));
    width: 100%;
    max-width: calc(var(--sp-player-columns, 1) * 348px - 8px);
    align-items: start;
    gap: 8px;
}

.sp-player {
    position: relative;
    min-width: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    background-color: #fff9ec;
    background-image: linear-gradient(var(--owner-tint), var(--owner-tint));
    border: 1px solid var(--sp-line);
    border-top: 4px solid var(--owner);
    border-radius: 4px;
    padding: 6px 9px;
}

.sp-player header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    overflow-wrap: anywhere;
}

.sp-player-totals {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 6px;
    font-size: 17px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.sp-player header > .sp-worker-supply { width: 23px; height: 28px; flex: none; }
.sp-player-login { min-width: 0; }
.sp-player-totals > .sp-player-token { width: 30px; height: 30px; }
.sp-worker-count { display: inline-flex; align-items: center; gap: 3px; }
.sp-worker-count .sp-worker-piece { width: 20px; height: 24px; }
.sp-player-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sp-player-actions > *, .sp-action-card.sp-button {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    min-height: 28px;
    padding: 2px;
    border: 1px solid #a89068;
    border-radius: 3px;
    background: #fff8e8;
    color: #62462f;
}
.sp-action-symbol { font: 700 14px/1 'Segoe UI', system-ui, sans-serif; }
svg.sp-action-symbol {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.sp-fire-bonus { font-weight: bold; color: #763b20; }
.sp-player-actions > .sp-actions-info { margin-inline-start: auto; background: transparent; border: 0; }
.sp-action-help, .sp-action-help dd:last-child { margin-bottom: 0; }
.sp-action-help dt { display: flex; align-items: center; gap: 5px; }
.sp-action-help dt > :first-child { color: #62462f; }
.sp-action-uses { display: inline-flex; align-items: center; gap: 3px; }
.sp-break-cup {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #75452e;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sp-break-cup path:first-child { fill: #c88a59; }
.sp-gray-worker { width: 22px; height: 22px; object-fit: contain; }
.sp-action-use.sp-button {
    display: grid;
    place-items: center;
    min-width: 28px;
    min-height: 28px;
    padding: 1px;
}

.sp-trades { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.sp-trade.sp-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 3px 6px;
    border: 1px solid var(--sp-line);
    background: #f2e4bf;
    cursor: pointer;
}
.sp-trade img { width: 24px; height: 24px; object-fit: contain; }
.sp-trade .sp-player-token { width: 30px; height: 30px; }
.sp-trade .sp-player-token strong { min-width: 15px; font-size: 11px; line-height: 14px; }
.sp-offices.sp-button {
    display: block;
    margin: 3px 0;
    padding: 3px 6px;
    border: 1px solid var(--sp-line);
    background: #eee2c3;
    cursor: pointer;
    font-size: 13px;
}
.sp-office-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-office-summary .sp-player-token { width: 30px; height: 30px; }
.sp-office-summary .sp-player-token strong { font-size: 11px; min-width: 15px; line-height: 14px; }
.sp-office-progress { display: flex; gap: 3px; }
.sp-office-progress > span {
    padding: 2px 4px;
    border: 1px solid #c6b58c;
    border-radius: 2px;
    background: #fff8e7;
    font-size: 11px;
}
.sp-office-progress > .sp-office-owned {
    background: #2d5746;
    border-color: #2d5746;
    color: white;
    font-weight: bold;
}
.sp-round-economy.sp-button {
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: inherit;
    cursor: pointer;
}
.sp-round-economy img { width: 26px; height: 26px; object-fit: contain; clip-path: circle(45%); }
.sp-expected-income { white-space: nowrap; font-size: inherit; }
.sp-purchase-marker {
    display: grid;
    place-items: center;
    width: 13px;
    height: 18px;
    margin-right: 0;
    border: 1px solid #795f3c;
    border-radius: 2px;
    background: #fff8e7;
    box-shadow: 2px 1px 0 #bbaa83;
    color: #176b20;
    font-size: 14px;
    font-weight: bold;
}
.sp-fire-strength { display: inline-flex; align-items: center; gap: 3px; }
.sp-fire-strength img { width: 32px; height: 21px; object-fit: contain; }

.sp-player-token {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
}

.sp-player-token img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sp-player-token img[src$="/coin.webp"] { clip-path: circle(45%); }

.sp-player-token strong {
    position: relative;
    min-width: 19px;
    padding: 1px 2px;
    border-radius: 9px;
    background: #ffe277;
    color: #28251e;
    text-align: center;
    font-size: 13px;
    line-height: 17px;
}

.sp-player-token img[src$="/coin.webp"] + strong { background: #e2e5e7; }
.sp-owned, .sp-contracts { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-owned:not(:empty), .sp-contracts:not(:empty) { margin-top: 6px; }
.sp-owned-card { position: relative; width: 66px; }
.sp-owned-card > img { width: 100%; height: auto; }
.sp-use-card { position: absolute; bottom: 0; right: 0; background: var(--sp-paper); display: none; }
.sp-use-card.sp-active { display: block; }
.sp-contracts { display: grid; gap: 4px; }
.sp-contracts-title { font-size: 12px; font-weight: bold; }
.sp-contract-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    border: 1px solid var(--sp-line);
    border-radius: 3px;
    background: #eee2c3;
}
.sp-contract-help.sp-button {
    min-width: 28px;
    min-height: 32px;
    padding: 0;
    font-size: 12px;
    cursor: pointer;
}
.sp-contract.sp-button {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 34px;
    padding: 1px;
}
.sp-contract-goods { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-contract-slot {
    position: relative;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #9c8050;
    background: #fff8e7;
}
.sp-contract-slot.sp-missing .sp-good { opacity: .35; }
.sp-contract-slot > b {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 12px;
    line-height: 14px;
    color: #176b20;
    background: #fff8e7;
    border-radius: 50%;
}
.sp-contract .sp-player-token { width: 28px; height: 28px; }
.sp-contract .sp-player-token strong { min-width: 14px; font-size: 11px; line-height: 14px; }
.sp-contract-progress { min-width: 24px; font-size: 12px; font-weight: bold; }
.sp-contract-complete { border-color: #44755a; background: #e2ead6; }
.sp-contract-complete .sp-contract-progress { color: #176b20; }
.sp-good-area { padding: 3px 5px; border: 1px solid var(--sp-line); border-radius: 3px; }
.sp-warehouse.sp-good-area {
    display: block;
    padding: 3px 5px 5px;
    border-color: #9c8050;
    background: repeating-linear-gradient(0deg, #d1b67e 0 16px, #c5a96e 16px 17px);
    box-shadow: inset 0 0 0 1px #ead6a9;
}
.sp-warehouse-help.sp-button {
    display: block;
    min-height: 28px;
    padding: 0 3px;
    border: 0;
    font-size: 12px;
    cursor: pointer;
}
.sp-warehouse-slots { display: grid; grid-template-columns: repeat(4, 34px); gap: 4px; }
.sp-warehouse-slot {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #907849;
    background: rgb(255 247 216 / 55%);
    box-shadow: inset 0 1px 2px rgb(77 54 19 / 20%);
}
.sp-warehouse-slot .sp-source { min-width: 32px; min-height: 32px; padding: 2px; }
.sp-player-goods { margin-top: 5px; }
.sp-card-destination { position: absolute; right: 10px; top: 35px; width: 66px; height: 99px; pointer-events: none; visibility: hidden; }

.sp-controls {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background: #e1cda2;
    border-top: 1px solid #aa956a;
}

.sp-controls:empty { display: none; }
.sp-controls .sp-button { background: var(--sp-paper); }
.sp-active { outline: 2px dashed #19627b; outline-offset: 1px; cursor: pointer; }
.sp-water .sp-active { outline-color: #fff7d5; }
.sp-offer:not(.sp-current-offer) .sp-offer-card.sp-active {
    position: relative;
    outline: none;
}
.sp-offer:not(.sp-current-offer) .sp-offer-card.sp-active::after {
    --sp-corner-size: clamp(12px, calc(25 * var(--sp-board-px)), 26px);
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #102c36;
    box-shadow: inset 0 0 0 4px #e00024;
    mask: linear-gradient(#000 0 0) top left, linear-gradient(#000 0 0) top right,
        linear-gradient(#000 0 0) bottom left, linear-gradient(#000 0 0) bottom right;
    mask-size: var(--sp-corner-size) var(--sp-corner-size);
    mask-repeat: no-repeat;
    pointer-events: none;
}
.sp-offer:not(.sp-current-offer) .sp-offer-card.sp-active:focus-visible::after {
    box-shadow: inset 0 0 0 4px white;
}
.sp-selected { outline: 3px solid #a35b00; box-shadow: 0 0 0 3px white; }
.sp-button:focus-visible, .sp-board-scroll:focus-visible { outline: 3px solid #151713; outline-offset: -2px; }
.sp-upper .sp-worker { position: relative; }
.sp-offer .sp-worker:is(.sp-snitch-target, .sp-selected) {
    outline: none;
    box-shadow: none;
}
.sp-offer .sp-worker:is(.sp-snitch-target, .sp-selected)::after {
    content: "";
    position: absolute;
    /* Bid slots are closer together than the full worker sprites. */
    inset: 20% 8%;
    border: clamp(2px, calc(4 * var(--sp-board-px)), 4px) solid #fff8df;
    border-radius: 4px;
    box-shadow: inset 0 0 0 2px #152419;
    pointer-events: none;
}
.sp-offer .sp-worker:is(.sp-snitch-target:focus-visible, .sp-selected)::after { border-color: #ffce39; }
.sp-popover {
    --sp-popover-limit: 440px;
    --bs-popover-bg: #fff8e7;
    --bs-popover-border-color: #b49a67;
    --bs-popover-header-bg: #254956;
    --bs-popover-header-color: #fff8e7;
    --bs-popover-body-color: #28251e;
    width: max-content;
    max-width: min(var(--sp-popover-limit), calc(100vw - 20px));
    overflow-wrap: anywhere;
    box-shadow: 0 6px 20px rgb(34 30 21 / 24%);
}

.sp-popover .popover-header {
    padding: 8px 12px;
    font: bold 1.05rem Georgia, serif;
}
.sp-popover.sp-card-only-popover { --sp-popover-limit: 200px; }
.sp-popover.sp-merchant-popover { --sp-popover-limit: 340px; }
.sp-merchant-gallery { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-merchant-gallery img { width: 152px; max-width: 100%; height: auto; align-self: start; }
.sp-merchant-gallery.sp-single-card img { width: 174px; }
.sp-help-card.sp-storage-card { display: block; }
.sp-contract-gallery { display: flex; flex-wrap: wrap; gap: 14px; max-height: 60vh; overflow: auto; }
.sp-contract-gallery figure { position: relative; width: 192px; max-width: 100%; margin: 0; }
.sp-contract-gallery figure > img { width: 100%; height: auto; }
.sp-contract-gallery figcaption { display: flex; gap: 5px; justify-content: center; padding-top: 6px; }
.sp-contract-status-good { position: relative; display: inline-flex; }
.sp-contract-status-good .sp-good { width: 26px; height: 26px; }
.sp-contract-status-good b { position: absolute; right: -3px; bottom: -4px; color: #185d36; background: #fff8e6; border-radius: 50%; line-height: 15px; }
.sp-contract-done { position: absolute; top: 6px; right: 6px; color: #185d36; background: #fff8e6; border: 2px solid #185d36; border-radius: 50%; width: 32px; height: 32px; text-align: center; font-size: 25px; line-height: 28px; }
.sp-help-card.sp-storage-card img { width: 150px; max-width: 100%; }
.sp-card-only-popover .sp-help-card { display: block; }
.sp-card-only-popover .sp-help-card img { width: 174px; max-width: 100%; }
.sp-season-info.sp-button { width: auto; padding: 0 2px; font-size: 11px; white-space: nowrap; }

.sp-popover .popover-body {
    max-height: min(390px, 68vh);
    overflow-y: auto;
    padding: 10px 12px;
}

.sp-help-card {
    display: grid;
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.sp-help-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.sp-help-card p {
    margin: 0;
    line-height: 1.45;
}

@media (max-width: 420px) {
    .sp-help-card { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .sp-help-card img { width: min(130px, 100%); justify-self: center; }
}
.sp-log-card { border: 0; background: transparent; padding: 0; cursor: pointer; }
.speicherstadt2-game #log .action .sp-log-card img { width: 75px; height: auto; }
.speicherstadt2-game #log .action .sp-log-coin { width: 24px; height: 24px; object-fit: contain; clip-path: circle(45%); }
.speicherstadt2-game #log .action .sp-log-points { width: 24px; height: 24px; object-fit: contain; }
.speicherstadt2-game #log .action .sp-log img.sp-good { width: 24px; height: 24px; object-fit: contain; }
.sp-log-location { outline: 4px solid #d97b00; }

.speicherstadt2-game #log .move.color0 { background: #246db0; color: #fff; }
.speicherstadt2-game #log .move.color1 { background: #e5b920; color: #111; }
.speicherstadt2-game #log .move.color2 { background: #bf3635; color: #fff; }
.speicherstadt2-game #log .move.color3 { background: #48884b; color: #fff; }
.speicherstadt2-game #log .move.color4 { background: #444; color: #fff; }

.sp-popover.sp-bag-popover { --sp-popover-limit: 250px; }

/* Keep the board and player layout; loading is a window on the board. */
.sp-loading-panel { display: none; }
.sp-is-loading .sp-water, .sp-is-loading .sp-upper { display: none; }
.sp-is-loading .sp-fires { visibility: hidden; }
:is(.sp-is-loading, .sp-is-smuggling, .sp-is-trucking) .sp-loading-panel {
    display: block;
    position: absolute;
    top: 13%;
    left: 2%;
    width: max-content;
    max-width: 96%;
    max-height: 84%;
    z-index: 3;
    padding: 10px 12px;
    overflow: auto;
    border: 1px solid #947c52;
    border-radius: 6px;
    background: linear-gradient(135deg, #f4f0e5, #e3e9e7);
    border-color: #718487;
    box-shadow: 0 4px 15px rgb(30 24 13 / 30%);
    color: #28251e;
}
.sp-loading-table { display: flex; flex-wrap: wrap; align-items: start; gap: 12px; }
.sp-loading-ship, .sp-loading-trade-wrap, .sp-loading-warehouse-wrap {
    position: relative;
    flex: none;
    width: 145px;
}
.sp-loading-ship > img { display: block; width: 100%; height: auto; }
.sp-loading-trade.sp-button, .sp-loading-warehouse.sp-button,
.sp-loading-contracts .sp-contract.sp-button, .sp-loading-use.sp-use-card {
    position: relative;
    display: block;
    width: 145px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
}
.sp-loading-trade > img, .sp-loading-warehouse > img,
.sp-loading-contracts .sp-loading-card-art, .sp-loading-use > img { display: block; width: 100%; height: auto; margin: 0; }
.sp-loading-panel .sp-source.sp-button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    min-width: 0;
    min-height: 0;
    padding: 1px;
    border: 0;
    background: transparent;
}
.sp-loading-panel .sp-source.sp-active { outline: none; }
.sp-loading-panel .sp-source.sp-selected { outline: 3px solid #a05d14; outline-offset: 1px; box-shadow: 0 0 0 3px #fff8e7; }
.sp-loading-panel .sp-good { width: 24px; height: 24px; }
.sp-ship-cube { position: absolute; transform: translate(-50%, -50%); }
.sp-ship-cube-slot { position: absolute; width: 24px; height: 24px; transform: translate(-50%, -50%); pointer-events: none; }
.sp-loading-market-wrap { position: relative; flex: none; width: 200px; }
.sp-loading-market { position: relative; display: block; width: 200px; }
.sp-loading-market > img { display: block; width: 100%; height: auto; }
.sp-loading-panel .sp-market-cube { position: absolute; top: 69%; left: 36%; transform: translate(-50%, -50%); }
.sp-market-cube-slot { position: absolute; top: 69%; left: 36%; width: 24px; height: 24px; transform: translate(-50%, -50%); pointer-events: none; }
.sp-market-hotspot.sp-button {
    position: absolute;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    pointer-events: none;
}
.sp-market-hotspot.sp-active { pointer-events: auto; }
.sp-market-goods { left: 18%; top: 13%; width: 28%; height: 26%; }
.sp-market-coins { left: 55%; top: 13%; width: 29%; height: 26%; }
.sp-market-storage { left: 30%; top: 57%; width: 13%; height: 23%; }
.sp-loading-panel .sp-market-hotspot.sp-active {
    outline: 4px dashed #006b78;
    outline-offset: 2px;
    background: rgb(255 248 231 / 12%);
    box-shadow: 0 0 0 7px #fffdf5, 0 0 0 8px #28464b;
}
.sp-loading-market-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.sp-loading-market-actions .sp-exchange-start { display: none; }
.sp-loading-market-actions .sp-exchange-visible { display: block; }
.sp-loading-market-actions > .sp-button, .sp-loading-options > .sp-button {
    min-height: 32px;
    padding: 4px 7px;
    border: 1px solid #ac976f;
    background: #fff8e7;
    font-size: 12px;
}
.sp-loading-options { display: flex; flex-wrap: wrap; gap: 5px; width: 100%; }
.sp-loading-options:empty { display: none; }
.sp-loading-panel .sp-contract.sp-active, .sp-loading-panel .sp-loading-trade.sp-active,
.sp-loading-panel .sp-loading-warehouse.sp-active, .sp-loading-panel .sp-loading-market.sp-active,
#Speicherstadt2 .sp-stock-good.sp-active {
    outline: 4px dashed #006b78;
    outline-offset: 2px;
    box-shadow: 0 0 0 7px #fffdf5, 0 0 0 8px #28464b;
}
.sp-loading-contracts, .sp-loading-specials { display: contents; }
.sp-loading-contracts .sp-contracts-title { display: none; }
.sp-loading-contracts .sp-contract-wrap { display: block; position: relative; width: 145px; padding: 0; border: 0; background: none; }
.sp-loading-contracts .sp-contract-goods { position: absolute; inset: 0; display: block; pointer-events: none; }
.sp-loading-contracts .sp-contract-slot {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    transform: translate(-50%, -50%);
    box-shadow: none;
}
.sp-loading-contracts .sp-contract-slot.sp-missing { visibility: hidden; }
.sp-loading-contracts .sp-contract-slot .sp-good { opacity: 1; filter: drop-shadow(1px 2px 1px #53442c); }
.sp-smuggler-sources { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; }
.sp-smuggler-sources > strong { flex-basis: 100%; }
.sp-smuggler-player { font-weight: 600; margin-bottom: 3px; }
.sp-smuggler-contracts.sp-loading-contracts { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-smuggler-source.sp-button { min-width: 0; min-height: 0; padding: 0; }
.sp-smuggler-source.sp-active { pointer-events: auto; }
.sp-truck-slot.sp-button { min-width: 0; min-height: 0; padding: 0; }
.sp-truck-slot.sp-active { pointer-events: auto; }
.sp-loading-contracts .sp-truck-slot.sp-active.sp-missing,
.sp-loading-contracts .sp-truck-slot.sp-truck-arrival { visibility: visible; }
.sp-truck-slot.sp-missing.sp-active:not(.sp-truck-arrival) .sp-good,
.sp-truck-slot.sp-truck-removed:not(.sp-truck-arrival) .sp-good { opacity: .35; }
.sp-loading-contracts .sp-truck-slot.sp-selected,
.sp-loading-contracts .sp-truck-slot.sp-truck-arrival {
    outline: 3px solid #006b78;
    box-shadow: 0 0 0 2px #fffdf5;
}
.sp-truck-confirm {
    position: absolute;
    bottom: 6px;
    right: 6px;
    padding: 2px 7px;
    border-radius: 10px;
    background: #17634b;
    color: white;
    font-weight: 700;
    pointer-events: none;
}
.sp-load-cube-slot { position: absolute; width: 28px; height: 28px; transform: translate(-50%, -50%); }
.sp-goods-arrival { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; visibility: visible; pointer-events: none; }
.sp-load-cube-slot[data-filled="false"] { visibility: hidden; pointer-events: none; }
.sp-storage { display: flex; align-items: start; flex-wrap: wrap; gap: 5px; }
.sp-storage-title { flex-basis: 100%; font-size: 12px; font-weight: bold; }
.sp-storage-group.sp-good-area { display: block; }
.sp-storage-group[data-area="Market"] { background: #e4d7b0; }
.sp-storage-group[data-area="Market"] .sp-warehouse-slots { grid-template-columns: 34px; }
.sp-storage-label { display: block; min-height: 28px; font-size: 12px; padding-top: 5px; }
.sp-storage-target.sp-button { width: 32px; height: 32px; min-width: 0; min-height: 0; padding: 0; }
.sp-empty-cargo { font-size: 12px; color: #705f3e; }

.sp-loading-panel .sp-inspect { z-index: 2; }

/* Shared by board cards, popovers, player areas, logs and animation copies. */
img.sp-card-art {
    outline: 1px solid #77694f;
    outline-offset: -1px;
    border-radius: 3px;
}

.sp-player-totals { gap: 3px; }
:is(.sp-player-totals, .sp-title-totals) > :not(.sp-collection-button) {
    border: 0;
    border-radius: 8px;
    padding: 1px 5px;
    min-width: 0;
    min-height: 28px;
    background: rgb(255 255 255 / 32%);
}
.sp-player-totals > .sp-collection-button { border: 0; }
:is(.sp-player-totals, .sp-title-totals) > button { cursor: pointer; }
:is(.sp-player-totals, .sp-title-totals) > button:hover { background-color: rgb(255 255 255 / 64%); }
.sp-player-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.sp-player-section { min-width: 0; border: 1px solid #c9b58c; border-radius: 4px; background: #f3e8cd; overflow: hidden; }
.sp-section-heading.sp-button { display: block; width: 100%; min-height: 25px; padding: 3px 6px; border: 0; border-bottom: 1px solid #d5c5a2; border-radius: 0; background: #e8d9b7; text-align: left; font-size: 11px; font-weight: bold; cursor: pointer; }
.sp-section-body { min-height: 38px; padding: 5px; margin: 0; }
.sp-section-body.sp-contracts, .sp-section-body.sp-trades { margin: 0; gap: 4px; }
.sp-section-body .sp-offices.sp-button { margin: 0; padding: 0; border: 0; background: transparent; min-height: 28px; }
.sp-office-buildings { display: flex; gap: 3px; }
.sp-office-building { position: relative; display: block; width: 28px; height: 35px; overflow: hidden; border-radius: 3px 3px 1px 1px; box-shadow: 1px 1px 2px #ad9873; }
.sp-office-building img.sp-card-art { position: absolute; width: 140%; max-width: none; height: auto; left: -20%; top: -3px; outline: none; border-radius: 0; }
.sp-section-body .sp-trade.sp-button { min-width: 24px; min-height: 26px; padding: 0; border: 0; background: transparent; }
.sp-trade:has(.sp-trade-reward) { flex-direction: column; gap: 1px; }
.sp-trade-reward { display: flex; align-items: center; gap: 2px; font-size: 11px; line-height: 1; }
.sp-trade .sp-trade-reward img { width: 12px; height: 12px; }
.sp-trade-group { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.sp-trade-points { width: 23px; height: 23px; object-fit: contain; }
.sp-section-body .sp-trade .sp-player-token { width: 25px; height: 25px; }
.sp-section-body .sp-contract-wrap { padding: 0; border: 0; background: transparent; }
.sp-section-body .sp-contract.sp-button { min-height: 24px; gap: 3px; border: 0; background: transparent; padding: 0; }
.sp-section-body .sp-contract-slot { width: 23px; height: 24px; border: 0; background: transparent; }
.sp-section-body .sp-contract-slot .sp-good { opacity: 1; width: 22px; height: 22px; }
.sp-section-body .sp-storage { flex-wrap: wrap; gap: 6px; }
.sp-section-body .sp-storage-group.sp-good-area { padding: 0; border: 0; background: transparent; box-shadow: none; }
.sp-section-body .sp-storage-label, .sp-section-body .sp-warehouse-help { display: none; }
.sp-section-body .sp-warehouse-slots { grid-template-columns: repeat(4, 22px); gap: 3px; }
.sp-section-body .sp-storage-group[data-area="Market"] .sp-warehouse-slots { grid-template-columns: 22px; }
.sp-section-body .sp-warehouse-slot { width: 22px; height: 24px; }
.sp-section-body .sp-storage-target.sp-button { min-width: 0; min-height: 0; padding: 0; }
.sp-section-body .sp-warehouse-slot .sp-source.sp-button { min-width: 0; min-height: 0; width: 20px; height: 22px; padding: 0; border: 0; background: transparent; }
.sp-section-body .sp-warehouse-slot .sp-good { width: 20px; height: 20px; }
.sp-section-help { max-height: 60vh; overflow: auto; }
.sp-section-help > .sp-help-card + .sp-help-card { margin-top: 12px; }

.sp-player header { font-size: 16px; line-height: 1.2; }
.sp-player-login { font-weight: 700; }
.sp-title-totals { display: flex; align-items: center; gap: 8px; margin-left: auto; font-variant-numeric: tabular-nums; }
.sp-point-summary { display: inline-flex; align-items: center; gap: 4px; }
.sp-point-summary .sp-player-token { width: 34px; height: 34px; }
.sp-point-summary .sp-player-token strong { font-size: inherit; line-height: 20px; }
.sp-projected-points { white-space: nowrap; }
.sp-score-popover .popover-header { font: 700 16px/1.25 'Segoe UI', system-ui, sans-serif; }
.sp-score-popover .popover-body { font: 14px/1.4 'Segoe UI', system-ui, sans-serif; }
.sp-point-details dl { display: grid; grid-template-columns: 1fr auto; column-gap: 18px; row-gap: 5px; margin: 0; font-variant-numeric: tabular-nums; }
.sp-point-details dt { font-weight: normal; }
.sp-point-details dd { text-align: right; margin: 0; font-weight: bold; }
.sp-point-details .sp-score-total { border-top: 1px solid #bcaa80; padding-top: 6px; font-weight: bold; }
.sp-player-resources { margin-top: 2px; gap: 6px; justify-content: flex-end; }
.sp-ship-count { display: inline-flex; align-items: center; gap: 3px; }
.sp-ship-symbol { width: 32px; height: 23px; }
.sp-player-section { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.sp-section-heading.sp-button { min-height: 23px; padding: 2px 3px; border-bottom: 1px solid #bcaa8066; background: transparent; color: #685035; font: 600 13px/1.35 'Segoe UI', system-ui, sans-serif; }
.sp-section-body { padding: 2px 0; min-height: 0; }
.sp-player-sections { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; }
.sp-player-section { flex: 0 1 auto; max-width: 100%; }
.sp-player { padding: 4px 7px; }
.sp-section-body .sp-storage-group[data-area="Warehouse"] { border-left: 1px solid #b7a078; padding-left: 6px; }

/* Use the available game area, including changes caused by framework sidepanels. */
#Speicherstadt2 {
    background: radial-gradient(ellipse at top left, #46616a, #293f46 75%);
    min-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 10px;
}
.sp-board-frame { box-shadow: 0 3px 12px #24181480; }
.sp-players { margin-top: 0; }
.sp-player { box-shadow: 0 2px 5px #24181455; }
#Speicherstadt2.sp-wide {
    grid-template-columns: minmax(0, var(--sp-board-max-width, 100%)) 340px;
    grid-template-rows: auto auto;
    justify-content: center;
}
.sp-wide .sp-board-frame { grid-column: 1; grid-row: 1; }
.sp-wide .sp-controls { grid-column: 1; grid-row: 2; }
.sp-wide .sp-players { grid-column: 2; grid-row: 1 / 3; grid-template-columns: minmax(0, 1fr); max-width: none; }
.sp-inspect[hidden] { display: none; }
.sp-inspect svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.sp-zoom-probe { position: fixed; left: -10000px; top: 0; display: block; visibility: hidden; pointer-events: none; }

.speicherstadt2-game #log .effectFireScored { display: block; margin: 8px 0; }
.speicherstadt2-game #log .effectCoinsChanged:has(> .sp-log-round-income) { display: block; margin-top: 4px; }
.speicherstadt2-game #log .effectCoinsChanged:has(> .sp-log-round-income)::before { content: none; }
.sp-log-fire { border: 2px solid #a84324; border-radius: 4px; background: #fff1d6; color: #33251f; overflow: hidden; }
.sp-log-fire-title { display: block; padding: 6px 8px; background: #922f1f; color: #fff7e7; font: bold 17px/1.3 Georgia, serif; }
.sp-log-fire-body { display: flex; align-items: start; gap: 8px; padding: 8px; }
.sp-log-fire-results { flex: 1; min-width: 0; }
.sp-log-fire-player { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 5px; padding: 4px 0; border-bottom: 1px solid #ccad86; }
.sp-log-fire-player > :first-child { overflow-wrap: anywhere; }
.sp-log-fire-strength, .sp-log-fire-points { white-space: nowrap; }
.sp-log-fire-points { color: #216533; }
.sp-log-fire-loss { color: #a1241d; }
.speicherstadt2-game #log .action .sp-log-fire-strength img { width: 25px; height: 18px; object-fit: contain; }
.speicherstadt2-game #log .action .sp-log-fire-points img { width: 22px; height: 22px; object-fit: contain; }
.sp-fire-dialog {
    --bs-modal-width: 380px;
    --bs-modal-bg: #f9f1dd;
    --bs-modal-color: #28251e;
    --bs-modal-border-color: #b49a67;
    --bs-modal-header-border-color: #b49a67;
}
.sp-fire-dialog .modal-header {
    padding: 0 4px 0 10px;
    background: #922f1f;
    color: #fff8e7;
}
.sp-fire-dialog .modal-title { font: bold 1.05rem/1.25 Georgia, serif; }
.sp-fire-dialog .modal-header .btn-close {
    box-sizing: border-box;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0 0 0 auto;
    opacity: 1;
    filter: invert(1);
    background-size: 13px;
}
.sp-fire-results.modal-body { display: grid; gap: 6px; padding: 6px 8px; }
.sp-fire-dialog .sp-log-fire { border: 1px solid #c6b58c; background: #fff8e7; }
.sp-fire-dialog .sp-log-fire-body { padding: 4px 6px; }
.sp-fire-dialog .sp-log-fire-body > img { width: 60px; height: auto; }
.sp-fire-dialog .sp-log-fire-player { padding: 2px 0; line-height: 1.2; }
.sp-fire-dialog .sp-log-fire-player:last-child { border-bottom: 0; }
.sp-fire-dialog .sp-log-fire-strength img { width: 22px; height: 16px; object-fit: contain; }
.sp-fire-dialog .sp-log-fire-points img { width: 18px; height: 18px; object-fit: contain; }