Screen #game-container {
    layout: grid;
    grid-size: 7;
    grid-rows: 10 100%;
}

Container#end-game {
    padding: 2;
}

TableauPileWidget {
    max-width: 12;
    border: transparent;
}

TableauPileWidget:focus-within {
    border: solid $primary;
}

TableauCardWidget:focus-within {
    background: $primary-background;
}

TableauCardWidget.selected {
    background: $secondary-background;
}

PileWidget {
    height: 10;
    border: transparent;
    max-width: 12;
}

PileWidget:focus-within {
    background: $primary-background;
    border: solid $primary;
}

PileWidget.selected {
    background: $secondary-background;
}

#help-text.hidden {
    display: none;
}

MyFooter {
    color: $primary;
    background: $secondary;
    dock: bottom;
    height: 2;
}

ConfirmNewGameScreen {
    align: center middle;
}

#dialog {
    grid-size: 2;
    grid-gutter: 1 2;
    grid-rows: 1fr 3;
    padding: 0 1;
    width: 50;
    height: 11;
    border: thick $background 80%;
    background: $surface;
}

ConfirmNewGameScreen Label {
    column-span: 2;
    height: 1fr;
    width: 1fr;
    content-align: center middle;
}

Button {
    width: 100%;
}
