/* /sheepshead/static/src/play/play.css */
 :root{--green: #419C5F; --green-dark: #2E7043; --green-darker: #1D4A2D; --felt: #24603b; --felt-dark: #143d24; --purple: #714B67; --gold: #E0B341; --gold-dark: #a87a1c; --cream: #FFFDF7; --ink: #1A202C; --ink-soft: #2D3748; --muted: #718096; --red: #C8102E; --line: #E2E8F0; --panel: #FFFFFF; --page: #F4F6F2; --radius: 16px; --shadow: 0 12px 32px rgba(15, 23, 42, 0.18); --cw: clamp(56px, 6.6vw, 92px); --topbar: 56px;}*{box-sizing: border-box;}html, body.sh-body{margin: 0; padding: 0; height: 100%;}body.sh-body{font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;}button, input, select{font: inherit; color: inherit;}a{color: var(--green-dark);}.sh-boot, .sh-loading{min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-weight: 700;}.sh-boot img, .sh-loading img{animation: sh-bob 1.6s ease-in-out infinite;}.sh-app{min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;}.sh-app.sh-at-table{height: 100vh; height: 100dvh; overflow: hidden;}.sh-main{flex: 1; min-height: 0; display: flex; flex-direction: column;}.sh-muted{color: var(--muted);}.sh-small{font-size: 13px;}.sh-plus{color: #15803D; font-weight: 800;}.sh-minus{color: var(--red); font-weight: 800;}.sh-error{color: var(--red); font-weight: 700;}.d-none{display: none !important;}.sh-topbar{height: var(--topbar); flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--green-darker); color: #fff; position: relative; z-index: 30;}.sh-brand{display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none;}.sh-brand-name{font-weight: 900; font-size: 20px; letter-spacing: -0.3px;}.sh-brand-by{font-weight: 700; font-size: 12px; opacity: 0.7; margin-top: 4px;}.sh-topbar-gap{flex: 1;}.sh-topbar-link{color: #fff; opacity: 0.85; text-decoration: none; font-weight: 700; font-size: 14px;}.sh-topbar-link:hover{opacity: 1;}.sh-conn{font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.15);}.sh-conn-offline{background: #B45309;}.sh-me{display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.1); border: 0; border-radius: 999px; padding: 3px 12px 3px 3px; color: #fff; cursor: pointer; max-width: 210px;}.sh-me:hover{background: rgba(255, 255, 255, 0.18);}.sh-me-name{font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.sh-icon-btn{width: 36px; height: 36px; flex: none; border-radius: 50%; border: 0; background: transparent; color: inherit; font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;}.sh-icon-btn:hover{background: rgba(127, 127, 127, 0.18);}.sh-btn{display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 999px; border: 1px solid transparent; font-weight: 800; font-size: 15px; line-height: 1.1; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform 0.08s ease, filter 0.15s ease, background 0.15s ease;}.sh-btn:active:not(:disabled){transform: scale(0.97);}.sh-btn:disabled{opacity: 0.5; cursor: default;}.sh-btn-primary{background: var(--green); color: #fff;}.sh-btn-primary:hover:not(:disabled){background: var(--green-dark);}.sh-btn-gold{background: var(--gold); color: var(--ink);}.sh-btn-gold:hover:not(:disabled){filter: brightness(1.06);}.sh-btn-light{background: #fff; color: var(--ink); border-color: var(--line);}.sh-btn-light:hover:not(:disabled){background: #F7FAFC;}.sh-btn-ghost{background: transparent; color: inherit; border-color: rgba(127, 127, 127, 0.35);}.sh-btn-ghost:hover:not(:disabled){background: rgba(127, 127, 127, 0.12);}.sh-btn-sm{padding: 6px 12px; font-size: 13px;}.sh-btn-lg{padding: 14px 28px; font-size: 18px;}.sh-btn-card{min-width: 52px;}.sh-input{width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); outline: none;}.sh-input:focus{border-color: var(--green); box-shadow: 0 0 0 3px rgba(65, 156, 95, 0.18);}.sh-input-lg{font-size: 20px; font-weight: 800;}.sh-pill, .sh-badge{display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #FEF3C7; color: #92400E; vertical-align: middle;}.sh-badge{background: var(--red); color: #fff; margin-left: 6px;}.sh-bot-tag{font-style: normal; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 1px 5px; margin-left: 6px; border-radius: 4px; background: rgba(127, 127, 127, 0.22); vertical-align: middle;}.sh-avatar{width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; font-weight: 900; font-size: 15px; letter-spacing: 0.5px; background: var(--green-dark); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);}.sh-avatar-sm{width: 30px; height: 30px; font-size: 12px;}.sh-avatar-lg{width: 64px; height: 64px; font-size: 22px;}.sh-avatar-empty{background: rgba(255, 255, 255, 0.2);}.sh-card{--w: var(--cw); position: relative; flex: none; width: var(--w); height: calc(var(--w) * 1.42); border-radius: calc(var(--w) * 0.09); background: var(--cream); color: var(--ink); border: 1px solid rgba(0, 0, 0, 0.14); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 14px rgba(0, 0, 0, 0.18); user-select: none; -webkit-user-select: none; font-weight: 900; transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;}.sh-card-lg{--w: var(--cw);}.sh-card-md{--w: calc(var(--cw) * 0.86);}.sh-card-sm{--w: calc(var(--cw) * 0.56);}.sh-card-red{color: var(--red);}.sh-card-index{position: absolute; top: 4%; left: 6%; display: flex; flex-direction: column; align-items: center; line-height: 0.92; font-size: calc(var(--w) * 0.25);}.sh-card-index i{font-style: normal; font-size: 0.86em;}.sh-card-index-end{top: auto; left: auto; bottom: 4%; right: 6%; transform: rotate(180deg);}.sh-card-sm .sh-card-index-end{display: none;}.sh-card-face{position: absolute; inset: 20% 19% 20% 21%; display: flex; align-items: center; justify-content: center;}.sh-card-pip{font-style: normal; font-size: calc(var(--w) * 0.48); line-height: 1;}.sh-card-pip-ace{font-size: calc(var(--w) * 0.66);}.sh-card-court{width: 100%; height: 100%; border: 1.5px solid currentColor; border-radius: calc(var(--w) * 0.06); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2%; background: linear-gradient(180deg, rgba(224, 179, 65, 0.16), rgba(224, 179, 65, 0.04));}.sh-card-court b{font-size: calc(var(--w) * 0.32); line-height: 1;}.sh-card-court i{font-style: normal; font-size: calc(var(--w) * 0.2); line-height: 1;}.sh-card-emblem{width: 52%; height: auto; color: var(--gold-dark);}.sh-card-sm .sh-card-face{inset: 34% 16% 10% 30%;}.sh-card-sm .sh-card-court{border: 0; background: none;}.sh-card-sm .sh-card-emblem, .sh-card-sm .sh-card-court i{display: none;}.sh-card-trump{background: #FFF7E0;}.sh-card-trump::after{content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 4%; min-height: 3px; border-radius: 3px 3px 0 0; background: var(--gold);}.sh-card-back{background: repeating-linear-gradient(45deg, #2E7043 0 5px, #286640 5px 10px); border: 3px solid var(--cream);}.sh-card-back-art{position: absolute; inset: 16%; background: url("/sheepshead/static/img/icon.svg") center / contain no-repeat; border-radius: 18%; opacity: 0.95;}.sh-card-down:not(.sh-card-back)::before{content: "unknown"; position: absolute; left: 6%; right: 6%; top: 44%; text-align: center; font-size: calc(var(--w) * 0.13); background: rgba(26, 32, 44, 0.75); color: #fff; border-radius: 4px; z-index: 1;}.sh-card-unknown{outline: 2px dashed var(--purple); outline-offset: -5px;}.sh-clickable{cursor: pointer;}.sh-card-legal{transform: translateY(calc(var(--w) * -0.12));}.sh-card-legal:hover{transform: translateY(calc(var(--w) * -0.2));}.sh-card-dim{filter: brightness(0.62) saturate(0.6); cursor: not-allowed;}.sh-card-selected{transform: translateY(calc(var(--w) * -0.42)); box-shadow: 0 0 0 3px var(--gold), 0 10px 20px rgba(0, 0, 0, 0.3);}.sh-home{width: 100%; max-width: 1220px; margin: 0 auto; padding: 28px 20px 40px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start;}.sh-home-main{display: flex; flex-direction: column; gap: 22px; min-width: 0;}.sh-home-side{display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px;}.sh-home-side .sh-chat{height: 520px;}.sh-side-links{display: flex; flex-direction: column; gap: 6px; padding: 0 6px; font-weight: 700; font-size: 14px;}.sh-welcome h1{font-size: 34px; font-weight: 900; margin: 0 0 4px; letter-spacing: -0.5px;}.sh-welcome > .sh-muted{margin: 0 0 18px; font-size: 17px;}.sh-resume{display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; margin-bottom: 16px; background: #FEF9E7; border: 1px solid #F3E2A9; border-radius: var(--radius); font-weight: 700;}.sh-play-grid{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;}.sh-play-card{display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; text-align: left; border-radius: 20px; border: 0; cursor: pointer; color: #fff; min-height: 168px; box-shadow: var(--shadow); transition: transform 0.12s ease, filter 0.15s ease;}.sh-play-card:hover:not(:disabled){transform: translateY(-3px); filter: brightness(1.05);}.sh-play-card:disabled{opacity: 0.6; cursor: wait;}.sh-play-quick{background: linear-gradient(140deg, #3C9460, var(--green-darker));}.sh-play-online{background: linear-gradient(140deg, #8a5d7f, #4f3349);}.sh-play-friends{background: linear-gradient(140deg, #c9902b, #8a5a12);}.sh-play-icon{font-size: 30px;}.sh-play-title{font-size: 22px; font-weight: 900;}.sh-play-sub{font-size: 14px; font-weight: 600; opacity: 0.9;}.sh-code-form{display: flex; align-items: center; gap: 10px; margin-top: 16px; font-weight: 700; flex-wrap: wrap;}.sh-code-form .sh-input{width: 130px; text-transform: uppercase; letter-spacing: 2px; font-weight: 800;}.sh-lobby, .sh-mystats{background: var(--panel); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);}.sh-section-head{display: flex; align-items: baseline; justify-content: space-between; gap: 12px;}.sh-lobby h2, .sh-mystats h2{font-size: 20px; font-weight: 900; margin: 0 0 12px;}.sh-empty{text-align: center; padding: 18px 0 8px; color: var(--muted); font-weight: 700;}.sh-table-list{display: flex; flex-direction: column;}.sh-table-row{display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line);}.sh-table-name{font-weight: 800;}.sh-table-seats{color: var(--green-dark); font-weight: 800; white-space: nowrap;}.sh-table-buttons{display: flex; gap: 6px;}.sh-stat-row{display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; margin: 6px 0 14px;}.sh-stat{display: flex; flex-direction: column; align-items: center; padding: 10px 6px; background: #F7FAF8; border-radius: 12px;}.sh-stat b{font-size: 22px; font-weight: 900; color: var(--green-darker);}.sh-stat span{font-size: 12px; font-weight: 700; color: var(--muted);}.sh-chat{display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-radius: var(--radius); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); overflow: hidden; color: var(--ink);}.sh-chat-head{display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px 16px; border-bottom: 1px solid var(--line);}.sh-chat-head h3{margin: 0; font-size: 16px; font-weight: 900;}.sh-chat-list{flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px;}.sh-chat-empty{text-align: center; margin: auto 0;}.sh-msg{font-size: 14px; line-height: 1.35;}.sh-msg-author{font-weight: 800;}.sh-msg-time{font-size: 11px; color: var(--muted); margin-left: 6px;}.sh-msg-tools{margin-left: 6px; opacity: 0.35; transition: opacity 0.15s; white-space: nowrap;}.sh-msg:hover .sh-msg-tools, .sh-msg-tools:focus-within{opacity: 1;}.sh-msg-tools button{border: 0; background: none; padding: 0 3px; font-size: 11px; font-weight: 700; color: var(--muted); cursor: pointer; text-decoration: underline;}.sh-msg-tools button:hover{color: var(--red, #c8102e);}.sh-chat-rules{margin: 0; padding: 4px 12px 0; font-size: 11px; color: var(--muted);}.sh-chat-rules a{color: inherit;}.sh-report-quote{margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--line, #e2e8f0); background: #f8fafc; border-radius: 6px; font-style: italic; overflow-wrap: anywhere;}.sh-radio{display: flex; gap: 8px; align-items: center; padding: 3px 0; font-weight: 500;}.sh-check{display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 4px;}.sh-msg-body{overflow-wrap: anywhere;}.sh-msg-mine .sh-msg-body{color: var(--green-darker);}.sh-msg-system{font-size: 12px; color: var(--muted); text-align: center; font-style: italic;}.sh-msg-bot .sh-msg-body{font-style: italic;}.sh-quick{display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; border-top: 1px solid var(--line);}.sh-quick .sh-chip{border: 1px solid var(--line); background: #F7FAFC; color: var(--ink); cursor: pointer; font-size: 13px; padding: 4px 10px;}.sh-chat-form{display: flex; align-items: center; gap: 6px; padding: 10px; border-top: 1px solid var(--line);}.sh-chat-form .sh-input{padding: 8px 12px;}.sh-table-screen{flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr);}.sh-table-screen.sh-chat-open{grid-template-columns: minmax(0, 1fr) 320px;}.sh-side{min-height: 0; display: flex; flex-direction: column; padding: 10px 10px 10px 0; background: var(--felt-dark);}.sh-side .sh-chat{flex: 1;}.sh-game{position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; color: #fff; background: radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.10), transparent 60%), radial-gradient(ellipse at 50% 50%, var(--felt) 0%, var(--felt-dark) 100%); overflow: hidden;}.sh-game-head{display: flex; align-items: center; gap: 12px; padding: 8px 12px; flex: none;}.sh-game-title{flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2;}.sh-game-title b{font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.sh-game-title .sh-muted{color: rgba(255, 255, 255, 0.7);}.sh-game-tools{display: flex; gap: 6px;}.sh-game .sh-btn-ghost{border-color: rgba(255, 255, 255, 0.3); color: #fff;}.sh-game .sh-btn-ghost:hover:not(:disabled){background: rgba(255, 255, 255, 0.12);}.sh-felt{position: relative; flex: 1; min-height: 240px;}.sh-seat{position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px;}.sh-seat.sh-at-left{left: 2%; top: 46%; transform: translateY(-50%);}.sh-seat.sh-at-right{right: 2%; top: 46%; transform: translateY(-50%);}.sh-seat.sh-at-top-left{left: 28%; top: 3%; transform: translateX(-50%);}.sh-seat.sh-at-top-right{left: 72%; top: 3%; transform: translateX(-50%);}.sh-seat.sh-at-top{left: 50%; top: 3%; transform: translateX(-50%);}.sh-n3 .sh-seat.sh-at-top-left{left: 22%; top: 8%;}.sh-n3 .sh-seat.sh-at-top-right{left: 78%; top: 8%;}.sh-seat-main{display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(0, 0, 0, 0.28); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); min-width: 0; max-width: 250px; cursor: default;}.sh-seat-turn .sh-seat-main{background: rgba(0, 0, 0, 0.42); box-shadow: 0 0 0 2px var(--gold), 0 4px 18px rgba(224, 179, 65, 0.35);}.sh-seat-offline .sh-seat-main, .sh-seat-away .sh-seat-main{opacity: 0.65;}.sh-avatar-wrap{position: relative; padding: 3px; border-radius: 50%; flex: none;}.sh-seat-turn .sh-avatar-wrap{background: conic-gradient(var(--gold) var(--clock), rgba(255, 255, 255, 0.18) 0);}.sh-dealer{position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);}.sh-seat-text{min-width: 0; display: flex; flex-direction: column; gap: 1px;}.sh-seat-name{display: flex; align-items: center; min-width: 0; font-weight: 800; font-size: 15px;}.sh-seat-name-text{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;}.sh-seat-name .sh-bot-tag{flex: none;}.sh-seat-meta{font-size: 12px; opacity: 0.85; white-space: nowrap;}.sh-seat-clock{color: var(--gold); font-weight: 800;}.sh-seat-chips{display: flex; flex-wrap: wrap; gap: 4px;}.sh-seat-chips:empty{display: none;}.sh-chip{display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); color: #fff; white-space: nowrap;}.sh-chip-picker{background: var(--gold); color: var(--ink);}.sh-chip-partner{background: #A7F3D0; color: #064E3B;}.sh-chip-secret{background: transparent; color: #A7F3D0; border: 1px dashed #A7F3D0;}.sh-chip-away{background: #B45309;}.sh-chip-pending{background: var(--purple);}.sh-seat-backs{display: flex; padding-left: 8px;}.sh-mini-back{width: 15px; height: 21px; margin-left: -8px; border-radius: 3px; border: 1.5px solid var(--cream); background: repeating-linear-gradient(45deg, #2E7043 0 3px, #286640 3px 6px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);}.sh-bubble{position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); max-width: 220px; width: max-content; padding: 6px 12px; border-radius: 14px; background: #fff; color: var(--ink); font-weight: 800; font-size: 14px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); animation: sh-pop 0.18s ease-out; z-index: 5; overflow-wrap: anywhere;}.sh-bubble::after{content: ""; position: absolute; top: 100%; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top-color: #fff;}.sh-at-top-left .sh-bubble, .sh-at-top-right .sh-bubble, .sh-at-top .sh-bubble{bottom: auto; top: calc(100% + 6px);}.sh-at-top-left .sh-bubble::after, .sh-at-top-right .sh-bubble::after, .sh-at-top .sh-bubble::after{top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #fff;}.sh-center{position: absolute; left: 50%; top: 50%; width: 420px; height: 300px; max-width: 64%; transform: translate(-50%, -48%); display: flex; flex-direction: column; align-items: center; justify-content: center;}.sh-blind{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 6px; align-items: center; flex-direction: column;}.sh-blind > .sh-card:nth-child(2){margin-top: calc(var(--w) * -1.3); margin-left: 18px;}.sh-blind-label{font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, 0.8);}.sh-trick{position: absolute; inset: 0;}.sh-trick-card{position: absolute; --fx: 0px; --fy: 220px; --rot: 0deg; transform: translate(-50%, -50%) rotate(var(--rot)); animation: sh-fly 0.32s cubic-bezier(0.2, 0.8, 0.3, 1); transition: transform 0.38s ease-in, opacity 0.38s ease-in;}.sh-trick-card.sh-at-bottom{left: 50%; top: 64%; --fy: 260px; --rot: 2deg;}.sh-trick-card.sh-at-left{left: 31%; top: 46%; --fx: -260px; --fy: 0px; --rot: -8deg;}.sh-trick-card.sh-at-top-left{left: 41%; top: 28%; --fx: -180px; --fy: -220px; --rot: -4deg;}.sh-trick-card.sh-at-top-right{left: 59%; top: 28%; --fx: 180px; --fy: -220px; --rot: 5deg;}.sh-trick-card.sh-at-right{left: 69%; top: 46%; --fx: 260px; --fy: 0px; --rot: 8deg;}.sh-trick-card.sh-at-top{left: 50%; top: 27%; --fx: 0px; --fy: -240px; --rot: -3deg;}.sh-collect .sh-trick-card{opacity: 0;}.sh-collect.sh-to-bottom .sh-trick-card{transform: translate(-50%, 160px) scale(0.5);}.sh-collect.sh-to-left .sh-trick-card{transform: translate(-260px, -50%) scale(0.5);}.sh-collect.sh-to-right .sh-trick-card{transform: translate(200px, -50%) scale(0.5);}.sh-collect.sh-to-top-left .sh-trick-card{transform: translate(-180px, -220px) scale(0.5);}.sh-collect.sh-to-top-right .sh-trick-card{transform: translate(140px, -220px) scale(0.5);}.sh-collect.sh-to-top .sh-trick-card{transform: translate(-50%, -240px) scale(0.5);}.sh-banner{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; padding: 10px 20px; border-radius: 999px; background: rgba(17, 24, 39, 0.82); color: #fff; font-weight: 800; font-size: 16px; white-space: nowrap; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); animation: sh-pop 0.2s ease-out;}.sh-peek{position: absolute; right: -6px; bottom: 0; border: 0; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, 0.25); cursor: pointer;}.sh-last-trick{position: absolute; inset: 10% 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(17, 24, 39, 0.85); border-radius: 18px; cursor: pointer;}.sh-last-trick-title{font-weight: 800;}.sh-last-trick-cards{display: flex; gap: 6px;}.sh-mine{flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 12px 14px; position: relative; z-index: 4;}.sh-mine-row{display: flex; align-items: flex-end; justify-content: center; gap: 18px; width: 100%;}.sh-mine .sh-seat{position: relative; flex: none; margin-bottom: 8px;}.sh-hand{--gaps: 5; --step: min(calc(var(--cw) * 0.68), calc((min(100vw, 1100px) - 280px - var(--cw)) / var(--gaps))); display: flex; justify-content: center; padding-top: calc(var(--cw) * 0.35); min-height: calc(var(--cw) * 1.8);}.sh-hand .sh-card + .sh-card{margin-left: calc(var(--step) - var(--cw));}.sh-hand .sh-card{box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.25);}.sh-actions{min-height: 44px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; font-weight: 700; text-align: center;}.sh-prompt{font-weight: 900; font-size: 17px;}.sh-pulse{animation: sh-pulse 1.4s ease-in-out infinite;}.sh-waiting{width: 100%; max-width: 420px; padding: 18px 20px; border-radius: 18px; background: rgba(0, 0, 0, 0.3); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;}.sh-waiting h3{margin: 0; font-size: 20px;}.sh-waiting .sh-muted{color: rgba(255, 255, 255, 0.7);}.sh-invite{display: flex; gap: 6px; width: 100%;}.sh-invite .sh-input{font-size: 13px;}.sh-waiting-seats{list-style: none; margin: 0; padding: 0; width: 100%; text-align: left;}.sh-waiting-seats li{display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-weight: 700;}.sh-result-wrap{position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 20, 14, 0.45); animation: sh-fade 0.25s ease-out;}.sh-result-wrap.sh-result-min{inset: auto 0 calc(var(--cw) * 2.2) 0; background: none; pointer-events: none;}.sh-result-min .sh-result{padding: 8px; width: auto; pointer-events: auto; background: transparent; box-shadow: none;}.sh-result{width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto; padding: 22px 24px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: var(--shadow); text-align: center; border-top: 6px solid var(--line);}.sh-result-good{border-top-color: var(--green);}.sh-result-bad{border-top-color: var(--red);}.sh-result h2{margin: 0 0 4px; font-size: 22px; font-weight: 900;}.sh-result > p{margin: 0 0 10px;}.sh-level{display: inline-block; margin: 4px 0 8px; padding: 3px 12px; border-radius: 999px; background: var(--gold); font-weight: 900; text-transform: capitalize;}.sh-result-points{display: flex; justify-content: center; gap: 28px; margin: 8px 0 12px;}.sh-result-points div{display: flex; flex-direction: column;}.sh-result-points b{font-size: 30px; font-weight: 900; color: var(--green-darker); line-height: 1.1;}.sh-result-points span{font-size: 12px; color: var(--muted); font-weight: 700;}.sh-result-table{width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0 10px;}.sh-result-table th{font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.4px; padding: 4px;}.sh-result-table td{padding: 6px 4px; border-top: 1px solid var(--line);}.sh-result-table td:first-child, .sh-result-table th:first-child{text-align: left; font-weight: 800;}.sh-row-me td{background: #F0FDF4;}.sh-result-cards{display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0;}.sh-result-actions{display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px;}.sh-result .sh-btn-ghost{color: var(--ink-soft);}.sh-panel, .sh-modal{position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.5); animation: sh-fade 0.18s ease-out;}.sh-panel{position: absolute; z-index: 25;}.sh-panel-body, .sh-modal-body{width: 100%; max-width: 440px; max-height: calc(100% - 20px); overflow-y: auto; padding: 18px 20px 20px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: var(--shadow);}.sh-modal-wide{max-width: 640px;}.sh-panel-head{display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}.sh-panel-head h3{margin: 0; font-size: 20px; font-weight: 900;}.sh-modal-actions{display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px;}.sh-field{display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-weight: 700;}.sh-field > span{font-size: 13px; color: var(--ink-soft);}.sh-check{flex-direction: row; align-items: center; gap: 10px;}.sh-check input{width: 18px; height: 18px; accent-color: var(--green);}.sh-segment{display: flex; flex-wrap: wrap; gap: 6px;}.sh-segment button{border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font-weight: 800; cursor: pointer;}.sh-segment button.active{background: var(--green-darker); border-color: var(--green-darker); color: #fff;}.sh-score-list{width: 100%; border-collapse: collapse; font-weight: 800;}.sh-score-list td{padding: 8px 4px; border-bottom: 1px solid var(--line);}.sh-score-list td:last-child{text-align: right;}.sh-history-list{margin: 0; padding-left: 0; list-style: none; font-size: 14px;}.sh-history-list li{padding: 5px 0; border-bottom: 1px solid var(--line);}.sh-history{list-style: none; margin: 0 0 12px; padding: 0;}.sh-history li{display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px;}.sh-history-main{display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;}.sh-profile-head{display: flex; align-items: center; gap: 14px; margin-bottom: 12px;}.sh-profile-head h2{margin: 0; font-size: 24px; font-weight: 900;}.sh-toasts{position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px);}.sh-toast{padding: 10px 18px; border-radius: 12px; background: #111827; color: #fff; font-weight: 700; box-shadow: var(--shadow); animation: sh-pop 0.2s ease-out;}.sh-toast-error{background: #9F1239;}@keyframes sh-fly{from{transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) rotate(0deg) scale(0.92); opacity: 0.3;}to{transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); opacity: 1;}}@keyframes sh-pop{from{opacity: 0; transform: translateX(-50%) scale(0.85);}to{opacity: 1; transform: translateX(-50%) scale(1);}}.sh-banner{animation-name: sh-pop-center;}@keyframes sh-pop-center{from{opacity: 0; transform: translate(-50%, -50%) scale(0.85);}to{opacity: 1; transform: translate(-50%, -50%) scale(1);}}.sh-toast{animation-name: sh-fade;}@keyframes sh-fade{from{opacity: 0;}to{opacity: 1;}}@keyframes sh-pulse{0%, 100%{opacity: 1;}50%{opacity: 0.6;}}@keyframes sh-bob{0%, 100%{transform: translateY(0);}50%{transform: translateY(-6px);}}@media (prefers-reduced-motion: reduce){.sh-trick-card, .sh-bubble, .sh-banner, .sh-result-wrap{animation: none !important;}.sh-trick-card{transition: none;}}@media (max-width: 1000px){.sh-table-screen.sh-chat-open{grid-template-columns: minmax(0, 1fr);}.sh-side{position: fixed; top: var(--topbar); right: 0; bottom: 0; width: min(360px, 100%); z-index: 40; padding: 0; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);}.sh-side .sh-chat{border-radius: 0;}.sh-home{grid-template-columns: minmax(0, 1fr);}.sh-home-side{position: static;}.sh-home-side .sh-chat{height: 380px;}}@media (max-width: 760px){:root{--cw: clamp(48px, 14.5vw, 64px); --topbar: 50px;}.sh-brand-by, .d-none-sm, .sh-topbar-link{display: none;}.sh-brand-name{font-size: 18px;}.sh-me-name{max-width: 90px;}.sh-play-grid{grid-template-columns: minmax(0, 1fr);}.sh-play-card{min-height: 0; padding: 16px;}.sh-welcome h1{font-size: 26px;}.sh-table-row{grid-template-columns: minmax(0, 1fr) auto;}.sh-table-seats{display: none;}.sh-game-head{padding: 6px 8px; gap: 6px;}.sh-game-title .sh-muted{display: none;}.sh-avatar{width: 32px; height: 32px; font-size: 12px;}.sh-seat-main{padding: 3px 10px 3px 3px; gap: 6px; max-width: 150px;}.sh-seat-name{font-size: 13px;}.sh-seat-name-text{max-width: 84px;}.sh-seat-meta{font-size: 11px;}.sh-seat-backs{display: none;}.sh-seat.sh-at-left{left: 1%; top: 44%;}.sh-seat.sh-at-right{right: 1%; top: 44%;}.sh-seat.sh-at-top-left{left: 3%; top: 2%; transform: none;}.sh-seat.sh-at-top-right{left: auto; right: 3%; top: 2%; transform: none;}.sh-n3 .sh-seat.sh-at-top-left{left: 3%; top: 6%;}.sh-n3 .sh-seat.sh-at-top-right{left: auto; right: 3%; top: 6%;}.sh-at-left .sh-seat-main, .sh-at-right .sh-seat-main{flex-direction: column; border-radius: 16px; padding: 6px; text-align: center;}.sh-at-left .sh-seat-text, .sh-at-right .sh-seat-text{align-items: center;}.sh-center{width: 92%; max-width: 92%; height: 250px;}.sh-mine-row{flex-direction: column; align-items: center; gap: 4px;}.sh-mine .sh-seat{margin-bottom: 0; order: 2;}.sh-mine .sh-seat-main{flex-direction: row; max-width: none;}.sh-hand{--step: min(calc(var(--cw) * 0.7), calc((100vw - 24px - var(--cw)) / var(--gaps)));}.sh-prompt{font-size: 15px;}.sh-banner{font-size: 14px; white-space: normal; text-align: center; width: max-content; max-width: 90%;}.sh-result{padding: 16px;}.sh-result h2{font-size: 19px;}}