:root { font-family: system-ui, sans-serif; color: #233e3b; background: #edf4ef; line-height: 1.55; }
* { box-sizing: border-box; } body { margin: 0; } main { max-width: 760px; margin: auto; padding: 1.5rem; }
a { color: #17564d; } h1 { margin-bottom: .25rem; }
button, select { font: inherit; min-height: 48px; border: 2px solid #436760; border-radius: .6rem; background: white; color: #203b38; padding: .55rem .8rem; cursor: pointer; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #b35d20; outline-offset: 2px; }
button:disabled { cursor: default; } .settings, .controls { display: flex; flex-wrap: wrap; gap: .5rem; } .board { overflow: auto; margin: 1rem 0; }
.row { display: flex; width: max-content; gap: .25rem; margin-bottom: .25rem; }
.cell { width: var(--cell, 56px); min-height: 52px; padding: 0; font-weight: 700; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.cell:focus-visible { outline: none; box-shadow: inset 0 0 0 5px #b35d20; }
.owner-1 { background: #c2e6d1; color: #164e36; border-style: double; }
.owner-2 { background: #f2d9ba; color: #5c361f; border-style: dashed; } .result { margin-top: 1rem; padding: 1rem; background: #d6ecda; border-radius: .75rem; }
.cell.winning { box-shadow: inset 0 0 0 4px #244b90; text-decoration: underline; }
.more { margin: .5rem 0; } .more summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }