:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
html:root[data-kit-motyw=ciemny]{--kit-tlo:#120c0a;--kit-tlo2:#2a1e17;--kit-tlo3:#3a2a1f;--kit-tekst:#f6ead5;--kit-tekst2:#d6c3a3;--kit-tekst3:#a8957a;--kit-akcent:#e2c27f;--kit-akcent2:#b0823f;--kit-linia:#c9a46a40}
html:root[data-kit-motyw=jasny]{--kit-tlo:#efe6d6;--kit-tlo2:#fbf6ec;--kit-tlo3:#efe3cc;--kit-tekst:#2b2016;--kit-tekst2:#5a4a38;--kit-tekst3:#7d6a54;--kit-akcent:#9a6a26;--kit-akcent2:#7a4f18;--kit-linia:#8a6a3c40}
html[data-kit-motyw=jasny] .domino-variants input:checked+span,html[data-kit-motyw=jasny] .domino-chips input:checked+span{background:#f3e2c1}
html[data-kit-motyw=jasny] body{background:#cfc3b2}
html[data-kit-motyw=jasny] body .kit-warstwa--swiat{--kit-tlo2:#fbf6ec;--kit-tlo3:#efe3cc;--kit-tekst:#2b2016;--kit-tekst2:#5a4a38;--kit-tekst3:#7d6a54;--kit-linia:#8a6a3c40;background:linear-gradient(to bottom,#2b201626,#2b201640)}
html[data-kit-motyw=ciemny] body .kit-warstwa--swiat{--kit-tlo2:#2a1e17;--kit-tlo3:#3a2a1f;--kit-tekst:#f6ead5;--kit-tekst2:#d6c3a3;--kit-linia:#c9a46a40}
body{margin:0;background:#120c0a}
body .kit-toast{bottom:calc(110px + var(--kit-safe-dol,0px));border-radius:12px;max-width:calc(100% - 32px);width:max-content;pointer-events:none}
.kit-tytul{font-family:Georgia,'Times New Roman',serif!important;font-weight:500!important;letter-spacing:-.03em!important}
.kit-karta{border-color:#c9a46a55!important}
.kit-btn--glowny{background:linear-gradient(135deg,#ecd29a,#b98b45)!important;color:#22170e!important}
.domino-gl{position:absolute;inset:0;display:block;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}

.domino-seats{position:fixed;top:calc(10px + var(--kit-safe-gora,0px));left:calc(66px + var(--kit-safe-lewo,0px));right:calc(66px + var(--kit-safe-prawo,0px));display:flex;flex-wrap:wrap;justify-content:center;gap:8px;z-index:9;pointer-events:none}
.domino-seats[hidden]{display:none}
.domino-seat{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:10px;row-gap:3px;align-items:center;padding:8px 14px 9px 9px;min-width:150px;border-radius:14px;background:linear-gradient(180deg,#2a1d16f2,#1a120ef2);border:1px solid #c9a46a40;box-shadow:0 6px 18px #0007,inset 0 1px 0 #ffffff12;color:#f6ead5;font-size:13px;line-height:1.2;position:relative;transition:box-shadow .25s,border-color .25s,transform .25s}
.domino-avatar{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-style:normal;font:600 18px/1 Georgia,'Times New Roman',serif;color:#2b1d10;background:radial-gradient(circle at 35% 30%,#f7e2b0,#c9994a 70%);box-shadow:0 0 0 2px #e2c27f,0 0 0 4px #2a1d16,0 3px 8px #000a}
.domino-avatar--bot{background:radial-gradient(circle at 35% 30%,#dfe8f2,#8fa4bd 70%)}
.domino-avatar svg{width:26px;height:26px;fill:#eef3f8;stroke:#2c3a4c;stroke-width:1.4;stroke-linecap:round}
.domino-avatar svg .oko{fill:#3fd0ff;stroke:none}
.domino-seat b{grid-column:2/4;font-weight:650;font-size:15px;letter-spacing:.01em;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.domino-count{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;font-size:14px;color:#e9dcc3}
.domino-count::before{content:'';width:9px;height:16px;border-radius:2px;background:linear-gradient(#f1e6d0 0 47%,#1b120e 47% 53%,#f1e6d0 53%);box-shadow:0 1px 2px #000a}
.domino-seat small{justify-self:end;font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;color:#1f150e;background:linear-gradient(135deg,#ecd29a,#b98b45);border-radius:999px;padding:2px 8px}
.domino-seat small::before{content:'★ '}
.domino-seat.is-turn{border-color:#e2c27f;box-shadow:0 0 0 2px #e2c27f,0 8px 26px #e2c27f40;transform:translateY(1px)}
.domino-seat em{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1f150e;background:#e2c27f;border-radius:999px;padding:2px 8px;box-shadow:0 2px 6px #0006}
.domino-seat.is-me b{color:#f2d394}
.domino-seat.team-0{border-left:4px solid #d8ab55}.domino-seat.team-1{border-left:4px solid #8fb3d9}
.domino-marker{position:absolute;top:-5px;right:-5px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a8a,#b3262e 60%);box-shadow:0 1px 3px #000a}
.domino-pile span::before{content:'';display:block;margin:0 auto 3px;width:11px;height:18px;border-radius:2px;background:linear-gradient(#f1e6d0 0 47%,#1b120e 47% 53%,#f1e6d0 53%);box-shadow:0 1px 2px #000a}
.domino-pile{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:7px 12px;border-radius:14px;background:linear-gradient(180deg,#2a1d16f2,#1a120ef2);border:1px solid #c9a46a40;color:#f6ead5;font-size:12px;box-shadow:0 6px 18px #0007}
.domino-pile b{font-size:15px;font-variant-numeric:tabular-nums}

.domino-tray{position:fixed;bottom:calc(12px + var(--kit-safe-dol,0px));right:calc(10px + var(--kit-safe-prawo,0px));left:calc(10px + var(--kit-safe-lewo,0px));display:flex;flex-direction:column;align-items:center;gap:8px;z-index:11;pointer-events:none}
.domino-actions{position:fixed;left:0;top:0;z-index:12;display:flex;gap:10px;will-change:transform;pointer-events:none}
.domino-actions[hidden]{display:none}
.domino-tray[hidden]{display:none}
.domino-status{margin:0;max-width:min(560px,100%);text-align:center;font-size:15px;font-weight:550;line-height:1.3;color:#f6ead5;background:#160f0cd9;border:1px solid #c9a46a33;border-radius:999px;padding:8px 16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.domino-status[hidden]{display:none}
.domino-btn{pointer-events:auto;appearance:none;font:650 15px/1.1 system-ui;color:#f6ead5;background:linear-gradient(180deg,#2a1d16f0,#1a120ef0);border:1px solid #c9a46a55;border-radius:13px;min-height:48px;min-width:48px;padding:10px 18px;box-shadow:0 6px 16px #0007,inset 0 1px 0 #ffffff14;cursor:pointer}
.domino-btn[hidden]{display:none}
.domino-btn:active{transform:translateY(1px)}
.domino-btn:focus-visible{outline:3px solid var(--kit-akcent);outline-offset:2px}
.domino-btn--draw,.domino-btn--pass,.domino-btn--end{position:relative;min-width:148px;min-height:52px;padding:12px 24px;border-radius:999px;font:700 17px/1 system-ui;letter-spacing:.01em;color:#22170e;background:linear-gradient(180deg,#fbe6b2,#d7aa5c 55%,#b3843d);border:1px solid #fff0c8;box-shadow:0 0 0 3px #1a120ecc,0 0 0 4px #e2c27f,0 0 26px #ffb34766,0 10px 24px #000b,inset 0 1px 0 #fff8e0,inset 0 -3px 6px #8a5f2466;animation:domino-wejscie .32s cubic-bezier(.2,.8,.2,1.2)}
.domino-btn--draw:hover,.domino-btn--pass:hover,.domino-btn--end:hover{box-shadow:0 0 0 3px #1a120ecc,0 0 0 4px #ffe2a8,0 0 34px #ffb34799,0 10px 24px #000b,inset 0 1px 0 #fff8e0}
@keyframes domino-wejscie{from{opacity:0;transform:translateY(10px) scale(.92)}}
@media (prefers-reduced-motion:reduce){.domino-btn--draw,.domino-btn--pass,.domino-btn--end{animation:none}}

.domino-labels{position:fixed;inset:0;pointer-events:none;z-index:8}
.domino-labels[hidden]{display:none}
.domino-labels span{position:absolute;left:0;top:0;font-size:11px;font-weight:600;color:#f6ead5;background:#1b130fb0;padding:2px 7px;border-radius:8px;white-space:nowrap;will-change:transform}
.domino-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.domino-field{border:0;margin:0 0 12px;padding:0}
.domino-field legend{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--kit-tekst3);margin-bottom:6px;padding:0}
.domino-field small{display:block;color:var(--kit-tekst3);font-size:12px;margin-top:6px}
.domino-variants{display:grid;gap:6px}
.domino-variants label,.domino-chips label{cursor:pointer}
.domino-variants input,.domino-chips input{position:absolute;opacity:0;pointer-events:none}
.domino-variants span{display:grid;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid var(--kit-linia);background:var(--kit-tlo3)}
.domino-variants small{color:var(--kit-tekst2);font-size:12px}
.domino-chips{display:flex;flex-wrap:wrap;gap:6px}
.domino-chips span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--kit-linia);background:var(--kit-tlo3);font-size:14px}
.domino-variants input:checked+span,.domino-chips input:checked+span{border-color:var(--kit-akcent);box-shadow:inset 0 0 0 1px var(--kit-akcent);background:#4a3523}
.domino-variants input:focus-visible+span,.domino-chips input:focus-visible+span{outline:3px solid var(--kit-akcent);outline-offset:2px}
.domino-check{display:flex;gap:10px;align-items:center;margin-top:10px;font-size:14px;cursor:pointer}
.domino-check input{width:20px;height:20px;accent-color:#d8ab55}
.domino-daily{display:grid!important;gap:2px;margin-bottom:14px;text-align:left}
.domino-daily small{margin:0!important}

.domino-table{width:100%;border-collapse:collapse;margin:6px 0 10px;font-size:13px}
.domino-table th,.domino-table td{padding:6px 4px;border-bottom:1px solid var(--kit-linia);text-align:left;vertical-align:middle}
.domino-table thead th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--kit-tekst3);font-weight:500}
.domino-table td:nth-child(3),.domino-table td:nth-child(4){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.domino-table tr.won th{color:var(--kit-akcent)}
.domino-mini{display:inline-grid;grid-template-rows:1fr 1fr;width:16px;margin:1px 2px;border-radius:3px;background:#f1e6d0;color:#22170e;font:700 9px/12px system-ui;text-align:center;box-shadow:0 1px 2px #0008}
.domino-mini i{font-style:normal}.domino-mini i:first-child{border-bottom:1px solid #3a2a1f}
.domino-help p{color:var(--kit-tekst2);font-size:14px;line-height:1.5;margin:0 0 10px}
@media (prefers-reduced-motion:reduce){.domino-seat{transition:none}}
@media (max-width:520px){.domino-seats{left:calc(58px + var(--kit-safe-lewo,0px));right:calc(58px + var(--kit-safe-prawo,0px));gap:6px}.domino-seat{min-width:0;padding:7px 10px 7px 7px;column-gap:7px}.domino-avatar{width:34px;height:34px;font-size:15px}.domino-avatar svg{width:21px;height:21px}.domino-seat b{font-size:14px;max-width:124px}.domino-status{font-size:14px;border-radius:16px}.domino-btn{padding:10px 14px}}
/* Phone held sideways: one slim row of seats on top, status and buttons side by side at the bottom, so the table keeps most of the height. */
@media (orientation:landscape) and (max-height:500px){.domino-seats{top:calc(6px + var(--kit-safe-gora,0px));gap:6px}.domino-seat{grid-template-columns:auto auto auto auto;grid-template-rows:auto;min-width:0;padding:4px 10px 4px 4px;column-gap:7px;border-radius:999px}.domino-avatar{grid-row:auto;width:28px;height:28px;font-size:13px;box-shadow:0 0 0 1.5px #e2c27f,0 2px 5px #000a}.domino-avatar svg{width:18px;height:18px}.domino-seat b{grid-column:auto;font-size:13px;max-width:96px}.domino-count{font-size:13px;gap:4px}.domino-count::before{width:7px;height:13px}.domino-seat small{font-size:12px;padding:1px 7px}.domino-seat em{top:-8px;font-size:9px;padding:1px 6px}.domino-seat.team-0,.domino-seat.team-1{border-left-width:3px}.domino-pile{flex-direction:row;gap:6px;padding:4px 12px;border-radius:999px}.domino-pile span::before{display:inline-block;margin:0 5px -3px 0;width:8px;height:14px}.domino-tray{flex-direction:row;justify-content:center;bottom:calc(6px + var(--kit-safe-dol,0px));gap:8px}.domino-actions{flex-wrap:nowrap}.domino-status{font-size:13px;padding:6px 12px;border-radius:14px;max-width:min(320px,42vw)}.domino-btn{min-height:44px;padding:8px 13px;font-size:14px;border-radius:12px}.domino-btn--draw,.domino-btn--pass,.domino-btn--end{min-width:0;font-size:15px}}
/* Tools: a column of lacquered round keys with a gold ring under the pause button, which wears the same finish. */
.domino-tools{position:fixed;top:calc(66px + var(--kit-safe-gora,0px));right:calc(8px + var(--kit-safe-prawo,0px));display:flex;flex-direction:column;gap:12px;z-index:11}
.domino-tools[hidden]{display:none}
.domino-btn--tool,.kit-hud .kit-btn[data-kit=pauza]{width:48px;height:48px;min-width:48px;min-height:48px;padding:0;display:grid;place-items:center;border-radius:50%;color:#ecca86;background:radial-gradient(circle at 50% 30%,#3a281c,#160e0a 72%);border:1px solid #c9a46a;box-shadow:0 0 0 3px #160e0acc,0 0 0 4px #c9a46a55,0 6px 16px #000a,inset 0 1px 0 #ffffff1c,inset 0 -6px 10px #0006;transition:box-shadow .2s,color .2s,transform .12s}
.kit-hud .kit-btn[data-kit=pauza]{font:700 15px/1 Georgia,'Times New Roman',serif;letter-spacing:.06em}
.domino-btn--tool svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 #000a)}
.domino-btn--tool span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.domino-btn--tool:hover,.kit-hud .kit-btn[data-kit=pauza]:hover{color:#ffe2a8;box-shadow:0 0 0 3px #160e0acc,0 0 0 4px #e2c27f,0 0 18px #ffb34755,0 6px 16px #000a,inset 0 1px 0 #ffffff1c}
.domino-btn--tool:active,.kit-hud .kit-btn[data-kit=pauza]:active{transform:scale(.95)}
.domino-btn--tool:focus-visible,.kit-hud .kit-btn[data-kit=pauza]:focus-visible{outline:3px solid #ffe2a8;outline-offset:3px}
.domino-btn--sound.is-off{color:#8f7f68}
.domino-btn--hint{color:#1f150e;background:radial-gradient(circle at 50% 30%,#f6dc9f,#b98b45 75%);border-color:#f3dfb2}
@media (prefers-reduced-motion:reduce){.domino-btn--tool,.kit-hud .kit-btn[data-kit=pauza]{transition:none}}
.domino-actions{flex-wrap:nowrap}
/* The status keeps room for two lines, so a new message never moves the bars and the table under them. */
@media (max-width:520px){.domino-status{min-height:calc(2.6em + 16px);display:flex;align-items:center;justify-content:center}}
@media (orientation:landscape) and (max-height:500px){.domino-status{min-height:46px;display:flex;align-items:center}}
/* Scores live on the felt by each stand, the boneyard count on the brass plate of the box. The cards keep both for screen readers. */
.domino-labels span.domino-score{font:700 15px/1 Georgia,'Times New Roman',serif;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#2a1a0b;background:linear-gradient(180deg,#f6dc9f,#c79a4f 55%,#a87a35);border:1px solid #fbe7b5;border-radius:999px;padding:5px 11px 4px;box-shadow:0 3px 10px #000a,inset 0 1px 0 #fff6d8}
.domino-seat small,.domino-pile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The message rests on the near rail between two gold rules, like an inlay. */
.domino-status::before,.domino-status::after{content:'';position:absolute;top:50%;width:min(120px,12vw);height:1px;background:linear-gradient(90deg,transparent,#d8b26a);pointer-events:none}
.domino-status::before{right:100%;margin-right:10px}.domino-status::after{left:100%;margin-left:10px;transform:scaleX(-1)}
.domino-status{position:relative;border-color:#c9a46a66;box-shadow:0 4px 14px #0008,inset 0 1px 0 #ffffff10}
@media (max-width:520px){.domino-status::before,.domino-status::after{display:none}}
/* The plates on the stands replace the seat bar: it stays in the page for screen readers only. */
.domino-seats{position:fixed;top:0;left:0;right:auto;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.domino-labels span.domino-score{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 system-ui;color:#f6ead5;background:linear-gradient(180deg,#2a1d16f0,#1a120ef0);border:1px solid #c9a46a66;padding:6px 6px 6px 12px;transition:box-shadow .3s,border-color .3s}
.domino-labels span.domino-score b{font-weight:650;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.domino-labels span.domino-score i{font:700 14px/1 Georgia,'Times New Roman',serif;font-style:normal;font-variant-numeric:tabular-nums;color:#2a1a0b;background:linear-gradient(180deg,#f6dc9f,#c79a4f 55%,#a87a35);border-radius:999px;padding:4px 9px 3px}
.domino-labels span.domino-score em{position:absolute;top:-9px;left:12px;font:700 9px/1 system-ui;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#1f150e;background:#e2c27f;border-radius:999px;padding:2px 7px;box-shadow:0 2px 6px #0006}
.domino-labels span.domino-score.is-turn{border-color:#e2c27f;box-shadow:0 0 0 2px #e2c27f,0 0 22px #ffb34766,0 3px 10px #000a}
.domino-labels span.domino-score.team-0{border-left:3px solid #d8ab55}.domino-labels span.domino-score.team-1{border-left:3px solid #8fb3d9}
@media (max-width:520px),(max-height:500px){.domino-labels span.domino-score{font-size:12px;gap:6px;padding:4px 4px 4px 9px}.domino-labels span.domino-score b{max-width:84px}.domino-labels span.domino-score i{font-size:12px;padding:3px 7px 2px}}
@media (prefers-reduced-motion:reduce){.domino-labels span.domino-score{transition:none}}
@media (max-height:500px){.domino-tools{top:calc(58px + var(--kit-safe-gora,0px));gap:8px}.domino-btn--tool,.kit-hud .kit-btn[data-kit=pauza]{width:44px;height:44px;min-width:44px;min-height:44px}.domino-btn--tool svg{width:20px;height:20px}}
