board-view{display:grid;grid-template-columns:repeat(9,1fr);width:100%;aspect-ratio:1;background:var(--color-surface-container-lowest);border:var(--frame-width) solid var(--frame-color);box-shadow:6px 6px 0 var(--shadow-ink);overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none}board-cell{position:relative;display:grid;place-items:center;border-right:var(--line-thin) solid var(--color-outline-variant);border-bottom:var(--line-thin) solid var(--color-outline-variant);cursor:pointer;transition:background-color .15s var(--ease-emphasized)}board-cell[col="8"]{border-right:none}board-cell[row="8"]{border-bottom:none}board-cell[col="2"],board-cell[col="5"]{border-right:var(--box-line-width) solid var(--color-outline)}board-cell[row="2"],board-cell[row="5"]{border-bottom:var(--box-line-width) solid var(--color-outline)}board-cell[row="0"]{--cell-row: 0}board-cell[row="1"]{--cell-row: 1}board-cell[row="2"]{--cell-row: 2}board-cell[row="3"]{--cell-row: 3}board-cell[row="4"]{--cell-row: 4}board-cell[row="5"]{--cell-row: 5}board-cell[row="6"]{--cell-row: 6}board-cell[row="7"]{--cell-row: 7}board-cell[row="8"]{--cell-row: 8}board-cell[col="0"]{--cell-col: 0}board-cell[col="1"]{--cell-col: 1}board-cell[col="2"]{--cell-col: 2}board-cell[col="3"]{--cell-col: 3}board-cell[col="4"]{--cell-col: 4}board-cell[col="5"]{--cell-col: 5}board-cell[col="6"]{--cell-col: 6}board-cell[col="7"]{--cell-col: 7}board-cell[col="8"]{--cell-col: 8}board-cell[highlight=peer]{background:color-mix(in srgb,var(--color-primary) 6%,var(--color-surface-container-lowest))}board-cell[highlight=same]{background:color-mix(in srgb,var(--color-primary) 18%,var(--color-surface-container-lowest))}board-cell[selected=true]{background:var(--color-tertiary-container);box-shadow:inset 0 0 0 2px var(--color-on-tertiary-container)}board-cell[wrong=true]{background:var(--color-error-container)}cell-value{font-family:var(--font-serif);font-size:6.2cqw;font-weight:560;font-style:italic;color:var(--color-primary);line-height:1}board-cell[given=true] cell-value{font-weight:600;font-style:normal;color:var(--color-on-surface)}board-cell[highlight=same] cell-value{font-weight:700}board-cell[selected=true] cell-value{color:var(--color-on-tertiary-container)}board-cell[wrong=true] cell-value{color:var(--color-on-error-container)}cell-notes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center;padding:7%;pointer-events:none}note-digit{font-family:var(--font-sans);font-size:2.4cqw;font-weight:600;color:var(--color-on-surface-variant);line-height:1;opacity:0;transform:scale(.4);transition:opacity .18s var(--ease-emphasized),transform .25s var(--ease-spring)}note-digit[on=true]{opacity:1;transform:none}board-view[concealed=true] cell-value,board-view[concealed=true] cell-notes{opacity:0}@keyframes cell-in{0%{opacity:0;transform:scale(.55)}}board-view[dealing=true] board-cell{animation:cell-in .42s var(--ease-spring) backwards;animation-delay:calc((var(--cell-row) + var(--cell-col)) * 26ms)}@keyframes value-pop{0%{transform:scale(.3)}60%{transform:scale(1.25)}to{transform:scale(1)}}board-cell[pop=true] cell-value{animation:value-pop .3s var(--ease-emphasized)}@keyframes cell-shake{0%,to{transform:translate(0)}20%{transform:translate(-13%)}40%{transform:translate(11%)}60%{transform:translate(-7%)}80%{transform:translate(4%)}}board-cell[flash=conflict]{animation:cell-shake .45s var(--ease-emphasized)}@keyframes unit-glow{0%,to{box-shadow:inset 0 0 0 0 transparent}45%{background-color:var(--color-tertiary-container);box-shadow:inset 0 0 0 2px var(--color-on-tertiary-container);transform:scale(.94)}}board-cell[flash=unit]{animation:unit-glow .55s var(--ease-emphasized);animation-delay:calc((var(--cell-row) + var(--cell-col)) * 14ms)}@keyframes win-wave{0%,to{transform:scale(1)}40%{background-color:var(--color-tertiary-container);transform:scale(.85)}70%{transform:scale(1.05)}}board-cell[flash=win]{animation:win-wave .9s var(--ease-emphasized);animation-delay:calc((var(--cell-row) + var(--cell-col)) * 32ms)}
