.reversi-program{padding:12px;display:flex;flex-direction:column;gap:10px;min-height:100%;background:#c0c0c0;color:#111;font:13px Arial,sans-serif}.reversi-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.reversi-toolbar label{display:flex;align-items:center;gap:4px;white-space:nowrap}.reversi-toolbar>span{font-size:11px;color:#333}.reversi-scores{display:flex;justify-content:center;gap:28px;font-variant-numeric:tabular-nums}.reversi-scores>span{display:flex;align-items:center;gap:7px}.reversi-scores .reversi-chip{width:20px;height:20px;flex-shrink:0}.reversi-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:min(100%,440px);aspect-ratio:1;margin:0 auto;border:4px inset #e5e5e5;background:#005327;box-shadow:1px 1px 0 #808080}.reversi-row{display:contents}.reversi-board .reversi-cell{display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-width:0;padding:8%;border:1px solid #004c22;border-radius:0;background:#008b44;box-shadow:none;position:relative;cursor:default}.reversi-board .reversi-cell.legal{cursor:pointer}.reversi-board .reversi-cell.legal:hover{background:#159451}.reversi-board .reversi-cell:focus-visible{outline:2px solid #fff28a;outline-offset:-4px;z-index:1}.reversi-board .reversi-cell.last::after{content:"";position:absolute;inset:4px;border:1px solid #ffdf69;pointer-events:none}.reversi-chip{display:block;width:100%;aspect-ratio:1;border-radius:50%;box-shadow:1px 2px 2px #002d2490}.reversi-chip.black{background:radial-gradient(circle at 35% 26%,#555 0%,#202020 37%,#050505 78%);border:1px solid #090909}.reversi-chip.white{background:radial-gradient(circle at 35% 26%,#fff 0%,#eee 46%,#aaa 100%);border:1px solid #aaa}.reversi-hint{width:18%;aspect-ratio:1;border-radius:50%;background:#ddf7d6a0}.reversi-status{margin:0;min-height:35px;padding:7px 9px;border:1px inset #eee;background:#d3d3d3;line-height:1.45}.reversi-rules{font-size:12px;line-height:1.5}.reversi-rules summary{cursor:pointer;text-decoration:underline;text-underline-offset:2px}.reversi-rules p{margin:8px 0}.reversi-program button:focus-visible,.reversi-program input:focus-visible{outline:2px solid #000080;outline-offset:2px}@media(max-width:550px){.reversi-program{padding:8px;gap:8px}.reversi-toolbar{gap:8px}.reversi-toolbar>span{flex-basis:100%}.reversi-board{border-width:3px}.reversi-scores{gap:20px}.reversi-status{font-size:12px}}