.othello-game h1 { margin: 0 0 18px; font: 500 30px/1.3 var(--sans); }
.othello-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin: 4px 0 18px; font-size: 12px; }
.othello-players > span { display: inline-flex; align-items: center; gap: 8px; }
.othello-disc { display: block; width: 76%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--ink); }
.othello-disc.is-black { background: var(--ink); }
.othello-disc.is-white { background: var(--paper); border: 2px solid var(--ink); }
.othello-players .othello-disc { width: 15px; }
.othello-board { display: grid; grid-template-columns: repeat(8, 1fr); width: 100%; max-width: 400px; margin: 0 auto; border: 1px solid var(--green); border-radius: 3px; overflow: hidden; background: var(--tint); }
.othello-board > p { grid-column: 1 / -1; padding: 16px; }
.othello-game .othello-cell { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; min-height: 0; padding: 4px; border: 0; border-radius: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; touch-action: manipulation; }
.othello-cell:nth-child(8n) { border-right: 0; }
.othello-cell:nth-child(n+57) { border-bottom: 0; }
.othello-cell[data-legal='true'] { cursor: pointer; }
.othello-cell[data-legal='true']:hover { background: color-mix(in srgb, var(--green) 16%, var(--tint)); }
.othello-cell .othello-hint { width: 76%; aspect-ratio: 1; border: 1px dashed var(--green); border-radius: 50%; background: color-mix(in srgb, var(--green) 7%, var(--tint)); opacity: .55; }
.othello-cell.is-last::after { content: ''; position: absolute; inset: 3px; background: linear-gradient(var(--green), var(--green)) left top / 8px 2px, linear-gradient(var(--green), var(--green)) left top / 2px 8px, linear-gradient(var(--green), var(--green)) right top / 8px 2px, linear-gradient(var(--green), var(--green)) right top / 2px 8px, linear-gradient(var(--green), var(--green)) left bottom / 8px 2px, linear-gradient(var(--green), var(--green)) left bottom / 2px 8px, linear-gradient(var(--green), var(--green)) right bottom / 8px 2px, linear-gradient(var(--green), var(--green)) right bottom / 2px 8px; background-repeat: no-repeat; pointer-events: none; }
.othello-cell:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; z-index: 1; }
@media (max-width: 380px) { .othello-players { gap: 10px; } .othello-game .othello-cell { padding: 2px; } }