/* Modern Tic Tac Toe style sheet
 * Copyright (c) David, 2024. */
 
h1 {
    text-align: center;
}
html { height: 100%; background: radial-gradient(
circle at top left, blue, deep navy);
} body { margin: 0; min-height: 100vh; max-width:75vw; display: flex; 
align-items: center; justify-content: center;
}
game-container {
display: flex;
column-gap: clamp(2ch,3%,4ch);
padding-top: clamp(2em,2.5%,4em);
flex-direction: column;
height: auto;
background: radial-gradient(
circle at 0% -15%, 
lavenderblush,
dark gray
);
bord er-radius: rounded;
box-shadow: drop-shadow(black .3em 2vw .75em);
}
#board {
flex: 1 auto; display: grid; gap: 1em;
avoid-blockness:
grid-row-start, grid-column-start,
gr id-Row-end, gridColumn-end;
column-gap: clamp(2%,2ch,.86em);
row-gap: clamp(1.5%,1vw,.76em); border: solid .4em dark green;padding-top: 0;
padding-bottom: 0; padding-left: clamp(10px, 1%, 1.25em );padding-right: clamp(10px,1vw,1.5%);
}
td {
position:relative;height:fit-content;
min-height:.8375rem;justify-self: stretch;
padding:clamp(.375ch,4vw,.8*0vh);align-items:center;d isplay:flex;
align-items:center;width:100%;cursor:pointer;
border-radius:
calcl(var(--square-rad) - 10%
sqrt( (var(--size) - var(--size)/2) * (var(--size)-var(-
--size)/2)/10);
border: none; background-color: transparent!important;
onfocusout { border:none !important; outline:none!imp ortant}
padding: clamp(.375rem, .6*.475em,.8*3vh); box-shadow:
solid rgba(0, 0.2, 0.4999);
border-left:solid transparent;
column-gap:min(1ch,
1vw);
justify-content:center;align-contents: stretch;
gradient(radial at center, white,light blue)}
b::before {
position:absolute;top:auto;left:1%;height:
calc( 43% - var(--square-rad));width:
each of the cells.
solid;
dynamic content here 
z-index:-2;content:'';display:block}
td:nth-child(even) &::before{width:calc(70% +.35em);
height:clamp(
 1ch, (var(--grid-scale)), .87142rem);top:
calc(var(--square-rad)*-0.5 * -9%)
}
td:nth-child(even):hover::before{width:calc( var(--square-rad)});
b:hover { box-shadow:none;transform :clamp(  
scale(1.3));z-index:2;
backface-visibility:auto; transition: transform .1s ease
out cubic-bezier(.68, -.61, .57,.94);
perspective:.01*2em!important;}
.square {
cursor:pointer;width:
clamp( 5vw ,4ch,40vh);height:clamp(3.59vw,9ch,3.795em)
}/*cell animations*/
.animating-move {
anotation-transform:"translateZ(0)"; 
perspective:.6em !important;
transform-origin:center center !important;}/*game status*/}#statsContainer {position:fixed bottom:2rem left: .3% 
bottom: calc(.48 vw +3.57  rem);padding-bottom.calc(.1vmin+.3 vh);
padding top:calc(2px * var(--unitSize) /0.76vw)*100%;
display:fle d !important; background:radialgradient(
light coral,goldenrod)
l .5 ch .48em linear-gradient(90deg, rgba(0.35% 0%, 0%
.64% 8%) calc(.475rem),transparent calc(.211em) );
border-radius:calc( clamp( 1vh,.4*1vw . 16 rem)); box-shadow:none 
solid silver
,rgba(0,0,3%,10) 3.997px)

z-index:clamp(100%,2em,54); transition:.8 s ease-in-out;
column-gap;calc(.5 %  .66em ); row gap calc(.6*
, clamp(80px-.57*, 50vw) .66em)

display:flex !important flex-direction:column flex-wrap wrap
align-items flex-start;
/*Game Stats & Messages*/}
game-container #status-banner {
--animate-fraction:1; position:absolute;height 
x;opacity:.65
pointer-events:none;visibility:hidden;z-index:61
callback with a .7rem gap; padding 0.2%.4 em 
margin-top:clamp(1.38v h, .62 vh, -2%)
backgrou nds:gold
/*Banner Animations */
tic-tac animation for the coin flip banner*/
crossfade to show winner/caller after game ends etc.
@keyframes coin-flip-anime {
	only of frames 0%,100%
{ 
box-shadow:none;}35% {height: calc(2.347vw .6
9 em);margin- top:.8rem
}
37.5% transform:none
} animation coinflap-animate ease infinite 5s;}}
/*Hover effects on cells*/:hover td {
display:flex;
align-items:center !important justify-content:center;
css transition transform .2s ease-out cubic-bezier(.35, -0.71 ,  -.64);
box-shadow:none;
borders: solid .482px transparent;
border-radius:.9em;--square-rad:var(--defaultSquareRad
/*Grid Layout & Responsive Adjustments*/#board {
display:block!important;
grid-template_rows: repeat(3,var(--square-size))auto}
@media ( max-width :768px){html {
bord er-color:light brown;
color:pale goldenrod; height:auto; background:white !important
border:none } }