/* Extensión dirigida del diseño compartido: no temas, fuentes ni reset propios. */
.ttt-page .ttt-shell{max-width:560px;margin:24px auto;padding:24px;border:1px solid var(--button-line);border-radius:var(--radius);background:var(--panel);color:var(--ink)}
.ttt-page .ttt-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.ttt-page .ttt-toolbar button,.ttt-page .ttt-dialog button{min-height:48px;min-width:48px;padding:10px 16px;border:1px solid var(--button-line);border-radius:var(--radius);background:var(--cell);color:var(--ink);font:inherit}
.ttt-page .ttt-progress{font-size:16px;color:var(--muted);line-height:1.6}
.ttt-page .ttt-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:360px;margin:20px auto;aspect-ratio:1/1}
.ttt-page .ttt-board button{aspect-ratio:1/1;min-width:48px;min-height:48px;padding:0;border:2px solid var(--button-line);border-radius:var(--radius);background:var(--cell);color:var(--ink);font-family:inherit;font-weight:700;font-size:clamp(30px,10vw,64px);line-height:1}
.ttt-page .ttt-board button[data-mark="1"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ttt-page .ttt-board button[data-mark="2"]{background:var(--coral);color:var(--on-accent);border-color:var(--coral)}
.ttt-page .ttt-board button[aria-disabled="true"]{cursor:default}
.ttt-page .ttt-board button[aria-disabled="true"]:hover{border-color:var(--button-line)}
.ttt-page .ttt-board button[data-mark="1"]:hover{background:var(--ink);border-color:var(--ink)}
.ttt-page .ttt-board button[data-mark="2"]:hover{background:var(--coral);border-color:var(--coral)}
.ttt-page button:focus-visible,.ttt-page a:focus-visible,.ttt-page summary:focus-visible{outline:3px solid var(--coral);outline-offset:4px}
.ttt-page .ttt-board button[data-mark="2"]:focus-visible{outline-color:var(--ink)}
.ttt-page .ttt-paused{min-height:300px;display:grid;place-items:center;text-align:center;border:1px dashed var(--button-line);border-radius:var(--radius);padding:24px}
.ttt-page .ttt-board[hidden],.ttt-page .ttt-paused[hidden]{display:none}
.ttt-page .ttt-status{min-height:5em;line-height:1.6}
.ttt-page .ttt-storage,.ttt-page .ttt-help{font-size:14px;color:var(--muted);line-height:1.6}
.ttt-page .ttt-rules{max-width:640px;margin:32px auto;line-height:1.7}
.ttt-page .ttt-rules h2{font-size:28px}.ttt-page .ttt-rules h3{margin-top:24px}
.ttt-page .ttt-dialog{max-width:min(90vw,440px);box-sizing:border-box;padding:24px;background:var(--panel);color:var(--ink);border:1px solid var(--button-line);border-radius:var(--radius)}
.ttt-page .ttt-dialog::backdrop{background:color-mix(in srgb,var(--bg) 80%,transparent)}
.ttt-page .ttt-dialog button{margin:8px 6px 0 0}.ttt-page #ttt-confirm{background:var(--coral);color:var(--on-accent)}
.ttt-page .ttt-preview-note{max-width:640px;margin:16px auto;color:var(--muted)}
@media(max-width:600px){.ttt-page .ttt-shell{padding:16px}.ttt-page .ttt-toolbar button{flex:1}.ttt-page .ttt-board{gap:8px}}
@media(prefers-reduced-motion:reduce){.ttt-page *{scroll-behavior:auto}}