:root{color:#f7fbf5;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#101613;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{-webkit-user-select:none;user-select:none;margin:0}button{font:inherit}.app-shell{--viewport-gap:.625rem;min-height:100svh;padding:var(--viewport-gap);background:radial-gradient(circle at 0 0,#74af8647,#0000 34rem),linear-gradient(145deg,#101613 0%,#142821 42%,#0d1110 100%);align-items:flex-start;display:flex}.game-panel{--minimum-fit-size:14.75rem;--viewport-fit-size:calc(100svh - 15.25rem);--panel-size:min(31rem, 100%, max(var(--minimum-fit-size), var(--viewport-fit-size)));max-width:var(--panel-size);width:var(--panel-size);margin:0 auto;container-type:inline-size}.topbar{grid-template-columns:3rem minmax(0,1fr) 3rem;align-items:center;gap:1rem;margin-bottom:1rem;display:grid}.topbar>div{text-align:center;min-width:0}.eyebrow{color:#9dd2ad;letter-spacing:0;text-transform:uppercase;margin:0 0 .18rem;font-size:.8rem;font-weight:800}h1{text-wrap:nowrap;margin:0;font-size:clamp(1.95rem,10cqw,min(3.4rem,8svh));line-height:.95}.icon-button,.primary-action,.mode-option,.square{cursor:pointer;border:0}.icon-button{aspect-ratio:1;color:#f7fbf5;background:#ffffff1a;border:1px solid #ffffff29;border-radius:999px;flex:0 0 3rem;justify-content:center;align-items:center;text-decoration:none;transition:background .16s,transform .16s;display:inline-flex}.icon-button:hover,.icon-button:focus-visible{background:#ffffff2e;transform:translateY(-1px)}.score-row{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:.55rem;margin-bottom:.6rem;display:grid}.score-card,.status-chip{background:#ffffff1a;border:1px solid #ffffff24;align-items:center;min-height:3.25rem;display:flex}.score-card{border-radius:.5rem;justify-content:space-between;padding:.65rem .8rem}.score-card span{color:#f7fbf5b8;font-weight:800}.score-card strong{font-size:1.35rem}.status-chip{color:#dbeee0;border-radius:999px;justify-content:center;gap:.35rem;padding:0 .5rem;font-size:clamp(.78rem,4.8cqw,1rem)}.active-x{box-shadow:inset 0 -.2rem #f2c14e}.active-o{box-shadow:inset 0 -.2rem #76d6ff}.board{aspect-ratio:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;width:100%;min-width:0;margin-bottom:.6rem;display:grid}.square{aspect-ratio:1;color:#15221e;background:#fffffff0;border-radius:.5rem;justify-content:center;align-items:center;min-width:0;font-size:clamp(3.75rem,22cqw,7.6rem);font-weight:950;line-height:1;transition:background .16s,color .16s,transform .16s;display:flex;overflow:hidden;box-shadow:0 1rem 2.4rem #0003}.square:hover,.square:focus-visible{background:#fff;transform:translateY(-2px)}.square-x{color:#92670e}.square-o{color:#00749d}.square-win,.square-win:hover,.square-win:focus-visible{color:#11351e;background:#b7f8c8}.primary-action{color:#15221e;background:#f7fbf5;border-radius:.5rem;width:100%;min-height:3rem;padding:0 1rem;font-weight:900;transition:background .16s,transform .16s}.primary-action:hover,.primary-action:focus-visible{background:#dff2e4;transform:translateY(-1px)}.mode-row{color:#f7fbf5b8;justify-content:space-between;align-items:center;gap:.75rem;margin-top:.6rem;font-size:.9rem;font-weight:800;display:flex}.mode-label{font-size:1.7rem;font-weight:950;line-height:1}.mode-row-x .mode-label{color:#92670e}.mode-row-o .mode-label{color:#00749d}.mode-switch{border-radius:999px;grid-template-columns:repeat(3,minmax(0,1fr));width:min(14.5rem,68%);min-height:2.35rem;padding:.18rem;transition:background .16s,transform .16s;display:grid;position:relative}.mode-row-x .mode-switch{background:#f2c14e33;border:1px solid #f2c14e6b}.mode-row-o .mode-switch{background:#76d6ff2e;border:1px solid #76d6ff6b}.mode-switch:before{content:"";background:#f7fbf5;border-radius:999px;width:calc(33.3333% - .12rem);transition:transform .18s;position:absolute;inset:.18rem auto .18rem .18rem}.mode-switch-ai:before{transform:translate(100%)}.mode-switch-asi:before{transform:translate(200%)}.mode-row-x .mode-switch:hover,.mode-row-x .mode-switch:focus-within{background:#f2c14e47;transform:translateY(-1px)}.mode-row-o .mode-switch:hover,.mode-row-o .mode-switch:focus-within{background:#76d6ff42;transform:translateY(-1px)}.mode-option{color:#15221e;font:inherit;z-index:1;background:0 0;justify-content:center;align-items:center;padding:0;font-size:.82rem;font-weight:900;display:inline-flex;position:relative}.mode-switch-human .mode-option:not(:first-child),.mode-switch-ai .mode-option:not(:nth-child(2)),.mode-switch-asi .mode-option:not(:last-child){color:#f7fbf5b8}