.round {
    border-radius: 50%;
}
.player img {
    pointer-events: auto;
    position: relative;
    z-index: 10;
}


.mirror {
    display: inline-block;
    transform: scale(-1, 1); /* Flips horizontally */
}

.med-flip-question {
    background-image: url("../background/graf_question.jpg");
    /*background-color: red;*/
}

.brick-question {
    background-image: url("../background/brick_question.jpg");
}

.header {
    font-family: Arial, san-serif;
    width: 90vw;
    height: 375px;
    background-color: rgba(240, 240, 240, 1);
    color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1000;
    margin-bottom: 20px;
    border-bottom: 0px solid #555;
    padding: 5px 40px;
    border-radius: 10px;
    overflow: visible;
    font-size: 35pt;
}

.pic-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 350px;
    /*   box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.3); */
}

.day-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /*   background-color: lightblue; */
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 25px 25px;
    font-size: 40pt;
}

.smaller {
    font-size: 32px;
}
.name-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /*   background-color: lightblue; */
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 0px 25px;
    font-size: 28pt;
}

.lesson-header {
    font-family: Arial, san-serif;
    /* width: 85vw; */
    width: 85%;
    height: 70px;
    background-color: lightblue;
    color: black;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    /*   position: relative; */
    /* z-index: 1000; */
    margin-bottom: 20px;
    border-bottom: 0px solid #555;
    padding: 5px 40px;
    border-radius: 10px;
    overflow: visible;
    font-size: 25pt;
    min-width: 0;
    flex: none;
    justify-self: stretch;
}

.skill-box {
    font-family:
        Arial,
        sans serif;
    background-color: rgba(240, 240, 240, 1);
    /*width: 90vw;*/
    width: 90%;
    color: black;
    display: flex;
    flex-wrap: wrap;
    /*	flex-direction: row; */
    justify-content: flex-start;
    align-items: center;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
    border-bottom: 0px solid #555;
    border-radius: 15px;
    padding: 5px 40px;
    min-width: 0;
    flex: none;
    justify-self: stretch;
}
.grid-box {
    font-family:
        Arial,
        sans serif;
    /* background-color: rgba(240, 240, 240, 1); */
    /* background: radial-gradient(
        circle,
        rgba(238, 174, 202, 1) 0%,
        rgba(148, 187, 233, 1) 100%
    ); */
    background-color: #222;
    width: 90%;
    color: black;
    display: flex;

    /*	flex-direction: row; */
    justify-content: center;
    align-items: center;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
    border-bottom: 0px solid #555;
    border-radius: 15px;
    padding: 45px 40px;
    /* border: solid 2px red; */
}

.reader-skill-box {
    font-family:
        Arial,
        sans serif;
    background-color: rgba(240, 240, 240, 1);
    width: 90vw;
    height: auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

    color: black;

    flex-wrap: nowrap;
    /*	flex-direction: row; */
    /*justify-content: flex-start;*/
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
    border-bottom: 0px solid #555;
    border-radius: 15px;
    padding: 5px 40px;
    margin-inline: auto;
}
.center-skill-box {
    font-family:
        Arial,
        sans serif;
    background-color: rgba(240, 240, 240, 1);
    width: 90vw;
    color: black;
    display: flex;
    /* flex-wrap: wrap; */
    /*	flex-direction: row; */
    justify-content: center;
    align-items: center;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
    border-bottom: 0px solid #555;
    border-radius: 15px;
    padding: 5px 40px;
}

.center-box {
    background-color: transparent;
}

.skill-box-dark {
    font-family:
        Arial,
        sans serif;
    background-color: rgba(0, 0, 0, 1);
    width: 90%;
    color: white;
    display: flex;
    flex-wrap: wrap;
    /*	flex-direction: row; */
    justify-content: center;
    align-items: center;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
    border-bottom: 0px solid #555;
    border-radius: 15px;
    padding: 5px 40px;
}

.headline {
    font-size: 75pt;
}

.headline2 {
    font-size: 50pt;
}

.giant {
    font-size: 150pt;
}

