* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { margin: 0; height: 100%; background: #14112a; color: #f3f1ff; font: 500 17px/1.4 system-ui, sans-serif; user-select: none; -webkit-user-select: none }
#app { min-height: 100%; display: grid; place-items: center; padding: 16px }
.screen { width: min(420px, 100%); display: grid; gap: 14px; justify-items: center; text-align: center }
h1 { margin: 0; font-size: 40px; letter-spacing: .02em } h1 span { display: block; font-size: 26px; color: #c6f432 }
.sub { margin: 0; color: #a29dc6 } .note { margin: 0; color: #a29dc6; font-size: 15px; min-height: 1.4em }
.stack { display: grid; gap: 10px; width: 100% } .row { display: flex; gap: 10px; width: 100%; justify-content: center }
.btn { min-height: 50px; padding: 0 22px; border: 0; border-radius: 14px; background: #c6f432; color: #1a2300; font: 800 18px system-ui, sans-serif; cursor: pointer; width: 100% }
.btn.ghost { background: transparent; color: #f3f1ff; box-shadow: inset 0 0 0 2px #3a3366 }
.row .btn { width: auto; flex: 1 }
input { flex: 1; min-width: 0; min-height: 50px; padding: 0 14px; border-radius: 14px; border: 2px solid #3a3366; background: #1b1834; color: #fff; font: 800 20px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .15em; text-align: center }
.code { margin: 0; font: 800 52px ui-monospace, monospace; letter-spacing: .2em; color: #c6f432 }
.names { margin: 0; font-weight: 700 } .turn { margin: 0; font-size: 22px; font-weight: 800; min-height: 1.4em }
.board { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; width: min(340px, 86vw, 60vh); aspect-ratio: 1 }
.cell { border: 0; border-radius: 14px; background: #251f45; color: #fff; font: 800 min(16vw, 72px)/1 system-ui, sans-serif; cursor: pointer }
.cell.x { color: #c6f432 } .cell.o { color: #ff4d8d } .cell.win { background: #3b2f7a }
.cell:disabled { cursor: default }