:root{--felt: #0f3d2e;--felt-deep: #0a2a1f;--felt-light: #1a5c44;--cream: #f3efe6;--ink: #14201a;--accent: #d4a017;--accent-dark: #a67c0a;--danger: #c23b22;--heart: #c23b22;--diamond: #c23b22;--club: #1a1a1a;--spade: #1a1a1a;--card: #fffdf8;--shadow: rgba(0, 0, 0, .35);--radius: 14px;--font-display: "Fraunces", Georgia, serif;--font-body: "DM Sans", system-ui, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;min-height:100dvh}body{font-family:var(--font-body);color:var(--cream);background:radial-gradient(ellipse at 20% 10%,#1a5c44 0%,transparent 45%),radial-gradient(ellipse at 80% 90%,#0a2a1f 0%,transparent 50%),linear-gradient(160deg,var(--felt-light),var(--felt-deep));-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}.app-shell{height:100dvh;height:100vh;max-height:100dvh;overflow-y:auto;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:flex;flex-direction:column}.app-shell.game-mode{overflow:hidden}.brand{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,10vw,3.6rem);letter-spacing:-.02em;margin:0;text-shadow:0 2px 18px rgba(0,0,0,.35)}.brand-sub{margin:.35rem 0 0;opacity:.85;font-size:1rem;max-width:28ch}.panel{width:min(440px,100%);margin-inline:auto}.stack{display:flex;flex-direction:column;gap:.75rem}.field{display:flex;flex-direction:column;gap:.35rem}.field label{font-size:.85rem;opacity:.9}.field input{border:1px solid rgba(243,239,230,.25);background:#0a2a1f8c;color:var(--cream);border-radius:10px;padding:.85rem 1rem;outline:none}.field input:focus{border-color:var(--accent)}.field select{border:1px solid rgba(243,239,230,.25);background:#0a2a1f8c;color:var(--cream);border-radius:10px;padding:.85rem 1rem;outline:none}.field select:focus{border-color:var(--accent)}.field-hint{margin:0;font-size:.75rem;opacity:.7}.btn{border:none;border-radius:12px;padding:.95rem 1.1rem;font-weight:700;transition:transform .15s ease,filter .15s ease}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:var(--ink)}.btn-primary:hover:not(:disabled){filter:brightness(1.05)}.btn-ghost{background:#f3efe61a;color:var(--cream);border:1px solid rgba(243,239,230,.2)}.btn-danger{background:var(--danger);color:#fff}.error-banner{background:#c23b2240;border:1px solid rgba(194,59,34,.5);color:#ffd5ce;padding:.75rem 1rem;border-radius:10px;font-size:.9rem}.hint-banner{background:#d4a0172e;border:1px solid rgba(212,160,23,.4);color:#ffe7a3;padding:.7rem .9rem;border-radius:10px;font-size:.9rem;animation:slideIn .35s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes dealIn{0%{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulseTurn{0%,to{box-shadow:0 0 #d4a01773}50%{box-shadow:0 0 0 6px #d4a01700}}.menu-hero{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:2rem;padding-block:1.5rem}.menu-hero .brand-sub{margin-inline:auto}.menu-actions{display:flex;flex-direction:column;gap:.7rem;width:min(440px,100%)}.rules-content{background:#0a2a1f73;border:1px solid rgba(243,239,230,.12);border-radius:var(--radius);padding:1.1rem 1.2rem;line-height:1.55;font-size:.95rem}.rules-content h2{font-family:var(--font-display);margin:0 0 .75rem}.rules-content ul{margin:0;padding-left:1.1rem}.rules-content li+li{margin-top:.45rem}.lobby-code{font-family:var(--font-display);font-size:2rem;letter-spacing:.18em;text-align:center;padding:.8rem;background:#00000040;border-radius:12px}.player-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}.player-list li{display:flex;justify-content:space-between;padding:.7rem .9rem;background:#00000038;border-radius:10px}.badge{font-size:.75rem;opacity:.8}.table{flex:1;display:flex;flex-direction:column;gap:.3rem;max-width:760px;margin-inline:auto;width:100%;min-height:0;overflow:hidden}.table .hint-banner{display:none}.turn-banner{text-align:center;font-size:.82rem;padding:.28rem .7rem;border-radius:999px;background:#00000047;border:1px solid rgba(243,239,230,.12);width:fit-content;margin-inline:auto;transition:background .2s ease,border-color .2s ease;flex-shrink:0}.turn-banner.mine{background:#d4a01738;border-color:#d4a0178c;color:#ffe7a3}.turn-banner.hidden{display:none}.table-arena{position:relative;flex:1 1 auto;min-height:0;display:grid;place-items:center;padding:1.7rem 2rem}.seat-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:.35rem;padding:.3rem .45rem;background:linear-gradient(180deg,#0000006b,#00000038);border-radius:12px;border:2px solid rgba(243,239,230,.12);min-width:88px;max-width:120px;transition:border-color .2s ease,box-shadow .2s ease}.seat-chip.top{top:0;left:50%;transform:translate(-50%);flex-direction:row;text-align:left}.seat-chip.left{left:0;top:50%;transform:translateY(-50%);flex-direction:row;align-items:center}.seat-chip.right{right:0;top:50%;transform:translateY(-50%);flex-direction:row;align-items:center;text-align:left}.seat-chip.bottom{position:relative;max-width:none;width:100%;transform:none;margin-bottom:.1rem;padding:.25rem .5rem}.seat-chip.active{border-color:var(--accent);box-shadow:0 0 0 3px #d4a01738;animation:pulseTurn 1.6s infinite}.seat-avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(145deg,#2a7a58,#0f3d2e);border:1px solid rgba(243,239,230,.25);display:grid;place-items:center;font-weight:700;font-size:.8rem;flex-shrink:0}.seat-info{min-width:0}.seat-chip .name{font-weight:700;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seat-chip .meta{font-size:.65rem;opacity:.8;margin-top:0}.you-tag,.bot-tag{font-weight:500;opacity:.7;font-size:.78em}.turn-pill{font-size:.6rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;background:var(--accent);color:var(--ink);padding:.15rem .35rem;border-radius:999px;white-space:nowrap;margin-left:auto}.seat-me{width:100%;flex-shrink:0}.opponent-stack{display:none}.mini-back{width:14px;height:20px;border-radius:3px;background:repeating-linear-gradient(45deg,#163d7a,#163d7a 3px,#1e4f9c 3px,#1e4f9c 6px);border:1px solid #0d274d;box-shadow:0 2px 4px #00000059;display:inline-block}.felt-pad{width:min(190px,46vw);aspect-ratio:1.55 / 1;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,rgba(46,120,90,.55),transparent 60%),radial-gradient(ellipse at center,#176647,#0c3a2a 70%,#08261c);box-shadow:inset 0 0 0 2px #d4a0172e,inset 0 6px 18px #00000059,0 8px 18px #00000047;display:grid;place-items:center;position:relative}.felt-pad:before{content:"";position:absolute;top:12%;right:12%;bottom:12%;left:12%;border-radius:50%;border:1px dashed rgba(243,239,230,.12);pointer-events:none}.piles{display:flex;gap:.65rem;align-items:center;position:relative;z-index:1}.draw-pile{cursor:pointer;position:relative}.draw-pile .draw-count{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:clamp(1.1rem,4.5vw,1.55rem);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.85);pointer-events:none;z-index:1}.draw-glow{animation:drawPulse 1.4s ease-in-out infinite}@keyframes drawPulse{0%,to{box-shadow:0 6px 14px var(--shadow)}50%{box-shadow:0 0 0 4px #d4a01759,0 10px 20px #0006}}.discard-slot{position:relative;min-width:var(--w, 58px);min-height:calc(58px * 1.4);display:grid;place-items:center}.discard-slot.landing .discard-top{animation:cardLand .28s cubic-bezier(.2,.9,.3,1)}@keyframes cardLand{0%{transform:scale(1.12) rotate(-6deg)}60%{transform:scale(.96) rotate(2deg)}to{transform:scale(1) rotate(0)}}.discard-empty{width:58px;height:calc(58px * 1.4);border-radius:8px;border:2px dashed rgba(243,239,230,.25);display:grid;place-items:center;font-size:.62rem;opacity:.5;letter-spacing:.06em;text-transform:uppercase}.status-line{text-align:center;font-size:.72rem;opacity:.9;min-height:1em;margin-inline:auto;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92%}.toast-float{position:fixed;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom));transform:translate(-50%);z-index:60;background:#141414eb;color:#fff;padding:.7rem 1.1rem;border-radius:12px;font-weight:600;font-size:.92rem;box-shadow:0 10px 28px #0006;animation:slideIn .25s ease;max-width:min(90vw,340px);text-align:center}.forced-suit{font-weight:700;color:var(--accent)}.hand-area{padding-bottom:0;margin-top:0;flex-shrink:0;max-height:min(46vh,280px);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.hand-area.my-turn .hand-fan{filter:drop-shadow(0 0 10px rgba(212,160,23,.12))}.hand-rows{display:flex;flex-direction:column;align-items:center;gap:.2rem;width:100%}.hand-rows.multi .hand-fan{min-height:64px}.hand-rows.triple{max-height:min(52vh,320px)}.hand-fan{display:flex;justify-content:center;align-items:flex-end;min-height:82px;padding:.1rem 0 0;overflow:visible;width:100%}.hand-fan.flat .hand-slot{margin-left:-30px}.hand-slot{margin-left:-36px;transform:translateY(var(--lift, 0)) rotate(var(--rot, 0deg));transform-origin:50% 120%;transition:transform .2s ease;animation:dealIn .4s ease both;flex-shrink:0}.hand-slot:first-child{margin-left:0}.hand-slot.is-playable{filter:drop-shadow(0 0 6px rgba(212,160,23,.35))}.hand-slot.is-playable:hover,.hand-slot.is-playable:focus-within{transform:translateY(calc(var(--lift, 0px) - 14px)) rotate(var(--rot, 0deg)) scale(1.05);z-index:30!important}.hand-slot.waiting .playing-card{cursor:pointer}.hand-slot .playing-card.playable:hover,.hand-slot .playing-card.playable:focus-visible{transform:none;box-shadow:0 14px 24px #00000073}.playing-card.dimmed{opacity:.48;filter:grayscale(.12)}.flying-card{animation:none!important;border-radius:10px}.actions-row{display:flex;gap:.4rem;flex-wrap:wrap;flex-shrink:0}.actions-row .btn{flex:1;min-width:100px;padding:.6rem .85rem}.turn-actions{display:flex;gap:.45rem;flex-shrink:0;width:min(360px,100%);margin-inline:auto;z-index:6;position:relative}.turn-actions .btn{flex:1;min-width:0;padding:.65rem .75rem;font-size:.9rem;font-weight:700}.suit-picker{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;width:min(280px,100%);margin-inline:auto;flex-shrink:0}.suit-picker .btn{font-size:.95rem;padding:.6rem .8rem}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#05140eb8;display:flex;align-items:center;justify-content:center;padding:1.25rem;z-index:40;animation:slideIn .25s ease}.overlay-card{width:min(380px,100%);background:linear-gradient(180deg,#1a5c44,#0f3d2e);border:1px solid rgba(243,239,230,.15);border-radius:18px;padding:1.4rem;text-align:center}.overlay-card h2{font-family:var(--font-display);margin:0 0 .5rem}.score-list{list-style:none;margin:1rem 0;padding:0;text-align:left}.score-list li{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid rgba(243,239,230,.12)}.playing-card{--w: 56px;width:var(--w);height:calc(var(--w) * 1.4);border-radius:8px;background:var(--card);color:var(--ink);border:1px solid rgba(0,0,0,.12);box-shadow:0 4px 10px var(--shadow);position:relative;flex-shrink:0;scroll-snap-align:center;-webkit-user-select:none;user-select:none;animation:dealIn .35s ease both;transition:transform .15s ease,box-shadow .15s ease;padding:0;margin:0;-moz-appearance:none;appearance:none;-webkit-appearance:none}.playing-card.large{--w: 58px}.playing-card.back{background:repeating-linear-gradient(45deg,#163d7a,#163d7a 6px,#1e4f9c 6px,#1e4f9c 12px);border-color:#0d274d}.playing-card.playable{cursor:pointer}.playing-card.playable:hover,.playing-card.playable:focus-visible{outline:none}.playing-card.disabled{opacity:.42;filter:grayscale(.15)}.playing-card .corner{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1;font-weight:700;font-size:.62rem}.playing-card .corner.tl{top:4px;left:5px}.playing-card .corner.br{bottom:4px;right:5px;transform:rotate(180deg)}.playing-card .pip{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:1.15rem}.playing-card.red{color:var(--heart)}.playing-card.black{color:var(--spade)}.top-bar{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.78rem;flex-shrink:0}.top-bar .round{font-weight:700}.linkish{background:none;border:none;color:var(--cream);text-decoration:underline;opacity:.85;padding:.25rem}@media (min-width: 640px){.playing-card{--w: 76px}.playing-card.large{--w: 96px}.playing-card .corner{font-size:.78rem}.playing-card .corner.tl{top:6px;left:7px}.playing-card .corner.br{bottom:6px;right:7px}.playing-card .pip{font-size:1.55rem}.hand-slot{margin-left:-24px}.hand-fan{min-height:110px}.felt-pad{width:min(280px,55vw)}.discard-empty{width:96px;height:calc(96px * 1.4)}.table-arena{padding:3rem 3.5rem}.seat-chip{min-width:110px;max-width:140px;padding:.4rem .55rem}.opponent-stack{display:flex;height:20px;justify-content:center;align-items:flex-end;margin-bottom:.1rem}.table .hint-banner{display:block;flex-shrink:0;padding:.45rem .7rem;font-size:.8rem}.status-line{font-size:.85rem}}@media (max-height: 700px){.table-arena{padding:1.35rem 1.5rem}.felt-pad{width:min(160px,40vw)}.hand-fan{min-height:74px}.playing-card{--w: 50px}.playing-card.large{--w: 52px}.seat-chip .meta{display:none}.turn-banner{font-size:.75rem;padding:.2rem .55rem}}.app-shell:has(.tutorial-play){overflow:hidden}.tutorial-shell{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem 0}.tutorial-card{width:min(440px,100%);background:linear-gradient(180deg,#0f3d2ef2,#0a2a1ffa);border:1px solid rgba(243,239,230,.15);border-radius:18px;padding:1.25rem 1.2rem 1.35rem;box-shadow:0 16px 40px #00000059}.tutorial-progress{display:flex;gap:.35rem;margin-bottom:.75rem}.tutorial-progress .dot{width:8px;height:8px;border-radius:50%;background:#f3efe640}.tutorial-progress .dot.on{background:var(--accent);box-shadow:0 0 0 3px #d4a01740}.tutorial-progress .dot.done{background:#d4a017b3}.tutorial-kicker{margin:0;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;opacity:.7}.tutorial-title{font-family:var(--font-display);font-size:1.55rem;margin:.35rem 0 .55rem}.tutorial-body{margin:0;line-height:1.5;opacity:.95;font-size:.95rem}.tutorial-list{margin:.75rem 0 0;padding-left:1.15rem;line-height:1.45;font-size:.9rem}.tutorial-list li+li{margin-top:.35rem}.tutorial-actions{display:flex;gap:.55rem;margin-top:1.15rem}.tutorial-actions .btn{flex:1}.tutorial-note{margin:.75rem 0 0;font-size:.8rem;opacity:.75;line-height:1.4}.tutorial-play{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;gap:.35rem}.tutorial-play .table{flex:1;min-height:0}.coach-panel{flex-shrink:0;border-radius:12px;padding:.55rem .7rem .5rem;border:1px solid rgba(212,160,23,.4);background:#d4a01724;max-height:38vh;overflow-y:auto}.coach-panel.tone-action{border-color:#d4a0178c;background:#d4a0172e}.coach-panel.tone-wait{border-color:#f3efe633;background:#00000047}.coach-panel.tone-success{border-color:#50b47880;background:#28785047}.coach-title{font-weight:700;font-size:.88rem;margin-bottom:.2rem}.coach-body{margin:0;font-size:.78rem;line-height:1.4;opacity:.95}.tutor-popup{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:70;width:min(88vw,340px);padding:1rem 1.1rem 1.05rem;border-radius:16px;text-align:center;box-shadow:0 18px 48px #00000080;animation:tutorPop .28s ease;pointer-events:none}@keyframes tutorPop{0%{opacity:0;transform:translate(-50%,-46%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.tutor-popup-success{background:linear-gradient(180deg,#1f6b4a,#124833);border:1px solid rgba(212,160,23,.55)}.tutor-popup-info{background:linear-gradient(180deg,#1a4a3a,#0f2f26);border:1px solid rgba(243,239,230,.22)}.tutor-popup-error{background:linear-gradient(180deg,#6b2a22,#3d1612);border:1px solid rgba(255,160,140,.45)}.tutor-popup-title{font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin-bottom:.35rem}.tutor-popup-success .tutor-popup-title{color:#ffe7a3}.tutor-popup-error .tutor-popup-title{color:#ffc9be}.tutor-popup-body{margin:0;font-size:.88rem;line-height:1.45;opacity:.95}@media (max-height: 700px){.coach-panel{max-height:28vh;padding:.4rem .55rem}.coach-body{font-size:.72rem}}.voice-bar{background:#00000047;border:1px solid rgba(243,239,230,.14);border-radius:14px;padding:.7rem .8rem}.voice-bar.compact{flex-shrink:0;padding:.4rem .55rem;border-radius:10px;margin-bottom:.25rem}.voice-bar-main{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}.voice-label{font-weight:700;font-size:.85rem;margin-right:.2rem}.voice-btn{padding:.45rem .75rem;font-size:.82rem;width:auto}.voice-btn.mic-on{background:#1f6b4a;border-color:#78dca073;color:var(--cream)}.voice-btn.mic-off{background:#5a2a24;border-color:#ffa08c66;color:#ffd5cc}.voice-peers{list-style:none;margin:.55rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}.voice-peers li{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;padding:.2rem .55rem;border-radius:999px;background:#f3efe614;border:1px solid rgba(243,239,230,.12)}.voice-peers li.speaking{border-color:#d4a017b3;background:#d4a0172e}.voice-dot{width:7px;height:7px;border-radius:50%;background:#f3efe659}.voice-peers li.speaking .voice-dot{background:#d4a017;box-shadow:0 0 0 3px #d4a01740}.voice-hint{margin:.45rem 0 0;font-size:.75rem;opacity:.7}.voice-error{margin:.4rem 0 0;font-size:.78rem;color:#ffb4a8}.game-with-voice{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.game-with-voice .table{flex:1;min-height:0}