/* ── Fonty (lokalnie, CSP pozwala tylko na 'self') ─────── */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/hanken-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/hanken-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/jetbrains-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/jetbrains-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Podstawy ──────────────────────────────────────────── */
:root{color-scheme:dark;--bg:#07080b;--panel:#0c0c0feb;--line:#26231e;--line2:#3a352e;--ink:#efe9dc;--muted:#a39b8c;--dim:#7d85a6;--gold:#d9b46a;--gold-hi:#ecc883;--wine:#7a1f1f;--wine-d:#5e1717;--ok:#6fbf8f;--danger:#ffb7a6;--sans:'Hanken Grotesk',system-ui,-apple-system,"Segoe UI",sans-serif;--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-family:var(--sans);color:var(--ink);background:var(--bg);font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0;background:var(--bg)}
button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}
button{border:1px solid var(--line2);background:transparent;color:var(--ink);border-radius:999px;min-height:44px;padding:10px 20px;font-size:.88rem;font-weight:500;cursor:pointer;transition:background .16s,border-color .16s,color .16s,opacity .16s}
button:hover{border-color:var(--gold);color:var(--gold)}
button:disabled{opacity:.38;cursor:not-allowed}button:disabled:hover{border-color:var(--line2);color:var(--ink)}
.primary{background:var(--gold);border-color:var(--gold);color:#0c0c0f;font-weight:600}.primary:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:#0c0c0f}.primary:disabled:hover{background:var(--gold);border-color:var(--gold);color:#0c0c0f}
.quiet{background:transparent}
.pill{height:50px;min-height:0;padding:0 26px;font-size:.9rem}
.light{border-color:var(--ink)}.light:hover{background:var(--ink);color:#0c0c0f;border-color:var(--ink)}
.link{border:0;min-height:0;padding:6px 10px;color:var(--muted);font-size:.82rem}.link:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:var(--gold);color:#0c0c0f}
input,select{width:100%;min-height:46px;border:1px solid var(--line2);background:#0f1014;color:var(--ink);border-radius:12px;padding:10px 14px;caret-color:var(--gold)}
input:focus,select:focus{border-color:var(--gold);outline:none}
label{display:grid;gap:8px;text-align:left;font-size:.86rem;color:var(--muted)}
p{color:var(--muted);line-height:1.6;max-width:72ch}
h1,h2{margin:0;text-wrap:balance;font-weight:500;letter-spacing:-.01em}
h1{font-weight:400;letter-spacing:-.03em}h2{font-size:1.1rem}
.small{font-size:.85rem}.gold{color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}
*{scrollbar-color:#3a352e #0c0c0f;scrollbar-width:thin}

/* ── Nagłówek ──────────────────────────────────────────── */
.topbar{position:relative;z-index:20;padding:20px 36px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;background:linear-gradient(180deg,#07080b 0%,#07080bd9 70%,#07080b00 100%)}
body:has(#game-view:not([hidden])) .topbar{position:absolute;top:0;left:0;right:0}
.brand{justify-self:start;display:grid;gap:4px;text-decoration:none}
.brand img{display:block;height:30px;width:auto}
.brand span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.round-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;white-space:nowrap}
#account{justify-self:end;display:flex;align-items:center;gap:20px}
.who{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px #6fbf8f88}
body.offline .dot{background:#e0604f;box-shadow:0 0 8px #e0604f88}
#logout{height:auto;min-height:0;padding:8px 16px;font-size:12px}

#notice{position:fixed;top:78px;left:50%;transform:translateX(-50%);z-index:40;width:max-content;max-width:min(560px,calc(100vw - 32px));margin:0;background:#1a1712f2;color:#f3e2bc;border:1px solid #6b5228;border-radius:14px;padding:12px 18px;font-size:.9rem;box-shadow:0 12px 30px #000a}
#notice.error{background:#2a1414f2;border-color:#8a3a33;color:#ffe0d8}

main{min-height:100vh}
.page{max-width:1080px;margin:0 auto;padding:0 36px}
footer{text-align:center;color:var(--muted);font-size:.78rem;padding:30px 20px 40px}

/* ── Ekran logowania i konfiguracji ───────────────────── */
.welcome{max-width:1200px;margin:0 auto;padding:110px 40px 40px;display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:80px;min-height:calc(100vh - 80px)}
.intro h1{font-size:clamp(2.8rem,5.4vw,5rem);line-height:1;letter-spacing:-.035em}
.intro>p{font-size:1.08rem}
.welcome-note{font-family:var(--mono);font-size:.78rem!important;letter-spacing:.06em;color:var(--gold)!important}
.login-panel,.panel{max-width:440px;width:100%;padding:34px;background:var(--panel);border:1px solid var(--line);border-radius:20px;display:grid;gap:20px}
.login-panel h2{font-size:1.35rem}.login-panel p{margin:0}
.login-panel button,.panel button{border-radius:999px;height:50px}
.sample-cards{display:flex;padding:22px 10px 12px;height:170px}
.sample{width:92px;height:130px;padding:10px 11px;border-radius:8px;background:#f4efe4;border:1px solid #d8d0bf;color:#14151b;font-size:1.6rem;font-weight:600;line-height:1;display:flex;flex-direction:column;justify-content:space-between;transform:rotate(-10deg);box-shadow:0 14px 24px #000a}
.sample span{align-self:flex-end;font-size:2.1rem}.sample.red{color:#a3262a}
.sample+.sample{transform:rotate(9deg);margin:6px 0 0 -14px}
#setup-view{padding-top:120px;padding-bottom:40px}#setup-view .panel{margin:0 auto}#setup-view h1{font-size:1.8rem}

/* ── Scena 3D ──────────────────────────────────────────── */
.scene{position:relative;height:100vh;height:100svh;min-height:540px;overflow:hidden;background:var(--bg)}
.backdrop i{position:absolute;display:block}
.wall{inset:0 0 38% 0;background:linear-gradient(180deg,#120f0c 0%,#0d0b09 70%,#07080b 100%)}
.lamp{top:14%;width:7%;height:46%;background:repeating-linear-gradient(90deg,#00000059 0 2px,#0000 2px 14px),linear-gradient(180deg,#f6c27a80 0%,#d07a2a80 55%,#5c2a0b80 100%);box-shadow:0 0 140px 50px #e68c3238}
.lamp-l{left:6%}.lamp-r{right:6%}
.haze{left:50%;top:14%;width:60%;height:50%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 40%,#ffdcaa1a,#0000 65%)}
.floor{left:0;right:0;bottom:0;height:45%;background:radial-gradient(ellipse 60% 60% at 50% 30%,#15120f 0%,#07080b 70%)}
.stage{position:absolute;left:0;right:0;top:70px;bottom:var(--dock-h,170px);display:flex;align-items:center;justify-content:center}
.stage-box{position:relative;flex:none;width:1200px;height:640px;transform:scale(var(--s,1));transform-origin:50% 50%;perspective:1500px;perspective-origin:50% 0%}
.table{position:absolute;left:40px;top:40px;width:1120px;height:560px;transform:rotateX(var(--tilt,50deg));transform-origin:50% 40%;transform-style:preserve-3d}
.table>i{position:absolute;display:block;pointer-events:none}
.slab{left:0;right:0;top:60px;bottom:0;border-radius:0 0 560px 560px/0 0 500px 500px}
.slab-2{background:#120a05;transform:translateZ(-36px)}.slab-1{background:#1c1009;transform:translateZ(-18px)}
.rail{inset:0;border-radius:0 0 560px 560px;background:radial-gradient(ellipse at 50% 0%,#3b2414 0%,#6a4324 55%,#2a190c 100%);box-shadow:inset 0 -6px 18px #0009}
.rail-trim{left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,#6b5228,#d9b46a,#6b5228)}
.felt{--hz:1;position:absolute;left:40px;top:6px;width:1040px;height:514px;border-radius:0 0 520px 520px;background:radial-gradient(ellipse 70% 90% at 50% 0%,#2c3354 0%,#1c2138 55%,#131628 100%);box-shadow:inset 0 0 0 2px var(--gold),inset 0 0 60px #0000008c;transform:translateZ(1px)}
.felt-line{position:absolute;left:12px;right:12px;top:-6px;bottom:12px;border-radius:0 0 508px 508px;border:1px solid #d9b46a59;border-top:none;pointer-events:none}
.print{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.print-main{font-family:var(--sans);font-weight:600;font-size:22px;letter-spacing:5px;fill:var(--gold)}
.print-sub{font-family:var(--sans);font-size:11px;letter-spacing:4px;fill:#9aa3c4}
.print .band{fill:none;stroke:var(--gold);stroke-opacity:.45;stroke-width:1}
.felt-logo{position:absolute;left:520px;top:452px;width:180px;aspect-ratio:891/137;transform:translateX(-50%);background:var(--gold);-webkit-mask:url(/logo.png) center/contain no-repeat;mask:url(/logo.png) center/contain no-repeat;opacity:.5;pointer-events:none}
.pin{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.pin[data-x="1040"]{left:1040px}.pin[data-y="514"]{top:514px}

/* sabot (prawy tył) i tacka na zużyte karty (lewy tył) */
.shoe{position:absolute;left:820px;top:22px;width:110px;height:78px;border-radius:6px;background:linear-gradient(180deg,#3a3f57,#22263a);box-shadow:0 0 0 1px #4a5070,0 12px 20px #00000080;cursor:help;z-index:7}
.shoe-mouth{position:absolute;left:16px;top:8px;width:58px;height:62px;border-radius:4px;background:repeating-linear-gradient(45deg,#7a1f1f 0 3px,#5e1717 3px 6px);border:2px solid #efe9dc;box-shadow:0 2px 4px #0008}
.shoe-cards{position:absolute;left:82px;top:8px;width:18px;height:62px;border-radius:2px;background:repeating-linear-gradient(0deg,#f4efe4 0 2px,#bfb59e 2px 3px);transform:scaleY(var(--shoe-fill,1));transform-origin:center bottom;transition:transform .6s ease}
.shoe-cut{position:absolute;left:-3px;right:-3px;top:calc(var(--shoe-cut,.75)*100%);height:3px;border-radius:1px;background:#f2c94c;box-shadow:0 0 5px #f2c94caa;transition:top .6s ease}
.shoe.cut-out .shoe-cut{display:none}
.shoe.cut-out .shoe-mouth{box-shadow:0 0 0 2px #f2c94c,0 0 12px #f2c94c}
.shoe:hover,.shoe:focus-visible,.shoe.show-tip{box-shadow:0 0 0 1px var(--gold),0 12px 20px #00000080}
.discard{position:absolute;left:110px;top:24px;width:76px;height:76px;border-radius:6px;border:1px solid #d9b46a59}
.discard-stack{position:absolute;inset:8px 12px;border-radius:3px;background:repeating-linear-gradient(0deg,#f4efe4 0 2px,#bfb59e 2px 3px);opacity:.5;transform:scaleY(var(--discard-fill,.06));transform-origin:center bottom;transition:transform .6s ease}

/* karty */
.card{position:absolute;left:calc(var(--i)*var(--fx));top:calc(var(--i)*var(--fy));width:58px;height:82px;perspective:700px;will-change:transform}
.card.pending{visibility:hidden}
.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.7,.3,1)}
.card.down .card-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:6px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 6px 10px #00000073}
.front{background:#f4efe4;border:1px solid #d8d0bf;color:#14151b;padding:5px 6px;display:flex;flex-direction:column;justify-content:space-between}
.front.red{color:#a3262a}
.front .rank{font-size:17px;font-weight:600;line-height:1;letter-spacing:-.02em}
.front .suit{align-self:flex-end;font-size:22px;line-height:1}
.back{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,#7a1f1f 0 3px,#5e1717 3px 6px);box-shadow:inset 0 0 0 3px #f4efe4,0 6px 10px #00000073}

/* krupier: karty od (470,62) co 44 px */
.dealer-area{position:absolute;left:0;top:0;width:0;height:0}
.dealer-area .anchor{position:absolute;left:441px;top:21px;scale:var(--hz);transform-origin:0 0}
.dealer-area .hand{position:absolute;left:0;top:0;--fx:44px;--fy:0px}
#dealer-total{position:absolute;left:408px;top:62px;transform:translate(-50%,-50%)}

/* miejsca: punkt zakładu r=290, karty r=370, wynik r=432, nazwa r=478 */
.seats{position:absolute;inset:0}
.seat{position:absolute;left:var(--x);top:var(--y);width:0;height:0;transform:rotate(var(--rot))}
.seat.lift{z-index:5}
.seat .anchor{position:absolute;left:0;top:0}
.spot{position:absolute;left:-33px;top:-33px;width:66px;height:66px;border-radius:50%;border:1px solid #d9b46a66;--chip:40px}
.empty-seat .spot{border-style:dashed;border-color:#d9b46a40}
.mine .spot{border-color:var(--gold);box-shadow:0 0 0 4px #d9b46a1f,inset 0 0 18px #d9b46a1f}
.spot-label{display:none}
.seat.active .spot{border-color:#ffffff22}
.seat.active .spot::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p,1)*360deg),#0000 0);-webkit-mask:radial-gradient(closest-side,#0000 calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(closest-side,#0000 calc(100% - 3px),#000 calc(100% - 2px))}
.seat.active .anchor::before{content:"";position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;background:radial-gradient(closest-side,#d9b46a38,#0000);animation:glow 1.6s ease-in-out infinite}
.hands{position:absolute;left:0;top:0;--hg:76px;scale:var(--hz);transform-origin:0 0}
.hands[data-n="3"],.hands[data-n="4"]{--hg:64px}
.hand{position:absolute;left:calc(-29px + var(--ho,0)*var(--hg));top:39px;--fx:22px;--fy:-6px}
.hands:not([data-n="1"]) .hand{--fx:13px;--fy:0px}
.hand.current::after{content:"";position:absolute;left:0;top:-9px;width:calc(58px + 13px);height:3px;border-radius:99px;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.total{position:absolute;left:29px;top:103px;transform:translate(-50%,-50%);min-width:30px;padding:4px 9px;border-radius:999px;background:var(--ink);color:#0c0c0f;font-family:var(--mono);font-size:13px;font-weight:500;text-align:center;white-space:nowrap;box-shadow:0 4px 10px #0006;z-index:2}
.mine .total{background:var(--gold)}
.total.bust{background:var(--wine);color:#fff}.total.natural{background:var(--gold);color:#0c0c0f}
.hands:not([data-n="1"]) .total{left:36px;padding:2px 7px;font-size:11px}
.badge{position:absolute;left:29px;top:41px;transform:translateX(-50%);white-space:nowrap;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.02em;box-shadow:0 6px 14px #000a;z-index:3}
.hands:not([data-n="1"]) .badge{left:36px;padding:2px 7px;font-size:10.5px}
.badge.win{background:#2b6a4a;color:#fff}.badge.bj{background:linear-gradient(135deg,#f3d897,#c99a3a);color:#1d1406}.badge.push{background:var(--ink);color:#0c0c0f}.badge.lose{background:#2a1414;color:#ffcfc4;border:1px solid #8a3a33}
.plate{position:absolute;left:-95px;width:190px;top:176px;text-align:center;display:grid;gap:2px}
.seat-name{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:help;padding:2px 4px;border-radius:6px}
.empty-seat .seat-name{color:var(--dim);cursor:default}
.mine .seat-name{color:var(--gold)}
.seat-name:focus-visible{outline-offset:1px}
.seat-bet{font-family:var(--mono);font-size:10.5px;color:#9aa3c4;min-height:1.2em}

/* żetony na stole */
.stack{position:absolute;left:50%;top:50%}
.stack.payout{left:calc(50% + 22px);top:calc(50% - 10px)}
.chip{position:absolute;left:calc(var(--chip)*-.5);top:calc(var(--chip)*-.5 - var(--k)*3.4px);width:var(--chip);height:var(--chip);border-radius:50%;background:radial-gradient(circle,var(--c) 0 36%,#ffffff8c 37% 41%,var(--c) 42%);border:3px dashed #ffffffb3;box-shadow:0 0 0 2px var(--c),0 3px 0 #0009,0 6px 10px #0006}
.c1{--c:#d8d2c4}.c5{--c:#9a3a2a}.c10{--c:#3d5a8a}.c25{--c:#2b6a4a}.c100{--c:#2b4a7a}.c500{--c:#7a1f1f}.c1000{--c:#b8913f}.c5000{--c:#5a3d7a}
.stack.pending .chip{opacity:.9}
.spot:has(.stack.pending){border-style:dashed;border-color:var(--gold)}
.table[data-phase="betting"] .seat:not(.empty-seat) .spot:not(.has-bet){animation:invite 1.4s ease-in-out infinite}
.table.drop-ready .felt{box-shadow:inset 0 0 0 2px var(--gold-hi),inset 0 0 90px #d9b46a33}
.table.drop-ready .mine .spot{border-color:var(--gold-hi);animation:invite .9s ease-in-out infinite}
@keyframes glow{50%{opacity:.35;transform:scale(.92)}}
@keyframes invite{50%{box-shadow:0 0 0 7px #d9b46a33}}

/* tasowanie */
.shuffle{display:none;position:absolute;left:520px;top:118px;width:0;height:0;z-index:5}
.table[data-phase="shuffling"] .shuffle{display:block}
.shuffle i{position:absolute;left:-29px;top:0;width:58px;height:82px;border-radius:6px;background:repeating-linear-gradient(45deg,#7a1f1f 0 3px,#5e1717 3px 6px);box-shadow:inset 0 0 0 3px #f4efe4,0 4px 8px #0008;--from:-48px;--r:-8deg;animation:riffle 1.3s cubic-bezier(.4,0,.3,1) infinite}
.shuffle i:nth-child(even){--from:48px;--r:8deg}
.shuffle i:nth-child(3),.shuffle i:nth-child(4){animation-delay:.12s}.shuffle i:nth-child(5),.shuffle i:nth-child(6){animation-delay:.24s}
@keyframes riffle{0%,30%{transform:translateX(var(--from)) rotate(var(--r))}55%{transform:translate(0,-6px) rotate(0)}70%{transform:translate(0,0)}100%{transform:translateX(var(--from)) rotate(var(--r))}}

/* ── Komunikat i pasek akcji ───────────────────────────── */
.dock{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:0 36px 34px;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none}
.dock>*{pointer-events:auto}
.table-center{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 12px;text-align:center;max-width:760px}
.table-center h2{font-size:22px;font-weight:500;letter-spacing:-.01em;color:var(--ink);text-shadow:0 2px 20px #000}
#countdown{display:inline-block;min-width:3.4em;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:#0c0c0f;background:var(--gold);border-radius:99px;padding:2px 9px;font-weight:500}
#countdown:empty{display:none}
.phase-hint{flex-basis:100%;margin:0 auto;font-size:13px;color:var(--muted);text-shadow:0 1px 10px #000}
.controls{width:100%;max-width:1080px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;backdrop-filter:blur(6px);box-shadow:0 18px 40px #0009}
.readout{display:flex;gap:28px;align-items:stretch}
.readout>div{display:grid;gap:4px}
.cap{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.readout strong{font-size:22px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sep{width:1px;background:var(--line)}
.moves{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
#participation{display:flex;gap:10px}
#bet-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.stake-field input{width:112px;height:50px;min-height:0;border-radius:999px;text-align:center;font-family:var(--mono);font-size:14px;padding:0 12px;-moz-appearance:textfield}
.stake-field input::-webkit-inner-spin-button,.stake-field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.chips{display:flex;gap:8px}
.chips button{--c:#2b4a7a;width:52px;height:52px;min-height:0;padding:0;border-radius:50%;border:0;background:radial-gradient(circle,var(--c) 0 36%,#0000 37%),var(--c);color:#fff;font-family:var(--mono);font-size:12px;font-weight:500;box-shadow:0 3px 0 #0009,inset 0 0 0 7px var(--c),inset 0 0 0 9px #ffffff99;position:relative;transition:transform .15s;touch-action:none;cursor:grab}
.chips button::before{content:"";position:absolute;inset:7px;border-radius:50%;border:2px dashed #ffffffa6}
.chips button:hover{transform:translateY(-3px);color:#fff}
.chips button:active{transform:translateY(1px);cursor:grabbing}
.chips [data-stake="5"]{--c:#9a3a2a}.chips [data-stake="25"]{--c:#2b6a4a}.chips [data-stake="100"]{--c:#2b4a7a}.chips [data-stake="500"]{--c:#7a1f1f}.chips [data-stake="1000"]{--c:#b8913f;color:#1d1406}.chips [data-stake="1000"]:hover{color:#1d1406}
.action-buttons{display:flex;gap:10px;flex-wrap:wrap}
.outline{border-color:var(--line2)}
#control-hint{flex-basis:100%;margin:0;font-size:12.5px;text-align:right;color:var(--muted)}
#control-hint:empty{display:none}
.chip-ghost{position:fixed;z-index:1000;width:52px;height:52px;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;background:var(--c);color:#fff;font:500 12px var(--mono);display:grid;place-items:center;box-shadow:0 12px 24px #000a,inset 0 0 0 7px var(--c),inset 0 0 0 9px #ffffff99}
.scroll-cue{white-space:nowrap;position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:6;border:0;min-height:0;padding:4px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6f685c}
.scroll-cue:hover{color:var(--gold)}

/* dymek: saldo gracza i stan sabotu (poza płaszczyzną 3D, żeby się nie zniekształcał) */
.tip{position:fixed;z-index:50;left:0;top:0;transform:translate(-50%,calc(-100% - 12px));width:max-content;max-width:260px;padding:9px 13px;border-radius:12px;background:#0c0c0ff5;border:1px solid #d9b46a80;color:var(--ink);font-size:12.5px;line-height:1.45;box-shadow:0 10px 24px #000c;pointer-events:none}
.tip::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;margin-left:-5px;background:#0c0c0f;border-right:1px solid #d9b46a80;border-bottom:1px solid #d9b46a80;transform:rotate(45deg)}
.tip strong{color:var(--gold);font-weight:600}

/* ── Pod stołem: znajomi, zasady, konto, panel gospodarza ── */
.below{padding-top:36px}
details{border-top:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;font-weight:600;min-height:30px;padding:4px 0;font-size:1rem}
summary::marker{color:var(--gold)}
details p,details li{font-size:.9rem;line-height:1.7;color:var(--muted)}
details ul{padding-left:22px;max-width:80ch}
.compact-form{display:grid;gap:16px;max-width:450px;padding:15px 0}
.compact-form p{margin:0}
.admin-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin:12px 0 25px}
#admin h2{margin-top:15px}
.record{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.86rem}
.record span{overflow-wrap:anywhere}
.record small{display:block;color:var(--muted);margin-top:4px;font-family:var(--mono);font-size:.72rem}
.record strong{white-space:nowrap;font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;color:var(--gold)}
#admin-ledger{max-height:380px;overflow:auto}
.user-actions{display:flex;gap:12px;align-items:center}
.user-actions button,.record button{min-height:36px;padding:6px 14px;font-size:.8rem}

/* ── Czat stołu: wysuwany panel po prawej ───────────────── */
:root{--chat-w:340px}
.chat{position:fixed;top:0;right:0;bottom:0;width:var(--chat-w);z-index:30;transform:translateX(100%);transition:transform .28s cubic-bezier(.3,.7,.3,1)}
body.chat-open .chat{transform:none}
body{transition:padding-right .28s cubic-bezier(.3,.7,.3,1)}
@media(min-width:1180px){body.chat-open{padding-right:var(--chat-w)}body.chat-open .topbar{right:var(--chat-w)}}
.chat-tab{position:absolute;right:100%;top:38%;min-height:0;padding:14px 9px;border-radius:12px 0 0 12px;border:1px solid var(--line2);border-right:0;background:#0c0c0f;color:var(--gold);box-shadow:-6px 6px 18px #0007;display:grid;gap:8px;justify-items:center}
.chat-tab:hover{background:#15140f}
.chat-tab span{writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.16em;text-transform:uppercase;font-family:var(--mono);font-size:.7rem}
.chat-tab b{min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--wine);color:#fff;font-size:.72rem;display:grid;place-items:center;animation:pop .3s ease-out}
.chat-panel{height:100%;display:flex;flex-direction:column;background:#0b0b0e;border-left:1px solid var(--line);box-shadow:-12px 0 30px #0008}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:18px 16px 14px;border-bottom:1px solid var(--line)}
.chat-head h2{font-size:1.05rem;font-weight:500}
.chat-head button{min-height:34px;padding:4px 12px}
.chat-log{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain}
.chat-empty{margin:auto;text-align:center;font-size:.85rem}
.chat-msg{max-width:88%;align-self:flex-start;margin-top:8px}
.chat-msg.grouped{margin-top:2px}
.chat-msg.mine{align-self:flex-end;text-align:right}
.chat-meta{display:flex;gap:8px;align-items:baseline;font-size:.74rem;margin:0 4px 3px}
.chat-msg.mine .chat-meta{justify-content:flex-end}
.chat-meta strong{color:hsl(var(--h,40) 60% 72%);font-weight:600}
.chat-msg.mine .chat-meta strong{color:var(--gold)}
.chat-meta time{color:#6f685c;font-family:var(--mono);font-size:.68rem}
.chat-msg p{margin:0;display:inline-block;text-align:left;padding:7px 12px;border-radius:14px 14px 14px 4px;background:#17171c;border:1px solid var(--line);color:var(--ink);font-size:.88rem;line-height:1.4;overflow-wrap:anywhere;max-width:100%}
.chat-msg.mine p{background:var(--gold);border-color:var(--gold);color:#0c0c0f;border-radius:14px 14px 4px 14px}
.chat-quick{display:flex;gap:6px;flex-wrap:wrap;padding:8px 14px 0}
.chat-quick button{min-height:30px;padding:3px 10px;font-size:.76rem;font-weight:500}
.chat-form{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 14px 16px;position:relative}
.chat-form input{min-height:44px;border-radius:99px;padding:10px 16px}
.chat-form button{padding:10px 18px}
.chat-form.sending{opacity:.6}
.chat-form small{position:absolute;right:120px;bottom:2px;font-size:.68rem;color:var(--muted)}
@keyframes pop{from{transform:scale(.4)}}

/* ── Wąskie ekrany ─────────────────────────────────────── */
@media(max-width:1050px){.welcome{gap:30px}}
@media(max-width:760px){
 .topbar{padding:14px 16px;grid-template-columns:1fr auto;gap:12px}
 .round-label{display:none}
 .brand img{height:22px}.brand span{font-size:9px}
 #account{gap:10px}.who{font-size:11px}
 .welcome{grid-template-columns:1fr;gap:20px;padding:90px 16px 30px;min-height:0}
 .intro h1{font-size:2.7rem}.sample-cards{display:none}
 .login-panel,.panel{max-width:none;padding:24px}
 .page{padding:0 16px}
 .stage{top:58px}
 /* telefon: mniejsze pochylenie i większe karty, żeby dało się je odczytać */
 .stage-box{--tilt:30deg}.felt{--hz:1.5}
 .seat-name{font-size:17px}.seat-bet{font-size:14px}.plate{top:168px;left:-120px;width:240px}
 #dealer-total{scale:1.5}.spot{scale:1.2}
 .print-main{font-size:26px}
 .dock{padding:0 10px 28px;gap:8px}
 .table-center h2{font-size:17px}.phase-hint{font-size:12px}
 .controls{padding:12px;gap:10px;border-radius:16px}
 .readout{gap:16px;width:100%}.readout strong{font-size:17px}
 .moves{width:100%;justify-content:flex-start;margin:0}
 #bet-form{justify-content:flex-start}
 .chips{gap:6px;width:100%}.chips button{width:44px;height:44px}
 .stake-field input{width:96px;height:44px}
 .pill{height:44px;padding:0 18px}
 .action-buttons{gap:6px;width:100%}.action-buttons button{flex:1;padding:0 10px}
 #participation,#participation button{width:100%}
 #control-hint{text-align:left}
 .admin-layout{grid-template-columns:1fr;gap:20px}
 .record,.user-actions{flex-wrap:wrap}
 :root{--chat-w:100vw}.chat-tab{top:30%;padding:10px 6px}.chat-tab span{font-size:.62rem}body.chat-open{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}