@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Dongle&display=swap');
.tic-tac-toe-root * { box-sizing: border-box; }
.tic-tac-toe-root { width: 100%; height: 100%; overflow-y: auto; }
.ttt-avatar { width: 40px; height: 40px; border-radius: 50%; vertical-align: middle; margin-right: 5px; }
.ttt-player { display: flex; align-items: center; opacity: 0.5; transition: opacity 0.3s; position: relative; }
.ttt-player.active { opacity: 1.0; font-weight: bold; }
.ttt-vs { position: relative; margin: 0 10px; align-self: center; font-family: "Concert One", sans-serif; color: #000; font-size: 20px; text-transform: uppercase; background-color: #FFF; font-weight: normal; border-radius: 50%; width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; }
.ttt-turn-indicator { text-align:center; margin-bottom:20px; font-size: 20px; font-family: "Concert One", sans-serif; }
.ttt-instructions { text-align:center; margin-top:20px; font-size: 20px; font-family: "Concert One", sans-serif; color: #64748B; }

.active-x img {
    border: 4px solid #0392E3;
}

.active-o img {
    border: 4px solid #FA2836;
}

.ttt-vs.active::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 20px;
    content: "";
}

.ttt-vs.activeuser-x.left::before {
    left: -16px;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='18' height='20' viewBox='0 0 18 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.50804e-06 9.95935L17.25 5.94825e-05L17.25 19.9186L1.50804e-06 9.95935Z' fill='%230392E3'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

.ttt-vs.activeuser-x.right::before {
    right: -16px;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='18' height='20' viewBox='0 0 18 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.25 9.95935L9.69333e-07 19.9186L1.84e-06 5.74201e-05L17.25 9.95935Z' fill='%230392E3'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

.ttt-vs.activeuser-o.left::before {
    left: -16px;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='18' height='20' viewBox='0 0 18 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.50804e-06 9.95935L17.25 5.94825e-05L17.25 19.9186L1.50804e-06 9.95935Z' fill='%23FA2836'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

.ttt-vs.activeuser-o.right::before {
    right: -16px;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='18' height='20' viewBox='0 0 18 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.25 9.95935L9.69333e-07 19.9186L1.84e-06 5.74201e-05L17.25 9.95935Z' fill='%23FA2836'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

@media (max-width: 768px) {
    .ttt-vs {
        font-size: 16px;
        width: 35px;
        height: 35px;
    }
}

.ttt-lobby {
    text-align: center;
    padding: 20px;
    background: #D8ECF4;
    min-height: 100%;
    font-family: "Dongle", sans-serif;
    color: #000;
    flex-direction: column;
}

@media (max-width: 768px) {
    .ttt-lobby {
        padding: 15px;
        height: 100dvh;
    }
}

.ttt-start {
    text-align: center;
    padding: 30px 20px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid rgba(37, 140, 244, 0.05);
}

@media (min-width: 769px) {
    .ttt-start.returning img {
        float: left;
        margin: 0;
        max-width: 124px;
    }

    .ttt-start.returning {
        padding: 30px 122px 30px 20px;
    }
}

@media (min-width: 769px) and (max-width: 1400px) {
    .ttt-lobby .ttt-start h2 {
        font-size: 40px;
        line-height: 40px;
    }
}

.ttt-start img {
    margin-bottom: 20px;
    max-width: 210px;
    border-radius: 10px;
}

.ttt-start h2 {
    font-size: 60px;
    line-height: 60px;
    font-weight: 400;
    margin: 0;
    color: #000;
}

@media (max-width: 768px) {
    .ttt-start h2 {
        font-size: 40px;
        line-height: 44px;
        margin: 0;
    }

    .ttt-start img {
        max-width: 150px;
        margin-bottom: 0;
    }
}

.ttt-start .ttt-btn {
    margin-top: 14px;
}

.ttt-btn {
    padding: 10px 20px 8px 50px;
    font-size: 28px;
    font-weight: normal;
    background: #258CF4;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.6 7.99556L5.55 8.82056C5.78333 8.3539 6.025 7.9039 6.275 7.47056C6.525 7.03723 6.8 6.6039 7.1 6.17056L5.7 5.89556V5.89556V5.89556L3.6 7.99556V7.99556M7.15 10.0706L10 12.8956C10.7 12.6289 11.45 12.2206 12.25 11.6706C13.05 11.1206 13.8 10.4956 14.5 9.79556C15.6667 8.6289 16.5792 7.33306 17.2375 5.90806C17.8958 4.48306 18.1833 3.17056 18.1 1.97056C16.9 1.88723 15.5833 2.17473 14.15 2.83306C12.7167 3.4914 11.4167 4.4039 10.25 5.57056C9.55 6.27056 8.925 7.02056 8.375 7.82056C7.825 8.62056 7.41667 9.37056 7.15 10.0706V10.0706M11.6 8.44556C11.2167 8.06223 11.025 7.5914 11.025 7.03306C11.025 6.47473 11.2167 6.0039 11.6 5.62056C11.9833 5.23723 12.4583 5.04556 13.025 5.04556C13.5917 5.04556 14.0667 5.23723 14.45 5.62056C14.8333 6.0039 15.025 6.47473 15.025 7.03306C15.025 7.5914 14.8333 8.06223 14.45 8.44556C14.0667 8.8289 13.5917 9.02056 13.025 9.02056C12.4583 9.02056 11.9833 8.8289 11.6 8.44556V8.44556M12.075 16.4706L14.175 14.3706V14.3706V14.3706L13.9 12.9706C13.4667 13.2706 13.0333 13.5414 12.6 13.7831C12.1667 14.0247 11.7167 14.2622 11.25 14.4956L12.075 16.4706V16.4706M19.9 0.145565C20.2167 2.16223 20.0208 4.12473 19.3125 6.03306C18.6042 7.9414 17.3833 9.76223 15.65 11.4956V11.4956V11.4956L16.15 13.9706C16.2167 14.3039 16.2 14.6289 16.1 14.9456C16 15.2622 15.8333 15.5372 15.6 15.7706L11.4 19.9706L9.3 15.0456L5.025 10.7706L0.1 8.67056L4.275 4.47056C4.50833 4.23723 4.7875 4.07056 5.1125 3.97056C5.4375 3.87056 5.76667 3.8539 6.1 3.92056L8.575 4.42056V4.42056V4.42056C10.3083 2.68723 12.125 1.46223 14.025 0.745565C15.925 0.0288979 17.8833 -0.171102 19.9 0.145565V0.145565M1.875 13.9456C2.45833 13.3622 3.17083 13.0664 4.0125 13.0581C4.85417 13.0497 5.56667 13.3372 6.15 13.9206C6.73333 14.5039 7.02083 15.2164 7.0125 16.0581C7.00417 16.8997 6.70833 17.6122 6.125 18.1956C5.70833 18.6122 5.0125 18.9706 4.0375 19.2706C3.0625 19.5706 1.71667 19.8372 0 20.0706C0.233333 18.3539 0.5 17.0081 0.8 16.0331C1.1 15.0581 1.45833 14.3622 1.875 13.9456V13.9456M3.3 15.3456C3.13333 15.5122 2.96667 15.8164 2.8 16.2581C2.63333 16.6997 2.51667 17.1456 2.45 17.5956C2.9 17.5289 3.34583 17.4164 3.7875 17.2581C4.22917 17.0997 4.53333 16.9372 4.7 16.7706C4.9 16.5706 5.00833 16.3289 5.025 16.0456C5.04167 15.7622 4.95 15.5206 4.75 15.3206C4.55 15.1206 4.30833 15.0247 4.025 15.0331C3.74167 15.0414 3.5 15.1456 3.3 15.3456V15.3456' fill='white'/%3E%3C/svg%3E%0A");
    background-position: center left 20px;
    background-repeat: no-repeat;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0px 10px 15px -3px rgba(37, 140, 244, 0.2), 0px 4px 6px -4px rgba(37, 140, 244, 0.2);
    border-radius: 8px;
    font-family: "Dongle", sans-serif;
}

.ttt-btn:hover { background: #0056b3; background-image: url("data:image/svg+xml,%0A%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.6 7.99556L5.55 8.82056C5.78333 8.3539 6.025 7.9039 6.275 7.47056C6.525 7.03723 6.8 6.6039 7.1 6.17056L5.7 5.89556V5.89556V5.89556L3.6 7.99556V7.99556M7.15 10.0706L10 12.8956C10.7 12.6289 11.45 12.2206 12.25 11.6706C13.05 11.1206 13.8 10.4956 14.5 9.79556C15.6667 8.6289 16.5792 7.33306 17.2375 5.90806C17.8958 4.48306 18.1833 3.17056 18.1 1.97056C16.9 1.88723 15.5833 2.17473 14.15 2.83306C12.7167 3.4914 11.4167 4.4039 10.25 5.57056C9.55 6.27056 8.925 7.02056 8.375 7.82056C7.825 8.62056 7.41667 9.37056 7.15 10.0706V10.0706M11.6 8.44556C11.2167 8.06223 11.025 7.5914 11.025 7.03306C11.025 6.47473 11.2167 6.0039 11.6 5.62056C11.9833 5.23723 12.4583 5.04556 13.025 5.04556C13.5917 5.04556 14.0667 5.23723 14.45 5.62056C14.8333 6.0039 15.025 6.47473 15.025 7.03306C15.025 7.5914 14.8333 8.06223 14.45 8.44556C14.0667 8.8289 13.5917 9.02056 13.025 9.02056C12.4583 9.02056 11.9833 8.8289 11.6 8.44556V8.44556M12.075 16.4706L14.175 14.3706V14.3706V14.3706L13.9 12.9706C13.4667 13.2706 13.0333 13.5414 12.6 13.7831C12.1667 14.0247 11.7167 14.2622 11.25 14.4956L12.075 16.4706V16.4706M19.9 0.145565C20.2167 2.16223 20.0208 4.12473 19.3125 6.03306C18.6042 7.9414 17.3833 9.76223 15.65 11.4956V11.4956V11.4956L16.15 13.9706C16.2167 14.3039 16.2 14.6289 16.1 14.9456C16 15.2622 15.8333 15.5372 15.6 15.7706L11.4 19.9706L9.3 15.0456L5.025 10.7706L0.1 8.67056L4.275 4.47056C4.50833 4.23723 4.7875 4.07056 5.1125 3.97056C5.4375 3.87056 5.76667 3.8539 6.1 3.92056L8.575 4.42056V4.42056V4.42056C10.3083 2.68723 12.125 1.46223 14.025 0.745565C15.925 0.0288979 17.8833 -0.171102 19.9 0.145565V0.145565M1.875 13.9456C2.45833 13.3622 3.17083 13.0664 4.0125 13.0581C4.85417 13.0497 5.56667 13.3372 6.15 13.9206C6.73333 14.5039 7.02083 15.2164 7.0125 16.0581C7.00417 16.8997 6.70833 17.6122 6.125 18.1956C5.70833 18.6122 5.0125 18.9706 4.0375 19.2706C3.0625 19.5706 1.71667 19.8372 0 20.0706C0.233333 18.3539 0.5 17.0081 0.8 16.0331C1.1 15.0581 1.45833 14.3622 1.875 13.9456V13.9456M3.3 15.3456C3.13333 15.5122 2.96667 15.8164 2.8 16.2581C2.63333 16.6997 2.51667 17.1456 2.45 17.5956C2.9 17.5289 3.34583 17.4164 3.7875 17.2581C4.22917 17.0997 4.53333 16.9372 4.7 16.7706C4.9 16.5706 5.00833 16.3289 5.025 16.0456C5.04167 15.7622 4.95 15.5206 4.75 15.3206C4.55 15.1206 4.30833 15.0247 4.025 15.0331C3.74167 15.0414 3.5 15.1456 3.3 15.3456V15.3456' fill='white'/%3E%3C/svg%3E%0A");
    background-position: center left 20px;
    background-repeat: no-repeat; }


.ttt-btn.btn-7x7 { 
    background-color: #FDB714;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.6 7.99556L5.55 8.82056C5.78333 8.3539 6.025 7.9039 6.275 7.47056C6.525 7.03723 6.8 6.6039 7.1 6.17056L5.7 5.89556V5.89556V5.89556L3.6 7.99556V7.99556M7.15 10.0706L10 12.8956C10.7 12.6289 11.45 12.2206 12.25 11.6706C13.05 11.1206 13.8 10.4956 14.5 9.79556C15.6667 8.6289 16.5792 7.33306 17.2375 5.90806C17.8958 4.48306 18.1833 3.17056 18.1 1.97056C16.9 1.88723 15.5833 2.17473 14.15 2.83306C12.7167 3.4914 11.4167 4.4039 10.25 5.57056C9.55 6.27056 8.925 7.02056 8.375 7.82056C7.825 8.62056 7.41667 9.37056 7.15 10.0706V10.0706M11.6 8.44556C11.2167 8.06223 11.025 7.5914 11.025 7.03306C11.025 6.47473 11.2167 6.0039 11.6 5.62056C11.9833 5.23723 12.4583 5.04556 13.025 5.04556C13.5917 5.04556 14.0667 5.23723 14.45 5.62056C14.8333 6.0039 15.025 6.47473 15.025 7.03306C15.025 7.5914 14.8333 8.06223 14.45 8.44556C14.0667 8.8289 13.5917 9.02056 13.025 9.02056C12.4583 9.02056 11.9833 8.8289 11.6 8.44556V8.44556M12.075 16.4706L14.175 14.3706V14.3706V14.3706L13.9 12.9706C13.4667 13.2706 13.0333 13.5414 12.6 13.7831C12.1667 14.0247 11.7167 14.2622 11.25 14.4956L12.075 16.4706V16.4706M19.9 0.145565C20.2167 2.16223 20.0208 4.12473 19.3125 6.03306C18.6042 7.9414 17.3833 9.76223 15.65 11.4956V11.4956V11.4956L16.15 13.9706C16.2167 14.3039 16.2 14.6289 16.1 14.9456C16 15.2622 15.8333 15.5372 15.6 15.7706L11.4 19.9706L9.3 15.0456L5.025 10.7706L0.1 8.67056L4.275 4.47056C4.50833 4.23723 4.7875 4.07056 5.1125 3.97056C5.4375 3.87056 5.76667 3.8539 6.1 3.92056L8.575 4.42056V4.42056V4.42056C10.3083 2.68723 12.125 1.46223 14.025 0.745565C15.925 0.0288979 17.8833 -0.171102 19.9 0.145565V0.145565M1.875 13.9456C2.45833 13.3622 3.17083 13.0664 4.0125 13.0581C4.85417 13.0497 5.56667 13.3372 6.15 13.9206C6.73333 14.5039 7.02083 15.2164 7.0125 16.0581C7.00417 16.8997 6.70833 17.6122 6.125 18.1956C5.70833 18.6122 5.0125 18.9706 4.0375 19.2706C3.0625 19.5706 1.71667 19.8372 0 20.0706C0.233333 18.3539 0.5 17.0081 0.8 16.0331C1.1 15.0581 1.45833 14.3622 1.875 13.9456V13.9456M3.3 15.3456C3.13333 15.5122 2.96667 15.8164 2.8 16.2581C2.63333 16.6997 2.51667 17.1456 2.45 17.5956C2.9 17.5289 3.34583 17.4164 3.7875 17.2581C4.22917 17.0997 4.53333 16.9372 4.7 16.7706C4.9 16.5706 5.00833 16.3289 5.025 16.0456C5.04167 15.7622 4.95 15.5206 4.75 15.3206C4.55 15.1206 4.30833 15.0247 4.025 15.0331C3.74167 15.0414 3.5 15.1456 3.3 15.3456V15.3456' fill='white'/%3E%3C/svg%3E%0A");
    background-position: center left 20px;
    background-repeat: no-repeat;
}

.ttt-btn.btn-7x7:hover {
    background-color: #F8951D;
}

.ttt-game {
    width: 545px;
    margin: 0 auto;
    font-family: sans-serif;
}

@media (max-width: 768px) {
    .ttt-game {
        width: 100%;
        height: 100dvh;
        background: #D8ECF4;
        padding: 15px;
        flex-direction: column;
    }

    .ttt-board {
        position: absolute;
        top: 50%;
        left: 15px;
        right: 15px;
        transform: translateY(-50%);
    }
}

.ttt-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: bold;
}

@media (min-width: 769px) and (max-width: 1440px) {
    .ttt-header {
        margin: 0 -80px 10px -80px;
    }
}

.ttt-user {
    display: flex;
    flex-direction: column;
}

#ttt-user-score {
    position: absolute;
    color: #FFF;
    background-color: #2ecc71;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    left: -9px;
    bottom: -3px;
    font-size: 12px;
}

#ttt-me-name,
#ttt-opp-name {
    font-family: "Concert One", sans-serif;
    font-size: 24px;
    font-weight: normal;
}

.ttt-symbol {
    display: none !important
}

@media (max-width: 1040px) {
    #ttt-me-name,
    #ttt-opp-name {
        font-size: 18px;
    }
}

.ttt-timer {
    font-size: 24px;
    font-family: "Dongle", sans-serif;
    font-weight: 400;
}

.ttt-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background: transparent;
    border: 0;
}

