@import"https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Permanent+Marker:wght@400;700&display=swap";:root{--primary-color: #32dae3;--secondary-color: #5bdee6;--tertiary-color: #b7eff2;--secondary-text-color: #b0dcdf;--tertiary-text-color: #8eaeb1;--gameboard-background-color: #1d3e40;--gameover-background-color: rgba(29, 62, 64, .9);--button-color: #4c6566;--font-primary: "Patrick Hand", sans-serif;--font-display: "Permanent Marker", cursive;--text-font-size: .9rem;--title-font-size: calc(var(--text-font-size) * 3);--game-over-title-font-size: calc(var(--text-font-size) * 4);--game-over-text-font-size: calc(var(--text-font-size) * 2);--game-over-button-font-size: calc(var(--text-font-size) * 1.5);--space-xs: .25rem;--space-sm: .5rem;--space-ms: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--game-container-padding: var(--space-lg);--game-element-padding: var(--space-ms);--player-card-padding: var(--space-sm);--input-padding: var(--space-sm);--board-button-spacing: var(--space-md);--rematch-button-padding: var(--space-sm) var(--space-md);--radius-sm: 4px;--radius-md: 6px;--container-radius: var(--radius-md);--border-width: 2px;--container-shadow: 0 0 20px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px var(--primary-color);--transition-fast: .2s ease}*{box-sizing:border-box;margin:0;padding:0}ol{list-style:none}html{font-family:var(--font-primary);background-color:var(--primary-color)}body{min-height:100vh;min-height:100dvh;background:radial-gradient(circle at center,color-mix(in srgb,var(--primary-color),transparent 10%),color-mix(in srgb,var(--secondary-color),transparent 10%)),url(/tictactoe/bg-pattern-dark.png);background-repeat:repeat;background-size:60%;margin:0 10px}h1{font-family:var(--font-display);font-size:var(--title-font-size);color:var(--gameboard-background-color);text-align:center}#game-container{max-width:700px;margin:auto;padding:var(--game-container-padding);border-radius:var(--container-radius);background:var(--gameboard-background-color);box-shadow:var(--container-shadow);position:relative}#players{display:flex;justify-content:center;align-items:center;gap:var(--game-element-padding)}.player-card{display:flex;align-items:center;justify-content:center;width:50%;border:var(--border-width) solid transparent;padding:var(--player-card-padding);gap:var(--player-card-padding)}.player-card.active{border-color:var(--primary-color)}.player-card .player-name,.player-card .player-symbol{color:var(--primary-color)}.name-edit-button{border:none;background:none;color:var(--tertiary-color);font-size:var(--text-font-size);cursor:pointer;transition:color .2s}.name-edit-button:hover{color:var(--primary-color)}.player{font-weight:700;gap:var(--player-card-padding);display:flex;align-items:center;min-width:0;width:100%}.player-name{font-size:var(--text-font-size);color:var(--tertiary-color);text-transform:uppercase;min-width:0;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player input{min-width:0;width:100%;font-size:var(--text-font-size);border:none;padding:var(--input-padding);background-color:var(--button-color);text-transform:uppercase;font-family:var(--font-primary)}.player-symbol{font-size:var(--text-font-size);color:var(--tertiary-color);font-family:var(--font-display)}#game-board{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--board-button-spacing);margin-top:var(--game-container-padding)}.board-button{display:flex;font-family:var(--font-display);font-size:clamp(1.5rem,10cqi,5rem);color:var(--tertiary-color);background-color:var(--button-color);aspect-ratio:1 / 1;width:100%;border:none;cursor:pointer;justify-content:center;align-items:center}.board-button:disabled{cursor:not-allowed}#game-over{background-color:var(--gameover-background-color);border-radius:var(--container-radius);position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}#game-over h2{font-family:var(--font-primary);font-size:var(--game-over-title-font-size);color:var(--primary-color)}#game-over p{font-size:var(--game-over-text-font-size);text-align:center;color:var(--tertiary-color)}#game-over button{color:var(--primary-color);font-family:var(--font-primary);font-size:var(--game-over-button-font-size);background:none;border:var(--border-width) solid var(--primary-color);border-radius:var(--container-radius);padding:var(--rematch-button-padding);margin-top:var(--game-element-padding);cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}#game-over button:hover{background:var(--secondary-color);color:var(--gameover-background-color);transform:scale(1.1);box-shadow:var(--shadow-glow)}#game-over button:focus-visible,#players button:focus-visible,#game-board button:focus-visible{outline:var(--border-width) solid var(--primary-color);outline-offset:var(--border-width)}.player input:focus-visible{outline:var(--border-width) solid var(--primary-color);outline-offset:calc(var(--border-width) / 2)}@keyframes pulse-text{0%{color:var(--secondary-text-color)}50%{color:var(--tertiary-text-color)}to{color:var(--secondary-text-color)}}@media(min-width:600px){:root{--text-font-size: 1rem;--game-container-padding: var(--space-lg);--game-element-padding: var(--space-md);--player-card-padding: var(--space-ms);--input-padding: var(--space-ms);--board-button-spacing: var(--space-lg);--rematch-button-padding: var(--space-ms) var(--space-lg)}}@media(min-width:700px){:root{--text-font-size: 1.1rem}body{background-size:auto}}@media(prefers-reduced-motion:no-preference){.player input{animation:pulse-text 2s infinite}}