:root{font-family:Arial,Helvetica,sans-serif;color:#1d2735;background:radial-gradient(circle at top,#fff7c9,#f4dd7f 28%,#dfbe4a 62%,#c59b18)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{min-height:100vh}button,input{font:inherit}button{border:none;cursor:pointer}.page-shell{min-height:100vh;padding:24px}.layout{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:360px 1fr;gap:24px}.card{background:#ffffffe0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:28px;box-shadow:0 20px 60px #0000002e}.sidebar{padding:20px}.brand-box{display:flex;align-items:center;gap:14px;margin-bottom:20px}.brand-mark{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#cf2128;color:#fff;font-size:32px;font-weight:900;box-shadow:0 10px 24px #0000002e}.brand-box h1{margin:0;font-size:28px;color:#b5151f}.brand-box p{margin:4px 0 0;color:#4d5968}.panel{background:#ffffffe6;border:2px solid rgba(36,58,91,.08);border-radius:22px;padding:16px;margin-bottom:14px}.panel label,.panel h2,.panel h3{margin:0 0 10px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}input{width:100%;border-radius:16px;border:2px solid #d7dee8;background:#fff;padding:12px 14px;outline:none}input:focus{border-color:#2a5bc7}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}button{padding:12px 14px;border-radius:16px;background:#2a5bc7;color:#fff;font-weight:700;transition:transform .15s ease,opacity .15s ease,filter .15s ease}button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.04)}button:disabled{opacity:.5;cursor:not-allowed}button.secondary{background:#72809a}.pill{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}.pill.online{background:#d7f4e2;color:#17633d}.pill.offline{background:#f6d9db;color:#8d1b24}.room-box{margin-top:12px;background:#f6f8fb;border-radius:16px;padding:12px;line-height:1.6}.status-main{font-size:22px;font-weight:800;margin:4px 0}.status-sub{color:#5e6c7b;margin:0 0 14px}.players-panel{display:grid;gap:10px}.player-card{display:flex;align-items:center;gap:12px;background:#f8fafc;border-radius:18px;padding:12px}.token{width:28px;height:28px;border-radius:50%;border:2px solid rgba(0,0,0,.35);flex:0 0 auto}.token.red{background:#d72d2d}.token.yellow{background:#f2d230}.game-area{display:grid;gap:16px}.board-card{padding:20px}.drop-row{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-bottom:14px}.drop-button{height:50px;background:#fffffff0;color:#21479d;font-size:24px;border:2px solid rgba(20,39,83,.14)}.board-frame{background:#0f4ebf;border-radius:34px;padding:18px;box-shadow:inset 0 0 0 6px #ffffff14}.board-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;background:#0d3d95;border-radius:28px;padding:14px}.cell{position:relative;aspect-ratio:1 / 1;border-radius:50%;background:#ecf1f7;border:6px solid rgba(8,28,74,.35);box-shadow:inset 0 10px 18px #0000001f;overflow:hidden}.disc{position:absolute;top:8%;right:8%;bottom:8%;left:8%;border-radius:50%;background:#fff;border:2px solid #d9e1ea}.disc.red{background:#d72d2d;border-color:#7f1111}.disc.yellow{background:#f2d230;border-color:#a88108}.disc.dropped{animation:dropIn .24s ease-out}.cell.winning{box-shadow:0 0 0 5px #48d691cc,inset 0 10px 18px #0000001f}.last-marker{position:absolute;top:-2px;left:50%;transform:translate(-50%);width:12px;height:12px;border-radius:50%;background:#fff}.notes{padding:18px 20px}.notes h3{margin-top:0}@keyframes dropIn{0%{transform:translateY(-34px) scale(.92);opacity:.65}to{transform:translateY(0) scale(1);opacity:1}}@media (max-width: 1000px){.layout{grid-template-columns:1fr}}@media (max-width: 700px){.page-shell{padding:14px}.board-card{padding:12px}.board-frame{padding:10px;border-radius:24px}.board-grid{gap:8px;padding:10px}.drop-row{gap:6px}.drop-button{height:42px;font-size:20px;padding:0}.cell{border-width:4px}.button-row{grid-template-columns:1fr}}