.home-screen{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2rem}.title-container{text-align:center}.game-title{font-size:3rem;color:#4fc3f7;text-shadow:0 0 20px rgba(79,195,247,.5)}.game-subtitle{font-size:1rem;color:#90a4ae;margin-top:.5rem}.home-form{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:320px}.input-field{padding:.75rem 1rem;border:2px solid #37474f;border-radius:8px;background:#1a2a3a;color:#e0e0e0;font-size:1rem;outline:none;transition:border-color .2s}.input-field:focus{border-color:#4fc3f7}.btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#4fc3f7,#0288d1);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #4fc3f766}.btn-secondary{background:linear-gradient(135deg,#78909c,#546e7a);color:#fff}.btn-secondary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #78909c66}.btn-small{padding:.5rem 1rem;background:#37474f;color:#e0e0e0;font-size:.875rem}.divider{text-align:center;color:#546e7a;font-size:.875rem}.error-message{color:#ef5350;font-size:.875rem}.lobby-screen{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem;width:100%;max-width:500px}.room-code-display{display:flex;flex-direction:column;align-items:center;background:#1a2a3a;padding:1rem 2rem;border-radius:12px;border:2px solid #37474f}.room-code-label{font-size:.75rem;color:#90a4ae;text-transform:uppercase;letter-spacing:1px}.room-code-value{font-size:2rem;font-weight:700;color:#4fc3f7;letter-spacing:4px}.player-list{width:100%;background:#1a2a3a;border-radius:12px;padding:1rem}.player-list h3{margin-bottom:.75rem;color:#90a4ae}.player-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;border-radius:6px;background:#263238;margin-bottom:.5rem}.player-item-left,.player-item-right{display:flex;align-items:center;gap:.5rem}.online-dot{width:8px;height:8px;border-radius:50%}.online-dot.online{background:#66bb6a}.online-dot.offline{background:#78909c}.btn-kick{background:transparent;border:1px solid #ef5350;color:#ef5350;width:24px;height:24px;border-radius:4px;cursor:pointer;font-size:.75rem;display:flex;align-items:center;justify-content:center;transition:all .2s}.btn-kick:hover{background:#ef5350;color:#fff}.host-badge{background:#ffd54f;color:#1a1a1a;padding:.125rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600}.waiting-text{color:#90a4ae;font-style:italic}.chat-box{width:100%;background:#1a2a3a;border-radius:12px;padding:1rem;margin-top:1rem}.chat-messages{height:200px;max-height:200px;min-height:200px;overflow-y:scroll;margin-bottom:.75rem;padding:.5rem;background:#0d1b2a;border-radius:8px;scroll-behavior:smooth}.chat-message{font-size:.875rem;margin-bottom:.25rem;word-break:break-word}.chat-input-row{display:flex;gap:.5rem}.chat-input{flex:1}.game-layout{display:flex;width:100%;max-width:1100px;gap:1rem;padding:1rem}.game-board{flex:1;display:flex;flex-direction:column;gap:1rem;min-width:0}.chat-sidebar{width:300px;flex-shrink:0}.chat-sidebar .chat-box{position:sticky;top:1rem;height:calc(100vh - 2rem);display:flex;flex-direction:column}.chat-sidebar .chat-messages{flex:none;height:300px;max-height:300px;min-height:300px}@media (max-width: 768px){.game-layout{flex-direction:column}.chat-sidebar{width:100%}.chat-sidebar .chat-box{position:static;height:auto}.chat-sidebar .chat-messages{height:200px;max-height:200px;min-height:200px}}.game-header{display:flex;justify-content:space-between;align-items:center;background:#1a2a3a;padding:.75rem 1rem;border-radius:10px;flex-wrap:wrap;gap:.5rem}.room-code-small{font-size:.8rem;color:#4fc3f7;font-weight:600;letter-spacing:1px}.round-info{font-weight:600;color:#90a4ae}.treasure-info{font-weight:600;color:#ffd54f}.role-badge{padding:.25rem .75rem;border-radius:6px;font-weight:600;font-size:.875rem}.role-badge[data-role=sailor]{background:#1565c0;color:#bbdefb}.role-badge[data-role=skeleton]{background:#4e342e;color:#d7ccc8}.turn-indicator{text-align:center;padding:.75rem;border-radius:8px;background:#1a2a3a}.my-turn{color:#66bb6a;font-weight:600;animation:pulse 1.5s infinite}.other-turn{color:#90a4ae}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.my-cards,.other-players{background:#1a2a3a;border-radius:12px;padding:1rem}.my-cards h3,.other-players h3{margin-bottom:.75rem;color:#90a4ae}.cards-row{display:flex;gap:.5rem;flex-wrap:wrap}.card{width:60px;height:80px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;border:2px solid #37474f;background:#263238;transition:all .2s}.my-card{border-color:#4fc3f7;background:#1a3a4a}.card.revealed{opacity:.7;border-style:dashed}.card.my-card.revealed{opacity:.25!important;transform:scale(.85);border:2px solid #ef5350!important;border-style:solid!important;filter:grayscale(.8);position:relative;background:#1a1a1a!important}.card.my-card.revealed:after{content:"✕";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;font-weight:700;color:#ef5350;opacity:1;filter:none}.card[data-card-type=treasure]{border-color:#ffd54f;background:#3e2723}.card[data-card-type=kraken]{border-color:#ef5350;background:#311b1b}.card[data-card-type=empty]{border-color:#546e7a;background:#1a2a3a}.opponent-card{cursor:default}.opponent-card.selectable{cursor:pointer;border-color:#66bb6a;animation:glow 1s infinite alternate}.opponent-card.selectable:hover{transform:scale(1.1);box-shadow:0 0 15px #66bb6a80}@keyframes glow{0%{box-shadow:0 0 5px #66bb6a4d}to{box-shadow:0 0 15px #66bb6a99}}.card-hidden-content{font-size:1.25rem}.players-grid{display:flex;flex-direction:column;gap:.75rem}.player-board{background:#263238;border-radius:8px;padding:.75rem;border:2px solid transparent;transition:all .2s}.player-board.clickable{cursor:pointer}.player-board.clickable:hover{border-color:#37474f}.player-board.selected{border-color:#66bb6a}.player-name-tag{font-weight:600;margin-bottom:.5rem;color:#b0bec5}.game-over-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem}.game-over-content{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.game-over-title{font-size:2.5rem;color:#4fc3f7}.game-over-result{font-size:1.25rem;color:#b0bec5}.my-result{padding:1rem 2rem;border-radius:12px;font-size:1.125rem}.my-result.win{background:#1b5e20;border:2px solid #66bb6a}.my-result.lose{background:#b71c1c;border:2px solid #ef5350}.result-text{font-size:1.5rem;font-weight:700;margin-top:.5rem}.final-stats{color:#90a4ae}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-content{background:#1a2a3a;border-radius:16px;border:2px solid #37474f;max-width:600px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px #00000080}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid #37474f;position:sticky;top:0;background:#1a2a3a;border-radius:16px 16px 0 0}.modal-header h2{font-size:1.25rem;color:#4fc3f7}.modal-close{background:transparent;border:1px solid #546e7a;color:#90a4ae;width:32px;height:32px;border-radius:6px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .2s}.modal-close:hover{background:#ef5350;border-color:#ef5350;color:#fff}.modal-body{padding:1.5rem}.modal-body section{margin-bottom:1.5rem}.modal-body section:last-child{margin-bottom:0}.modal-body h3{color:#4fc3f7;margin-bottom:.5rem;font-size:1rem}.modal-body ul,.modal-body ol{padding-left:1.25rem;line-height:1.8;color:#b0bec5}.modal-body p{color:#b0bec5;line-height:1.6}.rule-table{width:100%;border-collapse:collapse;margin-top:.5rem}.rule-table td,.rule-table th{padding:.4rem .75rem;border:1px solid #37474f;color:#b0bec5}.rule-table th{background:#263238;color:#90a4ae;font-weight:600;text-align:center}.rule-table td{text-align:center}.full-table{font-size:.875rem}.current-row{background:#1b5e20}.current-row td{color:#a5d6a7;font-weight:600}.btn-rules{background:transparent;border:1px solid #4fc3f7;color:#4fc3f7;padding:.25rem .6rem;border-radius:6px;cursor:pointer;font-size:.8rem;transition:all .2s}.btn-rules:hover{background:#4fc3f7;color:#0d1b2a}.round-alert-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:900;pointer-events:none}.round-alert{background:#0d1b2af2;border:2px solid #4fc3f7;border-radius:16px;padding:2rem 3rem;font-size:2rem;font-weight:700;color:#4fc3f7;text-shadow:0 0 20px rgba(79,195,247,.5);animation:roundFadeIn .3s ease-out,roundFadeOut .5s ease-in 2s forwards}@keyframes roundFadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes roundFadeOut{0%{opacity:1}to{opacity:0}}.btn-leave{background:transparent;border:1px solid #ef5350;color:#ef5350;padding:.25rem .6rem;border-radius:6px;cursor:pointer;font-size:.8rem;transition:all .2s}.btn-leave:hover{background:#ef5350;color:#fff}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#0c1426,#1a2a4a,#0d1b2a);min-height:100vh;color:#e0e0e0}#root{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}