:root{--bg-color: #0b3d2e;--panel-bg: rgba(0, 0, 0, .4);--text-color: #f0f0f0;--accent-color: #4ade80;--danger-color: #f87171;--font-base: system-ui, -apple-system, sans-serif}html,body{margin:0;padding:0;min-height:100%;background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-base);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;user-select:none;-webkit-user-select:none}#root{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}*{box-sizing:border-box}button{font-family:inherit;cursor:pointer;border:none;border-radius:6px;background:var(--accent-color);color:#000;font-weight:600;padding:8px 16px;transition:opacity .2s,transform .1s;touch-action:manipulation}button:active{transform:scale(.96)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}button.danger{background:var(--danger-color)}input[type=text],input[type=email],input[type=password],select{padding:10px 12px;border-radius:6px;border:1px solid #555;background:#111;color:#fff;font-family:inherit;font-size:16px}h1,h2,h3,h4{margin-top:0}.app-container{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.app-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#00000059;border-bottom:1px solid rgba(255,255,255,.1);flex-wrap:wrap;gap:8px;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.app-main{flex:1;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.welcome-screen{flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:20px 16px calc(32px + env(safe-area-inset-bottom,0px));gap:18px;width:100%}.lobby-screen{flex:1;display:flex;flex-direction:column;align-items:center;padding:18px 14px calc(32px + env(safe-area-inset-bottom,0px));gap:18px;width:100%}.room-entry{width:min(100%,390px);display:flex;flex-direction:column;gap:16px;padding-top:12px}.room-entry h1{margin:0 0 12px;font-size:28px;text-align:center}.room-field{display:flex;flex-direction:column;gap:8px;font-size:13px;color:#b5c8bd}.room-field input,.room-options input{width:100%;min-width:0}.room-segment{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:3px;gap:3px;background:#0003;border-radius:6px}.room-segment button{min-height:42px;display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:#b5c8bd;padding:8px;font-size:14px}.room-segment button[aria-pressed=true]{background:#315a48;color:#fff}.room-segment svg{flex-shrink:0}.room-notice{display:flex;flex-direction:column;gap:6px;color:#e0cd92;font-size:12px}.room-options{font-size:13px;color:#b5c8bd}.room-options summary{cursor:pointer;padding:5px 0}.room-options input,.room-options button{margin-top:8px}.room-primary{min-height:44px}.room-secondary{background:#ffffff14;color:#e2e9df;min-height:42px}.room-join{display:flex;gap:8px;padding-top:18px;border-top:1px solid #ffffff14}.room-join input{flex:1;min-width:0}.room-tools{display:flex;justify-content:center;gap:8px}.card-back-tool>span{width:20px;height:28px;display:block;pointer-events:none}.room-rejoin{display:flex;justify-content:center;align-items:center;gap:8px;background:#ffffff14;color:#d5dfcf;overflow-wrap:anywhere}.lobby-content{width:min(100%,664px)}.lobby-room-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 24px;border-bottom:1px solid #ffffff18}.lobby-room-code{min-width:0;display:flex;flex-direction:column;gap:6px}.lobby-room-code>span{color:#9fb5a8;font-size:12px}.lobby-room-code strong{font-family:monospace;font-size:24px;overflow-wrap:anywhere;letter-spacing:0}.lobby-copy-tools{display:flex;flex-shrink:0;gap:4px}.lobby-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding:24px 0}.lobby-columns h2{font-size:15px;margin:0;font-weight:600}.lobby-section-heading{display:flex;align-items:center;justify-content:space-between;min-height:32px}.lobby-player-list{list-style:none;margin:10px 0 0;padding:0}.lobby-player-list li{padding:12px 0;border-bottom:1px solid #ffffff0c}.lobby-player-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}.lobby-player-row>span{min-width:0;overflow-wrap:anywhere}.lobby-self{color:#a7d9b4}.lobby-player-detail{color:#9fb5a8;font-size:11px;margin-left:6px}.lobby-player-stats{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;font-size:12px;color:#b5c8bd}.lobby-player-low-balance .lobby-player-stats{color:#f87171}.lobby-settings{display:flex;flex-direction:column;gap:14px}.lobby-settings h2{min-height:32px;display:flex;align-items:center}.lobby-setting{display:grid;grid-template-columns:minmax(64px,1fr) minmax(0,170px);align-items:center;gap:10px;font-size:13px;color:#b5c8bd}.lobby-setting select{width:100%;min-width:0;padding:10px 8px;font-size:14px}.lobby-bots{display:flex;gap:8px;align-items:center;font-size:13px;color:#b5c8bd}.lobby-bots input{width:18px;height:18px;accent-color:#a7d9b4}.lobby-actions{display:flex;align-items:center;gap:8px;border-top:1px solid #ffffff18;padding-top:18px}.lobby-actions .room-primary{margin-left:auto;min-width:160px}.lobby-waiting{margin-left:auto;font-size:13px;color:#b5c8bd}.lobby-winner{display:flex;align-items:center;gap:8px;font-size:14px;color:#a7d9b4}@media (max-width: 540px){.lobby-columns{grid-template-columns:minmax(0,1fr);gap:24px}.lobby-settings{border-top:1px solid #ffffff14;padding-top:18px}.lobby-room-code strong{font-size:20px}}.game-screen{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-height:0;overflow-x:hidden;overflow-y:auto}.game-table-area{flex:1;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:390px;padding:100px 12px 36px;width:100%;max-width:1100px;align-self:center;background:radial-gradient(ellipse at center,rgba(255,255,255,.035),transparent 70%)}.game-table-area:before{content:"";position:absolute;top:65px;right:92px;bottom:48px;left:92px;border:1px solid rgba(194,213,184,.09);border-radius:42%;pointer-events:none}.opponents-container{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.opponent-badge{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;z-index:10;pointer-events:auto;width:120px}.opponent-badge-top{top:12px;left:50%;transform:translate(-50%)}.opponent-badge-left{left:16px;top:50%;transform:translateY(-50%)}.opponent-badge-top-left{top:16px;left:35%;transform:translate(-50%)}.opponent-badge-top-right{top:16px;right:35%;transform:translate(50%)}.opponent-badge-right{right:16px;top:50%;transform:translateY(-50%)}.seat-disc{position:relative;width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:#153e33;border:1px solid #587166;color:#e0e8df;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}.is-active .seat-disc{border-color:#a2deb1;outline:3px solid rgba(151,211,166,.2);outline-offset:4px;color:#fff;animation:activeTurnPulse 1.5s infinite}.opponent-hand{position:relative;width:78px;height:44px;margin-top:-10px;pointer-events:none}.opponent-hand-card{position:absolute;top:5px;left:calc(50% - 12px);width:24px;height:34px;transform-origin:center bottom}.opponent-hand-card>.card-ui{scale:.34;transform-origin:top left}.seat-counters,.seat-counters>span{display:flex;align-items:center;gap:4px}.seat-counters{gap:12px;color:#95ada1;font-size:11px;font-variant-numeric:tabular-nums}.dealer-marker{position:absolute;right:-4px;top:-2px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#d6c48a;color:#23372c;font-size:10px}.seat-state{position:absolute;right:-4px;bottom:-2px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#244e3e;color:#c8dfcf;border:1px solid #759183}.offline-dot{position:absolute;left:0;bottom:0;width:8px;height:8px;border-radius:50%;background:var(--danger-color)}.is-folded{opacity:.5}.table-status{display:flex;align-items:center;justify-content:center;gap:16px}.stock-count{display:inline-flex;align-items:center;gap:6px;color:#9ab2a4;font-size:13px}.trump-suit{font-size:22px}.table-phase{color:#a6baae;font-size:12px;text-align:center;margin:8px 0}.empty-table-mark{color:#c6d8c12e;padding:16px}.self-counter,.self-counter>span{display:inline-flex;align-items:center;gap:7px}.self-counter{gap:12px;font-size:13px;color:#a6bcb0;font-variant-numeric:tabular-nums}.self-counter strong{color:#e0e8df;font-size:18px}.turn-dot{width:6px;height:6px;background:#60786c;border-radius:50%}.my-turn .turn-dot{background:#a2deb1;box-shadow:0 0 0 4px #a2deb115;animation:activeTurnPulse 1.5s infinite}.my-turn .player-area{border-top-color:#a2deb1aa;background:linear-gradient(to top,transparent 80%,rgba(162,222,177,.08) 100%)}.secondary-action{background:#ffffff1f;color:var(--text-color)}.play-error{color:var(--danger-color);font-size:13px;text-align:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.icon-button{width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#adc3b6;border-radius:6px;flex-shrink:0}.icon-button:hover{background:#ffffff0d;color:#f0f3ec}.icon-button[aria-pressed=true]{background:#ffffff12;color:#eef3e8}.sort-segment{display:flex;gap:2px;border-radius:6px;background:#00000018}.play-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:110px;height:42px;padding:0 14px;background:#a7d9b4;color:#153a29;font-size:13px;font-weight:700;border-radius:8px;transition:all .2s}.play-action:not(:disabled){box-shadow:0 0 15px #a7d9b499,inset 0 0 8px #fff6;animation:pulsePlay 1.5s infinite;cursor:pointer}@keyframes pulsePlay{0%{box-shadow:0 0 15px #a7d9b480}50%{box-shadow:0 0 25px #a7d9b4e6}to{box-shadow:0 0 15px #a7d9b480}}.play-action:disabled{background:#8da99a;opacity:.4;box-shadow:none}.icon-button svg,.play-action svg{flex-shrink:0}button:focus-visible,summary:focus-visible{outline:2px solid #e2d29c;outline-offset:3px}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);width:max-content;max-width:160px;white-space:normal;padding:6px 9px;border-radius:4px;background:#172820;color:#f0f3ec;border:1px solid #536b5c;font-size:12px;font-weight:400;opacity:0;pointer-events:none;z-index:150}[data-tooltip]:hover:after,[data-tooltip]:focus-visible:after{opacity:1}.muushig-trick-cards{display:flex;justify-content:center;align-items:center;transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .4s ease-in .3s}.muushig-trick-cards.is-collecting{opacity:0}.muushig-trick-cards.collect-to-bottom{transform:translateY(30vh) scale(.2)}.muushig-trick-cards.collect-to-top{transform:translateY(-30vh) scale(.2)}.muushig-trick-cards.collect-to-left{transform:translate(-30vw) scale(.2)}.muushig-trick-cards.collect-to-right{transform:translate(30vw) scale(.2)}.muushig-trick-cards.collect-to-top-left{transform:translate(-25vw,-25vh) scale(.2)}.muushig-trick-cards.collect-to-top-right{transform:translate(25vw,-25vh) scale(.2)}.muushig-play{width:70px}.muushig-play+.muushig-play{margin-left:-45px}.trick-player-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-tools{position:relative}.header-tools summary{cursor:pointer;list-style:none;display:grid;place-items:center;width:36px;height:36px;border-radius:4px;color:#b1c5b8}.header-tools summary::-webkit-details-marker{display:none}.header-menu{position:absolute;right:0;top:calc(100% + 10px);width:min(280px,calc(100vw - 24px));padding:12px;display:grid;gap:10px;background:#172c25;border:1px solid #547566;border-radius:6px;box-shadow:0 8px 24px #0006}.opponent-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:12px;color:#c8d5cc}.center-trick-area{width:min(440px,calc(100% - 340px));min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;padding:8px}.player-area{position:relative;background:#0003;padding:12px 14px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px;border-top:1px solid rgba(255,255,255,.12)}.player-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;order:2;width:min(100%,880px);margin:0 auto}.player-controls-secondary{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.player-controls-primary{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-left:auto}.card-ui{width:70px;height:100px}.hand-scroll-container{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding:18px 8px 24px;scrollbar-width:thin}.hand-cards-row{display:flex;align-items:center;width:max-content;margin:0 auto;min-height:106px}.hand-card-overlap{margin-left:-22px}@media (min-width: 1024px){.hand-cards-row{min-height:140px}.hand-card-item{width:90px!important;height:130px!important}.hand-card-overlap{margin-left:-32px}}@media (max-width: 768px){.app-header{padding:8px 10px;gap:6px}.welcome-screen,.lobby-screen{padding:12px 10px calc(28px + env(safe-area-inset-bottom,0px));gap:14px}.game-table-area{padding:102px 8px 30px;min-height:350px}.game-table-area:before{top:68px;right:45px;bottom:36px;left:45px}.opponents-container{position:absolute}.opponent-badge-left{left:6px}.opponent-badge-right{right:6px}.opponent-badge-top-left{left:30%}.opponent-badge-top-right{right:30%}.opponent-badge{width:78px}.seat-disc{width:44px;height:44px;font-size:19px}.opponent-name{font-size:11px}.seat-counters{font-size:10px;gap:8px}.table-status{gap:8px;flex-wrap:wrap}.muushig-trick-cards{gap:0}.muushig-play{width:48px}.muushig-play+.muushig-play{margin-left:-25px}.muushig-play-card{width:48px;height:69px}.muushig-play-card>.card-ui{scale:.686;transform-origin:top left}.center-trick-area{margin:auto 0;min-height:110px;width:calc(100% - 162px);padding:4px}.player-area{padding:10px 10px calc(14px + env(safe-area-inset-bottom,0px));gap:8px}.player-controls{gap:6px}.icon-button{width:36px;height:40px}.play-action{min-width:94px;padding:0 10px;gap:6px;font-size:12px}.play-action svg{width:17px}.self-counter{gap:8px}.player-controls-secondary{gap:6px}.player-controls-primary{margin-left:auto}.hand-scroll-container{padding:16px 4px 18px}.hand-cards-row{min-height:92px}.hand-card-item{width:60px!important;height:86px!important}.hand-card-overlap{margin-left:-18px}.reaction-popover{position:fixed!important;left:50%!important;right:auto!important;bottom:90px!important;top:auto!important;transform:translate(-50%)!important;width:calc(100vw - 24px)!important;max-width:340px!important;max-height:68vh!important;overflow-y:auto!important}.modal-overlay{padding:12px 10px 32px!important}.modal-card{padding:16px!important}}@media (max-width: 370px){.player-controls{grid-template-columns:1fr auto}.self-counter{position:absolute;top:5px;left:50%;transform:translate(-50%);font-size:11px}.self-counter strong{font-size:14px}.hand-scroll-container{padding-top:28px}}@keyframes reactionFloat{0%{opacity:0;transform:translateY(14px) scale(.55)}14%{opacity:1;transform:translateY(-4px) scale(1.08)}26%{opacity:1;transform:translateY(0) scale(1)}82%{opacity:1;transform:translateY(-8px) scale(1)}to{opacity:0;transform:translateY(-22px) scale(.9)}}.reaction-animate{animation:reactionFloat 3.2s ease-out forwards;pointer-events:none}@keyframes confettiFall{0%{transform:translate3d(0,-40px,0) rotate(var(--confetti-rot-start, 0deg));opacity:1}75%{opacity:1}to{transform:translate3d(0,110vh,0) rotate(var(--confetti-rot-end, 360deg));opacity:.75}}@keyframes winModalSpringIn{0%{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes winBackdropFadeIn{0%{opacity:0}to{opacity:1}}.win-confetti-piece{position:absolute;top:0;will-change:transform,opacity;animation-name:confettiFall;animation-timing-function:cubic-bezier(.4,0,1,1);animation-fill-mode:forwards}.win-settlement-backdrop{animation:winBackdropFadeIn .25s ease-out forwards}.win-settlement-card{animation:winModalSpringIn .42s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes activeTurnPulse{0%{box-shadow:0 0 #a2deb1b3}70%{box-shadow:0 0 0 15px #a2deb100}to{box-shadow:0 0 #a2deb100}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.special-combo-anim-container{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);z-index:10000;display:flex;flex-direction:column;align-items:center;pointer-events:none;animation:specialComboIn 2.5s cubic-bezier(.175,.885,.32,1.275) forwards}.special-combo-anim-text{font-size:3rem;font-weight:900;text-transform:uppercase;color:#ffde59;text-shadow:0 0 10px #ff914d,0 0 20px #ff914d,0 0 40px #ff3131,2px 4px 0 #000;text-align:center;line-height:1.1;white-space:nowrap;animation:specialComboPulse .5s alternate infinite}.special-combo-anim-sub{font-size:1.2rem;font-weight:700;color:#fff;text-shadow:1px 2px 4px #000;margin-top:8px;background:#0006;padding:4px 16px;border-radius:20px}@keyframes specialComboIn{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}15%{transform:translate(-50%,-50%) scale(1.1);opacity:1}25%{transform:translate(-50%,-50%) scale(1);opacity:1}85%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}@keyframes specialComboPulse{0%{filter:brightness(1) drop-shadow(0 0 5px rgba(255,145,77,.5))}to{filter:brightness(1.3) drop-shadow(0 0 15px rgba(255,145,77,1))}}
