/* Tablić: a card table in the site's Ćilim tokens. The table is a woven indigo cloth, cards are cream with madder red
   hearts and diamonds, point cards carry a saffron dot, the cards an option would take are outlined in saffron. */
.tb-page{padding-bottom:40px}
.tb-head{padding:26px 0 6px;text-align:center}
.tb-head h1{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.03em;color:var(--indigo);margin-top:10px}
.tb-head p{margin:10px auto 0;max-width:640px;color:var(--ink-2);font-size:17px}
.tb-head .crumbs{justify-content:center}
.tb{--cw:min(84px,calc((100cqi - 28px - 5 * 8px) / 6));--ch:calc(var(--cw) * 1.4);max-width:720px;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}
.tb::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--zig)}
.tb-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:6px;text-align:center}
.tb-score>div>span{display:block;font-size:14px;color:var(--ink-2)}
.tb-score>div>b{display:block;font:800 30px/1.1 var(--display);color:var(--indigo)}
.tb-sc-mid{font-size:14px;color:var(--ink-2);line-height:1.5}
.tb-sc-mid b{font:700 15px/1 var(--display);color:var(--indigo);margin-inline:2px}
.tb-opp{display:flex;justify-content:center;gap:4px;min-height:calc(var(--ch) * .5);margin-top:12px}
.tb-opp .tb-card{width:calc(var(--cw) * .5);height:calc(var(--ch) * .5)}
.tb-table{list-style:none;margin:12px 0 0;padding:14px 10px;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px;min-height:calc(var(--ch) + 28px);background:var(--lattice-light),var(--indigo);box-shadow:inset 0 0 0 4px var(--indigo-deep)}
.tb-empty{display:grid;place-items:center;min-height:var(--ch);color:var(--mist);font-size:16px}
.tb-card{position:relative;flex:none;width:var(--cw);height:var(--ch);border-radius:6px;border:1px solid var(--rim);background:#fffaf0;color:var(--ink);box-shadow:0 1px 2px rgba(42,28,20,.25);padding:0;margin:0;font:inherit;text-align:start}
.tb-card.is-red{color:var(--red)}
.tb-corner{position:absolute;left:6%;top:4%;display:flex;align-items:baseline;gap:1px;font:700 calc(var(--cw) * .3)/1 var(--display);letter-spacing:-.04em}
.tb-corner i{font:400 calc(var(--cw) * .26)/1 var(--text);font-style:normal}
.tb-mid{position:absolute;right:8%;bottom:6%;font-size:calc(var(--cw) * .5);line-height:1}
.tb-pt{position:absolute;right:7%;top:5%;font-size:calc(var(--cw) * .2);line-height:1;color:var(--saffron);text-shadow:0 0 1px var(--ink)}
.tb-card.is-down{background:var(--lattice-light),var(--red);border-color:var(--red-deep);box-shadow:inset 0 0 0 3px var(--cream)}
.tb-card.is-take{box-shadow:0 0 0 4px var(--saffron);transform:translateY(-3px)}
.tb-card.is-played{box-shadow:0 0 0 4px var(--olive),0 6px 14px rgba(0,0,0,.35);transform:translateY(-4px)}
.tb-status{min-height:44px;margin-top:12px;display:grid;place-items:center;text-align:center;font-size:16px;color:var(--ink-2)}
.tb-log{min-height:22px;text-align:center;font-size:15px;color:var(--ink-3)}
.tb-options{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
.tb-options[hidden]{display:none}
.tb-opts-head{flex-basis:100%;text-align:center;font-weight:600;color:var(--indigo)}
.tb-opt{min-height:48px;padding:6px 14px;border:2px solid var(--indigo);background:transparent;color:var(--indigo);font:600 16px/1.2 var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center}
.tb-opt small{font-size:13px;font-weight:500;color:var(--ink-2)}
.tb-opt.is-best{background:var(--indigo);color:var(--cream)}
.tb-opt.is-best small{color:var(--mist)}
.tb-opt--drop{border-style:dashed}
.tb-hand{display:flex;justify-content:center;gap:8px;margin-top:14px;min-height:var(--ch)}
.tb-hand .tb-card{cursor:pointer;touch-action:manipulation;transition:transform .15s}
.tb-hand .tb-card:not(:disabled):hover{transform:translateY(-4px)}
.tb-hand .tb-card[aria-pressed="true"]{transform:translateY(-10px);box-shadow:0 0 0 4px var(--saffron),0 6px 12px rgba(42,28,20,.3)}
.tb-hand .tb-card:disabled{cursor:default}
.tb.is-cpu .tb-hand .tb-card{opacity:.75}
.tb-card:focus-visible,.tb-opt:focus-visible,.tb-tool:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.tb-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:16px;padding-top:14px;border-top:2px solid var(--rim-soft)}
.tb-foot p{font-size:15px;color:var(--ink-2);line-height:1.7}
.tb-foot b{font:700 16px/1 var(--display);color:var(--indigo);margin-inline:3px}
.tb-tool{min-height:44px;padding:0 16px;border:2px solid var(--indigo);background:transparent;color:var(--indigo);font:600 15px/1 var(--text);cursor:pointer}
.tb-noscript{margin-top:12px;padding:12px;background:var(--wool)}
.tb.is-loading .tb-table,.tb.is-loading .tb-hand{opacity:.6}

.tb-info{max-inline-size:880px;margin:34px auto 0}
.tb-info h2{font-size:clamp(22px,2.6vw,30px);color:var(--indigo);margin-top:30px}
.tb-info h2:first-child{margin-top:0}
.tb-info p,.tb-info li{margin-top:12px;color:var(--ink-2);font-size:17px;line-height:1.6}
.tb-info ul{padding-inline-start:22px}
.tb-info table{margin-top:14px;border-collapse:collapse;width:100%;max-width:560px}
.tb-info th,.tb-info td{padding:10px 12px;border-bottom:1px solid var(--rim-soft);text-align:start;font-size:16px}
.tb-info td{color:var(--ink-2)}

.tb-dialog{max-width:min(460px,calc(100vw - 32px));padding:28px 22px 22px;border:0;background:var(--card);color:var(--ink);box-shadow:0 18px 40px rgba(42,28,20,.35);text-align:center}
.tb-dialog::backdrop{background:rgba(26,39,71,.55)}
.tb-dialog h2{font-size:24px;color:var(--indigo)}
.tb-dialog p{margin-top:10px;color:var(--ink-2)}
.tb-x{position:absolute;right:6px;top:6px;width:44px;height:44px;border:0;background:transparent;font-size:28px;color:var(--ink-2);cursor:pointer}
.tb-sum{width:100%;margin-top:14px;border-collapse:collapse;font-size:15px}
.tb-sum th,.tb-sum td{padding:7px 8px;border-bottom:1px solid var(--rim-soft)}
.tb-sum th{text-align:start;font-weight:500;color:var(--ink-2)}
.tb-sum thead th{font-weight:700;color:var(--indigo);text-align:center}
.tb-sum thead th:first-child{text-align:start}
.tb-sum td{text-align:center;font:700 16px/1 var(--display);color:var(--indigo)}
.tb-sum tr.is-sum th{font-weight:700;color:var(--ink)}
.tb-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.tb-actions .btn{min-height:48px;padding:0 24px;font-size:14px}

@media (max-width:600px){.tb{--cw:min(84px,calc((100cqi - 8px - 5 * 5px) / 6));margin-inline:calc(-1 * var(--gutter));padding-inline:4px}.tb-hand{gap:5px}.tb-table{gap:5px;padding-inline:6px}.tb-page{padding-bottom:110px}.tb-head{padding-top:6px}.tb-head .kicker{display:none}.tb-foot{padding-inline:8px}}
@media (prefers-reduced-motion:reduce){.tb-card,.tb-hand .tb-card{transition:none}}