:root{color-scheme:light;font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:#f4f6fb;color:#1d1f23}*,*:before,*:after{box-sizing:border-box}body{margin:0;display:flex;justify-content:center;align-items:flex-start;min-height:100vh}.app{margin:3rem 1rem;padding:2rem;max-width:480px;width:100%;background:#fff;border-radius:16px;box-shadow:0 18px 36px -18px #122a4240;display:flex;flex-direction:column;gap:2rem}.app__header h1{margin:0 0 .5rem;font-size:2rem;text-align:center}.app__header p{margin:0;text-align:center;font-size:1rem;color:#444c56}.scoreboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1rem}.scoreboard__item{background:#eef4ff;border-radius:12px;padding:.75rem 1rem;text-align:center;box-shadow:inset 0 1px #fff6}.scoreboard__label{display:block;font-size:.85rem;color:#5a6478;margin-bottom:.35rem}.scoreboard__value{font-size:1.5rem;font-weight:700;color:#213c89}.scoreboard__value--x{color:#1f6feb}.scoreboard__value--o{color:#d97706}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.board__row{display:contents}.cell{aspect-ratio:1 / 1;border:2px solid #2d6cdf;border-radius:12px;font-size:clamp(2rem,6vw,3rem);font-weight:700;color:#2d6cdf;background:linear-gradient(225deg,#fff,#dbe9ff);cursor:pointer;transition:transform .1s ease,box-shadow .1s ease}.cell--filled{background:linear-gradient(225deg,#fff,#f2f4ff)}.cell--mark-x{color:#1f6feb}.cell--mark-o{color:#d97706}.cell:hover,.cell:focus-visible{transform:translateY(-2px);box-shadow:0 6px 16px -8px #2d6cdf99;outline:none}.cell[disabled]{cursor:default;transform:none;box-shadow:none;background:#eef2fa;color:inherit;border-color:#ccd6f6}.cell--winner{background:linear-gradient(225deg,#ffe29f,#ffa99f);border-color:#f97316;color:#b45309;box-shadow:0 10px 24px -16px #f97316cc}.app__footer{display:flex;justify-content:center}.reset{padding:.75rem 1.5rem;border-radius:999px;border:none;background:#2d6cdf;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s ease,transform .2s ease}.reset:hover,.reset:focus-visible{background:#254ea3;transform:translateY(-1px);outline:none}@media (max-width: 480px){.app{margin-top:2rem;padding:1.5rem}.board{gap:.5rem}.scoreboard{gap:.75rem}}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.modal.hidden{display:none}.modal__content{background-color:#fff;padding:2rem;border-radius:8px;text-align:center}.mode-btn{display:block;width:100%;padding:1rem;margin:.5rem 0;font-size:1.2rem;cursor:pointer;background-color:#4caf50;color:#fff;border:none;border-radius:4px}.mode-btn:hover{background-color:#45a049}