#game
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    background-image: url('./media/gamebg.webp');
    background-size: cover;
    background-position: 50% 50%;
}

#game > div > div > div
{
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#game > div > div
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#game > div
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
}

.fieldcontainer
{
    width: min(80svw, 80svh);
    height: min(80svw, 80svh);
    display: flex;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 1024 1024"><g transform="translate(0,1024) scale(0.1,-0.1)"><path fill="%23796e63" d="M5575 10044 c-177 -11 -421 -13 -1065 -8 -729 5 -853 4 -979 -10 -80 -9 -212 -21 -295 -26 -297 -20 -762 -71 -911 -100 -82 -16 -179 -34 -215 -40 -108 -19 -369 -87 -479 -125 -125 -44 -315 -137 -431 -213 -58 -37 -134 -104 -236 -206 -171 -172 -255 -288 -330 -456 -176 -401 -190 -443 -258 -805 -19 -104 -56 -300 -82 -435 -25 -135 -52 -276 -59 -315 -7 -38 -30 -158 -53 -265 -52 -251 -61 -310 -72 -455 -5 -66 -14 -147 -20 -180 -30 -178 3 -651 70 -990 41 -209 61 -349 70 -495 5 -69 13 -186 20 -260 15 -177 10 -463 -20 -1080 -22 -460 -23 -522 -11 -700 7 -107 21 -240 31 -295 83 -467 215 -1003 297 -1210 50 -126 150 -308 222 -402 33 -44 128 -146 210 -226 204 -201 355 -299 611 -400 180 -71 362 -123 608 -174 l227 -47 425 0 c234 -1 560 4 725 11 165 7 523 17 795 23 272 6 619 18 770 25 352 19 566 19 738 0 423 -46 1157 -48 1552 -4 52 6 163 14 245 19 83 4 188 14 235 23 47 8 119 20 160 27 121 17 297 59 410 97 203 68 558 268 724 410 135 115 353 339 410 421 88 125 211 390 241 515 32 134 61 338 75 517 30 395 54 572 145 1080 13 74 31 187 39 250 22 168 31 573 16 760 -6 85 -11 261 -11 390 0 197 4 266 26 430 24 174 27 238 32 585 4 331 2 408 -12 510 -9 66 -21 174 -25 240 -23 320 -102 1086 -125 1205 -8 41 -19 113 -25 159 -26 195 -108 535 -180 747 -74 218 -207 455 -381 680 -129 167 -242 253 -497 382 -98 50 -210 100 -249 111 -157 47 -475 101 -741 126 -146 14 -275 28 -286 30 -12 3 -77 9 -146 15 -116 10 -240 25 -415 51 -38 6 -137 23 -220 39 -281 54 -361 60 -730 59 -187 -1 -443 -8 -570 -15z"/><path fill="%23c0ac98" d="M5610 9963 c-183 -10 -420 -12 -1070 -8 -721 5 -854 4 -974 -10 -76 -8 -206 -20 -290 -25 -298 -20 -754 -71 -941 -105 -397 -73 -607 -132 -850 -239 -202 -89 -294 -153 -461 -320 -195 -196 -255 -288 -364 -563 -46 -114 -91 -224 -101 -243 -30 -58 -70 -241 -155 -720 -41 -232 -81 -439 -135 -688 -22 -100 -44 -215 -49 -255 -5 -40 -14 -93 -19 -118 -6 -24 -11 -73 -11 -109 0 -36 -7 -110 -15 -165 -8 -55 -15 -159 -15 -231 0 -157 38 -496 80 -709 41 -211 70 -405 70 -473 0 -31 7 -129 15 -217 17 -183 20 -627 5 -790 -5 -60 -17 -283 -26 -495 -23 -534 -15 -642 85 -1160 39 -204 142 -614 192 -770 54 -165 151 -374 230 -495 96 -147 284 -321 497 -459 119 -77 183 -110 307 -159 242 -96 343 -126 625 -184 l225 -46 335 -5 c196 -2 397 0 485 7 83 6 463 18 845 26 382 9 765 20 850 25 85 6 295 13 465 17 250 4 340 3 465 -11 442 -46 1081 -49 1470 -5 52 6 165 14 250 19 85 4 198 15 250 24 52 9 149 26 215 38 241 42 396 95 612 208 325 170 409 229 635 449 146 142 219 248 327 472 118 245 150 396 191 899 23 277 47 469 85 683 14 75 36 199 50 275 57 320 77 658 55 937 -7 83 -12 276 -12 430 0 248 3 302 27 470 22 164 27 238 32 535 5 314 4 360 -15 500 -11 85 -23 198 -26 250 -13 226 -96 1030 -121 1160 -8 41 -19 115 -25 163 -12 100 -57 316 -100 487 -45 178 -123 387 -196 527 -37 70 -74 142 -82 158 -25 48 -90 143 -174 252 -84 109 -191 204 -310 274 -86 50 -355 171 -430 193 -167 48 -457 97 -721 121 -149 14 -279 27 -287 30 -8 2 -76 9 -150 15 -74 6 -160 15 -190 20 -30 6 -109 17 -175 26 -66 9 -169 26 -230 39 -235 50 -408 65 -726 64 -162 -1 -400 -8 -529 -16z"/><path fill="%23efe0d0" d="M5675 9853 c-188 -11 -416 -13 -1060 -8 -912 6 -737 14 -1646 -70 -754 -70 -1218 -189 -1533 -393 -99 -63 -318 -285 -387 -392 -48 -74 -159 -304 -159 -329 0 -5 -16 -47 -36 -93 -19 -46 -42 -105 -50 -131 -16 -52 -65 -299 -120 -607 -45 -257 -84 -459 -138 -715 -56 -265 -65 -322 -76 -470 -5 -66 -13 -149 -19 -185 -6 -36 -11 -92 -11 -126 0 -95 47 -473 80 -639 42 -216 70 -406 70 -478 0 -34 5 -102 10 -152 19 -172 30 -622 20 -805 -61 -1078 -60 -1141 31 -1610 37 -189 64 -309 135 -590 33 -132 119 -405 140 -445 9 -16 28 -52 42 -80 74 -147 232 -329 392 -453 105 -81 250 -168 311 -186 25 -8 63 -23 85 -34 80 -40 336 -114 554 -159 l225 -46 264 -5 c151 -2 330 0 415 7 83 6 464 18 846 26 382 9 765 20 850 26 85 5 326 13 535 16 312 5 408 3 535 -11 434 -45 952 -48 1330 -5 52 6 165 14 250 19 156 8 215 16 501 70 277 52 494 140 729 296 126 83 210 153 361 304 136 136 141 144 254 363 106 207 134 343 175 847 29 343 44 456 135 960 59 331 69 538 47 1005 -16 338 -9 580 24 835 34 259 44 682 19 855 -9 66 -21 176 -25 245 -13 192 -29 368 -50 555 -10 94 -28 260 -40 370 -11 110 -27 234 -35 275 -7 41 -19 115 -25 163 -37 297 -165 743 -270 942 -138 262 -271 429 -435 547 -60 43 -297 162 -377 189 -132 44 -449 99 -722 124 -148 14 -278 27 -290 30 -11 3 -77 9 -146 15 -169 15 -461 56 -595 85 -60 13 -182 33 -271 44 -192 25 -473 26 -849 4z"/></g></svg>');
    background-size: contain;
    background-position: 50% 50%;
    box-sizing: border-box;
    padding: min(11svw, 11svh) min(12.5svw, 12.5svh) min(14svw, 14svh) min(12.5svw, 12.5svh);
    position: relative;
}

