*{margin:0;padding:0;box-sizing:border-box}body{background:#1a1a2e;color:#ccc;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px}#toolbar{display:flex;gap:12px;padding:8px 12px;background:#0d1b2a;align-items:center;flex-wrap:wrap;font-size:12px}#toolbar a{color:#8ac;text-decoration:none}#toolbar a:hover{text-decoration:underline}#toolbar .sep{color:#334}#toolbar label{display:flex;align-items:center;gap:4px;color:#889}#toolbar select,#toolbar input[type=range]{cursor:pointer}#toolbar button{padding:4px 10px;background:#1e3a5f;color:#ccc;border:1px solid #2a5080;border-radius:4px;cursor:pointer;font-size:11px}#toolbar button:hover{background:#2a5080}#phone-frame{width:390px;height:844px;margin:16px auto;background:#0a1628;border-radius:40px;border:3px solid #222;overflow:hidden;position:relative;padding:48px 0 34px}#game-screen{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.scoreboard{display:flex;padding:4px 16px;margin-bottom:6px;align-items:center}.team-score{flex:1;text-align:center;padding:6px 8px;border-radius:10px}.team-score.my-team{background:#1a2a44;border:1px solid #ffd70044}.team-label{color:#888;font-size:11px;letter-spacing:1px}.team-points{color:gold;font-size:22px;font-weight:900}.vs-block{padding:0 10px;text-align:center}.vs-text{color:#444;font-weight:700;font-size:13px}.round-label{color:#556;font-size:11px}.leave-btn{color:#555;font-size:18px;font-weight:700;padding:8px;cursor:pointer}.player-card{background:#1a2a44;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:1px;border:1px solid transparent;font-size:12px}.player-card.active{border-color:gold}.player-card.partner-card{border-color:#4caf5066}.player-card.active.partner-card{border-color:gold}.player-card .name{color:#ccc;font-weight:600;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-card .badge{color:#4caf50;font-size:8px;font-weight:800;letter-spacing:.5px}.player-card .tiles{color:#888;font-size:10px}.player-card .action{font-size:10px;font-weight:700}.player-card .action.played{color:#7aafff}.player-card .action.passed{color:#ff6b6b}.layout-A .partner-row{display:flex;justify-content:center;padding:2px 0}.layout-A .partner-row .player-card{padding:4px 12px;flex-direction:row;gap:6px}.layout-A .partner-row .player-card .name{max-width:80px}.layout-A .board-area{flex:1;position:relative;margin:0 8px;min-height:0}.layout-A .board-surface{width:100%;height:100%;background:#112030;border-radius:12px;position:relative;overflow:hidden}.layout-A .side-card{position:absolute;z-index:2;padding:6px 4px;min-width:48px;max-width:56px;border-radius:8px;background:#1a2a44dd;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.layout-A .side-card .name{max-width:48px;font-size:10px}.layout-A .side-card.left{top:8px;left:8px}.layout-A .side-card.right{top:8px;right:8px}.layout-B .top-bar{display:flex;justify-content:space-around;padding:2px 8px;gap:4px}.layout-B .top-bar .player-card{padding:4px 8px;flex-direction:row;gap:4px;flex:1;max-width:120px}.layout-B .top-bar .player-card .name{max-width:60px}.layout-B .board-area{flex:1;margin:0 8px;min-height:0}.layout-B .board-surface{width:100%;height:100%;background:#112030;border-radius:12px;overflow:hidden}.layout-C .players-row{display:flex;justify-content:center;padding:2px 8px;gap:6px}.layout-C .players-row .player-card{padding:3px 6px;flex-direction:row;gap:4px;align-items:center}.layout-C .player-card .avatar{width:22px;height:22px;border-radius:11px;background:#2a4a6a;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#ccc;flex-shrink:0}.layout-C .player-card .info{display:flex;flex-direction:column;min-width:0}.layout-C .player-card .name{font-size:10px;max-width:55px}.layout-C .player-card .meta{font-size:9px;color:#888;display:flex;gap:3px;align-items:center}.layout-C .board-area{flex:1;margin:0 8px;min-height:0}.layout-C .board-surface{width:100%;height:100%;background:#112030;border-radius:12px;overflow:hidden}.layout-D .header{padding:0 8px}.layout-D .header-top{display:flex;justify-content:flex-end;padding:2px 8px}.layout-D .header-top .leave-btn{color:#555;font-size:16px;font-weight:700;padding:4px;cursor:pointer}.layout-D .seat-strip{display:flex;gap:6px;padding:4px}.layout-D .seat{flex:1;display:flex;align-items:center;gap:8px;background:#1a2a44;border-radius:10px;padding:8px 10px;border:1px solid transparent;min-width:0}.layout-D .seat.active{border-color:gold}.layout-D .seat.partner{border-color:#4caf50;border-width:2px;background:#1a2e44}.layout-D .seat.active.partner{border-color:gold}.layout-D .seat .seat-icon{width:28px;height:28px;border-radius:14px;background:#2a4a6a;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#ddd;flex-shrink:0}.layout-D .seat .seat-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.layout-D .seat .seat-name{color:#ccc;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layout-D .seat .seat-meta{display:flex;align-items:center;gap:6px;font-size:11px}.layout-D .seat .seat-tiles{color:#888}.layout-D .seat .seat-action{font-weight:700}.layout-D .seat .seat-action.played{color:#7aafff}.layout-D .seat .seat-action.passed{color:#ff6b6b}.layout-D .board-area{flex:1;margin:4px 8px 0;min-height:0}.layout-D .board-surface{width:100%;height:100%;background:#112030;border-radius:12px;overflow:hidden;position:relative}.fx-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;opacity:0}.fx-overlay.hidden{display:none}.fx-overlay.show{animation:fx-in .3s ease-out forwards}.fx-overlay.fade-out{animation:fx-out .4s ease-in forwards}.fx-glow{position:absolute;top:0;right:0;bottom:0;left:0}.fx-label{font-size:32px;font-weight:900;letter-spacing:4px;text-align:center;text-shadow:0 0 20px var(--fx-color)}.fx-player{font-size:20px;color:#fff;margin-top:6px;font-weight:600}.fx-subtext{font-size:14px;color:#fffa;margin-top:4px;font-style:italic}@keyframes fx-in{0%{opacity:0;transform:scale(.4)}80%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes fx-out{0%{opacity:1}to{opacity:0}}.pass-toast{position:absolute;top:8px;left:50%;transform:translate(-50%);z-index:3;background:#1a2a44;border-radius:10px;padding:8px 16px;border:1px solid #ff6b6b44;transition:opacity .6s ease-out;white-space:nowrap}.pass-toast.hidden{display:none}.pass-toast.fade-out{opacity:0}.pass-toast-text{color:#ff6b6b;font-size:13px;font-weight:600}.turn-indicator{text-align:center;padding:4px 0}.turn-indicator.my-turn{color:gold;font-weight:800;font-size:14px;letter-spacing:2px}.turn-indicator.their-turn{color:#556;font-size:13px}.hand-area{max-height:120px;display:flex;flex-direction:column;align-items:center;padding-bottom:4px;overflow:hidden}.hand-row{display:flex;justify-content:center;gap:2px}.tile{position:absolute;background:#e8d5b0;border:1px solid #8a6a3060;border-radius:3px;display:flex;overflow:hidden}.tile.vertical{flex-direction:column}.tile.horizontal{flex-direction:row}.tile-half{flex:1;position:relative;display:flex;align-items:center;justify-content:center}.tile .divider-h{width:calc(100% - 4px);height:1px;background:#8a6a3060;align-self:center}.tile .divider-v{height:calc(100% - 4px);width:1px;background:#8a6a3060;align-self:center}.pip{position:absolute;background:#1a1a2e;border-radius:50%}.hand-tile{width:30px;height:52px;background:#e8d5b0;border:1px solid #8a6a3060;border-radius:3px;display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}.hand-tile.dimmed{opacity:.45}.hand-tile .tile-half{flex:1;position:relative}.hand-tile .divider-h{width:calc(100% - 4px);height:1px;background:#8a6a3060;align-self:center}.action-bar{display:flex;justify-content:flex-end;padding:4px 16px 0}.coach-btn{background:#1a2a44;border-radius:20px;padding:6px 14px;border:1px solid #ffd70044;color:gold;font-weight:600;font-size:12px;cursor:pointer}