:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#1d1826;--panel:#2a2338;--text:#eae4f2;--accent:#b08cff;font-family:Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(ellipse at top, #262033, var(--bg));min-height:100vh;color:var(--text);margin:0}#root{max-width:1080px;margin:0 auto;padding:12px}button{background:var(--accent);color:#1d1826;cursor:pointer;border:none;border-radius:8px;padding:10px 16px;font-size:1rem;font-weight:600}button:disabled{opacity:.4;cursor:default}button.subtle{color:#9f93b5;background:0 0;text-decoration:underline}button.mini{color:var(--text);background:#4a4160;padding:2px 8px;font-size:.75rem}input{background:var(--panel);color:var(--text);border:1px solid #4a4160;border-radius:8px;padding:10px;font-size:1rem}.lobby{flex-direction:column;align-items:center;gap:16px;padding-top:10vh;display:flex}.lobby h1{letter-spacing:.08em;margin:0;font-size:3rem}.subtitle{color:#9f93b5;margin:0}.lobby label{flex-direction:column;gap:6px;display:flex}.lobby-actions{flex-direction:column;align-items:center;gap:12px;display:flex}.join{gap:8px;display:flex}.join input{text-transform:uppercase;text-align:center;letter-spacing:.2em;width:110px}.error{color:#ff7a6e}.room{flex-direction:column;align-items:center;gap:14px;padding-top:6vh;display:flex}.player-list{margin:0;padding:0;list-style:none}.player-list li{background:var(--panel);border-radius:8px;margin-bottom:6px;padding:6px 14px}.table-code{letter-spacing:.25em;color:var(--accent);font-weight:700}.scores{border-collapse:collapse}.scores th,.scores td{text-align:center;border-bottom:1px solid #4a4160;padding:6px 14px}.scores-scroll{max-width:100%;overflow-x:auto}.scores th{color:#bdb2d0;font-size:.8rem}.insights{background:var(--panel);border-left:4px solid var(--accent);border-radius:10px;max-width:560px;padding:12px 18px}.insights h3{color:var(--accent);margin:0 0 8px;font-size:.95rem}.insights ul{margin:0;padding-left:18px}.insights li{margin-bottom:4px}.header{align-items:baseline;gap:14px;padding:4px 0 10px;display:flex}.header .title{letter-spacing:.08em;font-weight:700}.disconnected{color:#ffb35c}.game-table{flex-direction:column;gap:14px;min-height:92vh;display:flex}.table-mat{background:radial-gradient(#2e2542 0%,#241c35 65%,#1f1830 100%);border-radius:48%/40%;flex:1;min-height:340px;margin:6px 12px;position:relative;box-shadow:inset 0 0 60px #00000080,0 0 0 6px #3a2f55}.table-mat.theme-green{background:radial-gradient(#1e3a2a 0%,#16291f 65%,#101d16 100%);box-shadow:inset 0 0 60px #00000080,0 0 0 6px #2c5a40}.table-mat.theme-bordeaux{background:radial-gradient(#40222c 0%,#2e1820 65%,#221218 100%);box-shadow:inset 0 0 60px #00000080,0 0 0 6px #6a3646}.table-mat.theme-ocean{background:radial-gradient(#1c2f44 0%,#142333 65%,#0f1a26 100%);box-shadow:inset 0 0 60px #00000080,0 0 0 6px #2c4a6a}.table-mat.theme-night{background:radial-gradient(#191722 0%,#131018 65%,#0d0b11 100%);box-shadow:inset 0 0 60px #00000080,0 0 0 6px #2a2735}.seat{z-index:5;position:absolute}.table-settings{background:var(--panel);border-radius:12px;flex-direction:column;gap:10px;max-width:420px;padding:12px 16px;display:flex}.setting-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.setting-row input[type=text],.setting-row input:not([type]){flex:1;min-width:220px}.setting-row.icons button{font-size:1rem}.setting-row .mini.on{background:var(--accent)}.swatch{border:2px solid #4a4160;border-radius:50%;width:30px;height:30px;padding:0}.swatch.on{border-color:var(--accent);box-shadow:0 0 8px #b08cff99}.setting-toggle{color:#bdb2d0;align-items:center;gap:6px;font-size:.9rem;display:flex}.mat-center{flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:58%;left:50%;transform:translate(-50%,-50%)}.mat-center .piles{align-items:flex-start;gap:18px;display:flex}.mat-center .game-info{text-align:center;align-items:center}.opponents{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.opponent{background:var(--panel);text-align:center;border:2px solid #0000;border-radius:10px;min-width:120px;padding:8px 12px}.opponent.active{border-color:var(--accent);box-shadow:0 0 12px #b08cff59}.opponent.target{border-color:#ff7a6e}.opponent.absent{opacity:.35}.opponent.just-drew{animation:1.4s ease-out drew-flash}@keyframes drew-flash{0%{background:#4a3a1c;box-shadow:0 0 16px #ffb35cb3}to{background:var(--panel);box-shadow:none}}.opponent-name{font-weight:600}.back-fan{justify-content:center;min-height:30px;padding:6px 8px 2px;display:flex}.mini-back{background:repeating-linear-gradient(45deg,#34294d 0 4px,#2a2140 4px 8px);border:1px solid #4a4160;border-radius:3px;flex-shrink:1;width:19px;min-width:5px;height:28px;margin-left:-11px;box-shadow:-1px 1px 2px #0006}.mini-back:first-child{margin-left:0}.opponent-cards{color:#bdb2d0;margin:4px 0;font-size:.85rem}.debt{color:#ffb35c}.center{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:28px;display:flex}.draw-pile,.discard-pile{flex-direction:column;align-items:center;gap:6px;display:flex}.label{color:#bdb2d0;font-size:.85rem}.game-info{flex-direction:column;justify-content:center;gap:8px;min-width:180px;display:flex}.your-turn{color:var(--accent);font-size:1.15rem;font-weight:700;animation:1.2s ease-in-out infinite turn-pulse}@keyframes turn-pulse{0%,to{opacity:1}50%{opacity:.4}}.hand-area.my-turn .player-hand{animation:1.2s ease-in-out infinite hand-glow}@keyframes hand-glow{0%,to{box-shadow:0 0 0 2px var(--accent), 0 0 22px #b08cff73}50%{box-shadow:0 0 0 1px #b08cff59,0 0 6px #b08cff26}}.debt-banner{color:#ffd9a8;background:#4a3a1c;border:1px solid #ffb35c;border-radius:8px;padding:6px 10px;animation:1.2s ease-in-out infinite turn-pulse}.penalty-banner{background:#5a2430;border:1px solid #ff7a6e;border-radius:8px;padding:6px 10px}.action-bar{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.card{background:repeating-linear-gradient(135deg, #ffffff0d 0 3px, transparent 3px 9px), linear-gradient(160deg, var(--hue,#3a3145) 0%, color-mix(in srgb, var(--hue,#3a3145) 70%, black) 100%);color:#fff;-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:9px;flex-shrink:0;width:74px;height:108px;position:relative;box-shadow:0 2px 6px #00000073}.card .value{text-shadow:0 2px 3px #00000080;font-size:2.1rem;font-weight:800;position:absolute;top:26%;left:10%}.card .corner{opacity:.9;font-size:.8rem;position:absolute}.card .corner.tl{top:5px;left:7px}.card .corner.br{bottom:5px;right:7px}.card .suit-watermark{opacity:.25;font-size:2.4rem;position:absolute;bottom:4%;right:6%}.card.back{background:repeating-linear-gradient(45deg,#34294d 0 8px,#2a2140 8px 16px);justify-content:center;align-items:center;display:flex}.back-pattern{color:var(--accent);opacity:.7;font-size:2rem}.card-slot{position:relative}.card-slot.selected{transform:translateY(-14px)}.card-slot.selected .card{outline:3px solid var(--accent);outline-offset:2px}.selection-rank{background:var(--accent);color:#1d1826;z-index:5;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:.8rem;font-weight:800;display:flex;position:absolute;top:-10px;right:-6px}.discard-pile{border:2px dashed #0000;border-radius:12px;padding:8px}.discard-pile.drop-hover{border-color:var(--accent);background:#b08cff1f}.video-tile{background:#000;border-radius:10px;justify-content:center;align-items:center;width:128px;height:96px;margin:0 auto 6px;display:flex;overflow:hidden}.video-tile video{object-fit:cover;width:100%;height:100%}.video-tile.self video{transform:scaleX(-1)}.video-off{color:#4a4160;font-size:1.6rem}.video-controls{gap:6px;margin-left:auto;display:flex}.video-controls .mini.on{background:var(--accent);color:#1d1826}.share-link{flex-direction:column;align-items:center;gap:6px;display:flex}.share-link .label{color:#9f93b5;word-break:break-all;font-size:.8rem}.lobby-tiles{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.lobby-tile{flex-direction:column;align-items:center;gap:4px;display:flex}.self-corner{flex-direction:column;justify-content:flex-end;display:flex}.self-corner .video-tile{width:96px;height:72px;margin:0}.hand-area{align-items:stretch;gap:12px;display:flex}.hand-area .hand-column{flex:1;min-width:0}.hand-column{flex-direction:column;gap:4px;display:flex}.player-hand{scrollbar-width:none}.player-hand::-webkit-scrollbar{display:none}.hand-scroller{touch-action:none;cursor:grab;background:#00000059;border-radius:13px;height:26px;overflow:hidden}.hand-scroller-thumb{color:#9f93b5;letter-spacing:2px;-webkit-user-select:none;user-select:none;background:#4a4160;border-radius:13px;justify-content:center;align-items:center;height:100%;font-size:.7rem;display:flex}.hand-scroller-thumb:active{background:var(--accent);color:#1d1826;cursor:grabbing}.hand-scroller.idle{visibility:hidden}.drawn-slot{border:2px dashed var(--accent);background:#b08cff14;border-radius:14px;flex-direction:column;align-items:center;gap:6px;padding:12px;display:flex}.player-hand{background:#00000040;border-radius:14px;flex-wrap:wrap;gap:10px 6px;min-height:132px;padding:12px;display:flex;overflow-x:auto}.toasts{z-index:20;flex-direction:column;gap:8px;display:flex;position:fixed;top:14px;right:14px}.toast{background:var(--panel);border-left:4px solid var(--accent);border-radius:8px;max-width:320px;padding:10px 14px;box-shadow:0 4px 14px #00000080}.modal{z-index:30;background:#0000008c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-body{background:var(--panel);border-radius:14px;padding:22px}.suit-choices{gap:10px;display:flex}.suit-choices button{color:#fff}@media (width<=760px){#root{padding:6px}body{overscroll-behavior:none}.header{gap:8px;padding:2px 0 6px}.header .title{font-size:.95rem}.header .table-code{font-size:.8rem}.game-table{gap:8px;height:calc(100dvh - 12px);overflow:hidden}.game-table .hand-area{margin-top:auto}body:has(.game-table){height:100dvh;overflow:hidden}.game-table .player-hand{max-height:40dvh;overflow-y:auto}.table-mat{min-height:0;margin:2px;box-shadow:inset 0 0 30px #00000080,0 0 0 3px #3a2f55}.mat-center{gap:4px;top:46%}.mat-center .piles{gap:10px}.opponent{min-width:100px;padding:4px 8px}.opponent .video-tile{width:92px;height:64px;margin-bottom:4px}.opponent-name{font-size:.85rem}.opponent-cards{margin:2px 0;font-size:.72rem}.back-fan{min-height:22px;padding:3px 4px 0}.mini-back{width:13px;height:19px;margin-left:-8px}.opponent .mini{padding:1px 6px;font-size:.68rem}.center{align-items:center;gap:12px}.card{border-radius:7px;width:56px;height:82px}.card .value{font-size:1.5rem}.card .suit-watermark{font-size:1.6rem}.discard-pile{padding:4px}.center .label{font-size:.72rem}.game-info{gap:4px;min-width:0;font-size:.85rem}.your-turn{font-size:1rem}.penalty-banner{padding:4px 8px;font-size:.85rem}.action-bar{gap:8px}.action-bar button{padding:7px 12px;font-size:.9rem}.self-corner{z-index:15;position:fixed;top:44px;right:8px}.self-corner .video-tile{border:1px solid #4a4160;width:76px;height:56px;margin:0;box-shadow:0 2px 8px #00000080}.hand-area{gap:6px}.player-hand{gap:10px 0;min-height:96px;padding:8px 8px 8px 36px}.player-hand .card-slot{margin-left:-27px}.drawn-slot{padding:6px}.drawn-slot .label{display:none}.toasts{align-items:center;inset:auto 8px 128px}.toast{padding:8px 12px;font-size:.85rem}}