:root{--felt: #0b6b3a;--felt-dark: #074d29;--gold: #e8c66b;--teamA: #4aa3ff;--teamB: #ff7a59;--ink: #1a1a1a;--paper: #f7f3e8}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:radial-gradient(circle at 50% 30%,var(--felt) 0%,var(--felt-dark) 100%);color:#f3f3f3;min-height:100vh}.screen{min-height:100vh;padding:16px}.screen.center{display:flex;align-items:center;justify-content:center}.panel{background:#00000059;border:1px solid rgba(232,198,107,.4);border-radius:14px;padding:28px;max-width:520px;text-align:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}h1{color:var(--gold);margin:0 0 4px;letter-spacing:2px}.subtitle{opacity:.8;margin-top:0}.big{font-size:1.4rem}.hint{opacity:.7;font-size:.85rem}.name-input{display:block;width:100%;padding:12px;margin:16px 0;border-radius:8px;border:1px solid #ccc;font-size:1rem}.primary-btn{background:var(--gold);color:var(--ink);border:none;border-radius:8px;padding:12px 22px;font-weight:700;cursor:pointer;font-size:1rem}.primary-btn:disabled{opacity:.4;cursor:not-allowed}.hand{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.hand--mine{margin-top:18px}.card{width:60px;height:84px;border-radius:8px;background:var(--paper);border:2px solid #fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;cursor:pointer;box-shadow:0 3px 6px #0006;transition:transform .1s ease}.card--small{width:46px;height:64px}.card__rank{font-size:1.2rem;line-height:1}.card__suit{font-size:1.4rem;line-height:1}.card--red{color:#c81e3a}.card--black{color:#1a1a1a}.card--playable:hover{transform:translateY(-8px)}.card--disabled{opacity:.5;cursor:default;filter:grayscale(.3)}.card--selected{transform:translateY(-10px);border-color:var(--gold);box-shadow:0 0 0 3px var(--gold)}.card--back{background:repeating-linear-gradient(45deg,#2a4d8f,#2a4d8f 6px,#1c3667 6px,#1c3667 12px);color:#ffffff80;font-size:1.6rem}.suit-picker{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:14px 0}.suit-btn{padding:10px 16px;border-radius:8px;border:2px solid #fff;background:#ffffff1a;color:#fff;cursor:pointer;font-size:1rem}.suit-btn--red{color:#ffb3c0}.suit-btn--active{border-color:var(--gold);background:#e8c66b40}.full-hand{margin-top:18px;text-align:left}.full-hand summary{cursor:pointer;opacity:.8}.table-wrap{max-width:760px;margin:0 auto}.hud{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 4px;font-size:.95rem}.hud .red{color:#ff8aa0}.hud .closed{color:var(--gold)}.hud__trump{font-weight:700}.scoreboard{display:flex;gap:10px;margin:6px 0 14px}.score{flex:1;padding:10px;border-radius:8px;text-align:center;font-weight:700;border:2px solid transparent}.score.won{box-shadow:0 0 12px var(--gold);border-color:var(--gold)}.score__match{display:block;font-size:.72rem;opacity:.75;font-weight:600;margin-top:2px}.text-btn{background:none;border:none;color:#fff;opacity:.6;cursor:pointer;margin-top:14px;text-decoration:underline}.text-btn:hover{opacity:1}.team-A{background:#4aa3ff40;border-left:4px solid var(--teamA)}.team-B{background:#ff7a5940;border-left:4px solid var(--teamB)}.table{position:relative;display:grid;grid-template-areas:". top ." "left center right" ". bottom .";grid-template-columns:1fr 1fr 1fr;gap:10px;background:#00000040;border-radius:16px;padding:18px;min-height:320px}.seat--top{grid-area:top}.seat--left{grid-area:left}.seat--right{grid-area:right}.seat--bottom{grid-area:bottom}.table__center{grid-area:center;display:flex;align-items:center;justify-content:center}.table__hint{opacity:.6}.seat{display:flex;flex-direction:column;align-items:center;gap:6px}.seat__name{padding:4px 10px;border-radius:14px;font-weight:700;font-size:.9rem}.seat__tag{margin-left:6px;font-size:.7rem;background:var(--gold);color:var(--ink);border-radius:6px;padding:1px 5px}.seat__tag--you{background:#fff}.seat--turn .seat__name{outline:2px solid var(--gold);box-shadow:0 0 10px var(--gold)}.seat__play-empty{width:46px;height:64px;border:2px dashed rgba(255,255,255,.2);border-radius:8px}.controls{display:flex;align-items:center;justify-content:center;gap:14px;min-height:48px;margin-top:10px}.turn-flag{color:var(--gold);font-weight:700}.toast{position:fixed;top:16px;left:50%;transform:translate(-50%);background:#b3261e;color:#fff;padding:10px 18px;border-radius:8px;z-index:10}.player-list{list-style:none;padding:0;text-align:left}.player-list .seated{color:var(--gold)}.player-list .empty{opacity:.5}.block{display:block;width:100%;margin-top:8px}.divider{margin:18px 0 10px;opacity:.6;font-size:.85rem}.join-row{display:flex;gap:8px}.code-input{flex:1;padding:12px;border-radius:8px;border:1px solid #ccc;font-size:1.1rem;letter-spacing:3px;text-transform:uppercase;text-align:center;font-weight:800}.code-box{margin:8px 0 18px;padding:14px;border-radius:12px;cursor:pointer;background:#e8c66b26;border:1px dashed var(--gold);display:flex;flex-direction:column;gap:2px}.code-box__label{font-size:.75rem;opacity:.7;text-transform:uppercase;letter-spacing:1px}.code-box__value{font-size:2.2rem;font-weight:900;letter-spacing:8px;color:var(--gold)}.code-box__hint{font-size:.75rem;opacity:.6}.seat-list{list-style:none;padding:0;margin:0 0 16px}.seat-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;margin-bottom:6px;background:#ffffff0f}.seat-list li.empty{opacity:.45}.seat-list__seat{font-size:.8rem;opacity:.7;width:56px;text-align:left}.seat-list__name{font-weight:700;flex:1;text-align:left}.seat__tag--rang{background:var(--gold)}.selector-picker{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}.pulse{animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 #e8c66bb3}50%{box-shadow:0 0 0 10px #e8c66b00}}.hand__slot{transition:transform .08s ease;border-radius:8px}.hand__slot--over{transform:translateY(-6px);box-shadow:0 0 0 2px var(--gold);border-radius:8px}.hand__slot--dragging{opacity:.4}.hand-hint{text-align:center;opacity:.5;font-size:.75rem;margin:6px 0 0}.seat-list li.draggable{cursor:grab}.seat-list li.dragging{opacity:.45}.drag-grip{opacity:.5;cursor:grab}.trump-actions{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px}.scoreline{margin:14px 0 18px}.scoreline__ends{display:flex;justify-content:space-between;font-weight:700;font-size:.9rem;margin-bottom:8px}.scoreline__end{padding:3px 8px;border-radius:6px;opacity:.7}.scoreline__end.lead{opacity:1;box-shadow:0 0 8px var(--gold)}.scoreline__track{position:relative;height:10px;border-radius:6px;background:linear-gradient(90deg,#ff7a5959,#ffffff1a 50%,#4aa3ff59)}.scoreline__center{position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;background:var(--gold);transform:translate(-50%)}.scoreline__marker{position:absolute;top:50%;transform:translate(-50%,-50%);transition:left .4s ease}.scoreline__value{display:inline-block;background:var(--gold);color:var(--ink);font-weight:800;font-size:.8rem;padding:2px 7px;border-radius:10px;box-shadow:0 2px 4px #0006}.scoreline__caption{text-align:center;font-size:.8rem;opacity:.8;margin-top:8px}.reveal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#0009;animation:fadein .2s ease}.reveal-card{background:#074d29f2;border:2px solid var(--gold);border-radius:16px;padding:24px 32px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}.reveal-title{color:var(--gold);font-size:1.4rem;font-weight:900;margin:0;letter-spacing:1px}.reveal-sub{margin:0;opacity:.85}@keyframes fadein{0%{opacity:0}to{opacity:1}}