:root{--bg:#f8fafc;--bg-card:#fff;--bg-hand:#f1f5f9;--border:#e2e8f0;--text:#0f172a;--text-muted:#64748b;--primary:#06b6d4;--primary-hover:#0891b2;--secondary:#fe6b00;--player-color:#06b6d4;--lane-height:52px;--card-height:94px;--role-active-bg:#06b6d40d;--card-shadow:0 10px 15px -3px #0000001a}.dark-theme{--bg:#09090b;--bg-card:#18181b;--bg-hand:#111827;--border:#27272a;--text:#f4f4f5;--text-muted:#a1a1aa;--primary:#22d3ee;--primary-hover:#67e8f9;--role-active-bg:#22d3ee1a;--card-shadow:0 10px 15px -3px #00000080}body{background-color:var(--bg);min-height:100vh;color:var(--text);width:100%;margin:0;padding:0;font-family:Outfit,-apple-system,system-ui,sans-serif;transition:background-color .3s,color .3s;overflow-x:hidden}#root{width:100%;overflow-x:hidden}.card{background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--card-shadow);border-radius:1.5rem;padding:2.5rem;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-2px);box-shadow:0 20px 25px -5px #0009}button{background-color:var(--primary);color:#fff;cursor:pointer;border:1px solid #0000;border-radius:.5rem;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:600;transition:all .2s}button:hover{background-color:var(--primary-hover);filter:brightness(1.1)}button:active{transform:scale(.98)}button:disabled{background-color:var(--border);color:var(--text-muted);cursor:not-allowed;opacity:.5}button.btn-active{background-color:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 0 15px #22d3ee66}button.btn-outline{border:1px solid var(--border);color:var(--text-muted);background-color:#0000}button.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:var(--role-active-bg)}.line.undefined{background:var(--bg-card);border:1px solid var(--border);opacity:.3}input{background:var(--bg);border:1px solid var(--border);color:var(--text);box-sizing:border-box;border-radius:.75rem;width:100%;margin-bottom:1.25rem;padding:1rem 1.25rem;font-size:1rem;transition:all .2s}input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px #6366f133}h1{background:linear-gradient(135deg, var(--text) 0%, var(--primary) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.75em;font-size:3rem;font-weight:800;line-height:1.2}.on{color:#10b981}.off{color:#f97316}.score{font-size:1.4rem;font-weight:800}.score.p1{color:#10b981}.score.p2{color:#6366f1}.score.p3{color:#f59e0b}.score.p4{color:#ec4899}.sep{color:var(--text-muted);margin:0 .5rem}.game-container{box-sizing:border-box;background-color:var(--bg);width:100%;min-height:100vh;color:var(--text);padding:1rem}.header-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.room-id-badge code{color:var(--primary);font-size:1.2rem;font-weight:700}.game-status-badge{background:var(--bg-card);border:1px solid var(--border);letter-spacing:.1em;white-space:nowrap;border-radius:2rem;padding:.5rem 1.5rem;font-weight:800}.turn-notification.my-turn{color:var(--primary);text-shadow:0 0 10px #22d3ee80;animation:2s infinite pulse}@keyframes pulse{0%{opacity:1}50%{opacity:.7}to{opacity:1}}.player-name{color:var(--player-color);font-weight:700}.role .on,.role .off{margin-right:.2rem;font-weight:800}.room-id-badge{background:var(--bg-card);border:1px solid var(--border);border-radius:.5rem;align-items:center;gap:.3rem;padding:.2rem .6rem;display:flex}.theme-toggle{margin-left:.2rem}.game-layout-root{flex-direction:column;align-items:center;gap:2rem;width:100%;max-width:1400px;margin:0 auto;display:flex}.board-container{justify-content:center;align-items:center;width:100%;min-height:450px;display:flex;overflow-y:visible}@media (width<=767px){.board-container{-webkit-overflow-scrolling:touch;justify-content:flex-start;padding:0 1rem 1rem;overflow-x:auto}.grid-binary{transform-origin:0}}.grid-binary{-webkit-user-select:none;user-select:none;background:var(--bg-card);border:1px solid var(--border);transform:scale(max(.65, min(1, .85 * (var(--content-width,100vw) / 1000))));transform-origin:50%;background-image:repeating-linear-gradient(transparent, transparent calc(var(--lane-height) - 1px), #ffffff05 calc(var(--lane-height) - 1px), #ffffff05 var(--lane-height));background-size:100% var(--lane-height);background-position:0;border-radius:1rem;align-items:center;gap:.75rem;padding:1.5rem 3.5rem;display:flex;position:relative;box-shadow:0 10px 30px #0003}@media (width>=1025px){.grid-binary{--content-width:calc(100vw - 300px)}}@media (width<=1024px){.grid-binary{--content-width:100vw}}.lines-column{flex-direction:column;width:40px;display:flex;position:relative}.line-container{height:var(--lane-height);justify-content:center;align-items:center;width:100%;display:flex}.line{background:var(--border);border-radius:3px;width:100%;height:6px;transition:all .3s}.line.on{background:#22d3ee;box-shadow:0 0 15px #22d3ee}.line.off{background:#f97316;box-shadow:0 0 15px #f97316}.line.undefined{border:1px dashed var(--border);box-shadow:none;opacity:.3;background:0 0}.line.undefined:after{content:"";border:1px solid var(--owner-color);opacity:.2;border-radius:4px;position:absolute;inset:0}.line{position:relative}.board-wrapper{background-image:radial-gradient(circle at 2px 2px, var(--border) 1px, transparent 0);background-size:30px 30px}.line.final{border-radius:50%;width:12px;height:12px;margin:0 auto}.line.input{opacity:.6;height:4px}.cards-column{gap:calc(2 * var(--lane-height) - var(--card-height));flex-direction:column;width:80px;display:flex;overflow:visible}.cards-column.even,.cards-column.odd{margin-top:0}.card-slot{width:80px;height:var(--card-height);background:var(--bg-card);border:1px solid var(--border);cursor:pointer;border-radius:.75rem;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative;box-shadow:0 5px 15px #0000001a}.card-slot.available{border-color:var(--primary);background:#10b9810d;animation:2s infinite pulse-available;box-shadow:0 0 10px #10b98133}@keyframes pulse-available{0%{transform:scale(1);box-shadow:0 0 #10b98166}50%{transform:scale(1.02);box-shadow:0 0 0 10px #10b98100}to{transform:scale(1);box-shadow:0 0 #10b98100}}.card-slot.available:hover{border-color:var(--primary);z-index:10;background:#10b9811a;transform:scale(1.05)}.card-slot.locked{border:1px dashed var(--border);cursor:not-allowed;opacity:.2;background:0 0}.card-slot.filled{background:var(--bg-card);animation:none;box-shadow:0 4px 10px #0000001a}.lock-icon{background:#3f3f46;border-radius:50%;width:10px;height:10px;position:absolute}.slot-empty{border:2px dashed #3f3f46;border-radius:4px;width:30%;height:30%}.game-container{background-color:var(--bg);min-height:100vh;color:var(--text);box-sizing:border-box;flex-direction:column;padding:1.5rem;display:flex}@media (width<=480px){.game-container{padding:.75rem}}.game-card-mini{flex-direction:column;width:100%;height:100%;display:flex}.logic-part{color:var(--text);border-bottom:1px solid var(--border);flex-direction:column;flex:1;justify-content:center;align-items:center;font-size:.6rem;font-weight:800;display:flex;position:relative}.logic-underline{border-radius:2px;height:4px;position:absolute;bottom:0;left:15%;right:15%;box-shadow:0 1px 3px #0000004d}.logic-underline.double{border-top:2px solid var(--logic-color);border-bottom:2px solid var(--logic-color);height:5px;box-shadow:none;border-radius:0;background:0 0!important}.logic-part.disabled{color:#3f3f46;background:#0004}.logic-part:first-child{border-bottom:1px solid var(--border)}.sidebar-section{flex-direction:column;grid-area:sidebar;gap:1rem;display:flex}.players-header-section{width:100%;max-width:1400px;margin:0 auto 1.5rem;padding:0 1rem}.players-section{width:100%;padding:0 1rem}.players-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;width:100%;display:grid}@media (width<=480px){.players-grid{grid-template-columns:1fr}}.header-player-card{background:var(--bg-card);border:1px solid var(--border);border-radius:.75rem;align-items:center;gap:.75rem;min-width:0;padding:.6rem 1rem;transition:all .3s;display:flex;position:relative}.header-player-card.active{border-color:var(--player-color);box-shadow:0 0 15px rgba(var(--player-color-rgb), .15);background:#ffffff05}.active-turn-indicator{background:var(--player-color);width:4px;height:60%;box-shadow:0 0 10px var(--player-color);border-radius:0 4px 4px 0;position:absolute;top:50%;left:0;transform:translateY(-50%)}.section-label{color:var(--text-muted);letter-spacing:.1em;margin-bottom:.75rem;font-size:.75rem;font-weight:800}.player-avatar-mini{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:.9rem;font-weight:800;display:flex}.player-meta{flex:1}@media (width<=1100px){.player-name-text{font-size:.8rem}.player-hand-count{font-size:.65rem}.player-score-large{font-size:1.2rem}}.player-name-text{font-size:.95rem;font-weight:700}.player-hand-count{color:var(--text-muted);font-size:.75rem}.player-score-large{color:var(--text);opacity:.8;font-size:1.8rem;font-weight:900}.active-turn-bar{background:var(--player-color);width:4px;box-shadow:0 0 10px var(--player-color);border-radius:0 4px 4px 0;position:absolute;top:20%;bottom:20%;left:0}.hand-section{border:1px solid var(--border);background:#ffffff05;border-radius:1.25rem;flex-direction:column;gap:1rem;width:100%;padding:1rem 1.2rem;display:flex}.hand-header{border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;width:100%;padding-bottom:.5rem;display:flex}.hand-header .section-label{margin-bottom:0}.hand-row{scrollbar-width:thin;flex-direction:row;gap:1rem;padding:.5rem;display:flex;overflow-x:auto}.hand-card{background:var(--bg-card);border:1px solid var(--border);cursor:pointer;border-radius:.6rem;flex-direction:column;flex:0 0 100px;height:118px;padding:.5rem;transition:all .2s;display:flex;box-shadow:0 5px 15px #00000026}.hand-card.selected{border-color:var(--primary);box-shadow:0 0 15px var(--role-active-bg);transform:translateY(-3px)}.action-buttons-compact{gap:.5rem;display:flex}.btn-pass-compact{color:#fff;border:1px solid var(--border);cursor:pointer;white-space:nowrap;background:#3f3f46;border-radius:.5rem;padding:.4rem 1rem;font-size:.8rem;font-weight:600;transition:all .2s}.btn-pass-compact:hover{background:#52525b}.btn-pass-compact:disabled{opacity:.4;cursor:not-allowed}.lane-label-wrapper{flex-direction:column;gap:0;display:flex;position:absolute;top:0}.lane-label-wrapper.left{left:-55px}.lane-label-wrapper.right{right:-55px}.auth-layout{background-color:var(--bg);box-sizing:border-box;justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.lane-indicator{width:45px;height:var(--lane-height);color:var(--text-muted);opacity:.3;align-items:center;font-size:.75rem;font-weight:900;transition:all .3s;display:flex}.lane-label-wrapper.left .lane-indicator{justify-content:flex-end;padding-right:.5rem}.lane-label-wrapper.right .lane-indicator{justify-content:flex-start;padding-left:.5rem}.lane-indicator.mine{opacity:1;color:var(--owner-color);text-shadow:0 0 10px var(--owner-color);transform:translate(5px)scale(1.1)}.line-container{align-items:center;display:flex;position:relative}.modal-overlay{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.winner-modal{background:var(--bg-card);border:1px solid var(--border);text-align:center;border-radius:2rem;padding:3rem;box-shadow:0 25px 50px -12px #00000080}.btn-icon{border:1px solid var(--border);color:var(--text);background:0 0;justify-content:center;align-items:center;margin-left:.5rem;padding:.4rem;transition:all .2s;display:flex}.btn-icon:hover{background:var(--border);border-color:var(--text-muted)}::-webkit-scrollbar{height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#3f3f46;border-radius:3px}