.ttt-board.disabled {
    opacity: 0.6;
    pointer-events: none; /* Disables clicking */
}

.ttt-cell {
    background: white;
    height: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .ttt-cell {
        height: 110px;
    }
}

.ttt-cell:hover { background: #eee; }

.ttt-cell.is-x {
    text-indent: -9999px;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='121' height='113' viewBox='0 0 121 113' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.7015 0.0249228L27.3741 0.261689L28.688 0.976143L29.885 1.92736L34.7859 6.80808L41.3594 13.7117V13.9485L41.7181 14.0689L46.3812 18.9496L52.9547 25.8533L55.1069 28.2334L59.0527 32.3996L59.891 33.3509L60.9671 34.543L61.3259 34.6635L61.5636 34.1858L62.8775 32.8773L63.9536 31.5689L66.5854 28.7111L73.6386 20.8521L79.9743 13.7075L81.2881 12.0419L90.7312 1.80275L91.8073 0.851529L93.0044 0.257536L94.0805 0.137075L95.6363 0.373842L97.9095 0.967836L100.9 2.03952L104.128 3.46842L107.594 5.25456L110.226 6.80393L111.54 7.75515L113.571 9.18405L114.648 10.019L115.845 11.0906L117.279 12.3991L118.118 13.5912L118.239 13.828V14.8997L117.521 16.3286L116.208 17.878L115.728 18.472L113.934 20.2581L113.697 20.6153H113.459L113.221 21.093L108.199 26.0942L107.361 27.0454L106.047 28.3538L105.209 29.3051L103.536 30.9707L102.698 31.922L94.3308 40.2545L93.6134 41.0894H93.3756V41.3262L92.4205 42.1611L88.116 46.4478L80.8252 53.8291L80.9461 54.3068L82.26 55.6152L85.3674 59.067L87.0399 60.8532L90.8647 65.1399L94.3308 68.9489L97.0795 72.0435L98.1556 73.2357L100.07 75.2586L101.384 76.8079L102.222 77.6428L103.061 78.5941L104.495 80.2597L105.334 81.211L107.724 83.7115L109.159 85.3772L112.266 88.829L113.104 89.7803L113.943 90.6152L115.974 92.9953L116.812 93.9465L118.965 96.3266L119.803 97.2779L120.641 98.47L121 99.3049V100.14L120.283 101.569L119.206 102.761L117.413 104.19L115.382 105.498L112.75 107.048L110.598 108.24L107.49 109.669L104.141 110.977L100.913 112.049L98.4016 112.763L96.7291 113H95.1733L93.8595 112.643L92.5456 111.808L90.9898 110.379L89.9137 109.307L89.0753 108.356L87.7615 106.927L85.0128 103.712L82.7396 101.091L80.5874 98.5905L78.3142 95.9694L73.5343 90.611L72.4582 89.3026L68.8711 85.2526L62.2977 77.8713L60.5042 75.9647L60.2664 75.487L59.549 75.3666L57.5177 77.3895L53.8097 81.913L51.7785 84.2931L49.6263 86.7937L46.9944 89.8883L42.2144 95.4834L36.3584 102.271L34.0852 104.892L31.3365 108.107L29.7808 110.013L27.8663 111.92L26.6692 112.634L25.4721 112.992L23.4409 112.871L20.93 112.394L16.6255 110.965L13.2762 109.656L11.003 108.585L8.25436 107.035L5.98118 105.606L4.4254 104.535L2.99059 103.463L1.79352 102.391L0.838366 101.44L0.358704 100.605L0 99.6538L0.120958 99.0598L0.717408 97.8677L2.15222 96.202L3.10738 95.0099L4.18349 93.8177L6.33571 91.1967L6.93216 90.6027L8.24602 89.0533L9.08438 88.1021L9.92275 87.2672L12.075 84.7666L19.9665 75.9564L20.9216 74.7643L34.0727 60.4793L34.9111 59.5281L35.5075 58.9341L36.9423 57.3848L38.0184 56.1926L38.8568 55.1209L39.6952 54.286L40.0539 54.0493L39.8161 53.4553L35.3949 49.0522V48.8155L35.0362 48.695V48.4582L34.6775 48.3378L33.8391 47.3866L25.5889 39.054L15.9039 29.1721L7.65374 20.4824L6.57763 19.1739L4.66315 17.151L3.46608 15.7221L2.98642 14.7709L2.86546 14.4137V13.4625L3.22416 12.6276L4.30028 11.4354L6.33154 9.41251L7.88731 8.22037L9.91858 6.79146L11.7121 5.59932L14.8195 3.93365L17.5681 2.6252L20.5587 1.43306L23.0697 0.598147L24.8632 0.12046L25.7015 0V0.0249228Z' fill='%230392E3'/%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 1630px) {
    .ttt-cell.is-x {
        background-size: 60%;
    }
}

.ttt-cell.is-o {
    text-indent: -9999px;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='118' height='114' viewBox='0 0 118 114' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M117.732 52.5907L117.372 49.966L116.891 46.867L116.049 43.1691L115.208 40.0701L114.366 37.566L112.687 33.5103L111.368 30.8856L109.69 27.9031L108.011 25.2783L107.169 24.0845L105.608 21.9381L103.929 19.9124L102.849 18.6021L99.9682 15.7402L98.4066 14.4299L96.7278 12.999L95.1662 11.8052L93.3659 10.4949L91.9257 9.54229L90.004 8.34846L87.3623 6.91754L84.7205 5.60724L81.9615 4.41341L78.4824 3.21959L75.0034 2.14639L70.6828 1.19383L67.9238 0.715464L64.0847 0.237101L59.8855 0H58.0852L53.886 0.237101L50.0469 0.715464L47.2879 1.19383L42.9673 2.14639L39.4882 3.21959L36.0091 4.41341L33.2502 5.60724L30.6084 6.91754L27.9666 8.34846L26.045 9.54229L24.6048 10.4949L22.8045 11.8052L21.2429 12.999L19.5641 14.4299L18.0025 15.7402L15.1221 18.6021L14.0419 19.9124L12.3631 21.9381L10.8015 24.0845L9.95997 25.2783L8.28114 27.9031L6.6023 30.8856L5.28352 33.5103L3.60468 37.566L2.76316 40.0701L1.92166 43.1691L1.08014 46.867L0.598684 49.966L0.238628 52.5907L0 56.2887V60.5815L0.360044 65.1114L0.958728 69.0464L1.4402 71.4299L2.2817 74.7701L3.48326 78.3474L4.56342 80.8516L5.40492 82.7609L6.60649 85.0279L7.92528 87.4114L9.12684 89.2L10.567 91.2258L11.2871 92.1784L12.8488 94.0876L14.1675 95.5186L18.0067 99.333L20.6484 101.479L22.0886 102.553L24.2489 103.984L26.1706 105.177L29.1724 106.845L32.5343 108.397L35.7747 109.707L39.8567 111.018L42.9757 111.854L46.2161 112.569L49.4566 113.164L53.1785 113.642L55.3388 113.879L57.6205 114H60.3795L62.6612 113.879L64.8215 113.642L68.5434 113.164L71.7839 112.569L75.0243 111.854L78.1433 111.018L82.2253 109.707L85.4658 108.397L88.8276 106.845L91.8294 105.177L93.7511 103.984L95.9114 102.553L97.3516 101.479L99.9933 99.333L103.832 95.5186L105.151 94.0876L106.713 92.1784L107.433 91.2258L108.873 89.2L110.075 87.4114L111.394 85.0279L112.595 82.7609L113.437 80.8516L114.517 78.3474L115.718 74.7701L116.56 71.4299L117.041 69.0464L117.64 65.1114L118 60.5815V56.2887L117.761 52.5907H117.732ZM86.8934 58.4309L86.5333 62.6031L86.0519 65.2278L85.2104 68.2103L84.3688 70.5938L83.4101 72.6196L81.9699 75.1237L80.7684 76.9124L79.5668 78.3433L78.1266 80.0113L76.8078 81.0845L75.489 82.2783L73.2073 83.8299L71.6457 84.666L68.6439 85.9763L66.4836 86.6917L63.4818 87.4072L60.1199 87.8856H57.8382L54.4764 87.4072L51.4745 86.6917L49.3142 85.9763L46.3124 84.666L44.7508 83.8299L42.4691 82.2783L41.1503 81.0845L39.8315 80.0113L38.3913 78.3433L37.1898 76.9124L35.9882 75.1237L34.548 72.6196L33.5893 70.5938L32.7478 68.2103L31.9063 65.2278L31.4248 62.6031L31.0647 58.4309V54.3752L31.5462 50.6773L32.1449 47.6948L32.865 44.9536L33.7065 42.6866L34.4266 41.0185L35.6282 38.7515L37.0684 36.6051L38.1485 35.1742L39.2287 33.8639L42.3477 30.7649L43.9093 29.5711L45.5882 28.3773L47.627 27.3041L50.386 26.1103L52.9064 25.2742L56.3855 24.5587L58.9644 24.3549L61.5434 24.5587L65.0225 25.2742L67.5428 26.1103L70.3018 27.3041L72.3407 28.3773L74.0195 29.5711L75.5811 30.7649L78.7002 33.8639L79.7803 35.1742L80.8605 36.6051L82.3007 38.7515L83.5022 41.0185L84.2223 42.6866L85.0638 44.9536L85.7839 47.6948L86.3826 50.6773L86.8641 54.3752V58.4309H86.8934Z' fill='%23FA2836'/%3E%3C/svg%3E%0A");    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 1630px) {
    .ttt-cell.is-o {
        background-size: 60%;
    }
}

.ttt-status, .ttt-login-msg {
    margin-top: 15px;
    text-align: center;
    color: #64748B;
    width: 100%;
    grid-column: 1 / -1;
    font-size: 24px;
}

@media (max-width: 600px) {
    .ttt-status, .ttt-login-msg {
        font-size: 20px;
        line-height: 16px;
    }
}

/* --- Game Status Colors --- */
.ttt-text-success { color: #333; } /* Green for Wins / Your Turn */
.ttt-text-danger  { color: #333; } /* Red for Losses / Opponent Turn */
.ttt-text-warning { color: #f39c12; } /* Orange for Draws */
.ttt-text-default { color: #333;    } /* Dark Grey default */

/* --- Lobby Player Cards --- */
.ttt-lobby-list {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-height: 250px;
    width: 100%;
}

@media (max-width: 1440px) {
    .ttt-lobby-list {
        grid-template-columns: repeat(2, 1fr);
        overflow-y: auto;
        max-height: initial;
        flex: 1;
        align-items: start;

    }
}

@media (max-width: 768px) {
    .ttt-lobby-list {
        display: flex;
        flex-direction: column;
    }
}

.ttt-lobby-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid rgba(37, 140, 244, 0.05);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    width: 100%;
}

.ttt-lobby-card-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Concert One", sans-serif;
    font-weight: normal;
    font-size: 20px;
}

/* A green variant of your standard button for "Join" */
.ttt-btn-join {
    background: #2ecc71; 
    padding: 6px 15px 4px;
    font-size: 22px;
}
.ttt-btn-join:hover {
    background: #27ae60;
}
/* A red variant of your standard button for "Leave Lobby" */
.ttt-btn-leave {
    background: #e74c3c; 
    padding: 6px 15px 4px;
    font-size: 22px;
}
.ttt-btn-leave:hover {
    background: #c0392b;
}

@media (min-width: 769px) {
    .tic-tac-toe-root {
        width: 100%;
        height: 100%;
        container-type: size;
    }

    .ttt-game {
        --ttt-padding: 20px;
        --ttt-ui-space: 140px;
        width: min(515px, calc(100cqw - (var(--ttt-padding) * 2)), calc(100cqh - var(--ttt-ui-space)));
        max-width: 100%;
        height: 100%;
        margin: 0 auto;
        padding: var(--ttt-padding);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    .ttt-board {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        background: transparent;
        border: 0;
    }

    .ttt-cell {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        min-height: 0;
    }
}

.play123-en,
.play123-sl,
.play123-hr,
.play123-rs,
.play123-it,
.play123-es,
.play123-pt,
.play123-nl,
.play123-de,
.play123-fr {
    position: relative;
}

.play123-en::after {
    position: absolute;
    right: 2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    background: url(../common/icons/play123-EN.svg) no-repeat center;
    background-size: cover;
    content: "";
}

.play123-sl::after {
    position: absolute;
    right: 2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    background: url(../common/icons/play123-SI.svg) no-repeat center;
    background-size: cover;
    content: "";
}

.play123-pt::after {
    position: absolute;
    right: 2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    background: url(../common/icons/play123-PT.svg) no-repeat center;
    background-size: cover;
    content: "";
}

.play123-it::after {
    position: absolute;
    right: 2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    background: url(../common/icons/play123-IT.svg) no-repeat center;
    background-size: cover;
    content: "";
}

.play123-de::after {
    position: absolute;
    right: 2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    background: url(../common/icons/play123-DE.svg) no-repeat center;
    background-size: cover;
    content: "";
}

.play123-hr::after {
    position: absolute;
    right: 2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    background: url(../common/icons/play123-HR.svg) no-repeat center;
    background-size: cover;
    content: "";
}

.play123-rs::after {
    position: absolute;
    right: 2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    background: url(../common/icons/play123-RS.svg) no-repeat center;
    background-size: cover;
    content: "";
}

.play123-nl::after {
    position: absolute;
    right: 2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    background: url(../common/icons/play123-NL.svg) no-repeat center;
    background-size: cover;
    content: "";
}

.play123-es::after {
    position: absolute;
    right: 2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    background: url(../common/icons/play123-ES.svg) no-repeat center;
    background-size: cover;
    content: "";
}

.play123-fr::after {
    position: absolute;
    right: 2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    background: url(../common/icons/play123-FR.svg) no-repeat center;
    background-size: cover;
    content: "";
}

/* Force the grid to 7 columns for the 7x7 game */
.ttt-board.is-7x7 {
    grid-template-columns: repeat(7, 1fr);
    gap: 4px; /* Slightly smaller gap for the larger board */
}

/* Make the cells fluid and force the SVG symbols to scale down */
.ttt-board.is-7x7 .ttt-cell {
    width: 100%; 
    height: auto; 
    aspect-ratio: 1 / 1; /* Keeps every cell perfectly square automatically */
    background-size: 70%; /* THIS FIXES IT: Forces the X and O to shrink inside the small cells */
}

/* --- Game Mode Badges --- */
.ttt-mode-badge {
    font-size: 14px;
    padding: 0px 6px;
    border-radius: 5px;
    color: #fff;
    font-family: "Concert One", sans-serif;
    vertical-align: middle;
}

/* Blue for 3x3 */
.ttt-mode-badge.is-3x3 {
    background-color: #0392E3;
}

/* Red for 7x7 */
.ttt-mode-badge.is-7x7 {
    background-color: #FDB714;
}