#game-container {
    border: 1px dotted black;
    padding-bottom: 20%;
    position: relative;
}

piece {
    display: flex;

    cursor: move;
    border: 1px dotted black;
    background: radial-gradient(circle, rgba(255,214,45,1) 41%, rgba(255,179,0,1) 84%);

    text-align: center;
    justify-content: center;
    align-items: center;

    font-size: 5vw;

    width: 10%;
    height: 10%;

    position: absolute;
}

score {
    display: inline-block;

    text-align: right;
    right: 1vw;

    width: 100%;
    height: 100%;

    font-size: 3vw;

    position: absolute;
}

#game-board {
    display: table;
    table-layout: fixed;

    position: static;
    width: 100%;
    height: 100%;

    max-width: 70%;
    max-height: 70%;

    text-align: center;
    font-size: 3vw; /* roughly 15 / table width */
}

.game-board-header {
    display: table-row-group;
}

.game-board-header-cell {
    display: table-cell;

    width: 100%;
    height: 0;
    padding-bottom: 0%;
}

.game-board-col-header {
    display: table-column-group;
}

.game-board-col-header-cell {
    display: table-cell;

    width: 100%;
    height: 0;
    padding-bottom: 0%;
}

.game-board-row {
    display: table-row;
}

.game-board-cell {
    display: table-cell;

    width: 100%;
    height: 0;
    padding-bottom: 0%;

    font-size: 2vw; /* roughly 15 / table width */
    vertical-align: middle;
    
    background: radial-gradient(circle, rgba(255,255,255,1) 38%, rgba(244,244,244,1) 94%);
}

.double-word {
    background: radial-gradient(circle, rgba(255,180,243,1) 32%, rgba(255,159,245,1) 84%);
}

.tripple-word {
    background: radial-gradient(circle, rgba(249,129,117,1) 32%, rgba(252,101,101,1) 84%);
}

.tripple-letter {
    background: radial-gradient(circle, rgba(185,180,255,1) 32%, rgba(180,159,255,1) 84%);
}

.double-letter {
    background: radial-gradient(circle, rgba(170,230,255,1) 32%, rgba(159,204,255,1) 84%);
}

.center-star {
    background: radial-gradient(circle, rgba(255,226,132,1) 32%, rgba(249,202,91,1) 84%);
}