/* 2026-10-17: Osobny pas akcji między lewą a graczem, dopasowanie ręki do 320 px. */
/* 2026-10-17: Karty na stole zachowują pełną czytelność. */
/* 2026-10-17: Rozdzielono przyciski akcji i miejsce gracza; narożniki kart. */
/* WERSJA: v1.3 | 2026-10-17: Responsywny stół Hearts i pokoje wieloosobowe. */
:root{color-scheme:dark;--gold:#f3c663;--ink:#ebf4e9;--muted:#a8c3ad;--edge:#ffffff20;font-family:Segoe UI,system-ui,sans-serif;background:#061f0d;color:var(--ink)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 20%,#1b6231,transparent 70%);min-height:100dvh}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;border:1px solid #ffffff30;border-radius:9px;padding:10px 15px;background:#163e24;color:var(--ink);font-weight:600}button:hover{background:#255d35}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.primary{background:var(--gold);color:#1b2b18;border-color:var(--gold)}.primary:hover{background:#ffdb87}a{color:var(--gold);text-decoration:none}[hidden]{display:none!important}.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px clamp(12px,4vw,48px);border-bottom:1px solid var(--edge);background:#061f0dcc}.brand{font-weight:800;letter-spacing:2px}.brand small{font-size:10px;font-weight:400;color:var(--muted);letter-spacing:0}main{max-width:1100px;margin:auto;padding:20px 16px 32px}.panel{background:#092e18dd;border:1px solid var(--edge);border-radius:16px;padding:22px;margin-bottom:16px}.setup{max-width:600px;margin:28px auto}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--gold);font-weight:700}h1{font-size:clamp(28px,5vw,46px);letter-spacing:-1px;line-height:1.12;margin:20px 0}p{line-height:1.6}.intro{color:#c6d8c8}.red{color:#d54853}.muted{font-size:13px;color:var(--muted)}label{display:flex;flex-direction:column;gap:7px;font-size:13px;color:#c6d8c8;margin:16px 0}input,select{border:1px solid #ffffff30;background:#041e0e;color:white;border-radius:8px;padding:12px;width:100%;min-width:0}input:focus,select:focus{outline:2px solid var(--gold)}.setup-actions{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}.join-row{display:flex;gap:12px;align-items:flex-end;border-top:1px solid var(--edge);padding-top:8px}.join-row label{flex:1;margin-bottom:0}.join-row input{text-transform:uppercase}.join-row button{margin-bottom:0}.gamebar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;font-size:13px}.gamebar>div{display:flex;gap:6px}.gamebar button{font-size:12px;padding:8px}.felt{position:relative;min-height:660px;border-radius:80px;border:8px solid #413722;box-shadow:0 0 0 2px #a58b54,0 15px 45px #0006,inset 0 0 70px #0005;background:radial-gradient(ellipse,#206b37,#0a3b1c);margin:20px 0 24px;overflow:hidden}.players{position:absolute;inset:0;pointer-events:none}.seat{position:absolute;text-align:center;min-width:110px;max-width:175px;padding:10px;border:1px solid #ffffff20;border-radius:12px;background:#042511c9;font-size:13px;pointer-events:auto}.seat strong{display:block;overflow-wrap:anywhere}.seat small{display:block;color:var(--muted);margin-top:5px}.seat.active{border-color:var(--gold);box-shadow:0 0 16px #f3c66330}.seat-0{bottom:200px;left:50%;transform:translateX(-50%)}.seat-1{left:20px;top:39%}.seat-2{top:18px;left:50%;transform:translateX(-50%)}.seat-3{right:20px;top:39%}.seat button{font-size:10px;padding:5px;margin-top:5px}.center{padding:120px 170px 225px;text-align:center;min-height:640px}.center p{min-height:48px;font-size:14px;margin:10px 0}.trick{height:160px;position:relative;max-width:270px;margin:auto}.trick .played{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.trick .played.pos-0{transform:translate(-50%,-10%)}.trick .played.pos-1{transform:translate(-115%,-50%) rotate(-8deg)}.trick .played.pos-2{transform:translate(-50%,-95%)}.trick .played.pos-3{transform:translate(15%,-50%) rotate(8deg)}.played small{display:block;font-size:10px;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card{display:inline-flex;position:relative;flex-shrink:0;flex-direction:column;justify-content:space-between;align-items:flex-start;width:72px;height:102px;border-radius:7px;background:#fffdf3;color:#192720;border:1px solid #d5d3c8;padding:6px;font-family:Georgia,serif;font-size:23px;line-height:1;font-weight:bold;box-shadow:0 3px 7px #0005}.card.red{color:#bd2138}.card .pip{align-self:center;font-size:31px}.card .bottom{align-self:flex-end;transform:rotate(180deg);font-size:18px}.card:hover{background:#fff}.card:disabled{opacity:1;color:#787e79;background:#d6d9cd;box-shadow:none}.card.red:disabled{color:#b47b7f}.card.selected{outline:3px solid var(--gold);transform:translateY(-15px)}.hand-area{position:absolute;bottom:18px;left:16px;right:16px}.hand-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin:0 12px 20px;color:#d0e0d1}.hand-label button{padding:5px 9px;font-size:11px}.hand{display:flex;justify-content:center;padding:0 10px 8px;min-height:110px}.hand .card+.card{margin-left:clamp(-48px,calc((100vw - 1200px)/13),-8px)}.hand .card:hover:not(:disabled){transform:translateY(-12px);z-index:2}.hand .card.selected:hover{transform:translateY(-15px)}#actions{margin-top:15px;font-size:13px}details summary{cursor:pointer;color:var(--gold);font-weight:600}table{width:100%;border-collapse:collapse;font-size:13px;margin-top:15px}td,th{padding:9px 4px;text-align:center;border-bottom:1px solid var(--edge);overflow-wrap:anywhere}th{color:var(--gold)}.last-trick{display:flex;justify-content:center;gap:12px;padding-top:20px}.notice{position:fixed;bottom:15px;left:50%;transform:translateX(-50%);width:min(92vw,620px);padding:14px 20px;border:1px solid #ffb8a2;border-radius:12px;background:#482119;color:white;z-index:10;box-shadow:0 5px 25px #0009}dialog{width:min(92vw,640px);max-height:85dvh;background:#0c321c;color:var(--ink);border:1px solid #a58b54;border-radius:16px;padding:24px}dialog::backdrop{background:#000a}dialog li{margin:14px 0;line-height:1.6}.close{float:right}.winner{color:var(--gold);font-size:18px;font-weight:700}#waitingPlayers li{padding:10px 0}
@media(max-width:650px){main{padding:12px 8px}.topbar{padding:10px;font-size:12px}.topbar button{padding:8px}.brand{letter-spacing:1px}.panel{padding:18px}.setup{margin:16px auto}.gamebar{align-items:flex-start}.gamebar>div{flex-wrap:wrap;justify-content:flex-end}.felt{border-width:4px;border-radius:28px;min-height:620px}.seat{min-width:74px;max-width:100px;font-size:11px;padding:7px}.seat-1{left:6px;top:32%}.seat-3{right:6px;top:32%}.seat-2{top:14px}.seat-0{bottom:188px}.center{padding:105px 68px 225px;min-height:610px}.center p{font-size:12px;min-height:60px}.card{width:62px;height:90px;font-size:21px}.card .pip{font-size:27px}.hand-area{left:4px;right:4px}.hand .card+.card{margin-left:calc((100vw - 870px)/13)}.hand-label{margin-bottom:20px}.last-trick{gap:8px}.last-trick .card{width:55px;height:80px}.gamebar #roomLabel{min-width:112px}.trick{height:155px}.seat small{font-size:10px}.hand .card{touch-action:manipulation}}
@media(prefers-reduced-motion:no-preference){.card{transition:transform .15s,background .15s}}

.card .corner-suit{display:block;font-size:15px;line-height:1.05}.hand .card .pip{font-size:23px}.seat-0{bottom:180px}#actions{position:absolute;top:355px;left:130px;right:130px;margin:0;z-index:3}
@media(max-width:650px){.felt{min-height:660px}.center{min-height:650px}#actions{top:370px;left:80px;right:80px}.hand .card{font-size:18px;padding:5px}.hand .card .corner-suit{font-size:15px}.hand .card .pip{font-size:20px}.seat-0{bottom:180px}}

.played .card:disabled,.last-trick .card:disabled{background:#fffdf3;color:#192720;box-shadow:0 3px 7px #0005}.played .card.red:disabled,.last-trick .card.red:disabled{color:#bd2138}

.felt{min-height:720px}.center{min-height:700px}#actions{top:400px}
@media(max-width:650px){.felt{min-height:720px}.center{min-height:710px}#actions{top:400px}.hand .card+.card{margin-left:clamp(-48px,calc((100vw - 846px)/12),-8px)}}