@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";:root{--color-green: #31c3bd;--color-blue: #65e9e4;--color-darkBlue: #1f3641;--color-orange: #f2b137;--color-lightOrange: #ffc860;--color-black: #1a2a33;--color-grey: #a8bfc9;--color-white: #dbe8ed;--ff-base: "Inter", sans-serif;--fs-base: 1rem;--fs-xs: .75rem;--fs-sm: .875rem;--fs-lg: 1.5rem;--fs-xl: 2rem;--fw-normal: 400;--fw-bold: 700;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:100%}body{font-family:var(--ff-base);font-size:var(--fs-base);line-height:1.5;background-color:var(--color-black);min-height:100vh}img,svg{max-width:100%;display:block}:focus-visible{outline:3px solid var(--color-lightOrange);outline-offset:2px}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}.visually__hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);clip-path:inset(100%);overflow:hidden;white-space:nowrap}.app{display:flex;justify-content:center;align-items:center;min-height:100vh;min-width:350px;margin-inline:auto}@media(min-width:40em){.app{max-width:400px}}.btn{font-family:inherit;font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--color-black);padding:.75rem;border-radius:var(--radius-md);cursor:pointer;text-transform:uppercase;transition:background-color .3s ease,transform .2s ease;border:none;display:inline-flex;justify-content:center;align-items:center;gap:var(--space-sm)}.btn.primary{background-color:var(--color-orange)}.btn.secondary{background-color:var(--color-green)}.btn.selected{background-color:var(--color-grey)}.btn.primary:hover{background-color:var(--color-lightOrange)}.btn.secondary:hover{background-color:var(--color-blue)}.btn.selected:hover{background-color:var(--color-white)}.btn:hover:not(:disabled){transform:scale(1.05)}.btn:disabled{opacity:.6;cursor:not-allowed}.symbol__selector{background-color:var(--color-darkBlue);color:var(--color-grey);width:95%;border-radius:var(--radius-lg);box-shadow:inset 0 -6px #0006;letter-spacing:.1ch;margin-bottom:var(--space-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);padding-block:var(--space-lg);text-transform:uppercase;transition:background-color .3s ease-in-out}.symbol__selector h3{font-size:var(--fs-base)}.symbol__selector p{font-size:.8rem;font-weight:var(--fw-bold);opacity:.6}.symbol__selector button{background-color:transparent;flex:1}.symbol__selector button img{width:35px}.mode__selector{width:100%}.mode__selector h2{text-transform:uppercase;letter-spacing:.2ch;margin-block:var(--space-md)}.mode__selector .menu__buttons{display:flex;flex-direction:column;gap:var(--space-md);width:100%}.mode__selector button{padding:var(--space-md);text-transform:uppercase;font-size:.8rem;letter-spacing:1px;box-shadow:inset 0 -6px #0000004d}.front__menu{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--color-white);text-align:center;min-width:95%}.front__menu h1{font-size:var(--fs-xl);margin-bottom:var(--space-md)}.front__logo{margin-bottom:var(--space-lg)}.menu__buttons{width:90%;display:flex;justify-content:center;background-color:var(--color-black);border-radius:var(--radius-md);padding:.5rem}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);width:100%;margin:var(--space-sm) auto}.cell{aspect-ratio:1 / 1;background-color:var(--color-darkBlue);border:none;border-radius:var(--radius-lg);box-shadow:inset 0 -7px #0006;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:background-color .3s ease-in-out}.cell:focus-visible{outline:3px solid var(--color-focus, #ffd43b);outline-offset:3px}@media(prefers-reduced-motion:reduce){.cell,.cell *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}.cell img{width:clamp(36px,12vw,65px);position:relative;z-index:2}.cell .outline__icon{position:absolute;top:50%;left:50%;width:50%;height:50%;transform:translate(-50%,-50%);object-fit:contain;pointer-events:none;z-index:1;opacity:0;transition:opacity .18s ease}.cell:not(:disabled):hover .outline__icon{opacity:1}.cell.winning__cell.X{background-color:var(--color-green)}.cell.winning__cell.O{background-color:var(--color-orange)}.cell.cpu__move{outline:2px solid var(--color-green);animation:cpuFadeIn .6s ease forwards}@keyframes cpuFadeIn{0%{opacity:0;transform:scale(.8)}60%{opacity:1;transform:scale(1.1)}to{transform:scale(1)}}.stat__content{border-radius:var(--radius-lg);flex:1;background-color:var(--color-grey);color:#000;padding-block:var(--space-sm);letter-spacing:.2ch}.stat__title{font-size:var(--fs-xs);font-weight:500}.stat__score{font-weight:var(--fw-bold)}.stat__content.X{background-color:var(--color-green)}.stat__content.O{background-color:var(--color-orange)}.end__round__modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;color:var(--color-white);z-index:10000;display:flex;align-items:center;justify-content:center;pointer-events:auto}.modal__content{background:var(--color-darkBlue);padding:clamp(1rem,4vw,2rem);text-align:center;text-transform:uppercase;width:100%;margin:0;border-radius:clamp(.375rem,1vw,.625rem)}.modal__content.pad{padding:clamp(3rem,6vw,4rem)}.modal__content h2{letter-spacing:.1ch;color:var(--color-grey)}.modal__msg{font-size:clamp(.75rem,1.4vw,.9rem);letter-spacing:.1ch;font-weight:var(--fw-bold);opacity:.6}.modal__msg.tied{font-size:clamp(1.2rem,2.6vw,1.7rem)}.modal__buttons{margin-top:clamp(.75rem,3vw,1.25rem);display:flex;gap:var(--space-md);justify-content:center}.modal__buttons button{box-shadow:inset 0 -4px #0003;letter-spacing:.1ch}.modal__content .winner__icon{width:clamp(2.25rem,8vw,4rem);height:auto;display:block;margin:0}.winner__line{display:flex;align-items:center;justify-content:center;gap:clamp(.75rem,2.4vw,1rem);margin-top:clamp(8px,2vw,12px)}.winner__text{font-weight:var(--fw-bold);font-size:clamp(1.2rem,2.6vw,1.7rem);color:var(--color-green);letter-spacing:.2ch}.header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:var(--space-xl)}.header__logo{width:20%;height:20%;object-fit:cover}.header__turn-indicator{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg) var(--space-md);background-color:var(--color-darkBlue);border-radius:var(--space-sm);text-transform:uppercase;box-shadow:inset 0 -6px #00000059}.header__turn-indicator img{width:20px;object-fit:cover}.header__turn-indicator span{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--color-grey);letter-spacing:.15ch}.header__btn{height:52px;background-color:var(--color-grey);box-shadow:inset 0 -6px #0003;transition:background-color .3s ease}.header__btn:hover{background-color:var(--color-white)}.game__shell{display:flex;flex-direction:column;align-items:center;padding:var(--space-md);min-width:350px}.game__shell.disable__interactions{pointer-events:none}.scoreboard{margin:var(--space-sm) 0;text-align:center;font-size:var(--fs-base);display:flex;gap:var(--space-md);width:100%;border-radius:var(--radius-md)}@media(min-width:40em){.game__shell{width:400px}}