.page{--zp-paper: #F4F1EA;--zp-panel: #FFFFFF;--zp-thin: #D9D4C8;--zp-ink: #23262C;--zp-path: #E8A33C;--zp-head: #C7801A}.game-title,.panel h2,.banner h2{font-family:var(--font-round);font-weight:600}.board-wrap{display:flex;justify-content:center;background:var(--zp-paper);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-3);container-type:inline-size}.zp{--cell: clamp(34px, calc((100cqw - 40px) / var(--n)), 64px);--line: calc(var(--cell) * .42);display:grid;grid-template-columns:repeat(var(--n),var(--cell));grid-template-rows:repeat(var(--n),var(--cell));background:var(--zp-panel);border:2px solid var(--zp-ink);border-radius:var(--radius-sm);overflow:hidden;user-select:none;-webkit-user-select:none}.zp-cell{position:relative;width:var(--cell);height:var(--cell);border:0;border-right:1px solid var(--zp-thin);border-bottom:1px solid var(--zp-thin);padding:0;background:var(--zp-panel);box-shadow:var(--wr, 0 0 0 0 transparent),var(--wb, 0 0 0 0 transparent);touch-action:none;cursor:pointer}.zp-cell.wall-r{--wr: inset -4px 0 0 var(--zp-ink)}.zp-cell.wall-b{--wb: inset 0 -4px 0 var(--zp-ink)}.zp-cell:focus-visible{outline:3px solid var(--color-focus);outline-offset:-3px;z-index:2}.zp-line{display:none;position:absolute;top:0;right:0;bottom:0;left:0}.zp-cell.on .zp-line{display:block}.zp-cell.on .zp-line:before{content:"";position:absolute;left:calc(50% - var(--line) / 2);top:calc(50% - var(--line) / 2);width:var(--line);height:var(--line);border-radius:50%;background:var(--zp-path)}.zp-cell:before,.zp-cell:after{content:"";position:absolute;display:none;background:var(--zp-path);z-index:0}.zp-cell.on:before,.zp-cell.on:after{display:block}.zp-cell.in-u:before,.zp-cell.out-u:after{left:calc(50% - var(--line) / 2);width:var(--line);top:-1px;height:calc(50% + 1px)}.zp-cell.in-d:before,.zp-cell.out-d:after{left:calc(50% - var(--line) / 2);width:var(--line);top:50%;height:calc(50% + 1px)}.zp-cell.in-l:before,.zp-cell.out-l:after{top:calc(50% - var(--line) / 2);height:var(--line);left:-1px;width:calc(50% + 1px)}.zp-cell.in-r:before,.zp-cell.out-r:after{top:calc(50% - var(--line) / 2);height:var(--line);left:50%;width:calc(50% + 1px)}.zp-cell.tail:before,.zp-cell.head:after{display:none}.zp-cell.head .zp-line:before{background:var(--zp-head)}.zp-num{position:absolute;z-index:1;left:50%;top:50%;width:calc(var(--cell) * .52);height:calc(var(--cell) * .52);transform:translate(-50%,-50%);border-radius:50%;display:none;align-items:center;justify-content:center;background:var(--zp-ink);color:var(--zp-panel);font-family:var(--font-round);font-weight:600;font-size:calc(var(--cell) * .3);line-height:1}.zp-num:not(:empty){display:flex}.zp-cell.shake{animation:rh-shake .24s var(--ease)}@keyframes rh-shake{25%{transform:translate(-3px)}75%{transform:translate(3px)}}.zp--done{border-color:var(--color-good);animation:rh-flash .5s var(--ease) 2}.zp--done .zp-cell{cursor:default}.zp--done .zp-cell:before,.zp--done .zp-cell:after,.zp--done .zp-cell.on .zp-line:before{background:var(--color-good)}.chip strong{font-weight:600;font-variant-numeric:tabular-nums}@media (max-width: 480px){.board-wrap{padding:var(--space-2)}.zp{--cell: clamp(34px, calc((100cqw - 24px) / var(--n)), 64px)}}@media (prefers-reduced-motion: reduce){.zp-cell.shake,.zp--done{animation:none}}