*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{color:#f3f4f6;background-color:#121824;justify-content:center;align-items:center;min-height:100vh;display:flex}.game-wrapper{text-align:center;background-color:#1e293b;border-radius:16px;width:400px;padding:40px;box-shadow:0 10px 25px #0000004d}.screen{display:none}.screen.active{flex-direction:column;align-items:center;display:flex}h1{color:#38bdf8;margin-bottom:4px;font-size:32px}.subtitle{color:#94a3b8;margin-bottom:30px;font-size:14px}h2{color:#f3f4f6;margin-bottom:10px;font-size:24px}.btn{cursor:pointer;border:none;border-radius:8px;width:100%;margin-bottom:12px;padding:14px;font-size:16px;font-weight:600;transition:all .2s}.primary-btn{color:#0f172a;background-color:#38bdf8}.primary-btn:hover{background-color:#0ea5e9}.secondary-btn{color:#fff;background-color:#10b981}.secondary-btn:hover{background-color:#059669}.danger-btn{color:#fff;background-color:#ef4444;width:auto;margin-top:25px;padding:10px 20px;font-size:14px}.divider{color:#64748b;align-items:center;width:100%;margin:20px 0;display:flex}.divider:before,.divider:after{content:"";background:#334155;flex:1;height:1px}.divider span{padding:0 10px;font-size:12px;font-weight:700}.join-container{width:100%}#lobby-pin-input{color:#fff;text-align:center;letter-spacing:4px;background-color:#0f172a;border:2px solid #334155;border-radius:8px;outline:none;width:100%;margin-bottom:12px;padding:14px;font-size:18px}#lobby-pin-input:focus{border-color:#38bdf8}#display-pin{color:#38bdf8;letter-spacing:6px;background-color:#0f172a;border:1px dashed #38bdf8;border-radius:8px;margin:20px 0;padding:15px 30px;font-size:36px;font-weight:700}.spinner{border:4px solid #ffffff1a;border-left-color:#38bdf8;border-radius:50%;width:36px;height:36px;margin:15px auto;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#status-display{color:#10b981;margin-bottom:20px;font-size:20px;font-weight:600}#game-board{background-color:#334155;border-radius:12px;grid-template-rows:repeat(3,100px);grid-template-columns:repeat(3,100px);gap:8px;padding:8px;display:grid}.square{cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#0f172a;border-radius:8px;justify-content:center;align-items:center;font-size:42px;font-weight:700;transition:background-color .2s;display:flex}.square[data-value=X]{color:#38bdf8}.square[data-value=O]{color:#f43f5e}.square:not(.occupied):hover{background-color:#1e293b}.square.occupied{cursor:not-allowed}