*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--felt: #1a5c2e;--felt-dark: #0f3d1c;--gold: #FFD700;--red: #e63946;--card-bg: #fff;--card-w: 60px;--card-h: 84px;--card-w-sm: 40px;--card-h-sm: 56px;--card-radius: 6px;--text: #f5f0e0;--text-dim: #a09880;--bg: #0a1a0d;font-family:PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:var(--text);background:var(--bg)}body{margin:0;overflow:hidden;height:100vh}#root{height:100%}.auth-page{display:grid;place-items:center;height:100vh;background:var(--bg)}.auth-card{background:#1a1a1a;border-radius:16px;padding:40px;width:360px;text-align:center;box-shadow:0 8px 32px #00000080}.auth-title{font-size:36px;color:var(--gold);margin-bottom:4px;letter-spacing:4px}.auth-subtitle{color:var(--text-dim);margin-bottom:24px;font-size:14px}.auth-tabs{display:flex;gap:0;margin-bottom:20px}.auth-tab{flex:1;padding:10px;border:none;background:transparent;color:var(--text-dim);cursor:pointer;font-size:15px;border-bottom:2px solid transparent;transition:all .2s}.auth-tab--active{color:var(--gold);border-bottom-color:var(--gold)}.auth-form{display:flex;flex-direction:column;gap:12px}.auth-input{padding:10px 14px;border-radius:8px;border:1px solid #333;background:#222;color:#fff;font-size:15px;outline:none;transition:border-color .2s}.auth-input:focus{border-color:var(--gold)}.auth-button{padding:12px;border-radius:8px;border:none;background:var(--gold);color:#1a1a1a;font-weight:700;font-size:16px;cursor:pointer;transition:opacity .2s}.auth-button:disabled{opacity:.5;cursor:default}.auth-error{color:var(--red);font-size:13px;padding:8px}.auth-loading{text-align:center}.auth-loading__spinner{width:32px;height:32px;border:3px solid #333;border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}@keyframes spin{to{transform:rotate(360deg)}}.auth-loading__text{color:var(--text-dim)}.start-screen{display:grid;place-items:center;height:100vh;background:var(--bg)}.start-screen__card{text-align:center;padding:40px 48px;background:#1a1a1a;border-radius:16px;box-shadow:0 8px 32px #00000080}.start-screen__decorative{display:flex;justify-content:center;gap:12px;font-size:32px;margin-bottom:16px}.start-screen__suit:nth-child(1){color:#333}.start-screen__suit:nth-child(2){color:var(--red)}.start-screen__suit:nth-child(3){color:#333}.start-screen__suit:nth-child(4){color:var(--red)}.start-screen__title{font-size:48px;color:var(--gold);letter-spacing:8px;margin-bottom:8px}.start-screen__subtitle{color:var(--text-dim);margin-bottom:32px;font-size:14px}.start-screen__button{padding:14px 48px;border-radius:8px;border:none;background:var(--gold);color:#1a1a1a;font-weight:700;font-size:18px;cursor:pointer;transition:transform .15s;letter-spacing:2px}.start-screen__button:hover{transform:scale(1.05)}.start-screen__user-bar{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:12px}.start-screen__username{color:var(--text-dim);font-size:14px}.start-screen__logout-btn{background:none;border:1px solid #555;border-radius:4px;color:#999;padding:4px 12px;cursor:pointer;font-size:12px}.game-table{height:100vh;display:flex;flex-direction:column;background:var(--bg)}.game-table__header{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;background:#111;border-bottom:1px solid #222;flex-shrink:0}.game-table__level{display:flex;align-items:center;gap:8px}.game-table__level-label{font-size:13px;color:var(--text-dim)}.game-table__level-value{font-size:20px;font-weight:700;color:var(--gold);background:#2a2a2a;padding:2px 12px;border-radius:4px}.game-table__teams{display:flex;gap:20px}.game-table__team{font-size:13px;padding:4px 12px;border-radius:4px;background:#1a1a1a}.game-table__team--0{color:#6cb4ee}.game-table__team--1{color:#ee9a6c}.game-table__round{font-size:13px;color:var(--text-dim)}.game-table__felt{flex:1;position:relative;background:var(--felt);background-image:radial-gradient(ellipse at center,#1e6b35,#0f3d1c);overflow:hidden}.game-table__seat--north{position:absolute;top:8px;left:50%;transform:translate(-50%)}.game-table__seat--south{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:100%;display:flex;justify-content:center}.game-table__seat--west{position:absolute;left:8px;top:50%;transform:translateY(-50%)}.game-table__seat--east{position:absolute;right:8px;top:50%;transform:translateY(-50%)}.game-table__center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:280px}.game-table__played-area{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.game-table__played-middle{display:flex;align-items:center;justify-content:space-between;width:100%}.game-table__center-info{display:flex;align-items:center;justify-content:center;min-width:60px}.game-table__turn-indicator{font-size:16px;color:var(--gold);background:#0006;padding:6px 14px;border-radius:20px;border:1px solid rgba(255,215,0,.3)}.card{position:relative;display:inline-flex;flex-direction:column;border-radius:var(--card-radius);cursor:pointer;transition:transform .15s,box-shadow .15s;-webkit-user-select:none;user-select:none;flex-shrink:0}.card--normal{width:var(--card-w);height:var(--card-h);background:var(--card-bg);border:1px solid #ccc;box-shadow:0 2px 4px #0003}.card--small{width:var(--card-w-sm);height:var(--card-h-sm);background:var(--card-bg);border:1px solid #ccc;box-shadow:0 1px 2px #0003}.card--back{background:linear-gradient(135deg,#1a3a6b,#2a5298);border:1px solid #4a7acc;cursor:default}.card__pattern{width:100%;height:100%;border-radius:var(--card-radius);background:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(255,255,255,.05) 3px,rgba(255,255,255,.05) 6px)}.card--red{color:var(--red)}.card--black{color:#222}.card--selected{transform:translateY(-16px);box-shadow:0 0 12px 2px #ffd70099,0 6px 16px #ffd7004d;border-color:var(--gold);border-width:2px;z-index:10}.card--wild{border-color:#e8a500;box-shadow:0 0 6px #e8a50066}.card__wild-badge{position:absolute;top:-4px;right:-4px;background:#e8a500;color:#fff;font-size:9px;padding:1px 4px;border-radius:4px;font-weight:700}.card__corner{display:flex;flex-direction:column;align-items:center;padding:2px 4px;line-height:1}.card--normal .card__corner{font-size:13px}.card--small .card__corner{font-size:10px}.card__corner--bottom{position:absolute;bottom:0;right:0;transform:rotate(180deg)}.card__rank{font-weight:700}.card__suit{font-size:.85em}.card__center{flex:1;display:flex;align-items:center;justify-content:center}.card__center-suit{font-size:20px}.card--small .card__center-suit{font-size:14px}.card__joker-symbol{font-size:20px}.card--small .card__joker-symbol{font-size:14px}.player-hand{padding:8px 16px 12px;background:#0000004d;border-radius:12px 12px 0 0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);max-width:100vw;overflow-x:auto}.player-hand--active{background:#00000080;border-top:2px solid var(--gold)}.player-hand__cards{display:flex;justify-content:center}.player-hand__cards .card{margin-left:-14px;transition:transform .15s,box-shadow .15s,margin-top .15s}.player-hand__cards .card:first-child{margin-left:0}.player-hand__cards .card:hover:not(.card--selected){transform:translateY(-6px)}.player-hand__info{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:6px;font-size:12px;color:var(--text-dim)}.player-hand__finish{color:var(--gold);font-weight:700}.player-hand__mode-bar{display:flex;justify-content:center;gap:4px;margin-bottom:6px}.player-hand__mode-btn{padding:3px 14px;border-radius:12px;border:1px solid #555;background:transparent;color:var(--text-dim);font-size:12px;cursor:pointer;transition:all .15s}.player-hand__mode-btn--active{background:#ffd70026;border-color:var(--gold);color:var(--gold)}.player-hand__grouped{display:flex;justify-content:center;align-items:flex-end;gap:0;flex-wrap:nowrap}.hand-group{display:flex;flex-direction:column;align-items:center;margin:0 4px;position:relative}.hand-group--single{margin:0 1px}.hand-group--pair{margin:0 2px}.hand-group__label{font-size:10px;padding:1px 6px;border-radius:8px;margin-bottom:2px;border:none;cursor:pointer;transition:all .15s;white-space:nowrap;background:#ffffff1a;color:var(--text-dim)}.hand-group__label:hover{background:#fff3}.hand-group__label--selected{background:#ffd7004d;color:var(--gold)}.hand-group--bomb .hand-group__label{background:#ff323240;color:#ff6b6b}.hand-group--combo .hand-group__label{background:#64c8ff33;color:#6cb4ee}.hand-group__cards{display:flex}.hand-group__cards .card{margin-left:-12px;transition:transform .15s,box-shadow .15s}.hand-group__cards .card:first-child{margin-left:0}.hand-group__cards .card:hover:not(.card--selected){transform:translateY(-6px)}.hand-group+.hand-group{margin-left:6px}.hand-group--bomb+.hand-group,.hand-group+.hand-group--bomb{margin-left:10px}.opponent-hand{text-align:center}.opponent-hand--active .opponent-hand__label{color:var(--gold)}.opponent-hand__label{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:4px;font-size:13px;color:var(--text-dim)}.opponent-hand__count{background:#0000004d;padding:1px 8px;border-radius:10px;font-size:12px}.opponent-hand__finish{color:var(--gold);font-weight:700}.opponent-hand__cards{display:flex;justify-content:center}.opponent-hand__cards .card{margin-left:-24px}.opponent-hand__cards .card:first-child{margin-left:0}.opponent-hand__more{color:var(--text-dim);font-size:12px;margin-left:4px}.game-table__seat--west .opponent-hand__cards,.game-table__seat--east .opponent-hand__cards{flex-direction:column}.game-table__seat--west .opponent-hand__cards .card,.game-table__seat--east .opponent-hand__cards .card{margin-left:0;margin-top:-36px}.game-table__seat--west .opponent-hand__cards .card:first-child,.game-table__seat--east .opponent-hand__cards .card:first-child{margin-top:0}.played-cards{min-height:60px;display:flex;flex-direction:column;align-items:center}.played-cards__cards{display:flex;gap:2px}.played-cards__label{font-size:11px;color:var(--gold);margin-top:2px}.played-cards__empty{min-height:56px}.action-panel{position:absolute;bottom:110px;left:50%;transform:translate(-50%);z-index:10}.action-panel__buttons{display:flex;gap:12px}.action-panel__btn{padding:10px 28px;border-radius:8px;border:none;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .2s,transform .1s}.action-panel__btn:disabled{opacity:.4;cursor:default}.action-panel__btn:active:not(:disabled){transform:scale(.95)}.action-panel__btn--play{background:var(--gold);color:#1a1a1a}.action-panel__btn--pass{background:#555;color:#fff}.action-panel__btn--clear{background:#333;color:#ccc}.action-panel__waiting{color:var(--text-dim);font-size:14px}.round-result-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:grid;place-items:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.round-result{background:#1a1a1a;border-radius:16px;padding:32px 40px;text-align:center;box-shadow:0 8px 32px #00000080;min-width:300px}.round-result__title{font-size:36px;margin-bottom:16px;letter-spacing:4px}.round-result__title--win{color:var(--gold)}.round-result__title--lose{color:var(--red)}.round-result__info{margin-bottom:16px}.round-result__info p{margin:4px 0;color:var(--text-dim)}.round-result__order{margin-bottom:16px}.round-result__order h3{font-size:14px;color:var(--text-dim);margin-bottom:8px}.round-result__order-item{display:flex;justify-content:center;gap:12px;padding:4px 0}.round-result__order-pos{color:var(--gold);font-weight:700}.round-result__order-name{color:var(--text)}.round-result__levels{margin-bottom:20px}.round-result__levels p{margin:4px 0;color:var(--text-dim);font-size:13px}.round-result__btn{padding:12px 40px;border-radius:8px;border:none;background:var(--gold);color:#1a1a1a;font-weight:700;font-size:16px;cursor:pointer}