@font-face {
	font-family: arial;
	src: url("../media/arial.ttf");
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background-color: #000;
	font-family: arial;
	color: #fff;
}

button {
	height: 5rem;
    font-size: 1.5rem;
    cursor: pointer;
    border: 2px solid #fff;
    border-radius: 10px;
    background-color: transparent;
    color: #fff;
    text-align: center;
    box-shadow: 0px 4px 8px rgba(255, 255, 255, 0.2);
    transition: all 250ms ease;
}
button:hover {
    transform: scale(1.08);
    background-color: #fff;
    color: #000;
}

.preload {
	display: none;
}

.start-screen {
	display: none;
}

.game-over-screen {
	display: none;
	text-align: center;
	outline: 2px solid;
	color: #fff;
	border-radius: 1rem;
	padding: 2rem;
}

.player-first-btn, .bot-first-btn, .play-again-btn{
	width: 100%;
	margin: 0.5rem 0rem;
}

h2.game-over-title {
	font-size: 2rem;
	margin-top: 0rem;
}
h3.game-over-message {
	font-size: 1.8rem;
}

img {
	filter: invert(100%);
}
.hand {
    width: 100%;;
}
.hand.bot {
    margin-bottom: 1.5rem;
}
.hand.player {
    margin-top: 1.5rem;
}
.hand.bot.left {
	transform: rotate(90deg);
    grid-area: bot-left;
}
.hand.bot.right {
	transform: rotate(90deg) scaleY(-1);
    grid-area: bot-right;
}
.hand.player.left {
	transform: rotate(-90deg) scaleY(-1);
    grid-area: player-left;
}
.hand.player.right {
	transform: rotate(-90deg);
    grid-area: player-right;
}

.grid-view {
    display: grid;
    grid-template-areas:
      "back restart restart restart"
      ". bot-label bot-label ."
      "bot-left bot-left bot-right bot-right"
      "player-left player-left player-right player-right"
      ". player-label player-label ."
      "split-apply split-apply split-cancel split-cancel";
    grid-template-rows: 2fr 1fr 4fr 4fr 1fr 2fr;
    gap: 1rem;
    background-color: #000;
}

.back-btn {
    grid-area: back;
}
.restart-btn {
    grid-area: restart;
}
.bot.label {
    grid-area: bot-label;
}
.player.label {
    grid-area: player-label ;
}
.split-btn.apply {
    grid-area: split-apply;
}
.split-btn.cancel {
    grid-area: split-cancel;
}

.turn-indicator {
    grid-column: 1 / -1;
    pointer-events: none;
    z-index: 0;
    background: transparent;
}
.turn-indicator.bot {
    grid-row: 2 / 4;
}
.turn-indicator.player {
    grid-row: 4 / 6;
}

.label {
    text-align: center;
}
.label.bot, .label.player {
    margin: 0rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.current-turn {
	outline: 2px solid;
	color: #fff;
	border-radius: 1rem;
}

.back-emoji {
	font-size: 3rem;
	transform: translateY(-0.4rem)
}
.restart-emoji {
    font-size: 3rem;
    transform: translate(-0.3rem, -0.4rem);
}
.restart-btn {
	display: flex;
	align-items: center;
	justify-content: center;
}
.split-btn {
    visibility: hidden;
}

@media screen and (orientation:portrait) {
    .game{
        width: 96vw;
        margin-left: 2vw;
        margin-right: 2vw;
    }
}
@media screen and (orientation:landscape) {
    .game{
        width: 28rem;
    }
}