.giant2 {
    font-size: 300pt;
}

.question {
    font-size: 100pt;
    text-shadow: 3px 4px 8px #000000;
}
/* Word cards */

.word-card {
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
    background-color: lightgray;
    width: 400px;
    height: 200px;
    border: 0px;
    padding: 10px 10px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    font-size: 60pt;
    font-family: Arial, sans-serif;
    position: relative;
}

.cloud-container {
    /* 1. Set the background image URL */
    background-image: url("../background/sky.jpg"); /* */

    /* 2. Prevent the image from repeating */
    background-repeat: no-repeat; /* */

    /* 3. Keep the background image fixed relative to the viewport */
    background-attachment: fixed; /* */

    /* 4. Center the background image */
    background-position: center; /* */

    /* 5. Scale the image to cover the entire div area */
    background-size: cover; /* */

    /* Optional: Ensure the div has a specified height so the background is visible */
    min-height: 500px;
    /* Or set height: 100vh; for a full-screen div */

    /* Optional: Add padding and color for content visibility */
    color: white;
    padding: 20px;
    /* Other styles like display: flex, justify-content: center, align-items: center can center content */

    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    font-family:
        Arial,
        sans serif;
    background-color: rgba(240, 240, 240, 1);
    width: 90%;
    color: black;
    /*box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);*/
    margin-bottom: 20px;
    border-bottom: 0px solid #555;
    border-radius: 15px;
}

.word-cloud {
    background-color: transparent;

    height: 90px;
    border: 10px;
    padding: 10px 75px;
    align-items: center;
    justify-content: center;
    margin: 15px;
    border-radius: 15px;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    font-size: 30pt;
    font-family: Arial, sans-serif;
    position: relative;
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
}

.digraph-container {
    display: flex;
    flex-wrap: wrap;
}

.digraph-container-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    /*flex-wrap: wrap;*/
}

.digraph-bubble {
    background-color: purple;
    color: white;

    height: 110px;
    width: 110px;
    border: 10px;
    padding: 10px 10px;
    align-items: center;
    justify-content: center;
    margin: 15px;
    border-radius: 15px;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    font-size: 50pt;
    font-family: Arial, sans-serif;
    position: relative;
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
}


.card-container {
  display: flex;
  flex-wrap: wrap;      /* allows multiple rows */
  gap: 16px;            /* spacing between cards */
  justify-content: center;
  align-items: center;
  padding: 20px;
  /*outline: solid 2px red;*/
}

/*.flip-card-set {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
  padding: 20px;
  outline: solid 2px red;
}*/

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

.flip-container {
    display: flex;
    flex-wrap: wrap;
}

.flip-card {
    background-color: transparent;
    width: 400px;
    height: 250px;
    border: 0px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    padding: 10px 10px;
    cursor: pointer;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.sm-flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.med-flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.dot-flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.treasure-question,
.flash,
.brick-question,
.squatch-subway,
.coos-subway,
.mad-subway,
.subway-question,
.med-flip-question,
/*.med-flip-card,*/
.flip-card-front,
.flip-card-back,
.dot-flip-card-front,
.dot-flip-card-back,
.flip-card-back-dark,
.flip-question,
.flip-mud,
.duck,
.flip-check {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    font-size: 60pt;
    font-family: Arial, sans-serif;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: rgb(224, 206, 85);
    color: black;
}

.flip-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 15px;
}

.dot-flip-card-front {
    background-color: white;
    color: black;
}

.treasure-question {
    background-image: url("../background/treasure_question.jpg");
}

.flash {
    background-image: url("../background/flash.jpg");
}

.flip-question {
    background-image: url("../background/purple_question.jpg");
    /*background-color: red;*/
}

.flip-mud {
    background-image: url("../background/mud.jpg");
}

.duck {
    background-image: url("../background/duck.jpg");
}

.flip-check {
    background-image: url("../background/check.jpg");
}

.subway-question {
    background-image: url("../background/subway_question2.jpg");
}

.mad-subway {
    background-image: url("../background/mad_subway.jpg");
}

