@import "https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap";.home-shell{flex-direction:column;gap:1.5rem;padding:clamp(1rem,2vw,1.5rem) 0 2rem;display:flex}.home-topbar{justify-content:space-between;align-items:flex-end;gap:1rem;display:flex}.home-branding{flex-direction:column;gap:.4rem;display:flex}.home-brand{color:var(--text-secondary);letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;font-weight:700}.home-heading{letter-spacing:-.065em;font-size:clamp(2.5rem,5vw,4rem)}.home-topbar-meta{flex-wrap:wrap;justify-content:flex-end;gap:.75rem;display:flex}.home-topbar-meta span,.home-section-label,.home-sidebar-note{color:var(--text-secondary);letter-spacing:.05em;font-size:.84rem;font-weight:700}.home-topbar-meta span{text-transform:uppercase;background:#ffffffa3;border:1px solid #243c761a;border-radius:999px;padding:.55rem .8rem}.home-workspace{grid-template-columns:minmax(0,1fr) 23rem;align-items:stretch;gap:1.5rem;display:grid}.home-lobby{background:radial-gradient(circle at top,#7094ff24,#0000 36%),linear-gradient(#ffffffeb,#f4f8fff0);flex-direction:column;gap:1.25rem;min-height:42rem;padding:clamp(1.4rem,2vw,1.8rem);display:flex}.home-lobby-head{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.home-lobby-head h2{letter-spacing:-.05em;margin-top:.35rem;font-size:clamp(1.45rem,2vw,2rem)}.home-lobby-head p{max-width:17rem;color:var(--text-secondary);text-align:right;line-height:1.6}.home-room-list{flex-direction:column;flex:1;gap:.8rem;display:flex}.home-room-empty{border-radius:calc(var(--border-radius) - 2px);text-align:center;background:#ffffff8f;border:1px dashed #243c7624;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.5rem;display:flex}.home-room-empty strong{font-family:var(--font-family-heading);font-size:1.15rem}.home-room-empty span{color:var(--text-secondary)}.home-room-card{background:#ffffffb8;border:1px solid #243c7614;border-radius:1.25rem;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.1rem;display:flex}.home-room-copy{flex-direction:column;gap:.65rem;display:flex}.home-room-badges{flex-wrap:wrap;gap:.5rem;display:flex}.home-badge{letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:.4rem .65rem;font-size:.74rem;font-weight:800}.home-badge.lobby{color:var(--primary);background:#eef5fff2}.home-badge.playing{color:#1d6b53;background:#e4f4eff2}.home-badge.public{color:var(--accent-strong);background:#e8f0fff5}.home-badge.private{color:#51627f;background:#f1f3f8f5}.home-room-title{flex-direction:column;gap:.2rem;display:flex}.home-room-title strong{font-family:var(--font-family-heading);font-size:1.1rem}.home-room-title span,.home-room-note{color:var(--text-secondary);font-size:.92rem}.home-join-inline{min-width:8.5rem}.home-sidebar{background:#ffffffe6;flex-direction:column;gap:1.2rem;min-height:42rem;padding:clamp(1.2rem,2vw,1.5rem);display:flex}.home-sidebar-block,.home-sidebar-actions{flex-direction:column;gap:.9rem;display:flex}.home-sidebar-heading{justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.home-sidebar-heading strong{font-family:var(--font-family-heading);font-size:1rem}.home-join-form{flex-direction:column;gap:.75rem;display:flex}.home-visibility-toggle{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;display:grid}.home-visibility-option,.home-rule-option{width:100%;color:inherit;text-align:left;cursor:pointer;background:#f6f9ffd1;border:1px solid #243c7614;border-radius:1.15rem;padding:.95rem 1rem;transition:border-color .18s,background-color .18s,transform .18s,box-shadow .18s}.home-visibility-option:hover,.home-rule-option:hover{border-color:#4873ff38;transform:translateY(-1px)}.home-visibility-option[aria-pressed=true],.home-rule-option[aria-pressed=true]{background:#e8f0fff5;border-color:#4873ff47;box-shadow:0 14px 26px #4873ff1f}.home-visibility-option{text-align:center;font-weight:800}.home-board{border-radius:calc(var(--border-radius) + 6px);background:#e8f0ffc7;border:1px solid #243c7614;grid-template-columns:repeat(5,minmax(0,1fr));gap:.65rem;width:min(100%,30rem);padding:1rem;display:grid}.home-board-compact{width:100%}.home-board-cell{aspect-ratio:1;background:#fffc;border:1px solid #243c7614;border-radius:1rem;transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s}.home-board-cell.active{background:linear-gradient(180deg, var(--accent), var(--accent-strong));border-color:#0000;transform:translateY(-1px);box-shadow:0 18px 30px #4873ff29}.home-board-cell.free{position:relative}.home-board-cell.free:after{content:"Free";color:var(--text-primary);letter-spacing:.06em;text-transform:uppercase;justify-content:center;align-items:center;font-size:.62rem;font-weight:800;display:flex;position:absolute;inset:0}.home-rule-list{flex-direction:column;gap:.55rem;display:flex}.home-rule-copy{flex-direction:column;gap:.2rem;display:flex}.home-rule-copy strong{font-size:.98rem;font-weight:800}.home-rule-copy span{color:var(--text-secondary);font-size:.88rem}.home-sidebar-note{letter-spacing:normal;text-transform:none;line-height:1.5}.home-create-button{width:100%}@media (width<=1080px){.home-workspace{grid-template-columns:1fr}.home-lobby,.home-sidebar{min-height:auto}}@media (width<=720px){.home-topbar,.home-lobby-head,.home-sidebar-heading,.home-room-card{flex-direction:column;align-items:flex-start}.home-topbar-meta{justify-content:flex-start}.home-lobby-head p{text-align:left;max-width:none}.home-join-inline{width:100%}}.player-join-shell{justify-content:center;align-items:center;min-height:60vh;display:flex}.player-join-panel{flex-direction:column;gap:1.2rem;width:min(100%,30rem);padding:2rem;display:flex}.player-join-panel h2{text-align:center}.player-join-form{flex-direction:column;gap:1rem;display:flex}.player-alert-inline,.player-alert-banner{color:#be123c;background:#fecdd3;border-radius:1rem;align-items:center;gap:.5rem;padding:.9rem 1rem;font-weight:700;display:flex}.player-card-count{flex-direction:column;gap:.65rem;display:flex}.player-card-count-label{color:var(--text-secondary);letter-spacing:.05em;text-transform:uppercase;font-size:.82rem;font-weight:700}.player-card-count-options{grid-template-columns:repeat(6,minmax(0,1fr));gap:.55rem;display:grid}.player-card-count-option{cursor:pointer;background:#f6f9ffd1;border:1px solid #243c7614;border-radius:1rem;padding:.85rem 0;font-weight:800;transition:border-color .18s,background-color .18s,transform .18s,box-shadow .18s}.player-card-count-option:hover{border-color:#4873ff38;transform:translateY(-1px)}.player-card-count-option[aria-pressed=true]{background:#e8f0fff5;border-color:#4873ff47;box-shadow:0 14px 26px #4873ff1f}.player-enter-button{width:100%}.player-shell{flex-direction:column;gap:1rem;padding:1rem 0 2rem;display:flex}.player-topbar{justify-content:space-between;align-items:center;gap:1rem;display:flex}.player-heading-group{flex-direction:column;gap:.25rem;display:flex}.player-heading-meta{color:var(--text-secondary)}.player-goal-chip{background:#14b8a61a;align-items:center;gap:.55rem;padding:.8rem 1rem;display:inline-flex}.player-layout{grid-template-columns:minmax(0,1fr) 20rem;align-items:start;gap:1rem;display:grid}.player-main{flex-direction:column;gap:1rem;display:flex}.player-status-panel,.player-finish-panel{text-align:center;padding:2rem}.player-status-panel p,.player-finish-panel p{color:var(--text-secondary);margin-top:.8rem}.player-finish-panel h2{font-size:clamp(2rem,4vw,3rem)}.game-finish-actions{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.4rem;display:flex}.game-finish-actions .btn{min-width:11rem}.player-cards-grid{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1rem;display:grid}.player-card-panel{flex-direction:column;gap:.8rem;padding:1rem;display:flex}.player-card-panel-head{justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.player-card-panel-head span{color:var(--text-secondary);font-size:.88rem}.player-bingo-grid{max-width:none;padding:.8rem}.player-bingo-heading{justify-content:center;align-items:center;padding-bottom:.45rem;font-size:2rem;font-weight:800;display:flex}.player-bingo-button{width:100%;padding:1rem;font-size:1.2rem}.player-draw-panel{flex-direction:column;gap:1rem;padding:1rem;display:flex}.player-draw-head{justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.player-current-draw{background:#f6f9ffd1;border:1px solid #243c7614;border-radius:1.2rem;flex-direction:column;gap:.35rem;padding:1rem;display:flex}.player-current-draw span{color:var(--text-secondary);letter-spacing:.05em;text-transform:uppercase;font-size:.84rem;font-weight:700}.player-current-draw strong{font-family:var(--font-family-heading);font-size:2rem}.player-draw-history{flex-wrap:wrap;gap:.55rem;display:flex}.player-draw-empty{color:var(--text-secondary)}.player-draw-chip{background:#f6f9ffd1;border:1px solid #243c7614;border-radius:999px;padding:.6rem .85rem;font-weight:700}.player-draw-chip.active{background:linear-gradient(180deg, var(--accent), var(--accent-strong));color:#fff;border-color:#0000}@media (width<=980px){.player-layout{grid-template-columns:1fr}}@media (width<=720px){.player-topbar,.player-card-panel-head,.player-draw-head{flex-direction:column;align-items:flex-start}.player-card-count-options{grid-template-columns:repeat(3,minmax(0,1fr))}}:root{--primary:#18284a;--primary-hover:#111c35;--accent:#5a78ff;--accent-strong:#4563f0;--secondary:#2f5dd7;--bg-color:radial-gradient(circle at top left, #7a99ff2e, transparent 30%), radial-gradient(circle at right 20%, #96c9ff24, transparent 28%), linear-gradient(180deg, #f3f7ff 0%, #f9fbff 52%, #eef4ff 100%);--surface:#ffffffd1;--surface-strong:#fffffff0;--surface-muted:#e9f1ffe6;--text-primary:#1a2440;--text-secondary:#607090;--panel-border:#243c761a;--glass-bg:#ffffffc2;--border-radius:24px;--shadow-soft:0 26px 70px #1a2b571a;--shadow-button:0 14px 30px #18284a29;--cell-size:80px;--font-family:"Instrument Sans", "Segoe UI", sans-serif;--font-family-heading:"Manrope", "Instrument Sans", "Segoe UI", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{min-height:100%}body{min-height:100vh;font-family:var(--font-family);background:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}body:before{content:"";pointer-events:none;z-index:-1;background-color:#0000;background-image:linear-gradient(90deg,#ffffff6b 1px,#0000 1px),linear-gradient(#ffffff6b 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:72px 72px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#0006,#0000 72%);mask-image:linear-gradient(#0006,#0000 72%)}button,input,select{font:inherit}#root{width:100%;min-height:100vh}.glass-panel{background:var(--surface);border:1px solid var(--panel-border);border-radius:var(--border-radius);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.btn{background:var(--primary);color:#fff;cursor:pointer;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:.5rem;min-height:3.25rem;padding:.9rem 1.35rem;font-size:1rem;font-weight:700;transition:transform .18s,background-color .18s,border-color .18s,box-shadow .18s;display:inline-flex}.btn:hover{background:var(--primary-hover);box-shadow:var(--shadow-button);transform:translateY(-1px)}.btn:disabled{opacity:.56;cursor:not-allowed;box-shadow:none;transform:none}.btn.secondary{border-color:var(--panel-border);color:var(--text-primary);background:#ffffffe0}.btn.secondary:hover{background:#fff;border-color:#4873ff38}.btn.accent{background:linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);box-shadow:0 16px 32px #4873ff38}.btn.accent:hover{background:linear-gradient(135deg,#6784ff 0%,#4d69ee 100%)}.input-field{width:100%;min-height:3.35rem;color:var(--text-primary);background:#fffc;border:1px solid #243c761a;border-radius:1.15rem;padding:.95rem 1.1rem;transition:border-color .2s,box-shadow .2s,background-color .2s}.input-field::placeholder{color:#8492ad}.input-field:focus{background:#fffffff0;border-color:#4873ff61;outline:none;box-shadow:0 0 0 4px #5a78ff1f}h1,h2,h3{font-family:var(--font-family-heading);letter-spacing:-.04em;font-weight:800;line-height:1.08}.title-gradient{color:var(--text-primary)}.bingo-grid{aspect-ratio:1;border-radius:calc(var(--border-radius) + 4px);width:100%;max-width:500px;box-shadow:var(--shadow-soft);background:#ffffffc7;border:1px solid #243c761a;gap:1px;margin:0 auto;padding:1rem;display:grid}.bingo-cell{min-height:0;color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;background:#f0f4ffc7;border:1px solid #243c7614;border-radius:1rem;justify-content:center;align-items:center;font-size:clamp(1rem,2vw,1.4rem);font-weight:700;transition:transform .14s,background-color .14s,box-shadow .14s;display:flex}.bingo-cell:not(.marked):hover{background:#fffffff5;transform:translateY(-1px);box-shadow:0 12px 24px #1a2b5714}.bingo-cell.marked{background:linear-gradient(180deg, var(--accent), var(--accent-strong));color:#fff;border-color:#0000;animation:.24s ease-out pop}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-slide-up{animation:.32s forwards slideUp}.layout-container{width:min(1280px,100% - 2rem);margin:0 auto;padding:0}@media (width<=640px){.layout-container{width:min(100%,100% - 1rem)}.bingo-grid{padding:.6rem}}