*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#07101f;color:#fff;font-family:Arial,Helvetica,sans-serif}
body{display:flex;justify-content:center}
.wrap{width:min(780px,100%);padding:16px}
header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px}
.brand{font-size:1.5rem;font-weight:1000;color:#67e9ff;text-shadow:0 0 18px rgba(103,233,255,.3)}
.sub{color:#91a3c4;font-size:.85rem}
.stats{display:flex;gap:8px}
.stats div{min-width:85px;background:#0e1930;border:1px solid rgba(103,233,255,.12);border-radius:12px;padding:8px 10px;text-align:center}
.stats span{display:block;color:#8ea0bf;font-size:.63rem;text-transform:uppercase}
.stats b{font-size:1.1rem}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.mode-tabs{display:flex;gap:7px;flex:1}
.mode,.sound,.actions button,.online-row button{border:0;border-radius:13px;padding:10px 13px;font-weight:900;cursor:pointer;background:#13203a;color:#fff}
.mode.active,.online-row button{background:linear-gradient(135deg,#6d5dfc,#00bada)}
.sound{white-space:nowrap}
.online-panel{background:#0b162c;border:1px solid rgba(103,233,255,.13);border-radius:15px;padding:10px;margin-bottom:12px}
.online-panel.hidden{display:none}
.online-row{display:flex;gap:8px}
.online-row input{flex:1;min-width:0;background:#071021;border:1px solid rgba(255,255,255,.12);border-radius:12px;color:#fff;padding:10px 12px;outline:none}
.online-row input:focus{border-color:#67e9ff}
.online-info{display:flex;align-items:center;gap:8px;color:#a8b6cf;font-size:.8rem;margin-top:8px}
.online-info strong{color:#fff}
.dot{width:10px;height:10px;border-radius:50%;background:#6c768a;box-shadow:0 0 0 rgba(0,0,0,0)}
.dot.waiting{background:#ffce62;box-shadow:0 0 12px rgba(255,206,98,.55)}
.dot.live{background:#55ef9e;box-shadow:0 0 12px rgba(85,239,158,.55)}
.game-card{background:linear-gradient(145deg,#0d1730,#081124);border:1px solid rgba(103,233,255,.14);border-radius:24px;padding:22px;box-shadow:0 22px 60px rgba(0,0,0,.35)}
.players{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-bottom:10px}
.player-card{display:flex;align-items:center;gap:8px;background:#101c35;border-radius:13px;padding:9px 11px}
.player-card span{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:1.2rem;font-weight:1000}
.x-card span{background:rgba(101,234,255,.13);color:#65eaff}
.o-card span{background:rgba(255,206,98,.13);color:#ffce62}
.player-card b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.versus{font-weight:1000;color:#8192af}
.turn{text-align:center;font-size:1.12rem;font-weight:1000;color:#dffaff;margin-bottom:14px;min-height:24px}
.board{width:min(460px,90vw);aspect-ratio:1/1;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cell{border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#111d36;color:#fff;font-size:clamp(3rem,10vw,5rem);font-weight:1000;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(103,233,255,.03);transition:.15s}
.cell:hover:not(:disabled){transform:translateY(-2px);background:#172744}
.cell.x{color:#65eaff;text-shadow:0 0 20px rgba(101,234,255,.35)}
.cell.o{color:#ffce62;text-shadow:0 0 20px rgba(255,206,98,.32)}
.cell.win{background:#183d3c;box-shadow:0 0 0 2px rgba(93,255,190,.32),0 0 28px rgba(93,255,190,.18)}
.cell:disabled{cursor:default}
.message{text-align:center;min-height:30px;margin:16px 0 10px;color:#aebbd2;font-weight:800}
.actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.actions button:first-child{background:linear-gradient(135deg,#6d5dfc,#00bada)}
.tips{margin-top:12px;background:#0b162b;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 14px;color:#aebbd1;font-size:.85rem;line-height:1.45}
.tips strong{color:#fff}
@media(max-width:620px){
  .wrap{padding:8px}
  header{flex-direction:column;align-items:flex-start}
  .stats{width:100%}
  .stats div{flex:1;min-width:0}
  .toolbar{flex-direction:column;align-items:stretch}
  .mode-tabs{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .mode{padding:9px 5px;font-size:.76rem}
  .sound{width:100%}
  .online-row{flex-direction:column}
  .game-card{padding:14px;border-radius:18px}
  .board{width:min(94vw,430px);gap:7px}
  .cell{border-radius:14px}
}