.coos-subway {
    background-image: url("../background/coos_subway.jpg");
}

.squatch-subway {
    background-image: url("../background/squatch_subway.jpg");
}

/* Style the back side */
.flip-card-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
}

.dot-flip-card-back {
    background-color: white;
    color: black;
    transform: rotateY(180deg);
}

.flip-card-back-dark {
    background-color: black;
    color: white;
    transform: rotateY(180deg);
}

/* small flip container */

.sm-flip-card {
    background-color: transparent;
    width: 160px;
    height: 160px;
    border: 0px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    padding: 10px 10px;
    cursor: pointer;
}
.dot-flip-card {
    background-color: white;
    width: 150px;
    height: 150px;
    border: 0px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    padding: 10px 10px;
    cursor: pointer;
}

.med-flip-card {
    background-color: transparent;
    width: 375px;
    height: 250px;
    border: 0px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    padding: 0px 0px;
    cursor: pointer;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.sm-flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.dot-flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.med-flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* stopwatch and clock */

body {
    margin: 0;
    padding-bottom: 100px;
    font-family: Arial, sans-serif;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    background-color: #222;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    box-sizing: border-box;
}

.stopwatch {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 24px;
}

.dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

.math-dot {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

.math-dot.black {
    background-color: #000000;
}

.dot.green {
    background-color: #4caf50;
}
.dot.red {
    background-color: #f44336;
}
.dot.blue {
    background-color: #2196f3;
}

.dot:hover {
    transform: scale(1.2);
}

.clock {
    font-size: 24px;
}

/* grid work */

.subway-grid-container {
    font-size: 40px;
    display: grid;
    grid-template-columns: 200px 390px 390px 390px;
    grid-template-rows: 200px 270px 270px 270px 270px 270px 200px;
    align-items: center;
    justify-content: center;
    background-color: black;
    padding: 20px 20px;
}

.frame-grid-container {
    font-size: 40px;
    display: grid;
    grid-template-columns: 175px 175px 175px 175px 175px;
    grid-template-rows: 175px 175px;
    align-items: center;
    background-color: black;
    padding: 10px 10px;
    color: white;
}

.ui-grid {
    display: grid;
    grid-template-columns: 10% 90%;
    /* background-color: red; */
    padding: 10px 10px;
    /* border: solid 2px orange; */
}

.word-race-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  max-width: 600px;
  margin: 2rem auto;
  font-family: sans-serif;
}

.grid-item.header {
  background: #444;
  font-weight: bold;
}

.subway-grid-container > div {
    border: 0px solid #000000;

    /*  padding: 1em;*/
}

.frame-grid-container > div {
    border: 2px solid #000000;
}

.wrg-container {
  width: 100%;
  display: flex;
  justify-content: center; /* Centers the grid if it's 90% */
  background-image: url("../background/dunes.jpg");
  /*min-height: 600px;*/
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  border-radius: 25px;
}

.word-race-grid {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  width: 90%;
  max-width: none;
  margin: 2rem auto;
  font-family: sans-serif;
}

.wrg-grid-item {
  padding: 12px;
  background: rgba(157, 119, 96, 0.5);
  color: black;
  text-align: center;
  border-radius: 6px;
  font-size: 1.5rem;
  box-shadow: 0px 0px 16px 5px rgba(87, 54, 37, 0.6);
  backdrop-filter: blur(6px);
}

.wrg-grid-item:hover {
    scale: 105%;
    background-color: rgba(34, 34, 34, 1);
    color: white;
    text-shadow:
        0 0 5px #fff,  /* h-shadow v-shadow blur-radius color */
        0 0 10px #fff,
        0 0 15px #0073e6, /* Deeper color for the outer glow */
        0 0 20px #0073e6;
        transition-duration: 0.5s;

}

.wrg-grid-item.wrg-header {
  background: #444;
  font-weight: bold;
  color: white;
}

.grid-item {
    background-color: transparent;
    justify-content: center;
    align-items: center;
    display: grid;
    padding: 10px;
}


.ui-grid-item {
    background-color: transparent;
    /*justify-content: center;*/
    align-items: center;
    display: grid;
    min-width: 0;
    padding: 10px;
    /* border: solid 2px purple; */
}

.label {
    background-color: purple;
    color: white;
    height: 110px;
    width: 110px;
    border: 10px;
    /*    padding: 10px 10px; */
    align-items: center;
    justify-content: center;
    /*   margin: 15px; */
    border-radius: 15px;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    font-size: 50pt;
    font-family: Arial, sans-serif;
    position: relative;
    /*    gap: 20px; */
    /*    display: flex;
    flex-wrap: wrap; */
    cursor: pointer;
    display: grid;
}

/* Word Reader CSS */

.word {
    padding: 0 4px;
    transition:
        background-color 0.2s,
        font-weight 0.2s;
    font-weight: 500;
}

.active {
    background-color: #ffe066;
    font-weight: 600;
}

.sentence {
    font-size: 40px;
    line-height: 1.4;
    /*   max-width: 100%;
    min-width: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: normal;
    overflow-wrap: normal;
    word-break: keep-all;
    text-align: center;
    white-space: normal;
    /* outline: 2px solid blue; */
}

.controls {
    margin-top: 20px;
}

button {
    padding: 8px 16px;
    font-size: 1rem;
    cursor: pointer;
}

.slider-container {
    margin-top: 15px;
}

input[type="range"] {
    width: 100%;
}

.reader {
    width: 100%;
    min-width: 0;
    /* outline: 2px solid red; */
}

.click-word {
    font-size: 48px;
    cursor: pointer;
    color: black;
    user-select: none;
}

.click-word.active {
    color: red;
}

.white {
    color: white;
    text-shadow: 3px 4px 8px #000000;
}

.score-column {
    align-items: start; /* important for sticky */
}

.scorekeeper {
    position: sticky;
    top: 10px;

    display: flex;
    flex-direction: column;
    gap: 16px;

    /* background: #f5f5f5; */
    /*background-color: rgba(240, 240, 240, 1);*/
    background-color: #222;
    color: white;
    padding: 15px;
    border-radius: 12px;
}

.scorekeeper h3 {
    margin: 0;
    text-align: center;
}

.player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.player img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #333;
}

