*{box-sizing:border-box}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#111;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500}body{margin:0}button{border-radius:.5rem;border:1px solid transparent;padding:.5em 1em;font-size:1em;font-weight:500;font-family:inherit;background-color:#f8f8f8;cursor:pointer;transition:background-color .2s}button:hover{background-color:#f0f0f0}button:focus-visible{outline:2px solid #4facfe}button:active{background-color:#e0e0e0}button:disabled{background-color:#ccc;cursor:not-allowed}input{border:1px solid #ddd;border-radius:.5rem;padding:.5rem}input:focus,input:focus-visible{outline:2px solid #4facfe}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:1rem;width:100%;max-width:400px}.login-card{background:#fff;padding:2.5rem;border-radius:1rem;box-shadow:0 10px 25px #0000000d;text-align:center;width:100%}.login-card h2{margin-top:0;margin-bottom:1.5rem;color:#333}.login-form{display:flex;flex-direction:column;gap:1rem}.login-button{width:100%;padding:.75rem;background-color:#4facfe;color:#fff;border:none;border-radius:.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s;margin-top:.5rem}.login-button:hover{background-color:#0089f2}.login-button:active{background-color:#006bb3}.login-footer{margin-top:1.5rem;font-size:.9rem;color:#666}.login-footer a{color:#4facfe;text-decoration:none;font-weight:600}.login-footer a:hover{text-decoration:underline}.signup-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:1rem;width:100%;max-width:400px}.signup-card{background:#fff;padding:2.5rem;border-radius:1rem;box-shadow:0 10px 25px #0000000d;text-align:center;width:100%}.signup-card h2{margin-top:0;margin-bottom:1.5rem;color:#333}.signup-form{display:flex;flex-direction:column;gap:1rem}.form-group{text-align:left}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:#555}.form-group input{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:.5rem;font-size:1rem}.signup-button{width:100%;padding:.75rem;background-color:#4facfe;color:#fff;border:none;border-radius:.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s;margin-top:.5rem}.signup-button:hover{background-color:#0089f2}.signup-footer{margin-top:1.5rem;font-size:.9rem;color:#666}.signup-footer a{color:#4facfe;text-decoration:none;font-weight:600}.signup-footer a:hover{text-decoration:underline}.error-message{color:#e53935;background-color:#ffebee;padding:.75rem;border-radius:.5rem;margin-bottom:1rem;font-size:.9rem}.success-message{color:#2e7d32;background-color:#e8f5e9;padding:.75rem;border-radius:.5rem;margin-bottom:1rem;font-size:.9rem}.navbar-container{position:sticky;top:0;width:100%;display:flex;justify-content:center;align-items:center;background-color:#fff;border-bottom:1px solid #ddd;z-index:100;margin-bottom:1rem}.navbar-content{width:100%;max-width:var(--content-max-width);display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem}.nav-left,.nav-right{display:flex;align-items:center;gap:15px}.settings-btn,.user-name{cursor:pointer;font-size:1rem;padding:.5rem 1rem;border-radius:.5rem;transition:background-color .2s}.settings-btn:hover,.user-name:hover{background-color:#f0f0f0}.logout-btn{cursor:pointer;color:#ff4d4f;font-size:1rem;border:none;background:none}.settings-popup{position:absolute;top:60px;left:20px;width:200px;height:150px;background:#fff;border:1px solid #ddd;box-shadow:0 4px 12px #0000001a;padding:20px;z-index:101;border-radius:8px}.home-container{padding:20px;width:100%;max-width:var(--content-max-width)}.home-header{display:flex;justify-content:space-between;align-items:center;margin-top:30px;margin-bottom:10px}.home-header h2{margin:0}.header-buttons{display:flex;gap:10px}.header-buttons button{cursor:pointer}.rooms-table{width:100%;border-collapse:collapse;margin-top:10px;border:1px solid #ddd}.rooms-table thead tr{background-color:#f2f2f2}.rooms-table th,.rooms-table td{padding:10px;border:1px solid #ddd}.room-row{text-align:center}.room-row.available{cursor:pointer;background-color:transparent}.room-row.unavailable{cursor:not-allowed;background-color:#f9f9f9}.no-rooms{padding:20px;text-align:center}.room-detail-container{padding:1rem;width:100%;max-width:800px}.room-detail-header{display:flex;justify-content:space-between;align-items:center}.room-detail-header-buttons{display:flex;gap:.5rem}.game-start-button{background:#4facfe;color:#fff;border:none;padding:.5rem 1rem;transition:background .2s ease}.game-start-button:hover{background:#46a0f0}.game-start-button:active{background:#3a86cc}.game-start-button:disabled{background:#ccc}.leave-button{background:#ff6b6b;color:#fff;padding:.5rem 1rem}.leave-button:hover{background:#e05f5f}.leave-button:active{background:#cc4c4c}.room-content{display:flex;gap:1rem}.room-info-section{flex:1;display:flex;flex-direction:column;gap:1rem}.info-card{padding:1.5rem;border:1px solid #ddd;border-radius:.5rem}.member-list{list-style:none;padding:0}.member-item{padding:.75rem .5rem;border-bottom:1px solid #eee}.member-item:first-child{border-top:1px solid #eee}.rule-box{padding:1rem;display:flex;flex-direction:column;gap:1.5rem}.rule-item{display:flex;flex-direction:column;gap:.75rem}.rule-item>span{font-weight:600;font-size:.9rem}.rule-button-group{display:flex;gap:.5rem}.rule-button{flex:1;background:#f8f9fa;border:1px solid #dee2e6;color:#495057;padding:.6rem .4rem;font-size:.85rem;cursor:pointer;transition:all .2s ease;border-radius:.5rem}.rule-button:hover{background:#e9ecef;border-color:#ced4da}.rule-button.active{color:#fff;background:#6c757d;border-color:#6c757d;box-shadow:0 2px 4px #6c757d4d}.rule-item-box{border:1px solid #ddd;border-radius:.5rem;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.rule-button.team-red.active{background:#ff6b6b;border-color:#ff6b6b;box-shadow:0 2px 4px #ff6b6b4d}.rule-button.team-blue.active{background:#4facfe;border-color:#4facfe;box-shadow:0 2px 4px #4facfe4d}.chat-section{flex:1;display:flex;flex-direction:column;border:1px solid #ddd;border-radius:.5rem;min-height:50vh}.chat-header{padding:.5rem 1rem;border-bottom:1px solid #ddd;background-color:#f9f9f9}.chat-messages{flex:1;overflow-y:auto;padding:.5rem 1rem;background-color:#fff}.chat-placeholder{color:#888;text-align:center;margin-top:3rem}.chat-input-area{padding:.5rem;border-top:1px solid #ddd;display:flex;gap:.5rem}.chat-input-area>input{flex:1}.tichu-game-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background:radial-gradient(circle at center,#1a4a1a,#0d2a0d);overflow:hidden;color:#fff;font-family:Inter,sans-serif;z-index:0;display:flex;justify-content:center;align-items:center}.display-top-left{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.score-display-top-left{position:relative;background:#0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:10px 20px;border-radius:12px;border:1px solid rgba(255,255,255,.1);font-weight:700;font-size:1.2rem;z-index:10;display:flex;align-items:center;gap:10px;box-shadow:0 4px 15px #0000004d}.team-red-label{color:#e74c3c}.team-blue-label{color:#3498db}.show-rule-button{appearance:none;background:#ffffff1a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.2);padding:.5rem .7rem;border-radius:.5rem;cursor:pointer;transition:background-color .2s}.show-rule-button:before{content:"📋"}.show-rule-button:hover{background:#fff3}.show-rule-button:checked{background:#ffffff4d}.show-rule-button:checked:hover{background:#fff6}.rule-popup{background:#ffffff1a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:12px;padding:20px;z-index:100}.rule-popup:after{content:"";position:absolute;top:0;left:1rem;transform:translateY(-100%);border-width:.5rem;border-style:solid;border-color:transparent transparent rgba(255,255,255,.1) transparent}.rule-popup ul{margin:0;list-style:none;padding:0}.game-board{position:relative;width:100%;max-width:var(--content-max-width);height:calc(100% - 4rem);margin-top:3rem;display:flex;flex-direction:column;justify-content:center;align-items:center}.player-section{position:absolute;display:flex;flex-direction:column;align-items:center;gap:10px}.player-bottom{bottom:10px}.player-top{top:10px;flex-direction:column-reverse}.player-left{left:10px;flex-direction:row-reverse}.player-right{right:10px;flex-direction:row}.player-info{text-align:center;background:#ffffff1a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:.5rem 1rem;border-radius:1rem;border:1px solid rgba(255,255,255,.2);min-width:7.5rem;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem}.player-name{font-weight:700}.player-name.team-RED{color:#e74c3c}.player-name.team-BLUE{color:#3498db}.card-count{font-size:.9rem;opacity:.8}.tichu-declaration{color:gold;font-size:.8rem}.status-turn{color:#4facfe;font-size:.8rem}.status-pass{color:#ff6b6b;font-size:.8rem}@media screen and (max-width:800px){.player-info{-webkit-backdrop-filter:none;backdrop-filter:none;min-width:auto;max-width:120px;gap:.1rem}.player-name{font-size:.8rem}.card-count,.tichu-declaration,.status-turn,.status-pass{font-size:.7rem}}.hand{display:flex;justify-content:center;align-items:center;flex-direction:row;max-width:100vw}.player-top .hand{flex-direction:row-reverse}.player-left .hand{flex-direction:column}.player-right .hand{flex-direction:column-reverse}@media screen and (max-width:1024px){.player-top .hand,.player-left .hand,.player-right .hand{display:none}}.card{--card-width: min(6rem, 100vw / 16 * 3);--card-height: calc(var(--card-width) * 1.4);width:var(--card-width);height:var(--card-height);background:#fff;border-radius:8px;border:2px solid #333;color:#333;display:flex;flex-direction:column;justify-content:space-between;padding:8px;transition:transform .2s ease,box-shadow .2s ease;-webkit-user-select:none;user-select:none;position:relative;box-shadow:0 4px 8px #0000004d}.player-left .card,.player-right .card{width:var(--card-height);height:var(--card-width)}.player-bottom .card.selectable{cursor:pointer}.card:not(:first-child){--min-card-margin: calc(var(--card-width) / 3);--max-card-margin: calc(var(--card-width) / 3 * 2);--card-margin: max(var(--min-card-margin), min(calc((14 * var(--card-width) - 100vw) / 13), var(--max-card-margin)))}.player-bottom .card:not(:first-child),.trick-area .card:not(:first-child){margin-left:calc(var(--card-margin) * -1)}.player-top .card:not(:first-child){margin-right:calc(var(--max-card-margin) * -1)}.player-left .card:not(:first-child){margin-top:calc(var(--max-card-margin) * -1)}.player-right .card:not(:first-child){margin-bottom:calc(var(--max-card-margin) * -1)}.card.selected{transform:translateY(-1.5rem);box-shadow:0 10px 20px #00000080;border-color:#4facfe}.card.back{background:repeating-linear-gradient(45deg,#2c3e50,#2c3e50 10px,#34495e 10px 20px);border:2px solid #ecf0f1}.card-top{display:flex;flex-direction:column;align-items:flex-start;line-height:1}.card-bottom{display:flex;flex-direction:column;align-items:flex-start;line-height:1;transform:rotate(180deg)}.card-rank{font-size:1rem;font-weight:700}.card-suit{font-size:.8rem}.card-center{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.card-center-icon{font-size:calc(var(--card-width) * .4)}.card-image{max-width:90%;max-height:90%;object-fit:contain}.special-tiny-label{font-size:.6rem;font-weight:700;text-transform:uppercase;opacity:.7}.special-label{font-size:.8rem;font-weight:700;text-transform:uppercase;color:#8e44ad}.suit-SPADE{color:#3498db}.suit-HEART{color:#e74c3c}.suit-DIAMOND{color:#f1c40f}.suit-CLUB{color:#27ae60}.special-card{color:#8e44ad;font-weight:700}.trick-area{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50%;height:35%;background:#ffffff0d;border-radius:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}@media screen and (max-width:800px){.trick-area{width:100%;height:60%;background:none}}.current-wish-indicator{position:absolute;top:-2.5rem;background:#ffd70026;color:gold;padding:6px 16px;border-radius:16px;border:1px solid rgba(255,215,0,.4);font-weight:700;font-size:1.1em;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 0 10px #ffd70033;letter-spacing:1px}.played-cards{width:100%;display:flex;justify-content:center}.played-cards .card{--card-margin: max(var(--min-card-margin), min(calc((14 * var(--card-width) - 100%) / 13), var(--max-card-margin)))}.played-by{font-size:.9rem;opacity:.7}.played-trick-label{font-size:.9rem;font-weight:700}.controls{display:flex;gap:.25rem;margin-bottom:2rem}.controls button{font-size:.8rem;padding:.4rem .8rem;border:none;border-radius:8px;transition:all .2s}.controls button:disabled{background:#555;opacity:.5}.play-trick-button{background:#4facfe;color:#fff}.play-trick-button:hover,.play-trick-button:active{background:#3498db}.play-bomb-button{background:#8b0000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff;animation:pulse 2s infinite}.play-bomb-button:hover,.play-bomb-button:active{background:#600}.pass-button{background:#ff6b6b;color:#fff}.pass-button:hover,.pass-button:active{background:#e74c3c}.large-tichu-button{background:gold}.large-tichu-button:hover,.large-tichu-button:active{background:#f1c40f}.small-tichu-button{background:gold}.small-tichu-button:hover,.small-tichu-button:active{background:#f1c40f}.exchange-button{background:#f39c12;color:#fff}.exchange-button:hover,.exchange-button:active{background:#e67e22}@keyframes pulse{0%{box-shadow:0 0 #f006}70%{box-shadow:0 0 0 10px #f000}to{box-shadow:0 0 #f000}}.exchange-summary{display:flex;gap:1rem;justify-content:center;transform:scale(.8)}.exchange-slot{display:flex;flex-direction:column;align-items:center;gap:.25rem}.slot-label{font-size:1rem;opacity:.6}.exchange-slot .card{margin-left:0!important;box-shadow:0 2px 4px #0003}.card.card-placeholder{background:none;border:2px dashed rgba(255,255,255,.3);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff3}.score-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.score-modal-content{background:linear-gradient(135deg,#1e3c72,#2a5298);padding:40px;border-radius:24px;width:90%;max-width:700px;box-shadow:0 20px 50px #00000080;border:1px solid rgba(255,255,255,.1);text-align:center;animation:slideUp .4s cubic-bezier(.175,.885,.32,1.275)}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.score-modal-content h2{font-size:2.5em;margin-bottom:30px;text-transform:uppercase;letter-spacing:4px;background:linear-gradient(to right,#fff,#4facfe);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.score-table-container{max-height:400px;overflow-y:auto;margin-bottom:30px;border-radius:12px;background:#0003}.score-table{width:100%;border-collapse:collapse;font-size:1.1em}.score-table th{background:#ffffff1a;padding:15px;text-align:center;position:sticky;top:0;border-bottom:2px solid rgba(255,255,255,.1)}.score-table td{padding:12px;border-bottom:1px solid rgba(255,255,255,.05)}.score-table tr.total-row{background:#4facfe33;font-weight:700;font-size:1.25em}.score-table tr.total-row td{border-top:2px solid rgba(79,172,254,.5);border-bottom:none}.btn-modal-close{background:#4facfe;color:#fff;border:none;padding:15px 40px;border-radius:30px;font-size:1.1em;font-weight:700;cursor:pointer;transition:all .3s;text-transform:uppercase;letter-spacing:2px;box-shadow:0 4px 15px #4facfe66}.btn-modal-close:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4facfe99;background:#00f2fe}.btn-modal-close:active{transform:translateY(1px)}.wish-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:1100;animation:fadeIn .3s ease-out}.wish-modal-content{background:linear-gradient(135deg,#1a4a1a,#0d2a0d);padding:40px;border-radius:24px;width:90%;max-width:500px;box-shadow:0 25px 60px #0009;border:1px solid rgba(255,255,255,.1);text-align:center;animation:slideUp .4s cubic-bezier(.175,.885,.32,1.275)}.wish-modal-content h2{font-size:2em;margin-bottom:10px;color:gold;text-transform:uppercase;letter-spacing:2px}.wish-modal-content p{opacity:.8;margin-bottom:30px}.wish-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:30px}.btn-wish{padding:15px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:#ffffff0d;color:#fff;font-size:1.2em;font-weight:700;cursor:pointer;transition:all .2s}.btn-wish:hover{background:#4facfe;border-color:#4facfe;transform:scale(1.05);box-shadow:0 0 15px #4facfe66}.btn-no-wish{width:100%;padding:15px;border-radius:12px;border:none;background:#ff6b6b;color:#fff;font-weight:700;font-size:1.1em;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:1px}.btn-no-wish:hover{background:#ff5252;transform:translateY(-2px);box-shadow:0 5px 15px #ff6b6b66}.tichu-chat-section{position:absolute;top:10px;right:10px;width:250px;height:200px;min-height:auto;border-radius:.5rem;display:flex;flex-direction:column;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);z-index:100;box-shadow:0 4px 15px #0000004d}.tichu-chat-messages{flex:1;overflow-y:auto;padding:.5rem 1rem;background:none;font-size:.9rem;display:flex;flex-direction:column;gap:.25rem}.tichu-chat-messages::-webkit-scrollbar{width:8px;background:none}.tichu-chat-messages::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.tichu-chat-messages::-webkit-scrollbar-button{display:none}.tichu-chat-message{word-break:break-all;line-height:1.4;color:#fff;text-align:left}.tichu-chat-placeholder{margin-top:3rem;color:#fff6;text-align:center}.tichu-chat-input-area{border-top:1px solid rgba(255,255,255,.1);padding:.5rem;display:flex;gap:.5rem}.tichu-chat-input-area input{flex:1;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:.85rem;field-sizing:content}.tichu-chat-input-area input::placeholder{color:#fff6}.tichu-chat-input-area button{background:#4facfe;color:#fff;border:none;font-size:.85rem;transition:background .2s}.tichu-chat-input-area button:hover{background:#3498db}.exchange-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1200;animation:fadeIn .3s ease-out}.exchange-modal-content{background:linear-gradient(135deg,#1e3c72,#2a5298);padding:3rem;border-radius:2rem;box-shadow:0 20px 60px #000c;border:1px solid rgba(255,255,255,.1);text-align:center;display:flex;flex-direction:column;gap:1rem;animation:slideUp .4s cubic-bezier(.175,.885,.32,1.275)}.exchange-modal-content h2{font-size:1.5rem;margin-bottom:0}.exchange-results-container{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}.exchange-section h3{font-size:1rem;margin-bottom:0}.exchange-grid{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;transform:scale(.8)}.exchange-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.target-player-name{font-weight:700;color:#fff}.exchange-item .card{margin-left:0!important;transform:none!important;cursor:default!important}#root{display:flex;flex-direction:column;align-items:center;min-height:100vh;margin:0 auto;width:100%}.container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.content{--content-max-width: none}@media screen and (min-width:1200px){.content{--content-max-width: 1200px}}