/* For personal use only.  Not licensed. */

/* Style parameters for the Blokus web page. */

* {
    touch-action: manipulation;
}

body {
    background-color: #FFFFF8;
    padding: 0 0 0 0;
    font-size: 20px;
    --acolor: SlateBlue;
    --bcolor: ForestGreen;
}

/* Heading row includes scores and title */
#heading {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 10px;
}

.score {
    font-family: 'Times New Roman', serif;
    font-size: 36px;
    font-weight: bold;
}

#ascore {
    color: var(--acolor);
}

#bscore {
    color: var(--bcolor);
}

h1 {
    font-family: 'Times New Roman', serif;
    font-style: italic;
    font-size: 36px;
    text-decoration: underline;
    /* color: royalblue; */
    margin: 0 20px 0 20px;
}

#board-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#board {
    border: 2px solid black;
    touch-action: none;  /* disable default touch actions (pan/zoom) */
    user-select: none; /* prevent long touch from selecting */
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
}

#Aframe {
    stroke: var(--acolor);
    stroke-width: 0.2;
    fill: none;
    display: none;  /* hide frame initially */
}

#Bframe {
    stroke: var(--bcolor);
    stroke-width: 0.2;
    fill: none;
    display: none;  /* hide frame initially */
}

#msg-area {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    font-family: Arial, serif;
}

#msg-area p {
    margin: 0 0 0 0;
}

#button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

#button-container button {
    cursor: pointer;
    font-size: 18px;
    margin: auto 20px auto 20px;
}

.pieceA {
    fill: var(--acolor);
    stroke: black;
    stroke-width: 0.04;
}

.pieceB {
    fill: var(--bcolor);
    stroke: black;
    stroke-width: 0.04;
}

dialog::backdrop {
    backdrop-filter: blur(3px);
}

dialog label {
    font-size: 18px;
}

dialog button {
    font-size: 18px;
}

dialog p {
    font-size: 18px;
}