.score {
    font-size: 1.5rem;
    font-weight: bold;
}

.score-controls {
    display: flex;
    gap: 8px;
}

.score-controls button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    font-weight: 700;
    /*outline: solid 2px red;*/
}

.plus {
    background: #4caf50;
    color: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.minus {
    background: #f44336;
    color: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

}

.reset-all {
    margin-top: 10px;
    padding: 8px;
    border: none;
    border-radius: 8px;
    background: #333;
    color: white;
    cursor: pointer;
}
.menu-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #333;
    color: white;
    text-decoration: none; /* Removes the default link underline */
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

.menu-btn:hover {
    background-color: #666;
}

.lesson-btn {
    --lesson-btn-bg: purple;
    background-color: var(--lesson-btn-bg);
    /*background-color: purple;*/
    color: white;
    height: 50px;
    width: 50px;
    border: 2px;
    padding: 2px 2px;
    align-items: center;
    justify-content: center;
    margin: 5px;
   /* border-radius: 15px; */
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.5);
    font-size: 32pt;
    font-family: Arial, sans-serif;
    position: relative;
    gap: 2px;
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
    text-decoration: none; /* Removes the default link underline */
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}




.lesson-btn.g1 {
    --lesson-btn-bg: purple;
}

.lesson-btn.g1-226 {
    --lesson-btn-bg: rgb(32, 27, 140);
}

.lesson-btn.g1-226:hover {
    --lesson-btn-bg: rgba(32, 27, 140, 0.7);
}

.lesson-btn.g1-226.lesson-label:hover {
    --lesson-btn-bg: rgb(32, 27, 140);
}


.lesson-btn.g2-226 {
    --lesson-btn-bg: rgb(227, 105, 18);
}

.lesson-btn.g2-226:hover {
    --lesson-btn-bg: rgba(227, 105, 18, 0.7);
}

