:root{--pico-spacing: .4rem;--color-checked: var(--pico-primary-background);--color-unchecked: color-mix( in srgb, var(--color-checked), var(--pico-muted-color) 70% )}@font-face{font-family:Sonoma;src:url(../LTSonoma2.otf)}html,body{height:100%;margin:0;padding:0}body{display:grid;grid-template-rows:1fr auto;grid-template-areas:"_" "footer";main{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"nav _";nav{grid-area:nav;padding:1rem;display:flex;flex-direction:column}}noscript{h2{text-align:center}}footer{grid-area:footer;display:flex;justify-content:center;a{width:1rem;flex:0 0 auto}}}.chibingo-game{position:relative;transform:perspective(2000px) rotateX(4deg);.grid{position:relative;height:100%;z-index:5;tbody{position:absolute;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-around}.row{display:flex;flex-direction:row;justify-content:space-around;.cell{background-color:transparent;border:none;padding:0}}}.win-indicators{position:absolute;width:100%;height:100%;z-index:4;top:0;left:0;&.row{display:flex;flex-direction:column;justify-content:space-around}&.col{display:flex;flex-direction:row;justify-content:space-around}}}.chibingo-cell{--bottom-size-reference: .7rem;--bottom-size-2: .4rem;--shadow-clear: rgb(255, 255, 255, .12);--shadow-dark: rgb(0, 0, 0, .12);--box-shadow: .2rem;height:6.5em;width:8em!important;border-radius:2em;padding:calc(var(--box-shadow) + .1em);text-align:center;align-content:center;font-family:Sonoma,sans-serif;user-select:none;color:var(--pico-background-color);text-shadow:-1px -1px 1px var(--shadow-clear),1px 1px 1px var(--shadow-dark);background:var(--color) none;transition:all .1s linear;&:not(:has(input:checked)){--color: var(--color-unchecked);--bottom-size: var(--bottom-size-reference)}&:has(input:checked){--color: var(--color-checked);--bottom-size: var(--bottom-size-2)}&:has(input:active){--bottom-size: 0em}input{display:none}margin-top:calc(var(--bottom-size-reference) - var(--bottom-size));margin-bottom:var(--bottom-size);box-shadow:color-mix(in srgb,var(--color),black 30%) 0 var(--bottom-size) 0 0,inset var(--shadow-clear) var(--box-shadow) var(--box-shadow) var(--box-shadow) var(--box-shadow),inset var(--shadow-dark) calc(0rem - var(--box-shadow)) calc(0rem - var(--box-shadow)) var(--box-shadow) var(--box-shadow)}.chibingo-win-indicator{display:block;height:100%;width:100%;opacity:.5;&[data-checked=true]{--color: var(--color-checked)}&[data-checked=false]{--color: var(--color-unchecked)}--plain-width: .3em;--blur-width: .1em;--total-width: calc(var(--plain-width) + var(--blur-width));--begin-blur: calc(50% - var(--total-width));--begin-plain: calc(50% - var(--plain-width));--end-plain: calc(50% + var(--plain-width));--end-blur: calc(50% + var(--total-width));--gradiant: transparent var(--begin-blur), var(--color) var(--begin-plain), var(--color) var(--end-plain), transparent var(--end-blur);&.row{background:linear-gradient(to top,var(--gradiant))}&.column{background:linear-gradient(to left,var(--gradiant))}&.diagonal-asc{background:linear-gradient(to top left,var(--gradiant))}&.diagonal-desc{background:linear-gradient(to bottom left,var(--gradiant))}}