.othello-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:100%;height:100%;gap:1px;background:#1a5c1e;border-radius:4px;overflow:hidden}.othello-cell{background:#2e7d32;position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;cursor:default;transition:background .15s ease}.othello-cell.is-legal{cursor:pointer}.othello-cell.is-legal::after{content:'';position:absolute;width:28%;height:28%;border-radius:50%;background:rgba(0,0,0,.2);pointer-events:none}.othello-cell.is-legal:hover{background:#399b3e}.othello-cell.is-legal:hover::after{background:rgba(0,0,0,.35)}.othello-cell.is-last-move{box-shadow:inset 0 0 0 2px rgba(255,255,0,.5)}.othello-piece{width:78%;height:78%;border-radius:50%;position:relative}.othello-piece.black{background:radial-gradient(circle at 35% 35%,#555,#111);box-shadow:0 2px 4px rgba(0,0,0,.5)}.othello-piece.white{background:radial-gradient(circle at 35% 35%,#fff,#ccc);box-shadow:0 2px 4px rgba(0,0,0,.25)}.othello-piece.is-placing{animation:place-piece .3s ease-out}.othello-piece.is-flipping{animation:flip-piece .4s ease-in-out}@keyframes place-piece{0%{transform:scale(0);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes flip-piece{0%{transform:scale(1)}50%{transform:scale(.1)}100%{transform:scale(1)}}.othello-controls{display:flex;gap:.5rem}.othello-controls .button{flex:1}.othello-options{display:flex;flex-direction:column;gap:.75rem;margin-top:.75rem}.othello-options .option-group{display:flex;flex-direction:column;gap:.25rem}.othello-options .option-group label{font-size:.8rem;color:var(--text-color-surface)}.othello-options .option-group select{width:100%;padding:.25rem;font-size:.875rem;border:1px solid var(--draw-color-surface);border-radius:4px;background:var(--background-color-surface);color:var(--text-color-surface)}.othello-score{display:flex;gap:.5rem}.othello-score .score-player{flex:1;display:flex;align-items:center;gap:.5rem;padding:.5rem;background:var(--background-color-surface);border:1px solid var(--draw-color-surface);border-radius:4px;transition:outline .2s ease}.othello-score .score-player.is-active,.othello-score .score-player.is-winner{outline:2px solid var(--draw-color-primary);outline-offset:-1px}.othello-score .score-disc{width:1.25rem;height:1.25rem;border-radius:50%;flex-shrink:0}.othello-score .score-disc.black{background:radial-gradient(circle at 35% 35%,#555,#111);box-shadow:0 1px 2px rgba(0,0,0,.4)}.othello-score .score-disc.white{background:radial-gradient(circle at 35% 35%,#fff,#ccc);box-shadow:0 1px 2px rgba(0,0,0,.2)}.othello-score .score-label{font-size:.75rem;color:var(--text-color-surface)}.othello-score .score-value{margin-left:auto;font-size:1.1rem;font-weight:700;font-family:var(--font-monospace);color:var(--draw-color-primary)}.othello-status{margin-top:.5rem;padding:.375rem .5rem;font-size:.8rem;color:var(--text-color-surface);background:var(--background-color-surface);border:1px solid var(--draw-color-surface);border-radius:4px;text-align:center}.othello-status.is-thinking{animation:pulse-status 1.5s ease-in-out infinite}.othello-status.is-gameover{font-weight:600;color:var(--draw-color-primary)}@keyframes pulse-status{0%,100%{opacity:1}50%{opacity:.5}}.othello-history{max-height:12rem;overflow-y:auto;font-size:.75rem;font-family:var(--font-monospace);color:var(--text-color-surface);padding:.25rem}.othello-history .history-move{display:flex;gap:.5rem;padding:.125rem .25rem;border-radius:2px}.othello-history .history-move:nth-child(even){background:var(--background-color-surface)}.othello-history .history-move .move-number{color:var(--text-color-surface);opacity:.5;min-width:1.5rem;text-align:right}.othello-history .history-move .move-black,.othello-history .history-move .move-white{min-width:2rem}.othello-history .history-move .move-pass{opacity:.4;font-style:italic}