.othello-area { max-width:520px; }
.info { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; color:var(--muted); font-size:14px; }
.info b { color:var(--ink); }
.turn { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--ink); }
.dot { width:14px; height:14px; border-radius:50%; display:inline-block; }
.dot.black { background:var(--ink); }
.dot.white { background:var(--paper); border:1px solid var(--rule); }
.counts, .record { display:flex; gap:16px; }
.board { display:grid; grid-template-columns:repeat(8,1fr); aspect-ratio:1/1; border:1px solid var(--rule); background:var(--panel); }
.cell { position:relative; border:1px solid var(--rule); background:transparent; padding:0; }
.cell .disc { position:absolute; inset:14%; border-radius:50%; }
.cell .disc.black { background:var(--ink); }
.cell .disc.white { background:var(--paper); border:1px solid var(--rule); }
.cell.hint .hint-dot { position:absolute; inset:38%; border-radius:50%; background:var(--blue); opacity:.45; pointer-events:none; }
.cell.hint:hover .hint-dot { opacity:.85; }
.cell.last { outline:2px solid var(--cyan); outline-offset:-2px; }
.actions { display:flex; gap:10px; margin-top:14px; justify-content:center; }
.over-panel { max-width:340px; margin:18px auto 0; padding:24px; text-align:center; }
.over-panel h2 { margin:0 0 4px; letter-spacing:-.03em; }
.over-sub { color:var(--muted); font-size:14px; margin:0 0 14px; }
@media (max-width:780px) { .info { flex-direction:column; align-items:flex-start; gap:8px; } .cell .disc { inset:10%; } }