*{box-sizing:border-box}:root{font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#1a1a1a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}body{display:flex}button{font-family:inherit}.tile{display:flex;align-items:center;justify-content:center;cursor:default;-webkit-user-select:none;user-select:none;position:relative;flex-shrink:0;background:#f5f0e1;border-radius:4px;box-shadow:1px 1px 2px #0000004d,inset 0 0 1px #ffffff80}.tile-normal{width:36px;height:48px;padding:2px}.tile-normal.tile-rotated{width:48px;height:36px}.tile-hint{width:28px;height:36px;padding:2px}.tile-hint.tile-rotated{width:36px;width:24px;height:32px}.tile-rotated-90,.tile-rotated-270{width:48px;height:36px;display:flex;align-items:center;justify-content:center}.tile-rotated-90 .tile-image{transform:rotate(90deg);width:36px;height:48px}.tile-rotated-270 .tile-image{transform:rotate(270deg);width:36px;height:48px}.tile-rotated-180{width:36px;height:48px}.tile-rotated-180 .tile-image,.tile-rotated-180 .tile-back{transform:rotate(180deg)}.tile-image{width:100%;height:100%;object-fit:contain}.tile-back{width:100%;height:100%;background:linear-gradient(135deg,#1a5c1a,#0d3d0d);border-radius:2px}.tile.clickable{cursor:pointer}.tile.selected{box-shadow:0 0 10px #ffd700b3,1px 6px 8px #0006;outline:2px solid #ffd700;outline-offset:-1px}.tile.recommended{outline:2px solid #4caf50;outline-offset:-1px;animation:pulse-green 1.5s ease-in-out infinite}@keyframes pulse-green{0%,to{box-shadow:0 0 6px #4caf5080}50%{box-shadow:0 0 12px #4caf50e6}}.tile.concealed{background:transparent;box-shadow:1px 1px 3px #0006}.player-hand{position:relative;display:flex;align-items:center;justify-content:center;z-index:20}.player-hand.current-turn{background:#ffd70026;box-shadow:0 0 10px #ffd7004d}.player-hand{position:relative;display:flex;align-items:center;justify-content:center;z-index:20;gap:8px;margin:0;padding:0}.player-hand.bottom{flex-direction:column}.player-hand.top{flex-direction:column-reverse}.player-hand.left{flex-direction:row-reverse;height:100%;justify-content:flex-end}.player-hand.right{flex-direction:row;height:100%;justify-content:flex-end}.discard-pile{display:flex;flex-wrap:wrap;gap:2px;padding:4px;background:#0003;border-radius:4px;min-height:40px;max-width:320px}.discard-pile-vertical{flex-direction:column;max-width:none;max-height:32px;flex-wrap:wrap-reverse}.player-hand.bottom .discard-pile,.player-hand.top .discard-pile{width:330px;justify-content:center;flex-direction:row}.player-hand.left .discard-pile,.player-hand.right .discard-pile{align-items:center;height:32px;max-height:32px;min-width:auto}.discard-pile .tile{width:28px!important;height:36px!important}.discard-pile-vertical .tile{width:32px!important;height:24px!important}.player-hand.bottom .discard-zone,.player-hand.top .discard-zone{width:288px;flex-direction:row;flex-wrap:wrap-reverse;justify-content:flex-start}.player-hand.top .discard-zone{flex-wrap:wrap;flex-direction:row-reverse}.player-hand.left .discard-zone,.player-hand.right .discard-zone{height:288px;display:flex}.player-hand.left .discard-zone{flex-direction:column-reverse;flex-wrap:wrap}.player-hand.right .discard-zone{flex-direction:column;flex-wrap:wrap-reverse;align-content:flex-end}.exposed-zone{display:flex;gap:8px;align-items:center;justify-content:center}.player-hand.left .exposed-zone,.player-hand.right .exposed-zone{flex-direction:column;flex-wrap:wrap;justify-content:center}.player-hand.bottom .exposed-zone,.player-hand.top .exposed-zone{flex-direction:row;flex-wrap:nowrap;max-width:90vw}.player-info{display:flex;align-items:center;gap:4px;margin-bottom:4px;font-weight:700;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.seat-label{font-size:11px;text-transform:uppercase;letter-spacing:1px}.turn-indicator{color:gold;font-size:10px;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.hand-tiles{display:flex;align-items:flex-end;gap:0;transition:all .3s ease;flex-wrap:wrap;justify-content:center;max-width:100vw}.hand-tiles-vertical{flex-direction:column;flex-wrap:wrap;align-items:center}.player-hand.bottom .meld .tile,.player-hand.bottom .flowers .tile,.player-hand.bottom .discard-pile .tile,.player-hand.top .meld .tile,.player-hand.top .flowers .tile,.player-hand.top .discard-pile .tile{width:28px!important;height:36px!important}.player-hand.left .meld .tile,.player-hand.left .flowers .tile,.player-hand.left .discard-pile .tile,.player-hand.right .meld .tile,.player-hand.right .flowers .tile,.player-hand.right .discard-pile .tile{width:42px!important;height:32px!important}.meld .tile .tile-image,.flowers .tile .tile-image,.discard-pile .tile .tile-image{width:100%;height:100%}.melds{display:flex;flex-wrap:wrap;flex-direction:row;gap:4px;margin-bottom:4px}.melds-vertical{flex-direction:column}.meld{display:flex;flex-direction:row;gap:1px;padding:2px;background:#0000001a;border-radius:3px}.meld-vertical{flex-direction:column}.flowers{display:flex;flex-direction:row;gap:2px;margin-bottom:4px;padding:2px;background:#ffc0cb33;border-radius:3px}.flowers-vertical{flex-direction:column}.player-hand.top .hand-tiles .tile{width:28px!important;height:36px!important;padding:1px}.player-hand.left .hand-tiles .tile,.player-hand.right .hand-tiles .tile{width:36px!important;height:28px!important;padding:1px}.player-hand.top .hand-tiles .tile .tile-back,.player-hand.left .hand-tiles .tile .tile-back,.player-hand.right .hand-tiles .tile .tile-back{background-size:cover}.player-hand.top .hand-tiles,.player-hand.left .hand-tiles,.player-hand.right .hand-tiles{gap:1px}.discard-pile{display:flex;flex-direction:column;align-items:center;padding:4px;min-width:40px;min-height:40px}.discard-label{font-size:9px;text-transform:uppercase;color:#ffffff80;margin-bottom:2px;letter-spacing:1px}.discards-container{display:flex;gap:2px}.discard-row{display:flex;gap:1px}.discard-pile.south .discards-container{flex-direction:column-reverse;align-items:center}.discard-pile.south .discard-row{flex-direction:row}.discard-pile.north .discards-container{flex-direction:column;align-items:center}.discard-pile.north .discard-row{flex-direction:row}.discard-pile.east .discards-container{flex-direction:row-reverse;align-items:center}.discard-pile.east .discard-row{flex-direction:column}.discard-pile.west .discards-container{flex-direction:row;align-items:center}.discard-pile.west .discard-row{flex-direction:column-reverse}.teacher-collapsed{position:fixed;right:10px;top:50%;transform:translateY(-50%);background:linear-gradient(145deg,#2c3e50,#1a252f);border:1px solid #4a6785;border-radius:50%;width:40px;height:40px;font-size:20px;cursor:pointer;box-shadow:0 4px 16px #0006;z-index:100;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0}.teacher-collapsed:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 6px 20px #00000080}.teacher-panel{position:fixed;right:10px;top:50%;transform:translateY(-50%);background:linear-gradient(145deg,#2c3e50,#1a252f);border:1px solid #4a6785;border-radius:8px;padding:10px;min-width:200px;max-width:220px;box-shadow:0 4px 16px #0006;z-index:100;transition:all .3s ease;font-size:11px}.teacher-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1)}.teacher-header h3{margin:0;color:gold;font-size:13px}.toggle-btn{background:#ffffff1a;border:none;color:#fff;width:24px;height:24px;border-radius:4px;cursor:pointer;font-size:16px;line-height:1}.toggle-btn:hover{background:#fff3}.teacher-content{color:#e0e0e0}.recommendation{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:8px;background:#4caf5026;border-radius:6px;border:1px solid rgba(76,175,80,.3)}.rec-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#4caf50}.reasoning{margin-bottom:10px}.reasoning-label{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:2px}.reasoning-text{font-size:11px;line-height:1.3}.stats{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.stat{display:flex;justify-content:space-between;font-size:11px}.stat-label{color:#888}.stat-value{font-weight:700}.stat-value.fan{color:gold}.alternatives{padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.alt-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:8px}.alt-list{display:flex;gap:12px}.alt-item{display:flex;flex-direction:column;align-items:center;gap:4px}.alt-reason{font-size:10px;color:#888}.no-suggestion{text-align:center;color:#666;font-style:italic;padding:20px}.game-info{position:fixed;left:10px;top:50%;transform:translateY(-50%);background:linear-gradient(145deg,#2c3e50,#1a252f);border:1px solid #4a6785;border-radius:8px;padding:10px;min-width:120px;box-shadow:0 4px 16px #0006;z-index:100;color:#e0e0e0;font-size:11px}.round-info{text-align:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}.round-wind{font-size:14px;font-weight:700;color:gold}.hand-number{font-size:10px;color:#888;margin-top:2px}.wall-count{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:10px;padding:8px;background:#0003;border-radius:6px}.wall-icon{font-size:16px}.wall-number{font-size:18px;font-weight:700;color:#fff}.wall-label{font-size:9px;color:#888}.turn-info{text-align:center;margin-bottom:10px}.turn-label{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:2px}.turn-player{font-size:11px;font-weight:700;padding:4px 8px;background:#ffd70026;border-radius:3px;color:gold}.turn-player.south{background:#4caf5033;color:#4caf50}.scores{border-top:1px solid rgba(255,255,255,.1);padding-top:8px}.scores-label{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:4px;text-align:center}.score-item{display:flex;justify-content:space-between;padding:2px 0;font-size:11px}.score-item.human{color:#4caf50;font-weight:700}.score-wind{color:#888}.score-value{font-weight:700}.game-over{margin-top:10px;padding:8px;background:#f4433633;border-radius:6px;text-align:center}.game-over-text{font-size:14px;font-weight:700;color:#f44336}.game-state-bar{position:fixed;top:0;left:0;width:100%;height:44px;background:#000000e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:space-between;align-items:center;padding:0 12px;box-sizing:border-box;z-index:100;border-bottom:1px solid rgba(255,215,0,.2);box-shadow:0 2px 8px #00000080}.global-state{display:flex;align-items:center;gap:8px}.round-indicator{width:32px;height:32px;background:radial-gradient(circle,#333,#111);border:1px solid #ffd700;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:gold;box-shadow:0 0 8px #ffd70033}.deck-count{display:flex;align-items:center;gap:4px;background:#ffffff1a;padding:2px 6px;border-radius:8px;font-family:monospace;font-size:12px;color:#ddd}.deck-icon{width:10px;height:14px;background:#ccc;border-radius:2px}.player-strip{display:flex;align-items:center;gap:4px}.status-player{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:36px;height:38px;background:#ffffff0d;border-radius:4px;border:1px solid transparent;transition:all .3s ease}.status-player.is-dealer{border-color:#ff4d4d;background:#ff4d4d1a}.dealer-icon{position:absolute;top:-4px;right:-4px;background:#ff4d4d;color:#fff;font-size:8px;transform:scale(.8);padding:1px 3px;border-radius:3px;font-weight:700}.status-player.active{box-shadow:0 0 15px #ffd70066;border-color:gold;background:#ffd70026;transform:scale(1.05);z-index:10}.status-wind{font-size:18px;font-weight:700;color:#aaa}.status-player.active .status-wind{color:gold}.status-score{font-size:10px;color:#888;font-family:monospace}.center-controls{display:flex;align-items:center}.auto-play-btn{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff9;padding:4px 10px;border-radius:4px;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.5px;transition:all .2s ease}.auto-play-btn.active{background:#4caf5033;border-color:#4caf50;color:#4caf50;box-shadow:0 0 8px #4caf504d}.auto-play-btn:hover{border-color:#fff6;color:#fff}.auto-play-btn.active:hover{background:#4caf504d;border-color:#4caf50}.game-table{display:grid;width:100vw;height:100dvh;background:radial-gradient(circle,#2a4a35,#1a2f22);overflow:hidden;position:relative;grid-template-areas:"top top top" "left center right" "bottom bottom bottom";grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;padding-top:48px;box-sizing:border-box}.game-table:before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");pointer-events:none}.table-center{grid-area:center;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.discard-area{display:grid;grid-template-areas:". north ." "west . east" ". south .";grid-template-columns:1fr 160px 1fr;grid-template-rows:1fr 1fr 1fr;gap:6px;width:100%;max-width:400px;padding:12px;background:#00000026;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.discard-pile.east{grid-area:east}.discard-pile.south{grid-area:south}.discard-pile.west{grid-area:west}.discard-pile.north{grid-area:north}.player-hand.bottom{grid-area:bottom}.player-hand.top{grid-area:top}.player-hand.left{grid-area:left}.player-hand.right{grid-area:right}.draw-button{margin-top:10px;padding:10px 24px;font-size:14px;font-weight:700;background:linear-gradient(145deg,gold,#b8860b);border:2px solid #8b6914;border-radius:6px;color:#1a1a1a;cursor:pointer;box-shadow:0 3px 8px #0000004d;transition:all .2s ease;animation:pulse-button 2s ease-in-out infinite}@keyframes pulse-button{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.draw-button:hover{transform:scale(1.1);box-shadow:0 6px 16px #ffd70066}.draw-button:active{transform:scale(.95)}.instructions{position:fixed;bottom:130px;left:50%;transform:translate(-50%);background:#000000b3;color:#fff;padding:6px 12px;border-radius:16px;font-size:12px;z-index:50}.game-over-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.game-over-content{background:linear-gradient(145deg,#2c3e50,#1a252f);border:2px solid #4a6785;border-radius:16px;padding:40px;text-align:center;color:#fff}.game-over-content h2{font-size:32px;margin:0 0 16px;color:gold}.game-over-content p{margin:0 0 24px;color:#aaa}.game-over-content button{padding:12px 32px;font-size:16px;font-weight:700;background:linear-gradient(145deg,#4caf50,#388e3c);border:none;border-radius:8px;color:#fff;cursor:pointer;transition:all .2s ease}.game-over-content button:hover{transform:scale(1.05);box-shadow:0 4px 16px #4caf5066}.action-panel-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:200;pointer-events:auto}.action-panel{background:linear-gradient(135deg,#2c3e50,#1a252f);padding:24px;border-radius:12px;border:2px solid #ffd700;box-shadow:0 0 20px #ffd70066;text-align:center;color:#fff}.action-panel h3{margin:0 0 20px;color:gold;font-size:24px;text-transform:uppercase;letter-spacing:2px}.action-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.action-btn{padding:12px 24px;font-size:16px;font-weight:700;border:none;border-radius:6px;cursor:pointer;transition:all .2s;text-transform:uppercase}.action-btn:hover{transform:scale(1.1);filter:brightness(1.2)}.action-btn.win{background:linear-gradient(to bottom,#ff4d4d,#c00);color:#fff;box-shadow:0 4px #900}.action-btn.pong{background:linear-gradient(to bottom,#4d94ff,#06c);color:#fff;box-shadow:0 4px #004c99}.action-btn.kong{background:linear-gradient(to bottom,#93f,#60c);color:#fff;box-shadow:0 4px #4d0099}.action-btn.chow{background:linear-gradient(to bottom,#3c3,#090);color:#fff;box-shadow:0 4px #060}.action-btn.pass{background:#666;color:#ccc;box-shadow:0 4px #333}.chow-options{display:flex;gap:8px}#root{width:100%;height:100%;margin:0;padding:0}