body.halali2-state-1 #content { background: #263b2b url('../images/forest-background.webp') center / cover no-repeat; }
body.halali2-state-1 #game { background: transparent; }
#halali2 { --board-size: 640px; display: grid; grid-template-areas: "players" "forest"; grid-template-columns: minmax(0, var(--board-size)); justify-content: center; gap: 8px; width: 100%; min-width: 0; margin: 0 auto; padding: 8px; box-sizing: border-box; color: #273523; }
#halali2.halaliWide { grid-template-areas: "forest players"; grid-template-columns: minmax(0, var(--board-size)) var(--players-size, 232px); align-items: start; }
#halali2.halaliWide #halaliPlayers { grid-template-columns: minmax(0, 1fr); }
#halaliPlayers { grid-area: players; align-self: start; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.halaliPlayer { min-width: 0; padding: 8px; background: #fffdf4; border: 2px solid var(--halali-color); border-radius: 8px; }
.halaliPlayer.onTurn { box-shadow: inset 0 0 0 2px var(--halali-color); }
.halaliName { display: flex; gap: 5px; align-items: center; overflow-wrap: anywhere; }
.halaliRole { display: flex; gap: 5px; align-items: center; margin-top: 5px; }
.halaliRole > .halaliPiece { width: 27%; max-width: var(--halali-piece-max, 54px); height: auto; flex: 0 0 auto; }
.halaliScore { display: inline-grid; place-items: center; position: relative; width: min(27%, var(--halali-piece-max, 54px)); max-width: 64px; height: auto; aspect-ratio: 1; flex: 0 0 auto; margin-left: auto; container: halali-score / inline-size; }
.halaliScore svg { position: absolute; width: 100%; height: 100%; }
.halaliScore b { position: relative; font: bold clamp(10px, 32cqw, 18px)/1 sans-serif; color: #30250e; }
.halaliTotal { display: flex; align-items: center; font-size: .85em; }
.halaliTotal .halaliScore { max-width: 42px; }
.halaliCaptures { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-top: 5px; }
.halaliCaptures > span { display: flex; flex-direction: column; text-align: center; }
.halaliCaptures img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 3px; }
.halaliForest { grid-area: forest; position: relative; width: 100%; aspect-ratio: 485 / 486; }
.halaliBoardArt { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; user-select:none; }
.halaliBoard { position: absolute; left: 4.3299%; top: 4.7325%; width: 91.5464%; height: 91.358%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); gap: .9009%; }
.halaliCell { position: relative; display: block; min-width: 0; min-height: 0; width: 100%; height: 100%; border: 0; border-radius: 2px; padding: 0; background: transparent; cursor: default; }
.halaliPiece { display: block; position: relative; width: 100%; height: 100%; aspect-ratio: 1; box-sizing: border-box; }
.halaliPiece img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }
.halaliPlayer.color0, .halaliPiece.color0 { --halali-color: #2265a4; }
.halaliPlayer.color1, .halaliPiece.color1 { --halali-color: #895124; }
.halaliCoordinate { display: none; position: absolute; bottom: 0; left: 0; background: #fffc; color: #253220; border-radius: 0 3px 0 0; font: 10px/13px sans-serif; padding: 0 2px; pointer-events: none; }
.halaliCell.active, .halaliExit.active { cursor: pointer; }
.halaliCell.active { outline: 2px solid #e5f4b0; outline-offset: -2px; }
.halaliCell.last { box-shadow: 0 0 0 2px #fff; z-index: 1; }
.halaliCell.selected { outline: 4px solid #ffe242; outline-offset: -4px; }
.halaliCell.destination::after { content: ''; position: absolute; inset: 25%; border: 3px solid #ffe242; background: #26361d60; border-radius: 50%; pointer-events: none; }
.halaliCell:focus-visible, .halaliExit:focus-visible { outline: 3px solid #ffbd00; z-index: 2; }
.halaliExit { position: absolute; background: transparent; color: #d5dcb9; border: 0; font: bold 26px/1 sans-serif; min-width: 30px; min-height: 30px; opacity: .4; padding: 0; cursor: default; }
.halaliExit.availablePhase { opacity: 1; }
.halaliExit.destination { background: #ffe242; color: #293d23; border-radius: 6px; }
.halaliExit0 { top: 1px; left: calc(50% - 15px); }
.halaliExit1 { right: 1px; top: calc(50% - 15px); }
.halaliExit2 { bottom: 1px; left: calc(50% - 15px); }
.halaliExit3 { left: 1px; top: calc(50% - 15px); }
.halaliLogTile { display: inline-block; width: 58px; height: 58px; flex: 0 0 58px; vertical-align: middle; }
.halaliLogMove { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 4px 0; }
.halaliLogLocation { border: 0; border-bottom: 1px dotted currentColor; background: none; color: inherit; padding: 0 2px; cursor: pointer; }
#log .move.color0 { background: #2265a4; color: white; }
#log .move.color1 { background: #895124; color: white; }
@media (max-width: 450px) {
    #halali2 { padding: 3px; gap: 5px; }
    .halaliPlayer { padding: 5px; }
    .halaliCoordinate { font-size: 8px; line-height: 10px; }
    .halaliExit { min-width: 26px; min-height: 26px; font-size: 23px; }
}

#halali2 .halaliLogFocus .halaliCoordinate { display: block; }
.halaliCell.halaliLogFocus { outline: 3px solid #ffdf46; z-index: 3; }

/* Override generic framework/Bootstrap button cursors, including their children. */
#halali2 .halaliCell, #halali2 .halaliExit { cursor: default; }
#halali2 .halaliCell.active, #halali2 .halaliExit.active { cursor: pointer; }
#halali2 .halaliCell *, #halali2 .halaliExit * { cursor: inherit; }
#halaliPlayers .halaliPiece, #halaliPlayers .halaliCaptures, #halaliPlayers .halaliScore { cursor: default; }
.halaliEffect { position: absolute; inset: 0; display: block; pointer-events: none; z-index: 6; transform-origin: 25% 85%; }
.halaliEffect svg { display: block; width: 100%; height: 100%; overflow: visible; }

.halaliEffect[data-effect="feather"], .halaliEffect[data-effect="bone"] { transform-origin: center; }
.halaliPointsPill { position: absolute; right: -4px; top: -5px; min-width: 22px; padding: 2px 5px; border: 1px solid #73582d; border-radius: 12px; background: #ffe5a1; color: #30250e; font: bold 13px/16px sans-serif; text-align: center; box-shadow: 0 1px 2px #0005; }
.halaliTrack { position: absolute; pointer-events: none; z-index: 4; transform-origin: center; }
.halaliTrack svg { display: block; width: 100%; height: 100%; }

/* Host log rules otherwise reduce action images to 1em. */
#log .halaliLogTile, #log .action .halaliLogTile { display: inline-block; width: 58px; height: 58px; min-width: 58px; flex: 0 0 58px; }
#log .halaliLogTile > img, #log .action .halaliLogTile > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.halaliRuleTrack { opacity: .65; }
.halaliRestriction { position: absolute; top: 2px; left: 2px; z-index: 5; pointer-events: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #9b3425; background: #fff3d8; color: #9b3425; font: bold 18px/1 sans-serif; }
.halaliNoReturn::after { content: ''; position: absolute; width: 22px; height: 2px; background: #9b3425; transform: rotate(-45deg); }
.halaliCell { touch-action: manipulation; }
.halaliCell.halaliEggCell { z-index: 7; }
.halaliEggEyes { position: absolute; inset: 0; pointer-events: none; }
.halaliEggEyes svg { width: 100%; height: 100%; display: block; }

#halali2.halaliWide .halaliPlayer { --halali-piece-max: 80px; }

.halaliScore .halaliScoreLeaf { display: none; }
@container halali-score (max-width: 43px) {
    .halaliScoreWreath { display: none; }
    .halaliScore .halaliScoreLeaf { display: block; }
}

#log .halaliFinalNotice { display: block; margin: 8px 0; padding: 10px 12px; border: 2px solid #75603b; border-left: 6px solid #486437; border-radius: 6px; background: #fff0c7; color: #30250e; line-height: 1.4; }
#log .halaliFinalNotice > strong { display: block; margin-bottom: 3px; font-size: 1.15em; }

.halaliInventory { grid-column: 1 / -1; padding: 5px 8px; border-radius: 6px; background: #fffdf4; font-size: .85em; min-width: 0; }
.halaliInventory .halaliCaptures { max-width: 360px; margin: 5px auto 0; }

.halaliInventoryHeading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.halaliTutorialLink { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 5px 9px;
    border: 1px solid #304b27; border-radius: 5px; background: #36572c; color: #fff; text-decoration: none;
    font-weight: 600; line-height: 1.4; }
.halaliTutorialLink:hover { background: #243e1d; color: #fff; }
.halaliTutorialLink:focus-visible { outline: 3px solid #bb7f16; outline-offset: 2px; color: #fff; }