#field
{
    width: 100%;
    height: 100%;
    min-width: max-content;
    min-height: max-content;
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: min(.5svw, .5svh);
    border-radius: 1rem;
    overflow: hidden;
    background: radial-gradient(#796e63 10%, transparent 70%);
}

#field > div
{
    background: #efe0d0;
}

#field > div > div
{
    background-size: contain;
    width: 100%;
    height: 100%;
    scale: 0;
    rotate: -180deg;
    opacity: 0;
    transition: scale .5s ease, opacity 1s ease, rotate 1s cubic-bezier(.05,1.25,.49,1.14);
}
#game div[aria-label=x] > div
{
    background-image: url('./media/x.webp');
    scale: 1;
    rotate: 0deg;
    opacity: 1;
}
#game div[aria-label=o] > div
{
    background-image: url('./media/o.webp');
    scale: 1;
    rotate: 0deg;
    opacity: 1;
}

#game .mini-lina
{
    position: absolute;
    width: min(16svw, 16svh);
    height: min(16svw, 16svh);
    bottom: max(-9.5svw, -9.5svh);
    left: min(9svw, 9svh);
}

#field > div.blendout > div
{
    opacity: .125;
}

.menu
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000060;
    backdrop-filter: blur(8px);
}

.menu > div
{
    background: #c0ac98;
    border: 6px solid #efe0d0;
    outline: 6px solid #796e63;
    box-shadow: -6px 18px 0 #796e63, 6px 18px 0 #796e63;
    border-radius: 1rem;
    max-width: 80svw;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.menu > div h1
{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-variant: normal;
    font-weight: 800;
    font-size: 2.5rem;
    color: white;
    margin: 0 0 1rem 0;
}


.menu > div h1::after
{
    content: '!';
}

.menu .menu-button-row
{
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin: 2rem 0 0 0;
}

.menu .menu-button-row button
{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    display: flex;
    justify-content: center;
    text-shadow: none !important;
    align-items: center;
    font-size: 1.35rem !important;
    padding: .25rem 1rem;
    border-radius: 100svw;
    gap: .4em;
    transition: filter .5s ease, scale .5s ease !important;
    cursor: pointer;
    width: 9rem;
}

.menu .menu-button-row button.menu_continue
{
    background: #7ebd9f;
    border: 3px solid #83f3bd;
    outline: 3px solid #457a61;
}

.menu .menu-button-row button.menu_back
{
    background: #cf7993;
    border: 3px solid #f5779d;
    outline: 3px solid #7a455b;
}

.menu .menu-button-row button:hover
{
    filter: saturate(120%) brightness(120%);
    scale: 1.1;
}

.menu button > span
{
    transform: translateY(-1px);
}

.menu button svg
{
    width: 1rem;
    transform: translateY(1px);
}

.menu .menu-input-box
{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background: #978471;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 0 .5rem #00000080 inset;
    border-radius: 1rem;
    height: 12rem;
    justify-content: center;
}

.menu > div > div label, .menu > div > div h2
{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: white;
    margin: 0 0 1rem 0;
}

.menu > div > div input[type=text]
{
    background: transparent;
    outline: none;
    border: none;
    height: 2rem;
    font-size: 1.5rem;
    color: #ffea8c;
    border-bottom: 2px solid #c0ac98;
    text-align: center;
    min-width: 60%;
}
.menu > div > div input[type=text]::placeholder
{
  color: #ffffff90;
  opacity: 1;
}

.menu > div > div
{
    width: 100%;
    box-sizing: border-box;
}

.menu > div > div .diffselect, .menu > div > div .symselect
{
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.menu > div > div .diffselect > div
{
    padding: .4rem .8rem;
    border-radius: .5rem;
    font-size: 1.75rem;
    font-family: 'nihonium', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: black;
    background: #efe0d0;
    border: 3px solid #c0ac98;
    box-sizing: border-box;
    cursor: pointer;
    transition: scale .5s ease;
}

.menu > div > div .diffselect > div.selected
{
    outline: 3px solid #ffea8c;
    pointer-events: none;
}

.menu > div > div .diffselect > div:hover
{
    scale: 1.1;
}

.menu .symselect > div:not(.selected)
{
    filter: saturate(10%);
}

.menu .symselect > div.selected
{
    pointer-events: none;
}

.menu .symselect > div
{
    width: 4rem;
    height: 4rem;
    cursor: pointer;
    transition: scale .5s ease, filter .5s ease;
}

.menu .symselect > div:hover
{
    filter: saturate(50%) brightness(110%);
    scale: 1.1;
}

.menu .symselect > div > div
{
    width: 100%;
    height: 100%;
    background-size: contain;
}

#gameover
{
    position: absolute;
    width: 100%;
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: opacity 2s ease;
}

#gameover > div
{
    width: min(60rem, 90svw);
    background: #c0ac98;
    border: 6px solid #efe0d0;
    outline: 6px solid #796e63;
    box-shadow: -6px 18px 0 #796e63, 6px 18px 0 #796e63;
    border-radius: 1rem;
    max-width: 80svw;
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

#gameover > div h1
{
    font-size: min(3rem, min(4.5svw, 4.5svh));
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-variant: normal;
    font-weight: 700;
    color: #000000;
    margin: 0 0 2rem 0;
}

#gameover .points_row
{
    display: flex;
    align-items: center;
    gap: 1rem;
}

#gameover .points_row > div
{
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 100svw;
    font-weight: 600;
    color: black;
    box-shadow: .25rem .25rem 0 #00000040;
}

#gameover .points_row > div > span
{
    padding: .5rem 1rem;
    background: #ffce73;
}

#gameover .points_row > div > span:nth-child(2)
{
    padding: .5rem 1rem;
    background: #ffe3c6;
}

#playertitle
{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3rem;
    margin: -2.5rem 0 .5rem 0;
    font-weight: 700;
}

#game #homebutton
{
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 4rem;
    height: 4rem;
    min-width: 4rem;
    min-height: 4rem;
    box-sizing: border-box;
    padding: .75rem;
    border-radius: 25%;
    background: #c0ac98;
    border: 3px solid #efe0d0;
    outline: 3px solid #796e63;
    cursor: pointer;
    transition: filter .5s ease;
}

#game #homebutton:hover
{
    filter: saturate(120%) brightness(120%);
}

@keyframes slidein
{
    from { transform: translateX(100svw); }
    to { transform: translateX(0); }    
}

@keyframes slideout
{
    from { transform: translateX(0); }    
    to { transform: translateX(-100svw); }
}