.board{display:flex;gap:var(--flap-gap,.5ch);flex-direction:column;text-transform:uppercase;font-family:Roboto Mono,monospace;font-size:var(--board-font-size,2.5rem);padding:6px;background:var(--board-bg,hsl(0 0% 0%))}.board[data-theme=light]{color-scheme:light only}.board[data-theme=dark]{color-scheme:dark only}.board[data-theme=system]{color-scheme:light dark}.board-frame{--_fc:var(--frame-color,color-mix(in oklch,var(--board-bg,#000),white 12%));--_fw:var(--frame-width,0px);padding:var(--_fw);display:inline-block;position:relative;box-sizing:border-box}.board-frame--flat{background:linear-gradient(180deg,color-mix(in oklch,var(--_fc),white 4%) 0,var(--_fc) 8%,var(--_fc) 92%,color-mix(in oklch,var(--_fc),black 6%) 100%);box-shadow:inset 0 1px 0 color-mix(in oklch,var(--_fc),white 8%),inset 0 -1px 0 color-mix(in oklch,var(--_fc),black 12%),0 1px 4px rgba(0,0,0,.2)}.board-frame--beveled{background:linear-gradient(180deg,color-mix(in oklch,var(--_fc),white 28%) 0,color-mix(in oklch,var(--_fc),white 12%) 35%,var(--_fc) 50%,color-mix(in oklch,var(--_fc),black 15%) 70%,color-mix(in oklch,var(--_fc),black 30%) 100%);border-style:solid;border-width:calc(var(--_fw) * .15);border-color:color-mix(in oklch,var(--_fc),white 40%) color-mix(in oklch,var(--_fc),black 30%) color-mix(in oklch,var(--_fc),black 45%) color-mix(in oklch,var(--_fc),white 25%);box-shadow:inset 1px 1px 0 color-mix(in oklch,var(--_fc),white 50%),inset 0 0 calc(var(--_fw) * .4) rgba(0,0,0,.3),0 4px 20px rgba(0,0,0,.4),0 1px 4px rgba(0,0,0,.3)}.board-frame--shadow{background:linear-gradient(180deg,color-mix(in oklch,var(--_fc),white 6%) 0,var(--_fc) 15%,var(--_fc) 100%);box-shadow:inset 0 calc(var(--_fw) * .25) calc(var(--_fw) * .6) rgba(0,0,0,.65),inset 0 calc(var(--_fw) * .08) calc(var(--_fw) * .15) rgba(0,0,0,.5),inset calc(var(--_fw) * .08) 0 calc(var(--_fw) * .3) rgba(0,0,0,.2),inset calc(var(--_fw) * -.05) 0 calc(var(--_fw) * .2) rgba(0,0,0,.15),inset 0 -1px 0 color-mix(in oklch,var(--_fc),white 8%),0 4px 16px rgba(0,0,0,.4)}.board-frame--glow{background:radial-gradient(ellipse at 50% 0,color-mix(in oklch,var(--_fc),white 10%) 0,color-mix(in oklch,var(--_fc),black 50%) 40%,color-mix(in oklch,var(--_fc),black 80%) 100%);border:1px solid color-mix(in oklch,var(--_fc),white 25%);box-shadow:inset 0 0 calc(var(--_fw) * .5) color-mix(in oklch,var(--_fc),transparent 20%),inset 0 0 calc(var(--_fw) * .15) var(--_fc),0 0 calc(var(--_fw) * .3) var(--_fc),0 0 calc(var(--_fw) * 1) var(--_fc),0 0 calc(var(--_fw) * 2.5) color-mix(in oklch,var(--_fc),transparent 30%),0 0 calc(var(--_fw) * 5) color-mix(in oklch,var(--_fc),transparent 60%),0 0 calc(var(--_fw) * 8) color-mix(in oklch,var(--_fc),transparent 85%)}.board-frame--wood{background:repeating-linear-gradient(87deg,transparent 0,rgba(0,0,0,.06) .5px,transparent 1px,transparent 2px,rgba(0,0,0,.03) 2.5px,transparent 3px,transparent 5px,rgba(0,0,0,.08) 5.5px,transparent 6px,transparent 9px,rgba(0,0,0,.04) 9.5px,transparent 10px),repeating-linear-gradient(89deg,transparent 0,rgba(0,0,0,.015) 8px,transparent 16px,rgba(255,220,150,.03) 24px,transparent 32px),linear-gradient(175deg,color-mix(in oklch,var(--_fc),#d4a24a 50%) 0,color-mix(in oklch,var(--_fc),#a07828 55%) 15%,color-mix(in oklch,var(--_fc),#8B6914 60%) 35%,color-mix(in oklch,var(--_fc),#6b4e0c 60%) 55%,color-mix(in oklch,var(--_fc),#5C4400 65%) 70%,color-mix(in oklch,var(--_fc),#7a5c12 55%) 85%,color-mix(in oklch,var(--_fc),#a07828 50%) 100%);border-style:solid;border-width:calc(var(--_fw) * .12);border-color:color-mix(in oklch,var(--_fc),#d4a24a 25%) color-mix(in oklch,var(--_fc),#3a2800 50%) color-mix(in oklch,var(--_fc),#1a1000 60%) color-mix(in oklch,var(--_fc),#c49030 20%);box-shadow:inset 0 1px 0 rgba(255,230,160,.15),inset 0 2px 4px rgba(255,230,160,.06),inset 0 0 calc(var(--_fw) * .2) rgba(0,0,0,.2),0 4px 16px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3)}.board-frame--metallic{background:repeating-linear-gradient(180deg,transparent 0,rgba(255,255,255,.02) 1px,transparent 2px,rgba(0,0,0,.02) 3px,transparent 4px),linear-gradient(160deg,color-mix(in oklch,var(--_fc),#2a2a2a 35%) 0,color-mix(in oklch,var(--_fc),#6a6a6a 35%) 15%,color-mix(in oklch,var(--_fc),#aaa 30%) 30%,color-mix(in oklch,var(--_fc),#eee 25%) 40%,color-mix(in oklch,var(--_fc),#fff 20%) 43%,color-mix(in oklch,var(--_fc),#ddd 25%) 46%,color-mix(in oklch,var(--_fc),#999 30%) 55%,color-mix(in oklch,var(--_fc),#666 35%) 75%,color-mix(in oklch,var(--_fc),#2a2a2a 35%) 100%);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 1px 0 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.5),inset -1px 0 0 rgba(0,0,0,.15),inset 0 0 calc(var(--_fw) * .15) rgba(0,0,0,.15),0 3px 12px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3)}.board-frame--neon{background:radial-gradient(ellipse at 50% 0,color-mix(in oklch,var(--_fc),black 65%) 0,color-mix(in oklch,var(--_fc),black 90%) 60%,color-mix(in oklch,var(--_fc),black 95%) 100%);border:2px solid color-mix(in oklch,var(--_fc),white 20%);box-shadow:inset 0 0 2px color-mix(in oklch,var(--_fc),white 40%),inset 0 0 calc(var(--_fw) * .3) var(--_fc),inset 0 0 calc(var(--_fw) * .8) color-mix(in oklch,var(--_fc),transparent 20%),0 0 3px color-mix(in oklch,var(--_fc),white 30%),0 0 calc(var(--_fw) * .4) var(--_fc),0 0 calc(var(--_fw) * 1) var(--_fc),0 0 calc(var(--_fw) * 2) color-mix(in oklch,var(--_fc),transparent 20%),0 0 calc(var(--_fw) * 4) color-mix(in oklch,var(--_fc),transparent 50%),0 0 calc(var(--_fw) * 7) color-mix(in oklch,var(--_fc),transparent 75%),0 0 calc(var(--_fw) * 12) color-mix(in oklch,var(--_fc),transparent 90%)}.board-frame--inset{background:repeating-linear-gradient(135deg,transparent 0,rgba(0,0,0,.01) 1px,transparent 2px,rgba(255,255,255,.008) 3px,transparent 4px),linear-gradient(150deg,color-mix(in oklch,var(--_fc),black 10%) 0,var(--_fc) 30%,var(--_fc) 60%,color-mix(in oklch,var(--_fc),white 8%) 100%);border-style:solid;border-width:calc(var(--_fw) * .12);border-color:color-mix(in oklch,var(--_fc),black 40%) color-mix(in oklch,var(--_fc),white 15%) color-mix(in oklch,var(--_fc),white 25%) color-mix(in oklch,var(--_fc),black 30%);box-shadow:inset calc(var(--_fw) * .12) calc(var(--_fw) * .15) calc(var(--_fw) * .4) rgba(0,0,0,.55),inset calc(var(--_fw) * -.06) calc(var(--_fw) * -.08) calc(var(--_fw) * .25) rgba(255,255,255,.04),inset 0 calc(var(--_fw) * .08) calc(var(--_fw) * .2) rgba(0,0,0,.3),inset 1px 1px 2px rgba(0,0,0,.6),inset -1px -1px 1px rgba(255,255,255,.06)}.flip-line{display:flex;gap:var(--flap-gap,.5ch)}.flip{font-size:1em;color:var(--color,canvasText);width:1.5ch;line-height:1.2;display:inline-block;height:1.2em;text-align:center;position:relative;transform-style:preserve-3d;perspective:calc(var(--perspective, 1) * 1em);perspective-origin:50% 58%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--flap-radius,0);overflow:hidden;transform:rotate(var(--base-z,0deg)) rotateY(var(--base-y,0deg));contain:layout style paint;background-image:linear-gradient(180deg,transparent calc(50% - .5px),rgba(0,0,0,.5) 50%,transparent calc(50% + .5px))}.flip:after,.flip:before{content:"";position:absolute;width:calc(10% - .05em);height:calc(20% - .05em);background:var(--board-bg,color-mix(in oklch,canvas,canvasText 15%));top:50%;translate:0 -50%;z-index:10}.flip:before{left:0}.flip:after{right:0}.flip>div{position:absolute;transform-style:preserve-3d;overflow:hidden;inset:0;-webkit-font-smoothing:antialiased;background:linear-gradient(180deg,rgba(255,255,255,.06) 0,transparent 35%,rgba(0,0,0,.08) 100%),radial-gradient(100% 100% at 50% 100%,hsl(0 0% 60%/.15),#0000),var(--flap-bg,hsl(0 0% 15%))}.flip>div:nth-of-type(odd){box-shadow:0 1px 2px rgba(0,0,0,.3);clip-path:inset(0 0 52% 0)}.flip>div:nth-of-type(2n){box-shadow:0 -1px 2px rgba(0,0,0,.2);clip-path:inset(52% 0 0 0)}.flip>div:nth-of-type(2){z-index:2;transform:rotateX(-180deg);backface-visibility:hidden;will-change:transform}.flip>div:nth-of-type(3){z-index:3;backface-visibility:hidden;will-change:transform}.flip-shadow{position:absolute;left:2%;right:2%;bottom:-10%;height:16%;background:radial-gradient(ellipse at 50% 0,rgba(0,0,0,.06) 0,transparent 80%);pointer-events:none;z-index:0}.flip--cursor{outline:2px solid rgb(239 147 0/.7);outline-offset:-2px;border-radius:2px;animation:flip-cursor-blink 1s step-end infinite}@keyframes flip-cursor-blink{0%,to{outline-color:rgb(239 147 0/.7)}50%{outline-color:transparent}}.flip--widget-slot{position:relative}.flip--widget-slot:after{content:"";position:absolute;inset:0;border:1px dashed rgb(99 102 241/.3);border-radius:2px;pointer-events:none;z-index:10}.flip--widget-selected{cursor:grab}.flip--widget-selected:after{border:2px solid rgb(99 102 241/.7);animation:widget-select-pulse 2s ease-in-out infinite}@keyframes widget-select-pulse{0%,to{border-color:rgb(99 102 241/.7)}50%{border-color:rgb(99 102 241/.4)}}@media (max-width:640px){.board{--board-font-size:1.5rem}}@media (min-width:641px) and (max-width:1024px){.board{--board-font-size:2rem}}