.ttt{display:grid;grid-template-columns:var(--layout-ttt-settings) minmax(0,1fr);gap:var(--space-48);align-items:start;margin-block:var(--space-32) var(--space-64)}.ttt-settings{display:grid;gap:var(--space-20)}.ttt-settings label{font-size:var(--type-catalog-label-size);line-height:var(--type-catalog-label-line);font-weight:var(--type-catalog-label-weight)}.ttt-settings .field{margin:0}.ttt-settings select{width:100%;min-height:48px}.ttt-play{min-width:0}.ttt-heading{display:grid;gap:var(--space-4);margin-bottom:var(--space-20)}.ttt-status{font-size:var(--type-item-title-size);line-height:var(--type-item-title-line);font-weight:var(--type-item-title-weight);letter-spacing:var(--type-item-title-tracking)}.ttt-board{position:relative;background:var(--color-surface);width:min(100%,var(--layout-ttt-board));aspect-ratio:1;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-control);display:grid;isolation:isolate;user-select:none}.ttt-board[data-infinite="true"]{width:100%;height:var(--layout-ttt-viewport);aspect-ratio:auto;touch-action:none;cursor:grab}.ttt-board[data-panning="true"]{cursor:grabbing}.ttt-row{display:contents}.ttt-cell{position:relative;border:0;border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border);border-radius:0;background:var(--color-surface);color:var(--color-text);padding:0;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;touch-action:manipulation;cursor:pointer}.ttt-board[data-infinite="true"] .ttt-cell{position:absolute;touch-action:none;width:var(--layout-ttt-cell);height:var(--layout-ttt-cell)}.ttt-cell:not([aria-disabled="true"]):hover{background:var(--color-subtle)}.ttt-cell:focus-visible{outline-offset:-4px;z-index:2}.ttt-cell[aria-disabled="true"]{cursor:default}.ttt-cell svg{width:var(--layout-ttt-mark);height:var(--layout-ttt-mark);overflow:visible}.ttt-cell[data-symbol="X"]{color:var(--color-puzzle-blue)}.ttt-cell[data-symbol="O"]{color:var(--color-primary)}.ttt-cell[data-last="true"]:after{content:"";position:absolute;right:8%;top:8%;width:6px;height:6px;border-radius:var(--radius-round);background:var(--color-text)}.ttt-cell[data-win="true"]{background:var(--color-success-surface)}.ttt-cell[data-win="true"]:before{content:"";position:absolute;bottom:10%;width:60%;border-bottom:2px dashed var(--color-success)}.ttt-cell.ttt-arrival svg{animation:ttt-place 180ms var(--motion-ease)}@keyframes ttt-place{from{transform:scale(.85);opacity:.4}to{transform:scale(1);opacity:1}}.ttt-play .game-actions{margin-top:var(--space-20);display:flex;flex-wrap:wrap;gap:var(--space-12)}.ttt-play>#ttt-help{margin-top:var(--space-16)}@media(max-width:760px){.ttt{grid-template-columns:minmax(0,1fr);gap:var(--space-24)}.ttt-settings{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16)}.ttt-settings>.help{grid-column:1/-1}.ttt-board[data-infinite="true"]{height:var(--layout-ttt-viewport-mobile)}.ttt-settings>.button{align-self:end}.ttt-status{font-size:var(--type-item-title-size)}}@media(prefers-reduced-motion:reduce){.ttt-cell.ttt-arrival svg{animation:none}}

.ttt-options>summary{display:none;align-items:center;justify-content:space-between;gap:var(--space-16);min-height:48px;font-size:var(--type-label-size);line-height:var(--type-label-line);font-weight:var(--type-label-weight);list-style:none;cursor:pointer}.ttt-options>summary::-webkit-details-marker{display:none}.ttt-options>summary .icon{transition:transform var(--motion-duration) var(--motion-ease)}.ttt-options[open]>summary .icon{transform:rotate(180deg)}@media(min-width:761px){.ttt-options:not([open])>.ttt-settings{display:grid}}@media(max-width:760px){.ttt-options>summary{display:flex;border-block:1px solid var(--color-divider);padding-block:var(--space-12)}.ttt-options[open]>.ttt-settings{padding-top:var(--space-20)}.ttt{gap:var(--space-20)}}

/* Shared settings affordances and continuous world camera. */
.ttt-settings select{appearance:none;-webkit-appearance:none;padding-right:var(--space-48);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23546051' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-16) center;background-size:20px 20px}
.ttt-level{margin:0;padding:0;border:0;min-width:0}.ttt-level legend{padding:0;margin-bottom:var(--space-8);font-size:var(--type-catalog-label-size);line-height:var(--type-catalog-label-line);font-weight:var(--type-catalog-label-weight)}.ttt-stars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}.ttt-star-choice{position:relative;cursor:pointer}.ttt-star-choice input{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.ttt-star-choice>span{display:flex;align-items:center;justify-content:center;gap:var(--space-4);min-height:48px;padding:var(--space-8) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-control);color:var(--color-secondary);background:var(--color-surface)}.ttt-star{width:var(--layout-ttt-star);height:var(--layout-ttt-star);flex-shrink:0}.ttt-star-choice input:not(:checked)+span .ttt-star path{fill:none}.ttt-star-choice:hover>span{background:var(--color-subtle)}.ttt-star-choice input:checked+span{background:var(--color-selection);color:var(--color-primary);border-color:var(--color-primary)}.ttt-star-choice input:focus-visible+span{outline:2px solid var(--color-focus);outline-offset:4px}.ttt-difficulty{display:inline-flex;gap:var(--space-4);vertical-align:middle;color:var(--color-secondary)}.ttt-world{position:absolute;left:0;top:0;will-change:transform}.ttt-board[data-infinite="true"] .ttt-cell{width:var(--ttt-current-cell,var(--layout-ttt-cell));height:var(--ttt-current-cell,var(--layout-ttt-cell))}.ttt-zoom{display:flex;gap:var(--space-8);margin-top:var(--space-16)}.ttt-zoom button{min-width:48px;padding:var(--space-12)}.ttt-zoom [data-zoom="reset"]{min-width:80px;font-variant-numeric:tabular-nums}.ttt-board[data-panning="true"] .ttt-cell{cursor:grabbing}.ttt-rule .ttt-star{width:16px;height:16px}@media(max-width:760px){.ttt-level,.ttt-settings>.field:first-child{grid-column:1/-1}}@media(forced-colors:active){.ttt-star-choice input:checked+span{outline:2px solid Highlight}}