/* Shared functional card geometry. Tableau geometry and game rules are untouched. */
:root{--function-card-width:84px;--function-card-height:calc(84px * 61 / 39);--function-gap:8px}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt :is(.table-top,.kl-top,.ft-top,.fc-top,.ss-top,.dk-top,.ds-top,.au-top,.ap-top,.bd-top,.dy-top,.eo-top,.fg-top,.rg-top,#ft-foundations,[id$="-board"]>.rg-slots){--ludicera-card-width:var(--function-card-width);--ludicera-card-height:var(--function-card-height);--ludicera-card-gap:var(--function-gap)}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt :is(.table-top,.kl-top,.ft-top,.fc-top,.ss-top,.dk-top,.ds-top,.au-top,.ap-top,.bd-top,.dy-top,.eo-top,.fg-top,.rg-top,#ft-foundations,[id$="-board"]>.rg-slots) :is(.foundation,.kl-slot,.ft-slot,.fc-slot,.ss-slot,.dk-slot,.ds-slot,.ng-slot,.x-slot,.rg-slot,.playing-card){box-sizing:border-box!important;width:var(--function-card-width)!important;min-width:var(--function-card-width)!important;max-width:var(--function-card-width)!important;height:var(--function-card-height)!important;min-height:var(--function-card-height)!important;max-height:var(--function-card-height)!important;aspect-ratio:39/61!important;flex:0 0 var(--function-card-width)!important;padding:0!important;margin-top:0!important;margin-bottom:0!important}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt :is(.table-top,.kl-top,.ft-top,.fc-top,.ss-top,.dk-top,.ds-top,.au-top,.ap-top,.bd-top,.dy-top,.eo-top,.fg-top,.rg-top,#ft-foundations,[id$="-board"]>.rg-slots) :is(.foundation,.kl-slot,.ft-slot,.fc-slot,.ss-slot,.dk-slot,.ds-slot,.ng-slot,.x-slot,.rg-slot)>.playing-card{position:absolute!important;top:-1px!important;left:-1px!important;right:auto!important;bottom:auto!important;margin:0!important}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt :is(.table-top,.kl-top,.ft-top,.fc-top,.ss-top,.dk-top,.ds-top,.au-top,.ap-top,.bd-top,.dy-top,.eo-top,.fg-top,.rg-top){display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px var(--function-gap)!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0 0 20px!important}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt :is(.table-top,.kl-top,.ft-top,.fc-top,.ss-top,.dk-top,.ds-top,.au-top,.ap-top,.bd-top,.dy-top,.eo-top,.fg-top,.rg-top)>div{min-width:0!important;max-width:100%!important;flex-shrink:1!important}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt :is(#foundations,#kl-foundations,#ft-foundations,#fc-cells,#fc-foundations,#ss-foundations,#dk-foundations,#ds-foundations,.ng-foundations,.x-foundations,#eo-cells,#fg-reserve,.rg-slots){display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;justify-content:flex-start!important;gap:var(--function-gap)!important;grid-column:auto!important;width:max-content!important;min-width:0!important;max-width:100%!important;grid-template-rows:none!important;margin-left:0!important;margin-right:0!important}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt :is(.ss-top,.ds-top,.bd-top,.dy-top){justify-content:flex-end!important}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt :is(.au-top,.ap-top,.kl-top,.dk-top,.ft-top){justify-content:flex-start!important}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt :is(#ap-foundations,#kl-foundations,#dk-foundations){margin-left:auto!important}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt .table-top>div:last-child{width:auto!important;max-width:100%!important}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt #stock{min-height:var(--function-card-height)!important;padding-right:0!important}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt #stock .playing-card{margin-right:calc(var(--function-card-width) * -.55)!important}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt #stock .playing-card:last-child{margin-right:0!important}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt #fg-reserve{max-width:calc(var(--function-card-width) * 8 + var(--function-gap) * 7)!important}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt :is(.table-top,.kl-top,.ft-top,.fc-top,.ss-top,.dk-top,.ds-top,.au-top,.ap-top,.bd-top,.dy-top,.eo-top,.fg-top,.rg-top,#ft-foundations,[id$="-board"]>.rg-slots) #ft-waste{flex:1 1 0%!important;width:0!important;min-width:var(--function-card-width)!important;max-width:none!important;height:calc(var(--function-card-height) + 12px)!important;min-height:calc(var(--function-card-height) + 12px)!important;max-height:calc(var(--function-card-height) + 12px)!important;aspect-ratio:auto!important}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt :is(.table-top,.kl-top,.ft-top,.fc-top,.ss-top,.dk-top,.ds-top,.au-top,.ap-top,.bd-top,.dy-top,.eo-top,.fg-top,.rg-top,#ft-foundations,[id$="-board"]>.rg-slots) #ft-waste .playing-card{position:relative!important;inset:auto!important}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt :is(.table-top,.kl-top,.ft-top,.fc-top,.ss-top,.dk-top,.ds-top,.au-top,.ap-top,.bd-top,.dy-top,.eo-top,.fg-top,.rg-top,#ft-foundations,[id$="-board"]>.rg-slots) #ft-waste .playing-card+.playing-card{margin-left:calc(18px - var(--function-card-width))!important}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt #ft-foundations{margin:14px auto 0!important}
/* Allow an extra functional row to occupy real space rather than cover the tableau. */
html body :is(#table,#kl-table,#ft-table,.table-view) .felt{height:auto!important;grid-template-rows:auto minmax(350px,auto) auto!important;overflow:visible!important}
html body #ft-table .felt{grid-template-rows:auto minmax(350px,auto) auto auto!important}
@media(max-width:1000px){:root{--function-gap:4px}}
@media(max-width:700px),(max-width:1000px) and (max-height:500px){
 :root{--function-card-width:50px;--function-card-height:calc(50px * 61 / 39);--function-gap:4px}
 html body :is(#table,#kl-table,#ft-table,.table-view) .felt :is(.table-top,.kl-top,.ft-top,.fc-top,.ss-top,.dk-top,.ds-top,.au-top,.ap-top,.bd-top,.dy-top,.eo-top,.fg-top,.rg-top){max-width:calc(100vw - 56px)!important}
 html body :is(#table,#kl-table,#ft-table,.table-view) .felt :is(#foundations,#kl-foundations,#ft-foundations,#fc-cells,#fc-foundations,#ss-foundations,#dk-foundations,#ds-foundations,.ng-foundations,.x-foundations,#eo-cells,#fg-reserve,.rg-slots){max-width:100%!important}
 html body :is(#table,#kl-table,#ft-table,.table-view) .felt :is(.table-top,.kl-top,.ft-top,.fc-top,.ss-top,.dk-top,.ds-top,.au-top,.ap-top,.bd-top,.dy-top,.eo-top,.fg-top,.rg-top,#ft-foundations,[id$="-board"]>.rg-slots) :is(.foundation,.kl-slot,.ft-slot,.fc-slot,.ss-slot,.dk-slot,.ds-slot,.ng-slot,.x-slot,.rg-slot){font-size:10px!important}
 html body :is(#table,#kl-table,#ft-table,.table-view) .felt{grid-template-rows:auto minmax(270px,auto) auto!important}
 html body #ft-table .felt{grid-template-rows:auto minmax(270px,auto) auto auto!important}
}

/* Bound function groups to the visible table, even when a wide tableau scrolls. */
html body :is(#table,#kl-table,#ft-table,.table-view) .table-scroll{container-type:inline-size}
html body :is(#table,#kl-table,#ft-table,.table-view) .felt :is(.table-top,.kl-top,.ft-top,.fc-top,.ss-top,.dk-top,.ds-top,.au-top,.ap-top,.bd-top,.dy-top,.eo-top,.fg-top,.rg-top,#ft-foundations,[id$="-board"]>.rg-slots){max-width:calc(100cqw - 52px)!important}
@media(max-width:700px),(max-width:1000px) and (max-height:500px){
 html body :is(#table,#kl-table,#ft-table,.table-view) .felt :is(.table-top,.kl-top,.ft-top,.fc-top,.ss-top,.dk-top,.ds-top,.au-top,.ap-top,.bd-top,.dy-top,.eo-top,.fg-top,.rg-top,#ft-foundations,[id$="-board"]>.rg-slots){max-width:calc(100cqw - 16px)!important}
}