.lesson-btn.g2-226.lesson-label:hover {
    --lesson-btn-bg: rgb(227, 105, 18);
}

.lesson-btn.g1f {
    --lesson-btn-bg: rgba(128, 0, 128, 0.3);
    cursor: pointer;
}

.lesson-btn.g1f:hover {
    scale: 100%;
    cursor: default;
}

.lesson-btn.g2 {
    --lesson-btn-bg: green;
    /*cursor: default;*/
}

.lesson-btn.g2:hover {
    --lesson-btn-bg: rgba(0, 128, 0, 0.7);
}

.lesson-btn.g2.lesson-label:hover {
    --lesson-btn-bg: green;
}

.lesson-btn.g2f {
    --lesson-btn-bg: rgba(0, 128, 0, 0.3);
    cursor: default;
}

.lesson-btn.g2f:hover {
    --lesson-btn-bg: rgba(0, 128, 0, 0.3);
    scale: 100%;
}

.lesson-label {
    width: 200px;
    height: 50px;
    border-radius: 15px;
    font-size: 16pt;
    cursor: default;

}

.lesson-btn:hover {
    background-color: var(--lesson-btn-bg);
    scale: 110%;
    transition-duration: 0.1s;
}

.lesson-label:hover {
    scale: 100%;
    background-color: var(--lesson-btn-bg);
    /*background-color: purple;*/
}

/*.lesson-fade {
    background-color: rgba(128, 0, 128, 0.3);
}

}
.lesson-fade:hover {
    background-color: rgba(128, 0, 128, 0.3);
    scale: 100%;
}*/


/* TIC TAC TOE */
.ttt-wrapper {
    display: grid;          /* Arrange children (cards) in a row */
    grid-template-columns: 1fr 2fr 1fr;
    /*flex-wrap: wrap;        /* Allow cards to move to next line if screen is narrow */
    gap: 0px;              /* Adds space between the cards */
   /* align-items: center;
    justify-content: center; /* Aligns cards to the left */
    padding: 5px;
    background-image: url("../background/outrun2.jpg");
    /*min-height: 600px;*/
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    width: 95%;
    margin-top: 10px;
    margin-bottom: 20px;
    border-bottom: 0px solid #555;
    border-radius: 15px;
    margin-left: 10px auto;
    /* box-shadow: 5px 6px 8px rgba(0, 0, 0, 0.5); */
    box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.3);

}

.ttt-grid-item {
    background-color: transparent;
    place-items: center;
    /*justify-content: center;*/
   /* align-items: center; */
    display: grid;
    min-width: 0;
    padding: 10px;
   /* border: solid 2px white; */
}


.faded {
    opacity: 0.5;
}

.ttt-board {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.ttt-cell {
  position: relative;
  width: 200px;
  height: 200px;
  background: transparent;
  cursor: pointer;
}

.ttt-word-cell {
  position: relative;
  width: 250px;
  height: 100px;
  background: transparent;
  cursor: pointer;

}

.ttt-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 10px;
  background-color: rgba(246, 19, 231, 0.45);
  color: white;
  font-size: 25pt;

 /* opacity: 0.5; */
}

.ttt-card.active {
  display: flex;
}

.ttt-cell, .ttt-word-cell {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;      /* IE 10 and 11 */
    user-select: none;          /* Standard syntax */
}

/* button work */

.menu-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #F9F9F9;
  /*min-width: 200px;*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  /*z-index: 2000;*/
}


/* Links inside dropdown content */
.menu-content a {
  color: black;
  padding: 10px 10px;
  text-decoration: none;
  display: block;

}

/* Change color of dropdown links on hover */
.menu-content a:hover {
  background-color: #f1f1f1
}

/* Show the dropdown content on hover */
/*
.dropdown:hover .dropdown-content {
  display: block;
}
*/
.line {
  width: 100%; /* Stretches across its container */
  height: 0; /* No height needed if using border */
  border-top: 4px solid rgba(0, 0, 0, 0.3); /* Creates the line using the top border */
  margin: 1em 0; /* Adds spacing */
  box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.2);
}