/* Paukov pasijans: ten columns of cards on a woven table in the site's Ćilim tokens. Closed cards are indigo
   lattice, open cards cream with the suit in ink or madder red, a picked or hinted run wears a saffron frame. */
.pp-page{padding-bottom:40px}
.pp-head{padding:26px 0 6px;text-align:center}
.pp-head h1{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.03em;color:var(--indigo);margin-top:10px}
.pp-head p{margin:10px auto 0;max-width:660px;color:var(--ink-2);font-size:17px}
.pp-head .crumbs{justify-content:center}
.pp{max-width:1020px;margin:14px auto 0;padding:20px 14px 18px;background:var(--card);box-shadow:inset 0 0 0 2px var(--rim-soft);position:relative}
.pp::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--zig)}
.pp-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.pp-suits{display:flex;flex-wrap:wrap;gap:6px}
.pp-suits button,.pp-tool{min-height:44px;padding:0 14px;border:2px solid var(--indigo);background:transparent;color:var(--indigo);font:600 15px/1 var(--text);cursor:pointer;touch-action:manipulation}
.pp-suits button[aria-pressed="true"]{background:var(--indigo);color:var(--cream)}
.pp-tool:disabled{opacity:.45;cursor:default}
.pp-sound[aria-pressed="false"]{border-style:dashed;color:var(--ink-2)}
.pp-top{display:flex;align-items:center;gap:12px;margin-top:14px}
.pp-stock{position:relative;flex:none;inline-size:58px;block-size:66px;border:0;padding:0;background:var(--lattice-light),var(--indigo);box-shadow:inset 0 0 0 3px var(--cream),0 0 0 2px var(--indigo),4px 4px 0 var(--indigo-2),8px 8px 0 var(--indigo-deep);color:var(--cream);font:800 22px/1 var(--display);cursor:pointer;touch-action:manipulation}
.pp-stock[data-left="1"],.pp-stock[data-left="2"]{box-shadow:inset 0 0 0 3px var(--cream),0 0 0 2px var(--indigo),4px 4px 0 var(--indigo-2)}
.pp-stock:disabled{background:transparent;box-shadow:inset 0 0 0 2px var(--rim);color:var(--ink-3);cursor:default}
.pp-stock small{display:block;margin-top:4px;font:600 11px/1 var(--text);text-transform:uppercase;letter-spacing:.04em}
.pp-done{display:flex;flex-wrap:wrap;gap:4px;flex:1}
.pp-pile{display:grid;place-items:center;inline-size:26px;block-size:34px;border:2px dashed var(--rim);font-size:18px;color:var(--ink)}
.pp-pile.is-full{border:0;background:var(--cream);box-shadow:inset 0 0 0 2px var(--indigo)}
.pp-pile.is-red{color:var(--red)}
.pp-nums{display:flex;gap:16px;flex:none;text-align:end;font-size:13px;color:var(--ink-2)}
.pp-nums b{display:block;font:800 22px/1.1 var(--display);color:var(--indigo);font-variant-numeric:tabular-nums}
.pp-board{--gap:clamp(3px,1vw,10px);display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:var(--gap);margin-top:16px;padding:10px var(--gap);background:var(--lattice-light),var(--olive);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.pp-col{position:relative;min-block-size:calc(var(--cw,60px) * 1.4);border-radius:6px}
.pp-col.is-over{box-shadow:0 0 0 3px var(--saffron)}
.pp-col.is-hint .pp-slot,.pp-col.is-hint>.pp-card:last-child{box-shadow:0 0 0 3px var(--saffron),0 0 0 6px var(--red)}
/* The site gives every button 44 px minimums; ten columns on a phone cannot, so cards and slots size to their column. */
.pp-card,.pp-slot{min-width:0;min-height:0}
.pp-slot{position:absolute;inset:0 0 auto;inline-size:100%;aspect-ratio:5/7;border:2px dashed rgba(247,236,217,.55);border-radius:6px;background:transparent;padding:0;cursor:pointer}
.pp-slot[aria-hidden="true"]{visibility:hidden}
.pp-card{position:absolute;inset-inline:0;inline-size:100%;aspect-ratio:5/7;display:block;padding:0;border:1px solid var(--rim);border-radius:6px;background:var(--cream);color:var(--ink);font:700 clamp(12px,calc(var(--cw,60px) * .34),21px)/1 var(--text);text-align:start;cursor:grab;touch-action:none;box-shadow:0 1px 2px rgba(42,28,20,.25)}
.pp-card.is-red{color:var(--red)}
.pp-card.is-stuck{cursor:default}
.pp-card.is-down{background:var(--lattice-light),var(--indigo);border-color:var(--indigo-deep);box-shadow:inset 0 0 0 2px rgba(247,236,217,.35)}
.pp-r{position:absolute;inset-block-start:2px;inset-inline-start:3px;letter-spacing:-.04em}
.pp-s{position:absolute;inset-block-start:2px;inset-inline-end:3px;font-size:.9em}
.pp-big{position:absolute;inset:0;display:grid;place-items:center;padding-top:42%;font-size:calc(var(--cw,60px) * .5);opacity:.9}
.pp-card.is-picked,.pp-card.is-hint{background:#fff3cf;box-shadow:inset 0 0 0 3px var(--saffron)}
.pp-card.is-lifted{opacity:.25}
.pp-card:focus-visible,.pp-slot:focus-visible{outline:3px solid var(--red);outline-offset:1px;z-index:2}
.pp-card.is-bump{animation:pp-bump .3s}
.pp-card.is-dealt{animation:pp-deal .28s ease-out}
.pp-stock.is-bump{animation:pp-bump .3s}
.pp-stock.is-hint{outline:4px solid var(--saffron);outline-offset:4px}
@keyframes pp-bump{25%{translate:-4px 0}75%{translate:4px 0}}
@keyframes pp-deal{from{translate:0 -24px;opacity:0}}
.pp-ghost{position:fixed;z-index:60;pointer-events:none}
.pp-ghost .pp-card{box-shadow:0 10px 20px -6px rgba(42,28,20,.55)}
.pp-status{min-height:48px;margin-top:12px;display:grid;place-items:center;font-size:16px;color:var(--ink-2);text-align:center}
.pp-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px}
.pp-actions .btn{margin-top:0;min-height:48px;padding:0 24px;font-size:14px}
.pp:focus-within .pp-board:has(:focus-visible){outline:0}
.pp-suits button:focus-visible,.pp-tool:focus-visible,.pp-stock:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.pp-keys{margin-top:12px;font-size:14px;color:var(--ink-3);text-align:center}
.pp-keys kbd{padding:1px 6px;border:1px solid var(--rim);background:var(--cream);font:600 13px/1.4 var(--text)}
.pp-noscript{margin-top:12px;padding:12px;background:var(--wool);text-align:center}
.pp-dialog{max-inline-size:min(440px,calc(100vw - 32px));inline-size:100%;padding:26px 22px 22px;border:0;background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 2px var(--rim-soft),0 30px 60px -20px rgba(42,28,20,.6)}
.pp-dialog::backdrop{background:rgba(26,39,71,.55)}
.pp-dialog h2{font-size:22px;color:var(--indigo);padding-inline-end:40px}
.pp-dialog p{margin-top:10px;color:var(--ink-2);font-size:16px}
.pp-x{position:absolute;inset-block-start:10px;inset-inline-end:10px;inline-size:44px;block-size:44px;border:0;background:transparent;font-size:28px;line-height:1;color:var(--ink);cursor:pointer}
.pp-nums3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:16px;text-align:center}
.pp-nums3 b{display:block;font:800 26px/1.1 var(--display);color:var(--indigo)}
.pp-nums3 span{font-size:13px;color:var(--ink-2)}
.pp-dlg-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pp-dlg-actions .btn{margin-top:0;padding:0 24px;font-size:14px}
.pp-info{max-inline-size:880px;margin:34px auto 0}
.pp-info h2{font-size:clamp(22px,2.6vw,30px);color:var(--indigo);margin-top:30px}
.pp-info h2:first-child{margin-top:0}
.pp-info p,.pp-info li{margin-top:12px;color:var(--ink-2);font-size:17px;line-height:1.6}
.pp-info ul{padding-inline-start:22px}
.pp-info a{color:var(--red);font-weight:600}
@media (max-width:760px){
 .pp{margin-inline:calc(-1 * var(--gutter));padding:16px 4px 14px}
 .pp-bar{padding-inline:6px}
 .pp-top{padding-inline:6px;gap:10px}
 .pp-stock{inline-size:50px;block-size:58px;font-size:19px}
 .pp-pile{inline-size:20px;block-size:28px;font-size:14px}
 .pp-done{gap:3px}
 .pp-nums{gap:10px}
 .pp-nums b{font-size:18px}
 .pp-board{--gap:3px;padding:8px 3px;margin-inline:0}
 .pp-card{border-radius:4px}
 .pp-r{inset-inline-start:2px;inset-block-start:1px}
 .pp-s{display:none}
 .pp-page{padding-bottom:110px}.pp-head{padding-top:6px}.pp-head .kicker{display:none}
 .pp-keys{display:none}
}
@media (max-width:400px){.pp-suits button{padding:0 10px;font-size:14px}.pp-done{max-inline-size:96px}}
@media (prefers-reduced-motion:reduce){.pp-card,.pp-stock{animation:none!important;transition:none!important}}