/* Pasijans karte: a Klondike table in the site's Ćilim tokens. Card faces are cream with madder red hearts and diamonds,
   the backs indigo with the light lattice, the chosen card saffron and the places that can take it olive. */
.pk-page{padding-bottom:40px}
.pk-head{padding:26px 0 6px;text-align:center}
.pk-head h1{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.03em;color:var(--indigo);margin-top:10px}
.pk-head p{margin:10px auto 0;max-width:640px;color:var(--ink-2);font-size:17px}
.pk-head .crumbs{justify-content:center}
.pk{max-width:860px;margin:14px auto 0;padding:22px 14px 18px;background:var(--card);box-shadow:inset 0 0 0 2px var(--rim-soft);position:relative;container-type:inline-size}
.pk::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--zig)}
.pk-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;margin-top:6px}
.pk-draw{display:flex;align-items:center;gap:6px;font-size:15px;color:var(--ink-2)}
.pk-draw button,.pk-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}
.pk-draw button[aria-pressed="true"]{background:var(--indigo);color:var(--cream)}
.pk-tool:disabled{opacity:.45;cursor:default}
.pk-tool[hidden]{display:none}
.pk-tool--finish{border-color:var(--olive);background:var(--olive);color:var(--cream)}
.pk-meta{display:flex;gap:14px;font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pk-meta b{font:700 17px/1 var(--display);color:var(--indigo);margin-inline-start:4px}

.pk-table{--gap:8px;--cw:min(104px,calc((100cqi - 28px - 6 * var(--gap)) / 7));--ch:calc(var(--cw) * 1.4);margin-top:16px;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.pk-top,.pk-cols{display:grid;grid-template-columns:repeat(7,var(--cw));column-gap:var(--gap);justify-content:center}
.pk-top{height:var(--ch)}
.pk-cols{margin-top:calc(var(--gap) * 2 + 6px);min-height:calc(var(--ch) * 2.2)}
.pk-pile{position:relative;width:var(--cw);height:var(--ch)}
.pk-waste{grid-column:2 / span 2;width:auto}
.pk-col{position:relative;height:max(var(--h,var(--ch)),var(--ch))}
.pk-stock{display:block;padding:0;border:0;background:transparent;cursor:pointer;border-radius:6px}
.pk-stock.is-empty{box-shadow:inset 0 0 0 2px var(--rim);background:var(--wool)}
.pk-stock.is-empty::after{content:"↻";position:absolute;inset:0;display:grid;place-items:center;font:700 calc(var(--cw) * .42)/1 var(--display);color:var(--ink-3)}
.pk-stock:disabled{cursor:default}
.pk-stock:disabled::after{content:""}

.pk-card,.pk-slot{position:absolute;left:var(--x,0);top:var(--y,0);width:var(--cw);height:var(--ch);border-radius:6px;padding:0;margin:0;font:inherit}
.pk-card{display:block;border:1px solid var(--rim);background:#fffaf0;color:var(--ink);text-align:start;cursor:pointer;box-shadow:0 1px 2px rgba(42,28,20,.22);touch-action:manipulation}
.pk-card.is-red{color:var(--red)}
.pk-corner{position:absolute;left:5%;top:3%;display:flex;align-items:baseline;gap:1px;font:700 calc(var(--cw) * .3)/1 var(--display);letter-spacing:-.04em}
.pk-corner i{font:400 calc(var(--cw) * .26)/1 var(--text);font-style:normal}
.pk-mid{position:absolute;right:8%;bottom:6%;font-size:calc(var(--cw) * .52);line-height:1}
.pk-card.is-down{background:var(--lattice-light),var(--indigo);border:1px solid var(--indigo-deep);box-shadow:inset 0 0 0 3px var(--cream),0 1px 2px rgba(42,28,20,.22);cursor:default}
.pk-stock .pk-card.is-down{cursor:pointer}
.pk-card.is-under{cursor:default}
.pk-slot{display:grid;place-items:center;border:2px dashed var(--rim);background:transparent;color:var(--ink-3);font:700 calc(var(--cw) * .42)/1 var(--display);cursor:pointer}
.pk-slot--col{font-size:calc(var(--cw) * .3);opacity:.85}
.pk-card.is-sel{box-shadow:0 0 0 3px var(--saffron),0 2px 6px rgba(42,28,20,.3);z-index:2}
.pk-card.is-hint{box-shadow:0 0 0 3px var(--saffron),0 2px 6px rgba(42,28,20,.3)}
.pk-card.is-target,.pk-slot.is-target{box-shadow:0 0 0 3px var(--olive);animation:pk-pulse 1s ease-in-out infinite alternate}
.pk-slot.is-target{border-color:var(--olive);color:var(--olive)}
.pk-stock.is-hint{box-shadow:0 0 0 3px var(--saffron)}
.pk-card.is-drag{z-index:20;pointer-events:none;box-shadow:0 8px 18px rgba(42,28,20,.35);cursor:grabbing}
.pk-card.is-ghost{pointer-events:none}
.pk-card:focus-visible,.pk-slot:focus-visible,.pk-stock:focus-visible,.pk-draw button:focus-visible,.pk-tool:focus-visible{outline:3px solid var(--red);outline-offset:2px;z-index:3}
@keyframes pk-pulse{to{box-shadow:0 0 0 5px var(--olive)}}
.pk.is-loading .pk-table{opacity:.6}

.pk-status{min-height:48px;margin-top:14px;display:grid;place-items:center;text-align:center;font-size:16px;color:var(--ink-2)}
.pk-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:8px;padding-top:14px;border-top:2px solid var(--rim-soft)}
.pk-foot p{font-size:15px;color:var(--ink-2)}
.pk-foot b{font:700 17px/1 var(--display);color:var(--indigo);margin-inline:4px}
.pk-foot div{display:flex;flex-wrap:wrap;gap:8px}
.pk-noscript{margin-top:12px;padding:12px;background:var(--wool)}

.pk-info{max-inline-size:880px;margin:34px auto 0}
.pk-info h2{font-size:clamp(22px,2.6vw,30px);color:var(--indigo);margin-top:30px}
.pk-info h2:first-child{margin-top:0}
.pk-info p,.pk-info li{margin-top:12px;color:var(--ink-2);font-size:17px;line-height:1.6}
.pk-info ul{padding-inline-start:22px}

.pk-dialog{max-width:min(440px,calc(100vw - 32px));padding:28px 24px 24px;border:0;background:var(--card);color:var(--ink);box-shadow:0 18px 40px rgba(42,28,20,.35);text-align:center}
.pk-dialog::backdrop{background:rgba(26,39,71,.55)}
.pk-dialog h2{font-size:24px;color:var(--indigo)}
.pk-dialog p{margin-top:10px;color:var(--ink-2)}
.pk-x{position:absolute;right:6px;top:6px;width:44px;height:44px;border:0;background:transparent;font-size:28px;color:var(--ink-2);cursor:pointer}
.pk-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.pk-nums b{display:block;font:800 26px/1.1 var(--display);color:var(--indigo)}
.pk-nums span{font-size:14px;color:var(--ink-2)}
.pk-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.pk-actions .btn{min-height:48px;padding:0 24px;font-size:14px}

@media (max-width:600px){.pk{margin-inline:calc(-1 * var(--gutter));padding-inline:4px}.pk-table{--gap:4px;--cw:min(104px,calc((100cqi - 8px - 6 * var(--gap)) / 7))}.pk-corner{left:4%}.pk-page{padding-bottom:110px}.pk-head{padding-top:6px}.pk-head .kicker{display:none}.pk-foot{padding-inline:8px}}
@media (prefers-reduced-motion:reduce){.pk-card.is-target,.pk-slot.is-target{animation:none}}