:root{--bg-100: #f4f7fb;--bg-200: #e9eef6;--blue-600: #2563eb;--blue-500: #3b82f6;--frame-blue: #004D99;--text: #1f2937;--muted: #555b66;--red: #e74c3c;--yellow: #f1c40f;--card-radius: 18px;--cell-size: 72px;--gap: 8px}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;background:linear-gradient(180deg,var(--bg-100) 0%,var(--bg-200) 100%);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}.app-container{display:flex;flex-direction:column;align-items:center;padding:40px 18px;min-height:100vh;gap:18px}.app-card{width:min(1060px,96%);background:#ffffffd9;border-radius:var(--card-radius);padding:28px;box-shadow:0 10px 30px #1018281f}.game-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.game-header h1{font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:900;color:var(--text);margin:0;text-shadow:1px 1px 2px rgba(0,0,0,.05)}.player-display p{font-size:1.2rem;font-weight:500;margin:0;color:var(--muted)}.game-status-display{text-align:center;margin:10px 0 22px}.status-banner{display:inline-block;padding:8px 14px;border-radius:999px;background:#3b82f617;color:var(--blue-500);font-weight:700;letter-spacing:.2px}.rematch-button{margin-top:30px;padding:12px 30px;font-size:1.15rem;font-weight:700;color:#fff;background-image:linear-gradient(180deg,var(--blue-500),var(--blue-600));border:none;border-radius:10px;cursor:pointer;transition:all .2s ease-in-out;box-shadow:0 6px 15px #2563eb66;text-transform:uppercase;letter-spacing:.5px}.rematch-button:focus{outline:3px solid rgba(59,130,246,.18);outline-offset:2px}.rematch-button:hover{background-color:var(--blue-600);box-shadow:0 8px 20px #2563eb99;transform:translateY(-2px)}.connect-four-container{background-color:var(--frame-blue);border-radius:var(--card-radius);box-shadow:0 20px 40px #000000b3,inset 0 0 10px #ffffff1a,inset 0 -5px 10px #0000004d;padding:15px;display:flex;flex-direction:column;width:min-content}.column-click-area{display:grid;grid-template-columns:repeat(6,var(--cell-size));margin-bottom:10px;gap:var(--gap);padding:8px}.column-target{height:calc(var(--cell-size) / 2.1);background-color:#ffffff0a;cursor:pointer;transition:background-color .16s ease,transform .12s ease;position:relative;border-radius:8px}.column-target.target-active:hover{background-color:#ffffff26;transform:translateY(-3px)}.column-target.target-active:after{content:"";position:absolute;top:6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid rgba(255,255,255,.85);opacity:0;transition:opacity .14s ease}.column-target.target-active:hover:after{opacity:1}.connect-four-board{display:grid;grid-template-columns:repeat(6,var(--cell-size));grid-template-rows:repeat(7,var(--cell-size));gap:var(--gap);padding:8px;background-color:var(--frame-blue)}.board-cell{width:var(--cell-size);height:var(--cell-size);background-color:var(--bg-100);border-radius:50%;box-shadow:inset 0 0 10px #00000080,inset 0 1px #fff3;display:flex;align-items:center;justify-content:center;transition:transform .12s ease,box-shadow .12s ease}.board-cell:hover{transform:translateY(-3px)}.board-piece{width:calc(var(--cell-size) - 10px);height:calc(var(--cell-size) - 10px);border-radius:50%;box-shadow:0 4px 6px #0006,inset 0 2px 5px #ffffff80;transition:transform .28s cubic-bezier(.2,.9,.2,1),box-shadow .16s ease;will-change:transform}.board-piece.dropping{animation:dropIn .48s cubic-bezier(.22,.9,.1,1)}@keyframes dropIn{0%{transform:translateY(-280px) scale(.98);opacity:0}60%{transform:translateY(12px) scale(1.02);opacity:1}to{transform:translateY(0) scale(1)}}.board-piece.winner{animation:pulseGlow 1.2s infinite alternate ease-in-out;box-shadow:0 12px 36px #ffd7001f,inset 0 4px 12px #ffffff2e}@keyframes pulseGlow{0%{transform:scale(1);filter:drop-shadow(0 6px 12px rgba(0,0,0,.14))}to{transform:scale(1.06);filter:drop-shadow(0 12px 24px rgba(0,0,0,.18))}}.token-empty{background-color:transparent;box-shadow:none}.token-player-1{background:radial-gradient(circle at 30% 30%,#f66,#e74c3c);border:2px solid #b3392f}.token-player-2{background:radial-gradient(circle at 30% 30%,#f7dc6f,#f1c40f);border:2px solid #c29c0b}@media(max-width:880px){:root{--cell-size: 56px}.app-card{padding:18px}}@media(max-width:520px){:root{--cell-size: 44px}.game-header{flex-direction:column;align-items:flex-start}}.error-message{color:var(--red);background:#e74c3c0f;padding:8px 12px;border-radius:8px;font-weight:600}.muted{color:var(--muted)}.player-badge{display:inline-flex;gap:8px;align-items:center}.player-dot{width:12px;height:12px;border-radius:50%;box-shadow:0 2px 6px #0000001f}.player-dot.red{background:#e74c3c}.player-dot.yellow{background:#f1c40f}.leaderboard-container{width:100%;max-width:600px;background:#ffffffe6;border-radius:var(--card-radius);padding:24px;box-shadow:0 10px 30px #1018281f;margin-top:20px}.leaderboard-container h2{font-size:1.6rem;font-weight:800;color:var(--text);text-align:center;margin:0 0 20px}.leaderboard-table{width:100%;border-collapse:collapse}.leaderboard-table thead{border-bottom:2px solid rgba(37,99,235,.1)}.leaderboard-table th{padding:12px 16px;text-align:left;font-weight:700;font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}.leaderboard-table th:last-child{text-align:right}.leaderboard-table tbody tr{border-bottom:1px solid rgba(0,0,0,.05);transition:background-color .12s ease}.leaderboard-table tbody tr:hover{background-color:#3b82f60a}.leaderboard-table td{padding:14px 16px;font-size:.95rem}.leaderboard-rank{font-weight:700;color:var(--blue-500);font-size:1.1rem;min-width:32px}.leaderboard-player{font-weight:600;color:var(--text)}.leaderboard-wins{text-align:right;font-weight:700;color:var(--blue-600)}.leaderboard-loading{text-align:center;padding:40px 20px;color:var(--muted);font-size:1rem}.leaderboard-empty{text-align:center;padding:40px 20px;color:var(--muted);font-size:.95rem}.leaderboard-toggle-btn{margin-top:20px;padding:10px 20px;font-size:.95rem;font-weight:700;color:#fff;background-image:linear-gradient(180deg,var(--blue-500),var(--blue-600));border:none;border-radius:12px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;box-shadow:0 8px 18px #2563eb2e;text-transform:uppercase;letter-spacing:.4px}.leaderboard-toggle-btn:focus{outline:3px solid rgba(59,130,246,.18);outline-offset:2px}.leaderboard-toggle-btn:hover{transform:translateY(-3px);filter:brightness(1.03);box-shadow:0 14px 30px #2563eb38}