*{box-sizing:border-box}:root{--hand-w: clamp(56px, min(7vw, 12vh), 108px);--table-w: clamp(46px, min(6vw, 11vh), 98px);--small-w: clamp(24px, min(3.2vw, 6vh), 54px);--team-a: #e0b84a;--team-b: #6fb8e0}html,body,#root{min-height:100%}body{margin:0;background:#0b3d2e;color:#f4f1e8;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}button{font-family:inherit;cursor:pointer}input{font-family:inherit;font-size:16px;padding:12px;border-radius:8px;border:1px solid #ccc;width:100%;margin-bottom:10px}.screen{min-height:100vh;display:flex;flex-direction:column;padding:12px}.screen.centered{align-items:center;justify-content:center;text-align:center;gap:10px}.subtitle{color:#cfe8db;max-width:320px}.hint{color:#cfe8db;font-size:14px;margin:4px 0}.hint.error-text{color:#f0a0a0}.join-form{display:flex;gap:8px;width:100%;max-width:280px}.join-form input{margin-bottom:0;text-align:center;letter-spacing:1px;text-transform:uppercase}button.primary{background:#e0b84a;color:#222;font-weight:700;font-size:18px;padding:14px 24px;border:none;border-radius:10px;min-height:48px}button.primary:disabled{opacity:.5}button.secondary{background:transparent;border:1px solid #e0b84a;color:#e0b84a;padding:10px 18px;border-radius:10px;min-height:44px}.screen.home{align-items:center;gap:18px;padding-bottom:40px}.home-hero{text-align:center;max-width:420px}.home-card{width:100%;max-width:420px;background:#ffffff0d;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px}.home-card-title{margin:0 0 4px;font-size:16px}.visibility-toggle{display:flex;gap:8px}.pill{flex:1;padding:10px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:transparent;color:inherit;font-weight:600;min-height:40px}.pill.active{background:#e0b84a;color:#1c1c1c;border-color:#e0b84a}.public-rooms{width:100%;max-width:760px}.room-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px}.room-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}.room-card-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-card-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;opacity:.85}.status-pill{padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffff26}.status-pill.waiting{background:#e0b84a40;color:#e0b84a}.status-pill.playing{background:#6fb8e040;color:#6fb8e0}.screen.lobby{align-items:center;gap:16px;padding-top:20px}.lobby-head{display:flex;flex-direction:column;align-items:center;gap:10px}.room-code-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}.room-code{font-size:26px;font-weight:900;letter-spacing:.08em;background:#ffffff14;padding:4px 14px;border-radius:10px}.whatsapp{border-color:#3fbf60;color:#3fbf60}.lobby-table-wrap{width:100%;display:flex;justify-content:center;padding:6px 0}.lobby-table{display:grid;grid-template-columns:minmax(56px,1fr) minmax(140px,200px) minmax(56px,1fr);grid-template-rows:auto minmax(90px,150px) auto;grid-template-areas:".    top    ." "left center right" ".    bottom .";align-items:center;justify-items:center;gap:10px;width:100%;max-width:420px}.lobby-table-center{grid-area:center;width:100%;aspect-ratio:1.35;border-radius:50%;background:radial-gradient(ellipse at center,#1f6b4d,#0d3d2c 75%);border:clamp(3px,.8vw,8px) solid #5b3b1f;box-shadow:inset 0 0 30px #00000073;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:700}.lobby-team-tag.team-A{color:var(--team-a)}.lobby-team-tag.team-B{color:var(--team-b)}.lobby-table-divider{opacity:.6}.lobby-seat{width:100%;max-width:150px;min-height:64px;border-radius:14px;border:2px dashed rgba(255,255,255,.3);background:#ffffff0a;color:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;position:relative}.lobby-seat.pos-top{grid-area:top}.lobby-seat.pos-bottom{grid-area:bottom}.lobby-seat.pos-left{grid-area:left}.lobby-seat.pos-right{grid-area:right}.lobby-seat.taken{border-style:solid}.lobby-seat.team-A.taken{border-color:var(--team-a)}.lobby-seat.team-B.taken{border-color:var(--team-b)}.lobby-seat.mine{background:#e0b84a26}.lobby-seat:disabled{cursor:default}.lobby-seat-empty{font-size:12px;opacity:.6}.lobby-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#1c1c1c}.lobby-seat.team-A .lobby-avatar{background:var(--team-a)}.lobby-seat.team-B .lobby-avatar{background:var(--team-b)}.lobby-seat-name{font-size:13px;font-weight:600;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lobby-host-badge{position:absolute;top:-8px;right:6px;font-size:9px;font-weight:800;letter-spacing:.05em;background:#e0b84a;color:#1c1c1c;padding:2px 6px;border-radius:999px}.lobby-status{font-size:15px;font-weight:600;text-align:center}@media (max-width: 400px){.lobby-table{grid-template-columns:minmax(48px,1fr) minmax(120px,160px) minmax(48px,1fr)}}.scorebar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:6px 2px 10px;font-size:13px}.score{font-weight:700}.score.team-A{color:#e0b84a}.score.team-B{color:#6fb8e0}.link-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:inherit;padding:6px 10px;border-radius:8px;font-size:12px}.middle-row{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.5vw,28px);flex:1}.table-felt{flex:1;max-width:1100px;align-self:stretch;min-height:clamp(150px,34vh,420px);background:radial-gradient(ellipse at center,#1f6b4d,#0d3d2c 75%);border-radius:clamp(18px,6vw,120px);display:flex;flex-wrap:wrap;gap:clamp(8px,1.6vw,26px);align-items:center;align-content:center;justify-content:center;padding:clamp(8px,2vw,32px);border:clamp(4px,.8vw,12px) solid #5b3b1f;box-shadow:inset 0 0 40px #00000073,0 6px 18px #00000059;position:relative}.table-felt .card:not(.small){--cw: var(--table-w)}.seat{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:clamp(11px,.9vw,14px);min-width:clamp(76px,10vw,170px);padding:clamp(6px,.8vw,12px);border-radius:14px;background:#0000002e;border:2px solid transparent;transition:box-shadow .2s,border-color .2s}.seat.team-A{border-color:#e0b84a59}.seat.team-B{border-color:#6fb8e059}.seat.top{flex-direction:row;align-self:center;gap:14px;margin-bottom:8px}.seat-info{display:flex;flex-direction:column;align-items:center;gap:3px}.seat-stat{opacity:.8}.name-chip{font-weight:700;padding:3px 10px;border-radius:999px;color:#1c1c1c;max-width:clamp(70px,10vw,160px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.name-chip.team-A{background:var(--team-a)}.name-chip.team-B{background:var(--team-b)}.seat.turn{border-color:#fff2c4;box-shadow:0 0 0 2px #e0b84a,0 0 22px #e0b84a99;background:#e0b84a1f}.fan{position:relative;width:calc(var(--small-w) * 2.3);height:calc(var(--small-w) * 1.65)}.fan .card{position:absolute;top:0;left:calc(50% - var(--small-w) / 2);margin:0;transform-origin:50% 120%;transform:rotate(var(--a, 0deg));animation:none}.card{--cw: var(--hand-w);width:var(--cw);aspect-ratio:167 / 243;height:auto;position:relative;border-radius:calc(var(--cw) * .07);background:#fdfaf2;border:none;box-shadow:0 1px 3px #0006;display:block;padding:0;overflow:hidden;flex-shrink:0;transition:transform .15s ease-out,box-shadow .15s}.card img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.card.small{--cw: var(--small-w)}.card.small+.card.small{margin-left:calc(var(--small-w) * -.55)}.card.selected{outline:3px solid #e0b84a;transform:translateY(-14%);z-index:5}.my-hand .card.selected{transform:translateY(-18%) scale(1.25);transform-origin:50% 100%}@media (hover: hover){.my-hand .card:hover{transform:translateY(-12%) scale(1.5);transform-origin:50% 100%;z-index:10;box-shadow:0 8px 22px #0000008c}.table-felt .card:hover{transform:scale(1.5);z-index:10;box-shadow:0 8px 22px #0000008c}}.card.dimmed{opacity:.4}.card:disabled{cursor:default}.card.tappable:not(:disabled){cursor:pointer}@keyframes cardIn{0%{opacity:0;transform:translateY(-14px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}.card.deal-in{animation:cardIn .22s ease-out backwards}@keyframes flyAway{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(var(--fly-x),var(--fly-y)) scale(.6)}}.flying{position:relative;animation:flyAway .42s ease-in both;pointer-events:none}.flying.fly-bottom{--fly-x: 0px;--fly-y: 160px}.flying.fly-top{--fly-x: 0px;--fly-y: -160px}.flying.fly-left{--fly-x: -160px;--fly-y: 0px}.flying.fly-right{--fly-x: 160px;--fly-y: 0px}@media (prefers-reduced-motion: reduce){.card.deal-in{animation:none}.flying{animation:none;display:none}.card,.seat{transition:none}.my-hand .card:hover,.table-felt .card:hover,.my-hand .card.selected{transform:translateY(-8%)}}.house{display:flex;flex-direction:column;align-items:center;background:#00000040;border-radius:12px;padding:clamp(4px,.6vw,10px) clamp(6px,.9vw,14px);border:2px dashed #e0b84a;color:inherit}.house.cemented{border-style:solid;border-color:#6fb8e0}.house.selected{outline:3px solid #e0b84a}.house-value{font-size:clamp(16px,1.6vw,28px);font-weight:700;color:#e0b84a}.house-stack{position:relative;margin-top:4px;width:calc(var(--card-w, 34px) + 24px);height:calc(var(--card-h, 48px) + 24px)}.house-stack-card{position:absolute;top:0;left:0}.house-tag{font-size:10px;opacity:.8;margin-top:2px;text-transform:uppercase;letter-spacing:.04em}.house-tag.pakka{color:#6fb8e0}.house-tag.kacha{color:#e0b84a}.house-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;background:#0009;display:flex;align-items:center;justify-content:center}.house-modal{background:#1d1d2e;border:1px solid #e0b84a;border-radius:14px;padding:18px;max-width:90vw;text-align:center}.house-modal-cards{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:10px 0}.action-bar{padding:10px 4px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}.chip-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.result-row{display:flex;gap:16px;justify-content:center}.result-col{background:#ffffff0f;border-radius:10px;padding:10px 14px;min-width:120px}.result-label{font-weight:700;margin-bottom:4px}.result-line{font-size:13px;opacity:.85}.result-total{font-size:22px;font-weight:700;color:#e0b84a;margin-top:4px}.chip{padding:10px 16px;border-radius:20px;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:inherit;font-size:15px;min-height:42px}.chip.primary{background:#e0b84a;color:#222;font-weight:700;border-color:#e0b84a}.chip.ghost{opacity:.7}.chip:disabled{opacity:.3}.my-area{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0 10px;border-radius:16px;transition:box-shadow .2s}.my-label{display:flex;align-items:center;gap:10px;font-size:clamp(11px,.9vw,14px)}.my-hand{--hand-gap: min(8px, calc((100vw - 40px - 12 * var(--hand-w)) / 11));display:flex;justify-content:center;padding:18px 4px 4px}.hand-card-wrap{touch-action:none}.hand-card-wrap+.hand-card-wrap{margin-left:var(--hand-gap)}.drag-ghost{position:fixed;z-index:90;transform:translate(-50%,-60%);pointer-events:none;opacity:.9}.drop-target .house,.drop-target .card{outline:3px solid #e0b84a}.toast.error{position:fixed;bottom:80px;left:50%;transform:translate(-50%);background:#b23b3b;color:#fff;padding:8px 14px;border-radius:8px;font-size:13px;max-width:90vw;z-index:50;text-align:center}.deal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#0a0a1499;color:#fff;font-size:15px}.shuffle-anim{display:flex;gap:6px}.shuffle-card{width:34px;height:48px;border-radius:6px;background:#1b3a63;border:1px solid #4a6fa5;animation:shuffle-jitter .5s ease-in-out infinite alternate}.shuffle-card:nth-child(2){animation-delay:.12s}.shuffle-card:nth-child(3){animation-delay:.24s}@keyframes shuffle-jitter{0%{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-8px) rotate(6deg)}}.deal-fly{position:relative;width:160px;height:160px}.deal-card{position:absolute;left:50%;top:50%;width:28px;height:40px;margin:-20px 0 0 -14px;border-radius:5px;background:#1b3a63;border:1px solid #4a6fa5;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards}.deal-card.t-bottom{animation-name:deal-out-bottom}.deal-card.t-top{animation-name:deal-out-top}.deal-card.t-left{animation-name:deal-out-left}.deal-card.t-right{animation-name:deal-out-right}.deal-card.t-center{animation-name:deal-out-center}@keyframes deal-out-bottom{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translateY(70px)}}@keyframes deal-out-top{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translateY(-70px)}}@keyframes deal-out-left{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-70px)}}@keyframes deal-out-right{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(70px)}}@keyframes deal-out-center{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(0) scale(.6)}}.rejoin-requests{position:fixed;top:8px;left:50%;transform:translate(-50%);z-index:60;display:flex;flex-direction:column;gap:6px;width:min(92vw,420px)}.rejoin-request{background:#2a2a40;border:1px solid #e0b84a;border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:8px;font-size:13px;box-shadow:0 4px 14px #0006}.rejoin-request span{flex:1}.chat-panel{position:fixed;right:8px;bottom:8px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:6px}.chat-toggle{position:relative;background:#0009;border:1px solid rgba(255,255,255,.3);color:inherit;padding:6px 12px;border-radius:16px;font-size:12px}.chat-badge{position:absolute;top:-6px;right:-6px;background:#b23b3b;color:#fff;font-size:10px;min-width:16px;height:16px;line-height:16px;border-radius:8px;padding:0 4px}.chat-bubble{position:absolute;top:6px;left:50%;transform:translate(-50%);max-width:min(80%,320px);background:#000c;border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:6px 10px;font-size:12px;z-index:30;animation:chat-bubble-pop .2s ease-out}@keyframes chat-bubble-pop{0%{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%)}}.chat-body{width:min(240px,80vw);max-height:240px;background:#000000d9;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px}.chat-log{overflow-y:auto;max-height:150px;font-size:12px;display:flex;flex-direction:column;gap:4px}.chat-body form{display:flex;gap:6px}.chat-body input{margin-bottom:0;font-size:13px;padding:8px}.chat-body button{background:#e0b84a;border:none;border-radius:8px;padding:0 12px;font-weight:700}.screen.game{position:relative}.scorebar-mid{display:flex;gap:8px}.my-area.turn{box-shadow:0 0 0 2px #e0b84a,0 0 26px #e0b84a8c;background:#e0b84a14}.banner-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:8px 4px 0;text-align:center}.banner{margin:0;font-size:clamp(14px,1.2vw,18px);font-weight:600}.turn-pill{padding:3px 12px;border-radius:999px;font-size:clamp(12px,.9vw,14px);font-weight:700;background:#ffffff24;border:1px solid rgba(255,255,255,.35);white-space:nowrap}.turn-pill.mine{background:#e0b84a;border-color:#e0b84a;color:#1c1c1c}.chip.off{opacity:.4;cursor:help}.hint.why{color:#ffd98a;font-weight:600}.move-log{position:absolute;top:52px;left:12px;width:clamp(180px,18vw,280px);margin:0;padding:8px 10px;list-style:none;background:#00000047;border-radius:10px;font-size:12px;display:flex;flex-direction:column;gap:3px;z-index:2}.move-log li{opacity:.7}.move-log li:last-child{opacity:1;font-weight:600}.move-log li.seep{color:#ffd98a}@media (max-width: 900px){.move-log{position:static;width:auto;margin-bottom:8px}.move-log li:nth-last-child(n+4){display:none}}@keyframes seepPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.seep-toast{position:fixed;top:42%;left:50%;transform:translate(-50%,-50%);z-index:60;background:#141414e0;border:3px solid #e0b84a;border-radius:18px;padding:18px 36px;text-align:center;pointer-events:none;animation:seepPop .25s ease-out}.seep-word{font-size:clamp(44px,7vw,96px);font-weight:900;letter-spacing:.08em;color:#e0b84a;line-height:1}.tips{position:fixed;left:50%;bottom:clamp(140px,30vh,280px);transform:translate(-50%);z-index:55;width:min(420px,92vw);background:#fdfaf2;color:#1c1c1c;border-radius:14px;padding:14px 18px;box-shadow:0 10px 30px #00000080}.tips h3{margin:0 0 6px}.tips ul{margin:0 0 12px;padding-left:18px;font-size:14px;line-height:1.4}.rules-sheet{width:min(560px,94vw);max-height:86vh;padding:0;border:none;border-radius:14px;background:#fdfaf2;color:#1c1c1c}.rules-sheet::backdrop{background:#0000008c}.rules-sheet form{padding:18px 22px;font-size:14px;line-height:1.45}.rules-sheet h2{margin:0 0 6px}.rules-sheet h3{margin:14px 0 4px;font-size:15px}.rules-sheet p,.rules-sheet ul{margin:0}.rules-sheet ul{padding-left:18px}.rules-sheet .primary{margin-top:16px;width:100%}@media (prefers-reduced-motion: reduce){.seep-toast{animation:none}.my-area{transition:none}}