.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.alert p{margin-bottom:0}.alert:empty{display:none}.invalid-feedback{color:#a94442;display:block;margin:-1rem 0 2rem}.phx-no-feedback.invalid-feedback,.phx-no-feedback .invalid-feedback{display:none}.phx-click-loading{opacity:.5;transition:opacity 1s ease-out}.phx-disconnected{cursor:wait}.phx-disconnected *{pointer-events:none}.phx-modal{opacity:1!important;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#0006}.phx-modal-content{background-color:#fefefe;margin:15vh auto;padding:20px;border:1px solid #888;width:80%}.phx-modal-close{color:#aaa;float:right;font-size:28px;font-weight:700}.phx-modal-close:hover,.phx-modal-close:focus{color:#000;text-decoration:none;cursor:pointer}:root{--board-width: 300px;--board-height: 750px;--cell-size: 30px;--bg-dark: #1a1a2e;--bg-light: #16213e;--accent: #e94560;--text: #eee}body{background:var(--bg-dark);color:var(--text);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:20px;min-height:100vh}.lobby{max-width:800px;margin:0 auto;text-align:center}.lobby h1{font-size:3rem;color:var(--accent);margin-bottom:0}.lobby .subtitle{color:#888;margin-bottom:2rem}.lobby-actions{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-bottom:2rem}.join-form{display:flex;gap:.5rem}.join-form input{padding:.75rem 1rem;border:2px solid #333;border-radius:4px;background:var(--bg-light);color:var(--text);font-size:1rem}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border:none;border-radius:4px;background:#333;color:var(--text);font-size:1rem;cursor:pointer;transition:background .2s;text-decoration:none;line-height:1}.btn:hover{background:#444}.btn-primary{background:var(--accent)}.btn-primary:hover{background:#ff6b81}.btn-small{padding:.5rem 1rem;font-size:.875rem}.active-games{margin:2rem 0}.active-games ul{list-style:none;padding:0}.active-games li{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--bg-light);margin-bottom:.5rem;border-radius:4px}.how-to-play{background:var(--bg-light);padding:2rem;border-radius:8px;text-align:left}.how-to-play h2{text-align:center;margin-top:0}.rules{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.role h3{color:var(--accent);margin-top:0}.role ul{padding-left:1.5rem}.role li{margin-bottom:.5rem}.win-condition{text-align:center;font-size:1.25rem;font-weight:700;color:var(--accent);margin-top:1.5rem;margin-bottom:0}.error{background:#a94442;color:#fff;padding:1rem;border-radius:4px;margin-bottom:1rem}.game-container{display:flex;flex-direction:column;align-items:center;outline:none}.game-header{display:flex;justify-content:space-between;align-items:center;width:var(--board-width);margin-bottom:1rem;padding:.5rem;background:var(--bg-light);border-radius:4px}.score{text-align:center}.score .label{display:block;font-size:.75rem;text-transform:uppercase;color:#888}.score .value{font-size:2rem;font-weight:700}.tetris-score .value{color:#4ecdc4}.arkanoid-score .value{color:#ff6b6b}.game-info{text-align:center;font-size:.75rem;color:#888}.game-info span{display:block}.game-info .role{color:var(--accent)}.game-board{position:relative;width:var(--board-width);height:var(--board-height);background:var(--bg-light);border:2px solid #333;border-radius:4px;overflow:hidden}.grid-lines{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(to right,#222 1px,transparent 1px),linear-gradient(to bottom,#222 1px,transparent 1px);background-size:var(--cell-size) var(--cell-size);pointer-events:none}.block{position:absolute;width:var(--cell-size);height:var(--cell-size);box-sizing:border-box;border:2px solid rgba(255,255,255,.3);border-radius:2px}.block-cyan{background:#00bcd4}.block-yellow{background:#ffeb3b}.block-purple{background:#9c27b0}.block-green{background:#4caf50}.block-red{background:#f44336}.block-blue{background:#2196f3}.block-orange{background:#ff9800}.active-piece{box-shadow:0 0 10px #ffffff4d}.ball{position:absolute;background:radial-gradient(circle at 30% 30%,#fff,#ddd);border-radius:50%;box-shadow:0 0 10px #ffffff80}.paddle{position:absolute;background:linear-gradient(to bottom,#888,#555);border-radius:4px;border:1px solid #999}.game-over-overlay,.waiting-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center}.game-over-content,.waiting-content{text-align:center;padding:2rem}.game-over-content h2,.waiting-content h2{font-size:2rem;margin-bottom:1rem}.winner{color:var(--accent);font-size:1.5rem;margin-bottom:1.5rem}.waiting-content strong{color:var(--accent);font-family:monospace;font-size:1.25rem}.next-piece{position:absolute;right:20px;top:100px;background:var(--bg-light);padding:1rem;border-radius:4px}.next-piece h3{margin:0 0 .5rem;text-align:center;color:#888;font-size:.875rem}.preview-box{position:relative;width:80px;height:80px}.loading{font-size:1.5rem;color:#888}@media (max-width: 600px){.rules{grid-template-columns:1fr}.next-piece{display:none}}