@font-face {
    font-family:'JapaneseFont';
    src: url('Mashiro-Regular.otf');
}

*{
    box-sizing:border-box;
}

body{
    min-height:100vh;
    margin:0;
    padding:20px;
    background-color:#dbe7ef;
    background-image:
        linear-gradient(rgba(245, 248, 251, 0.7), rgba(207, 221, 232, 0.78)),
        url("texture.jpg");
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    font-family:'JapaneseFont';
    color:#173042;
    overflow:hidden;
}

h1,
p{
    margin:0;
}

.appShell{
    width:min(92vw, 460px);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
}

.topPanel{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.scoreBoard{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
}

.scoreCard{
    padding:14px 16px;
    border:1px solid rgba(23, 48, 66, 0.14);
    border-radius:18px;
    background:rgba(255, 255, 255, 0.52);
    box-shadow:0 12px 28px rgba(48, 73, 94, 0.12);
    backdrop-filter:blur(8px);
    text-align:center;
}

.playerLabel{
    display:block;
    margin-bottom:6px;
    font-size:0.95rem;
    letter-spacing:0.04em;
}

.scoreCard strong{
    font-size:2rem;
}

.resetButton{
    border:none;
    border-radius:999px;
    padding:10px 18px;
    font:inherit;
    cursor:pointer;
    transition:transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.resetButton{
    background:#2e5d78;
    color:#f6fbff;
}

.resetButton:hover{
    transform:translateY(-1px);
}

.statusMessage{
    min-height:1.5em;
    font-size:1.05rem;
    text-align:center;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255, 255, 255, 0.46);
    box-shadow:0 8px 18px rgba(48, 73, 94, 0.08);
}

.grid{
    width:100%;
    max-width:420px;
    aspect-ratio:1;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:repeat(3,1fr);
    position:relative;
}

.gridItems{
    display:flex;
    justify-content:center;
    align-items:center;
    background:transparent;
    font-size:clamp(3rem, 10vw, 4.6rem);
    color:#173042;
    cursor:pointer;
    user-select:none;
}

.gridItems.x-mark{
    color:#111111;
}

.gridItems.o-mark{
    color:#c53131;
}

.gridItems:nth-child(1),
.gridItems:nth-child(2),
.gridItems:nth-child(4),
.gridItems:nth-child(5),
.gridItems:nth-child(7),
.gridItems:nth-child(8){
    border-right:6px solid rgba(43, 66, 84, 0.82);
}

.gridItems:nth-child(-n+6){
    border-bottom:6px solid rgba(43, 66, 84, 0.82);
}

.gameModal{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(13, 22, 29, 0.34);
    backdrop-filter:blur(5px);
}

.gameModal.hidden{
    display:none;
}

.modalCard{
    width:min(90vw, 320px);
    padding:24px 20px;
    border-radius:24px;
    background:rgba(255, 255, 255, 0.88);
    box-shadow:0 20px 44px rgba(25, 38, 49, 0.22);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    text-align:center;
}

.modalMessage{
    font-size:1.4rem;
    color:#173042;
}

@media (max-width: 600px){
    body{
        padding:16px;
    }

    .appShell{
        width:100%;
        gap:14px;
    }

    .scoreBoard{
        grid-template-columns:1fr;
    }

    .grid{
        width:min(100%, 360px);
    }

    .gridItems{
        border-width:4px;
        font-size:clamp(2.7rem, 16vw, 4rem);
    }
}