*{box-sizing:border-box;margin:0;padding:0}:root{--bg-color: #1a1a2e;--surface-color: #16213e;--primary-color: #e94560;--secondary-color: #0f3460;--text-color: #eee;--text-muted: #888;--small-color: #4CAF50;--mid-color: #8BC34A;--big-color: #CDDC39;--dessert-color: #FF9800;--special-color: #2196F3;--super-color: #9C27B0;--top-color: #E91E63;--tea-color: #795548;--takeaway-color: #607D8B;--card-bg: #fff;--card-text: #333}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--bg-color);color:var(--text-color);min-height:100vh}#app{max-width:1400px;margin:0 auto;padding:20px}.screen{display:none}.screen.active{display:block}#lobby{max-width:400px;margin:80px auto;text-align:center}#lobby h1{font-size:3rem;margin-bottom:.5rem;color:var(--primary-color)}.subtitle{color:var(--text-muted);margin-bottom:2rem}.form-group{margin-bottom:1rem;text-align:left}.form-group label{display:block;margin-bottom:.5rem;color:var(--text-muted);font-size:.875rem}input{width:100%;padding:12px 16px;border:2px solid var(--secondary-color);border-radius:8px;background:var(--surface-color);color:var(--text-color);font-size:1rem}input:focus{outline:none;border-color:var(--primary-color)}input::placeholder{color:var(--text-muted)}#room-code{text-transform:uppercase;text-align:center;letter-spacing:.5em;font-weight:700}.button-group{margin:1rem 0;display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.btn{padding:12px 24px;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .2s;font-weight:600}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--primary-color);color:#fff}.btn.primary:hover:not(:disabled){background:#d63850}.btn.secondary{background:var(--secondary-color);color:#fff}.btn.secondary:hover:not(:disabled){background:#1a4a7a}.btn.small{padding:8px 16px;font-size:.875rem}.divider{margin:1.5rem 0;color:var(--text-muted);position:relative}.divider:before,.divider:after{content:"";position:absolute;top:50%;width:40%;height:1px;background:var(--secondary-color)}.divider:before{left:0}.divider:after{right:0}.error-message{color:var(--primary-color);margin-top:1rem;min-height:1.5rem}#waiting-room{max-width:500px;margin:60px auto;text-align:center}#waiting-room h2{margin-bottom:2rem}#display-room-code{color:var(--primary-color);letter-spacing:.2em;font-size:1.5em}.invite-section{background:var(--surface-color);border-radius:12px;padding:1rem 1.5rem;margin-bottom:1.5rem}.invite-section p{color:var(--text-muted);margin-bottom:.75rem;font-size:.9rem}.invite-link-container{display:flex;gap:.5rem}.invite-link-container input{flex:1;padding:10px 12px;font-size:.875rem;background:var(--bg-color);border:1px solid var(--secondary-color);border-radius:6px;color:var(--text-color);cursor:pointer}.invite-link-container input:focus{outline:none;border-color:var(--primary-color)}.copy-feedback{color:var(--small-color);font-size:.85rem;margin-top:.5rem;opacity:0;transition:opacity .2s}.copy-feedback.show{opacity:1}.players-list{background:var(--surface-color);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem}.players-list h3{margin-bottom:1rem;color:var(--text-muted)}.players-list ul{list-style:none}.players-list li{padding:.75rem;border-bottom:1px solid var(--secondary-color);display:flex;align-items:center;justify-content:space-between}.players-list li:last-child{border-bottom:none}.host-badge,.bot-badge{padding:2px 8px;border-radius:4px;font-size:.75rem;margin-left:.5rem}.host-badge{background:var(--primary-color);color:#fff}.bot-badge{background:var(--special-color);color:#fff}.player-badges{display:flex;align-items:center;gap:.25rem}.remove-bot-btn{background:transparent;border:1px solid var(--primary-color);color:var(--primary-color);padding:2px 8px;border-radius:4px;font-size:.75rem;cursor:pointer;margin-left:.5rem}.remove-bot-btn:hover{background:var(--primary-color);color:#fff}#waiting-message{color:var(--text-muted);margin-bottom:1.5rem}#game{height:calc(100vh - 40px);display:flex;flex-direction:column}.game-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:var(--surface-color);border-radius:8px;margin-bottom:1rem}.room-info{color:var(--text-muted);display:flex;gap:1rem;align-items:center}#game-room-code{color:var(--primary-color)}.round-info{background:var(--secondary-color);padding:4px 12px;border-radius:4px;font-size:.875rem}#turn-indicator{font-weight:700;padding:8px 16px;border-radius:8px;transition:all .3s ease}#turn-indicator.your-turn{color:var(--small-color);background:#4caf5033}#turn-indicator.round-complete{color:gold;background:#ffd70033;animation:pulse 1.5s ease-in-out infinite;font-size:1.1rem}#turn-indicator.clickable{cursor:pointer;text-decoration:underline;text-underline-offset:4px}#turn-indicator.clickable:hover{background:#ffd70066}#turn-indicator .click-hint{font-size:.75rem;font-weight:400;opacity:.8}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.game-layout{flex:1;display:flex;gap:1rem}.scoreboard{width:200px;background:var(--surface-color);border-radius:8px;padding:1rem;flex-shrink:0}.scoreboard h3{margin-bottom:1rem;color:var(--text-muted);font-size:.875rem;text-transform:uppercase}.score-entry{display:flex;justify-content:space-between;padding:.5rem;border-radius:4px;margin-bottom:.25rem;font-size:.875rem}.score-entry.current{background:var(--secondary-color)}.score-entry .rank{color:var(--text-muted);width:20px}.score-entry .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-entry .score{font-weight:700;color:var(--primary-color)}.game-board{flex:1;display:flex;flex-direction:column;gap:1rem;min-width:0}.other-players{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;padding:1rem;background:var(--surface-color);border-radius:8px}.opponent{text-align:center;padding:.5rem 1rem;border-radius:8px;background:var(--secondary-color);min-width:100px}.opponent.current-turn{border:2px solid var(--primary-color)}.opponent .name{font-weight:700;margin-bottom:.25rem;font-size:.875rem}.opponent .cards{color:var(--text-muted);font-size:.75rem}.opponent .score{color:var(--primary-color);font-size:.75rem;margin-top:.25rem}.center-area{display:flex;gap:2rem;padding:1rem;background:var(--surface-color);border-radius:8px}.deck-area{text-align:center;flex-shrink:0}.card-stack{width:90px;height:126px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s;position:relative}.card-stack:hover{transform:scale(1.05)}.deck{background:linear-gradient(135deg,var(--primary-color),#d63850);box-shadow:3px 3px 0 var(--secondary-color),6px 6px 0 var(--secondary-color)}.deck .card-count{color:#fff;font-size:1.5rem;font-weight:700}.center-cards-area{flex:1;min-width:0}.center-cards{display:flex;flex-wrap:wrap;gap:8px;min-height:112px;padding:8px;background:#0003;border-radius:8px;align-content:flex-start}.center-cards .card{cursor:pointer}.center-cards .card:hover{transform:translateY(-4px)}.empty-center{color:var(--text-muted);display:flex;align-items:center;justify-content:center;width:100%;font-size:.875rem}.label{display:block;margin-top:.5rem;color:var(--text-muted);font-size:.75rem}.bot-notification{text-align:center;padding:.75rem 1rem;background:var(--secondary-color);border-radius:8px;animation:fadeIn .3s ease-in}.bot-notification span{color:var(--special-color)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.action-buttons{display:flex;justify-content:center;gap:1rem;padding:1rem}.hand-area{background:var(--surface-color);border-radius:8px;padding:1rem;margin-top:auto}.hand-area h3{text-align:center;margin-bottom:1rem;color:var(--text-muted);font-size:.875rem}.hand{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding-bottom:10px}.card{width:90px;height:126px;background:var(--card-bg);border-radius:8px;padding:8px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .2s,box-shadow .2s;color:var(--card-text);font-size:.75rem;position:relative;user-select:none}.card:hover{transform:translateY(-8px);box-shadow:0 8px 16px #0000004d}.card.selected{transform:translateY(-16px);box-shadow:0 12px 24px #0006;outline:3px solid var(--primary-color)}.card .tier-indicator{position:absolute;top:4px;right:4px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;font-weight:700}.card.tier-small .tier-indicator{background:var(--small-color)}.card.tier-mid .tier-indicator{background:var(--mid-color)}.card.tier-big .tier-indicator{background:var(--big-color)}.card.tier-dessert .tier-indicator{background:var(--dessert-color)}.card.tier-special .tier-indicator{background:var(--special-color)}.card.tier-super .tier-indicator{background:var(--super-color)}.card.tier-top .tier-indicator{background:var(--top-color)}.card.tea .tier-indicator{background:var(--tea-color)}.card.takeaway .tier-indicator{background:var(--takeaway-color)}.card .card-chinese{text-align:center;font-size:1.1rem;font-weight:700;color:#333;margin-top:6px}.card .card-name{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:600;padding:2px;line-height:1.2;font-size:.65rem}.card .card-type{text-align:center;color:#666;font-size:.6rem;text-transform:uppercase}.card .card-points{position:absolute;bottom:3px;left:3px;background:#000000b3;color:#fff;padding:1px 4px;border-radius:3px;font-size:.5rem;font-weight:700}.card.tier-small{border-bottom:3px solid var(--small-color)}.card.tier-mid{border-bottom:3px solid var(--mid-color)}.card.tier-big{border-bottom:3px solid var(--big-color)}.card.tier-dessert{border-bottom:3px solid var(--dessert-color)}.card.tier-special{border-bottom:3px solid var(--special-color)}.card.tier-super{border-bottom:3px solid var(--super-color)}.card.tier-top{border-bottom:3px solid var(--top-color)}.card.tea{border-bottom:3px solid var(--tea-color)}.card.takeaway{border-bottom:3px solid var(--takeaway-color)}.floating-banner{position:fixed;top:0;left:0;right:0;z-index:1000;background:linear-gradient(135deg,var(--surface-color),var(--secondary-color));padding:12px 20px;display:flex;justify-content:center;align-items:center;gap:20px;box-shadow:0 4px 20px #00000080;animation:slideDown .3s ease-out;flex-wrap:wrap}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.floating-banner>span{font-size:1.25rem;font-weight:700;color:gold}.floating-banner-buttons{display:flex;gap:10px;align-items:center}.floating-banner .btn.primary{animation:pulse 1.5s ease-in-out infinite}.floating-banner .btn.secondary{background:transparent;border:1px solid var(--text-muted);color:var(--text-color)}.floating-banner .btn.secondary:hover{background:#ffffff1a}#round-end,#game-over{max-width:700px;margin:40px auto;text-align:center}#round-end h2,#game-over h2{font-size:2rem;margin-bottom:1.5rem;color:var(--primary-color)}#round-winner-info,#final-winner-info{font-size:1.25rem;margin-bottom:1.5rem}.winning-hand{background:var(--surface-color);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem}.winning-hand h4{margin-bottom:1rem;color:var(--text-muted)}.winning-hand .sets{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem}.winning-hand .set-group{text-align:center}.winning-hand .set-label{margin-bottom:.5rem;color:var(--text-muted);font-size:.75rem}.winning-hand .set-cards{display:flex;gap:4px;justify-content:center}.winning-hand .card{width:70px;height:98px;font-size:.6rem}.winning-hand .card .card-chinese{font-size:.85rem;margin-top:3px}.winning-hand .card .card-name{font-size:.55rem}.winning-hand .card:hover{transform:none}.score-breakdown{margin-top:1rem;padding:1rem;background:#0003;border-radius:8px;font-size:.875rem}.score-breakdown .total{font-size:1.25rem;font-weight:700;color:var(--primary-color);margin-top:.5rem}.round-scores,.final-standings{background:var(--surface-color);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem}.round-scores h4,.final-standings h4{margin-bottom:1rem;color:var(--text-muted)}.standings-table{width:100%;text-align:left}.standings-table th,.standings-table td{padding:.75rem;border-bottom:1px solid var(--secondary-color)}.standings-table th{color:var(--text-muted);font-weight:400;font-size:.75rem;text-transform:uppercase}.standings-table tr:last-child td{border-bottom:none}.standings-table .rank-1{color:gold}.standings-table .rank-2{color:silver}.standings-table .rank-3{color:#cd7f32}@media(max-width:900px){.game-layout{flex-direction:column}.scoreboard{width:100%;display:flex;gap:1rem;align-items:center}.scoreboard h3{margin-bottom:0;white-space:nowrap}#scoreboard-list{display:flex;flex-wrap:wrap;gap:.5rem;flex:1}.score-entry{margin-bottom:0;padding:.25rem .5rem}}@media(max-width:600px){#app{padding:10px 10px 100px}.card{width:68px;height:95px;font-size:.6rem;padding:6px}.card .card-chinese{font-size:.9rem;margin-top:4px}.card .card-name{font-size:.55rem}.card .tier-indicator{min-width:18px;height:18px;font-size:.55rem;padding:0 4px}.center-area{flex-direction:column;align-items:center}.card-stack{width:68px;height:95px}.action-buttons{flex-wrap:wrap}.btn{padding:10px 16px;font-size:.875rem}.scoreboard{flex-direction:column;align-items:stretch}#scoreboard-list{flex-direction:column}.floating-banner{top:auto;bottom:0;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}#game{height:auto;min-height:auto}.game-layout{min-height:auto}#round-end,#game-over{margin-top:40px;padding:1.5rem;background:var(--surface-color);border-radius:12px;border:2px solid var(--primary-color);position:relative;z-index:10}#round-end:before,#game-over:before{content:"";display:block;height:20px;background:var(--bg-color);position:absolute;top:-22px;left:-10px;right:-10px}#round-end h2,#game-over h2{font-size:1.25rem}.hand-area{margin-bottom:80px}.winning-hand .card{width:60px;height:84px}}